/* ============================================================
   MDS LOGISTICS — ART DIRECTION v3
   ------------------------------------------------------------
   Loaded AFTER tokens.css, mds.css and mds-v2.css. Additive:
   no house constant is edited in place; the division palette is
   redefined inside the shared token system, as Technologies does.

   What v3 changes, and why:
     · PALETTE — graphite ground with safety-amber signal. Every
       text pair measured; --type-3 clears AA here (6.3:1), which
       closes the house-wide --type-3 miss for this division.
     · ONE VOICE — MDS now speaks entirely in Archivo: 800 caps
       for statements, 700 for section heads, 600 for terms, with
       IBM Plex Mono for data. Technologies speaks in the house
       serif; MDS in the house grotesque. The lockup keeps the
       house wordmark so the family resemblance holds.
     · THE JOB BOARD — the hero demonstrates rather than claims:
       an illustrative job moving through six stages with every
       handoff owned. The MDS counterpart to the Technologies run
       panel; labelled as illustration, not telemetry.
     · THE DRAWING SHEET — the division's one light surface. A
       warm drafting sheet with a title block, used for the
       diagnostic on the homepage and one substantive section per
       interior page. Technologies' paper is cool and editorial;
       this one is a technical drawing.

   Every photograph remains a PLACEHOLDER pending real imagery.
   ============================================================ */

/* ------------------------------------------------------------
   0. PALETTE
   ------------------------------------------------------------ */

html[data-division="logistics"] {
  --ground:        #0D1012;
  --ground-raised: #151A1E;
  --line:          #273038;
  --type:          #F1EFEA;   /* 16.6:1 */
  --type-2:        #A3ABB2;   /*  8.2:1 · 7.5:1 raised */
  --type-3:        #8C959D;   /*  6.3:1 · 5.8:1 raised */
  --accent:        #F2A900;   /*  9.5:1 as text */
  --accent-dim:    #7A5600;
  --on-accent:     #0D1012;

  --fault:         #E07B4C;   /*  6.5:1 */
  --fault-dim:     #7A3F22;
  --ok:            #8FB08E;

  --blueprint:     rgba(242, 169, 0, .07);
  --sig-face:      var(--data);

  /* Literal rgba rather than color-mix(): the scrims are what keep
     text legible over photographs, so they must not depend on a
     feature older iOS Safari (< 16.2) drops silently. */
  --scrim-strong:  rgba(13, 16, 18, .94);
  --scrim-mid:     rgba(13, 16, 18, .66);
  --scrim-none:    rgba(13, 16, 18, 0);

  /* the drawing sheet */
  --sheet:         #ECE9E2;
  --sheet-raised:  #E2DED5;
  --sheet-line:    #C6BFB0;
  --sheet-grid:    rgba(18, 20, 22, .055);
  --ink:           #121416;   /* 15.2:1 */
  --ink-2:         #43484D;   /*  7.6:1 */
  --ink-3:         #575D63;   /*  5.6:1 · 5.1:1 raised */
  --accent-ink:    #7A4F00;   /*  5.6:1 · 5.1:1 raised */
  --fault-ink:     #A3401C;   /*  5.2:1 · 4.7:1 raised */
}

/* ------------------------------------------------------------
   1. ONE VOICE — Archivo throughout
   ------------------------------------------------------------ */

[data-division="logistics"] h1,
[data-division="logistics"] h2,
[data-division="logistics"] h3,
[data-division="logistics"] .ledger .term,
[data-division="logistics"] .structure th,
[data-division="logistics"] .pathway .k,
[data-division="logistics"] .cycle-step .t {
  font-family: var(--ui);
}
[data-division="logistics"] h2 {
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.05;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem);
  max-width: 20ch;
}
[data-division="logistics"] h3 {
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}
[data-division="logistics"] .ledger .term,
[data-division="logistics"] .structure th {
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -.005em;
}
[data-division="logistics"] .statement.heavy { font-weight: 800; }

/* The rail reads as a drawing annotation: mono, signal-coloured. */
[data-division="logistics"] .credit > .rail {
  font-family: var(--data);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: .72rem;
}

/* Masthead call to action — the one filled control in the nav. */
[data-division="logistics"] .nav .nav-cta {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: .45rem .9rem;
}
[data-division="logistics"] .nav .nav-cta:hover,
[data-division="logistics"] .nav .nav-cta[aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
}

[data-division="logistics"] .cta { font-weight: 600; }

/* ------------------------------------------------------------
   2. HERO v3 — photograph, statement, job board, keystack
   ------------------------------------------------------------ */

.hero-v3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(88vh, 50rem);
  min-height: min(88svh, 50rem);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.hero-v3 .hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-v3 .hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  display: block;
}
.hero-v3::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, var(--scrim-strong) 0%, var(--scrim-mid) 42%, color-mix(in srgb, var(--ground) 30%, transparent) 80%),
    linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim-none) 50%);
  pointer-events: none;
}
/* Survey grid over the photograph: the drawing over the site. */
.hero-v3::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, var(--blueprint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.hero-grid {
  width: 100%;
  max-width: 92rem;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) auto;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.hero-v3 .heavy {
  font-size: clamp(3rem, 1.6rem + 5vw, 6.25rem);
  line-height: .9;
  letter-spacing: -.03em;
  margin: 0;
  max-width: 11ch;
  color: var(--type);
}
.hero-v3 .hero-lede {
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--type);
  margin: 1.6rem 0 0;
  max-width: 30ch;
  font-weight: 500;
}
.hero-v3 .hero-sub {
  color: var(--type-2);
  margin: 1.1rem 0 0;
  max-width: 50ch;
  font-size: .98rem;
  line-height: 1.6;
}
.hero-v3 .hero-actions { margin-top: 2.25rem; }
.hero-v3 .keystack { position: static; align-self: end; margin-bottom: -.5rem; padding-left: 1rem; }

/* ------------------------------------------------------------
   3. THE JOB BOARD
   ------------------------------------------------------------ */

.board {
  background: rgba(21, 26, 30, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85);
  font-family: var(--data);
  color: var(--type-2);
  max-width: 34rem;
  justify-self: end;
  width: 100%;
}
.board-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.board-bar .spacer { flex: 1; }
.board-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The track: six stations on a rail, handoffs between them. */
.board-track {
  list-style: none; margin: 0;
  padding: 1.6rem 1.1rem 1.4rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  position: relative;
  counter-reset: none;
}
.board-track::before {        /* the rail */
  content: "";
  position: absolute;
  left: 1.1rem; right: 1.1rem;
  top: calc(1.6rem + 5px);
  height: 2px;
  background: var(--line);
}
.board-track::after {         /* progress along the rail */
  content: "";
  position: absolute;
  left: 1.1rem;
  top: calc(1.6rem + 5px);
  height: 2px;
  width: calc((100% - 2.2rem) * var(--progress, 1));
  background: var(--accent);
  transition: width .6s cubic-bezier(.3,.7,.3,1);
}
.board-track li { position: relative; z-index: 1; }
.board-track li::before {     /* the station */
  content: "";
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--type-3);
  background: var(--ground-raised);
  margin-bottom: .8rem;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.board-track li.is-done::before,
.board:not(.is-live) .board-track li::before {
  background: var(--accent);
  border-color: var(--accent);
}
.board-track li.is-now::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent);
}
.board-track .st-n {
  display: block;
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--type-3);
}
.board-track .st-t {
  display: block;
  margin-top: .2rem;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--type);
}

.board-log {
  list-style: none; margin: 0;
  padding: .9rem 1.1rem 1.1rem;
  border-top: 1px dashed var(--line);
  min-height: 11.6rem;
}
.board-log li {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: .75rem;
  font-size: .72rem;
  line-height: 1.55;
  padding: .18rem 0;
}
.board-log .t { color: var(--type-3); }
.board-log .m { color: var(--type-2); }
.board-log li:last-child .m { color: var(--type); }
.board-log .fault { color: var(--fault); }
.board-log .fix { color: var(--ok); }
/* Animated state: rows appear in turn; the fault resolves last. */
.board.is-live .board-log li { opacity: 0; transform: translateY(3px); transition: opacity .35s ease, transform .35s ease; }
.board.is-live .board-log li.is-in { opacity: 1; transform: none; }
.board.is-live .board-log .fix { opacity: 0; transition: opacity .4s ease; }
.board.is-live .board-log .is-fixed .fix { opacity: 1; }
.board.is-live .board-log .is-fixed .fault { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--fault) 70%, transparent); }

.board-foot {
  padding: .7rem 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--ui);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--type-3);
}

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-v3 .keystack { display: none; }
}
@media (max-width: 900px) {
  .hero-v3 { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .board { justify-self: stretch; max-width: none; }
  .hero-v3::before {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--ground) 70%, transparent) 0%,
      color-mix(in srgb, var(--ground) 86%, transparent) 55%,
      var(--scrim-strong) 100%);
  }
}
@media (max-width: 520px) {
  .board-track { padding-left: .8rem; padding-right: .8rem; }
  .board-track::before, .board-track::after { left: .8rem; right: .8rem; }
  .board-track::after { width: calc((100% - 1.6rem) * var(--progress, 1)); }
  .board-track .st-t { font-size: .56rem; letter-spacing: .02em; }
  .board-log li { grid-template-columns: 3.9rem minmax(0, 1fr); gap: .5rem; font-size: .68rem; }
  .board-bar { font-size: .58rem; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: mds-rise .6s cubic-bezier(.2,.7,.3,1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .hero-copy > :nth-child(5) { animation-delay: .24s; }
  .board { animation: mds-rise .7s .2s cubic-bezier(.2,.7,.3,1) both; }
}

/* ------------------------------------------------------------
   4. CAPABILITY RAIL
   ------------------------------------------------------------ */

.caprail-m {
  background: var(--ground-raised);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--gutter);
}
.caprail-m ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 92rem;
}
.caprail-m li + li { border-left: 1px solid var(--line); }
.caprail-m a {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.5rem 1.1rem;
  height: 100%;
  text-decoration: none;
  color: var(--type-2);
  position: relative;
  transition: color .18s ease, background-color .18s ease;
}
.caprail-m li:first-child a { padding-left: 0; }
.caprail-m a::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.caprail-m a:hover { color: var(--type); background: var(--ground); }
.caprail-m a:hover::after { transform: scaleX(1); }
.caprail-m svg {
  flex: none; width: 30px; height: 30px;
  fill: none; stroke: var(--accent); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.caprail-m .c-name {
  font-family: var(--data);
  font-size: .7rem;
  letter-spacing: .12em;
  line-height: 1.45;
  text-transform: uppercase;
}
@media (max-width: 1100px) {
  .caprail-m ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caprail-m li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .caprail-m li:nth-child(3n+1) { border-left: 0; }
  .caprail-m li:nth-child(3n+1) a { padding-left: 0; }
}
@media (max-width: 640px) {
  .caprail-m ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caprail-m li { border-left: 0 !important; }
  .caprail-m li:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .caprail-m li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .caprail-m li a { padding: 1.1rem .9rem; gap: .65rem; }
  .caprail-m li:nth-child(odd) a { padding-left: 0; }
  .caprail-m svg { width: 24px; height: 24px; }
}

.titleblock-wrap { padding: 0 var(--gutter); }
.titleblock-wrap .titleblock { max-width: 92rem; border-top: 0; }

/* ------------------------------------------------------------
   5. FAULT CARDS — the friction register
   ------------------------------------------------------------ */

.faults {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 78rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.faults li {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  position: relative;
}
.faults li::before {         /* fault marker */
  content: "";
  position: absolute;
  top: clamp(1.4rem, 2.5vw, 2rem);
  right: clamp(1.4rem, 2.5vw, 2rem);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--fault);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fault) 16%, transparent);
}
.faults .f-id {
  display: block;
  font-family: var(--data);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fault);
  margin-bottom: 1rem;
}
.faults h3 { font-size: var(--step-1); margin: 0 0 .6rem; max-width: 18ch; }
.faults p { margin: 0; color: var(--type-2); font-size: .95rem; line-height: 1.6; }
@media (max-width: 1000px) { .faults { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .faults { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   6. THE DRAWING SHEET — the division's one light surface
   Tokens are redefined locally, so every component inside
   (x-ray, ledgers, tables, cards) inverts without new rules.
   ------------------------------------------------------------ */

.band--sheet {
  --ground:        var(--sheet);
  --ground-raised: var(--sheet-raised);
  --line:          var(--sheet-line);
  --type:          var(--ink);
  --type-2:        var(--ink-2);
  --type-3:        var(--ink-3);
  --accent:        var(--accent-ink);
  --accent-dim:    #B9A071;
  --fault:         var(--fault-ink);
  --fault-dim:     #D9A48C;
  --signal:        var(--accent-ink);
  --signal-dim:    #B9A071;
  --on-accent:     var(--sheet);
  position: relative;
  isolation: isolate;
  background-color: var(--sheet);
  background-image:
    linear-gradient(to right, var(--sheet-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sheet-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  border-bottom: 0;
  padding-top: 0;
}
/* The drawing border, inset from the edge of the band. */
.band--sheet::before {
  content: "";
  position: absolute;
  inset: clamp(.75rem, 1.5vw, 1.25rem);
  border: 1px solid var(--sheet-line);
  pointer-events: none;
  z-index: -1;
}
.band--sheet :focus-visible { outline-color: var(--accent-ink); }
.band--sheet .cta--solid { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.band--sheet .cta--solid:hover { background: transparent; color: var(--ink); }

/* Title block along the top of the sheet. */
.sheet-title {
  display: flex;
  flex-wrap: wrap;
  margin: clamp(.75rem, 1.5vw, 1.25rem) 0 clamp(3rem, 6vw, 5rem);
  margin-left: calc(-1 * var(--gutter) + clamp(.75rem, 1.5vw, 1.25rem));
  margin-right: calc(-1 * var(--gutter) + clamp(.75rem, 1.5vw, 1.25rem));
  border-bottom: 1px solid var(--sheet-line);
  font-family: var(--data);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sheet-title span {
  padding: .8rem clamp(1rem, 2vw, 1.5rem);
  border-right: 1px solid var(--sheet-line);
}
.sheet-title span:last-child { border-right: 0; margin-left: auto; border-left: 1px solid var(--sheet-line); }
.sheet-title b { color: var(--ink); font-weight: 500; margin-right: .6rem; }
@media (max-width: 760px) {
  .sheet-title span { flex: 1 1 50%; border-bottom: 1px solid var(--sheet-line); }
  .sheet-title span:last-child { margin-left: 0; border-left: 0; }
}

/* The X-Ray, drawn in ink. */
.band--sheet .xray-chain {
  background: color-mix(in srgb, var(--sheet) 70%, transparent);
  border-color: var(--ink);
  padding: 2rem 1.25rem 2rem;
  border-width: 1px;
  border-style: solid;
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}
.band--sheet .xray-node::after { background: var(--ink-3); height: 1px; top: .5rem; }
.band--sheet .xray-node .dot {
  width: 13px; height: 13px;
  border: 1.5px solid var(--ink);
  background: var(--sheet);
}
.band--sheet .xray-node .stage { color: var(--ink-2); }
.band--sheet .xray-node .label { color: var(--ink); font-weight: 500; }
.band--sheet .xray-node[aria-selected="true"] .dot {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(18, 20, 22, .12);
}
.band--sheet .xray-node[aria-selected="true"] .stage { color: var(--accent-ink); }
.band--sheet .xray-chain[data-faults="on"] .xray-node[data-fault="yes"] .dot {
  background: var(--fault-ink); border-color: var(--fault-ink);
}
.band--sheet .xray-toggle {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--sheet);
}
.band--sheet .xray-toggle:hover { background: var(--ink); color: var(--sheet); }
.band--sheet .xray-toggle[aria-pressed="true"] { background: var(--fault-ink); border-color: var(--fault-ink); color: #fff; }
.band--sheet .xray-hint { color: var(--ink-2); }
.band--sheet .xray-readout {
  background: var(--sheet);
  border: 1px solid var(--sheet-line);
  border-top: 0;
  padding: 2rem clamp(1.25rem, 3vw, 2rem);
}
.band--sheet .readout-block--mds {
  border-left: 3px solid var(--accent-ink);
  padding-left: 1rem;
}
.band--sheet .readout-block--fault {
  border-left: 3px solid var(--fault-ink);
  padding-left: 1rem;
}

/* Other components on a sheet (interior pages). */
.band--sheet .structure th { color: var(--ink); }
.band--sheet .card { background: var(--sheet); }
.band--sheet a.card:hover { background: var(--sheet-raised); }
.band--sheet .textlink { color: var(--ink); }

/* ------------------------------------------------------------
   7. OPERATING CYCLE v3
   ------------------------------------------------------------ */

.cycle-steps { border-top: 0; position: relative; }
.cycle-step {
  padding: 1.75rem 1rem 1.6rem;
  border-top: 2px solid var(--line);
}
.cycle-step .n {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  letter-spacing: -.02em;
  color: var(--type-3);
  margin-bottom: .45rem;
  line-height: 1;
}
.cycle-step .t {
  font-family: var(--data);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cycle-step::before { top: -7px; width: 11px; height: 11px; border-width: 2px; }
.cycle-step[aria-selected="true"] { border-top-color: var(--accent); }
.cycle-step[aria-selected="true"] .n { color: var(--accent); }
.cycle-panel h3 { font-size: var(--step-2); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; max-width: 22ch; }
.cycle-panel .outputs li { color: var(--type); }
.cycle-panel .outputs li::before { content: "✓"; color: var(--accent); }

/* ------------------------------------------------------------
   8. SPLIT BAND v3 — photograph + position + bridge
   ------------------------------------------------------------ */

.splitband--v3 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.splitband--v3 .split-media { min-height: 36rem; }
.splitband--v3 .split-body { padding: clamp(3rem, 6vw, 5.5rem) var(--gutter); }
.splitband--v3 .split-eyebrow {
  font-family: var(--data);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}
.splitband--v3 .split-body h2 {
  font-size: var(--step-3);
  line-height: .95;
  max-width: 16ch;
}
.bridge-v3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  max-width: 44rem;
}
.bridge-v3 h3 {
  font-family: var(--data);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .75rem;
}
.bridge-v3 ul { list-style: none; margin: 0; padding: 0; }
.bridge-v3 li { color: var(--type-2); font-size: .95rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.bridge-chain {
  grid-column: 1 / -1;
  margin: .5rem 0 0;
  font-family: var(--data);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--type-3);
  max-width: none;
}
@media (max-width: 860px) {
  .splitband--v3 { grid-template-columns: minmax(0, 1fr); }
  .splitband--v3 .split-media { min-height: 16rem; }
}
@media (max-width: 520px) { .bridge-v3 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   9. CARDS v3 — ruled cells, no container-colour slab
   ------------------------------------------------------------ */

.cards--v3 {
  list-style: none; margin: 0; padding: 1px 0 0 1px;
  background: transparent; border: 0; gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stack-lg > * + .cards--v3 { margin-top: 2.25rem; }
.cards--v3 > li { border: 1px solid var(--line); margin: -1px 0 0 -1px; }
.cards--v3 .card { height: 100%; background: transparent; position: relative; }
.cards--v3 a.card:hover { background: var(--ground); }
.band--raised .cards--v3 a.card:hover { background: var(--ground); }
.cards--v3 .card h3 { font-size: var(--step-1); }
.cards--v3 .card::after {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform .25s ease;
}
.cards--v3 a.card:hover::after { transform: scaleY(1); }
@media (max-width: 1000px) { .cards--v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cards--v3 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   10. SECTORS
   ------------------------------------------------------------ */

.sectors {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem clamp(1.5rem, 3vw, 2.75rem);
  max-width: 78rem;
}
.sectors li { border-top: 2px solid var(--line); padding-top: 1.1rem; display: flex; flex-direction: column; }
.sectors h3 { font-size: var(--step-0); font-weight: 700; margin: 0 0 .5rem; }
.sectors p { margin: 0 0 1rem; color: var(--type-2); font-size: .93rem; line-height: 1.6; }
.sectors .hot {
  margin-top: auto;
  font-family: var(--data);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 1000px) { .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .sectors { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   11. ENGAGEMENT REGISTER — an empty ledger, stated as such
   ------------------------------------------------------------ */

.register {
  max-width: 78rem;
  border: 1px solid var(--line);
  font-family: var(--data);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.register-head {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  color: var(--type-2);
}
.register-head span { padding: .85rem 1rem; }
.register-head span + span { border-left: 1px solid var(--line); }
.register-empty {
  padding: 2.25rem 1rem;
  text-align: center;
  color: var(--type-3);
  background-image: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--line) 55%, transparent) 10px 11px);
}
@media (max-width: 760px) {
  .register-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .register-head span + span { border-left: 0; }
  .register-head span:nth-child(even) { border-left: 1px solid var(--line); }
  .register-head span:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------
   12. CLOSER v3 — photograph + the pathway selector
   ------------------------------------------------------------ */

.closer--v3 { min-height: 0; align-items: stretch; }
.closer--v3::before {
  background:
    linear-gradient(to right, var(--scrim-strong) 0%, var(--scrim-mid) 55%, color-mix(in srgb, var(--ground) 45%, transparent) 100%),
    linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim-none) 60%);
}
.closer--v3 .closer-inner { max-width: 92rem; width: 100%; padding: clamp(4rem, 8vw, 7rem) var(--gutter); }
.closer--v3 h2 {
  font-family: var(--ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--step-4);
  line-height: .9;
  letter-spacing: -.03em;
  max-width: 12ch;
}
.closer--v3 .lede { max-width: 52ch; font-size: var(--step-0); color: var(--type-2); }
.pathways--v3 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 3rem;
  max-width: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pathways--v3 .pathway {
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.pathways--v3 .pathway .k { font-weight: 700; font-size: var(--step-0); margin: 0; }
.pathways--v3 .pathway .d { font-size: .86rem; line-height: 1.5; }
.pathways--v3 .pathway::after {
  content: "→";
  margin-top: auto; padding-top: .75rem;
  font-family: var(--data);
  color: var(--accent);
}
.pathways--v3 .pathway--primary { background: var(--accent); }
.pathways--v3 .pathway--primary .k,
.pathways--v3 .pathway--primary .d,
.pathways--v3 .pathway--primary::after { color: var(--on-accent); }
.pathways--v3 .pathway--primary:hover { background: #FFC233; }
@media (max-width: 1100px) { .pathways--v3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .pathways--v3 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   13. FOOTER — the ecosystem row
   ------------------------------------------------------------ */

.footer-eco { padding: 2.5rem 0 0; }
.footer-eco h4 { margin: 0 0 1rem; }
.footer-eco ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  max-width: 78rem;
}
.footer-eco a { text-decoration: none; display: block; border-top: 1px solid var(--line); padding-top: .7rem; }
.footer-eco .e-name {
  display: block;
  font-family: var(--data);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--type);
}
.footer-eco .e-role { display: block; font-size: .8rem; color: var(--type-2); margin-top: .25rem; }
.footer-eco a:hover .e-name { color: var(--accent); }
.footer-eco .is-self a { border-top: 2px solid var(--accent); }
.footer-eco .is-self .e-name { color: var(--accent); }
@media (max-width: 900px) { .footer-eco ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-eco ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------
   14. INTERIOR HEADS — same voice, section scale
   ------------------------------------------------------------ */

.hero-v2--interior .heavy {
  font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.4rem);
  line-height: .95;
  letter-spacing: -.028em;
  max-width: 17ch;
}
.hero-v2 .hero-eyebrow { font-size: .72rem; letter-spacing: .16em; }

/* ------------------------------------------------------------
   15. PRINT
   ------------------------------------------------------------ */

@media print {
  .hero-v3 { min-height: 0; }
  .hero-v3 .hero-media, .hero-v3::before, .hero-v3::after { display: none; }
  .band--sheet { background: none; }
  .board { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .board-track::after, .board-track li::before, .board-log li,
  .caprail-m a::after, .cards--v3 .card::after { transition: none !important; }
}

/* ============================================================
   16. RESPONSIVE SYSTEM (v3.1, 2026-09-22)
   ------------------------------------------------------------
   Written after a device-matrix audit — 15 profiles from a 360px
   Android handset to a 2560px display. What it fixes:
     · one type ladder, so no heading outranks the page title
       (the closing statement was larger than the h1)
     · one frame: content centres inside 90rem on wide screens
       instead of hugging the left edge
     · interior heads share one height and one lede size, so
       moving between pages does not jump
     · a compact, sticky masthead with a menu below 900px (the
       wrapped nav was 213–261px tall on phones)
     · a 12px floor for every label, and touch-sized targets
   ============================================================ */

html[data-division="logistics"] {
  --frame: 90rem;
  --gutter: max(clamp(1.25rem, 5vw, 6rem), calc((100vw - var(--frame)) / 2));

  /* the ladder — four tiers, each clearly below the last */
  --fs-display: clamp(2.9rem, 1.5rem + 5.2vw, 6rem);    /* homepage statement */
  --fs-title:   clamp(2.2rem, 1.3rem + 3.2vw, 4rem);    /* page titles, closing statement */
  --fs-feature: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);  /* photographic band statements */
  --fs-section: clamp(1.6rem, 1.15rem + 1.6vw, 2.6rem); /* section heads */
  --fs-label:   .75rem;                                  /* every mono label: 12px floor */
}
/* The scrollbar is inside 100vw on desktop; keep a real gutter. */
@media (min-width: 1600px) {
  html[data-division="logistics"] { --gutter: calc((100vw - var(--frame)) / 2 + 1rem); }
}

/* ---- frame: containers that capped themselves now rely on the gutter ---- */
.hero-grid,
.caprail-m ul,
.closer--v3 .closer-inner,
.titleblock-wrap .titleblock { max-width: none; }
.splitband--v3 .split-body { padding-left: clamp(2rem, 5vw, 5rem); }
@media (max-width: 860px) {
  .splitband--v3 .split-body { padding-left: var(--gutter); }
}

/* ---- the ladder ---- */
[data-division="logistics"] main h2 { font-size: var(--fs-section); }
.hero-v3 .heavy                     { font-size: var(--fs-display); }
.hero-v2--interior .hero-inner .heavy,
.hero-v2--plain .hero-inner .heavy  { font-size: var(--fs-title); max-width: 18ch; }
.closer--v3 .closer-inner h2        { font-size: var(--fs-title); max-width: 14ch; }
.splitband .split-body h2           { font-size: var(--fs-feature); line-height: 1; max-width: 17ch; }
.cycle-panel .stack h3              { font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem); }

/* ---- interior heads: one height, one lede size, content on the baseline ---- */
.hero-v2--interior {
  min-height: clamp(26rem, 70vh, 40rem) !important;
  min-height: clamp(26rem, 70svh, 40rem) !important;
}
.hero-v2--interior .hero-inner { padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-v2--interior .lede,
.hero-v2--plain .lede {
  font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
  line-height: 1.6;
  max-width: 52ch;
  color: var(--type);
}
.hero-v2--interior .hero-actions,
.hero-v2--plain .hero-actions { margin-top: 2rem; }

/* The request page stays photo-free by design, but now uses the
   same head as its siblings: same height, same baseline, same scale. */
.hero-v2--plain {
  background-color: var(--ground);
  background-image:
    linear-gradient(to right, var(--blueprint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero-v2--plain::before { background: linear-gradient(to top, var(--ground) 0%, rgba(13,16,18,.4) 60%, rgba(13,16,18,0) 100%); }
.hero-v2--plain::after  { display: none; }

@media (max-width: 760px) {
  .hero-v2--interior { min-height: 30rem !important; }
  .hero-v2--interior .hero-inner { padding-top: 5rem; padding-bottom: 2.5rem; }
  .hero-v3 .hero-sub { font-size: .95rem; }
}

/* ---- labels: 12px floor everywhere ---- */
.board-bar, .board-track .st-t, .board-track .st-n,
.caprail-m .c-name, .faults .f-id, .xray-node .stage,
.splitband--v3 .split-eyebrow, .bridge-chain, .bridge-v3 h3,
.sectors .hot, .footer-eco .e-name, .sheet-title, .register,
.hero-eyebrow, .hero-v2 .hero-eyebrow, [data-division="logistics"] .credit > .rail,
.cycle-step .t, .xray-hint, .xray-toggle, .readout-block .k,
.cycle-panel .outputs-label, .titleblock, .dimline span, .card .more,
.compare-col h3, .board-foot { font-size: var(--fs-label); }
.board-log li { font-size: .78rem; }
.board-bar { letter-spacing: .1em; }
.xray-node .stage { letter-spacing: .04em; }

/* ---- tablets: a narrower credit rail, so the body gets the width ---- */
@media (min-width: 761px) and (max-width: 1100px) {
  html[data-division="logistics"] { --rail: 9rem; }
}

/* ---- the job board when it is narrow: two rows of three ----
   Keyed to the board's own width (a container query), so it holds
   on a phone and in the two-column hero on a landscape tablet.
   The media query is the fallback for browsers without container
   queries (iOS Safari < 16). */
.board { container-type: inline-size; container-name: board; }
@container board (max-width: 32rem) {
  .board-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.1rem;
    padding: 1.25rem 1rem 1.1rem;
  }
  .board-track::before, .board-track::after { display: none; }
  .board-track li { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; }
  .board-track li::before { grid-row: span 2; margin: 0; }
  .board-track .st-t { font-size: var(--fs-label); letter-spacing: .04em; margin-top: 0; }
  .board-track .st-n { font-size: var(--fs-label); }
  .board-log { min-height: 0; padding: .8rem 1rem 1rem; }
  .board-log li { grid-template-columns: 3.9rem minmax(0, 1fr); gap: .5rem; font-size: .75rem; }
  .board-bar { font-size: .7rem; padding: .7rem 1rem; }
  .board-bar > span:nth-child(4) { display: none; }  /* stage count: the track already shows it */
}
@supports not (container-type: inline-size) {
  @media (max-width: 560px) {
  .board-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.1rem;
    padding: 1.25rem 1rem 1.1rem;
  }
  .board-track::before, .board-track::after { display: none; }
  .board-track li { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; }
  .board-track li::before { grid-row: span 2; margin: 0; }
  .board-track .st-t { font-size: var(--fs-label); letter-spacing: .04em; margin-top: 0; }
  .board-track .st-n { font-size: var(--fs-label); }
  .board-log { min-height: 0; padding: .8rem 1rem 1rem; }
  .board-log li { grid-template-columns: 3.9rem minmax(0, 1fr); gap: .5rem; font-size: .75rem; }
  .board-bar { font-size: .7rem; padding: .7rem 1rem; }
  .board-bar > span:nth-child(4) { display: none; }  /* stage count: the track already shows it */
  }
}

/* 17. MASTHEAD — promoted to tokens.css "HOUSE CHROME v2" (2026-09-22). */

/* ============================================================
   18. TOUCH
   ============================================================ */

@media (pointer: coarse) {
  [data-division="logistics"] .footer li { margin: 0; }
  [data-division="logistics"] .footer-grid a { display: inline-block; padding: .6rem 0; }
  [data-division="logistics"] .colophon a { display: inline-block; padding: .35rem 0; }
  .xray-node { min-height: 44px; }
}
/* Hover effects that would stick after a tap on touch screens. */
@media (hover: none) {
  .caprail-m a:hover { background: transparent; color: var(--type-2); }
  .caprail-m a:hover::after { transform: scaleX(0); }
  .cards--v3 a.card:hover::after { transform: scaleY(0); }
}