/* src/css/company.css
 *
 * Mini Truck Co., the dealer side (scripts/web/company.mjs). Otto, 30 October 2026.
 * Linked on this site only, after family.css, so it reads the same tokens: --g
 * ground, --p panel, --r rule, --i ink, --m muted, --a the red fill with --ai on
 * it, --at the red for text, --fh Barlow Condensed in capitals, --ft Hanken
 * Grotesk. The jandatraining.com way of building a page in this site's own red,
 * white and black: a statement beside a photograph with a live object on it, a
 * strip of true numbers, one idea per band, a dock on a phone.
 * No oxford commas, no em dashes. */

.ck {
  margin: 0 0 12px;
  font: 600 12px/1.2 var(--ft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--at);
}
.ck::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--a);
}

/* ---------------------------------------------------------------- the hero */
.chero {
  padding: clamp(36px, 6vw, 84px) 0 clamp(28px, 4vw, 56px);
}
.chero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .chero__in {
    grid-template-columns: minmax(0, 1fr);
  }
}
.chero__h {
  margin: 0;
  font: var(--fw, 700) clamp(44px, 6.6vw, 92px) / 0.94 var(--fh);
  text-transform: var(--fc, none);
  letter-spacing: -0.005em;
  color: var(--i);
}
.chero__sub {
  max-width: 50ch;
  margin: 22px 0 0;
  font: 400 clamp(17px, 1.5vw, 19px) / 1.55 var(--ft);
  color: var(--m);
}
.chero__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}
.chero__plate {
  position: relative;
  margin: 0;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  background: #111;
}
.chero__plate > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1300 / 683;
  object-fit: cover;
}
.chero__plate .clead {
  position: absolute;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  width: min(300px, 62%);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.6);
}
.chero__plate figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font: 400 11px/1 var(--ft);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
@media (max-width: 600px) {
  /* relative and lifted, so the card paints over the picture it overlaps and not
     under it (a static block's background paints below the image's pixels) */
  .chero__plate .clead {
    position: relative;
    z-index: 1;
    width: auto;
    margin: -28px 12px 12px;
    box-shadow: none;
  }
  .chero__plate figcaption {
    display: none;
  }
}

/* ---------------------------------------------------------------- the numbers */
.cfacts__l {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}
@media (max-width: 760px) {
  .cfacts__l {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cfacts__l > div {
  padding: 16px 0 6px;
  border-top: 3px solid var(--i);
}
.cfacts__l dd {
  margin: 0;
  font: var(--fw, 700) clamp(44px, 6vw, 72px) / 0.9 var(--fh);
  color: var(--i);
}
.cfacts__l > div:last-child dd {
  color: var(--at);
}
.cfacts__l dt {
  margin-top: 8px;
  font: 500 14px/1.4 var(--ft);
  color: var(--m);
}

/* ---------------------------------------------------------------- the lead card */
.clead {
  display: grid;
  gap: 10px;
  padding: 18px 18px 14px;
  border: 1px solid var(--r);
  border-radius: 16px;
  background: #fff;
  color: #111;
  font-family: var(--ft);
}
.clead__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.clead__tag {
  padding: 4px 9px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font: 700 11px/1 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clead__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--ft);
  color: #3f6a4a;
}
.clead__read i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3f8a55;
}
.clead__k {
  margin: 4px 0 0;
  font: 700 22px/1 var(--fh);
  text-transform: var(--fc, none);
  color: #111;
}
.clead__rows {
  display: grid;
  gap: 0;
  margin: 0;
}
.clead__rows > div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #e4e4e4;
}
.clead__rows dt {
  font: 600 11px/1.5 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.clead__rows dd {
  margin: 0;
  font: 500 14px/1.45 var(--ft);
}
.clead__ticks {
  display: grid;
  gap: 6px;
  margin: 2px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #e4e4e4;
  list-style: none;
}
.clead__ticks li {
  display: flex;
  gap: 8px;
  align-items: center;
  font: 500 13px/1.3 var(--ft);
}
.clead__ticks i {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #b62330;
}
.clead__ticks i::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.clead__foot {
  margin: 2px 0 0;
  font: 400 12px/1.3 var(--ft);
  color: #6b6b6b;
}
.clead--compact {
  padding: 14px 14px 10px;
}
.clead--compact .clead__k {
  font-size: 19px;
}

/* ---------------------------------------------------------------- the flow */
.cflow__l {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) {
  .cflow__l {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cflow__s {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
}
.cflow__pic {
  display: block;
  border: 1px solid var(--r);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--p);
}
.cflow__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.4s ease;
}
.cflow__pic:hover img {
  transform: scale(1.02);
}
.cflow__pic--lead {
  display: grid;
  place-items: center;
  padding: 54px 14px 14px;
  background: var(--p);
}
.cflow__pic--lead .clead {
  width: min(320px, 100%);
}
.cflow__n {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--a);
  color: var(--ai);
  font: var(--fw, 700) 20px/1 var(--fh);
}
.cflow__site {
  margin: 10px 0 0;
  font: 600 12px/1 var(--ft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--at);
}
.cflow__s .fh3 {
  margin: 2px 0 0;
}
.cflow__s p:last-child {
  margin: 0;
  font: 400 15px/1.55 var(--ft);
  color: var(--m);
}

/* ---------------------------------------------------------------- the lead band */
.clead-band .clead {
  max-width: 440px;
  justify-self: end;
}
.cnote {
  margin-top: 14px;
  font: 400 15px/1.5 var(--ft);
  color: var(--m);
}
.cnote a,
.cdeal__demo a {
  color: var(--at);
}

/* ---------------------------------------------------------------- the kit */
.ckit__g {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 1100px) {
  .ckit__g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .ckit__g {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ckit__c {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 14px 14px 18px;
  border: 1px solid var(--r);
  border-radius: 18px;
}
.ckit__c .fh3 {
  margin: 8px 0 0;
}
.ckit__c p {
  margin: 0;
  font: 400 14px/1.5 var(--ft);
  color: var(--m);
}
.ckit__go {
  font: 600 14px/1 var(--ft);
  color: var(--at);
}
.ckit__v {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  background: var(--p);
}
.ckit__pic,
.ckit__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.ckit__phone {
  height: 100%;
  padding-top: 12px;
}
.ckit__phone img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: top;
}
.cmap {
  width: 100%;
  padding: 6px;
}
.cmap .map svg {
  display: block;
  width: 100%;
  height: auto;
}
.cmap .st {
  fill: color-mix(in srgb, var(--r) 55%, var(--p));
  stroke: var(--g);
  stroke-width: 1;
}
.cpin {
  fill: var(--a);
  stroke: var(--g);
  stroke-width: 2.5;
}
.cpin__halo {
  fill: var(--a);
  opacity: 0.2;
}
.c25 {
  display: grid;
  gap: 6px;
  width: 82%;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.35);
}
.c25__in {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d6dbe2;
  border-radius: 10px;
  font: 500 14px/1 var(--ft);
}
.c25__in span {
  color: #6b6b6b;
}
.c25__out {
  margin: 6px 0 0;
  font: 700 26px/1 var(--fh);
  text-transform: var(--fc, none);
  color: #275bdb;
}
.c25__s {
  margin: 0;
  font: 400 13px/1 var(--ft);
  color: #6b6b6b;
}

/* ---------------------------------------------------------------- the phones */
.cphones__r {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: clamp(14px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.cphones__p {
  margin: 0;
  scroll-snap-align: start;
}
.cphones__p img {
  display: block;
  width: 100%;
  height: auto;
}
.cphones__p figcaption {
  margin-top: 10px;
  font: var(--fw, 700) 18px/1.15 var(--fh);
  text-transform: var(--fc, none);
}

/* ---------------------------------------------------------------- where it stands */
.cstand__l {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) {
  .cstand__l {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .cstand__l {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cstand__l li {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  background: var(--p);
  font: 400 14px/1.5 var(--ft);
  color: var(--m);
}
.cstand__l b {
  font: var(--fw, 700) 21px/1.1 var(--fh);
  text-transform: var(--fc, none);
  color: var(--i);
}

/* ---------------------------------------------------------------- the dock */
.cdock {
  display: none;
}
@media (max-width: 760px) {
  .f--company {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .cdock {
    position: fixed;
    z-index: 50;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.25fr;
    gap: 4px;
    padding: 6px;
    border-radius: 20px;
    background: #111;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
  }
  .cdock__a {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 14px;
    color: #fff;
    font: 500 11px/1 var(--ft);
    text-decoration: none;
  }
  .cdock__a svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cdock__a--go {
    background: #b62330;
    font-weight: 600;
  }
}

/* ---------------------------------------------------------------- the papers */
.clegal {
  display: grid;
  gap: 26px;
}
.clegal__s {
  display: grid;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--r);
}
.clegal__s p {
  margin: 0;
  font: 400 16px/1.6 var(--ft);
}
.clegal__s a {
  color: var(--at);
}

.ctel {
  display: grid;
  gap: 4px;
  margin: 22px 0 0;
}
.ctel a {
  font: 700 30px/1.05 var(--fh);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.ctel a:hover {
  text-decoration: underline;
}
.ctel span {
  font: 400 15px/1.4 var(--ft);
  color: var(--m);
}
.ff__links a[href^='tel:'] {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the help card
 * The hero's card since Otto's second pass, 30 October night (company.mjs helpCard):
 * three ways in, the way a person on the phone would ask, and the line. */
.chelp {
  position: absolute;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  width: min(320px, 64%);
  display: grid;
  gap: 2px;
  padding: 16px 16px 12px;
  border-radius: 16px;
  background: #fff;
  color: #111;
  font-family: var(--ft);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.6);
}
.chelp__k {
  margin: 0 0 6px;
  font: var(--fw, 700) 20px/1.1 var(--fh);
  text-transform: var(--fc, none);
}
.chelp__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #e4e4e4;
  color: #111;
  text-decoration: none;
}
.chelp__r b {
  font: 600 15px/1.25 var(--ft);
}
.chelp__r span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1 var(--ft);
  color: #a6202c;
  white-space: nowrap;
}
.chelp__r span::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.chelp__r:hover b {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chelp__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 11px;
  border-radius: 10px;
  background: #b62330;
  color: #fff;
  font: 700 15px/1 var(--ft);
  text-decoration: none;
}
.chelp__tel i {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #fff;
}
@media (max-width: 600px) {
  .chelp {
    position: relative;
    z-index: 1;
    right: auto;
    bottom: auto;
    width: auto;
    margin: -28px 12px 12px;
    box-shadow: none;
  }
}

/* ---------------------------------------------------------------- two ways in */
.cways__g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.cways__c {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 12px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--r);
  border-radius: 20px;
  background: var(--p);
}
.cways__c p {
  margin: 0;
  max-width: 46ch;
  font: 400 17px/1.55 var(--ft);
  color: var(--m);
}
.cways__c .fh3 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
}
.cways__k {
  font: 600 12px/1 var(--ft) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--at) !important;
}
.cways__c--sell {
  background: #111;
  border-color: #111;
}
.cways__c--sell .fh3 {
  color: #fff;
}
.cways__c--sell p {
  color: #c2c2c2;
}
.cways__c--sell .cways__k {
  color: #ff9299 !important;
}
@media (max-width: 760px) {
  .cways__g {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cways__c--sell .fbtn {
  background: #fff;
  color: #111;
  border-color: #fff;
}

/* ---------------------------------------------------------------- delivered to you
 * /delivered/, company.mjs deliveredPage. Otto, 31 October. The terms card is the
 * live object beside the statement, white on every theme like the lead card, the
 * two halves in the display face. Measured: #111 on #fff 18.9, the red rule is
 * decoration. The map shows every state filled in the red at low strength, the
 * country as the answer to where. */
.cterms {
  display: grid;
  gap: 4px;
  padding: 22px 24px 18px;
  border: 1px solid var(--r);
  border-radius: 20px;
  background: #fff;
  color: #111;
  font-family: var(--ft);
  box-shadow: 0 28px 60px -34px rgba(0, 0, 0, 0.55);
}
.cterms__k {
  margin: 0 0 6px;
  font: 600 12px/1 var(--ft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4d4d4d;
}
.cterms__r {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid #e3e3e3;
}
.cterms__r b {
  font: var(--fw, 700) clamp(56px, 7vw, 88px) / 0.9 var(--fh);
  letter-spacing: -0.01em;
  color: #111;
}
.cterms__r span {
  font: var(--fw, 700) clamp(22px, 2.4vw, 30px) / 1 var(--fh);
  text-transform: var(--fc, none);
  color: #a6202c;
}
.cterms__f {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e3e3e3;
  font: 500 15px/1.4 var(--ft);
  color: #333;
}
.cterms__f i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #b62330;
}
.cdlv__l {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (max-width: 900px) {
  .cdlv__l {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cdlv__l li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border-radius: 16px;
  background: var(--p);
  font: 400 15px/1.55 var(--ft);
  color: var(--m);
}
.cdlv__l .fh3 {
  margin: 4px 0 0;
}
.cdlv__l p {
  margin: 0;
}
.cdlv__n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--a);
  color: var(--ai);
  font: var(--fw, 700) 20px/1 var(--fh);
}
.cmap--all .st {
  fill: color-mix(in srgb, var(--a) 26%, var(--p));
  stroke: var(--p);
  stroke-width: 1.2;
}

/* the sample lead in the flow, on a phone. Aster, 31 October 2026. The frame is
   16 by 10 like the two screenshots beside it, but the lead card is taller than
   that at phone width, so its title ran under the step number and the frame cut
   it. Here the frame grows to the card. And `.cflow__s p:last-child` above,
   meant for the step's own line, also caught the card's foot and gave it the
   theme's text colour, 1.8 to 1 on the white card in dark. The card is always
   white, so its foot keeps its own grey, 5.3 to 1, at one element more than that rule. */
.cflow__pic--lead { aspect-ratio: auto; min-height: 0; }
.cflow__s p.clead__foot { margin: 2px 0 0; font: 400 12px/1.3 var(--ft); color: #6b6b6b; }