/* ═══════════════════════════════════════════════════════════════════
   ProCiv Partners Contracting Co. — "The Prequalification Dossier"
   §2 Design tokens — pasted as-is from DESIGN.md
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Colour: brand core ─────────────────────────────────────── */
  /* Anchored on the official brand sheet (ProcivPartners_logo_all.pdf):
     navy #0d3862 and grey #4d555b, with the tint ramps sampled from the
     same sheet: navy #27446d #344c73 #3c5177 #515f83,
     grey #646e75 #7f8a91 #9ea6ab #b2bac0.
     navy-900/-800 and the accent tints are extended along the brand
     navy's own hue (209.6deg) where the sheet stops. */
  --navy-900: #071C32;   /* deepest ground: footer, hero base       */
  --navy-800: #0A2C4D;   /* dark section ground                     */
  --navy-700: #0D3862;   /* PRIMARY brand navy: blocks, buttons, H  */
  --navy-600: #27446D;   /* hover of navy-700 surfaces/buttons      */
  --navy-500: #3C5177;   /* active/pressed, chart secondary         */
  --accent-500: #569ADC; /* accent blue: icon strokes, data, links on dark */
  --accent-300: #98C0E7; /* light-blue accent text on dark          */
  --steel-500: #7F8A91;  /* steel grey: the profile's grey block    */
  --steel-300: #B2BAC0;  /* muted labels on dark, disabled          */

  /* ─── Colour: derived working system ────────────────────────── */
  --paper:     #F2F6FA;  /* page background                         */
  --surface:   #FFFFFF;  /* raised light surface: cards, table rows */
  --surface-2: #E4ECF4;  /* recessed light surface: matrix cells, code-like blocks */
  --ink:       #08121C;  /* body text on light                      */
  --ink-soft:  #4D555B;  /* secondary text on light                 */
  --ink-faint: #646E75;  /* captions/meta on light                  */
  --on-dark:      #F2F6FA;              /* body text on navy        */
  --on-dark-soft: rgba(242,246,250,.72);/* secondary on navy        */

  /* ─── Colour: discipline accents (MATERIALS.md §2) ───────────── */
  /* landscape — moss ink, drawn from the same low-chroma register
     as steel-500; sits between navy and paper without leaving them */
  --land-ink: #3F6B4A;   /* hatch strokes & key squares on light     */
  --land-lt:  #A9D3B0;   /* key squares & annotation on navy grounds */
  /* finishing — stone/sand ink, the marble-and-gypsum register      */
  --fin-ink:  #7E6136;   /* hatch strokes & key squares on light     */
  --fin-lt:   #D8BE8E;   /* key squares & annotation on navy grounds */

  /* ─── Colour: lines & borders ───────────────────────────────── */
  --line:        #D0DAE4;               /* hairline on light        */
  --line-strong: #0D3862;               /* emphatic rule on light   */
  --line-dark:   rgba(152,192,231,.20); /* hairline on navy         */
  --line-dark-strong: rgba(152,192,231,.45);
  --grid-light:  rgba(13,56,98,.05);    /* blueprint grid on paper  */
  --grid-dark:   rgba(152,192,231,.06); /* blueprint grid on navy   */

  /* ─── Colour: states ────────────────────────────────────────── */
  --focus-ring:   #569ADC;
  --link:         #0D3862;   /* links on light */
  --link-hover:   #27446D;
  --link-on-dark: #98C0E7;
  --danger:       #B4232A;   /* form validation only, if ever used  */

  /* ─── Type ───────────────────────────────────────────────────── */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* role: size / line-height / weight / letter-spacing */
  --fs-display: clamp(2.75rem, 1.4rem + 5.8vw, 5.5rem);   /* 44→88px */
  --lh-display: 0.98;  --fw-display: 700; --ls-display: -0.02em;

  --fs-h2: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);          /* 32→52px */
  --lh-h2: 1.04;       --fw-h2: 700;      --ls-h2: -0.015em;

  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);      /* 22→28px */
  --lh-h3: 1.2;        --fw-h3: 600;      --ls-h3: -0.01em;

  --fs-h4: 1.125rem;   --lh-h4: 1.3;  --fw-h4: 600; --ls-h4: 0;

  --fs-body-lg: 1.125rem; --lh-body-lg: 1.65;  /* 18px, intros, GM message */
  --fs-body:    1rem;     --lh-body:    1.6;   /* 16px default, wght 400   */
  --fs-small:   0.875rem; --lh-small:   1.5;   /* 14px table cells, meta   */

  --fs-kicker:  0.75rem;  --ls-kicker: 0.14em; /* 12px mono 500 UPPERCASE  */
  --fs-label:   0.6875rem;--ls-label:  0.08em; /* 11px mono, fig captions  */

  --fs-num-xl: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);       /* 40→64px stats */
  --fs-num-md: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);       /* 24→32px       */
  /* all numerals: font-feature-settings: "tnum" 1; letter-spacing -0.02em */

  /* ─── Spacing (4px base) ────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px; --s-10: 128px;
  /* vertical section padding: 96px desktop (--s-9), 64px ≤900px (--s-8) */

  /* ─── Radii ─────────────────────────────────────────────────── */
  --r-0: 0;     /* sections, cards, frames, tables, buttons        */
  --r-1: 2px;   /* chips, matrix dots' container, form inputs      */

  /* ─── Hairlines & rules ─────────────────────────────────────── */
  --hair: 1px solid var(--line);
  --hair-dark: 1px solid var(--line-dark);
  --rule-strong: 2px solid var(--line-strong); /* under section titles */

  /* ─── Elevation ─────────────────────────────────────────────── */
  --shadow-nav: 0 1px 0 var(--line), 0 8px 24px rgba(7,28,50,.06);
  --shadow-pop: 0 12px 32px rgba(7,28,50,.14); /* hover-lifted cards only */
  /* No other shadows exist. Do not add ambient card shadows.      */

  /* ─── Grid ──────────────────────────────────────────────────── */
  --container: 1240px;        /* content max-width                  */
  --gutter: 32px;             /* column gap ≥900px                  */
  --gutter-sm: 20px;          /* column gap <900px                  */
  --edge: clamp(20px, 4vw, 48px); /* page side padding              */

  /* ─── Motion (§7) ───────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);

  --hdr-h: 72px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESET / BASE
   ═══════════════════════════════════════════════════════════════════ */

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

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

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.sec--dark :focus-visible, .hero :focus-visible, .foot :focus-visible,
.header--dark :focus-visible { outline-color: var(--accent-300); }

::selection { background: var(--navy-700); color: #fff; }

/* numerals */
.n, .stat__num, .c-val, .c-no, .flagship__num, .cli__idx,
.matrix td, .ledger td, .rail__idx {
  font-feature-settings: "tnum" 1;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
  position: relative;
}

.sec { padding-block: var(--s-9); position: relative; }
.sec--light { background: var(--paper); }
.sec--band  { background: var(--surface-2); border-block: var(--hair); }
.sec--dark  {
  background: var(--navy-800);
  color: var(--on-dark);
  overflow: hidden;
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 24px 24px;
}
.sec--contact { background-color: var(--navy-900); }

/* anchor offsets */
section[id] { scroll-margin-top: 88px; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 999;
  background: var(--navy-700); color: #fff;
  padding: 12px 20px;
  font: 500 14px/1 var(--font-sans);
  text-decoration: none;
}
.skip-link:focus { left: 0; position: fixed; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   ICONS — §6.2
   ═══════════════════════════════════════════════════════════════════ */

.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic, .btn__ic, .lexp__ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  flex: none;
}
.ic--64 { width: 64px; height: 64px; }
.ic--20 { width: 20px; height: 20px; }

.iconcell {
  display: grid;
  place-items: center;
  width: 96px; height: 96px;
  border: var(--hair);
  background: var(--paper);
  color: var(--navy-700);
  flex: none;
}

/* ═══════════════════════════════════════════════════════════════════
   TYPE PRIMITIVES
   ═══════════════════════════════════════════════════════════════════ */

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}
.kicker--dark { color: var(--on-dark-soft); }

.kicker-row { display: flex; align-items: center; gap: 12px; }
.kicker-row .idx {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: .06em;
  padding: 2px 8px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
}
.sechead--dark .kicker-row .idx { border-color: var(--line-dark-strong); color: var(--on-dark-soft); }

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}
.mono-label--dark { color: var(--accent-300); }

/* ─── Block mark (navy over steel) ───────────────────────────── */
.blockmark {
  display: block;
  position: relative;
  width: 64px; height: 14px;
  margin: 18px 0 22px;
}
.blockmark i { position: absolute; display: block; }
.blockmark i:nth-child(1) { left: 24px; top: 4px;  width: 40px; height: 10px; background: var(--steel-500); }
.blockmark i:nth-child(2) { left: 0;    top: 0;    width: 56px; height: 10px; background: var(--navy-700); }
.sechead--dark .blockmark i:nth-child(2) { background: var(--accent-500); }

/* ─── Section header device — §4 ─────────────────────────────── */
.sechead { max-width: 820px; margin-bottom: var(--s-7); }
.sechead h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  color: var(--navy-700);
  text-wrap: balance;
}
.sechead--dark h2 { color: var(--on-dark); }
.sechead .rule {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--line-strong);
  margin-top: 22px;
}
.sechead--dark .rule { background: var(--accent-500); }
.sechead__note {
  margin-top: 20px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--on-dark-soft);
  max-width: 62ch;
}

.sec__intro {
  max-width: 60ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-soft);
  margin-bottom: var(--s-7);
  margin-top: calc(var(--s-7) * -1 + 8px);
}

/* ─── Vertical rotated section label ─────────────────────────── */
.vlabel {
  display: none;
  position: absolute;
  left: 16px;
  top: 2px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: .6;
  pointer-events: none;
}
.vlabel--dark { color: var(--accent-300); }

/* ─── Dimension line — §6.5 ──────────────────────────────────── */
.dim {
  position: relative;
  display: block;
  height: 16px;
  background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat;
}
.dim::before, .dim::after {
  content: "";
  position: absolute;
  top: 0; width: 1px; height: 16px;
  background: var(--line-strong);
}
.dim::before { left: 0; }
.dim::after  { right: 0; }
.dim > span {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding-inline: 12px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.dim--dark { background-image: linear-gradient(var(--line-dark-strong), var(--line-dark-strong)); }
.dim--dark::before, .dim--dark::after { background: var(--line-dark-strong); }
.dim--dark > span { background: var(--navy-800); color: var(--accent-300); }
.hero .dim--dark > span { background: var(--navy-900); }
.dim--gap { margin-block: var(--s-8); }
.dim--inline { width: 180px; margin-block: 16px; }
.dim--inline > span { background: var(--navy-900); }

/* ─── Registration marks — §6.6 ──────────────────────────────── */
.reg { position: absolute; width: 12px; height: 12px; pointer-events: none; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--line-dark); }
.reg::before { left: 0; top: 5px; width: 12px; height: 1px; }
.reg::after  { top: 0; left: 5px; width: 1px; height: 12px; }
.reg--tl { left: 0;  top: 0; }
.reg--tr { right: 0; top: 0; }
.reg--bl { left: 0;  bottom: 0; }
.reg--br { right: 0; bottom: 0; }

/* ─── Monogram watermark — §6.7 ──────────────────────────────── */
.watermark {
  position: absolute;
  pointer-events: none;
  opacity: .05;
  filter: grayscale(1) brightness(2);
  z-index: 0;
}
.watermark--hero { right: -8%; bottom: -20%; width: 620px; }
.watermark--proj { right: -6%; bottom: -10%; width: 520px; }

/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS — §8
   ═══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-0);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear;
}
.btn__ic { width: 16px; height: 16px; transition: transform 150ms linear; }
.btn:hover .btn__ic, .btn:focus-visible .btn__ic { transform: translateX(4px); }

.btn--primary { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.btn--primary:hover { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }
.btn--primary:active { background: var(--navy-500); border-color: var(--navy-500); }

.btn--primary-dark { background: var(--accent-500); color: var(--navy-900); border-color: var(--accent-500); }
.btn--primary-dark:hover { background: var(--accent-300); border-color: var(--accent-300); color: var(--navy-900); }

.btn--secondary { background: transparent; color: var(--navy-700); border-color: var(--navy-700); }
.btn--secondary:hover { background: rgba(13,56,98,.06); color: var(--navy-700); }

.btn--ghost-dark { background: transparent; color: var(--on-dark); border-color: var(--line-dark-strong); }
.btn--ghost-dark:hover { border-color: var(--accent-300); color: var(--accent-300); }

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-1);
  padding: 8px 14px;
  color: var(--ink-soft);
}

/* legend */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: var(--s-5);
}
.legend__i {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.legend--sector { margin-top: 0; margin-bottom: var(--s-6); }

/* ═══════════════════════════════════════════════════════════════════
   FIGURE PLATES — §6.8
   ═══════════════════════════════════════════════════════════════════ */

.plate {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: box-shadow 300ms var(--ease-out);
}
.plate--dark { border-color: var(--line-dark-strong); background: var(--navy-900); }
.plate::before, .plate::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border-style: solid;
  border-color: var(--accent-500);
  border-width: 0;
  z-index: 2;
}
.plate::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.plate::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.plate__box {
  position: relative;
  aspect-ratio: var(--ar, 3/2);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-2);
}
.plate--dark .plate__box { background: var(--navy-900); }
.plate__box img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}
.plate:hover .plate__box img { transform: scale(1.03); }

.plate figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 10px 12px;
  border-top: var(--hair);
  line-height: 1.45;
}
.plate--dark figcaption { color: var(--accent-300); border-top-color: var(--line-dark); }

/* Photographs run in their own colour. The duotone and navy-tint overlays
   (DESIGN.md §6.8, DUO-A / TINT-B) were removed at the client's request; the
   plate frame, corner ticks and caption still carry the drawing language. */
.duo img,
.tint img { filter: none; }

.plate__box--letterbox { background: var(--surface-2); }
.plate__box--letterbox img {
  object-fit: contain;
  max-width: 220px;
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION BASE — §7
   ═══════════════════════════════════════════════════════════════════ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 500ms var(--ease-out) var(--d, 0ms),
    transform 500ms var(--ease-out) var(--d, 0ms);
}
.js [data-reveal].in-view { opacity: 1; transform: none; }
.js .cli[data-reveal] {
  transition:
    opacity 500ms var(--ease-out) var(--d, 0ms),
    transform 500ms var(--ease-out) var(--d, 0ms),
    background-color 150ms var(--ease-out);
}

.js .sechead .rule { transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-draw) 120ms; }
.js .sechead.in-view .rule { transform: scaleX(1); }

/* ═══════════════════════════════════════════════════════════════════
   5.0 HEADER
   ═══════════════════════════════════════════════════════════════════ */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242,246,250,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--hair);
  transition: background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear;
}
.hdr.is-scrolled { box-shadow: var(--shadow-nav); }
.hdr.header--dark {
  background: rgba(7,28,50,.88);
  border-bottom-color: rgba(152,192,231,.20);
}
.hdr.header--dark.is-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.28); }

.hdr__in {
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.hdr__brand { display: flex; align-items: center; flex: none; }
/* Brand lockup. Two flat-colour knockouts of the same silhouette crossfade with
   the header's state: paper over the navy hero, navy once the header sits on a
   light section. No plate — both assets are transparent SVGs cut from the
   official brand sheet (content/ProcivPartners_logo_all.pdf), frameless so the
   lockup keeps the header's horizontal rhythm. The framed badge version lives
   alongside as prociv-logo-framed-*.svg. */
.brandmark {
  position: relative;
  display: block;
  flex: none;
  width: 106px;
  aspect-ratio: 1083 / 424;
}
.brandmark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 260ms var(--ease-out);
}
.brandmark__w { opacity: 0; }
.header--dark .brandmark__w { opacity: 1; }
.header--dark .brandmark__n { opacity: 0; }

.foot__logo { display: block; width: 132px; height: auto; }

.hdr__nav { margin-left: auto; }
/* MATERIALS.md §3 — the seventh link. At 1200 px and up the row keeps its
   original 32 px rhythm; below that the gap closes linearly to 12 px so all
   seven labels stay whole and the row never breaks. (The six-link row was
   already 5 px over at exactly 900 px, so the .hdr__in gap tightens too.) */
.navlist { display: flex; align-items: center; gap: clamp(12px, -48px + 6.66vw, 32px); }
@media (max-width: 1199.98px) { .hdr__in { gap: var(--s-4); } }
.navlist a {
  display: block;
  position: relative;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 6px;
}
.navlist a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms var(--ease-out);
}
.navlist a:hover { color: var(--navy-700); }
.navlist a:hover::after, .navlist a:focus-visible::after, .navlist a.is-active::after { transform: scaleX(1); }
.navlist a.is-active { color: var(--navy-700); }

.header--dark .navlist a { color: var(--on-dark-soft); }
.header--dark .navlist a:hover, .header--dark .navlist a.is-active { color: var(--on-dark); }

.hdr__cta { flex: none; padding: 12px 20px; }
.header--dark .hdr__cta {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: var(--navy-900);
}
.header--dark .hdr__cta:hover { background: var(--accent-300); border-color: var(--accent-300); }

/* hamburger */
.burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  place-items: center;
  padding: 0;
}
.header--dark .burger { border-color: var(--line-dark-strong); }
.burger__bars { display: block; position: relative; width: 20px; height: 14px; }
.burger__bars i {
  position: absolute;
  left: 0; width: 20px; height: 1.5px;
  background: var(--ink);
  transition: transform 200ms var(--ease-out), opacity 150ms linear;
}
.header--dark .burger__bars i { background: var(--on-dark); }
.burger__bars i:nth-child(1) { top: 2px; }
.burger__bars i:nth-child(2) { bottom: 2px; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

.mobnav {
  display: none;
  background: var(--navy-900);
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms var(--ease-out);
}
.mobnav.is-open { max-height: 100dvh; border-top: var(--hair-dark); }
.mobnav a {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding-inline: var(--edge);
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  border-bottom: var(--hair-dark);
}
.mobnav .mono-i {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--accent-300);
}
.mobnav a:hover { background: var(--navy-800); color: var(--on-dark); }

body.is-locked { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   5.1 HERO — revised composition (HERO.md Rev 2)
   Zones: A masthead (geostrip) · B statement cols 1–8 + Alhamra staged
   exhibit cols 9–12, flush bottoms · C full-width stat title-block band.
   ═══════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  background: var(--navy-900);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: var(--s-7) var(--s-8);
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 24px 24px;
}
.hero__wrap { z-index: 1; }

.geostrip {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-300);
  margin-bottom: var(--s-8);
  padding-top: var(--s-4);
}
.geostrip__rule { flex: 1; height: 1px; background: var(--line-dark); }

/* zone grid: row 1 = statement + exhibit (flush bottoms), row 2 = band */
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}
.hero__main {
  grid-row: 1;
  grid-column: 1 / span 8;
  position: relative;
  z-index: 1;
}
.hero__figwrap {
  grid-row: 1;
  grid-column: 9 / span 4;
  align-self: end;
  justify-self: end;
  position: relative;
  z-index: 1;
  width: 100%;
  /* 322 (S.3 native) + 2 (box hairline) + 24 (mat) + 2 (plate frame).
     Raising this upscales S.3 past native — never (DESIGN §6.8). */
  max-width: 350px;
}
.hero__figwrap .dim { margin-bottom: 12px; }

.hero__h1 {
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--on-dark);
  margin-bottom: var(--s-6);
}
.hero__h1 .hl { display: block; }
.js .hero__h1 .hl {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.js .hero.is-ready .hero__h1 .hl { opacity: 1; transform: none; }
.js .hero.is-ready .hero__h1 .hl:nth-child(1) { transition-delay: 0ms; }
.js .hero.is-ready .hero__h1 .hl:nth-child(2) { transition-delay: 80ms; }
.js .hero.is-ready .hero__h1 .hl:nth-child(3) { transition-delay: 160ms; }

.hero__sub {
  max-width: 52ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--on-dark-soft);
  margin-bottom: var(--s-6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: 0; }

/* ── the exhibit — Alhamra staged record (FIG. 01 · S.1–S.3) ────── */
/* one plate, subdivided: 2 studies over 1 completed frame */
.seq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  grid-template-rows: auto 16px auto;
  padding: 12px; /* the sheet mat between outer frame and stage boxes */
  /* lets the flow arrow resolve the study box's own height (see below) */
  container-type: inline-size;
}
.seq__stage--s1 { grid-column: 1; grid-row: 1; }
.seq__stage--s2 { grid-column: 3; grid-row: 1; }
.seq__stage--s3 { grid-column: 1 / -1; grid-row: 3; }
.seq__stage .plate__box {
  border: 1px solid var(--line-dark);
  background: var(--navy-900);
}
.seq__tag {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;             /* the M9 annotation size */
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent-300);
}

/* flow links — the schematic's flow arrows (DESIGN §6.9) carrying time */
.seq__link { position: relative; display: block; pointer-events: none; }
.seq__link--h { grid-column: 2; grid-row: 1; }
/* Both marks sit on the study image's optical centre. 41% is the spec value
   and is exact while the stage tag is one line; where the tag wraps (900–
   1100px) the row grows and 41% drifts ~7px low, so the second declaration
   resolves the study box's true half-height from the mat's inline size:
   study width = (100cqw − 24px)/2, box height = that ÷ 1.5, centre = ÷ 2.
   Browsers without container queries keep the 41% fallback. */
.seq__link--h::before {                /* stem */
  content: "";
  position: absolute;
  top: 41%;
  top: calc((100cqw - 24px) / 6);
  inset-inline-start: 3px;
  inset-inline-end: 7px;
  height: 1px;
  background: var(--line-dark-strong);
}
.seq__link--h::after {                 /* open head, points inline-end */
  content: "";
  position: absolute;
  top: 41%;
  top: calc((100cqw - 24px) / 6);
  inset-inline-end: 3px;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-top: 1px solid var(--accent-500);
  border-right: 1px solid var(--accent-500);
  transform: rotate(45deg);            /* RTL flips this — §4.6 */
}
.seq__link--v {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: 12px;
}
.seq__link--v::before {                /* stem */
  content: "";
  position: absolute;
  top: 2px; bottom: 5px;
  left: 50%;
  width: 1px;
  background: var(--line-dark-strong);
}
.seq__link--v::after {                 /* open head, points down */
  content: "";
  position: absolute;
  bottom: 3px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;                   /* centred — direction-neutral */
  border-right: 1px solid var(--accent-500);
  border-bottom: 1px solid var(--accent-500);
  transform: rotate(45deg);
}

/* the honesty note — caption line 2, subordinate ink */
.seq__note {
  display: block;
  margin-top: 4px;
  color: var(--steel-300);
  letter-spacing: .06em;
}

/* ── zone C — the title-block band ─────────────────────────────── */
.hero__band {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  margin-top: var(--s-8);
}
/* the band rule — drawable, spans all 12 columns */
.hero__band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line-dark-strong);
}
/* the kicker interrupts the rule at its start — same device as the
   dim-line centre label (.hero .dim--dark > span) */
.hero__band > .kicker {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  transform: translateY(-50%);
  margin: 0;
  background: var(--navy-900);
  padding-inline-end: 12px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.stat {
  position: relative;
  padding-top: var(--s-6);
  padding-inline: var(--s-6);
}
.stat:first-child { padding-inline-start: 0; }
/* vertical cell separator — drawable (scaleY) */
.stat::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line-dark);
}
.stat:first-child::before { display: none; }

.stat__num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-size: var(--fs-num-xl);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--on-dark);
}
.stat__num .u {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .4em;
  letter-spacing: .04em;
  color: var(--accent-300);
  align-self: flex-start;
  padding-top: .18em;
}
.stat__lab {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-300);
}

/* ═══════════════════════════════════════════════════════════════════
   5.2 COMPANY
   ═══════════════════════════════════════════════════════════════════ */

.company__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-8);
}
.gm { grid-column: 1 / span 6; }
/* M2 — the Mission/Vision column rule is a pseudo-element so it can draw. */
.mv { grid-column: 8 / span 5; position: relative; padding-left: var(--s-6); }
.mv::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}

.gm .kicker { margin-bottom: var(--s-5); }
.gm p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}
.gm p.lead { color: var(--ink); font-weight: 500; }
.gm strong { color: var(--ink); font-weight: 700; }

/* M2 — the 3px accent bar is a pseudo-element so it can draw (scaleY). */
.pullquote {
  position: relative;
  padding-left: var(--s-5);
  margin-block: var(--s-5);
}
.pullquote::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-500);
}
.pullquote p {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--navy-700);
  margin: 0;
}
.gm .signoff { margin-top: var(--s-6); margin-bottom: 6px; color: var(--ink); }
.gm .mono-label { color: var(--ink-faint); }

.mv__block + .mv__block { margin-top: var(--s-6); padding-top: var(--s-6); border-top: var(--hair); }
.mv .kicker { margin-bottom: var(--s-3); }
.mv p { color: var(--ink-soft); line-height: var(--lh-body); }
.chipwrap { margin-top: var(--s-5); }

/* ═══════════════════════════════════════════════════════════════════
   5.3 VALUES — the acronym rail §6.3
   ═══════════════════════════════════════════════════════════════════ */

.rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  background: var(--surface);
  border: var(--hair);
}
.rail__cell {
  position: relative;
  padding: var(--s-6) 18px;
  min-height: 300px;
  border-left: var(--hair);
  display: flex;
  flex-direction: column;
  transition: background-color 200ms var(--ease-out);
}
.rail__cell:first-child { border-left: 0; }
.rail__cell::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--accent-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-out);
}
.rail__cell:hover::before { transform: scaleX(1); }

.rail__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rail__letter {
  font-weight: 800;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--navy-700);
  font-kerning: none;
  transition: color 200ms var(--ease-out);
}
.rail__cell:hover .rail__letter { color: var(--accent-500); }
.rail__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--ink-faint);
  padding-top: 6px;
}
.rail__name {
  margin-top: var(--s-5);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink);
  hyphens: auto;
  overflow-wrap: break-word;
}
.rail__def {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   5.4 SERVICES
   ═══════════════════════════════════════════════════════════════════ */

.svcstack { margin-bottom: var(--s-9); }

.svc {
  display: grid;
  grid-template-columns: 60px 1fr;
  background: var(--surface);
  border: var(--hair);
  min-height: 280px;
}
.svc + .svc { margin-top: -1px; }

.svc__rail {
  align-self: start;
  justify-self: center;
  margin: var(--s-6) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.svc__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-6);
  padding: var(--s-6);
  align-items: start;
  border-left: var(--hair);
}
.svc__lead  { grid-column: 1 / span 5; }
.svc__scope { grid-column: 7 / span 3; }
.plate--svc { grid-column: 10 / span 3; }

.svc__lead .iconcell { margin-bottom: var(--s-5); }
.svc__lead h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--navy-700);
  margin-bottom: var(--s-3);
}
.svc__lead p { color: var(--ink-soft); line-height: var(--lh-body); }

.svc__scope .mono-label { margin-bottom: var(--s-3); }
.scopelist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 11px;
  border-bottom: var(--hair);
  line-height: 1.3;
}
.scopelist li::before {
  content: "";
  flex: none;
  width: 8px; height: 1px;
  background: var(--accent-500);
}

/* ─── Capability matrix — §6.4 ───────────────────────────────── */
.matrixwrap { margin-top: var(--s-8); }
.matrixwrap > .kicker { margin-bottom: var(--s-4); }

.matrix__scroll {
  position: relative;
  overflow-x: auto;
  border: var(--hair);
  background: var(--paper);
}
.matrix { min-width: 720px; }
.matrix caption { text-align: left; }

.matrix thead th {
  background: var(--navy-700);
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  height: 40px;
  padding: 0 12px;
  text-align: center;
  white-space: nowrap;
}
.matrix thead th.m-cap, .matrix thead th.m-proven { text-align: left; }

.matrix tbody tr { height: 44px; transition: background-color 150ms linear; }
.matrix tbody tr:nth-child(even) { background: var(--surface); }
.matrix tbody tr:nth-child(odd)  { background: var(--paper); }
.matrix tbody tr:hover { background: var(--surface-2); }

.matrix tbody th[scope="row"] {
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--ink);
  padding: 0 16px;
  border-bottom: var(--hair);
  white-space: nowrap;
}
.matrix tbody td {
  text-align: center;
  border-bottom: var(--hair);
  padding: 0 12px;
}
.matrix tbody td.m-proven {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--ink-faint);
  white-space: nowrap;
  padding-right: 16px;
}

.mk { display: inline-block; width: 8px; height: 8px; vertical-align: middle; }
.mk--f { background: var(--navy-700); }
.mk--o { border: 1px solid var(--steel-500); }
.dash { color: var(--line); }
.m-proven .dash { color: var(--line); }

.js .matrix .mk { opacity: 0; transform: scale(.6); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
.js .matrixwrap.in-view .matrix .mk { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════
   5.4x MATERIALS — schedule of materials & finishes (MATERIALS.md)
   ═══════════════════════════════════════════════════════════════════ */

/* discipline key squares — the ONLY carriers of discipline colour */
.mk-d { display: inline-block; width: 8px; height: 8px; flex: none;
        vertical-align: 1px; transition: transform 150ms var(--ease-out); }
.mk-d--land { background: var(--land-ink); }
.mk-d--fin  { background: var(--fin-ink); }
/* dark-ground variants (matrix head on navy-700, ledger panels navy-800) */
.mk-d--land-lt { background: var(--land-lt); }
.mk-d--fin-lt  { background: var(--fin-lt); }

.legend--mats { margin: 0 0 var(--s-6); flex-wrap: wrap; }
.legend--mats .legend__note {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mats__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7) var(--gutter); }
@media (min-width: 1200px) {
  .mats__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.mats__divhead { display: flex; align-items: center; gap: 16px; margin-bottom: var(--s-4); }
.mats__divhead .kicker { margin: 0; flex: none; }
.mats__divrule { flex: 1; height: 1px; background: var(--line); }

.mats__list { list-style: none; margin: 0; padding: 0;
              border: var(--hair); background: var(--surface); }
.mrow {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-5);
  transition: background-color 150ms var(--ease-out),
              opacity 500ms var(--ease-out) var(--d, 0ms),
              transform 500ms var(--ease-out) var(--d, 0ms);
}
.mrow + .mrow { border-top: var(--hair); }
/* the generic `.js [data-reveal]` transition outranks `.mrow` on
   specificity and would drop the hover fade — same fix, same shape as
   the existing `.js .cli[data-reveal]` precedent above. */
.js .mrow[data-reveal] {
  transition:
    opacity 500ms var(--ease-out) var(--d, 0ms),
    transform 500ms var(--ease-out) var(--d, 0ms),
    background-color 150ms var(--ease-out);
}

/* the drawn sample */
.sw { display: block; width: 88px; height: 88px;
      border: var(--hair); background: var(--surface); }
.sw svg { display: block; width: 100%; height: 100%; }

.mrow__code {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .06em; color: var(--ink-faint);
  font-feature-settings: "tnum" 1;
  margin-bottom: var(--s-2);
}
.mrow__code .mk-d { margin-inline-start: 4px; }
/* §6.2: A-07's two squares sit 4 px apart — the flex gap alone. */
.mrow__code .mk-d + .mk-d { margin-inline-start: 0; }
.mrow__t {
  font-weight: 600; font-size: 15px; line-height: 1.35;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
  margin-bottom: var(--s-2);
}
.mrow__note { font-size: var(--fs-small); line-height: var(--lh-small);
              color: var(--ink-soft); margin-bottom: var(--s-3); }
.mrow__proven {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.mats__src { margin-top: var(--s-6); }

/* H2 hover — row examine */
@media (hover: hover) {
  .mrow:hover { background: var(--surface-2); }
  .mrow:hover .mk-d { transform: scale(1.25); }
}

/* motion — R2 division rule · R6 hatch print · R4 key pop */
.js .mats__divhead .mats__divrule {
  transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease-draw);
}
.js .mats__divhead.in-view .mats__divrule { transform: scaleX(1); }
.js .mrow .sw__f {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms var(--ease-draw) calc(var(--d, 0ms) + 200ms);
}
.js .mrow.in-view .sw__f { clip-path: inset(0); }
.js .mrow .mrow__code .mk-d {
  opacity: 0; transform: scale(.6);
  transition: opacity 250ms var(--ease-out) calc(var(--d, 0ms) + 350ms),
              transform 250ms var(--ease-out) calc(var(--d, 0ms) + 350ms);
}
.js .mrow.in-view .mrow__code .mk-d { opacity: 1; transform: none; }

/* matrix column-head keys */
.matrix thead .mk-d { margin-inline-end: 8px; }

/* ledger discipline tags (inside .lpanel, navy-800 ground) */
/* `.lpanel__tx p` (0,1,1) outranks a bare `.ltags` — scoped so the mono
   label treatment actually lands. */
.lpanel__tx .ltags {
         display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
         margin-top: var(--s-3); margin-bottom: var(--s-3);
         font-family: var(--font-mono); font-size: var(--fs-label);
         letter-spacing: var(--ls-label); text-transform: uppercase;
         color: var(--on-dark-soft); }
.ltag { display: inline-flex; align-items: center; gap: 6px; }
.ltag .mk-d--turnkey { background: transparent; border: 1px solid var(--steel-300); }

/* responsive */
@media (max-width: 639.98px) {
  .mrow { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); }
  .sw { width: 64px; height: 64px; }
  /* `Division B — Internal & External Finishing` is 373 px of tracked mono:
     wider than the 350 px content column at 390 px. `flex: none` refuses to
     shrink, so the head overflowed. Below 640 the kicker takes the full row
     and the hairline drops beneath it, still filling the width — the same
     device, stacked. */
  .mats__divhead { flex-wrap: wrap; row-gap: 10px; }
  .mats__divhead .kicker { flex: 1 1 100%; }
  .mats__divrule { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   5.5 PROJECTS
   ═══════════════════════════════════════════════════════════════════ */

#projects .container { z-index: 1; }

/* ─── 5.5a Flagship ──────────────────────────────────────────── */
.flagship {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-6);
  border-block: var(--hair-dark);
  padding-block: var(--s-7);
  align-items: center;
}
.flagship__txt { grid-column: 1 / span 7; }
.flagship__dia { grid-column: 8 / span 5; }

.flagship__txt .kicker { margin-bottom: var(--s-4); }
.flagship__txt h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--on-dark);
  margin-bottom: var(--s-4);
}
.flagship__num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-size: var(--fs-num-xl);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-300);
  margin-bottom: var(--s-4);
}
.flagship__num .u {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .4em;
  letter-spacing: .04em;
  align-self: flex-start;
  padding-top: .18em;
}
.flagship__scope {
  color: var(--on-dark-soft);
  max-width: 46ch;
  margin-bottom: var(--s-4);
}
.metarow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-300);
}
.metarow__sep { padding-inline: 8px; color: var(--line-dark-strong); }

/* ─── §6.9 Pipeline schematic ────────────────────────────────── */
.schematic { width: 100%; height: auto; }
.sk-sheet { fill: none; stroke: var(--line-dark); stroke-width: 1; }
.sk-datum { stroke: var(--line-dark-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.sk-line { fill: none; stroke: var(--accent-500); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.sk-pipe { fill: none; stroke: var(--accent-500); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.sk-tick line { stroke: var(--accent-500); stroke-width: 1; }
.sk-dim line { stroke: var(--line-dark-strong); stroke-width: 1; }
.sk-title rect { fill: none; stroke: var(--line-dark-strong); stroke-width: 1; }
.sk-title line { stroke: var(--line-dark-strong); stroke-width: 1; }
.sk-tx {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  fill: var(--accent-300);
  stroke: none;
}
.sk-tx--sm { font-size: 8.5px; }

.js .sk-pipe {
  stroke-dasharray: var(--len, 0);
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 1200ms var(--ease-draw);
}
.js .flagship.in-view .sk-pipe { stroke-dashoffset: 0; }

/* ─── 5.5b Ledger ────────────────────────────────────────────── */
.ledgerwrap > .kicker { margin-bottom: var(--s-4); font-weight: 500; }

.ledger { border-top: var(--hair-dark); }
.ledger thead th {
  background: var(--navy-700);
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
  height: 40px;
  padding: 0 16px;
  vertical-align: middle;
}
.ledger .c-foot {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--accent-300);
  text-transform: none;
  letter-spacing: .04em;
  opacity: .85;
}
.ledger thead th.c-chart { padding-block: 6px; background-image: none; }

.ledger .c-no    { width: 56px; }
.ledger .c-client{ width: 22%; }
.ledger .c-val   { width: 116px; white-space: nowrap; }
.ledger .c-chart { width: 30%; }

.ledger tbody .lrow > * {
  border-bottom: var(--hair-dark);
  padding: 0 16px;
  height: 56px;
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
}
.ledger tbody .lrow:hover > * { background: rgba(152,192,231,.05); }

.ledger .c-no {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-300);
}
.ledger .c-client {
  font-size: var(--fs-small);
  color: var(--on-dark-soft);
}
.ledger .c-val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--on-dark);
}
.ledger .c-proj { padding: 0 !important; }

.lexp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  transition: color 150ms linear;
}
.lexp:hover { color: var(--accent-300); }
.lexp__ic {
  width: 16px; height: 16px;
  flex: none;
  color: var(--accent-500);
  transition: transform 250ms var(--ease-out);
}
.lexp[aria-expanded="true"] .lexp__ic { transform: rotate(45deg); }

/* value bars — §6.10 */
.ledger .c-chart {
  background-image: repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1px), var(--line-dark) calc(25% - 1px) 25%);
  background-position: left center;
  background-repeat: repeat-x;
}
.bar {
  display: block;
  height: 10px;
  width: var(--w, 0);
  background: var(--accent-500);
  border-radius: 0;
}
.bar--flag { background: var(--accent-300); }
.js .ledgerwrap .bar { width: 0; transition: width 700ms var(--ease-out); }
.js .ledgerwrap.in-view .bar { width: var(--w); }
.js .ledgerwrap.in-view tbody tr:nth-child(1)  .bar { transition-delay: 0ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(3)  .bar { transition-delay: 40ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(5)  .bar { transition-delay: 80ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(7)  .bar { transition-delay: 120ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(9)  .bar { transition-delay: 160ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(11) .bar { transition-delay: 200ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(13) .bar { transition-delay: 240ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(15) .bar { transition-delay: 280ms; }

/* expandable panels */
.lpanel > td { padding: 0; border: 0; background: rgba(7,28,50,.35); }
.lpanel__g { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms var(--ease-out); }
.lpanel.is-open > td { border-bottom: var(--hair-dark); }
.lpanel.is-open .lpanel__g { grid-template-rows: 1fr; }
.lpanel__in { overflow: hidden; min-height: 0; display: flex; gap: var(--s-5); align-items: flex-start; }
.plate--mini { width: 120px; flex: none; margin: var(--s-5) 0 var(--s-5) var(--s-4); }
.lpanel__tx { padding: var(--s-5) var(--s-4) var(--s-5) 0; max-width: 72ch; }
.lpanel__tx p { color: var(--on-dark-soft); font-size: var(--fs-small); line-height: 1.6; }
.lpanel__tx .mono-label { margin-bottom: 6px; }
.lpanel__tx .mono-label + p { margin-bottom: var(--s-3); }

/* ─── 5.5c Figure plates strip ───────────────────────────────── */
.strip { margin-top: var(--s-9); }
.strip > .kicker { margin-bottom: var(--s-4); font-weight: 500; }
.strip__scroll {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-3);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-500) rgba(152,192,231,.12);
}
.strip__scroll::-webkit-scrollbar { height: 2px; }
.strip__scroll::-webkit-scrollbar-track { background: rgba(152,192,231,.12); }
.strip__scroll::-webkit-scrollbar-thumb { background: var(--accent-500); }
.plate--sq { flex: none; width: 260px; scroll-snap-align: start; }
.plate--sq figcaption { min-height: 54px; }

/* ═══════════════════════════════════════════════════════════════════
   5.6 TARGETED CLIENTS
   ═══════════════════════════════════════════════════════════════════ */

.clients {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: var(--hair);
  border-left: var(--hair);
}
.cli {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 200px;
  padding: var(--s-5);
  background: var(--surface);
  border-right: var(--hair);
  border-bottom: var(--hair);
  transition: background-color 150ms var(--ease-out), opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.cli:hover { background: var(--surface-2); }
.cli__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cli__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--ink-faint);
}
/* Logo plate. The marks are third-party trademarks reproduced from the company
   profile at the size they support (~232px source); the cell caps them well
   below that. Greyed at rest so nineteen competing brand palettes don't fight
   the page, resolving to full colour on hover/focus. */
.cli__logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  padding: 8px 0;
}
.cli__logo img {
  /* explicit px cap: a percentage would resolve against the content-sized
     box and let the 260px source escape the plate */
  max-width: 100%;
  max-height: 116px;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;          /* drops the white matte onto the cell */
  filter: grayscale(1) opacity(.85);
  transition: filter 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.cli:hover .cli__logo img,
.cli:focus-within .cli__logo img { filter: none; transform: scale(1.04); }

.cli__name { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink); }

.tick { display: block; width: 8px; height: 8px; flex: none; transition: transform 150ms var(--ease-out); }
.tick--gov  { background: var(--navy-700); }
.tick--giga { background: var(--accent-500); }
.tick--edu  { background: var(--steel-500); }
.tick--ind  { border: 1px solid var(--steel-500); }
.cli:hover .tick { transform: scale(1.25); }

/* ═══════════════════════════════════════════════════════════════════
   5.7 ORGANIZATION — §6.1
   ═══════════════════════════════════════════════════════════════════ */

.org {
  background: var(--surface);
  border: var(--hair);
  padding: var(--s-7) var(--s-6);
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 24px 24px;
  overflow: hidden;
}
.org__src { margin-top: var(--s-4); }

.box {
  background: var(--surface);
  border: 1px solid var(--navy-700);
  border-top-width: 3px;
  border-radius: var(--r-0);
  padding: 12px 14px;
}
.box__t {
  display: block;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--navy-700);
}
.box--gm {
  background: var(--navy-700);
  border-color: var(--navy-700);
  border-top-width: 5px;
  max-width: 300px;
}
.box--gm .box__t { color: #fff; }
.box--staff { border-color: var(--steel-500); border-top-color: var(--steel-500); }
.box--staff .box__t { color: var(--ink-soft); }

.box__subs { margin-top: 10px; padding-top: 10px; border-top: var(--hair); }
.box__subs li {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.box__subs li::before { content: "\2014\00a0"; }

/* ─── spine layout (default, < 1200px) ───────────────────────── */
.org__dropwrap { position: relative; padding: var(--s-5) 0 var(--s-5) 44px; }
.org__drop { position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--navy-700); }
.org__staff { position: relative; max-width: 260px; }
.org__stub { position: absolute; left: -32px; top: 20px; width: 32px; height: 1px; background: var(--steel-500); }

/* M11 — the spine keeps its 2px gutter (transparent border) but the visible
   line is an ::after so it can be drawn with scaleY. */
.org__l2 {
  position: relative;
  display: grid;
  gap: var(--s-5);
  margin-left: 12px;
  padding-left: 44px;
  border-left: 2px solid transparent;
}
.org__l2::after {
  content: "";
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 2px;
  background: var(--navy-700);
}
.org__l2 > li { position: relative; }
.org__l2 > li::before {
  content: "";
  position: absolute;
  left: -44px; top: 20px;
  width: 44px; height: 1px;
  background: var(--navy-700);
}
.org__l2 .box { min-height: 0; }

/* ═══════════════════════════════════════════════════════════════════
   5.8 CONTACT + FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-6);
  align-items: start;
}
/* Everything textual stacks in one left column; the locator holds the whole
   right column so the section reads as copy-then-drawing. */
.contact__lead { grid-column: 1 / span 5; grid-row: 1; }
.sheet { grid-column: 1 / span 5; grid-row: 2; }

.contact__pitch {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--on-dark);
  margin-bottom: var(--s-6);
  max-width: 22ch;
}
.contact__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Ruled capability lines — balance the lower-left of the contact band and
   restate scope in the sheet's own register. */
.capline { margin-top: var(--s-6); border-top: 1px solid var(--line-dark); }
.capline > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line-dark);
}
.capline dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-300);
  padding-top: 2px;
}
.capline dd { margin: 0; color: var(--on-dark-soft); font-size: 15px; line-height: 1.5; }

.sheet__t { margin-bottom: var(--s-3); }
.sheet__rows { border: 1px solid var(--line-dark-strong); background: var(--navy-800); }
.sheet__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: 13px 18px;
  border-top: var(--hair-dark);
}
.sheet__row:first-child { border-top: 0; }
.sheet__row dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-300);
}
.sheet__row dt .ic { color: var(--accent-500); }
.sheet__row dd {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  color: var(--on-dark);
  overflow-wrap: anywhere;
}
.sheet__row dd a { display: inline-block; padding-block: 5px; color: var(--link-on-dark); text-decoration-thickness: 1px; }
.sheet__row dd a:hover { color: var(--on-dark); }

/* ─── Footer ─────────────────────────────────────────────────── */
.foot {
  background: var(--navy-900);
  color: var(--on-dark);
  border-top: var(--hair-dark);
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-6);
  padding-block: var(--s-7);
  align-items: start;
}
.foot__brand { grid-column: 1 / span 3; }
.foot__nav   { grid-column: 5 / span 4; }
.foot__meta  { grid-column: 10 / span 3; text-align: right; }

.foot__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.foot__nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-dark-soft);
  text-decoration: none;
}
.foot__nav a:hover { color: var(--accent-300); text-decoration: underline; text-underline-offset: 3px; }

.foot__meta p {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-dark-soft);
  line-height: 1.9;
}
.foot__bar { display: flex; height: 4px; }
.foot__bar i:first-child { flex: 70; background: var(--navy-700); }
.foot__bar i:last-child  { flex: 30; background: var(--steel-500); }

/* ─── Footer · IBES Group brand strip ────────────────────────── */
/* A four-cell register of the group's marks, set on the same
   hairline-grid idiom as .rail: no radii, no shadow, the 1px rule
   is the only separator. Marks are normalised on a fixed optical
   BAND (height), never on width — the four lockups differ in kind
   as well as ratio (IBES 2.87:1 horizontal, ProCiv 2.53:1
   horizontal, NexaSuite 1.98:1 *stacked* with ~26% transparent
   margin, Taqdir 1:1 mark-only with ~13% margin), so each carries
   its own --mark-h so the drawn artwork — not the PNG box — lands
   on a common weight. Every mark is captioned, per the dossier's
   figure-caption idiom. */
.grpstrip { border-top: var(--hair-dark); }
.grpstrip__in { padding-block: var(--s-5) var(--s-6); }
.grpstrip__label { margin-bottom: var(--s-4); }

.grpstrip__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grpstrip__list > li { border-inline-start: var(--hair-dark); }
.grpstrip__list > li:first-child { border-inline-start: 0; }

.grpbrand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  height: 100%;
  padding: var(--s-3) var(--s-4);
  color: var(--on-dark-soft);
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.grpbrand__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.grpbrand__logo {
  display: block;
  width: auto;
  height: var(--mark-h, 30px);
  max-width: 100%;
  object-fit: contain;
  opacity: .84;
  transition: opacity 160ms var(--ease-out);
}
.grpbrand__name {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}

/* per-brand optical height — see note above */
.grpbrand--ibes   { --mark-h: 28px; }  /* box == artwork; heaviest of the four */
.grpbrand--nexa   { --mark-h: 54px; }  /* stacked; ~26% of the box is empty     */
.grpbrand--taqdir { --mark-h: 36px; }  /* mark only, hairline strokes; ~13% empty */
.grpbrand--prociv { --mark-h: 30px; }  /* box == artwork                        */

@media (hover: hover) {
  .grpbrand:hover { color: var(--accent-300); }
  .grpbrand:hover .grpbrand__logo { opacity: 1; }
}
.grpbrand:focus-visible { color: var(--accent-300); }
.grpbrand:focus-visible .grpbrand__logo { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   HERO.md §6 — P0 PAGE-LOAD CHOREOGRAPHY (hero only)
   Every value is a transition-delay off .hero.is-ready. No JS sequencing.
   ═══════════════════════════════════════════════════════════════════ */

/* t=120 — geostrip */
.js .geostrip__a, .js .geostrip__b {
  opacity: 0;
  transition: opacity 320ms linear 120ms;
}
.js .hero.is-ready .geostrip__a, .js .hero.is-ready .geostrip__b { opacity: 1; }
.js .geostrip__rule {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-draw) 120ms;
}
.js .hero.is-ready .geostrip__rule { transform: scaleX(1); }

/* t=260 — sub */
.js .hero__sub {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out) 260ms, transform 500ms var(--ease-out) 260ms;
}
.js .hero.is-ready .hero__sub { opacity: 1; transform: none; }

/* t=340 / 400 — CTAs */
.js .hero__cta .btn {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 400ms var(--ease-out), transform 400ms var(--ease-out),
    background-color 150ms linear, color 150ms linear, border-color 150ms linear;
}
.js .hero__cta .btn:nth-child(1) { transition-delay: 340ms, 340ms, 0ms, 0ms, 0ms; }
.js .hero__cta .btn:nth-child(2) { transition-delay: 400ms, 400ms, 0ms, 0ms, 0ms; }
.js .hero.is-ready .hero__cta .btn { opacity: 1; transform: none; }

/* t=380 — band rule draws across all 12 columns; kicker fades on it */
.js .hero__band::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-draw) 380ms;
}
.js .hero.is-ready .hero__band::before { transform: scaleX(1); }
.js .hero__band > .kicker { opacity: 0; transition: opacity 320ms linear 380ms; }
.js .hero.is-ready .hero__band > .kicker { opacity: 1; }

/* t=440+60·i — labels; t=500+60·(i−1) — cell separators (cells 2–4) */
.js .stat::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 400ms var(--ease-draw);
}
.js .hero.is-ready .stat::before { transform: scaleY(1); }
.js .stat__lab { opacity: 0; transition: opacity 320ms linear; }
.js .hero.is-ready .stat__lab { opacity: 1; }
.js .hero.is-ready .stat:nth-child(1) .stat__lab { transition-delay: 440ms; }
.js .hero.is-ready .stat:nth-child(2) .stat__lab,
.js .hero.is-ready .stat:nth-child(2)::before { transition-delay: 500ms; }
.js .hero.is-ready .stat:nth-child(3) .stat__lab,
.js .hero.is-ready .stat:nth-child(3)::before { transition-delay: 560ms; }
.js .hero.is-ready .stat:nth-child(4) .stat__lab,
.js .hero.is-ready .stat:nth-child(4)::before { transition-delay: 620ms; }

/* t=560 — FIG.01 dimension line prints left→right (the label rides the wipe,
   so it is never rendered squashed the way a scaleX would render it) */
.js .hero__figwrap .dim {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 500ms var(--ease-draw) 560ms;
}
.js .hero.is-ready .hero__figwrap .dim { clip-path: inset(0); }

/* t=620 — plate frame + caption + note fade in (the honest text is
   legible before the sequence finishes printing) */
.js .plate--hero { opacity: 0; transition: opacity 320ms linear 620ms; }
.js .hero.is-ready .plate--hero { opacity: 1; }

/* the staged print — R6 per stage, in work order S.1 → S.2 → S.3 */
.js .plate--hero .seq__stage img { clip-path: inset(0 100% 0 0); }
.js .plate--hero .seq__stage--s1 img {
  transition: clip-path 450ms var(--ease-draw) 620ms, transform 300ms var(--ease-out);
}
.js .plate--hero .seq__stage--s2 img {
  transition: clip-path 450ms var(--ease-draw) 780ms, transform 300ms var(--ease-out);
}
.js .plate--hero .seq__stage--s3 img {
  transition: clip-path 450ms var(--ease-draw) 940ms, transform 300ms var(--ease-out);
}
.js .hero.is-ready .plate--hero .seq__stage img { clip-path: inset(0); }

/* stage tags — R1, each after its stage starts printing */
.js .seq__tag { opacity: 0; transition: opacity 320ms linear; }
.js .hero.is-ready .seq__tag { opacity: 1; }
.js .hero.is-ready .seq__stage--s1 .seq__tag { transition-delay: 680ms; }
.js .hero.is-ready .seq__stage--s2 .seq__tag { transition-delay: 840ms; }
.js .hero.is-ready .seq__stage--s3 .seq__tag { transition-delay: 1000ms; }

/* flow links — R2 stems draw, heads land (R4) at the stroke's end */
.js .seq__link--h::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms var(--ease-draw) 740ms;
}
.js .hero.is-ready .seq__link--h::before { transform: scaleX(1); }
.js .seq__link--h::after { opacity: 0; transition: opacity 150ms var(--ease-out) 860ms; }
.js .hero.is-ready .seq__link--h::after { opacity: 1; }
.js .seq__link--v::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 160ms var(--ease-draw) 880ms;
}
.js .hero.is-ready .seq__link--v::before { transform: scaleY(1); }
.js .seq__link--v::after { opacity: 0; transition: opacity 150ms var(--ease-out) 1000ms; }
.js .hero.is-ready .seq__link--v::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   HERO.md — G3 RETICLE, scoped to zone B (a grid item, not wrap-wide)
   ═══════════════════════════════════════════════════════════════════ */

.reticle { display: none; }
.reticle__v, .reticle__h, .reticle__c { display: block; position: absolute; }
.reticle__v { inset-inline-start: 66.666%; top: 0; bottom: 0; width: 1px; background: var(--line-dark); }
.reticle__h { top: 38%; left: 0; right: 0; height: 1px; background: var(--line-dark); }
.reticle__c {
  inset-inline-start: 66.666%; top: 38%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--line-dark-strong);
}

@media (min-width: 900px) {
  .reticle {
    display: block;
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: stretch;
    justify-self: stretch;
    position: relative;
    z-index: 0;
    pointer-events: none;
  }
  .js .reticle__v { transform: scaleY(0); transform-origin: top; transition: transform 700ms var(--ease-draw) 520ms; }
  .js .hero.is-ready .reticle__v { transform: scaleY(1); }
  .js .reticle__h { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-draw) 580ms; }
  .js .hero.is-ready .reticle__h { transform: scaleX(1); }
  .js .reticle__c {
    opacity: 0; transform: scale(.6);
    transition: opacity 250ms var(--ease-out) 1080ms, transform 250ms var(--ease-out) 1080ms;
  }
  .js .hero.is-ready .reticle__c { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §4.4 — G4 SHEET JOINTS (M14)
   ═══════════════════════════════════════════════════════════════════ */

.joint {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  display: flex;
  z-index: 3;
  pointer-events: none;
}
.joint i { display: block; }
.joint i:first-child { flex: 70; background: var(--navy-700); }
.joint i:last-child  { flex: 30; background: var(--steel-500); }
.hero .joint { top: auto; bottom: 0; }

.js .joint[data-reveal], .js .foot[data-reveal] .foot__bar {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-draw);
}
.js .joint[data-reveal].in-view, .js .foot[data-reveal].in-view .foot__bar { transform: scaleX(1); }
/* `data-reveal` sits on <footer>, not on .foot__bar itself: the bar is 4 px
   tall and pinned to the document's last pixel, so it can never satisfy the
   observer's `0px 0px -10% 0px` bottom margin and would stay at scaleX(0)
   forever. The footer carries the trigger; it does not itself animate. */
.js .foot[data-reveal] { opacity: 1; transform: none; transition: none; }

/* the hero joint runs inside P0 at t = 900 */
.js .hero .joint { transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-draw) 900ms; }
.js .hero.is-ready .joint { transform: scaleX(1); }

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §2.2 — M2 · COMPANY RULES DRAW
   ═══════════════════════════════════════════════════════════════════ */

.js .pullquote::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 400ms var(--ease-draw) 250ms;
}
.js .gm.in-view .pullquote::before { transform: scaleY(1); }

.js .mv::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 500ms var(--ease-draw) 120ms;
}
.js .mv.in-view::before { transform: scaleY(1); }

.js .mv .mv__block {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.js .mv.in-view .mv__block { opacity: 1; transform: none; }
.js .mv.in-view .mv__block:nth-child(1) { transition-delay: 0ms; }
.js .mv.in-view .mv__block:nth-child(2) { transition-delay: 140ms; }

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §2.2 — M3 · SERVICE ICONS DRAW · M4 · SCOPE LISTS
   ═══════════════════════════════════════════════════════════════════ */

/* stroke-dasharray/-dashoffset are inherited, so they cascade through <use>
   into the shared symbol without touching the symbol itself. */
/* 128 units, not the 64 ENHANCE §2.2 quotes: the longest sub-path on the
   48-grid is the finishing symbol's 24×36 rect (perimeter 120), so a 64-unit
   budget would leave that rect and the infrastructure r-14 circle permanently
   broken. 128 covers every sub-path and still draws as one gesture. */
.js .svc .ic--64 {
  stroke-dasharray: 128;
  stroke-dashoffset: 128;
  transition: stroke-dashoffset 600ms var(--ease-draw) 150ms;
}
.js .svc.in-view .ic--64 { stroke-dashoffset: 0; }

.js .svc .scopelist li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
}
.js .svc.in-view .scopelist li { opacity: 1; transform: none; }
.js .svc .scopelist li::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-draw);
}
.js .svc.in-view .scopelist li::before { transform: scaleX(1); }

.js .svc.in-view .scopelist li:nth-child(1) { transition-delay: 200ms; }
.js .svc.in-view .scopelist li:nth-child(2) { transition-delay: 230ms; }
.js .svc.in-view .scopelist li:nth-child(3) { transition-delay: 260ms; }
.js .svc.in-view .scopelist li:nth-child(4) { transition-delay: 290ms; }
.js .svc.in-view .scopelist li:nth-child(5) { transition-delay: 320ms; }
.js .svc.in-view .scopelist li:nth-child(1)::before { transition-delay: 320ms; }
.js .svc.in-view .scopelist li:nth-child(2)::before { transition-delay: 350ms; }
.js .svc.in-view .scopelist li:nth-child(3)::before { transition-delay: 380ms; }
.js .svc.in-view .scopelist li:nth-child(4)::before { transition-delay: 410ms; }
.js .svc.in-view .scopelist li:nth-child(5)::before { transition-delay: 440ms; }

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §2.2 — M5 · SCHEMATIC CONSTRUCTION SEQUENCE
   sheet → datum → structure → symbols → annotation
   ═══════════════════════════════════════════════════════════════════ */

.js .sk-sheet {
  stroke-dasharray: 1576;      /* 2 × (504 + 284) — hard-coded, no measuring */
  stroke-dashoffset: 1576;
  transition: stroke-dashoffset 800ms var(--ease-draw);
}
.js .flagship.in-view .sk-sheet { stroke-dashoffset: 0; }

.js .sk-datum { opacity: 0; transition: opacity 300ms linear 200ms; }
.js .flagship.in-view .sk-datum { opacity: 1; }

.js .sk-pump, .js .sk-tank1, .js .sk-tank2 {
  opacity: 0;
  transform: scale(.94);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.js .flagship.in-view .sk-pump  { opacity: 1; transform: none; transition-delay: 250ms; }
.js .flagship.in-view .sk-tank1 { opacity: 1; transform: none; transition-delay: 780ms; }
.js .flagship.in-view .sk-tank2 { opacity: 1; transform: none; transition-delay: 1140ms; }

.js .flagship.in-view .sk-pipe { transition-delay: 300ms; }

.js .sk-arrow, .js .sk-tick { opacity: 0; transition: opacity 250ms linear 1250ms; }
.js .flagship.in-view .sk-arrow, .js .flagship.in-view .sk-tick { opacity: 1; }

.js .sk-tx, .js .sk-dim, .js .sk-title { opacity: 0; transition: opacity 300ms linear 1400ms; }
.js .flagship.in-view .sk-tx,
.js .flagship.in-view .sk-dim,
.js .flagship.in-view .sk-title { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §2.2 — M7 · BAR TERMINAL TICK
   ═══════════════════════════════════════════════════════════════════ */

.bar { position: relative; }
.bar::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 1px; height: 16px;
  background: var(--accent-300);
}
.bar--flag::after { background: var(--on-dark); }
.js .ledgerwrap .bar::after { opacity: 0; transition: opacity 200ms linear; }
.js .ledgerwrap.in-view .bar::after { opacity: 1; }
.js .ledgerwrap.in-view tbody tr:nth-child(1)  .bar::after { transition-delay: 700ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(3)  .bar::after { transition-delay: 740ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(5)  .bar::after { transition-delay: 780ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(7)  .bar::after { transition-delay: 820ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(9)  .bar::after { transition-delay: 860ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(11) .bar::after { transition-delay: 900ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(13) .bar::after { transition-delay: 940ms; }
.js .ledgerwrap.in-view tbody tr:nth-child(15) .bar::after { transition-delay: 980ms; }

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §2.2 — M8 · CAPABILITY-MATRIX CROSSHAIR
   Instant state change, no transition: the one justified paint exception.
   ═══════════════════════════════════════════════════════════════════ */

/* The tint is a background-*image* so it composites over whatever ground the
   cell already has — the navy header band keeps its colour and its white
   type, the striped body rows keep their stripe. */
.matrix[data-col="1"] tr > *:nth-child(2),
.matrix[data-col="2"] tr > *:nth-child(3),
.matrix[data-col="3"] tr > *:nth-child(4) {
  background-image: linear-gradient(rgba(86,154,220,.08), rgba(86,154,220,.08));
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §4.5 — G5 · VALUES LETTER PROJECTION (static)
   ═══════════════════════════════════════════════════════════════════ */

.rail__top { isolation: isolate; }
.rail__letter { position: relative; }
.rail__letter::before {
  content: attr(data-letter);
  position: absolute;
  left: 3px; top: 3px;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(86,154,220,.35);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §2.2 — M11 · ORG CHART CONSTRUCTION SEQUENCE
   Structure always draws before the boxes it carries.
   ═══════════════════════════════════════════════════════════════════ */

.org {
  --org-stub0: 540ms;   /* spine layout (<1200px) */
  --org-box0: 620ms;
  --org-step: 60ms;
}
.org__l2 > li:nth-child(1) { --i: 0; }
.org__l2 > li:nth-child(2) { --i: 1; }
.org__l2 > li:nth-child(3) { --i: 2; }
.org__l2 > li:nth-child(4) { --i: 3; }
.org__l2 > li:nth-child(5) { --i: 4; }
.org__l2 > li:nth-child(6) { --i: 5; }
.org__l2 > li:nth-child(7) { --i: 6; }
.org__l2 > li:nth-child(8) { --i: 7; }

/* boxes — R1 */
.js .org .box--gm,
.js .org .org__staff .box,
.js .org .org__l2 > li .box {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), border-color 150ms linear;
}
.js .org.in-view .box--gm,
.js .org.in-view .org__staff .box,
.js .org.in-view .org__l2 > li .box { opacity: 1; transform: none; }
.js .org.in-view .box--gm { transition-delay: 0ms; }
.js .org.in-view .org__staff .box { transition-delay: 380ms; }
.js .org.in-view .org__l2 > li .box {
  transition-delay:
    calc(var(--org-box0) + var(--org-step) * var(--i)),
    calc(var(--org-box0) + var(--org-step) * var(--i)),
    0ms;
}

/* connectors — R2 */
.js .org__drop {
  transform: scaleY(0); transform-origin: top;
  transition: transform 300ms var(--ease-draw) 120ms;
}
.js .org.in-view .org__drop { transform: scaleY(1); }

.js .org__stub {
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ease-draw) 300ms;
}
.js .org.in-view .org__stub { transform: scaleX(1); }

/* spine (<1200px) */
.js .org__l2::after {
  transform: scaleY(0); transform-origin: top;
  transition: transform 600ms var(--ease-draw) 420ms;
}
.js .org.in-view .org__l2::after { transform: scaleY(1); }

/* manager stubs — horizontal in the spine layout */
.js .org__l2 > li::before {
  transform: scaleX(0); transform-origin: left;
  transition:
    transform 250ms var(--ease-draw) calc(var(--org-stub0) + var(--org-step) * var(--i)),
    background-color 150ms linear;
}
.js .org.in-view .org__l2 > li::before { transform: scaleX(1); }

@media (min-width: 1200px) {
  .org { --org-stub0: 620ms; --org-box0: 700ms; --org-step: 40ms; }
  /* the bus replaces the spine */
  .js .org__l2::before {
    transform: scaleX(0); transform-origin: left;
    transition: transform 500ms var(--ease-draw) 420ms;
  }
  .js .org.in-view .org__l2::before { transform: scaleX(1); }
  /* manager stubs are vertical drops off the bus */
  .js .org__l2 > li::before {
    transform: scaleY(0); transform-origin: top;
  }
  .js .org.in-view .org__l2 > li::before { transform: scaleY(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §2.2 / §4.7 — H4 · EXAMINE HOVERS
   Hover reveals annotation, never just a colour. Pointer devices only.
   ═══════════════════════════════════════════════════════════════════ */

/* M9 — client sector label (duplicates the visible legend, hence aria-hidden) */
.cli__sec { display: none; }

@media (hover: hover) {

  /* M9 */
  .cli__sec {
    display: block;
    min-width: 0;
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .cli__idx { flex: none; }
  .cli:hover .cli__sec { opacity: 1; transform: none; }

  /* M10 — plate measurement overlay: the drawing language re-captures the
     photograph on approach. */
  .plate { --m-line: rgba(13,56,98,.28); }
  .plate--dark { --m-line: rgba(152,192,231,.40); }
  .plate__box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms linear;
    background:
      linear-gradient(90deg, transparent calc(33.333% - .5px), var(--m-line) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
      linear-gradient(90deg, transparent calc(66.666% - .5px), var(--m-line) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
      linear-gradient(180deg, transparent calc(33.333% - .5px), var(--m-line) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
      linear-gradient(180deg, transparent calc(66.666% - .5px), var(--m-line) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px));
  }
  .plate:hover .plate__box::after { opacity: 1; }
  .plate::before, .plate::after { transition: transform 200ms var(--ease-out); }
  .plate:hover::before { transform: scale(1.5); transform-origin: top left; }
  .plate:hover::after  { transform: scale(1.5); transform-origin: bottom right; }

  /* M15 — contact sheet row */
  .sheet__row { transition: background-color 150ms linear; }
  .sheet__row dt .ic { transition: color 150ms linear; }
  .sheet__row:hover { background: rgba(152,192,231,.04); }
  .sheet__row:hover dt .ic { color: var(--accent-300); }

  /* §4.7 — examining an org box lights its reporting line */
  .org__l2 > li .box { transition: border-color 150ms linear; }
  .org__l2 > li:hover::before { background: var(--accent-500); }
  .org__l2 > li:hover .box { border-color: var(--accent-500); border-top-color: var(--navy-700); }
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §4.2 — G2 · SCHEDULE OF QUANTITIES
   Every number is verbatim from the project ledger; the glyph *is* the
   number (73 hatches, 33 squares, 12 rooms, 40 tally strokes).
   ═══════════════════════════════════════════════════════════════════ */

.quants {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line-dark);
}
.quant {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 236px;
  padding: var(--s-5);
  border-left: 1px solid var(--line-dark);
}
.quant:nth-child(4n+1) { border-left: 0; }

.qglyph { height: 96px; width: auto; max-width: 100%; flex: none; align-self: flex-start; }
.qglyph rect, .qglyph line, .qglyph path, .qglyph polyline {
  fill: none;
  stroke: var(--accent-500);
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.q-ground, .q-bound { stroke: var(--line-dark-strong) !important; }
.q-hatch path { opacity: .55; }
.q-sites rect, .q-rooms rect, .q-reg--f rect { fill: var(--accent-500); stroke: none; }
.q-tally path { stroke: var(--accent-300); }

.quant__num {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 800;
  font-size: var(--fs-num-md);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--on-dark);
  font-feature-settings: "tnum" 1;
}
.quant__num .sep {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .5em;
  color: var(--line-dark-strong);
}
.quant__src {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-300);
  line-height: 1.5;
  min-height: 3em;   /* two lines reserved so all four cells rule up */
}

/* M12 — per-glyph construction */
.js .quant .q1 { clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--ease-draw) 150ms; }
.js .quant.in-view .q1 { clip-path: inset(0); }

.js .quant .q-sites rect,
.js .quant .q-reg rect,
.js .quant .q-tally > g {
  opacity: 0;
  transform: scale(.6);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 250ms var(--ease-out) var(--qd, 0ms),
    transform 250ms var(--ease-out) var(--qd, 0ms);
}
.js .quant.in-view .q-sites rect,
.js .quant.in-view .q-reg rect,
.js .quant.in-view .q-tally > g { opacity: 1; transform: none; }

.js .quant .q-rooms rect {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: top;
  transition: transform 200ms var(--ease-draw) var(--qd, 0ms);
}
.js .quant.in-view .q-rooms rect { transform: scaleY(1); }

@media (max-width: 899.98px) {
  .quants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quant { min-height: 200px; }
  .quant:nth-child(4n+1) { border-left: 1px solid var(--line-dark); }
  .quant:nth-child(2n+1) { border-left: 0; }
  .quant:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCE §4.1 — G1 · AREA-OF-OPERATIONS LOCATOR
   Plotted only where the record states a location; the omission is
   printed on the artwork.
   ═══════════════════════════════════════════════════════════════════ */

.locwrap { grid-column: 7 / span 6; grid-row: 1 / span 2; }
.locwrap__note { margin-top: 10px; }
.plate--map { display: block; }
.locator { width: 100%; height: auto; display: block; }

.lo-sheet { fill: none; stroke: var(--line-dark); stroke-width: 1; }
.lo-outline { fill: none; stroke: var(--accent-500); stroke-width: 2; stroke-linejoin: miter; }
.lo-corridor { fill: none; stroke: var(--accent-500); stroke-width: 3; stroke-linecap: square; }
.lo-corrmk line, .lo-corrmk polyline { fill: none; stroke: var(--accent-500); stroke-width: 1; }
/* corridor terminals (Taif, Baha) and the leader down to its label */
.lo-corrmk circle { fill: var(--accent-500); stroke: none; }
.lo-corrmk line { stroke: var(--line-dark-strong); }
.lo-mark circle, .lo-mark line { fill: none; stroke: var(--accent-300); stroke-width: 1; }
.lo-mark__c { fill: var(--accent-300); stroke: none; }
.lo-ring { fill: none; stroke: var(--accent-500); stroke-width: 1; stroke-dasharray: 2 3; }
.lo-leader { stroke: var(--line-dark-strong); stroke-width: 1; }
/* the title block is opaque, as a title block is on a real sheet */
.lo-title rect { fill: var(--navy-900); stroke: var(--line-dark-strong); stroke-width: 1; }
.lo-title line { stroke: var(--line-dark-strong); stroke-width: 1; }
/* 12/11 px in viewBox units, not the 14/13 px §4.1 quotes: at 14 px the
   22-character `06 DERE'YA ACCESS ROAD` line overruns the 520-unit sheet by
   ~90 units. 12 px is the largest size that keeps every line inside the
   border while clearing the outline and the detail ring. */
.lo-t {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  fill: var(--accent-300);
  stroke: none;
}
.lo-t--tb { font-size: 11px; }
/* the Riyadh detail list sits in a 172-unit gutter; 11px keeps its longest
   line ("06 DERE'YA ACCESS ROAD") inside the sheet border */
.lo-t--list { font-size: 11px; letter-spacing: .04em; }

/* M13 — construction sequence */
.js .lo-outline {
  /* dasharray must exceed the polygon perimeter (858 units) */
  stroke-dasharray: 880; stroke-dashoffset: 880;
  transition: stroke-dashoffset 1400ms var(--ease-draw);
}
.js .plate--map.in-view .lo-outline { stroke-dashoffset: 0; }

.js .lo-corridor {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  transition: stroke-dashoffset 500ms var(--ease-draw) 900ms;
}
.js .plate--map.in-view .lo-corridor { stroke-dashoffset: 0; }

.js .lo-corrmk { opacity: 0; transition: opacity 200ms linear 1250ms; }
.js .plate--map.in-view .lo-corrmk { opacity: 1; }

.js .lo-mark {
  opacity: 0; transform: scale(.6);
  transform-box: fill-box; transform-origin: center;
  transition: opacity 250ms var(--ease-out) 1100ms, transform 250ms var(--ease-out) 1100ms;
}
.js .plate--map.in-view .lo-mark { opacity: 1; transform: none; }

/* The detail ring keeps its dashed 2 3 character, so it fades rather than
   stroke-draws — the same fallback §4.1 sanctions for the leader line. */
.js .lo-ring { opacity: 0; transition: opacity 400ms linear 1150ms; }
.js .plate--map.in-view .lo-ring { opacity: 1; }

.js .lo-leader { opacity: 0; transition: opacity 200ms linear 1300ms; }
.js .plate--map.in-view .lo-leader { opacity: 1; }

.js .lo-tx { opacity: 0; transition: opacity 300ms linear 1400ms; }
.js .plate--map.in-view .lo-tx { opacity: 1; }

@media (max-width: 899.98px) {
  .locwrap { margin-top: var(--s-5); max-width: 480px; }
}

/* M6 — ledger current-row rule */
@media (hover: hover) and (min-width: 900px) {
  .ledger .lrow .c-no { position: relative; }
  .ledger .lrow .c-no::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 2px;
    background: var(--accent-500);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 150ms var(--ease-out);
  }
  .ledger .lrow:hover .c-no::before { transform: scaleY(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

/* ─── ≥900px: rotated section labels ─────────────────────────── */
@media (min-width: 900px) {
  .vlabel { display: block; }
  .hero { min-height: 92vh; display: flex; align-items: center; }
  .hero__wrap { width: 100%; }
}

/* ─── ≥1200px: org chart grid-with-bus ───────────────────────── */
@media (min-width: 1200px) {
  .org { padding: var(--s-7) var(--s-6) var(--s-8); }
  .org__top { position: relative; }
  .box--gm { width: 240px; max-width: none; margin-inline: auto; text-align: center; }
  .org__dropwrap { position: relative; height: 96px; padding: 0; }
  .org__drop { left: calc(50% - 1px); top: 0; height: 96px; bottom: auto; width: 2px; }
  .org__staff { position: absolute; left: calc(50% + 72px); top: 28px; width: 180px; max-width: none; }
  .org__stub { left: -72px; top: 18px; width: 72px; }

  .org__l2 {
    position: relative;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    margin-left: 0;
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
  }
  .org__l2::after { display: none; }
  .org__l2::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc((100% - 84px) / 16);
    width: calc(100% - (100% - 84px) / 8);
    height: 1px;
    background: var(--navy-700);
  }
  .org__l2 > li::before {
    left: 50%; top: -20px;
    width: 1px; height: 20px;
  }
  .org__l2 .box { min-height: 104px; padding: 10px 10px 12px; }
  .org__l2 .box__t { font-size: 11.5px; letter-spacing: .02em; }
  .org__l2 .box__subs { margin-top: 8px; padding-top: 8px; }
  .org__l2 .box__subs li { font-size: 10px; line-height: 1.6; }
}

/* ─── <1200px: values 3-up, clients 3-up ─────────────────────── */
@media (max-width: 1199.98px) {
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail__cell { border-left: var(--hair); border-top: var(--hair); min-height: 264px; }
  .rail__cell:nth-child(3n+1) { border-left: 0; }
  .rail__cell:nth-child(-n+3) { border-top: 0; }
  .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail__cell { padding: var(--s-6) var(--s-5); }
  .rail__name { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   <900px — the main mobile switch
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 899.98px) {
  :root { --gutter: var(--gutter-sm); --hdr-h: 60px; }

  .sec { padding-block: var(--s-8); }
  section[id] { scroll-margin-top: 72px; }

  /* header */
  .hdr__nav, .hdr__cta { display: none; }
  .burger { display: grid; }
  .mobnav { display: block; }
  .brandmark { width: 92px; }

  /* hero */
  .hero { padding-block: var(--s-6) var(--s-8); }
  .geostrip { margin-bottom: var(--s-6); gap: 12px; }
  .geostrip__b, .geostrip__rule { display: none; }

  .hero__grid { display: flex; flex-direction: column; gap: var(--s-6); }
  .hero__main { display: contents; }
  .hero__h1 { order: 1; margin-bottom: 0; }
  .hero__sub { order: 2; margin-bottom: 0; }
  .hero__cta { order: 3; margin-bottom: 0; }
  .hero__band { order: 4; margin-top: 0; }
  .hero__figwrap { order: 5; max-width: 350px; }

  /* band decomposes to the 2×2 bordered grid; rule + rule-interrupt gone */
  .hero__band::before { display: none; }
  .hero__band > .kicker {
    position: static;
    transform: none;
    background: transparent;
    padding: 0;
    margin-bottom: var(--s-4);
  }
  .stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr); border: var(--hair-dark); }
  .stat,
  .stat:first-child { /* beats the desktop .stat:first-child inline-start reset */
    padding: 20px;
    border-inline-start: var(--hair-dark);
    border-bottom: var(--hair-dark);
  }
  .stat::before { display: none; }
  .stat:nth-child(2n+1) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-bottom: 0; }
  .stat__num { font-size: clamp(2rem, 6vw, 2.75rem); }

  /* company */
  .company__grid { display: block; }
  .mv { border-left: 0; padding-left: 0; margin-top: var(--s-7); padding-top: var(--s-7); border-top: var(--hair); }
  .mv::before { display: none; }

  /* services */
  .svc { grid-template-columns: 1fr; }
  .svc__rail {
    writing-mode: horizontal-tb;
    transform: none;
    align-self: stretch;
    justify-self: stretch;
    margin: 0;
    border-bottom: var(--hair);
    padding: 14px var(--s-5);
  }
  .svc__body { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); row-gap: var(--s-5); border-left: 0; }
  .svc__lead, .svc__scope, .plate--svc { grid-column: 1; }
  .plate--svc { max-width: 440px; }
  .svc__lead .iconcell { width: 72px; height: 72px; margin-bottom: var(--s-4); }
  .svc__lead .ic--64 { width: 44px; height: 44px; }
  .svcstack { margin-bottom: var(--s-8); }

  /* projects — flagship */
  .flagship { display: block; padding-block: var(--s-6); }
  .flagship__dia { margin-top: var(--s-6); }
  .dim--gap { margin-block: var(--s-7); }

  /* projects — ledger cards */
  .ledger { border-top: 0; }
  .ledger thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .ledger, .ledger tbody { display: block; }
  .ledger tbody .lrow {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "no  val"
      "proj proj"
      "client client"
      "chart chart";
    border: 1px solid var(--line-dark);
    background: rgba(152,192,231,.03);
  }
  .ledger tbody .lrow > * { display: block; height: auto; width: auto; border-bottom: 0; padding: 12px 14px; }
  .ledger tbody .lrow:hover > * { background: transparent; }
  .ledger .c-no    { grid-area: no; padding-bottom: 4px; }
  .ledger .c-val   { grid-area: val; text-align: right; padding-bottom: 4px; font-size: 15px; color: var(--accent-300); }
  .ledger .c-proj  { grid-area: proj; }
  .ledger .c-client{ grid-area: client; padding-top: 0; padding-bottom: 10px; }
  .ledger .c-chart { grid-area: chart; padding-top: 0; padding-bottom: 14px; width: auto; }
  .ledger .c-client::before {
    content: attr(data-label) " — ";
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--accent-300);
  }
  .lexp { min-height: 44px; padding: 4px 14px 8px; font-size: 15px; }

  .lpanel { display: block; margin-bottom: var(--s-4); }
  .lpanel > td { display: block; background: transparent; }
  .lpanel.is-open > td { border-bottom: 0; }
  .lpanel__in { flex-direction: column; gap: 0; border-left: 2px solid var(--accent-500); }
  .plate--mini { margin: var(--s-4) 0 0 var(--s-4); }
  .lpanel__tx { padding: var(--s-4); }

  /* strip */
  .strip { margin-top: var(--s-8); }
  .plate--sq { width: 220px; }

  /* clients */
  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* org */
  .org { padding: var(--s-5) var(--s-4); }
  .org__dropwrap { padding-left: 36px; }
  .org__stub { left: -24px; width: 24px; }
  .org__l2 { padding-left: 36px; gap: var(--s-4); }
  .org__l2 > li::before { left: -36px; width: 36px; }
  .org__l2 .box { min-height: 0; }

  /* contact + footer */
  .contact__grid { display: block; }
  .sheet { margin-top: var(--s-7); }
  .contact__pitch { max-width: none; }
  .sheet__row { grid-template-columns: 76px 1fr; padding: 14px; gap: 12px; }

  .foot__grid { display: block; padding-block: var(--s-6); }
  .foot__nav { margin-top: var(--s-5); }
  .foot__nav a { display: block; padding-block: 9px; }
  .foot__meta { text-align: left; margin-top: var(--s-5); }
}

/* ═══════════════════════════════════════════════════════════════════
   <640px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 639.98px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail__cell {
    border-left: var(--hair);
    border-top: var(--hair);
    min-height: 0;
    padding: var(--s-5) var(--s-4);
  }
  .rail__cell:nth-child(3n+1) { border-left: var(--hair); }
  .rail__cell:nth-child(2n+1) { border-left: 0; }
  .rail__cell:nth-child(-n+3) { border-top: var(--hair); }
  .rail__cell:nth-child(-n+2) { border-top: 0; }
  .rail__letter { font-size: 64px; }
  .rail__name { font-size: 13px; letter-spacing: .04em; }

  .clients { grid-template-columns: 1fr; }
  .foot__nav ul { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .hero__cta .btn, .contact__cta .btn { width: 100%; justify-content: space-between; }

  /* group strip → 2×2; the hairline grid re-forms on the new axis */
  .grpstrip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grpstrip__list > li { border-inline-start: var(--hair-dark); }
  .grpstrip__list > li:nth-child(2n+1) { border-inline-start: 0; }
  .grpstrip__list > li:nth-child(n+3) { border-top: var(--hair-dark); }
  .grpbrand { padding: var(--s-4) var(--s-3); }
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — §7
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .sechead .rule { transform: none !important; }
  .js .matrix .mk { opacity: 1 !important; transform: none !important; }
  /* MATERIALS §6.4 — hatches printed, keys popped, division rules drawn */
  .js .mrow .sw__f { clip-path: none !important; }
  .js .mrow .mrow__code .mk-d { opacity: 1 !important; transform: none !important; }
  .js .mats__divhead .mats__divrule { transform: none !important; }
  .js .ledgerwrap .bar { width: var(--w) !important; }
  .js .sk-pipe { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .js .hero__h1 .hl { opacity: 1 !important; transform: none !important; }
  .plate:hover .plate__box img { transform: none; }

  /* ── ENHANCE §6.4 — every new pattern stated explicitly, so none of
     them depends on the wildcard above alone. Everything renders in its
     final, fully-drawn state on first paint. ── */

  /* P0 (M1) — the whole hero timeline collapses to t = 0 */
  .js .geostrip__a, .js .geostrip__b,
  .js .hero__sub, .js .hero__cta .btn,
  .js .stat__lab, .js .plate--hero,
  .js .seq__tag { opacity: 1 !important; transform: none !important; }
  /* positioning transforms must survive: the kicker's translateY(-50%)
     rule-interrupt, and the arrowheads' rotate(45deg)/rotate(225deg) —
     force opacity only on these, never transform */
  .js .hero__band > .kicker,
  .js .seq__link--h::after, .js .seq__link--v::after { opacity: 1 !important; }
  .js .geostrip__rule, .js .hero__band::before, .js .stat::before,
  .js .seq__link--h::before, .js .seq__link--v::before,
  .js .hero__figwrap .dim { transform: none !important; }
  .js .hero__figwrap .dim,
  .js .plate--hero .seq__stage img { clip-path: none !important; }
  .js .hero .joint { transform: none !important; }

  /* M2 — rules drawn */
  .js .pullquote::before, .js .mv::before { transform: none !important; }
  .js .mv .mv__block { opacity: 1 !important; transform: none !important; }

  /* M3 — icons drawn */
  .js .svc .ic--64 { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }

  /* M4 — scope lists */
  .js .svc .scopelist li { opacity: 1 !important; transform: none !important; }
  .js .svc .scopelist li::before { transform: none !important; }

  /* M5 — schematic complete */
  .js .sk-sheet { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .js .sk-datum, .js .sk-pump, .js .sk-tank1, .js .sk-tank2,
  .js .sk-arrow, .js .sk-tick,
  .js .sk-tx, .js .sk-dim, .js .sk-title { opacity: 1 !important; transform: none !important; }

  /* M7 — terminal ticks visible with the bars */
  .js .ledgerwrap .bar::after { opacity: 1 !important; }

  /* M10 — measurement overlay is purely decorative: off entirely */
  .plate:hover .plate__box::after { opacity: 0 !important; }
  .plate:hover::before, .plate:hover::after { transform: none !important; }

  /* M11 — org connectors and boxes complete */
  .js .org .box--gm, .js .org .org__staff .box, .js .org .org__l2 > li .box {
    opacity: 1 !important; transform: none !important;
  }
  .js .org__drop, .js .org__stub,
  .js .org__l2::before, .js .org__l2::after,
  .js .org__l2 > li::before { transform: none !important; }

  /* M12 / G2 — glyphs fully hatched and populated */
  .js .quant .q1 { clip-path: none !important; }
  .js .quant .q-sites rect, .js .quant .q-reg rect,
  .js .quant .q-tally > g, .js .quant .q-rooms rect {
    opacity: 1 !important; transform: none !important;
  }

  /* M13 / G1 — locator fully drawn */
  .js .lo-outline, .js .lo-corridor { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .js .lo-corrmk, .js .lo-mark, .js .lo-ring, .js .lo-leader, .js .lo-tx {
    opacity: 1 !important; transform: none !important;
  }

  /* M14 / G4 — joints at full width */
  .js .joint[data-reveal], .js .foot[data-reveal] .foot__bar { transform: none !important; }

  /* G3 — reticle drawn and static */
  .js .reticle__v, .js .reticle__h { transform: none !important; }
  .js .reticle__c { opacity: 1 !important; transform: none !important; }
}

/* keep hover-motion off touch devices — ENHANCE §6.4. Every piece of
   information these hovers reveal also exists statically (legend, ledger
   affordances, captions), so suppressing them loses nothing. */
@media (hover: none) {
  .plate:hover .plate__box img { transform: none; }
  .cli__sec { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO.md §7 — RTL (Arabic build). Grid columns, flex rows and all
   inset-inline-start geometry mirror automatically — including the
   stage order (S.1 starts at inline-start = right). These rules flip
   the remaining physical values: draw origins, print-wipe directions,
   the forward arrowhead, the reticle centre x-correction, and the
   watermark anchor. The photographs themselves are NEVER mirrored.
   ═══════════════════════════════════════════════════════════════════ */

[dir="rtl"] .js .geostrip__rule,
[dir="rtl"] .js .hero__band::before,
[dir="rtl"] .js .hero .joint { transform-origin: right; }

[dir="rtl"] .js .hero__figwrap .dim { clip-path: inset(0 0 0 100%); }
[dir="rtl"] .js .hero.is-ready .hero__figwrap .dim { clip-path: inset(0); }
[dir="rtl"] .js .plate--hero .seq__stage img { clip-path: inset(0 0 0 100%); }
[dir="rtl"] .js .hero.is-ready .plate--hero .seq__stage img { clip-path: inset(0); }

/* the forward arrow still points inline-end (= left): flip its head,
   and draw its stem from the right */
[dir="rtl"] .seq__link--h::after { transform: rotate(225deg); }
[dir="rtl"] .js .seq__link--h::before { transform-origin: right; }
/* .seq__link--v is direction-neutral (centred, points down) — no rule */

[dir="rtl"] .reticle__c { margin: -4px -4px 0 0; }
[dir="rtl"] .watermark--hero { right: auto; left: -8%; }

/* MATERIALS.md §9 — the division rule draws and the hatch prints run
   right→left. The <pattern> geometry itself is NEVER mirrored: hatches
   are keyed drafting conventions, not reading-direction layout. */
[dir="rtl"] .js .mats__divhead .mats__divrule { transform-origin: right; }
[dir="rtl"] .js .mrow .sw__f { clip-path: inset(0 0 0 100%); }
[dir="rtl"] .js .mrow.in-view .sw__f { clip-path: inset(0); }

/* ═══════════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER (additive — no existing selector is modified)
   Header hairline chip on both builds; a normal row in the mobile panel.
   ═══════════════════════════════════════════════════════════════════ */

.langsw {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 150ms linear, border-color 150ms linear;
}
/* Arabic needs more optical size than an 11px Latin mono label. On the English
   page IBM Plex Sans Arabic is deliberately not loaded (one word does not
   justify the request); the system Arabic face resolves it. */
.langsw[lang="ar"] {
  font-family: "IBM Plex Sans Arabic", var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  padding-block: 7px;
}
.langsw:hover { color: var(--navy-700); border-color: var(--navy-700); }
.header--dark .langsw { color: var(--on-dark-soft); border-color: var(--line-dark-strong); }
.header--dark .langsw:hover { color: var(--accent-300); border-color: var(--accent-300); }

.langsw-m[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-sans); }
.mobnav .langsw-m .mono-i { letter-spacing: .08em; }

@media (max-width: 899.98px) { .langsw { display: none; } }