@charset "UTF-8";
/* ============================================================================
   GENESIS CIRCUITS — design-tokens.css
   THE single authoritative stylesheet for the whole site.

   Style card 1 "DARKROOM MACRO" (selected Phase 0 direction):
   near-black ground + one warm copper accent, macro-photography led, LOW density,
   P1c full-bleed photographic hero.

   This file carries: tokens -> reset -> typography -> layout utilities ->
   buttons -> cards/grids -> blocks -> header/nav -> footer -> modal -> forms ->
   motion. A class defined here must never be redefined in a page stylesheet.
   No external font CDN. No inline style attributes required anywhere.
   ========================================================================= */

/* ==========================================================================
   1. FONTS — self-hosted, no CDN
   Archivo / Inter / JetBrains Mono are all variable files covering the weights
   this site uses, so each family is declared once with a weight range.
   Verified with build/_scripts/check-fonts.py (magic bytes + fvar axes).
   ========================================================================== */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-var-latin.woff2") format("woff2-variations");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrains-mono-var-latin.woff2") format("woff2-variations");
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
}

/* ==========================================================================
   2. TOKENS
   ========================================================================== */
:root{
  /* ---- surfaces: the darkroom's four grounds ---------------------------- */
  --void:#08090A;          /* deepest ground: footer, hero base, dark bands */
  --paper:#0E1113;         /* page ground */
  --surface:#16191C;       /* card fill */
  --surface-2:#1D2124;     /* raised panel / table head */

  /* ---- text: measured against their grounds (see _docs/design-blueprint) - */
  --ink:#F2EFE9;           /* primary text */
  --ink-soft:#A8A29A;      /* secondary text */
  --ink-faint:#767068;     /* 3.87:1 — decorative small-caps ONLY, never body */

  /* ---- hairlines: the only structural device on this site ---------------- */
  --line:#262A2D;          /* 1px card / table / section border */
  --line-strong:#3A3F43;   /* 1px border on interactive elements */

  /* ---- accent: warm copper. Interactive and CTA only. ------------------- */
  --accent:#C4713C;        /* 5.21:1 on --paper */
  --accent-2:#E0A46A;      /* hover / underline / numeric emphasis */
  --bronze:#8A6A4A;        /* secondary metallic: card hover border, marks */
  --on-accent:#0A0A0A;     /* 5.44:1 on --accent — the primary button label */
  --on-dark:#F2EFE9;       /* text over photography */
  --data:#E0A46A;          /* numeric emphasis only */

  /* ---- light inverted plate (max 2 sections site-wide) ------------------ */
  --plate:#F4F1EA;
  --plate-2:#EDEAE1;
  --plate-ink:#141210;     /* 16.57:1 on --plate */
  --plate-ink-soft:#52504B;
  --plate-line:#DBD5C9;

  /* ---- radii ------------------------------------------------------------ */
  --radius-sm:2px;
  --radius:3px;
  --radius-lg:6px;
  --radius-pill:999px;

  /* ---- spacing scale ---------------------------------------------------- */
  --space-3xs:4px;
  --space-2xs:8px;
  --space-xs:12px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:32px;
  --space-xl:48px;
  --space-2xl:64px;
  --space-3xl:96px;

  --gap:24px;
  --section-y:clamp(64px,7vw,96px);
  --container:1280px;
  --gutter:24px;

  /* ---- type ------------------------------------------------------------- */
  --font-display:"Archivo","Archivo Fallback",-apple-system,BlinkMacSystemFont,
                 "Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,
              "Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,
              SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --fs-h1:clamp(36px,5.2vw,60px);
  --fs-h2:clamp(26px,3.2vw,40px);
  --fs-h3:clamp(18px,2vw,23px);
  --fs-h4:clamp(17px,1.5vw,19px);
  --fs-lead:clamp(16px,1.4vw,18px);
  --fs-body:16px;
  --fs-small:14px;
  --fs-caption:12px;
  --fs-micro:11px;

  --lh-tight:1.1;
  --lh-heading:1.18;
  --lh-body:1.72;
  --tracking-eyebrow:.14em;
  --tracking-tight:-.011em;
  --measure:68ch;
  --measure-narrow:52ch;

  /* ---- depth: this site has none. The modal dialog is the only exception. */
  --shadow-modal:0 24px 64px rgb(0 0 0 / .55);
  --shadow-none:none;

  /* ---- motion ----------------------------------------------------------- */
  --dur-fast:140ms;
  --dur:220ms;
  --ease:cubic-bezier(.2,.6,.2,1);

  --z-header:60;
  --z-drop:70;
  --z-drawer:80;
  --z-modal:100;
  --z-sticky:50;
}

/* ==========================================================================
   3. RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%}
img{display:block;height:auto}
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--space-sm);
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-heading);
  letter-spacing:var(--tracking-tight);
  color:var(--ink);
}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--space-md)}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 var(--space-md);padding-left:1.15em}
li{margin-bottom:var(--space-2xs)}
a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--accent-2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}
strong,b{font-weight:600}
hr{border:0;height:1px;background-color:var(--line);margin:var(--space-lg) 0}
figure{margin:0}
figcaption{
  margin-top:var(--space-xs);
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  color:var(--ink-faint);
  line-height:1.6;
}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:.95em}
table{border-collapse:collapse}
button{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* .sec only ever sets VERTICAL padding — never the block shorthand, so a
   section can never eat the container's 24px side gutter. */
.sec{padding-block:var(--section-y)}
.sec--tight{padding-block:clamp(40px,4.5vw,64px)}
.sec--flush-top{padding-top:0}
.sec--flush-bottom{padding-bottom:0}
.section-head{max-width:var(--measure);margin-bottom:var(--space-lg)}
.section-head p{color:var(--ink-soft);font-size:var(--fs-lead);max-width:var(--measure-narrow)}

.sec--void{background-color:var(--void)}
.sec--surface{background-color:var(--surface)}
.sec--line{border-top:1px solid var(--line)}

.grid-2,.grid-3,.grid-4{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}

.stack{display:flex;flex-direction:column;gap:var(--space-md)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}
.row--between{justify-content:space-between}
.center{text-align:center}
.center .section-head{margin-inline:auto}
.mt-0{margin-top:0}
.mt-md{margin-top:var(--space-md)}
.mt-lg{margin-top:var(--space-lg)}
.mb-0{margin-bottom:0}
.mb-md{margin-bottom:var(--space-md)}

/* ==========================================================================
   5. TYPE COMPONENTS
   ========================================================================== */
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 var(--space-sm);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  background-color:var(--accent);
}
.lead{font-size:var(--fs-lead);color:var(--ink-soft);max-width:var(--measure-narrow)}
.mono{font-family:var(--font-mono)}
.note{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-faint);line-height:1.65}
.num{font-family:var(--font-mono);color:var(--data);font-weight:500}

/* `.hero--photo` — P1c full-bleed photographic hero with a copper scrim.
   The <img> is absolutely positioned; content sits left over the dark side. */
.hero--photo{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:clamp(520px,70vh,680px);
  padding-block:clamp(72px,9vw,120px);
  background-color:var(--void);
  overflow:hidden;
}
.hero--photo img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
}
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,
    rgb(8 9 10 / .95) 0%,
    rgb(8 9 10 / .88) 32%,
    rgb(12 10 9 / .62) 62%,
    rgb(38 22 12 / .30) 100%);
}
.hero__inner{
  position:relative;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.hero__title{font-size:var(--fs-h1);max-width:19ch;margin-bottom:var(--space-sm)}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__sub{
  max-width:var(--measure-narrow);
  color:var(--ink-soft);
  font-size:var(--fs-lead);
  margin-bottom:var(--space-md);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-sm)}
.hero__ledger{
  margin-top:var(--space-lg);
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:.08em;
  color:var(--ink-faint);
}

/* `.plate` / `.plate--light` — inverted light band. Maximum 2 uses site-wide. */
.plate{
  background-color:var(--plate);
  color:var(--plate-ink);
  padding-block:var(--section-y);
}
.plate h1,.plate h2,.plate h3,.plate h4{color:var(--plate-ink)}
.plate p,.plate li{color:var(--plate-ink-soft)}
.plate .eyebrow{color:#7A4A22}
.plate .eyebrow::before{background-color:#7A4A22}
.plate a{color:#8A4A1E}
.plate a:hover{color:#5E3113}
.plate .eyebrow,.plate .eyebrow::before{--accent:#7A4A22}
.plate--light{background-color:var(--plate-2)}
.plate hr{background-color:var(--plate-line)}
/* Inverted-band corrections: numerals and card text inside a light plate must use the
   plate ink pair, or dark-ground tokens leave them invisible on the light ground. */
.plate .stat__n{color:var(--plate-ink)}
.plate .stat__l{color:var(--plate-ink-soft)}
.plate .card,.plate .card__title{color:var(--plate-ink)}
.plate .card{background-color:#FFFFFF;border-color:var(--plate-line)}
.plate .card__text,.plate .note,.plate .lead,.plate .section-head p{color:var(--plate-ink-soft)}
.plate .card__idx{color:#8A4A1E}
.plate .badge{background-color:#FFFFFF;border-color:var(--plate-line);color:var(--plate-ink-soft)}
.plate .card-more,.plate .link-more{color:#8A4A1E}
.plate table.spec caption,.plate table.spec th{color:var(--plate-ink-soft)}

/* `.raid` — hero-adjacent hard numbers, one hairline strip, 3-5 equal columns */
.raid{
  display:grid;
  grid-template-columns:repeat(var(--raid-cols,4),1fr);
  background-color:var(--void);
  border-block:1px solid var(--line);
}
.raid--3{grid-template-columns:repeat(3,1fr)}
.raid--5{grid-template-columns:repeat(5,1fr)}
.raid__cell{
  min-width:0;
  padding:var(--space-md) var(--space-sm);
  border-left:1px solid var(--line);
}
.raid__cell:first-child{border-left:0}
.raid__n{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(18px,2.2vw,24px);
  font-weight:500;
  color:var(--data);
  white-space:nowrap;
}
.raid__l{
  display:block;
  margin-top:var(--space-3xs);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* `.macro-figure` — full-bleed or inline macro photograph + mono caption */
.macro-figure{position:relative}
.macro-figure img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
}
.macro-figure--wide{width:min(100%,var(--container));margin-inline:auto;padding-inline:var(--gutter)}
.macro-figure--wide img{border-radius:var(--radius-lg)}
.macro-figure--narrow{width:min(100%,78%)}
.macro-figure figcaption{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-md);
  justify-content:space-between;
  margin-top:var(--space-xs);
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  color:var(--ink-faint);
}

/* ==========================================================================
   6. BUTTONS — 2px radius, zero shadow, near-black label on copper
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 var(--space-md);
  border:0;
  border-radius:var(--radius-sm);
  background-color:transparent;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  line-height:1;
  text-align:center;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.btn--primary{background-color:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background-color:var(--accent-2);color:var(--on-accent)}
.btn--secondary{
  border:1px solid var(--line-strong);
  background-color:transparent;
  color:var(--ink);
}
.btn--secondary:hover{border-color:var(--bronze);color:var(--accent-2)}
.btn--ghost{
  border:1px solid rgb(242 239 233 / .5);
  background-color:transparent;
  color:var(--on-dark);
}
.btn--ghost:hover{border-color:var(--on-dark);color:var(--on-dark)}
.btn--sm{min-height:38px;padding:0 var(--space-sm);font-size:13.5px}
.btn--lg{min-height:54px;padding:0 var(--space-lg);font-size:16px}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.plate .btn--secondary{border-color:#9A9384;color:var(--plate-ink)}
.plate .btn--secondary:hover{border-color:#6A6355;color:#3A332A}

.link-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
}
.link-more::after{content:"\2192";transition:transform var(--dur-fast) var(--ease)}
.link-more:hover::after{transform:translateX(3px)}

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background-color:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:var(--space-md);
  transition:border-color var(--dur) var(--ease);
}
.card:hover{border-color:var(--bronze)}
.card--flush{padding:0;overflow:hidden}
.card--raised{background-color:var(--surface-2)}
.card__idx{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bronze);
}
.card__title{margin:var(--space-xs) 0 var(--space-2xs);font-size:var(--fs-h4)}
.card__text{color:var(--ink-soft);font-size:var(--fs-small);margin:0}

.card-media{
  position:relative;
  overflow:hidden;
  background-color:var(--surface-2);
  border-radius:var(--radius-sm);
}
.card-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ar-3-2{aspect-ratio:3/2}
.ar-2-3{aspect-ratio:2/3}
.ar-1-1{aspect-ratio:1/1}
.card--flush .card-media{border-radius:0}
.card-body{padding:var(--space-md)}
.card-body h3{margin-bottom:var(--space-2xs)}
.card-body p{color:var(--ink-soft);font-size:var(--fs-small)}
.card-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:var(--space-xs);
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.card-more::after{content:"\2192";transition:transform var(--dur-fast) var(--ease)}
.card-more:hover::after{transform:translateX(3px)}
.card-dl{margin:var(--space-xs) 0 0;font-size:var(--fs-caption)}
.card-dl dt{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:var(--space-2xs);
}
.card-dl dd{margin:2px 0 0;font-family:var(--font-mono);color:var(--data)}

/* ==========================================================================
   8. SPLIT — media and text column exactly equal height
   ========================================================================== */
.split{
  display:grid;
  grid-template-columns:minmax(45%,1fr) 1fr;
  gap:clamp(28px,4vw,64px);
  align-items:stretch;
}
.split>*{min-width:0}
.split--even{grid-template-columns:1fr 1fr}
.split--wide-text{grid-template-columns:minmax(45%,.85fr) 1.15fr}
.split.rev .split-media{order:2}
/* base rule carries no aspect-ratio; the opt-in .split-media.ar-3-2 / .ar-2-3
   pair below is more specific, so a plain `.split-media` can never be forced
   into a ratio on desktop, and the mobile block clears it outright. */
.split-media{
  position:relative;
  min-width:0;
  min-height:320px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background-color:var(--surface-2);
}
.split-media.ar-3-2,.split-media.ar-2-3{aspect-ratio:auto}
.split-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.split-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-sm);
  min-width:0;
}
.split-body h2,.split-body h3{margin:0}
.split-body p{color:var(--ink-soft);font-size:var(--fs-small);margin:0}

/* ==========================================================================
   9. SPEC TABLE — desktop never scrolls, mobile does
   ========================================================================== */
/* Desktop: table.spec is min-width:0 and fits the column, so this never
   scrolls. Mobile (below 640px): table.spec becomes min-width:560px and this
   wrapper becomes the horizontal scroll container — the page itself never
   scrolls sideways. */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background-color:var(--surface);
}
table.spec{width:100%;min-width:0;font-size:var(--fs-small)}
table.spec caption{
  text-align:left;
  padding:var(--space-sm) var(--space-md) 6px;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--ink-soft);
}
table.spec th{
  text-align:left;
  padding:12px var(--space-md);
  border-bottom:1px solid var(--line);
  background-color:var(--surface-2);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}
table.spec td{
  padding:12px var(--space-md);
  border-bottom:1px solid var(--line);
  color:var(--ink);
  vertical-align:top;
}
table.spec tr:last-child td{border-bottom:0}
table.spec td:first-child{font-weight:600;white-space:nowrap}
table.spec td b,table.spec td .num{font-family:var(--font-mono);color:var(--data);font-weight:500}
table.spec tbody tr:hover{background-color:rgb(242 239 233 / .025)}
.plate table.spec{background-color:#fff;border-color:var(--plate-line)}
.plate table.spec th{background-color:var(--plate-2);color:var(--plate-ink-soft);border-color:var(--plate-line)}
.plate table.spec td{border-color:var(--plate-line);color:var(--plate-ink)}
.plate table.spec td b,.plate table.spec td .num{color:#8A4A1E}

.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.compare-grid>*{min-width:0}

/* ==========================================================================
   10. STEPS — driven by a class list only (CSP style-src 'self' forbids the
       inline style attributes the older custom-property interface required)
   ========================================================================== */
.steps{display:grid;gap:var(--gap);counter-reset:step}
.steps--2{grid-template-columns:repeat(2,1fr)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--6{grid-template-columns:repeat(3,1fr)}   /* 6 steps lay out 3x2, never 6 across */
.steps>*{min-width:0}
.steps__item{position:relative;padding-top:46px}
.steps__item::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  position:absolute;
  top:0;
  left:0;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--accent);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:var(--accent);
}
.steps__item h3{font-size:var(--fs-h4);margin-bottom:var(--space-2xs)}
.steps__item p{color:var(--ink-soft);font-size:var(--fs-small);margin:0}
.steps--panel .steps__item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-md);
  background-color:var(--surface);
}
.steps--panel .steps__item::before{position:static;margin-bottom:var(--space-xs)}

/* ==========================================================================
   11. FEED STRIP — SIGNATURE BLOCK
   Exactly 8 slots in one row on desktop, 4 on tablet, 2 on mobile.
   Each slot: F-nn index, component name, package code, part silhouette.
   ========================================================================== */
.feed-strip{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  background-color:var(--surface);
  border-block:1px solid var(--line);
}
.feed-slot{
  min-width:0;
  padding:var(--space-sm) var(--space-xs) 14px;
  border-left:1px solid var(--line);
}
.feed-slot:first-child{border-left:0}
.feed-slot__idx{
  display:block;
  margin-bottom:var(--space-xs);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  color:var(--accent);
}
.feed-slot svg{display:block;width:100%;height:34px;margin-bottom:var(--space-xs)}
.feed-slot__name{
  display:block;
  font-family:var(--font-display);
  font-size:13.5px;
  font-weight:600;
  line-height:1.25;
  color:var(--ink);
}
.feed-slot__pkg{
  display:block;
  margin-top:3px;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.06em;
  color:var(--ink-faint);
}
.feed-strip__foot{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-md);
  justify-content:space-between;
  margin-top:var(--space-sm);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:var(--ink-faint);
}

/* ==========================================================================
   12. TERMINAL WINDOW — QC data blocks
   ========================================================================== */
.term{
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  overflow:hidden;
  background-color:rgb(8 9 10 / .82);
}
.term__bar{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px var(--space-sm);
  border-bottom:1px solid var(--line);
  background-color:rgb(242 239 233 / .04);
}
.term__dot{width:9px;height:9px;border-radius:var(--radius-pill);background-color:rgb(242 239 233 / .26)}
.term__title{
  margin-left:6px;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  color:var(--ink-soft);
}
.term__body{
  margin:0;
  padding:var(--space-sm) var(--space-md);
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  line-height:1.95;
  color:var(--ink);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.term__body .ok{color:#7FD6A8}
.term__body .key{color:var(--accent-2)}
.term__body .warn{color:#F0A868}
.term__body .dim{color:var(--ink-faint)}

/* ==========================================================================
   13. STATS — dark rounded full-width band, .grid-3, huge numerals
   Children keep the legacy .stat__n / .stat__l names.
   ========================================================================== */
.stats{
  background-color:var(--void);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.stats .stats__item{
  min-width:0;
  padding:clamp(26px,3.4vw,44px) var(--space-md);
  border-left:1px solid var(--line);
}
.stats .stats__item:first-child{border-left:0}
.stats .stats__item p{color:var(--ink-soft);font-size:var(--fs-small);margin:var(--space-xs) 0 0}
.stat__n{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(34px,4.6vw,56px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ink);
}
.stat__l{
  display:block;
  margin-top:var(--space-xs);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.stats--flat{border-radius:0;border-inline:0}

/* ==========================================================================
   14. CERT WALL — badge slots only; never print a certificate number
   ========================================================================== */
.cert-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.cert-card{
  min-width:0;
  background-color:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-sm);
  transition:border-color var(--dur) var(--ease);
}
.cert-card:hover{border-color:var(--bronze)}
.cert-card__badge{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:3/4;
  padding:var(--space-2xs);
  border:1px dashed var(--line);
  border-radius:var(--radius-sm);
  background-color:var(--void);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  color:var(--ink-faint);
  text-align:center;
}
.cert-card__badge img{width:100%;height:100%;object-fit:cover;object-position:top}
.cert-card__name{margin:var(--space-xs) 0 5px;font-size:var(--fs-h4)}
.cert-card__note{margin:0;font-size:var(--fs-caption);line-height:1.6;color:var(--ink-soft)}
.cert-wall__note{
  margin-top:var(--space-sm);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:var(--ink-faint);
}

/* ==========================================================================
   15. PHOTO GALLERY — fixed column count, no auto-fit, no orphan row
   ========================================================================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);list-style:none;margin:0;padding:0}
.gallery--2{grid-template-columns:repeat(2,1fr)}
.gallery--4{grid-template-columns:repeat(4,1fr)}
.gallery__item{
  min-width:0;
  margin:0;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background-color:var(--surface-2);
}
.gallery__item img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   16. FAQ ACCORDION — external JS, data-faq / aria-expanded / hidden
   ========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-sm);
  width:100%;
  min-height:52px;
  padding:var(--space-sm) 0;
  border:0;
  background-color:transparent;
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.faq__q:hover{color:var(--accent-2)}
.faq__q::after{
  content:"+";
  flex:none;
  font-family:var(--font-mono);
  color:var(--accent);
  transition:transform var(--dur) var(--ease);
}
.faq__q[aria-expanded="true"]::after{content:"\2212"}
.faq__a{
  margin:0;
  padding:0 0 var(--space-sm);
  max-width:var(--measure);
  color:var(--ink-soft);
  font-size:var(--fs-small);
}

/* ==========================================================================
   17. CTA BAND / BANNER — dark green..copper band, one filled one outline
   ========================================================================== */
.banner{
  position:relative;
  isolation:isolate;
  background-color:var(--void);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(32px,4.6vw,60px);
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  align-items:center;
  justify-content:space-between;
}
/* Component background for the shared cta-bg photograph. It lives here, on the
   component, so no page needs an inline style or its own <img>. The gradient
   sits on top of the photo inside the same layer, so the headline, statement
   and buttons keep their measured contrast against --void regardless of how
   bright the photograph is. */

.banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(102deg,rgb(8 9 10 / .95) 0%,rgb(8 9 10 / .80) 46%,rgb(8 9 10 / .60) 100%),
    url("/generated/cta-bg.webp");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
.banner>*{position:relative}
.banner--accent{border-color:var(--bronze)}
.banner__eyebrow{
  margin:0 0 var(--space-xs);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
}
.banner__title{margin:0;font-size:clamp(24px,2.9vw,36px);max-width:24ch}
.banner__text{
  margin:var(--space-xs) 0 0;
  max-width:46ch;
  color:var(--ink-soft);
  font-size:var(--fs-small);
}
.banner__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs)}

/* ==========================================================================
   18. HEADER + NAV
   `.nav__item` is centred by a 3-column grid whose outer tracks are 1fr, so
   the menu itself is centre-aligned while brand and CTA are pushed outward.
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  background-color:var(--void);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-sm);
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  min-height:72px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-self:start;
  color:var(--ink);
}
.brand:hover{color:var(--ink)}
.brand__mark{flex:none;width:34px;height:34px}
.brand__word{display:block;line-height:1.05}
.brand__word b{
  display:block;
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:600;
  letter-spacing:.01em;
}
.brand__word i{
  display:block;
  font-family:var(--font-mono);
  font-style:normal;
  font-size:9px;
  font-weight:500;
  letter-spacing:.3em;
  color:var(--bronze);
}
/* .nav__item is the middle track of a 1fr auto 1fr grid. min-width:0 stops its
   intrinsic width from inflating that track, and justify-self:stretch makes it
   fill whatever the track actually is — which is what keeps the menu optically
   centred while brand and CTA are pushed hard to the two outer edges. */
.nav__item{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.6vw,26px);
  justify-self:stretch;
  justify-content:center;
  min-width:0;
}
.nav__link{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  min-height:44px;
  padding:6px 0;
  border-bottom:2px solid transparent;
  color:var(--ink-soft);
  font-size:14.5px;
  font-weight:500;
  white-space:nowrap;
}
.nav__link:hover{color:var(--ink)}
.nav__link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
/* set by nav.js when the current page lives inside a dropdown: the parent link
   is marked as the active section without claiming aria-current itself */
.nav__link.is-section{color:var(--ink);border-bottom-color:var(--bronze)}
.nav__hint{
  display:block;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--bronze);
  line-height:1.4;
}
.nav__cta{justify-self:end}
.nav__toggle{
  display:none;
  align-items:center;
  justify-content:center;
  justify-self:end;
  width:44px;
  height:44px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background-color:transparent;
  color:var(--ink);
  cursor:pointer;
}
.nav__toggle svg{width:20px;height:20px}
.nav__toggle .nav__ico--close{display:none}
.nav__toggle[aria-expanded="true"] .nav__ico--open{display:none}
.nav__toggle[aria-expanded="true"] .nav__ico--close{display:block}

/* dropdown panels */
.nav__drop-wrap{position:relative}
.nav__drop{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  z-index:var(--z-drop);
  min-width:310px;
  padding:var(--space-xs);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background-color:var(--surface);
  display:none;
}
.nav__drop.is-open{display:block}
.nav__drop a{
  display:block;
  padding:9px var(--space-xs);
  border-radius:var(--radius-sm);
  color:var(--ink-soft);
  font-size:14px;
}
.nav__drop a:hover{background-color:var(--surface-2);color:var(--ink)}
.nav__drop a[aria-current="page"]{color:var(--accent-2)}
.nav__drop-title{
  padding:6px var(--space-xs) var(--space-2xs);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.nav__drop--2col{min-width:560px;display:none;grid-template-columns:1fr 1fr;gap:2px}
.nav__drop--2col.is-open{display:grid}
.nav__drop-col{min-width:0}
.nav__drop-col a{display:block;padding:9px var(--space-xs);border-radius:var(--radius-sm);
  color:var(--ink-soft);font-size:14px}
.nav__drop-col a:hover{background-color:var(--surface-2);color:var(--ink)}

/* ==========================================================================
   19. FOOTER — 3 link columns + a wide CTA panel as the 4th block
   ========================================================================== */
.site-footer{
  background-color:var(--void);
  border-top:1px solid var(--line);
  padding-top:var(--space-2xl);
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.5fr;
  gap:var(--space-lg) var(--space-md);
}
.site-footer__grid>*{min-width:0}
.site-footer__head{
  margin:0 0 var(--space-xs);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.site-footer__col a{
  display:block;
  padding:4px 0;
  color:var(--ink-soft);
  font-size:14px;
}
.site-footer__col a:hover{color:var(--accent-2)}
.site-footer__cta{
  padding:var(--space-md);
  border:1px solid var(--bronze);
  border-radius:var(--radius);
  background-color:var(--surface);
}
.site-footer__cta h2,.site-footer__cta h3{margin:0;font-size:var(--fs-h4)}
.site-footer__cta p{
  margin:var(--space-2xs) 0 var(--space-sm);
  color:var(--ink-soft);
  font-size:13.5px;
}
.site-footer__cta .btn{width:100%}
.site-footer__legal{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-md);
  justify-content:space-between;
  width:100%;
  max-width:var(--container);
  margin:var(--space-xl) auto 0;
  padding:var(--space-sm) var(--gutter);
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:var(--ink-faint);
}
.site-footer__legal a{color:var(--ink-faint)}
.site-footer__legal a:hover{color:var(--accent-2)}

/* ==========================================================================
   20. MODAL — two columns, image left / form right
   ========================================================================== */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--space-md);
  background-color:rgb(4 5 6 / .74);
  backdrop-filter:blur(3px);
}
.modal-overlay.is-open{display:flex}
.modal-dialog{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  max-width:760px;
  max-height:92vh;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background-color:var(--paper);
  box-shadow:var(--shadow-modal);   /* the ONLY shadow permitted on this site */
}
.modal-close{
  position:absolute;
  top:var(--space-xs);
  right:var(--space-xs);
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background-color:rgb(8 9 10 / .82);
  color:var(--ink);
  cursor:pointer;
}
.modal-close:hover{border-color:var(--bronze);color:var(--accent-2)}
.modal-close svg{width:18px;height:18px}
.modal-image-panel{
  position:relative;
  min-height:100%;
  overflow:hidden;
  background-color:var(--surface-2);
}
.modal-image-panel img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.modal-image-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgb(8 9 10 / .22) 24%,rgb(8 9 10 / .86) 100%);
}
.modal-image-text{
  position:absolute;
  left:var(--space-md);
  right:var(--space-md);
  bottom:var(--space-md);
  color:var(--on-dark);
}
.modal-image-text span{display:block}
.modal-image-text .mi-label{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-2);
}
.modal-image-text .mi-value{
  margin-top:5px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
}
.modal-image-text .mi-note{
  margin-top:var(--space-2xs);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:rgb(242 239 233 / .72);
}
.modal-form-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-xs);
  padding:var(--space-lg) var(--space-md);
  overflow-y:auto;
}
.modal-form-panel h2{font-size:var(--fs-h3);margin:0}
.modal-form-panel .mf-subtitle{
  margin:0 0 var(--space-2xs);
  color:var(--ink-soft);
  font-size:var(--fs-caption);
}

/* ==========================================================================
   21. FORMS
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  min-height:44px;
  padding:10px var(--space-xs);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background-color:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  color-scheme:dark;
}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.field--error input,.field--error select,.field--error textarea{border-color:#E0876A}
.field__err{
  display:none;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:#E0876A;
}
.field--error .field__err{display:block}
.form-note{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:var(--ink-faint);
}
.form-status{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  color:var(--accent-2);
}
.plate .field input,.plate .field select,.plate .field textarea{
  background-color:#fff;
  border-color:var(--plate-line);
  color:var(--plate-ink);
  color-scheme:light;
}
.plate .field label{color:var(--plate-ink-soft)}

/* ==========================================================================
   22. BADGES / CHIPS / MISC
   ========================================================================== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  color:var(--ink-soft);
}
.badge--accent{border-color:var(--accent);color:var(--accent)}
.badge--solid{background-color:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
/* Inline SVG sprite icon. Sits inside a <button>, <a> or a text run and
   inherits colour through currentColor. Referenced as
   <svg class="ic"><use href="#i-phone"/></svg> (the equivalent #icon-* symbol
   names resolve to the same glyphs). */
.ic{
  display:inline-block;
  flex:none;
  width:20px;
  height:20px;
  vertical-align:middle;
  fill:none;
  stroke:currentColor;
}
.ic--sm{width:16px;height:16px}
.ic--lg{width:24px;height:24px}
.icon-feature{
  width:48px;
  height:48px;
  object-fit:contain;      /* the only place contain is allowed: 48-64px icons */
}
.icon-feature--lg{width:64px;height:64px}
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:999;
  padding:var(--space-xs) var(--space-sm);
  background-color:var(--accent);
  color:var(--on-accent);
}
.skip-link:focus{left: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;
}

/* ==========================================================================
   23. STICKY MOBILE CTA — hidden from 900px up
   ========================================================================== */
.stick-cta{
  position:sticky;
  bottom:0;
  z-index:var(--z-sticky);
  display:flex;
  gap:var(--space-2xs);
  padding:var(--space-2xs) var(--gutter);
  border-top:1px solid var(--line-strong);
  background-color:rgb(8 9 10 / .97);
}
.stick-cta .btn{flex:1 1 0;min-height:48px}
.stick-cta__note{
  display:none;
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:var(--ink-faint);
}

/* ==========================================================================
   24. REVEAL — progressive enhancement; hidden only when JS is running
   ========================================================================== */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease);
}
.js .reveal.is-in{opacity:1;transform:none}
@keyframes gc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ==========================================================================
   25. RESPONSIVE
   Grid collapses: .grid-4 4 -> 2 -> 1, .grid-3 3 -> 2 -> 1,
   .grid-2 2 -> 1. Fixed-column walls keep a whole multiple of their column
   count so no row is ever left with a single orphan card.
   ========================================================================== */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .cert-wall{grid-template-columns:repeat(2,1fr)}
  .gallery--4{grid-template-columns:repeat(2,1fr)}
  .stats .grid-3,.stats .grid-2,.stats .grid-4{grid-template-columns:repeat(2,1fr)}
  .feed-strip{grid-template-columns:repeat(4,1fr)}
  .feed-slot:nth-child(4n+1){border-left:0}
  .feed-slot:nth-child(n+5){border-top:1px solid var(--line)}
  .raid--5{grid-template-columns:repeat(3,1fr)}
  .raid--5 .raid__cell:nth-child(3n+1){border-left:0}
  .raid--5 .raid__cell:nth-child(n+4){border-top:1px solid var(--line)}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .compare-grid{grid-template-columns:1fr}
  .macro-figure--narrow{width:100%}
}

@media (max-width:1023px){
  /* the 9-item menu no longer fits beside the brand and CTA, so the drawer
     starts here — one breakpoint for both the nav and the dense blocks */
  :root{--section-y:clamp(48px,7vw,72px)}
  .nav__item{
    position:fixed;
    inset:auto 0 0 0;
    top:var(--drawer-top,72px);
    z-index:var(--z-drawer);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:var(--space-sm) var(--gutter) var(--space-2xl);
    border-top:1px solid var(--line);
    background-color:var(--void);
    overflow-y:auto;
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform var(--dur) var(--ease),visibility var(--dur) var(--ease);
  }
  .nav__item.is-open{transform:none;visibility:visible}
  .nav__link{
    min-height:52px;
    padding:var(--space-xs) 0;
    border-bottom:1px solid var(--line);
    border-left:2px solid transparent;
    font-size:17px;
  }
  .nav__link[aria-current="page"]{border-bottom-color:var(--line);border-left-color:var(--accent)}
  .nav__link.is-section{border-bottom-color:var(--line);border-left-color:var(--bronze)}
  .nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .nav__drop,.nav__drop--2col{
    position:static;
    transform:none;
    min-width:0;
    display:none;
    border:0;
    border-radius:0;
    background-color:transparent;
    padding:0 0 var(--space-xs);
  }
  .nav__drop.is-open,.nav__drop--2col.is-open{display:block}
  .nav__drop--2col.is-open{grid-template-columns:1fr}
  .nav__drop a,.nav__drop-col a{padding:11px var(--space-xs)}
  .stats .stats__item:nth-child(odd){border-left:0}
  .stats .stats__item:nth-child(n+3){border-top:1px solid var(--line)}
  .raid,.raid--3,.raid--5{grid-template-columns:repeat(2,1fr)}
  .raid .raid__cell:nth-child(odd){border-left:0}
  .raid .raid__cell:nth-child(n+3){border-top:1px solid var(--line)}
  .steps--3,.steps--4,.steps--6{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .banner{padding:var(--space-lg) var(--space-md)}
  .banner__actions{width:100%}
  .banner__actions .btn{flex:1 1 auto}
  .hero--photo{min-height:520px}
  .modal-image-panel{min-height:180px}
}

@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .cert-wall{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr}
  .feed-strip{grid-template-columns:repeat(2,1fr)}
  .feed-slot{border-left:1px solid var(--line)}
  .feed-slot:nth-child(odd){border-left:0}
  .feed-slot:nth-child(n+3){border-top:1px solid var(--line)}
  .split,.split--even,.split--wide-text{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .split-media{aspect-ratio:auto;min-height:260px}
  /* the only place a spec table is allowed to force a horizontal scroll: below
     this width the columns cannot compress any further without losing values.
     On desktop table.spec keeps min-width:0 so the page itself never scrolls. */
  table.spec{min-width:560px}
  .steps--2,.steps--3,.steps--4,.steps--6{grid-template-columns:1fr}
  .stats .stats__item{border-left:0;border-top:1px solid var(--line)}
  .stats .stats__item:first-child{border-top:0}
  .site-footer__grid{grid-template-columns:1fr}
  .modal-overlay{padding:var(--space-2xs)}
  .modal-dialog{
    grid-template-columns:1fr;
    max-width:420px;
    overflow-y:auto;
  }
  .modal-image-panel{min-height:0;height:180px;max-height:180px}
  .modal-form-panel{overflow:visible;max-height:none;padding:var(--space-md) var(--space-sm)}
  .hero__cta .btn,.banner__actions .btn{width:100%}
  .macro-figure--wide{padding-inline:0}
  .macro-figure--wide img{border-radius:0;border-inline:0}
}
@media (min-width:900px){
  .stick-cta{display:none}
}

/* the container keeps its 24px side padding at every breakpoint */
@media (max-width:480px){
  :root{--gutter:20px}
  .container,.site-header__inner,.hero__inner,.site-footer__legal{padding-inline:20px}
}

/* ==========================================================================
   26. MOTION GUARD + FORCED COLORS
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .link-more::after,.card-more::after{transition:none}
}
@media (forced-colors:active){
  .card,.cert-card,.split-media,.table-wrap,.term,.banner{border:1px solid CanvasText}
  .btn--primary{forced-color-adjust:none}
}

/* ==========================================================================
   27. PRINT
   ========================================================================== */
@media print{
  .site-header,.stick-cta,.modal-overlay,.nav__item{display:none !important}
  body{background:#fff;color:#000}
  .card,.table-wrap,.term{border-color:#999}
}