/* ============================================================
   B12 Transportation Group — V1 "Field Notes"
   Editorial / asymmetric. Warm off-white ground, navy and brown.
   Structural device: plant location codes + dimension ticks.

   Brand: navy #000033, brown #8b5e3b.
   --tan is a lightened brown used only on navy, where full-
   strength brown falls to 3.6:1 and fails contrast.
   ============================================================ */

:root {
  --paper:    #f7f5f1;
  --paper-2:  #ece7de;
  --ink:      #14141f;
  --ink-2:    #5b5b68;
  --navy:     #000033;
  --navy-2:   #000022;
  --brown:    #8b5e3b;
  --tan:      #c9a184;
  --rule:     #d9d3c9;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Public Sans', system-ui, sans-serif;
  --data:    'Courier Prime', ui-monospace, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Long product/place names must not force horizontal scroll on
     narrow phones, where the display sizes are still large. */
  overflow-wrap: break-word;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brown); }

:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: 0.5rem; top: 0.5rem;
  transform: translateY(-250%);
  background: var(--navy); color: var(--paper);
  padding: 0.75rem 1.25rem; z-index: 99;
  font-family: var(--data); font-size: 0.8rem;
}
.skip:focus { transform: none; }

/* ── Reveal ─────────────────────────────────────────────── */
.rise { opacity: 0; transform: translateY(18px); }
.rise.in { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ── Structural device: tick label ──────────────────────── */
/* A hairline that terminates in a tick, echoing a dimension
   callout on a fabrication drawing. */
.tick {
  display: block;
  position: relative;
  font-family: var(--data);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 0.9rem;
}
.tick::before {
  content: '';
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--rule);
}
.tick::after {
  content: '';
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 1px; height: 7px; background: var(--brown);
}
.tick--light { color: var(--tan); }
.tick--light::before { background: rgba(201, 161, 132, 0.35); }
.tick--brown { color: var(--paper); }
.tick--brown::before { background: rgba(247, 245, 241, 0.4); }
.tick--brown::after { background: var(--paper); }

/* ── Nav ────────────────────────────────────────────────── */
.nav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.nav__in {
  max-width: 78rem; margin-inline: auto;
  padding: 1.25rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Placeholder wordmark — set in type so each version reads as its
   own identity. Replace with client logo file. */
/* The supplied lockup already sets "B12" over the wordmark, so the
   mark is a single image. b12tg-logo-light.svg is the reversed
   artwork used on the navy footer. */
.mark { display: flex; align-items: center; text-decoration: none; }
.mark__img { display: block; height: 2.75rem; width: auto; }
.foot .mark__img { height: 3rem; }

.nav__contact {
  font-family: var(--data);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 1px solid var(--brown);
  padding-bottom: 2px;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding: clamp(3rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); }

.hero__h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.5rem, 1.2rem + 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(3rem, 7vw, 6rem);
  max-width: 16ch;
}
.hero__h1 em {
  font-style: normal;
  color: var(--brown);
}

.hero__grid { display: grid; gap: 1.75rem; }
.hero__label { }
.hero__body .lead {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--navy);
  max-width: 34ch;
}
.hero__body p:not(.lead) { color: var(--ink-2); }

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: 2fr 5fr 5fr;
    gap: 2.5rem;
    align-items: start;
  }
  .hero__body {
    grid-column: 2 / -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
  }
  .hero__body .lead { max-width: none; }
}

/* ── Imagery ────────────────────────────────────────────── */
.banner__img {
  display: block; width: 100%;
  height: clamp(14rem, 34vw, 26rem);
  object-fit: cover;
  border-block: 1px solid var(--rule);
}
/* The photo is a tall portrait, so left as a grid item its own aspect
   ratio would set the row height. Taking it out of flow lets the brown
   panel alone size the band, and the image then matches it exactly.
   Stacked (under 60rem) there is no panel to match, so the cell keeps
   an explicit height of its own. */
.vision__media { position: relative; min-height: clamp(14rem, 45vw, 22rem); }
.vision__img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

/* Real photography takes the same footprint the placeholder held. */
.co__img {
  width: 100%; height: 100%;
  min-height: clamp(13rem, 26vw, 20rem);
  object-fit: cover;
  border: 1px solid var(--rule);
}

/* ── Mission ────────────────────────────────────────────── */
.mission {
  background: var(--navy);
  color: var(--paper);
  padding: clamp(3.5rem, 9vw, 7rem) 0;
}
.split { display: grid; gap: 1.75rem; }
.statement {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 0.9rem + 1.9vw, 2.5rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
  max-width: 28ch;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 2fr 10fr; gap: 2.5rem; align-items: start; }
  .statement { max-width: 24ch; }
}

/* ── Vision ─────────────────────────────────────────────── */
.vision { display: grid; }
.vision__panel {
  background: var(--brown);
  color: var(--paper);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: center; gap: 1.75rem;
}
.products__list { list-style: none; margin: 0; padding: 0; }
.products__list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(247, 245, 241, 0.25);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.products__list li:first-child { padding-top: 0; }
@media (min-width: 60rem) {
  .vision { grid-template-columns: 7fr 5fr; }
  .vision__panel { padding-inline: clamp(2.5rem, 4vw, 4rem); }
  /* Side by side: drop the explicit height and stretch to the panel. */
  .vision__media { min-height: 0; }
}

/* ── Markets ────────────────────────────────────────────── */
.markets {
  max-width: 78rem; margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter);
}

.markets__groups {
  display: grid; gap: 2.5rem;
  margin-top: 1.75rem;
}
@media (min-width: 45rem) { .markets__groups { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.markets__head {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--navy);
}
.markets__list { list-style: none; margin: 0; padding: 0; }
.markets__list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
  letter-spacing: -0.01em;
}

/* ── Leadership ─────────────────────────────────────────── */
.leadership-wrap {
  max-width: 78rem; margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 9vw, 7rem);
}
.leadership {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.leadership__list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.leadership__list li { border-top: 1px dashed var(--rule); }
@media (min-width: 45rem) {
  .leadership__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
}
/* Each name is a button that opens that person's bio dialog. */
.leader {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  width: 100%;
  padding: 1rem 0;
  background: none; border: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.leader__role {
  font-family: var(--data); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brown);
}
.leader__name {
  font-family: var(--display); font-weight: 500; font-size: 1.15rem;
  letter-spacing: -0.02em; color: var(--navy);
}
.leader__more {
  font-family: var(--data); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  margin-top: 0.35rem;
}
.leader:hover .leader__name,
.leader:hover .leader__more { color: var(--brown); }

/* ── Leadership bio dialog ──────────────────────────────── */
.bio {
  width: min(44rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  overflow: auto;
}
.bio::backdrop { background: rgba(0, 0, 34, 0.72); }
/* Fade and lift in, and back out on close. The discrete display/overlay
   transitions keep the dialog painted until the exit finishes; browsers
   without @starting-style simply show it at once. */
.bio {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.2,.7,.3,1),
              overlay 0.28s allow-discrete, display 0.28s allow-discrete;
}
.bio::backdrop {
  opacity: 0;
  transition: opacity 0.28s ease, overlay 0.28s allow-discrete, display 0.28s allow-discrete;
}
.bio[open], .bio[open]::backdrop { opacity: 1; }
.bio[open] { transform: none; }
@starting-style {
  .bio[open], .bio[open]::backdrop { opacity: 0; }
  .bio[open] { transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .bio, .bio::backdrop { transition: none; }
}
.bio__in {
  display: grid; gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
/* Capped at 200px: the Sprague portrait is only 200px native. */
.bio__img { width: 12.5rem; height: auto; border: 1px solid var(--rule); }
.bio__name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--navy);
  margin: 0.4rem 0 1rem;
}
.bio__text p { color: var(--ink-2); }
.bio__close {
  position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 0;
  font-family: var(--display); font-size: 1.75rem; line-height: 1;
  color: var(--navy); cursor: pointer;
}
.bio__close:hover { color: var(--brown); }
@media (min-width: 45rem) {
  .bio__in { grid-template-columns: 12.5rem 1fr; column-gap: 2.25rem; align-items: start; }
}

/* ── Companies ──────────────────────────────────────────── */
.companies {
  border-top: 1px solid var(--rule);
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 4rem);
}
.companies__head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.companies__intro {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.25rem);
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--navy);
  margin-top: 1.5rem;
  max-width: 20ch;
}

.co {
  display: grid; gap: 1.75rem;
  max-width: 78rem; margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  border-top: 1px solid var(--rule);
}
/* Company logos are sized optically, not mechanically. Matching their
   heights makes Brown's wide lockup shrink until "INDUSTRIES, LLC" is
   unreadable, so the wide mark is sized on width and the two compact
   emblems on height. Allvan, Brown, and Diamond are low-res raster (see
   LAUNCH.md); their display sizes are kept near half the native pixel
   size so they hold up on retina. B12 Sales and Leasing is SVG. */
.co__logo {
  display: block;
  width: auto;
  object-fit: contain; object-position: left center;
  margin-bottom: 1rem;
}
.co__logo--brown   { width: 16rem; height: auto; }   /* 600px native */
.co__logo--allvan  { height: 3.25rem; }              /* 207x75 native */
.co__logo--diamond { height: 3.5rem; }               /* 253x116 native */
.co__logo--b12sl   { width: 14rem; height: auto; }   /* SVG, 918x317 */

.co__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1rem + 1.9vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 0.5rem;
  color: var(--navy);
}
.co__addr {
  font-style: normal;
  font-family: var(--data);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-bottom: 1.4rem;
}
.co__text p { color: var(--ink-2); }
/* Brown Industries is described by division, each with its own plant
   location, split by the same hairline that separates the companies. */
.co__name + .co__div { margin-top: 1.5rem; }
.co__div + .co__div {
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.co__div-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.35rem;
  color: var(--navy);
}
.co__div .co__addr { margin-bottom: 0.75rem; }
/* Squared outline buttons — no radius, to sit with the rules and
   ticks the rest of the page is built from. Brown Industries carries
   two domains, so the row wraps rather than relying on inline spacing. */
.co__links {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: 1.5rem;
}
.co__link {
  display: inline-block;
  font-family: var(--data);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  border: 1px solid var(--navy);
  padding: 0.7rem 1.3rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.co__link:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}
@media (prefers-reduced-motion: reduce) { .co__link { transition: none; } }

@media (min-width: 60rem) {
  .co { grid-template-columns: 6fr 6fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .co--flip .co__media { order: 2; }
}

/* ── Footer ─────────────────────────────────────────────── */
.foot {
  background: var(--navy-2);
  color: rgba(247, 245, 241, 0.78);
  padding: clamp(3rem, 7vw, 5rem) 0 1.75rem;
  font-size: 0.9rem;
}
.foot a { color: var(--tan); }
.foot a:hover { color: var(--paper); }
.foot__in {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  justify-content: space-between;
}
.foot__addr {
  font-style: normal;
  font-family: var(--data);
  font-size: 0.78rem;
  line-height: 1.8;
  letter-spacing: 0.06em;
  margin-top: 1.5rem;
}
.foot__contact {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  font-family: var(--data);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.foot__bar {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 245, 241, 0.2);
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: space-between;
}
.foot__bar small {
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(247, 245, 241, 0.6);
}