/* ═══════════════════════════════════════════════════════════════════
   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: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, 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: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, 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; }

/* ── Hero photograph (client artwork, text removed) ──────────────────
   The blueprint grid stays on the plain hero; on .hero--photo the
   photograph is the ground and the grid would fight it, so it is
   dropped and a navy scrim carries the text contrast instead.
   The scrim is heaviest at the left, where the statement sits. */
.hero--photo { background-image: none; }
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;   /* keeps the monument in frame as it crops */
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg,
      rgba(7,28,50,.90) 0%,
      rgba(7,28,50,.78) 32%,
      rgba(7,28,50,.34) 62%,
      rgba(7,28,50,.16) 100%),
    linear-gradient(180deg,
      rgba(7,28,50,.72) 0%,
      rgba(7,28,50,.34) 30%,
      rgba(7,28,50,0) 48%,
      rgba(7,28,50,0) 62%,
      rgba(7,28,50,.55) 100%);
}
@media (max-width: 900px) {
  /* the statement runs full width on narrow screens, so the scrim
     has to be even across it rather than weighted to one side */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(7,28,50,.88) 0%, rgba(7,28,50,.74) 45%, rgba(7,28,50,.92) 100%);
  }
  .hero__bg img { object-position: 68% 50%; }
}

/* The statement is set in caps to match the approved artwork. The words
   stay sentence-case in the markup so assistive tech reads them as words,
   not initialisms. */
.hero__h1--caps { text-transform: uppercase; letter-spacing: 0.005em; }
.hero__h1--caps .hl--soft { color: rgba(242,246,250,.62); }

.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 , .statband {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  margin-top: var(--s-8);
}
/* The same band, now standing in the Projects section rather than closing
   the hero sheet. It keeps every rule below via .hero__band, so the two
   selectors are listed together throughout. */
.statband {
  position: relative;
  z-index: 1;
  margin-block: var(--s-6) var(--s-8);
}
/* the band rule — drawable, spans all 12 columns */
.hero__band::before , .statband::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 , .statband > .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: 6 / -1; padding-inline-start: var(--s-6); }

/* ─── GM portrait stage ────────────────────────────────────────────────
   The cut-out portrait stands in a steel plate drawn like the rest of the
   site (hairline, blueprint grid, monogram). The plate starts at the collar
   line, so his head and shoulders break out above its top edge — the
   out-of-frame effect that carries the depth. On a fine pointer the layers
   drift at different rates and the rig tilts slightly. The plate is light,
   not navy: a navy plate swallowed the navy suit.
   The tilt lives on .gmstage__rig because [data-reveal].in-view resets
   transform on the figure itself. */
.gmstage {
  --rx: 0; --ry: 0;
  grid-column: 1 / span 5;
  align-self: start;
  position: relative;
  margin: 0;
  aspect-ratio: 1100 / 1424;          /* cut-out 1100x1271 + the name strip */
}
.gmstage__rig {
  position: absolute;
  inset: 0;
  transform: perspective(1400px) rotateX(calc(var(--ry) * -3deg)) rotateY(calc(var(--rx) * 4deg));
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-out);
}
/* offset hairline frame: the site's offset-block motif, as a back layer */
.gmstage__frame {
  position: absolute;
  inset: calc(42% - 18px) calc(7% - 18px) 9% calc(7% + 18px);
  border: 1px solid var(--navy-700);
  opacity: .55;
  transform: translate3d(calc(var(--rx) * -20px), calc(var(--ry) * -14px), 0);
  transition: transform 600ms var(--ease-out);
}
.gmstage__plate {
  position: absolute;
  inset: 42% 7% 2% 7%;          /* 2% keeps the plate tucked behind the strip when tilted */
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(13,56,98,.08) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(13,56,98,.08) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(165deg, #E4ECF4 0%, #CCD5DE 100%);
  transform: translate3d(calc(var(--rx) * -8px), calc(var(--ry) * -6px), 0);
  transition: transform 600ms var(--ease-out);
}
.gmstage__mono {
  position: absolute;
  width: 86%;
  inset-inline-end: -22%;
  top: -18%;
  opacity: .16;
  transform: translate3d(calc(var(--rx) * -18px), calc(var(--ry) * -12px), 0);
  transition: transform 600ms var(--ease-out);
}
.gmstage__halo {
  position: absolute;
  left: 18%; right: 18%;
  top: 0;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(86,154,220,.24) 0%, rgba(86,154,220,0) 66%);
  transform: translate3d(calc(var(--rx) * -12px), calc(var(--ry) * -8px), 0);
  transition: transform 600ms var(--ease-out);
  pointer-events: none;
}
.gmstage__cut {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% * 153 / 1424);    /* sits on the name strip */
  display: block;
  transform: translate3d(calc(var(--rx) * 10px), calc(var(--ry) * 6px), 0);
  transition: transform 600ms var(--ease-out);
}
.gmstage__cut img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(16px 20px 22px rgba(7,28,50,.26));
}
.gmstage__tag {
  position: absolute;
  inset-inline: -4% 3%;
  bottom: 0;
  height: calc(100% * 153 / 1424);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-inline: var(--s-5);
  background: var(--navy-700);
  color: var(--on-dark);
  box-shadow: var(--shadow-pop);
  transform: translate3d(calc(var(--rx) * 14px), calc(var(--ry) * 8px), 0);
  transition: transform 600ms var(--ease-out);
}
.gmstage__name { font-weight: 700; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; }
.gmstage__role {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent-300);
}

/* The pull quote floats across the stage's edge as a card. Selector weight
   is deliberate: it has to beat the RTL sheet's padding override. */
@media (min-width: 1100px) {
  .company__grid .gm .pullquote {
    position: relative;
    z-index: 3;
    margin-inline-start: calc(-1 * (var(--s-6) + var(--gutter) + 88px));
    margin-block: var(--s-6);
    padding: var(--s-5) var(--s-6);
    padding-inline-start: calc(var(--s-5) + 3px);
    background: var(--surface);
    border: var(--hair);
    box-shadow: var(--shadow-pop);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gmstage__rig, .gmstage__frame, .gmstage__plate, .gmstage__mono, .gmstage__halo, .gmstage__cut, .gmstage__tag { transition: none; }
}
/* M2 — the Mission/Vision column rule is a pseudo-element so it can draw. */
/* Mission/Vision now run as a full-width pair beneath the GM feature */
.mv {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  padding-top: var(--s-7);
  border-top: var(--hair);
}
.mv::before { display: none; }

.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); }

/* side by side now: the pair is split by a vertical hairline, not a rule */
.mv__block + .mv__block { padding-inline-start: var(--s-7); border-inline-start: var(--hair); }
@media (max-width: 899.98px) {
  .mv__block + .mv__block { padding-inline-start: 0; border-inline-start: 0; 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: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, 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: 220px; flex: none; margin: var(--s-5) 0 var(--s-5) var(--s-4); }   /* was 120px */

/* Ongoing / completed panels: up to four site photos in a 2×2 block,
   each opening that project's gallery in the photo viewer. */
.lpanel__gal {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, 200px);
  gap: 8px;
  margin-block: var(--s-5);
  margin-inline-start: var(--s-4);
}
.lpanel__gal--one { grid-template-columns: 300px; }
a.lbx.lthumb {
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-dark-strong);
  background: var(--navy-900);
}
.lthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--ease-out); }
.lthumb:hover img { transform: scale(1.04); }
.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); }
/* A few marks are supplied on their own dark ground. `multiply` would drop
   that whole plate onto the cell, so those opt out of the blend and keep
   the same greyscale-to-colour behaviour as the rest. */
.cli__logo--plate img { mix-blend-mode: normal; }

/* Service plates: three photos share one frame and cross-fade (client
   request, 30 Sep). All three sit in the same grid cell; only .is-on is
   visible. Hidden slides use visibility so they leave the tab order and the
   accessibility tree — the delayed visibility transition lets them fade out. */
.plate--gallery .svcgal { display: grid; position: relative; }
.plate--gallery .svcgal > .plate__box {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--ease-out), visibility 0s linear 900ms;
}
.plate--gallery .svcgal > .plate__box.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms var(--ease-out), visibility 0s;
}
.svcgal__dots {
  position: absolute;
  bottom: 6px;
  inset-inline-end: 6px;
  z-index: 2;
  display: flex;
}
.svcgal__dot {               /* 24px hit area, 10px square mark */
  width: 24px; height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, pointer;
}
.svcgal__dot::before {
  content: "";
  width: 10px; height: 10px;
  border: 1px solid rgba(255,255,255,.95);
  background: rgba(7,28,50,.35);
  box-shadow: 0 0 2px rgba(0,0,0,.5);
  transition: background 200ms linear;
}
.svcgal__dot[aria-current="true"]::before { background: #fff; }
.svcgal__dot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .plate--gallery .svcgal > .plate__box,
  .plate--gallery .svcgal > .plate__box.is-on { transition: none; }
}

.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 .hero .stat::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 400ms var(--ease-draw);
}
.js .hero.is-ready .stat::before { transform: scaleY(1); }
.js .hero .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; }
  .gmstage { width: min(100%, 380px); margin: 0 auto var(--s-7); }
  .gm { padding-inline-start: 0; }
  .mv { grid-template-columns: 1fr; gap: var(--s-6); }
  .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); width: min(220px, calc(100% - 2 * var(--s-4))); }
  .lpanel__gal, .lpanel__gal--one {
    grid-template-columns: 1fr 1fr;
    width: calc(100% - 2 * var(--s-4));
    margin: var(--s-4) var(--s-4) 0;
  }
  .lpanel__gal--one { grid-template-columns: 1fr; }
  .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; } }

/* ─── Photo viewer ─────────────────────────────────────────────────────
   Triggers: every content photo is wrapped in a.lbx. The affordance is
   deliberately quiet — a zoom cursor, a slight lift on hover and a
   visible focus ring — so the plates keep their drawn-record character. */
a.lbx {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}
a.lbx:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
a.lbx::after {                 /* corner mark: "this opens larger" */
  content: "";
  position: absolute;
  top: 8px; inset-inline-end: 8px;
  width: 14px; height: 14px;
  border-top: 2px solid rgba(255,255,255,.9);
  border-inline-end: 2px solid rgba(255,255,255,.9);
  opacity: 0;
  transition: opacity 200ms linear;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
}
a.lbx:hover::after, a.lbx:focus-visible::after { opacity: 1; }

html.lb-open { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  background: rgba(7,28,50,.985);
  color: var(--on-dark);
  opacity: 0;
  transition: opacity 180ms linear;
}
.lb.is-in { opacity: 1; }
.lb[hidden] { display: none; }

.lb__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 88px 16px;
  min-height: 0;
  touch-action: pan-y;
}
.lb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid var(--line-dark-strong);
  background: var(--navy-800);
  transition: opacity 160ms linear;
}
.lb.is-loading .lb__img { opacity: .25; }
.lb__wait {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-kicker);
  color: var(--on-dark-soft);
  opacity: 0;
  pointer-events: none;
}
.lb.is-loading .lb__wait { opacity: 1; }

.lb__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) 88px var(--s-6);
  border-top: 1px solid var(--line-dark);
}
.lb__cap { font-size: var(--fs-small); line-height: 1.5; color: var(--on-dark); max-width: 80ch; }
.lb__count {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-kicker);
  color: var(--on-dark-soft);
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}

.lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: rgba(7,28,50,.6);
  color: var(--on-dark);
  border: 1px solid var(--line-dark-strong);
  font-size: 22px;
  line-height: 1;
  cursor: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, pointer;
  transition: background 160ms linear, border-color 160ms linear;
}
.lb__btn:hover { background: var(--navy-600); border-color: var(--accent-300); }
.lb__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lb__btn[hidden] { display: none; }
.lb__close { top: 12px; inset-inline-end: 12px; font-size: 28px; }
.lb__prev, .lb__next { top: calc(50% - 24px - 40px); }
.lb__prev { inset-inline-start: 20px; }
.lb__next { inset-inline-end: 20px; }
[dir="rtl"] .lb__prev span, [dir="rtl"] .lb__next span { display: inline-block; transform: scaleX(-1); }

@media (max-width: 700px) {
  .lb__stage { padding: 60px 8px 8px; }
  .lb__bar { padding: var(--s-3) var(--s-4) var(--s-5); flex-direction: column; gap: var(--s-2); }
  .lb__prev, .lb__next { top: auto; bottom: 84px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb__img, .lthumb img { transition: none; }
  .lthumb:hover img { transform: none; }
}

/* Ongoing and Completed tables sit back to back — give the second heading air */
.ledgerwrap + .ledgerwrap { margin-top: var(--s-7); }

/* ─── Organization chart (redesigned 30 Sep, after the GM feature) ──────
   The GM heads the chart as a small version of the portrait stage — steel
   plate, offset navy frame, cut-out breaking out above the plate, navy name
   strip. Document Control floats beside him as a card on a hairline, the way
   the pull quote floats over the portrait. One drop line lands on a
   dimension rule; the eight departments sit below as equal plates, each with
   the offset-frame motif, which spreads apart on hover for depth.
   (The previous chart's .org/.box rules above no longer match anything.) */
.oc { position: relative; }

.oc__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
/* The GM node: a navy plate — the portrait section's name strip, grown up —
   with the offset hairline frame behind it. No photo here: the portrait
   lives in the GM message section. */
.oc__head { isolation: isolate; }   /* lets the frame sit behind the plate, above the band */
.oc__gm {
  grid-column: 2;
  position: relative;
  min-width: 280px;
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--navy-700);
  color: var(--on-dark);
  border-bottom: 3px solid var(--accent-500);
  box-shadow: var(--shadow-pop);
  text-align: center;
}
.oc__gm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--navy-700);
  opacity: .45;
  transform: translate(12px, -12px);
}
.oc__gm-t { font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }
.oc__gm-n {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent-300);
}

/* Document Control: a floating card joined to the GM plate by a hairline */
.oc__staff {
  grid-column: 3;
  justify-self: start;
  position: relative;
  margin-inline-start: 56px;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: var(--hair);
  border-inline-start: 3px solid var(--steel-500);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oc__staff::before {                 /* the hairline back to the GM plate */
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 100%;
  width: calc(56px + 3px);
  height: 1px;
  background: var(--navy-700);
  opacity: .6;
}
.oc__staff-k {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.oc__staff-t { font-weight: 600; color: var(--ink); }

.oc__drop {
  display: block;
  width: 2px;
  height: var(--s-7);
  margin: 0 auto;
  background: var(--navy-700);
}
.oc__rule { margin: 0 0 var(--s-6); }

/* Departments */
.oc__grid {
  list-style: none;
  margin: 0;
  padding: 10px 10px 0 0;          /* room for the offset frames */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}
.oc__dept { position: relative; }
.oc__dept::before {                 /* the offset-frame motif */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--navy-700);
  opacity: .32;
  transform: translate(8px, -8px);
  transition: transform 320ms var(--ease-out), opacity 320ms linear;
}
.oc__card {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--surface);
  border: var(--hair);
  border-bottom: 3px solid var(--navy-700);   /* the GM name strip, in miniature */
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.oc__dept:hover .oc__card { transform: translate(-3px, 3px); box-shadow: var(--shadow-pop); }
.oc__dept:hover::before { transform: translate(13px, -13px); opacity: .55; }
.oc__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-kicker);
  color: var(--accent-500);
  margin-bottom: var(--s-3);
}
.oc__t {
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy-700);
  margin: 0;
}
.oc__subs {
  list-style: none;
  margin: auto 0 0;
  padding: var(--s-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.oc__t + .oc__subs { margin-top: auto; }
.oc__subs li + li::before { content: "\00b7"; padding-inline: 8px; color: var(--steel-500); }
.oc__src { margin-top: var(--s-6); }

@media (max-width: 1099.98px) {
  .oc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699.98px) {
  .oc__head { grid-template-columns: 1fr; justify-items: center; }
  .oc__gm { grid-column: 1; min-width: 240px; }
  .oc__staff { grid-column: 1; justify-self: center; margin: var(--s-6) 0 0; text-align: center; border-inline-start: var(--hair); border-top: 3px solid var(--steel-500); }
  .oc__staff::before { top: auto; bottom: 100%; inset-inline-end: auto; left: 50%; width: 1px; height: var(--s-6); }
  .oc__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .oc__dept::before, .oc__card { transition: none; }
}

/* ─── Project view (1 Oct) ──────────────────────────────────────────────
   Each expanded project: details and data on the reading-start side, the
   main photo on the other, with the rest of the project's photos in a
   slider underneath. Clicking a slider photo puts it in the main frame;
   clicking the main frame opens it full-screen in the photo viewer. */
.lpanel__in.pv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--s-6);
  align-items: start;
  padding: 0 var(--s-4);            /* no vertical padding here: it would survive the collapse */
}
.lpanel__in.pv > * { margin-block: var(--s-5) var(--s-6); }   /* clipped away when the row closes */
.pv .lpanel__tx { padding: 0; max-width: none; }
.pv__data {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-dark);
}
.pv__data dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent-300);
  margin-bottom: 4px;
}
.pv__data dd { margin: 0; color: var(--on-dark); font-weight: 600; font-size: var(--fs-small); }
.pv__media { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
a.lbx.pv__main {
  height: auto;
  aspect-ratio: 3 / 2;
  background: var(--navy-900);
  border: 1px solid var(--line-dark-strong);
}
.pv__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pv__strip {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: center;
}
.pv__track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.pv__track::-webkit-scrollbar { display: none; }
a.lbx.pv__thumb {
  flex: 0 0 96px;
  width: 96px;
  height: auto;
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  border: 1px solid var(--line-dark);
  opacity: .55;
  cursor: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, pointer;
  transition: opacity 160ms linear, border-color 160ms linear;
}
a.lbx.pv__thumb::after { display: none; }       /* no "opens larger" mark: these switch the main frame */
.pv__thumb:hover { opacity: .9; }
.pv__thumb.is-on { opacity: 1; border-color: var(--accent-300); box-shadow: inset 0 0 0 1px var(--accent-300); }
.pv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv__nav {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  color: var(--on-dark);
  border: 1px solid var(--line-dark-strong);
  cursor: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, pointer;
  transition: background 160ms linear, opacity 160ms linear;
}
.pv__nav:hover:not(:disabled) { background: var(--navy-600); }
.pv__nav:disabled { opacity: .3; cursor: default; }
.pv__nav:focus-visible, .pv__thumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[dir="rtl"] .pv__nav span { display: inline-block; transform: scaleX(-1); }
@media (max-width: 899.98px) {
  .lpanel__in.pv { grid-template-columns: 1fr; gap: 0; }
  .lpanel__in.pv > .pv__media { margin-top: 0; }
}

/* ─── Locator → Google Maps (1 Oct) ─────────────────────────────────── */
a.maplink { display: block; position: relative; color: inherit; text-decoration: none; }
a.maplink .plate--map { cursor: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, pointer; }
.maplink__cta {
  position: absolute;
  top: 22px;
  inset-inline-start: 22px;          /* top-end is the map's notation key */
  z-index: 2;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: #fff;
  background: var(--navy-700);
  border: 1px solid var(--accent-300);
  transition: background 160ms linear;
}
a.maplink:hover .maplink__cta, a.maplink:focus-visible .maplink__cta { background: var(--accent-500); }
a.maplink:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* ═══ 2 Oct — section titles, scope typography, calmer dark grounds ═══ */

/* Section titles ("01 Company" … "08 Contact") read as headings now:
   the brand sans at heading size, with the number in a solid block. */
.sechead .kicker-row { gap: 16px; margin-bottom: var(--s-4); }
.sechead .kicker-row > span:not(.idx) {
  font-family: var(--font-sans);
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
  line-height: 1.1;
  color: var(--navy-700);
}
.sechead .kicker-row .idx {
  font-size: 1rem;
  padding: 7px 12px;
  letter-spacing: .04em;
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}
.sechead--dark .kicker-row > span:not(.idx) { color: var(--on-dark); }
.sechead--dark .kicker-row .idx { background: var(--accent-500); border-color: var(--accent-500); color: var(--navy-900); }

/* Scope lists — the brand sans in sentence case instead of mono capitals */
.svc__scope .mono-label,
.pv .lpanel__tx .mono-label {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.svc__scope .mono-label { color: var(--navy-700); }
.scopelist li {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding-block: 12px;
}
.pv .lpanel__tx > p:not([class]) { font-size: 1rem; line-height: 1.6; color: var(--on-dark); }
.pv .lpanel__tx .ltags {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.pv__data dt { font-family: var(--font-sans); font-size: .75rem; font-weight: 600; letter-spacing: .08em; }

/* Projects and Contact: plain navy, no blueprint grid */
#projects.sec--dark, #contact.sec--dark { background-image: none; }

/* Map: white lettering */
.plate--map .lo-t { fill: #fff; }
.plate--map figcaption, .locwrap__note { color: #fff; }

/* ─── Careers (mirrors ibes-tech.com/careers, in ProCiv's own language) ─── */
.cr__h {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--navy-700);
  margin: var(--s-8) 0 var(--s-5);
}
.cr > .cr__h:first-child { margin-top: var(--s-6); }
.cr__why { list-style: none; margin: 0; padding: 10px 10px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.cr__card { position: relative; background: var(--surface); border: var(--hair); border-bottom: 3px solid var(--navy-700); padding: var(--s-6) var(--s-5); }
.cr__card::after {                 /* offset-frame motif; ::after so [data-reveal] transforms don't fight it */
  content: ""; position: absolute; inset: 0; border: 1px solid var(--navy-700); opacity: .3;
  transform: translate(8px, -8px); pointer-events: none; z-index: -1;
}
.cr__why { isolation: isolate; }
.cr__icon { display: grid; place-items: center; width: 56px; height: 56px; border: var(--hair); background: var(--surface-2); color: var(--navy-700); margin-bottom: var(--s-4); }
.cr__ic { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.cr__card h4 { font-size: 1.1875rem; font-weight: 700; color: var(--navy-700); letter-spacing: -0.01em; margin-bottom: var(--s-2); }
.cr__card p { color: var(--ink-soft); line-height: var(--lh-body); }

.cr__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--surface-2); border: var(--hair); }
.cr__tab {
  padding: 9px 14px;
  font: 600 .875rem/1.2 var(--font-sans);
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  cursor: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, pointer;
  transition: background 160ms linear, color 160ms linear;
}
.cr__tab:hover { color: var(--navy-700); }
.cr__tab.is-on { background: var(--surface); color: var(--navy-700); border-color: var(--line); }
.cr__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.cr__jobs { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.cr__jobs:empty { display: none; }
.cr__job { display: flex; flex-direction: column; gap: var(--s-3); background: var(--surface); border: var(--hair); border-bottom: 3px solid var(--navy-700); padding: var(--s-5); }
.cr__job[hidden] { display: none; }
.cr__job-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.cr__job-h h4 { font-size: 1.125rem; font-weight: 700; color: var(--navy-700); line-height: 1.25; }
.cr__type { flex: none; padding: 3px 9px; font: 600 .75rem/1.4 var(--font-sans); background: var(--navy-700); color: #fff; white-space: nowrap; }
.cr__meta { font-size: var(--fs-small); color: var(--ink-faint); }
.cr__desc { color: var(--ink-soft); line-height: var(--lh-body); }
.cr__job-f { margin-top: auto; padding-top: var(--s-3); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.cr__empty { margin-top: var(--s-5); padding: var(--s-8) var(--s-5); text-align: center; background: var(--surface-2); border: var(--hair); }
.cr__empty[hidden] { display: none; }
.cr__empty-t { font-size: 1.25rem; font-weight: 600; color: var(--navy-700); margin-bottom: var(--s-2); }
.cr__empty p:last-child { color: var(--ink-soft); max-width: 56ch; margin-inline: auto; }

.cr__cta { margin-top: var(--s-7); display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); flex-wrap: wrap; padding: var(--s-6); background: var(--navy-700); color: var(--on-dark); }
.cr__cta-t { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-h3); color: #fff; margin-bottom: var(--s-2); }
.cr__cta p:last-child { color: var(--on-dark-soft); max-width: 62ch; }
.cr__cta .btn--primary { background: var(--accent-500); border-color: var(--accent-500); color: var(--navy-900); flex: none; }

@media (max-width: 899.98px) {
  .cr__why, .cr__jobs { grid-template-columns: 1fr; }
}

/* ═══ Footer logo scale + brand cursor ═══ */
.foot__logo { width: clamp(180px, 17vw, 232px); }
.foot__grid { align-items: center; }

/* The pointer is the ProCiv monogram with a small tip marking the hotspot:
   navy at rest, accent blue over anything clickable. Text fields keep the I-beam. */
html {
  cursor: url("assets/cursor.png?v=1") 2 2, auto;
  cursor: image-set(url("assets/cursor.png?v=1") 1x, url("assets/cursor@2x.png?v=1") 2x) 2 2, auto;
}
a, button, summary, select, label[for], [role="button"], [role="tab"] { cursor: url("assets/cursor-link.png?v=1") 2 2, pointer; cursor: image-set(url("assets/cursor-link.png?v=1") 1x, url("assets/cursor-link@2x.png?v=1") 2x) 2 2, pointer; }