/* Thunderbird Elevator - design system, r2
   Direction: Vertical Infrastructure
   Palette and rules per the master design brief. */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
/* Inter Tight is a pinned brand commitment: the wordmark itself is drawn
   from its outlines (see Brand Guidelines and DESIGN.md). Changing faces is
   a rebrand decision, not a detector fix. */
/* impeccable-disable-next-line overused-font */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/InterTight-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/InterTight-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexSans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/IBMPlexSans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexSans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/IBMPlexMono-500.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --navy-deep: #002546;
  --navy: #003366;
  --brand-navy: #01213E;
  --navy-floor: #001A33;     /* deepest navy: hero base, footer base */
  --champagne: #D2BF96;
  --gold: #C1A870;
  /* text-safe gold: >=4.99:1 on white AND on every tinted surface below.
     The former value (#8A7139) passed only on pure white and failed on
     --soft, --verify-bg, and the active triage tile. */
  --gold-deep: #7E672F;
  --gold-hover: #A88E52;
  /* navy-family slate rather than a neutral gray: keeps secondary text in
     the brand's temperature and clears 4.5:1 on the warm surfaces. */
  --gray: #5C6B7A;
  --white: #FFFFFF;
  --ink: #24405C;            /* body text: softer than heading navy */
  --verify: #7D6234;
  --verify-bg: #FCF8F0;
  --verify-border: #EAD9B8;
  --verify-border-strong: #E8C48A;

  /* the mist ladder: secondary text on navy grounds steps through these
     navy-tinted values, never gray and never white-at-opacity */
  --mist-bright: #DFE7EF;    /* on-dark body, footer links */
  --mist: #C9D4DE;           /* hero lede */
  --mist-soft: #B9C6D4;      /* footer and pillar body */
  --mist-muted: #9FB0C0;     /* on-dark meta, legal links */
  --mist-dim: #93A7B9;       /* quietest hero notes */
  --rail: #7E93A8;           /* scrollbar thumb */

  --highlight: #FBF7EE;      /* selected/active warm cream */
  --error: #B4472E;          /* invalid field stroke */
  --error-deep: #9A3A24;     /* error message text */

  /* warm neutral ladder. The brand accent is champagne/gold, so the
     surfaces are warmed to match it; cool grays made the gold read as
     an unrelated decoration rather than part of the palette. */
  --soft: #F7F5F1;           /* surface 2: alternating section fill */
  --soft-2: #EFEBE3;         /* surface 3: nested wells, table stripes */
  --border: #E4E0D7;         /* hairline */
  --border-strong: #D2CCBF;  /* emphasis hairline, table heads */

  --font-head: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --fs-body: 1.09rem;      /* ~17.5px */
  --fs-small: 0.94rem;
  --fs-label: 0.8rem;

  --r-ctrl: 5px;           /* buttons, fields */
  --r-card: 8px;           /* cards, panels */

  --shadow-1: 0 1px 2px rgba(2, 27, 53, 0.06);
  --shadow-2: 0 10px 28px rgba(2, 27, 53, 0.10);
  --shadow-card: 0 1px 2px rgba(2, 27, 53, 0.04), 0 12px 32px -12px rgba(2, 27, 53, 0.14);

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 44px);
  /* institutional pacing: sections breathe rather than stack */
  --section-y: clamp(72px, 8.5vw, 132px);
  --section-y-tight: clamp(48px, 5.5vw, 84px);

  --t-fast: 190ms;
  --t-med: 240ms;
  --t-slow: 560ms;
  --ease: cubic-bezier(0.33, 0.1, 0.2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--rail) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rail); border-radius: 5px; border: 2px solid var(--white); }
::-webkit-scrollbar-track { background: transparent; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
img, svg { max-width: 100%; height: auto; display: block; }
p, ul, ol { margin: 0 0 1.05em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.35em; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-deep); }
strong { font-weight: 600; color: var(--navy-deep); }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--navy-deep);
  margin: 0 0 0.55em;
  text-wrap: balance;
}
.lede, .measure, .article p { text-wrap: pretty; }
/* optical tracking: the larger the type, the tighter it is set. Uniform
   tracking across the scale is what makes display headings look loose. */
/* Leading loosens as the type shrinks. A 1.06 display leading is right at
   3.6rem and cramped at the 2.3rem mobile floor, where headings wrap to
   three lines; the tight values are therefore gated to wide viewports. */
h1 { font-size: clamp(2.3rem, 4.9vw, 3.6rem); font-weight: 700; letter-spacing: -0.026em; line-height: 1.14; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.18; }
@media (min-width: 900px) {
  h1 { line-height: 1.06; }
  h2 { line-height: 1.13; }
}
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.012em; }
h4 { font-size: 1.1rem; letter-spacing: -0.008em; }
/* Secondary text carries a measure too; it only clamps where the parent is
   wider, so tiles and other narrow slots are unaffected. Declared before
   .measure so that an element carrying both still gets the tighter 62ch --
   at equal specificity source order decides, and putting .meta last silently
   loosened every .measure.meta paragraph. */
.meta { color: var(--gray); font-size: var(--fs-small); max-width: 64ch; }
.measure { max-width: 62ch; }
.lede { font-size: clamp(1.18rem, 1.6vw, 1.32rem); line-height: 1.52; color: var(--navy); max-width: 58ch; letter-spacing: -0.004em; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
/* figures in tables, specs, and stats always align vertically */
table, .num, .mono, .stat-value { font-variant-numeric: tabular-nums; }

::selection { background: var(--champagne); color: var(--navy-deep); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible, .dark-section :focus-visible { outline-color: var(--champagne); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-deep); color: #fff; padding: 10px 18px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label);
}
.skip-link:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* one anchor offset for the whole site: clears the 74px sticky header with
   breathing room. Interior pages previously set this inline per-section at
   90px or 110px, so sibling pages scrolled to different places. */
:root { --anchor-offset: 104px; }
[id] { scroll-margin-top: var(--anchor-offset); }

/* stacked, separately-anchored blocks inside a rail-grid column. The spacing
   was inline and drifted (48px on /about, 56px on /services/*) for what is
   structurally the same pattern. */
.rail-section + .rail-section { margin-top: clamp(42px, 5vw, 58px); }

/* ---------- layout ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: var(--section-y-tight); }
.section-soft { background: var(--soft); }

/* Section transitions. Two consecutive sections on the same surface get a
   hairline so the eye reads a boundary; where the surface already changes
   (soft, dark) the fill does that job and the rule would be noise.
   Both blocks are kept at equal specificity (0,2,0) so the later one wins:
   an `* + .dark-section` shorthand would be (0,1,0) and lose silently. */
.section + .section,
.section + .section-tight,
.section-tight + .section,
.section-tight + .section-tight { border-top: 1px solid var(--border); }

.section + .section-soft,   .section-tight + .section-soft,
.section-soft + .section,   .section-soft + .section-tight,
.section + .dark-section,   .section-tight + .dark-section,
.dark-section + .section,   .dark-section + .section-tight,
.section + .quote-strip,    .section-tight + .quote-strip,
.quote-strip + .section,    .quote-strip + .section-tight { border-top-color: transparent; }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split.flip > :last-child { order: 1; }
.split-even { grid-template-columns: 1fr 1fr; }
.split-top { align-items: start; }

.rail-grid { display: grid; grid-template-columns: 190px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.rail-index { position: sticky; top: 96px; }
.rail-index .eyebrow { margin-bottom: 12px; }
.rail-index-list { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border); }
.rail-index-list a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--gray); font-size: var(--fs-small); }
.rail-index-list a:hover, .rail-index-list a.active { color: var(--navy-deep); border-left-color: var(--gold); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.split > *, .rail-grid > *, .grid-2 > *, .grid-3 > *, .dossier-row > *, .footer-top > * { min-width: 0; }

@media (max-width: 940px) {
  .split, .split-even, .rail-grid, .grid-3 { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 1; }
  .split.flip > :last-child { order: 2; }
  .rail-index { position: static; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ---------- shared devices ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 0.76rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray); margin: 0 0 20px;
}
/* a struck gold rule opens every section label: one repeated device,
   used everywhere, is what makes a system feel authored */
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--gold);
  flex: none; margin-right: 2px;
}
.eyebrow .idx { display: none; }
.on-dark .eyebrow, .dark-section .eyebrow { color: var(--champagne); }

/* standardized section header row: heading left, action or context right */
.sec-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 32px; flex-wrap: wrap; margin-bottom: 30px;
}
.sec-row h2 { margin: 0; max-width: 22ch; }
.sec-row .sec-aside { margin: 0; flex: none; max-width: 46ch; padding-bottom: 4px; }

/* twin guide rails: the brand's one custom typographic device */
.rail-heading { position: relative; padding-left: 22px; }
.rail-heading::before {
  content: ""; position: absolute; left: 0; top: 0.14em; bottom: 0.14em;
  width: 8px;
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 4px; white-space: normal; text-align: left;
  border: 1px solid var(--border); color: var(--gray); background: var(--white);
  vertical-align: middle;
}
.chip-verify { border-color: var(--verify-border); color: var(--verify); background: var(--verify-bg); }
.chip-verify::before { content: "!"; font-weight: 700; }
.chip-dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); color: var(--champagne); }

.callout {
  background: var(--soft);
  /* The gold seam is this system's documented signature device (DESIGN.md,
     Shapes), not a generic accent stripe. */
  /* impeccable-disable-next-line side-tab */
  border-left: 2px solid var(--gold);
  padding: 20px 24px; border-radius: 0 var(--r-card) var(--r-card) 0; margin: 1.4rem 0;
}
.callout p:last-child { margin-bottom: 0; }
/* callouts span the full content column, so their prose needs the same
   measure discipline as body copy (was running to ~132 chars per line) */
.callout p { max-width: 64ch; }

.figure { background: var(--soft); border: 1px solid var(--border); border-radius: var(--r-card); padding: clamp(16px, 3vw, 36px); }

/* Cards read as documents: white stock, hairline edge, and a gold rule that
   draws across the top edge on hover rather than a generic lift-and-shadow. */
.tile {
  position: relative; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 32px);
}
.tile::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--gold); border-radius: var(--r-card) var(--r-card) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.section-soft .tile { box-shadow: var(--shadow-1); }
.tile-icon { width: 34px; height: 34px; color: var(--navy); margin-bottom: 16px; }

/* ---------- service ledger (homepage) ----------
   The three service lines as ledger rows in the SVC-index language the
   services hub established: mono index, equipment diagram, name, one line,
   and a go-link, separated by hairlines instead of boxed into equal cards. */
.svc-ledger { border-top: 1px solid var(--border-strong); margin-top: 34px; }
.svc-row {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: clamp(16px, 2.4vw, 34px); align-items: center;
  padding: clamp(24px, 2.8vw, 34px) 6px;
  border-bottom: 1px solid var(--border); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.svc-row:hover, .svc-row:focus-visible { background: var(--highlight); }
.svc-icon { width: 46px; height: 46px; color: var(--navy); flex: none; transition: transform var(--t-fast) var(--ease); }
.svc-row:hover .svc-icon { transform: translateY(-2px); }
.svc-body h3 { margin: 0 0 5px; font-size: clamp(1.2rem, 1.8vw, 1.42rem); }
.svc-body .meta { margin: 0; max-width: 52ch; }
.svc-row .t-go { white-space: nowrap; }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; row-gap: 8px; align-items: start; }
  .svc-icon { width: 32px; height: 32px; }
  .svc-body { grid-column: 2; }
  .svc-row .t-go { grid-column: 2; }
}
.also-links { display: flex; flex-wrap: wrap; gap: 10px; }
.also-links a {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--border);
  border-radius: var(--r-ctrl); text-decoration: none; color: var(--ink);
  font-size: 0.94rem; font-weight: 500;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.also-links a:hover { border-color: var(--navy); color: var(--navy-deep); }
.svc-nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 20px; font-family: var(--font-body); font-weight: 600; font-size: 0.87rem; }
.svc-nav a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: none; color: var(--navy); }
.svc-nav a:hover { color: var(--navy-deep); text-decoration: underline; text-underline-offset: 4px; }
.tile h3 { font-size: 1.06rem; margin-bottom: 8px; }
.tile p { margin: 0; }
a.tile {
  display: block; text-decoration: none; color: inherit;
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
a.tile:hover, a.tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--border-strong); }
a.tile:hover::before, a.tile:focus-visible::before { transform: scaleX(1); }
/* directional affordance: the card states where it goes */
a.tile .t-go, .svc-row .t-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-deep);
}
a.tile .t-go::after, .svc-row .t-go::after {
  content: "\2192"; font-family: var(--font-mono);
  transition: transform var(--t-med) var(--ease);
}
a.tile:hover .t-go::after, a.tile:focus-visible .t-go::after,
.svc-row:hover .t-go::after, .svc-row:focus-visible .t-go::after { transform: translateX(4px); }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.figure-plain { background: none; border: 0; padding: 0; }
.figure-caption { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin-top: 12px; }

.scroll-x { overflow-x: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 12px 22px; border-radius: var(--r-ctrl);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn { white-space: nowrap; }
.btn-primary { background: var(--gold); color: var(--navy-deep); }
.btn-primary:hover { background: var(--gold-hover); color: var(--navy-deep); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-ondark { border-color: rgba(255,255,255,0.5); color: #fff; background: transparent; }
.btn-ondark:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
.btn-lg { padding: 15px 28px; font-size: 1.06rem; }
.btn-sm { padding: 8px 14px; font-size: 0.94rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.text-link {
  display: inline-block; min-height: 24px; padding-bottom: 3px;
  font-weight: 600; color: var(--navy); text-decoration: none;
  border-bottom: 2px solid var(--champagne);
  transition: border-color var(--t-fast) var(--ease);
}
.text-link:hover { border-bottom-color: var(--gold-deep); }

/* A control that performs an action rather than navigating. Screen readers
   announce an <a> as a link and imply navigation, and href="#" does nothing
   at all when scripting fails. */
button.linkish {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--navy); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--champagne); text-decoration-thickness: 2px;
}
button.linkish:hover { text-decoration-color: var(--gold-deep); }

/* ---------- utility bar + header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--white); } }
.site-header.scrolled { box-shadow: var(--shadow-1); border-bottom-color: var(--border-strong); }
/* Measured before "fixing": a full-document reflow on this 455-node page
   costs 0.07ms warm / 2.2ms cold, so the 240ms compression is ~14 reflows
   totaling under a frame. A transform-based header restructure would buy
   nothing perceivable and risk sticky/anchor/dropdown regressions. */
/* impeccable-disable-next-line layout-transition */
.header-inner { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); min-height: 74px; transition: min-height var(--t-med) var(--ease); }
.site-header.scrolled .header-inner { min-height: 60px; }

/* One lockup image, not a mark plus HTML text: the wordmark's internal
   spacing (ELEVATOR centred and letterspaced under THUNDERBIRD) is part of
   the logo artwork and cannot be reproduced reliably in CSS. */
.brand { display: flex; flex: none; align-items: center; text-decoration: none; margin-right: auto; padding-right: 10px; }
.brand img { height: 46px; width: auto; flex: none; }

.nav { display: flex; align-items: center; gap: 0; }
.nav-link {
  position: relative; display: inline-block; padding: 10px 8px;
  font-size: 0.94rem; font-weight: 500; color: var(--navy-deep);
  text-decoration: none; white-space: nowrap; border-radius: 4px;
}
button.nav-link {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; line-height: inherit;
}
.nav-link::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px;
  height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px;
  background: #fff; border: 1px solid var(--border); border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: var(--shadow-2); padding: 10px; display: none; z-index: 60;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none; color: var(--navy-deep); font-size: 0.94rem; }
.dropdown-menu a:hover { background: var(--soft); }
.dropdown-menu .dd-desc { display: block; color: var(--gray); font-size: 0.8rem; margin-top: 2px; }
.dd-caret { display: inline-block; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 7px; }

.header-phone { display: inline-flex; align-items: center; min-height: 24px; padding-block: 3px; font-family: var(--font-mono); font-size: 0.94rem; font-weight: 500; color: var(--navy-deep); text-decoration: none; white-space: nowrap; }
/* Visible by default. Below 760px the sticky call bar takes over, so the
   number is reachable at every width without scrolling. */
.header-inner > .header-phone, .header-inner > .chip-verify { display: inline-flex; }
.header-inner > .chip-verify { white-space: nowrap; }

.menu-toggle {
  display: none; background: none; border: 1.5px solid var(--border); border-radius: var(--r-ctrl);
  padding: 9px 12px; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--navy-deep);
}

.mobile-menu { display: none; background: #fff; border-bottom: 1px solid var(--border); }
.mobile-menu.open { display: block; max-height: calc(100vh - 118px); overflow-y: auto; }
.mobile-menu nav { display: grid; gap: 2px; padding: 14px 0 20px; }
.mobile-menu a { padding: 13px 4px; text-decoration: none; color: var(--navy-deep); font-weight: 500; border-bottom: 1px solid var(--soft); }
.mobile-menu .mm-group { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); padding: 16px 4px 6px; }

@media (max-width: 1260px) {
  .nav { display: none; }
  .menu-toggle { display: inline-block; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(64px, 8.5vw, 124px); padding-bottom: clamp(56px, 6.5vw, 92px); }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
.hero .lede { margin-top: 4px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 16px; }
/* the lede above it wraps at 58ch, so letting this run the full container
   width (~160 characters) broke the hero's left edge rhythm */
.urgent-line { font-size: var(--fs-small); color: var(--gray); max-width: 64ch; }

/* navy hero: the interior the intro doors open onto.
   Layered rather than flat -- a raised corner light and a floor shadow give
   the panel depth, and a gold hairline seats it against the page. */
.hero-navy {
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(70, 106, 143, 0.30) 0%, rgba(70, 106, 143, 0) 58%),
    linear-gradient(178deg, var(--navy-deep) 0%, var(--navy-floor) 100%);
  position: relative; overflow: hidden;
}
.hero-navy::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(193, 168, 112, 0.22) 46%, rgba(193, 168, 112, 0) 78%);
  z-index: 3;
}
.hero-navy .container { position: relative; z-index: 2; }
.hero-navy h1 { color: #fff; font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.12; }
@media (min-width: 900px) { .hero-navy h1 { line-height: 1.02; } }
.hero-navy .lede { color: var(--mist); }
.hero-navy .eyebrow { color: var(--champagne); }
.hero-navy .urgent-line { color: var(--mist-dim); }
.hero-navy .text-link { color: var(--champagne); border-bottom-color: rgba(193, 168, 112, 0.5); }
.hero-navy .text-link:hover { color: #fff; }
.hero-draw {
  /* The shaft bleeds off the canvas: the building keeps going past the
     page edge instead of floating politely inside it. */
  position: absolute; right: -48px; top: 50%; transform: translateY(-50%);
  width: min(42vw, 560px); height: auto; z-index: 1; pointer-events: none;
}
@media (max-width: 1100px) { .hero-draw { display: none; } }

/* ---------- arrival intro: elevator descends, doors open onto the page ---------- */
.intro { position: fixed; inset: 0; z-index: 200; animation: introHide 10ms 2.5s forwards; }
.intro-door {
  position: absolute; top: 0; bottom: 0; width: 50.1%;
  background: var(--brand-navy);
}
.intro-door::after {
  content: ""; position: absolute; inset: 7% 14%;
  border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 2px;
}
/* Elevator doors: the meeting edges carry the gold seam by design. */
/* impeccable-disable-next-line side-tab */
.intro-door.left { left: 0; border-right: 2px solid var(--gold); animation: introDoorL 0.72s 1.7s var(--ease) forwards; }
/* impeccable-disable-next-line side-tab */
.intro-door.right { right: 0; border-left: 2px solid var(--gold); animation: introDoorR 0.72s 1.7s var(--ease) forwards; }
.intro-lantern {
  position: absolute; top: clamp(20px, 7vh, 56px); left: 50%; transform: translateX(-50%);
  z-index: 3; background: var(--brand-navy);
  border: 1px solid rgba(210, 191, 150, 0.55); border-radius: 6px;
  padding: 9px 20px;
  animation: introFlash 0.22s 1.4s, introFade 0.28s 1.52s forwards;
}
.intro-window {
  display: block; height: 1.3em; overflow: hidden; width: 2.4em;
  font-family: var(--font-mono); font-size: 1.06rem; font-weight: 500;
  color: var(--champagne); letter-spacing: 0.1em; text-align: center;
}
.intro-strip { display: block; animation: introDescend 1.35s steps(6, end) forwards; }
.intro-strip span { display: block; height: 1.3em; line-height: 1.3; }
.intro-brand {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  animation: introFade 0.3s 1.5s forwards;
}
.intro-brand img { width: min(264px, 48vw); height: auto; }
.intro-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--font-body); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.18em;
  color: var(--rail); animation: introFade 0.3s 1.5s forwards;
}
.intro.done { display: none; }
@keyframes introDescend { to { transform: translateY(-7.8em); } }
@keyframes introDoorL { to { transform: translateX(-102%); } }
@keyframes introDoorR { to { transform: translateX(102%); } }
@keyframes introFade { to { opacity: 0; } }
@keyframes introFlash { 50% { border-color: var(--gold); box-shadow: 0 0 18px rgba(193, 168, 112, 0.45); } }
@keyframes introHide { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- triage console ---------- */
.triage { background: var(--soft); border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 48px); }
.triage h2 { margin-bottom: 6px; }
.triage-hint { color: var(--ink); font-size: 1.06rem; margin: 0; }
.triage-hint .th-urgent { color: var(--gray); font-size: 0.94rem; }
/* One machined console strip, not four dealt cards: a single bordered
   housing with internal dividers, the pressed segment lit from its seam. */
.triage-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 22px;
  border: 1px solid var(--border-strong); border-radius: var(--r-ctrl);
  overflow: hidden; background: var(--white);
}
.triage-btn {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  text-align: left; background: var(--white); color: var(--navy-deep);
  border: 0; border-left: 1px solid var(--border); border-radius: 0;
  padding: 17px 16px; cursor: pointer; font: inherit;
  transition: background-color var(--t-fast) var(--ease);
}
.triage-btn:first-child { border-left: 0; }
.triage-btn::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-fast) var(--ease);
}
.triage-btn[aria-pressed="true"]::after { transform: scaleX(1); }
/* Console buttons, not survey rows: the radio circle read as a form, so the
   need is named by its equipment icon instead. */
.triage-btn .t-icon {
  width: 26px; height: 26px; flex: none; color: var(--navy);
  transition: color var(--t-fast) var(--ease);
}
.triage-btn:hover .t-icon, .triage-btn[aria-pressed="true"] .t-icon { color: var(--gold-deep); }
.triage-btn:hover { background: var(--soft); }
.triage-btn[aria-pressed="true"] { background: var(--highlight); }
.triage-btn .t-label { display: block; font-weight: 600; }
.triage-btn .t-desc { display: block; font-size: 0.87rem; color: var(--gray); line-height: 1.45; }
.triage-panel { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 20px; display: none; }
.triage-panel.open { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.triage-panel p { margin: 0; flex: 1 1 320px; color: var(--ink); font-size: 0.94rem; }
@media (max-width: 940px) {
  .triage-grid { grid-template-columns: 1fr 1fr; }
  .triage-btn:nth-child(3) { border-left: 0; }
  .triage-btn:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .triage-grid { grid-template-columns: 1fr; }
  .triage-btn { border-left: 0 !important; }
  .triage-btn + .triage-btn { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) { .triage-grid { grid-template-columns: 1fr; } }


/* ---------- sample service document card ---------- */
.chapter-doc {
  background: #fff; border-radius: var(--r-card);
  box-shadow: var(--shadow-2); overflow: hidden; font-size: 0.94rem;
}
.chapter-doc .cd-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; color: var(--navy-deep); padding: 12px 16px; border-bottom: 2px solid var(--navy-deep); font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; }
.chapter-doc .cd-head .cd-tag { color: var(--gold-deep); }
.chapter-doc table { width: 100%; border-collapse: collapse; }
.chapter-doc td { padding: 11px 16px; border-top: 1px solid var(--border); vertical-align: top; }
.chapter-doc tr:first-child td { border-top: 0; }
.chapter-doc td:first-child { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); width: 34%; padding-top: 13px; }

/* ---------- process (vertical service rail) ---------- */
.process-list { list-style: none; margin: 0; padding: 0; position: relative; }
.process-list::before { content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.process-step { position: relative; padding: 0 0 14px 76px; }
.process-step .ps-num {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px;
  display: grid; place-items: center; background: var(--soft); border-radius: var(--r-card);
  font-family: var(--font-mono); font-weight: 500; color: var(--gray);
  transition: border-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
  z-index: 2;
}
.process-step.active .ps-num { background: var(--highlight); color: var(--navy-deep); }
.process-step h3 { margin-bottom: 2px; }
.process-step > p { color: var(--gray); max-width: 56ch; }
.process-step details { margin: 4px 0 10px; }
.process-step summary {
  cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
  list-style: none; display: inline-flex; align-items: center; gap: 8px;
}
.process-step summary::-webkit-details-marker { display: none; }
.process-step summary::after { content: "+"; font-size: 1rem; color: var(--gold-deep); }
.process-step details[open] summary::after { content: "\2212"; }
.step-details { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--border); }
.step-details > div { background: var(--soft); padding: 14px 16px; font-size: 0.94rem; }
.step-details .sd-label { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 5px; }
@media (max-width: 640px) {
  .process-step { padding-left: 0; padding-top: 6px; }
  .process-step .ps-num { position: static; width: 44px; height: 44px; margin-bottom: 10px; }
  .process-list::before { display: none; }
  .step-details { grid-template-columns: 1fr; }
}

/* ---------- dark editorial section ---------- */
.dark-section {
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(70, 106, 143, 0.24) 0%, rgba(70, 106, 143, 0) 62%),
    linear-gradient(178deg, var(--navy-deep) 0%, var(--navy-floor) 100%);
  color: var(--mist-bright); position: relative;
}
/* the closers hold one heading and a button row; full section padding
   reads as an empty band */
.section.dark-section { padding-block: var(--section-y-tight); }
.dark-section .container::before { content: ""; display: block; width: 36px; height: 3px; background: var(--gold); margin: 0 auto 22px; }
/* where the section already carries an eyebrow, its gold rule is the device;
   a second one above it would double the mark */
.dark-section .container:has(.eyebrow)::before { display: none; }
.dark-section h2, .dark-section h3 { color: #fff; }
.dark-section .meta { color: var(--mist-muted); }
.dark-section a { color: var(--champagne); }
.dark-section .btn-primary { color: var(--navy-deep); }
.dark-section .btn-primary:hover { color: var(--navy-deep); }
.dark-section .btn-ondark { color: #fff; }
.dark-section .btn-ondark:hover { color: #fff; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 3vw, 40px); margin-top: 40px; }
.pillar { border-top: 2px solid rgba(210,191,150,0.4); padding-top: 18px; }
.pillar h3 { font-size: 1.06rem; margin-bottom: 8px; }
.pillar p { font-size: 0.94rem; color: var(--mist-soft); margin: 0; }
@media (max-width: 940px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pillar-grid { grid-template-columns: 1fr; } }

/* ---------- readiness quiz ---------- */
.quiz { background: var(--soft); border-radius: var(--r-card); overflow: hidden; }
.quiz-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.quiz-head .mono { font-size: 0.78rem; color: var(--gray); }
.quiz-list { list-style: none; margin: 0; padding: 0; }
.quiz-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 22px; border-top: 1px solid var(--border); }
.quiz-item:first-child { border-top: 0; }
.quiz-item p { margin: 0; font-size: 0.94rem; }
.quiz-toggle { display: flex; gap: 6px; flex: none; }
.quiz-toggle button {
  font: inherit; font-size: 0.87rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border); background: #fff; color: var(--gray);
  border-radius: var(--r-ctrl); padding: 6px 14px;
  transition: all var(--t-fast) var(--ease);
}
.quiz-toggle button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.quiz-result { padding: 20px 22px; border-top: 2px solid var(--gold); background: var(--soft); display: none; }
.quiz-result.show { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.quiz-result p { margin: 0; max-width: 56ch; }

/* ---------- dossier / capabilities ---------- */
.dossier { background: transparent; }
.dossier + .dossier { margin-top: 48px; }
.dossier-head { display: flex; align-items: baseline; gap: 12px; padding: 0 0 8px; margin-bottom: 4px; }
.dossier-head .d-num { font-family: var(--font-mono); color: var(--gray); font-size: 0.8rem; }
.dossier-head h2, .dossier-head h3 { color: var(--navy-deep); margin: 0; font-size: 1.3rem; }
.dossier-row { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 11px 0; }
.dossier-row .d-label { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); padding-top: 3px; }
/* Hold the reading measure. The content column is a 1fr track, so in a
   1280px container these definitions ran to ~125 characters per line --
   well past the 45-75 that stays comfortable to read. Note 1ch is the width
   of "0", which is wider than the average lowercase glyph here: 64ch lands
   at roughly 76 actual characters. */
.dossier-row p, .dossier-row li { max-width: 64ch; }
.dossier-row p { margin: 0; font-size: 0.94rem; }
@media (max-width: 640px) { .dossier-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- industries ---------- */
.industry-list { list-style: none; margin: 0; padding: 0; }
.industry-item { border-top: 1px solid var(--border); }
.industry-item:last-child { border-bottom: 1px solid var(--border); }
.industry-item a {
  display: grid; grid-template-columns: 44px 240px 1fr auto; gap: 20px; align-items: center;
  padding: 18px 6px; text-decoration: none; color: var(--navy-deep);
  transition: background var(--t-fast) var(--ease);
}
.industry-item a:hover { background: var(--soft); }
.industry-item .i-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gray); }
.industry-item .i-name { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.industry-item .i-short { color: var(--gray); font-size: 0.94rem; }
.industry-item .i-arrow { color: var(--gold-deep); font-family: var(--font-mono); }
@media (max-width: 940px) {
  .industry-item a { grid-template-columns: 36px 1fr auto; }
  .industry-item .i-short { display: none; }
}

/* ---------- industry accordion ----------
   Collapsed by default: the summary carries the name and the one-line stakes,
   so eight building types scan in a screen instead of five. */
.industry-panels { border-top: 1px solid var(--border); }
.industry-panel { border-bottom: 1px solid var(--border); }
.industry-panel > summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 42px 1fr 24px; align-items: baseline; gap: 4px;
  padding: 18px 4px;
}
.industry-panel > summary::-webkit-details-marker { display: none; }
.industry-panel > summary::after {
  content: "+"; grid-column: 3; justify-self: end; align-self: center;
  color: var(--gold-deep); font-size: 1.3rem; line-height: 1;
  transition: transform var(--t-med) var(--ease);
}
.industry-panel[open] > summary::after { transform: rotate(45deg); }
.industry-panel > summary:hover .ip-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--champagne); }
.industry-panel .ip-num { font-size: 0.78rem; color: var(--gold-deep); }
.industry-panel .ip-head { display: block; }
.industry-panel .ip-name { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.14rem; color: var(--navy-deep); letter-spacing: -0.01em; }
.industry-panel .ip-short { display: block; color: var(--gray); font-size: var(--fs-small); margin-top: 3px; max-width: 64ch; }
.industry-panel .ip-body { padding: 4px 4px 22px 46px; }
.industry-panel .ip-body .dossier-row { grid-template-columns: 150px 1fr; padding: 9px 0; }
@media (max-width: 640px) {
  .industry-panel > summary { grid-template-columns: 34px 1fr 20px; }
  .industry-panel .ip-body { padding-left: 0; }
}

/* ---------- compact industry links (homepage) ---------- */
.industry-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--border);
}
.industry-links a {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 6px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--navy-deep); font-weight: 500;
  transition: background var(--t-fast) var(--ease);
}
.industry-links a:hover { background: var(--soft); }
.industry-links .i-num { color: var(--gray); font-family: var(--font-mono); font-size: 0.8rem; }
.industry-links .i-arrow { margin-left: auto; color: var(--gold-deep); font-family: var(--font-mono); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.industry-links a:hover .i-arrow, .industry-links a:focus-visible .i-arrow { opacity: 1; }
@media (max-width: 640px) { .industry-links { grid-template-columns: 1fr; } }

/* ---------- notes / articles ---------- */
.note-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.note-item { border-top: 1px solid var(--border); }
.note-item:last-child { border-bottom: 1px solid var(--border); }
.note-item a { display: block; padding: 22px 6px; text-decoration: none; color: inherit; transition: background var(--t-fast); }
.note-item a:hover { background: var(--soft); }
.note-item h2, .note-item h3 { margin-bottom: 6px; font-size: 1.22rem; }
.note-item p { margin: 0; color: var(--gray); font-size: 0.94rem; max-width: 64ch; }
.note-item .n-idx { font-family: var(--font-mono); font-size: 0.76rem; color: var(--gold-deep); display: block; margin-bottom: 8px; }

/* ---------- merged guide + worksheet library ----------
   One row per topic, replacing two parallel index pages that listed the same
   six subjects in two formats. The row is not itself a link, because each
   topic offers two destinations. */
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic { display: grid; grid-template-columns: 46px 1fr; gap: 4px 8px; padding: 24px 0; border-top: 1px solid var(--border); }
.topic:last-child { border-bottom: 1px solid var(--border); }
.topic .t-idx { font-size: 0.78rem; color: var(--gold-deep); padding-top: 6px; }
.topic h2 { font-size: 1.22rem; margin: 0 0 6px; }
.topic h2 a { color: var(--navy-deep); text-decoration: none; }
.topic h2 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--champagne); }
.topic .meta { margin: 0 0 12px; }
.topic .t-actions { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; font-size: 0.94rem; }
@media (max-width: 640px) { .topic { grid-template-columns: 1fr; } .topic .t-idx { padding-top: 0; } }

.article { max-width: 720px; }
.article h2 { font-size: 1.5rem; margin-top: 2.2em; }
.article h3 { font-size: 1.15rem; margin-top: 1.8em; }
.article ul, .article ol { margin-bottom: 1.2em; }
.article .callout { margin: 1.8rem 0; }

/* ---------- forms ---------- */
.form-shell { border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.form-progress { display: flex; background: var(--soft); border-bottom: 1px solid var(--border); }
.form-progress li {
  flex: 1; list-style: none; margin: 0; padding: 13px 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray); border-left: 1px solid var(--border); position: relative;
}
.form-progress li:first-child { border-left: 0; }
.form-progress li[aria-current="step"] { color: var(--navy-deep); font-weight: 500; background: #fff; }
.form-progress li[aria-current="step"]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold); }
.form-progress { margin: 0; padding: 0; }

/* Phone: only the active step is labelled. These overrides must live after
   the base rules above -- a media query adds no specificity, so an earlier
   block at equal specificity would lose on source order. */
@media (max-width: 640px) {
  .form-progress .fp-label { display: none; }
  .form-progress li[aria-current="step"] .fp-label { display: inline; }
  /* Equal thirds forced the whole strip to the height of the wrapped active
     label, leaving the other two steps as a lone digit in 65px of dead
     space. Numbered steps size to content; the active step takes the rest. */
  .form-progress li { flex: none; padding: 11px 14px; display: flex; align-items: center; }
  .form-progress li[aria-current="step"] { flex: 1; }
}

.form-step { padding: clamp(20px, 3.5vw, 36px); display: none; }
.form-step.active { display: block; }
.form-nav { display: flex; justify-content: space-between; gap: 12px; padding: 18px clamp(20px, 3.5vw, 36px); border-top: 1px solid var(--border); background: var(--soft); }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 0.94rem; margin-bottom: 6px; }
.field .hint { font-size: 0.87rem; color: var(--gray); margin: -2px 0 7px; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"],
.field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--navy-deep);
  padding: 11px 13px; border: 1.5px solid var(--border); border-radius: var(--r-ctrl);
  background: #fff; transition: border-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); }
.field-error { display: none; color: var(--error-deep); font-size: 0.87rem; margin-top: 5px; }
.field.invalid .field-error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-grid label {
  display: block; border: 1.5px solid var(--border); border-radius: var(--r-ctrl);
  padding: 13px 15px; cursor: pointer; font-weight: 500; font-size: 0.94rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.choice-grid label:has(input:checked) { border-color: var(--navy); background: var(--soft); }
.choice-grid input { margin-right: 9px; accent-color: var(--navy); }
@media (max-width: 560px) { .choice-grid { grid-template-columns: 1fr; } }

.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; }
.check-row input { margin-top: 4px; accent-color: var(--navy); width: 17px; height: 17px; flex: none; }

.urgent-panel {
  border: 1.5px solid var(--gold); background: var(--verify-bg);
  border-radius: var(--r-card); padding: 18px 20px; margin: 16px 0; display: none;
}
.urgent-panel.show { display: block; }
.urgent-panel p { margin: 0 0 10px; font-size: 0.94rem; }
.urgent-panel p:last-child { margin: 0; }

.confirm-panel { padding: clamp(28px, 5vw, 52px); text-align: left; display: none; }
.confirm-panel.show { display: block; }
.confirm-ref { font-family: var(--font-mono); font-size: 1.35rem; color: var(--navy-deep); background: var(--soft); border: 1px solid var(--border); border-radius: var(--r-ctrl); display: inline-block; padding: 8px 16px; margin: 10px 0 18px; }

/* ---------- faq ---------- */
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px;
  padding: 19px 4px; font-family: var(--font-head); font-weight: 600; font-size: 1.06rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--gold-deep); font-size: 1.3rem; line-height: 1; flex: none; transition: transform var(--t-med) var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-body { padding: 0 4px 20px; max-width: 64ch; color: var(--navy); }

/* ---------- footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--brand-navy) 0%, var(--navy-floor) 100%);
  color: var(--mist-soft); margin-top: 0;
  border-top: 2px solid var(--gold);
}
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); padding-block: clamp(52px, 6.5vw, 84px); }
.footer-brand img { width: 174px; margin-bottom: 16px; }
.footer-brand p { font-size: 0.94rem; max-width: 34ch; }
.footer-col .footer-h { color: #fff; font-size: 0.8rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
/* WCAG 2.2 target size (2.5.8): every link clears 24px in both axes.
   Height comes from link padding rather than list margin so the hit area
   and the visible row are the same rectangle. */
.footer-col li { margin-bottom: 2px; font-size: 0.94rem; }
.footer-col a { display: inline-block; min-height: 24px; padding-block: 3px; color: var(--mist-bright); text-decoration: none; }
.footer-col a:hover { color: var(--champagne); }
.legal-row { border-top: 1px solid rgba(255,255,255,0.14); padding-block: 16px; display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: center; font-size: 0.8rem; }
.legal-row a { display: inline-block; min-height: 24px; padding-block: 4px; color: var(--mist-muted); text-decoration: none; }
.legal-row a:hover { color: #fff; }
.legal-row .spacer { flex: 1; }
@media (max-width: 940px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- sticky mobile actions ---------- */
.mobile-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-actions a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 10px; font-weight: 600; font-size: 0.94rem; text-decoration: none;
}
.mobile-actions .ma-call { background: #fff; color: var(--navy-deep); }
.mobile-actions .ma-schedule { background: var(--gold); color: var(--navy-deep); }
@media (max-width: 760px) {
  .mobile-actions { display: grid; }
  .header-inner > .header-phone, .header-inner > .chip-verify { display: none; }
  body { padding-bottom: 64px; }
}
@media (max-width: 640px) {
  .header-inner > .btn-primary { display: none; }
  /* the full lockup is 5.8:1, so trim it on narrow screens to leave room
     for the menu button */
  .brand img { height: 38px; }
}

/* ---------- page masthead (interior pages) ----------
   Interior pages get the same establishing treatment the homepage hero has,
   in a lighter key: a warm band that resolves to white, a hairline, and the
   gold seam. Without it every interior page opened on bare white and read
   as unanchored next to the navy homepage. */
.page-head {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--soft) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(48px, 6vw, 84px) clamp(28px, 3.4vw, 46px);
}
.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(193, 168, 112, 0.20) 42%, rgba(193, 168, 112, 0) 72%);
}
.page-head > .container { position: relative; z-index: 2; }
.page-head h1 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); }
.ph-spot {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  width: min(230px, 19vw); height: min(230px, 19vw);
  color: var(--navy); opacity: 0.10; pointer-events: none; z-index: 1;
}
@media (max-width: 940px) { .ph-spot { display: none; } }
.page-head .lede { margin-top: 6px; }
.page-head + .section { padding-top: clamp(24px, 3vw, 40px); }
.page-head + .section-tight { padding-top: clamp(28px, 4vw, 44px); }
.breadcrumb { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--gray); margin-bottom: 20px; }
/* standalone navigation, so the 24px target minimum applies (WCAG 2.2 2.5.8);
   the inline-in-prose exception does not cover breadcrumbs */
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; color: var(--gray); text-decoration: none; }
.breadcrumb a:hover { color: var(--navy-deep); }
.breadcrumb .sep { margin-inline: 8px; color: var(--border-strong); }

/* ---------- timeline (modernization) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl; }
.timeline li { position: relative; padding: 0 0 22px 58px; counter-increment: tl; max-width: calc(64ch + 58px); }
.timeline li::before {
  content: counter(tl, decimal-leading-zero); position: absolute; left: 0; top: -2px;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--gold-deep);
  width: 38px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
}
.timeline li::after { content: ""; position: absolute; left: 19px; top: 32px; bottom: -2px; width: 1.5px; background: var(--border); }
.timeline li:last-child::after { display: none; }
.timeline .tl-name { font-weight: 600; font-family: var(--font-head); font-size: 1.06rem; display: block; margin-bottom: 2px; }
.timeline p { margin: 0; color: var(--gray); font-size: 0.94rem; max-width: 60ch; }

/* ---------- opt-in figure ----------
   For supporting visuals that are worth having but should not cost every
   reader a screen and a half on the way past. */
.reveal-figure { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--soft); }
.reveal-figure > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  gap: 12px; flex-wrap: wrap; padding: 16px 20px; min-height: 24px;
}
.reveal-figure > summary::-webkit-details-marker { display: none; }
.reveal-figure .rf-label {
  font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
}
.reveal-figure .rf-label::before {
  content: "+"; display: inline-block; margin-right: 6px;
  color: var(--gold-deep); transition: transform var(--t-med) var(--ease);
}
.reveal-figure[open] .rf-label::before { transform: rotate(45deg); }
.reveal-figure .rf-hint { font-size: var(--fs-small); }
.reveal-figure[open] > summary { border-bottom: 1px solid var(--border); }
.reveal-figure .rf-body { padding: clamp(16px, 2.5vw, 28px); background: var(--white); border-radius: 0 0 var(--r-card) var(--r-card); }

/* ---------- service-area map ---------- */
.figure-map { text-align: center; }
.svc-map-img { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; border-radius: var(--r-card); }

/* ---------- annotated diagram ---------- */
.anatomy-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.anatomy-legend { list-style: none; margin: 0; padding: 0; }
.anatomy-legend li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 0.94rem; }
.anatomy-legend li:first-child { border-top: 0; }
.anatomy-legend .al-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gold-deep); padding-top: 2px; }
.anatomy-legend .al-name { font-weight: 600; display: block; }
.anatomy-legend .al-desc { color: var(--gray); font-size: 0.87rem; }
@media (max-width: 940px) { .anatomy-wrap { grid-template-columns: 1fr; } }

/* ---------- footer verify chips: honest but quiet on navy ---------- */
.site-footer .chip-verify {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(210, 191, 150, 0.35);
  color: var(--champagne);
}

/* ---------- draft tag ---------- */
.draft-tag {
  position: fixed; left: 14px; bottom: 14px; z-index: 95;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.1em;
  background: var(--white); color: var(--gray); border: 1px solid var(--border);
  border-radius: 4px; padding: 5px 10px; box-shadow: var(--shadow-1); opacity: 0.95;
}
.draft-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
@media (max-width: 760px) { .draft-tag { bottom: 72px; } }

/* ---------- internal pages ---------- */
.internal-banner { background: var(--verify-bg); border-bottom: 1px solid var(--verify-border-strong); color: var(--verify); font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-align: center; padding: 8px 16px; }
.claims-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.claims-table th { text-align: left; font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); padding: 10px 12px; border-bottom: 2px solid var(--navy-deep); }
.claims-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { width: 130px; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; font-size: 0.78rem; }
.swatch .sw-color { height: 64px; }
.swatch .sw-meta { padding: 8px 10px; font-family: var(--font-mono); }
.dir-card { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; margin-bottom: 40px; }
.dir-card .dir-head { padding: 16px 22px; background: var(--soft); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dir-card .dir-body { padding: 22px; }
.type-specimen { border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px; }

/* ---------- print ---------- */
.print-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.worksheet { border: 1px solid var(--border); border-radius: var(--r-card); }
.worksheet-section { padding: 18px 22px; border-top: 1px solid var(--border); }
.worksheet-section:first-child { border-top: 0; }
.worksheet-section h2 { font-size: 1rem; margin-bottom: 12px; }
.sitemap-grid h2 { font-size: 1.12rem; margin-top: 1.4em; }
.sitemap-grid > div > h2:first-child { margin-top: 0; }
/* a sitemap is entirely navigation, so every link owes the full 24px target
   (WCAG 2.2 2.5.8); none of them qualify for the inline-in-prose exception */
.sitemap-grid ul { list-style: none; padding: 0; margin: 0 0 0.4em; }
.sitemap-grid li { margin-bottom: 0; }
.sitemap-grid li a { display: inline-flex; align-items: center; min-height: 26px; }
.ws-line { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; font-size: 0.94rem; }
.ws-line .ws-label { flex: none; color: var(--navy-deep); font-weight: 500; }
.ws-line .ws-fill { flex: 1; border-bottom: 1px solid var(--gray); min-height: 1.2em; }
.ws-check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 0.94rem; }
.ws-check::before { content: ""; width: 15px; height: 15px; border: 1.5px solid var(--gray); border-radius: 3px; flex: none; margin-top: 4px; }

@media print {
  .utility-bar, .site-header, .site-footer, .mobile-actions, .draft-tag,
  .print-bar .btn, .breadcrumb, .internal-banner { display: none !important; }
  body { padding-bottom: 0; font-size: 11pt; color: #000; }
  .page-head { padding: 0 0 12pt; border-bottom: 2px solid #000; background: none; }
  /* decorative gold seams and accent rules: ink on paper, not brand colour */
  .page-head::after, .hero-navy::after, .eyebrow::before, .tile::before { display: none !important; }
  .callout { border-left: 1pt solid #999; }
  .worksheet, .ws-line .ws-fill, .worksheet-section { border-color: #999; }
  a { color: #000; text-decoration: none; }
  .section, .section-tight { padding-block: 14pt; }
  .glossary-filter, .glossary-group .callout { display: none !important; }
  .dossier { border: 0; }
  .dossier-head { background: none; padding: 10pt 0 4pt; border-bottom: 2px solid #000; }
  .dossier-head h2, .dossier-head h3 { color: #000; }
  .dossier-head .d-num { color: #000; }
  .dossier-row { padding: 6pt 0; break-inside: avoid; }
  .dossier-row .d-label { color: #000; }

  /* Pagination. These worksheets exist to be printed and written on, so a
     section must not split across a page break and a heading must not print
     at the foot of a page with its fields overleaf. Three of the six had a
     section heading landing inside the last 90px of a page. */
  .worksheet-section, .ws-line, .ws-check, .timeline li,
  .anatomy-legend li, .faq-list details { break-inside: avoid; }
  h1, h2, h3, h4, .tl-name, .worksheet-section h2 { break-after: avoid; }
  .worksheet { break-inside: auto; }
  p, li { orphans: 2; widows: 2; }
}

/* ---------- touch ---------- */
@media (pointer: coarse) {
  .nav-link, .dropdown-menu a, .footer-col a { padding-top: 12px; padding-bottom: 12px; }
  /* 44px floor on every button for coarse pointers. Only .btn-sm (~37px) and
     the quiz toggle (~39px) sit under it, but the floor covers future
     variants too. The one that made this matter: the call button on
     /emergency, tapped mid-incident on a phone. Density is kept for mice,
     where the small sizes are fine. */
  .btn, .quiz-toggle button, .triage-btn { min-height: 44px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; transition-delay: 0ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .doorseam::before, .doorseam::after { display: none; }
}

@media (forced-colors: active) {
  .btn, .triage-btn, .chip-verify, .draft-tag, .tile, .dossier, .callout { border: 1px solid CanvasText; }
  .intro, .ph-spot, .hero-draw { display: none; }
  .dropdown-menu { border: 1px solid CanvasText; }
}


/* ---------- founder pull quote ---------- */
.pull-quote { max-width: 800px; margin: 0; position: relative; }
.pull-quote::before {
  content: ""; display: block; width: 36px; height: 3px;
  background: var(--gold); margin-bottom: 20px;
}
.quote-strip .pull-quote::before { margin-bottom: 14px; }
.pull-quote p {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.32;
  letter-spacing: -0.012em; color: var(--navy-deep);
  text-wrap: pretty; margin: 0 0 22px;
}
.pull-quote footer { color: var(--gray); font-size: var(--fs-small); }
.quote-strip { background: var(--soft); }
.quote-strip .pull-quote p { font-size: clamp(1.25rem, 2.1vw, 1.6rem); margin-bottom: 14px; }

/* ---------- b-roll slots (swap for real photography) ----------
   Composed as a reserved plate rather than a dashed to-do box: a dashed
   outline is the one element that makes an otherwise finished page read
   as a draft, and these slots sit on public pages. */
.broll {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-card);
  background:
    repeating-linear-gradient(45deg, rgba(2,27,53,0.016) 0 10px, transparent 10px 20px),
    var(--soft);
  border: 1px solid var(--border);
  display: grid; place-items: center; text-align: center; padding: 24px;
  overflow: hidden;
}
/* corner registration marks: a plate waiting for its image */
.broll::before, .broll::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--border-strong); pointer-events: none;
}
.broll::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.broll::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.broll .b-note { color: var(--gray); font-size: 0.8rem; max-width: 32ch; margin: 0; }
.broll svg { width: 34px; height: 34px; color: var(--border-strong); margin-inline: auto; margin-bottom: 12px; }
.broll-wide { aspect-ratio: 21 / 9; }

/* ---------- comparison table (pricing) ---------- */
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td {
  text-align: left; vertical-align: top;
  padding: 16px 22px 16px 0; border-bottom: 1px solid var(--border);
}
.compare thead th {
  font-family: var(--font-head); font-weight: 600; font-size: 1.06rem;
  color: var(--navy-deep); letter-spacing: -0.008em;
  border-bottom: 1px solid var(--border-strong); padding-top: 0;
}
.compare tbody th[scope="row"] {
  font-family: var(--font-body); font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray);
  width: 190px; padding-right: 26px;
}
.compare td { font-size: 0.94rem; color: var(--ink); max-width: 40ch; }
.compare .cmp-strong { font-weight: 600; color: var(--navy-deep); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- ledger reveal ----------
   Hidden-at-rest lives inside no-preference so this block, appended after
   the reduced-motion overrides, can never strand reduced-motion users (whose
   JS skips the observer) at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(12px);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
  [data-reveal].revealed { opacity: 1; transform: none; }
  .svc-row:nth-child(2)[data-reveal] { transition-delay: 90ms; }
  .svc-row:nth-child(3)[data-reveal] { transition-delay: 180ms; }
}

/* ---------- leadership dossier (about) ---------- */
.leader {
  display: grid; grid-template-columns: 260px 1fr;
  gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: 28px;
}
.leader-photo {
  width: 260px; height: auto; border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.leader-body h3 { margin: 0 0 4px; }
.leader-title {
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 18px;
}
@media (max-width: 760px) {
  .leader { grid-template-columns: 1fr; }
  .leader-photo { width: min(240px, 62vw); }
}

/* ---------- careers listings and portal ---------- */
.job-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 18px; margin-top: 24px; align-items: start;
}
.job {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 28px); background: var(--white);
  transition: border-color var(--t-fast) var(--ease);
}
.job:hover { border-color: var(--navy); }
.job::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px;
  height: 2px; background: var(--gold); border-radius: var(--r-card) var(--r-card) 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.job:hover::before, .job.job-open::before { transform: scaleX(1); }
.job.job-open { grid-column: 1 / -1; }
.job-head h3 { margin: 0 0 4px; }
.job-head .job-meta { margin: 0 0 12px; }
.job-summary {
  margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.job.job-open .job-summary { display: block; overflow: visible; max-width: 68ch; }
.job-apply { margin-top: auto; align-self: flex-start; }
.job-apply.applied:disabled {
  opacity: 1; cursor: default;
  border-color: var(--gold); color: var(--gold-deep);
}

/* in-place application */
.job-detail { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 22px; }
.job-detail h4 { margin: 0 0 18px; }
.job-detail .apply-form { max-width: 760px; }
.apply-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
@media (max-width: 720px) { .apply-grid { grid-template-columns: 1fr; } }
.field label > input, .field label > textarea { margin-top: 6px; }
.field-label-text { display: block; font-weight: 600; font-size: 0.94rem; margin-bottom: 8px; }
.file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-btn { cursor: pointer; }
input.visually-hidden:focus-visible ~ .file-row .file-btn { outline: 2px solid var(--navy); outline-offset: 2px; }
.file-name { font-size: 0.87rem; color: var(--gray); }
.apply-actions { margin-top: 8px; }
.apply-status { margin: 10px 0 0; }
.apply-status.apply-error { color: var(--error-deep); }

/* confirmation state */
.apply-done { padding: 22px 0 8px; text-align: center; }
.apply-done-check { width: 34px; height: 34px; display: block; margin: 0 auto; color: var(--gold-deep); }
.apply-done h4 { margin: 12px 0 6px; }
.apply-done .meta { margin: 0 auto; max-width: 46ch; }
@media (prefers-reduced-motion: no-preference) {
  .apply-done-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: checkDraw 0.5s 0.1s var(--ease) forwards; }
}
@keyframes checkDraw { to { stroke-dashoffset: 0; } }

.admin-job { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }

/* service-area map attribution chip */
.map-frame { position: relative; max-width: 620px; margin-inline: auto; }
.map-attrib {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 7px;
  font-size: 0.6rem; letter-spacing: 0.02em; color: var(--gray);
  background: rgba(255, 255, 255, 0.78); border-radius: 3px;
}