/* ============================================================================
   AERTHEIX — SHARED STYLESHEET
   File:    aertheix.css
   Version: 1.0
   Date:    30 August 2026

   THIS IS THE ONLY STYLESHEET. Every page links it. No page defines its own
   :root block, its own font-size, its own colour or its own grid.

   Authority:
     AERTHEIX_Website_Design_Layout_MASTER_2026Aug30_V2
     AERTHEIX_Motion_Design_MASTER_2026Aug30_V1

   RULES FOR ANYONE EDITING THIS FILE
   1. A raw px font-size may only appear inside the TOKENS block below.
      Everywhere else must use var(--fs-*). No exceptions, no new clamp().
   2. If a page seems to need a size that does not exist, that is a signal the
      component is wrong — not that the scale is short. Raise a decision record.
   3. Colours come from the palette block only. No new hex outside it.
   4. New components are added here, named, and documented. They are never
      written inline in a page.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — the only place raw values are permitted
   ========================================================================== */
:root{
  /* --- canvas (Motion Master §1.3; #F1E7D3 is superseded) --- */
  --canvas:#FFFFFF;
  --canvas-mid:#FAF8F4;
  --canvas-end:#F2EEE9;

  /* --- palette (Design Master §5.1) --- */
  --ink:#2B313E;
  --muted:#6B7280;          /* supporting copy at >=16px only */
  --fine:#4E5563;           /* AA-safe small text; §12 overrides §5.1 */
  --stone:#EEE7D9;
  --mist:#E7EDE8;           /* quiet band, sibling of stone on the cool side */
  --forest-deep:#0F2A21;
  --forest:#174334;
  --forest-soft:#456B5D;
  --gold:#B8985A;
  --gold-access:#8A6D32;    /* gold TEXT on light surfaces */
  --gold-light:#D4BC84;     /* gold text/marks on dark surfaces */
  --olive:#8EA98D;          /* Y axis signal only */
  --plum:#B493AB;           /* Z axis signal only */

  --field:#12312A;          /* full-width dark field */
  --field-2:#0D261F;

  --line:rgba(43,49,62,.15);
  --line-strong:rgba(43,49,62,.26);
  --line-dark:rgba(255,255,255,.20);
  --line-dark-strong:rgba(255,255,255,.34);

  --on-dark:#FFFFFF;
  --on-dark-body:#DCE5E0;
  --on-dark-fine:#BDCCC5;

  /* --- type (Design Master §4.3 bands, enforced) ---
     h1     58-78 / 38-46      h2     42-58 / 31-40
     h3     25-34 / 23-29      lead   21-27 / 19-23
     body   16-18              nav    11-12
     eyebrow 10-12             metric 64-104 / 48-72                        */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,"Segoe UI",Arial,sans-serif;

  --fs-h1:clamp(38px,4.55vw,72px);
  --fs-h2:clamp(31px,3.45vw,54px);
  --fs-h3:clamp(23px,1.95vw,32px);
  --fs-h4:clamp(19px,1.6vw,25px);      /* card titles, pathway stage names   */
  --fs-lead:clamp(19px,1.5vw,24px);
  --fs-statement:clamp(23px,2.15vw,34px); /* pull statements, bridges        */
  --fs-body:clamp(16px,1.05vw,17.5px);
  --fs-metric:clamp(48px,5.2vw,88px);
  --fs-unit:clamp(15px,1.2vw,19px);
  --fs-label:14px;                     /* metric labels, card body           */
  --fs-fine:13px;                      /* source lines, boundary copy        */
  --fs-micro:11px;                     /* nav, eyebrow, buttons              */
  --fs-nano:10px;                       /* index numerals, card tags only     */

  /* --- layout --- */
  --max:1280px;
  --gutter:clamp(20px,4.6vw,72px);
  --header-h:84px;
  --sp-section:clamp(88px,9vw,138px);
  --sp-block:clamp(40px,4.4vw,64px);
  --gap-col:clamp(36px,4.8vw,76px);
  --gap-tile:clamp(16px,1.7vw,24px);
  --radius:clamp(18px,1.6vw,24px);
  --radius-sm:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-hover:220ms;
  --dur-reveal:620ms;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{
  min-width:320px;margin:0;
  background:linear-gradient(180deg,var(--canvas) 0%,var(--canvas-mid) 46%,var(--canvas-end) 100%);
  background-attachment:fixed;
  color:var(--ink);font:400 var(--fs-body)/1.66 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,a,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--gold-access);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.field :focus-visible,.hero :focus-visible{outline-color:var(--gold-light)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;z-index:2000;top:10px;left:10px;padding:11px 16px;background:#fff;color:var(--forest);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.12em;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   Only these four exist. Every page composition is built from them.
   ========================================================================== */
.section{position:relative;padding:var(--sp-section) var(--gutter)}
.section + .section{padding-top:clamp(58px,5.6vw,86px)}
.section + .field,.field + .section{padding-top:var(--sp-section)}
.shell{width:min(100%,var(--max));margin-inline:auto}
.shell + .shell{margin-top:var(--sp-block)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:start}
.split--center{align-items:center}
.split--stretch{align-items:stretch}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-tile)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-tile)}
.grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-tile)}
.stack-center{text-align:center}
.stack-center > *{margin-inline:auto}
.stack-center .h1,.stack-center .h2{max-width:22ch}
.stack-center .topic,.stack-center .note,.stack-center .body-copy,.stack-center .fine{max-width:62ch}

/* Section surfaces */
.field{position:relative;overflow:hidden;background:linear-gradient(158deg,var(--field-2) 0%,var(--field) 56%,#164034 100%);color:var(--on-dark)}
.field::before{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(212,188,132,.045) 0 1px,transparent 1px calc(100% / 6));content:"";pointer-events:none}
.field > .shell{position:relative;z-index:1}
.band-stone{background:var(--stone)}
.band-mist{background:var(--mist)}

/* ==========================================================================
   4. TYPE COMPONENTS
   ========================================================================== */
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.028em;text-wrap:balance}

.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 20px;color:var(--fine);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.eyebrow::before{flex:none;width:28px;height:1px;background:var(--gold);content:""}
.eyebrow--center{justify-content:center}

.h1{max-width:17ch;color:var(--ink);font:500 var(--fs-h1)/1.02 var(--display);letter-spacing:-.042em}
.h2{max-width:19ch;color:var(--ink);font:500 var(--fs-h2)/1.06 var(--display);letter-spacing:-.032em}
.h3{color:var(--ink);font:500 var(--fs-h3)/1.14 var(--display)}
.h4{color:var(--ink);font:500 var(--fs-h4)/1.2 var(--display)}
.h1 em,.h2 em{display:block;font-style:italic}
/* A hero H1 in a half-column needs a wider measure than a section H2. */
.split .h1{max-width:14ch}
.stack-center .h1,.stack-center .h2{max-width:none;margin-inline:auto}

.topic{max-width:30ch;margin:24px 0 0;color:var(--forest);font:500 var(--fs-lead)/1.34 var(--display)}
.body-copy{max-width:64ch;color:var(--ink)}
.body-copy p{margin:0 0 1.05em}
.body-copy p:last-child{margin-bottom:0}
.statement{max-width:26ch;margin:0;color:var(--forest);font:500 var(--fs-statement)/1.22 var(--display);letter-spacing:-.028em}
.bridge{max-width:34ch;margin:0 auto;color:var(--forest);font:500 var(--fs-statement)/1.24 var(--display);letter-spacing:-.028em;text-align:center;text-wrap:balance}
.fine{max-width:74ch;margin:0;color:var(--fine);font-size:var(--fs-fine);line-height:1.66}
.note{max-width:62ch;margin:0;color:var(--ink);font-size:var(--fs-body);line-height:1.68;text-wrap:pretty}

/* Dark-surface inversions. Applied by .field, never hand-written per page. */
.field .eyebrow{color:var(--gold-light)}
.field .eyebrow::before{background:var(--gold-light)}
.field .h1,.field .h2,.field .h3,.field .h4{color:#fff}
.field .topic{color:#F5EFE2}
.field .body-copy,.field .note{color:var(--on-dark-body)}
.field .fine{color:var(--on-dark-fine)}
.field .statement,.field .bridge{color:#FFF6E6}

.close-band{padding-top:var(--sp-block);border-top:1px solid var(--line)}
.field .close-band{border-color:var(--line-dark-strong)}
.close-rule{margin-top:var(--sp-block);text-align:center}

/* ==========================================================================
   5. REVEAL (motion contract §2)
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none}

/* ==========================================================================
   6. HEADER / FOOTER
   ========================================================================== */
.site-header{position:fixed;z-index:1000;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:var(--header-h);padding:0 var(--gutter);border-bottom:1px solid rgba(184,152,90,.24);background:rgba(255,255,255,.90);backdrop-filter:blur(18px);transition:min-height .28s,background .28s,box-shadow .28s}
.site-header.is-scrolled{min-height:68px;background:rgba(255,255,255,.97);box-shadow:0 8px 26px rgba(15,42,33,.07)}
.brand{display:inline-flex;align-items:center;gap:11px;justify-self:start;color:var(--forest);font:500 clamp(15px,1.15vw,18px)/1 var(--display);letter-spacing:.22em}
.brand img{width:34px;height:auto;object-fit:contain}
.site-navigation{display:flex;align-items:center;justify-content:center;gap:clamp(16px,1.9vw,30px)}
.site-navigation a{position:relative;padding:6px 0;color:var(--fine);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.11em;white-space:nowrap;transition:color var(--dur-hover)}
.site-navigation a::after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--gold);content:"";transform:scaleX(0);transform-origin:right;transition:transform .24s}
.site-navigation a:hover{color:var(--forest)}
.site-navigation a:hover::after,.site-navigation a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.site-navigation a[aria-current="page"]{color:var(--forest)}
.site-navigation a[aria-current="page"]::after{transform:scaleX(1)}
.header-cta{justify-self:end;display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border:1px solid rgba(184,152,90,.62);border-radius:999px;color:var(--forest);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.11em;white-space:nowrap;transition:background var(--dur-hover),color var(--dur-hover),border-color var(--dur-hover)}
.header-cta:hover,.header-cta:focus-visible{background:var(--forest);border-color:var(--forest);color:#fff}
.menu-toggle{display:none;justify-self:end;width:44px;height:44px;padding:0;border:1px solid rgba(184,152,90,.5);border-radius:50%;background:transparent;cursor:pointer}
.menu-toggle i{display:block;width:16px;height:1px;margin:4px auto;background:var(--forest);transition:transform .24s}
.menu-toggle[aria-expanded="true"] i:first-child{transform:translateY(2.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] i:last-child{transform:translateY(-2.5px) rotate(-45deg)}

.site-footer{padding:clamp(38px,4vw,56px) var(--gutter);background:var(--forest-deep);color:var(--on-dark-fine)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 36px;width:min(100%,var(--max));margin-inline:auto}
.footer-inner .brand{color:#fff}
.footer-nav{display:flex;flex-wrap:wrap;gap:12px 26px}
.footer-nav a{color:var(--on-dark-fine);font:600 var(--fs-nano)/1.4 var(--sans);letter-spacing:.12em;transition:color var(--dur-hover)}
.footer-nav a:hover{color:#fff}

/* ==========================================================================
   7. CONTROLS
   ========================================================================== */
.button{display:inline-flex;align-items:center;gap:.6em;min-height:46px;padding:0 22px;border:1px solid transparent;border-radius:999px;font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transition:background var(--dur-hover),color var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover)}
.button--primary{background:var(--forest);border-color:var(--gold);color:#fff}
.button--primary:hover,.button--primary:focus-visible{transform:translateY(-2px);background:var(--forest-deep)}
.button--secondary{background:transparent;border-color:var(--line-strong);color:var(--forest)}
.button--secondary:hover,.button--secondary:focus-visible{border-color:var(--forest);background:var(--forest);color:#fff}
.field .button--secondary{border-color:var(--line-dark-strong);color:#fff}
.field .button--secondary:hover{background:#fff;color:var(--forest-deep)}

.textlink{display:inline-flex;align-items:center;gap:.6em;color:var(--gold-access);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.textlink i{display:block;width:16px;height:1px;background:currentColor;font-style:normal;transition:width .24s}
.textlink:hover i{width:26px}
.field .textlink,.on-dark .textlink{color:var(--gold-light)}

/* ==========================================================================
   8. COMPONENT — METRICS  (HOME H02/H03, SYSTEM S01, ABOUT A04, ACCESS AC05)
   Numeral and qualifier are two type levels so cells stay optically equal.
   ========================================================================== */
.metrics{display:grid;grid-template-columns:repeat(var(--metric-cols,3),1fr);gap:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.metric{display:flex;min-height:clamp(178px,16.5vw,232px);flex-direction:column;justify-content:space-between;padding:clamp(24px,2.6vw,38px) clamp(18px,2.2vw,34px);border-left:1px solid var(--line)}
.metric:first-child{padding-left:0;border-left:0}
.metric:last-child{padding-right:0}
.metric-value{display:flex;align-items:baseline;gap:0;color:var(--ink);font:500 var(--fs-metric)/.9 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.metric-num{display:inline-block;text-align:left;font-variant-numeric:tabular-nums}
.metric-approx{margin-right:.12em}
.metric-unit{margin-left:.42em;color:var(--fine);font:500 var(--fs-unit)/1.25 var(--sans);letter-spacing:0}
.metric-label{max-width:24ch;margin-top:20px;color:var(--fine);font-size:var(--fs-label);line-height:1.5}
.field .metrics{border-color:var(--line-dark-strong)}
.field .metric{border-color:var(--line-dark)}
.field .metric-value{color:#FFF8EE}
.field .metric-unit,.field .metric-label{color:var(--on-dark-fine)}

/* ==========================================================================
   9. COMPONENT — TILES  (equal modular blocks on canvas, never white cards)
   Design Master §5.3: transparent or canvas-matched, fine rule boundary.
   ========================================================================== */
.tile{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.34);transition:border-color var(--dur-hover),transform var(--dur-hover)}
.tile:hover{transform:translateY(-3px);border-color:var(--gold)}
.tile .tile-index{color:var(--gold-access);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em}
.tile .h4{margin-top:14px}
.tile p{max-width:36ch;margin:12px 0 0;color:var(--fine);font-size:var(--fs-label);line-height:1.55}
.tile .textlink{margin-top:auto;padding-top:20px}
.field .tile{border-color:var(--line-dark);background:rgba(255,255,255,.045)}
.field .tile:hover{border-color:var(--gold-light)}
.field .tile .tile-index{color:var(--gold-light)}
.field .tile p{color:var(--on-dark-fine)}

/* ==========================================================================
   10. COMPONENT — RULED LIST  (SYSTEM S05, DATA D04, ABOUT A05 fallback)
   ========================================================================== */
.ruled{border-top:1px solid var(--line)}
.ruled > li,.ruled > .ruled-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,48px);align-items:start;padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--line);list-style:none}
.ruled{margin:0;padding:0}
.ruled-index{min-width:2.4em;color:var(--gold-access);font:600 var(--fs-nano)/1.6 var(--sans);letter-spacing:.14em}
.field .ruled,.field .ruled > li,.field .ruled > .ruled-row{border-color:var(--line-dark)}
.field .ruled-index{color:var(--gold-light)}

/* ==========================================================================
   11. COMPONENT — ACCORDION  (FAQ, ABOUT working beliefs, ACCESS AC10)
   Title and status are always visible. Hover never gates meaning.
   ========================================================================== */
.accordion{border-top:1px solid var(--line)}
.accordion-item{border-bottom:1px solid var(--line)}
.accordion-trigger{display:grid;width:100%;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,36px);align-items:center;padding:clamp(20px,2.2vw,28px) 0;border:0;background:transparent;color:var(--ink);cursor:pointer;text-align:left}
.accordion-trigger .ruled-index{align-self:start;padding-top:.35em}
.accordion-trigger .h4{max-width:44ch}
.accordion-mark{position:relative;width:18px;height:18px;flex:none}
.accordion-mark::before,.accordion-mark::after{position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--gold-access);content:""}
.accordion-mark::after{transition:transform .24s;transform:rotate(90deg)}
.accordion-trigger[aria-expanded="true"] .accordion-mark::after{transform:rotate(0)}
.accordion-panel{overflow:hidden;max-height:0;transition:max-height .22s var(--ease)}
.accordion-panel > div{padding:0 0 clamp(22px,2.4vw,32px) 0}
.accordion-panel .body-copy{max-width:64ch}
.accordion-trigger[aria-expanded="true"] + .accordion-panel{max-height:1400px}
.field .accordion,.field .accordion-item{border-color:var(--line-dark)}
.field .accordion-trigger{color:#fff}
.field .accordion-mark::before,.field .accordion-mark::after{background:var(--gold-light)}

/* ==========================================================================
   12. COMPONENT — MEDIA  (split hero media, image bands, quote overlay)
   ========================================================================== */
.media{position:relative;display:grid;margin-block:0;overflow:hidden;border-radius:var(--radius);background:var(--stone)}
.media > img{grid-area:1 / 1}
.media--hero{min-height:clamp(420px,46vw,640px)}
.media--band{aspect-ratio:16/7}
.media--square{aspect-ratio:4/3}
.media img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(.96);transform:scale(1.04);transition:transform 1.05s var(--ease)}
.media.is-visible img,.is-visible .media img{transform:none}
.media--scrim::after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,42,33,0) 44%,rgba(8,26,20,.72) 100%);content:"";pointer-events:none}
.quote-card{position:absolute;z-index:2;right:clamp(18px,2vw,28px);bottom:clamp(18px,2vw,28px);left:clamp(18px,2vw,28px);padding:clamp(22px,2.2vw,32px);border:1px solid rgba(184,152,90,.42);border-radius:var(--radius-sm);background:rgba(248,246,240,.96);backdrop-filter:blur(6px);color:var(--ink)}
.quote-card blockquote{margin:0;font:500 var(--fs-h4)/1.35 var(--display);letter-spacing:-.02em;text-wrap:pretty}
.quote-card cite{display:block;margin-top:14px;color:var(--fine);font:500 12px/1.5 var(--sans);font-style:normal}

/* ==========================================================================
   13. COMPONENT — SEQUENCE  (SYSTEM S03 operating loop, ACCESS pathway,
        INSIGHTS I02 chain). Horizontal on desktop, vertical on mobile.
   ========================================================================== */
.sequence{display:grid;grid-template-columns:repeat(var(--seq-steps,4),1fr);gap:0;align-items:start}
.sequence-step{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:34px;text-align:center}
.sequence-step::before{position:absolute;top:12px;right:50%;left:-50%;height:1px;background:var(--line-strong);content:""}
.sequence-step:first-child::before{display:none}
.sequence-node{position:absolute;top:0;left:50%;width:24px;height:24px;border:1px solid var(--gold);border-radius:50%;background:var(--canvas);transform:translateX(-50%);transition:background var(--dur-hover)}
.sequence-step[data-state="on"] .sequence-node{background:var(--gold)}
.sequence-name{color:var(--ink);font:600 var(--fs-micro)/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.sequence-step p{max-width:22ch;margin:10px 0 0;color:var(--fine);font-size:var(--fs-label);line-height:1.5}
.field .sequence-step::before{background:var(--line-dark)}
.field .sequence-node{background:var(--field);border-color:var(--gold-light)}
.field .sequence-step[data-state="on"] .sequence-node{background:var(--gold-light)}
.field .sequence-name{color:#fff}
.field .sequence-step p{color:var(--on-dark-fine)}

/* ==========================================================================
   14. COMPONENT — AXIS STAGE  (XYZ scroll story: HOME H05, SYSTEM S02)
   Open canvas linework. Never inside a white container.
   ========================================================================== */
.axis-stage{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);padding:clamp(32px,3.6vw,56px) clamp(26px,3vw,48px);border-radius:var(--radius);background:linear-gradient(158deg,#0A2119 0%,var(--forest-deep) 58%,#153B2D 100%);color:var(--on-dark)}
.axis-visual{position:sticky;top:max(calc(var(--header-h) + 24px),calc(50svh - 250px));align-self:start;display:grid;place-items:center;min-height:clamp(300px,30vw,420px);padding-top:clamp(0px,5.5vw,84px)}
.axis-visual svg{display:block;width:min(100%,500px);height:auto}
.axis-rings circle{fill:none;stroke:rgba(212,188,132,.22);stroke-width:1}
.axis-arm path{fill:none;stroke:rgba(255,255,255,.20);stroke-width:2.5;transition:stroke .34s,filter .34s}
.axis-arm circle{fill:#0C241C;stroke:rgba(255,255,255,.3);stroke-width:2;transition:stroke .34s,filter .34s}
.axis-arm text{fill:rgba(255,255,255,.5);font:500 26px var(--display);text-anchor:middle;dominant-baseline:central;transition:fill .34s}
.axis-core{fill:var(--gold)}
.axis-stage[data-active="x"] .axis-x path,.axis-stage[data-active="x"] .axis-x circle{stroke:var(--gold-light);filter:drop-shadow(0 0 8px rgba(212,188,132,.6))}
.axis-stage[data-active="x"] .axis-x text{fill:#FFF8E8}
.axis-stage[data-active="y"] .axis-y path,.axis-stage[data-active="y"] .axis-y circle{stroke:var(--olive);filter:drop-shadow(0 0 8px rgba(142,169,141,.55))}
.axis-stage[data-active="y"] .axis-y text{fill:#E1F3DC}
.axis-stage[data-active="z"] .axis-z path,.axis-stage[data-active="z"] .axis-z circle{stroke:var(--plum);filter:drop-shadow(0 0 8px rgba(180,147,171,.55))}
.axis-stage[data-active="z"] .axis-z text{fill:#F2E1F1}
.axis-stage[data-active="all"] .axis-arm path,.axis-stage[data-active="all"] .axis-arm circle{stroke:var(--gold-light)}
.axis-stage[data-active="all"] .axis-arm text{fill:#fff}
.axis-step{display:flex;min-height:clamp(250px,33vh,340px);flex-direction:column;justify-content:center;padding:clamp(30px,3.4vw,52px) 0;border-bottom:1px solid var(--line-dark)}
.axis-step:last-child{border-bottom:0}
.axis-kicker{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--gold-light);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.15em;text-transform:uppercase}
.axis-kicker::before{flex:none;width:22px;height:1px;background:var(--gold-light);content:""}
.axis-step .h3{max-width:16ch;color:#fff}
.axis-step p{max-width:40ch;margin:18px 0 0;color:var(--on-dark-body);font-size:var(--fs-body);line-height:1.62}

/* ==========================================================================
   15. COMPONENT — LOOP RING  (ACCESS AC01 / AC04 close-loop circle)
   ========================================================================== */
.loop{display:grid;place-items:center;min-height:clamp(320px,34vw,460px)}
.loop svg{display:block;width:min(100%,460px);height:auto}
.loop-track{fill:none;stroke:var(--line-strong);stroke-width:1}
.loop-arc{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.loop-node circle{fill:var(--canvas);stroke:var(--gold);stroke-width:1.5}
.loop-node text{fill:var(--fine);font:600 11px var(--sans);letter-spacing:.1em;text-anchor:middle;dominant-baseline:central}
.loop-core{fill:var(--forest-deep)}
.loop-core-label{fill:#fff;font:600 11px var(--sans);letter-spacing:.1em;text-anchor:middle;dominant-baseline:central}
.field .loop-track{stroke:var(--line-dark)}
.field .loop-node circle{fill:var(--field)}
.field .loop-node text{fill:var(--on-dark-fine)}

/* ==========================================================================
   16. COMPONENT — RAIL  (HOME H06, WHAT IT ANSWERS A02-A05, INSIGHTS)
   Symmetric grid at rest. Slider only when the track overflows.
   ========================================================================== */
.rail-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:end}
.rail-controls{display:flex;align-items:center;gap:10px;margin-top:26px}
.rail-controls[hidden]{display:none}
.rail-controls button{display:grid;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--forest);cursor:pointer;place-items:center;transition:background var(--dur-hover),color var(--dur-hover),border-color var(--dur-hover)}
.rail-controls button:hover:not(:disabled),.rail-controls button:focus-visible{border-color:var(--forest);background:var(--forest);color:#fff}
.rail-controls button:disabled{opacity:.28;cursor:default}
.rail-count{min-width:56px;color:var(--fine);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.12em;text-align:center}
.rail-viewport{overflow:hidden}
.rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--gap-tile) * (var(--rail-visible) - 1))) / var(--rail-visible));gap:var(--gap-tile);transition:transform .55s var(--ease);--rail-visible:3}
.card-media{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:var(--radius);background:var(--forest-deep);color:#fff;aspect-ratio:4/5}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.74) contrast(.95);transform:scale(1.02);transition:transform .55s var(--ease)}
.card-media::after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,24,18,.93) 0%,rgba(6,24,18,.5) 46%,rgba(6,24,18,.06) 100%);content:"";pointer-events:none}
.card-media:hover img,.card-media:focus-visible img{transform:scale(1.06)}
.card-body{position:relative;z-index:1;display:flex;min-height:clamp(220px,20vw,268px);flex-direction:column;justify-content:flex-end;padding:clamp(22px,2.2vw,32px)}
.card-body .tag{color:var(--gold-light);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.card-body .h3{min-height:2.3em;margin:14px 0 10px;color:#fff}
.card-body p{max-width:34ch;min-height:4.5em;margin:0;color:var(--on-dark-fine);font-size:var(--fs-label);line-height:1.5}
.card-body .textlink{margin-top:20px;color:#fff}

/* ==========================================================================
   17. COMPONENT — REPORT GALLERY  (INSIGHTS I03-I06)
   Published and forthcoming are ONE family. Status is tone, never a new
   component and never pale blue.
   ========================================================================== */
.reports{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-tile)}
.report{position:relative;display:flex;min-height:clamp(300px,30vw,420px);flex-direction:column;justify-content:space-between;padding:clamp(26px,2.8vw,40px);border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.34);transition:border-color var(--dur-hover),transform var(--dur-hover)}
.report[data-state="published"]{background:linear-gradient(158deg,var(--field-2),var(--field) 70%);border-color:rgba(212,188,132,.34);color:var(--on-dark)}
.report[data-state="published"] .h3{color:#fff}
.report[data-state="published"] p{color:var(--on-dark-body)}
.report[data-state="published"]:hover{transform:translateY(-4px);border-color:var(--gold-light)}
.report[data-state="forthcoming"]{background:transparent;border-style:dashed;border-color:var(--line-strong)}
.report[data-state="forthcoming"] .report-number{opacity:.42}
.report-number{color:var(--gold-access);font:500 var(--fs-metric)/.85 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.report[data-state="published"] .report-number{color:var(--gold-light)}
.report .h3{margin-top:18px;max-width:16ch}
.report p{max-width:38ch;margin:14px 0 0;color:var(--fine);font-size:var(--fs-label);line-height:1.55}
.report-status{margin-top:auto;padding-top:24px;color:var(--fine);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.report[data-state="published"] .report-status{color:var(--gold-light)}

/* ==========================================================================
   18. COMPONENT — FORM  (ACCESS AC09 early-access registration)
   ========================================================================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-tile) var(--gap-col)}
.field-row{display:flex;flex-direction:column;gap:8px}
.field-row--full{grid-column:1 / -1}
.field-row label{color:var(--fine);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.field-row input,.field-row select,.field-row textarea{min-height:52px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(255,255,255,.6);color:var(--ink);font-size:var(--fs-body)}
.field-row textarea{min-height:120px;resize:vertical}
.field-row input:focus,.field-row select:focus,.field-row textarea:focus{border-color:var(--gold-access);outline:none}
.consent{display:grid;grid-column:1 / -1;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.consent input{width:20px;height:20px;min-height:0;margin-top:3px}
.consent p{margin:0;color:var(--fine);font-size:var(--fs-fine);line-height:1.6}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .rail-track{--rail-visible:2}
  .grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  :root{--header-h:72px}
  .site-header{grid-template-columns:1fr auto}
  .site-navigation{position:fixed;top:var(--header-h);right:16px;left:16px;display:none;padding:12px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 18px 44px rgba(15,42,33,.13)}
  .site-navigation.is-open{display:grid}
  .site-navigation a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.08em}
  .site-navigation a:last-child{border-bottom:0}
  .site-navigation a::after{display:none}
  .header-cta{display:none}
  .menu-toggle{display:block}
  .split,.rail-head,.axis-stage,.reports,.form-grid{grid-template-columns:1fr}
  .split .h1{max-width:17ch}
  .axis-visual{position:static;min-height:0;padding-top:0;margin-bottom:8px}
  .axis-visual svg{width:min(100%,330px)}
  .axis-step{min-height:0;padding:34px 0}
  .sequence{grid-template-columns:1fr;gap:0}
  .sequence-step{align-items:start;padding:0 0 26px 34px;text-align:left}
  .sequence-step::before{top:12px;right:auto;bottom:-12px;left:11px;width:1px;height:auto}
  .sequence-step:first-child::before{display:block;top:24px}
  .sequence-node{top:12px;left:0;transform:none}
  .sequence-step p{max-width:44ch}
}
@media (max-width:760px){
  :root{--header-h:68px;--sp-section:clamp(64px,12vw,88px)}
  .brand{gap:9px;font-size:15px;letter-spacing:.18em}
  .brand img{width:29px}
  .metrics,.grid-3,.grid-4,.grid-2x2{display:block}
  .metric{min-height:0;padding:22px 0;border-bottom:1px solid var(--line);border-left:0}
  .metric:last-child{border-bottom:0}
  .field .metric{border-color:var(--line-dark)}
  .grid-3 > * + *,.grid-4 > * + *,.grid-2x2 > * + *{margin-top:var(--gap-tile)}
  .rail-track{--rail-visible:1}
  .card-body .h3{min-height:0}
  .card-body p{min-height:0}
  .media--hero{min-height:clamp(360px,52vw,520px)}
  .axis-stage{padding:26px 20px}
  .accordion-trigger{gap:14px}
  .quote-card{position:static;margin-top:14px;border-radius:var(--radius);background:var(--forest-deep);border:0;backdrop-filter:none;color:#fff}
  .quote-card cite{color:var(--on-dark-fine)}
  .media--scrim::after{display:none}
}

/* ==========================================================================
   20. REDUCED MOTION (Motion Master §2 contract — mandatory)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .media img,.card-media img{transform:none !important;transition:none !important}
  .rail-track{transition:none !important}
  .axis-arm path,.axis-arm circle{filter:none !important;animation:none !important}
  .accordion-panel{transition:none !important}
}


/* ==========================================================================
   21. ADDITIONS FOR THE SYSTEM  (added 30 Aug 2026)
   Modifiers on existing components. No new tokens, no new colours.
   ========================================================================== */

/* 21.1 Dense metric band. For 4-5 figure rows (S05 mini-CEX, S06 evidence). */
.metrics--dense .metric{min-height:clamp(132px,12vw,168px);padding:clamp(20px,2vw,28px) clamp(14px,1.6vw,24px)}
.metrics--dense .metric-value{font-size:clamp(31px,3.1vw,52px)}
.metrics--dense .metric-unit{font-size:var(--fs-fine)}
.metrics--dense .metric-label{max-width:20ch;margin-top:14px;font-size:var(--fs-fine)}

/* 21.2 Hero signature: vertical mask reveal on the photograph. */
.media--mask img{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease),transform 1.15s var(--ease)}
.media--mask.is-visible img,.is-visible .media--mask img{clip-path:inset(0 0 0 0);transform:none}

/* 21.3 Hero axis origin: lines draw outward from one observed-work point. */
.origin{display:grid;place-items:center;min-height:clamp(210px,20vw,290px);margin-top:var(--sp-block)}
.origin svg{display:block;width:min(100%,520px);height:auto}
.origin-arm{stroke:var(--gold);stroke-width:1.5;fill:none;stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);transition:stroke-dashoffset .9s var(--ease)}
:is(.origin,.flow).is-visible .origin-arm{stroke-dashoffset:0}
:is(.origin,.flow).is-visible .origin-arm:nth-of-type(2){transition-delay:.14s}
:is(.origin,.flow).is-visible .origin-arm:nth-of-type(3){transition-delay:.28s}
.origin-node{fill:var(--canvas);stroke:var(--gold);stroke-width:1.5;opacity:0;transition:opacity .4s var(--ease) .7s}
:is(.origin,.flow).is-visible .origin-node{opacity:1}
.origin-letter{fill:var(--forest);font:500 26px var(--display);text-anchor:middle;dominant-baseline:central;opacity:0;transition:opacity .4s var(--ease) .8s}
:is(.origin,.flow).is-visible .origin-letter{opacity:1}
.origin-tag{fill:var(--fine);font:600 10px var(--sans);letter-spacing:.14em;text-anchor:middle;opacity:0;transition:opacity .4s var(--ease) .92s}
:is(.origin,.flow).is-visible .origin-tag{opacity:1}
.origin-core{fill:var(--gold)}
.origin-core-label{fill:var(--fine);font:600 10px var(--sans);letter-spacing:.14em;text-anchor:middle}

/* 21.4 Operating loop: six nodes on a ring, drawn once, then still. */
.loop-arc--draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1.15s var(--ease)}
.loop.is-visible .loop-arc--draw{stroke-dashoffset:0}
.loop-node{opacity:0;transition:opacity .34s var(--ease)}
.loop.is-visible .loop-node{opacity:1}
.loop.is-visible .loop-node:nth-of-type(1){transition-delay:.34s}
.loop.is-visible .loop-node:nth-of-type(2){transition-delay:.46s}
.loop.is-visible .loop-node:nth-of-type(3){transition-delay:.58s}
.loop.is-visible .loop-node:nth-of-type(4){transition-delay:.70s}
.loop.is-visible .loop-node:nth-of-type(5){transition-delay:.82s}
.loop.is-visible .loop-node:nth-of-type(6){transition-delay:.94s}
.loop-node circle{transition:fill var(--dur-hover),stroke var(--dur-hover),r var(--dur-hover)}
.loop-node:hover circle,.loop-node:focus-visible circle{fill:var(--gold);stroke:var(--gold)}
.loop-node:hover text,.loop-node:focus-visible text{fill:var(--forest)}
.loop-node text{transition:fill var(--dur-hover)}

/* 21.5 Analysis tile: management question always visible, boundary on reveal. */
.tile--analysis{gap:0}
.tile--analysis .tile-q{margin:14px 0 0;color:var(--forest);font:500 var(--fs-h4)/1.28 var(--display);letter-spacing:-.02em;max-width:26ch}
.tile--analysis .tile-boundary{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--fine);font-size:var(--fs-fine);line-height:1.6}
.tile--analysis .tile-boundary b{color:var(--gold-access);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:8px}
.field .tile--analysis .tile-q{color:#fff}
.field .tile--analysis .tile-boundary{border-color:var(--line-dark);color:var(--on-dark-fine)}
.field .tile--analysis .tile-boundary b{color:var(--gold-light)}

/* 21.6 Precedent panel: rule draws in, formula sits on the canvas. */
.precedent{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap-col);align-items:start;padding:clamp(30px,3.2vw,46px) 0;border-bottom:1px solid var(--line)}
.precedent-head{grid-column:1}
.precedent-body{grid-column:2}
.precedent-wide{grid-column:1 / -1;margin-top:var(--sp-block)}
.precedent:last-of-type{border-bottom:0}
.precedent-index{display:block;margin-bottom:14px;color:var(--gold-access);font:600 var(--fs-nano)/1.6 var(--sans);letter-spacing:.14em}
.formula{margin:0 0 20px;padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);border-left:2px solid var(--gold);color:var(--forest);font:500 var(--fs-h4)/1.4 var(--display);letter-spacing:-.02em}
.field .precedent{border-color:var(--line-dark)}
.field .precedent-index{color:var(--gold-light)}
.field .formula{color:#FFF6E6;border-color:var(--gold-light)}

/* 21.7 Numbered sequence list (S02A tailoring). */
.steps{counter-reset:step;margin:0;padding:0;border-top:1px solid var(--line);list-style:none}
.steps li{position:relative;counter-increment:step;padding:clamp(16px,1.8vw,22px) 0 clamp(16px,1.8vw,22px) 52px;border-bottom:1px solid var(--line);color:var(--ink);font-size:var(--fs-body);line-height:1.6;transition:padding-left var(--dur-hover),color var(--dur-hover)}
.steps li::before{position:absolute;top:calc(clamp(16px,1.8vw,22px) + .28em);left:0;color:var(--gold-access);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;content:counter(step,decimal-leading-zero)}
.steps li:hover{padding-left:60px;color:var(--forest)}
.field .steps,.field .steps li{border-color:var(--line-dark)}
.field .steps li{color:var(--on-dark-body)}
.field .steps li::before{color:var(--gold-light)}

/* 21.8 Boundary note: a limitation that must stay visible with its claim. */
.boundary-note{margin:var(--sp-block) 0 0;padding:clamp(22px,2.4vw,32px);border:1px solid rgba(184,152,90,.4);border-radius:var(--radius);background:rgba(255,255,255,.34)}
.boundary-note b{display:block;margin-bottom:10px;color:var(--gold-access);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.boundary-note p{max-width:70ch;margin:0;color:var(--ink);font-size:var(--fs-body);line-height:1.66}
.field .boundary-note{border-color:rgba(212,188,132,.42);background:rgba(255,255,255,.05)}
.field .boundary-note b{color:var(--gold-light)}
.field .boundary-note p{color:var(--on-dark-body)}

/* 21.9 Anchor link used by the hero CTA. */
.jump{display:inline-flex;align-items:center;gap:.6em;margin-top:26px;color:var(--gold-access);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.jump i{display:block;font-style:normal;transition:transform var(--dur-hover)}
.jump:hover i{transform:translateY(3px)}

@media (max-width:1080px){
  .metrics--dense{display:grid;grid-template-columns:repeat(2,1fr)}
  .precedent{grid-template-columns:1fr}
  .precedent-head,.precedent-body,.precedent-wide{grid-column:1}
  .precedent-body{margin-top:18px}
  .precedent-wide{margin-top:var(--sp-block)}
}
@media (max-width:760px){
  .metrics--dense{display:block}
  .origin svg{width:min(100%,330px)}
  .steps li:hover{padding-left:52px}
}

/* 21.10 Centred stack: lead and body must centre with the heading. */
.stack-center .topic,.stack-center .body-copy,.stack-center .fine{margin-inline:auto}
.stack-center .topic{text-align:center;text-wrap:balance}

/* 21.11 Flow sequence: sentence-case names for long step labels.
   Design Master §4.4 forbids forcing uppercase on sentences. */
.sequence--flow .sequence-name{color:var(--ink);font:500 var(--fs-body)/1.34 var(--display);letter-spacing:-.02em;text-transform:none}
.field .sequence--flow .sequence-name{color:#fff}
.sequence-step{transition:transform var(--dur-hover)}
.sequence-step:hover{transform:translateY(-3px)}
.sequence-step:hover .sequence-node{background:var(--gold)}
.field .sequence-step:hover .sequence-node{background:var(--gold-light)}
.sequence-return{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(24px,2.6vw,36px);padding-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--line);color:var(--fine);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.sequence-return i{display:block;width:44px;height:1px;background:var(--gold);font-style:normal}
.field .sequence-return{border-color:var(--line-dark);color:var(--on-dark-fine)}
.field .sequence-return i{background:var(--gold-light)}

/* 21.12 Origin diagram tags sit beside their node, not under it. */
.origin-tag{text-anchor:start;dominant-baseline:central}

/* ==========================================================================
   22. ADDITIONS FOR WHAT IT ANSWERS  (added 30 Aug 2026)
   Modifiers only. No new tokens, no new colours.
   ========================================================================== */

/* 22.1 Ruled list without an index column. */
.ruled--plain > li,.ruled--plain > .ruled-row{grid-template-columns:1fr}
.ruled-term{display:block;color:var(--forest);font:500 var(--fs-h4)/1.24 var(--display);letter-spacing:-.02em}
.ruled-def{max-width:52ch;margin:8px 0 0;color:var(--fine);font-size:var(--fs-label);line-height:1.55}
.field .ruled-term{color:#fff}
.field .ruled-def{color:var(--on-dark-fine)}
.ruled > li{transition:padding-left var(--dur-hover)}
.ruled--plain > li:hover{padding-left:10px}

/* 22.2 Hero transformation: evidence -> three readings -> four questions. */
.flow{display:grid;place-items:center;min-height:clamp(300px,32vw,460px)}
.flow svg{display:block;width:min(100%,540px);height:auto}
.origin-tick{stroke:var(--gold);stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .3s var(--ease)}
.flow.is-visible .origin-tick{opacity:.9}
.flow.is-visible .origin-tick:nth-of-type(1){transition-delay:.05s}
.flow.is-visible .origin-tick:nth-of-type(2){transition-delay:.12s}
.flow.is-visible .origin-tick:nth-of-type(3){transition-delay:.19s}
.flow.is-visible .origin-tick:nth-of-type(4){transition-delay:.26s}
.flow.is-visible .origin-tick:nth-of-type(5){transition-delay:.33s}
.flow .origin-arm{transition-delay:.4s}
.flow.is-visible .origin-arm:nth-of-type(2){transition-delay:.5s}
.flow.is-visible .origin-arm:nth-of-type(3){transition-delay:.6s}
.flow.is-visible .origin-arm:nth-of-type(4){transition-delay:.72s}
.flow.is-visible .origin-arm:nth-of-type(5){transition-delay:.8s}
.flow.is-visible .origin-arm:nth-of-type(6){transition-delay:.88s}
.flow.is-visible .origin-arm:nth-of-type(7){transition-delay:.96s}
.flow .origin-node{transition-delay:1.05s}
.flow .origin-letter,.flow .origin-tag{transition-delay:1.15s}
.flow-stage{fill:var(--fine);font:600 9px var(--sans);letter-spacing:.16em;text-anchor:middle}
.flow-qnode{fill:none;stroke:var(--forest-soft);stroke-width:1.5;opacity:0;transition:opacity .4s var(--ease) 1.15s}
.flow.is-visible .flow-qnode{opacity:1}
.flow-qnum{fill:var(--forest);font:600 12px var(--sans);letter-spacing:.06em;text-anchor:middle;dominant-baseline:central;opacity:0;transition:opacity .4s var(--ease) 1.25s}
.flow.is-visible .flow-qnum{opacity:1}

/* 22.3 Question index card: a directional marker replaces rail arrows. */
.card-media .card-body .h3{min-height:2.5em}
.qcard .tag{display:flex;align-items:center;gap:10px}
.qcard .tag::before{width:20px;height:1px;background:var(--gold-light);content:"";flex:none;transition:width var(--dur-hover)}
.qcard:hover .tag::before{width:34px}

@media (max-width:760px){
  .flow svg{width:min(100%,340px)}
}

/* ==========================================================================
   23. ADDITIONS FOR ACCESS & CERTIFICATION  (added 30 Aug 2026)
   ========================================================================== */

/* 23.1 Ring containers share the draw-in state machine. */
:is(.origin,.flow,.pathring,.loop).is-visible .origin-arm{stroke-dashoffset:0}
:is(.origin,.flow,.pathring,.loop).is-visible .origin-node{opacity:1}
:is(.origin,.flow,.pathring,.loop).is-visible .origin-letter{opacity:1}
:is(.origin,.flow,.pathring,.loop).is-visible .origin-tag{opacity:1}
.pathring{display:grid;place-items:center;min-height:clamp(320px,34vw,470px)}
.pathring svg{display:block;width:min(100%,470px);height:auto}
.pathring .origin-tag{text-anchor:middle}
.pathring .origin-arm{stroke-width:2}

/* 23.2 AC01 pathway arc: open, not closed. The three stages progress and stop;
   only AC04 shows a closed loop. (Motion Master §4.3) */
.pathring-arc{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  transition:stroke-dashoffset 1.3s var(--ease)}
.pathring.is-visible .pathring-arc{stroke-dashoffset:0}
.pathring-node{fill:var(--canvas);stroke:var(--gold);stroke-width:1.5;opacity:0;transition:opacity .4s var(--ease)}
.pathring.is-visible .pathring-node{opacity:1}
.pathring.is-visible .pathring-node:nth-of-type(1){transition-delay:.5s}
.pathring.is-visible .pathring-node:nth-of-type(2){transition-delay:.85s}
.pathring.is-visible .pathring-node:nth-of-type(3){transition-delay:1.2s}
.pathring-node--lock{stroke-width:3;filter:drop-shadow(0 0 10px rgba(184,152,90,.55))}
.pathring-letter{fill:var(--forest);font:500 24px var(--display);text-anchor:middle;dominant-baseline:central;opacity:0;transition:opacity .4s var(--ease) 1.3s}
.pathring.is-visible .pathring-letter{opacity:1}
.pathring-tag{fill:var(--fine);font:600 10px var(--sans);letter-spacing:.14em;text-anchor:middle;opacity:0;transition:opacity .4s var(--ease) 1.4s}
.pathring.is-visible .pathring-tag{opacity:1}

/* 23.3 AC04 calibration loop: the only closed ring on the site. */
.loop{min-height:clamp(340px,36vw,500px)}
.loop svg{width:min(100%,500px)}
.loop-dot{fill:var(--gold);opacity:0;transition:opacity .34s var(--ease)}
.loop.is-visible .loop-dot{opacity:1}
.loop.is-visible .loop-dot:nth-of-type(1){transition-delay:1.2s}
.loop.is-visible .loop-dot:nth-of-type(2){transition-delay:1.3s}
.loop.is-visible .loop-dot:nth-of-type(3){transition-delay:1.4s}
.loop.is-visible .loop-dot:nth-of-type(4){transition-delay:1.5s}
.loop.is-visible .loop-dot:nth-of-type(5){transition-delay:1.6s}
.loop.is-visible .loop-dot:nth-of-type(6){transition-delay:1.7s}
.loop-word{fill:var(--fine);font:600 10px var(--sans);letter-spacing:.14em;text-anchor:middle;dominant-baseline:central;opacity:0;transition:opacity .34s var(--ease) 1.8s}
.loop.is-visible .loop-word{opacity:1}
.field .loop-word{fill:var(--on-dark-fine)}
.field .loop-track{stroke:rgba(255,255,255,.22)}

/* 23.4 Glowing frame. Design Master §3: reserved for ACCESS and focus states. */
.glow{position:relative;border-color:rgba(184,152,90,.55);
  box-shadow:0 0 0 1px rgba(184,152,90,.16),0 0 34px -8px rgba(184,152,90,.42)}
.glow:hover{border-color:var(--gold);box-shadow:0 0 0 1px rgba(184,152,90,.3),0 0 44px -6px rgba(184,152,90,.55)}
.field .glow{background:rgba(212,188,132,.07);border-color:rgba(212,188,132,.6);
  box-shadow:0 0 0 1px rgba(212,188,132,.18),0 0 40px -6px rgba(212,188,132,.34)}
.field .glow:hover{box-shadow:0 0 0 1px rgba(212,188,132,.34),0 0 52px -4px rgba(212,188,132,.46)}

/* 23.5 Pathway module: format and outcomes visible; syllabus expands. */
.stage{display:flex;flex-direction:column;padding:clamp(26px,2.6vw,38px);
  border:1px solid var(--line-dark);border-radius:var(--radius);background:rgba(255,255,255,.045);
  transition:border-color var(--dur-hover),transform var(--dur-hover)}
.stage:hover{transform:translateY(-3px)}
.stage-code{color:var(--gold-light);font:500 clamp(28px,2.8vw,42px)/1 var(--display);letter-spacing:-.03em}
.stage-format{margin:12px 0 0;color:var(--gold-light);font:600 var(--fs-nano)/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.stage .h4{margin-top:16px;color:#fff}
.stage-role{margin:8px 0 0;color:var(--on-dark-fine);font-size:var(--fs-label);line-height:1.5}
.stage p.stage-topic{margin:18px 0 0;color:#F5EFE2;font:500 var(--fs-body)/1.5 var(--display)}
.stage-outcome{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-dark)}
.stage-outcome b{display:block;margin-bottom:8px;color:var(--gold-light);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.stage-outcome ul{margin:0;padding-left:1.1em;color:var(--on-dark-body);font-size:var(--fs-label);line-height:1.6}
.stage-outcome p{margin:0;color:var(--on-dark-body);font-size:var(--fs-label);line-height:1.6}
.stage .accordion{margin-top:20px;border-top-color:var(--line-dark)}
.stage .accordion-item{border-bottom-color:var(--line-dark)}
.stage .accordion-trigger{grid-template-columns:1fr auto;padding:16px 0;color:#fff}
.stage .accordion-trigger span{font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--gold-light)}
.stage .accordion-panel ul{margin:0;padding:0 0 20px 1.1em;color:var(--on-dark-body);font-size:var(--fs-label);line-height:1.62}
.stage .textlink{margin-top:auto;padding-top:24px}
.badge{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 12px;
  border:1px solid rgba(212,188,132,.55);border-radius:999px;
  color:var(--gold-light);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease) 1.5s,transform .5s var(--ease) 1.5s}
.is-visible .badge{opacity:1;transform:none}

/* 23.6 Status panel: three equal states, quiet border change on hover. */
.status{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);
  border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.34);
  transition:border-color var(--dur-hover),transform var(--dur-hover)}
.status:hover{transform:translateY(-3px);border-color:var(--gold)}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--gold-access)}
.status[data-state="due"] .status-dot{background:var(--forest-soft)}
.status[data-state="inactive"] .status-dot{background:var(--muted)}
.status-head{display:flex;align-items:center;gap:10px;color:var(--fine);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.status .h4{margin-top:14px}
.status p{max-width:34ch;margin:12px 0 0;color:var(--fine);font-size:var(--fs-label);line-height:1.55}

/* 23.7 AC09 gate. Add class="is-gated" to the section if PICS is not yet live. */
.form-fallback{display:none}
.is-gated .form-grid{display:none}
.is-gated .form-fallback{display:block;padding:clamp(24px,2.6vw,36px);
  border:1px solid rgba(184,152,90,.4);border-radius:var(--radius);background:rgba(255,255,255,.34)}

@media (max-width:1080px){
  .pathring svg,.loop svg{width:min(100%,380px)}
}
@media (max-width:760px){
  .pathring svg,.loop svg{width:min(100%,320px)}
  .stage{padding:22px}
}

/* 23.8 Status panels on the dark field. Without this the light-surface colours
   carry over and the body copy renders at 1.85:1 — unreadable. */
.field .status{border-color:var(--line-dark);background:rgba(255,255,255,.045)}
.field .status:hover{border-color:var(--gold-light)}
.field .status-head{color:var(--on-dark-fine)}
.field .status .h4{color:#fff}
.field .status p{color:var(--on-dark-body)}
.field .status-dot{background:var(--gold-light)}
.field .status[data-state="due"] .status-dot{background:var(--olive)}
.field .status[data-state="inactive"] .status-dot{background:var(--on-dark-fine)}

/* 23.9 Word rail. When any cell in a metric band carries a word rather than a
   numeral, every cell drops to the same display size so the row stays
   optically equal. A 74px numeral beside a 17px phrase is not a band. */
.metrics--word .metric-value{font-size:var(--fs-h3);letter-spacing:-.03em}
.metrics--word .metric-unit{margin-left:.34em;font-size:var(--fs-label)}
.metrics--word .metric{min-height:clamp(150px,13vw,190px)}

/* ==========================================================================
   24. ADDITIONS FOR INSIGHTS  (added 30 Aug 2026)
   Card language follows the supplied SaleUnion case-study reference:
   image, status pill, and a translucent bar carrying title and read action.
   Geometry is identical across all four reports; only the state differs.
   ========================================================================== */

.reports{grid-template-columns:1fr 1fr;gap:var(--gap-tile)}
.report-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;border-radius:var(--radius);aspect-ratio:5/4;
  transition:transform var(--dur-hover),border-color var(--dur-hover),box-shadow var(--dur-hover)}

/* --- published: photograph, dark bar, read action --- */
.report-card[data-state="published"]{background:var(--forest-deep);color:#fff;
  border:1px solid rgba(212,188,132,.3)}
.report-card[data-state="published"] > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.74) contrast(.95);transform:scale(1.03);
  transition:transform .6s var(--ease)}
.report-card[data-state="published"]::after{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,24,18,.86) 0%,rgba(6,24,18,.28) 52%,rgba(6,24,18,0) 100%);
  content:"";pointer-events:none}
.report-card[data-state="published"]:hover{transform:translateY(-4px);border-color:var(--gold-light)}
.report-card[data-state="published"]:hover > img{transform:scale(1.07)}

/* --- forthcoming: same footprint, dashed rule, no read action --- */
.report-card[data-state="forthcoming"]{background:transparent;color:var(--ink);
  border:1px dashed var(--line-strong)}
.report-card[data-state="forthcoming"]:hover{transform:translateY(-4px);border-color:var(--gold)}
.report-ghost{position:absolute;top:clamp(18px,2vw,28px);right:clamp(20px,2.4vw,34px);
  color:var(--gold-access);font:500 clamp(48px,5.2vw,88px)/.85 var(--display);
  letter-spacing:-.05em;opacity:.24;font-variant-numeric:tabular-nums}

/* --- shared furniture --- */
.report-tag{position:absolute;z-index:2;top:clamp(16px,1.8vw,24px);left:clamp(18px,2vw,28px);
  padding:7px 14px;border:1px solid rgba(212,188,132,.55);border-radius:999px;
  background:rgba(6,24,18,.5);backdrop-filter:blur(6px);
  color:var(--gold-light);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.report-card[data-state="forthcoming"] .report-tag{background:rgba(255,255,255,.5);
  border-color:rgba(184,152,90,.5);color:var(--gold-access)}
.report-bar{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;
  gap:18px clamp(16px,2vw,28px);align-items:end;
  margin:clamp(14px,1.4vw,20px);padding:clamp(20px,2.2vw,30px);
  border-radius:calc(var(--radius) - 8px);
  background:rgba(9,28,21,.62);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.13)}
.report-card[data-state="forthcoming"] .report-bar{background:rgba(255,255,255,.5);
  border-color:var(--line);backdrop-filter:none}
.report-bar .h4{color:#fff}
.report-card[data-state="forthcoming"] .report-bar .h4{color:var(--ink)}
.report-sub{display:block;margin:8px 0 0;color:var(--gold-light);font-size:var(--fs-fine);line-height:1.5}
.report-card[data-state="forthcoming"] .report-sub{color:var(--gold-access)}
.report-line{display:block;max-width:46ch;margin:12px 0 0;color:var(--on-dark-fine);font-size:var(--fs-label);line-height:1.55}
.report-card[data-state="forthcoming"] .report-line{color:var(--fine)}
.report-view{display:inline-flex;align-items:center;gap:.6em;flex:none;
  min-height:42px;padding:0 18px;border:1px solid rgba(212,188,132,.6);border-radius:999px;
  color:#fff;font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  transition:background var(--dur-hover),color var(--dur-hover),border-color var(--dur-hover)}
.report-card:hover .report-view{background:var(--gold-light);border-color:var(--gold-light);color:var(--forest-deep)}
.report-status{flex:none;color:var(--fine);font:600 var(--fs-nano)/1.4 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;text-align:right}

/* 24.2 Collapsible source block. For the report pages: sources stay one click
   away so they never interrupt the reading, but they are never hidden behind a
   hover state or a modal. Print and reduced-motion open it by default. */
.sources{margin:var(--sp-block) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sources > summary{display:flex;align-items:center;gap:12px;padding:20px 0;cursor:pointer;
  color:var(--gold-access);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  list-style:none}
.sources > summary::-webkit-details-marker{display:none}
.sources > summary::after{width:14px;height:1px;background:currentColor;content:"";transition:transform .24s}
.sources[open] > summary::after{transform:rotate(180deg)}
.sources > summary::before{width:26px;height:1px;background:currentColor;content:"";flex:none}
.sources > summary:hover{color:var(--forest)}
.sources-body{padding:0 0 26px}
.sources-body ol{margin:0;padding-left:1.3em}
.sources-body li{max-width:74ch;margin-bottom:14px;color:var(--fine);font-size:var(--fs-fine);line-height:1.66}
.field .sources,.field .sources-body li{border-color:var(--line-dark);color:var(--on-dark-fine)}
.field .sources > summary{color:var(--gold-light)}
@media print{.sources{border:0}.sources > summary{display:none}.sources-body{padding:0}}

/* Two report cards need ~600px each to hold the bar without crowding the tag.
   Below that the collection goes to one column rather than compressing. */
@media (max-width:1180px){
  .reports{grid-template-columns:1fr}
  .report-card{aspect-ratio:16/9;min-height:clamp(400px,46vw,520px)}
  .report-bar{grid-template-columns:1fr;align-items:start}
  .report-view,.report-status{justify-self:start;text-align:left}
}
@media (max-width:760px){
  .report-card{aspect-ratio:auto;min-height:clamp(420px,72vw,520px)}
  .report-ghost{font-size:clamp(40px,12vw,64px)}
}

/* ==========================================================================
   25. LONG-FORM REPORT READING  (added 30 Aug 2026)
   The reading surface for an Insight report. Built from the same tokens as
   every other page: no new colour, no new type size. The signature elements
   are the gold progress rule, the part numeral and the forest masthead — a
   screenshot of this page should be recognisable as AERTHEIX and nothing else.
   ========================================================================== */

/* 25.1 Reading progress. A single gold hairline under the header. */
.progress{position:fixed;z-index:1001;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .1s linear}

/* 25.2 Masthead. */
.masthead{position:relative;overflow:hidden;padding:calc(var(--header-h) + clamp(56px,6vw,92px)) var(--gutter) clamp(56px,6vw,86px);
  background:linear-gradient(158deg,#08201A 0%,var(--forest-deep) 54%,#133A2C 100%);color:var(--on-dark)}
.masthead::before{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(212,188,132,.05) 0 1px,transparent 1px calc(100% / 8));content:"";pointer-events:none}
.masthead > .shell{position:relative;z-index:1}
.masthead-series{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 28px;
  color:var(--gold-light);font:600 var(--fs-micro)/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.masthead-series span::before{margin-right:16px;content:"·";opacity:.6}
.masthead-series span:first-child::before{display:none;margin:0}
.masthead h1{max-width:17ch;color:#fff;font:500 var(--fs-h1)/1.02 var(--display);letter-spacing:-.042em}
.masthead-sub{max-width:44ch;margin:22px 0 0;color:var(--gold-light);font:400 var(--fs-lead)/1.4 var(--display)}
.masthead-stand{max-width:62ch;margin:30px 0 0;color:var(--on-dark-body);font-size:var(--fs-body);line-height:1.66}
.masthead-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin:34px 0 0;padding-top:24px;
  border-top:1px solid var(--line-dark);color:var(--on-dark-fine);font:600 var(--fs-nano)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* 25.3 Reading layout: index rail left, article column right. */
.reader{display:grid;grid-template-columns:minmax(180px,230px) minmax(0,1fr);gap:clamp(36px,5vw,84px);
  align-items:start;padding:clamp(56px,6vw,90px) var(--gutter) var(--sp-section)}
.reader-inner{width:min(100%,var(--max));margin-inline:auto;display:contents}
.reader-index{position:sticky;top:calc(var(--header-h) + 28px);align-self:start}
.reader-index p{margin:0 0 18px;color:var(--fine);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.reader-index ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
.reader-index a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:1px solid transparent;
  color:var(--fine);font-size:var(--fs-fine);line-height:1.4;transition:color var(--dur-hover),border-color var(--dur-hover)}
.reader-index a:hover{color:var(--forest)}
.reader-index a[aria-current="true"]{border-left-color:var(--gold);color:var(--forest);font-weight:600}

.article{max-width:70ch}
.article > * + *,.part > * + *{margin-top:1.05em}
.part > .part-num + h2{margin-top:16px}
.article p{margin:0;color:var(--ink);font-size:var(--fs-body);line-height:1.78;text-wrap:pretty}
.article p strong{font-weight:600}
.article em{font-style:italic}
.article a{color:var(--gold-access);text-decoration:underline;text-underline-offset:3px}

/* 25.4 Part marker. The page's strongest structural signal. */
.part{margin-top:clamp(56px,6vw,90px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-strong);scroll-margin-top:calc(var(--header-h) + 24px)}
.part-num{display:block;color:var(--gold-access);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.part h2{max-width:20ch;margin-top:16px;color:var(--ink);font:500 var(--fs-h2)/1.06 var(--display);letter-spacing:-.032em}
.article h3{max-width:26ch;margin-top:2em;color:var(--forest);font:500 var(--fs-h3)/1.18 var(--display);letter-spacing:-.028em}
.article .standfirst{max-width:34ch;margin-top:1.1em;color:var(--forest);font:500 var(--fs-lead)/1.4 var(--display)}

/* 25.5 Callout: a single-cell table in the source becomes a bordered aside. */
.callout{margin-top:2em;padding:clamp(22px,2.4vw,32px);border-left:2px solid var(--gold);
  background:rgba(255,255,255,.4)}
.callout p{color:var(--ink);font-size:var(--fs-body);line-height:1.7}
.callout p + p{margin-top:.9em}

/* 25.6 Figure band: the three-number summary at the head of a report. */
.figure-band{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.2em;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.figure-cell{padding:clamp(22px,2.2vw,30px) clamp(16px,1.8vw,26px);border-left:1px solid var(--line)}
.figure-cell:first-child{padding-left:0;border-left:0}
.figure-cell:last-child{padding-right:0}
.figure-num{display:block;color:var(--ink);font:500 var(--fs-h2)/.95 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.figure-text{display:block;margin-top:14px;color:var(--fine);font-size:var(--fs-label);line-height:1.5}
.figure-src{display:block;margin-top:10px;color:var(--muted);font-size:var(--fs-fine);font-style:italic;line-height:1.45}

/* 25.7 Data table. */
.data-table{width:100%;margin-top:2em;border-collapse:collapse;font-size:var(--fs-label)}
.data-table th{padding:14px 16px 14px 0;border-bottom:1px solid var(--line-strong);
  color:var(--fine);font:600 var(--fs-nano)/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;text-align:left;vertical-align:bottom}
.data-table td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);color:var(--ink);line-height:1.55;vertical-align:top}
.data-table tr:last-child td{border-bottom:0}
.data-table td:last-child,.data-table th:last-child{padding-right:0}
.data-table strong{color:var(--forest);font-weight:600}

/* 25.8 Report foot: sources collapsed, series list, return. */
.report-foot{margin-top:clamp(56px,6vw,90px)}
.report-foot .sources{margin-top:0}
.series-list{margin-top:var(--sp-block);padding-top:var(--sp-block);border-top:1px solid var(--line)}
.series-list p{margin:0 0 18px;color:var(--fine);font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.series-list ol{margin:0;padding:0;list-style:none}
.series-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);
  color:var(--ink);font-size:var(--fs-label);line-height:1.5}
.series-list li:last-child{border-bottom:0}
.series-list li[data-state="forthcoming"]{color:var(--fine)}
.series-list li[data-state="current"] b{color:var(--gold-access)}
.series-list b{color:var(--forest);font:600 var(--fs-nano)/1.5 var(--sans);letter-spacing:.13em}
.legal{margin-top:var(--sp-block);padding-top:26px;border-top:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-fine);line-height:1.66}

@media (max-width:1080px){
  .reader{grid-template-columns:1fr;gap:0}
  .reader-index{position:static;margin-bottom:var(--sp-block);padding-bottom:var(--sp-block);border-bottom:1px solid var(--line)}
  .reader-index ol{display:flex;flex-wrap:wrap;gap:0 8px;border-left:0}
  .reader-index a{padding:8px 12px;border:1px solid var(--line);border-radius:999px;margin:0 0 8px}
  .reader-index a[aria-current="true"]{border-color:var(--gold);border-left-color:var(--gold)}
  .article{max-width:none}
}
@media (max-width:760px){
  .figure-band{display:block}
  .figure-cell{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)}
  .figure-cell:last-child{border-bottom:0}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .data-table thead{display:none}
  .data-table tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .data-table td{padding:4px 0;border-bottom:0}
  .data-table td::before{display:block;margin-bottom:4px;color:var(--fine);font:600 var(--fs-nano)/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;content:attr(data-label)}
}
@media print{
  .site-header,.reader-index,.progress,.site-footer{display:none}
  .reader{display:block;padding:0}
  .article{max-width:none}
}

/* ==========================================================================
   26. ADDITIONS FOR ABOUT  (added 30 Aug 2026)
   ========================================================================== */

/* 26.1 Translation layer. Knowledge and Practice arrive from opposite but
   balanced sides; the photograph reveals between them. AERTHEIX is the layer
   in the middle — the composition says it, so no copy has to. */
.translate{display:grid;grid-template-columns:1fr minmax(280px,400px) 1fr;
  gap:clamp(24px,3vw,52px);align-items:center}
.translate-side{display:flex;flex-direction:column;gap:14px;opacity:0;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.translate-side--left{align-items:flex-end;text-align:right;transform:translateX(-28px)}
.translate-side--right{align-items:flex-start;text-align:left;transform:translateX(28px)}
.is-visible .translate-side{opacity:1;transform:none}
.is-visible .translate-side--right{transition-delay:.12s}
.translate-word{color:var(--forest);font:500 var(--fs-h3)/1.1 var(--display);letter-spacing:-.03em}
.translate-note{max-width:26ch;color:var(--fine);font-size:var(--fs-label);line-height:1.55}
.translate-rule{width:100%;max-width:180px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));
  transform:scaleX(0);transform-origin:right;transition:transform .8s var(--ease) .3s}
.translate-side--right .translate-rule{background:linear-gradient(90deg,var(--gold),transparent);transform-origin:left}
.is-visible .translate-rule{transform:scaleX(1)}
.translate-media{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--stone);aspect-ratio:4/5}
.translate-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(.96);
  clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease) .2s}
.is-visible .translate-media img{clip-path:inset(0 0 0 0)}
.translate-layer{margin:22px 0 0;color:var(--gold-access);font:600 var(--fs-nano)/1 var(--sans);
  letter-spacing:.18em;text-transform:uppercase;text-align:center}

/* 26.2 The names. Two equal editorial fields, neither subordinate. */
.names{display:grid;grid-template-columns:1fr 1fr;gap:0}
.names > div{padding:clamp(26px,2.8vw,40px) clamp(24px,3vw,48px);border-left:1px solid var(--line)}
.names > div:first-child{padding-left:0;border-left:0}
.names > div:last-child{padding-right:0}
.names .h3{color:var(--forest)}
.names .topic{max-width:32ch;margin-top:18px}
.names .body-copy{margin-top:20px}

/* 26.3 Working beliefs. A vertical manifesto index: every title is readable
   without interaction; the supporting line expands. */
.beliefs .accordion-trigger{grid-template-columns:auto 1fr auto}
.beliefs .accordion-trigger .h4{max-width:38ch;color:var(--ink);
  font:500 var(--fs-h3)/1.2 var(--display);letter-spacing:-.03em;transition:color var(--dur-hover)}
.beliefs .accordion-trigger:hover .h4{color:var(--forest)}
.beliefs .accordion-panel p{max-width:60ch;margin:0;color:var(--fine);
  font-size:var(--fs-body);line-height:1.7}
.beliefs .accordion-panel > div{padding-left:calc(2.4em + clamp(16px,2.4vw,36px))}

@media (max-width:1080px){
  .translate{grid-template-columns:1fr;gap:clamp(20px,4vw,32px)}
  .translate-side,.translate-side--left,.translate-side--right{align-items:flex-start;text-align:left;transform:none}
  .translate-rule{max-width:120px;transform-origin:left}
  .translate-media{order:-1;aspect-ratio:4/3}
  .names{grid-template-columns:1fr}
  .names > div{padding:clamp(24px,4vw,34px) 0;border-left:0;border-top:1px solid var(--line)}
  .names > div:first-child{padding-top:0;border-top:0}
  .beliefs .accordion-panel > div{padding-left:0}
}

/* 26.4 The names on the dark field. Without this the forest heading colour
   carries over onto the forest surface and renders at 1.25:1. */
.field .names > div{border-color:var(--line-dark)}
.field .names .h3{color:#fff}
.field .translate-word{color:#fff}
.field .translate-note{color:var(--on-dark-fine)}
.field .translate-layer{color:var(--gold-light)}
.field .beliefs .accordion-trigger .h4{color:#fff}
.field .beliefs .accordion-trigger:hover .h4{color:var(--gold-light)}
.field .beliefs .accordion-panel p{color:var(--on-dark-body)}

/* 26.5 Experience rail. The ABOUT copy master writes these unit labels in
   capitals (16+ YEARS / 1,000+ HOURS / 500+ CONVERSATIONS). */
.metrics--caps .metric-unit{color:var(--gold-access);font:600 var(--fs-micro)/1.3 var(--sans);
  letter-spacing:.14em;text-transform:uppercase}

/* ==========================================================================
   27. ADDITIONS FOR DATA & GOVERNANCE AND FAQ  (added 30 Aug 2026)
   ========================================================================== */

/* 27.1 Data layer panel. Three layers, equal, canvas-matched. */
.layer{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);
  border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.34);
  transition:border-color var(--dur-hover),transform var(--dur-hover)}
.layer:hover{transform:translateY(-3px);border-color:var(--gold)}
.layer-tag{display:flex;align-items:center;gap:10px;color:var(--gold-access);
  font:600 var(--fs-nano)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.layer-tag::before{width:9px;height:9px;flex:none;border:1px solid currentColor;border-radius:50%;content:""}
.layer[data-layer="research"] .layer-tag::before{background:currentColor}
.layer .h4{margin-top:14px}
.layer p{max-width:38ch;margin:14px 0 0;color:var(--fine);font-size:var(--fs-label);line-height:1.6}
.field .layer{border-color:var(--line-dark);background:rgba(255,255,255,.045)}
.field .layer:hover{border-color:var(--gold-light)}
.field .layer-tag{color:var(--gold-light)}
.field .layer .h4{color:#fff}
.field .layer p{color:var(--on-dark-body)}

/* 27.2 Rights and prohibited uses: two ruled columns, equal weight. */
.rights{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap-col)}
.rights > div > p.eyebrow{margin-bottom:8px}
.rights ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rights li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);
  font-size:var(--fs-body);line-height:1.6}
.rights li:last-child{border-bottom:0}
.rights [data-kind="prohibited"] li{color:var(--fine)}
.field .rights ul,.field .rights li{border-color:var(--line-dark)}
.field .rights li{color:var(--on-dark-body)}
.field .rights [data-kind="prohibited"] li{color:var(--on-dark-fine)}
@media (max-width:1080px){.rights{grid-template-columns:1fr;gap:var(--sp-block) 0}}

/* 27.3 FAQ category index. Centred, sticky, four controls — not a left rail. */
.faq-index{position:sticky;z-index:900;top:var(--header-h);
  padding:14px var(--gutter);
  border-bottom:1px solid var(--line);background:rgba(250,248,244,.94);backdrop-filter:blur(14px)}
.faq-index ol{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;
  margin:0 auto;padding:0;list-style:none;width:min(100%,var(--max))}
.faq-index a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border:1px solid var(--line);border-radius:999px;color:var(--fine);
  font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  transition:border-color var(--dur-hover),color var(--dur-hover),background var(--dur-hover)}
.faq-index a:hover{border-color:var(--gold);color:var(--forest)}
.faq-index a[aria-current="true"]{border-color:var(--forest);background:var(--forest);color:#fff}
.faq-index a b{color:var(--gold-access);font-weight:600}
.faq-index a[aria-current="true"] b{color:var(--gold-light)}

.faq-group{scroll-margin-top:calc(var(--header-h) + 82px)}
.faq-group + .faq-group{margin-top:var(--sp-section)}
.faq-group > .eyebrow{justify-content:center}
.faq-group > .h2{max-width:24ch;margin:0 auto 12px;text-align:center}
.faq-accordion .accordion-trigger .h4{max-width:44ch;color:var(--ink);
  font:500 var(--fs-h3)/1.2 var(--display);letter-spacing:-.03em;transition:color var(--dur-hover)}
.faq-accordion .accordion-trigger:hover .h4{color:var(--forest)}
.faq-accordion .accordion-panel > div{padding-left:calc(2.4em + clamp(16px,2.4vw,36px))}
.faq-accordion .accordion-panel p{max-width:66ch;margin:0;color:var(--fine);
  font-size:var(--fs-body);line-height:1.72}
.faq-accordion .accordion-panel p + p{margin-top:1em}
@media (max-width:1080px){
  .faq-accordion .accordion-panel > div{padding-left:0}
  .faq-index a{padding:9px 13px;font-size:var(--fs-nano)}
}


/* ==========================================================================
   28. SITE FINISHING  (31 Aug 2026)
   ========================================================================== */

/* 28.1 Hero: the four photographs sit ABOVE the legibility scrim.
   The title keeps its own shadow so it stays readable over bright card art. */
.hero-deck{z-index:3}
.hero-scrim{z-index:2}
.hero-title{z-index:4;text-shadow:0 2px 26px rgba(6,23,17,.88),0 0 10px rgba(6,23,17,.7)}
.hero-card img{filter:saturate(.82) contrast(.97) brightness(.94)}
@media (max-width:760px){.hero-card img{filter:saturate(.78) contrast(.96) brightness(.8)}}

/* 28.2 Assurix-style hover: a restrained zoom on plain photographs only.
   Framed or glowing modules (.stage, .tile, .status, .layer, .report-card)
   keep their own border/lift behaviour and are deliberately excluded. */
.media img,.translate-media img{will-change:transform}
.media:hover img,.media:focus-within img,
.translate-media:hover img{transform:scale(1.045);transition:transform .55s var(--ease)}
a:hover > .media img,a:focus-visible > .media img{transform:scale(1.045)}

/* 28.3 Centred closing notes. Without an auto inline margin a 62ch block sits
   against one edge while its text centres, which reads as misalignment. */
.close-rule .note,.close-rule .fine,.close-rule .bridge{margin-inline:auto}
.close-rule .note{text-align:center}

/* 28.4 Back to top. */
.back-to-top{position:fixed;z-index:990;right:clamp(18px,3vw,46px);bottom:clamp(18px,3vw,42px);
  display:grid;place-items:center;gap:1px;width:58px;height:58px;padding:0;
  border:1px solid rgba(212,188,132,.65);border-radius:50%;
  background:rgba(15,42,33,.92);color:#fff;cursor:pointer;
  box-shadow:0 18px 42px rgba(9,39,30,.2);opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background var(--dur-hover)}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.back-to-top:hover,.back-to-top:focus-visible{background:var(--forest);transform:translateY(-2px)}
.back-to-top span{font:400 var(--fs-lead)/1 var(--display)}
.back-to-top small{font:600 7px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase}
@media (max-width:760px){.back-to-top{width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* 28.5 Footer. One type treatment and one baseline for every link, including
   the address. Previously the address rendered lower case beside upper-case
   links and sat on a different baseline. */
.site-footer{padding:clamp(46px,5vw,72px) var(--gutter)}
.footer-inner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,3vw,48px) clamp(36px,5vw,80px);align-items:start}
.footer-copy{grid-column:2;max-width:66ch}
.footer-copy p{margin:0;color:var(--on-dark-fine);font-size:var(--fs-label);line-height:1.66}
.footer-copy p + p{margin-top:.8em}
.footer-nav{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 26px;
  padding-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--line-dark)}
.footer-nav a,.footer-nav .footer-contact{display:inline-block;
  color:var(--on-dark-fine);font:600 var(--fs-nano)/1.4 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;transition:color var(--dur-hover)}
.footer-nav a:hover,.footer-nav a:focus-visible,.footer-nav .footer-contact:hover{color:#fff}
.footer-nav .footer-contact{margin-left:auto;color:var(--gold-light)}
@media (max-width:760px){
  .footer-inner{grid-template-columns:1fr}
  .footer-copy,.footer-nav{grid-column:1}
  .footer-nav .footer-contact{margin-left:0}
}


/* ==========================================================================
   29. HOME  (migrated from index.html, 31 Aug 2026)
   Every rule is scoped to body.page-home so it cannot reach another page.
   index.html no longer carries a <style> block; it links this file like
   every other page, so a change here now reaches the homepage too.
   ========================================================================== */
.page-home /* ============================================================
   AERTHEIX HOMEPAGE — V2.0 LAYOUT CORRECTION
   Build date: 30 August 2026
   Authority: AERTHEIX_Website_Design_Layout_MASTER_2026Aug30_V2
              AERTHEIX_Motion_Design_MASTER_2026Aug30_V1
              AERTHEIX_Website_Copy_FINAL_MASTER_2026Aug29 (copy verbatim)
   Public copy is unchanged from V1.0. This file corrects layout, .page-home type scale, .page-home alignment, .page-home contrast and composition only.
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */
:root{
  /* Canvas — Motion Master §1.3 (#F1E7D3 superseded) */
  --canvas:#FFFFFF;
  --canvas-mid:#FAF8F4;
  --canvas-end:#F2EEE9;

  /* Locked palette — Design Master §5.1 */
  --ink:#2B313E;
  --muted:#6B7280;
  --fine:#4E5563;            /* AA-safe darkening of --muted, §12 overrides §5.1 */
  --stone:#EEE7D9;
  --forest-deep:#0F2A21;
  --forest:#174334;
  --forest-soft:#456B5D;
  --gold:#B8985A;
  --gold-access:#8A6D32;
  --gold-light:#D4BC84;

  /* H03 field. One-line swap point if the teal decision is reopened. */
  --field:#12312A;
  --field-2:#0D261F;

  --line:rgba(43,49,62,.15);
  --line-strong:rgba(43,49,62,.26);
  --line-dark:rgba(255,255,255,.20);
  --line-dark-strong:rgba(255,255,255,.34);

  --on-dark:#FFFFFF;
  --on-dark-body:#DCE5E0;
  --on-dark-fine:#BDCCC5;

  /* Type — Design Master §4.3 bands, strictly enforced */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,"Segoe UI",Arial,sans-serif;
  --fs-h1:clamp(38px,4.55vw,72px);      /* band 58–78 / 38–46 */
  --fs-h2:clamp(31px,3.45vw,54px);      /* band 42–58 / 31–40 */
  --fs-h3:clamp(23px,1.95vw,32px);      /* band 25–34 / 23–29 */
  --fs-lead:clamp(19px,1.5vw,24px);     /* band 21–27 / 19–23 */
  --fs-body:clamp(16px,1.05vw,17.5px);  /* band 16–18 */
  --fs-metric:clamp(48px,5.2vw,88px);   /* band 64–104 / 48–72 */
  --fs-unit:clamp(15px,1.2vw,19px);
  --fs-micro:11px;                      /* nav / eyebrow band 10–12 */
  --fs-fine:13px;

  /* Layout — one shell, one left edge, whole page */
  --max:1280px;
  --gutter:clamp(20px,4.6vw,72px);
  --header-h:84px;
  --sp-section:clamp(88px,9vw,138px);
  --sp-block:clamp(40px,4.4vw,64px);
  --gap-col:clamp(36px,4.8vw,76px);
  --radius:clamp(18px,1.6vw,24px);
  --ease:cubic-bezier(.16,1,.3,1);
}
.page-home /* ---------- 2. RESET / BASE ------------------------------- */
*, .page-home *::before, .page-home *::after{box-sizing:border-box}
body.page-home{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body.page-home{
  min-width:320px;margin:0;
  background:linear-gradient(180deg,var(--canvas) 0%,var(--canvas-mid) 46%,var(--canvas-end) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font:400 var(--fs-body)/1.66 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.page-home img{display:block;max-width:100%}
.page-home a{color:inherit;text-decoration:none}
.page-home button, .page-home a{font:inherit}
.page-home :focus-visible{outline:2px solid var(--gold-access);outline-offset:3px;border-radius:2px}
.page-home .on-dark :focus-visible, .page-home .hero :focus-visible{outline-color:var(--gold-light)}
.page-home .skip-link{position:fixed;z-index:2000;top:10px;left:10px;padding:11px 16px;background:#fff;color:var(--forest);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.12em;transform:translateY(-200%)}
.page-home .skip-link:focus{transform:none}
.page-home /* ---------- 3. SHELL / SHARED TYPE ------------------------ */
.section{position:relative;padding:var(--sp-section) var(--gutter)}
.page-home .section + .section{padding-top:clamp(58px,5.6vw,86px)}
.page-home .section + .field, .page-home .field + .section{padding-top:var(--sp-section)}
.page-home .shell{width:min(100%,var(--max));margin-inline:auto}
.page-home .shell + .shell{margin-top:var(--sp-block)}
.page-home /* Two equal columns. The single symmetry primitive for the page. */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:start}
.page-home .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.page-home .eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 20px;color:var(--fine);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.page-home .eyebrow::before{flex:none;width:28px;height:1px;background:var(--gold);content:""}
.page-home h1, .page-home h2, .page-home h3{margin:0;font-weight:500;letter-spacing:-.028em;text-wrap:balance}
.page-home .h2{max-width:19ch;color:var(--ink);font:500 var(--fs-h2)/1.06 var(--display);letter-spacing:-.032em}
.page-home .h2 em{display:block;font-style:italic}
.page-home .topic{max-width:30ch;margin:24px 0 0;color:var(--forest);font:500 var(--fs-lead)/1.34 var(--display)}
.page-home .body-copy{max-width:64ch;color:var(--ink)}
.page-home .body-copy p{margin:0 0 1.05em}
.page-home .body-copy p:last-child{margin-bottom:0}
.page-home .fine{max-width:74ch;margin:0;color:var(--fine);font-size:var(--fs-fine);line-height:1.66}
.page-home .statement{max-width:26ch;margin:0;color:var(--forest);font:500 clamp(23px,2.15vw,34px)/1.22 var(--display);letter-spacing:-.028em}
.page-home .bridge{max-width:34ch;margin:0 auto;color:var(--forest);font:500 clamp(23px,2.15vw,34px)/1.24 var(--display);letter-spacing:-.028em;text-align:center;text-wrap:balance}
.page-home /* Closing band shared by H02 and H03 — identical rhythm */
.close-band{padding-top:var(--sp-block);border-top:1px solid var(--line)}
.page-home .close-rule{margin-top:var(--sp-block);text-align:center}
.page-home /* ---------- 4. REVEAL ------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.page-home .motion-ready [data-reveal].is-visible{opacity:1;transform:none}
.page-home /* ---------- 5. HEADER ------------------------------------- */
.site-header{
  position:fixed;z-index:1000;inset:0 0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  min-height:var(--header-h);padding:0 var(--gutter);
  border-bottom:1px solid rgba(184,152,90,.24);
  background:rgba(255,255,255,.90);backdrop-filter:blur(18px);
  transition:min-height .28s,background .28s,box-shadow .28s;
}
.page-home .site-header.is-scrolled{min-height:68px;background:rgba(255,255,255,.97);box-shadow:0 8px 26px rgba(15,42,33,.07)}
.page-home .brand{display:inline-flex;align-items:center;gap:11px;justify-self:start;color:var(--forest);font:500 clamp(15px,1.15vw,18px)/1 var(--display);letter-spacing:.22em}
.page-home .brand img{width:34px;height:auto;object-fit:contain}
.page-home .site-navigation{display:flex;align-items:center;justify-content:center;gap:clamp(16px,1.9vw,30px)}
.page-home .site-navigation a{position:relative;padding:6px 0;color:var(--fine);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.11em;white-space:nowrap;transition:color .22s}
.page-home .site-navigation a::after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--gold);content:"";transform:scaleX(0);transform-origin:right;transition:transform .24s}
.page-home .site-navigation a:hover{color:var(--forest)}
.page-home .site-navigation a:hover::after, .page-home .site-navigation a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.page-home .header-cta{justify-self:end;display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border:1px solid rgba(184,152,90,.62);border-radius:999px;color:var(--forest);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.11em;white-space:nowrap;transition:background .22s,color .22s,border-color .22s}
.page-home .header-cta:hover, .page-home .header-cta:focus-visible{background:var(--forest);border-color:var(--forest);color:#fff}
.page-home .menu-toggle{display:none;justify-self:end;width:44px;height:44px;padding:0;border:1px solid rgba(184,152,90,.5);border-radius:50%;background:transparent;cursor:pointer}
.page-home .menu-toggle i{display:block;width:16px;height:1px;margin:4px auto;background:var(--forest);transition:transform .24s}
.page-home .menu-toggle[aria-expanded="true"] i:first-child{transform:translateY(2.5px) rotate(45deg)}
.page-home .menu-toggle[aria-expanded="true"] i:last-child{transform:translateY(-2.5px) rotate(-45deg)}
.page-home /* ---------- 6. H01 HERO ----------------------------------- */
.hero{
  position:relative;overflow:hidden;
  min-height:min(100svh,960px);
  padding:calc(var(--header-h) + clamp(28px,3vw,48px)) var(--gutter) clamp(36px,4vw,60px);
  background:
    radial-gradient(ellipse 60% 44% at 50% 34%,rgba(212,188,132,.13),transparent 70%),
    radial-gradient(ellipse 46% 40% at 82% 16%,rgba(69,107,93,.24),transparent 72%),
    linear-gradient(158deg,#08201A 0%,var(--forest-deep) 52%,#133A2C 100%);
  color:var(--on-dark);
}
.page-home .hero-shell{display:grid;grid-template-rows:auto 1fr auto;gap:clamp(22px,2.6vw,38px);width:min(100%,var(--max));min-height:calc(100svh - var(--header-h) - clamp(64px,7vw,108px));margin-inline:auto}
.page-home .hero .eyebrow{justify-content:center;margin:0;color:var(--gold-light)}
.page-home .hero .eyebrow::before{background:var(--gold-light)}
.page-home .hero-stage{position:relative;display:grid;place-items:center;min-height:clamp(300px,42svh,440px)}
.page-home /* Deck sits centred; type crosses it. Approved V8.0.2 composition retained. */
.hero-deck{position:absolute;z-index:3;top:50%;left:50%;width:min(20vw,268px);height:min(36svh,360px);transform:translate(-50%,-50%);transition:transform .8s cubic-bezier(.4,0,.9,.6)}
.page-home .hero-card{position:absolute;inset:0;margin:0;overflow:hidden;border:1px solid rgba(212,188,132,.6);border-radius:16px;background:#112F24;box-shadow:0 22px 52px rgba(0,0,0,.3);transform-origin:50% 100%;transition:transform .62s var(--ease),opacity .24s}
.page-home .hero-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(.97) brightness(.94)}
@media (max-width:760px){.page-home .hero-card img{filter:saturate(.66) contrast(.94) brightness(.66)}
}
.page-home .hero-card:nth-child(1){z-index:1;--sy:0%;--sr:-1.5deg}
.page-home .hero-card:nth-child(2){z-index:2;--sy:1.6%;--sr:1deg}
.page-home .hero-card:nth-child(3){z-index:3;--sy:3.2%;--sr:-.7deg}
.page-home .hero-card:nth-child(4){z-index:4;--sy:4.8%;--sr:.5deg}
.page-home .hero[data-phase="reset"] .hero-card{opacity:0;transform:translateY(-120vh) rotate(0)}
.page-home .hero[data-phase="drop"] .hero-card, .page-home .hero[data-phase="fan-close"] .hero-card{opacity:1;transform:translateY(var(--sy)) rotate(var(--sr))}
.page-home .hero[data-phase="drop"] .hero-card:nth-child(2){transition-delay:.16s}
.page-home .hero[data-phase="drop"] .hero-card:nth-child(3){transition-delay:.32s}
.page-home .hero[data-phase="drop"] .hero-card:nth-child(4){transition-delay:.48s}
.page-home .hero[data-phase="fan-open"] .hero-card{opacity:1}
.page-home .hero[data-phase="fan-open"] .hero-card:nth-child(1){transform:translate(-36%,7%) rotate(-13deg)}
.page-home .hero[data-phase="fan-open"] .hero-card:nth-child(2){transform:translate(-13%,1%) rotate(-4.5deg)}
.page-home .hero[data-phase="fan-open"] .hero-card:nth-child(3){transform:translate(13%,1%) rotate(4.5deg)}
.page-home .hero[data-phase="fan-open"] .hero-card:nth-child(4){transform:translate(36%,7%) rotate(13deg)}
.page-home .hero[data-phase="pull-away"] .hero-deck, .page-home .hero[data-phase="phrase-join"] .hero-deck{transform:translate(-50%,-150vh)}
.page-home /* Legibility scrim — vignette, .page-home not a box. Keeps white type readable over photography. */
.hero-scrim{position:absolute;z-index:2;top:50%;left:50%;width:min(170%,1720px);height:calc(var(--fs-h1) * 4.4);background:radial-gradient(ellipse 52% 40% at 50% 50%,rgba(6,23,17,.88) 0%,rgba(6,23,17,.62) 42%,rgba(6,23,17,.24) 68%,rgba(6,23,17,0) 86%);transform:translate(-50%,-50%);pointer-events:none}
.page-home /* Title: centred flex row. Phrases translate apart and rejoin — they can never overlap. */
.hero-title{position:relative;z-index:4;text-shadow:0 2px 26px rgba(6,23,17,.88),0 0 10px rgba(6,23,17,.7);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 .3em;margin:0;font:500 var(--fs-h1)/1.04 var(--display);letter-spacing:-.045em;text-align:center}
.page-home .hero-phrase{display:inline-block;transition:transform .78s cubic-bezier(.2,.8,.2,1),color .78s}
.page-home .hero-phrase-left{color:#fff;transform:translateX(-16vw)}
.page-home .hero-phrase-right{color:#F0EBDD;font-style:italic;transform:translateX(16vw)}
.page-home .hero[data-phase="phrase-join"] .hero-phrase-left{transform:none}
.page-home .hero[data-phase="phrase-join"] .hero-phrase-right{transform:none;color:var(--gold-light)}
.page-home /* Footer: true 50/50 */
.hero-footer{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:end}
.page-home .hero-intro{max-width:50ch}
.page-home .hero-intro p{margin:0;color:var(--on-dark-body);font-size:var(--fs-body);line-height:1.62}
.page-home .hero-intro strong{color:#fff;font-weight:600}
.page-home .hero-intro .hero-transition{margin-top:16px;color:var(--gold-light);font-size:var(--fs-fine);line-height:1.6}
.page-home .hero-routes{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dark-strong)}
.page-home .hero-routes a{display:grid;grid-template-rows:auto 1fr auto;min-height:132px;gap:10px;padding:18px 16px 16px;border-left:1px solid var(--line-dark);transition:background .24s}
.page-home .hero-routes a:last-child{border-right:1px solid var(--line-dark)}
.page-home .hero-routes a:hover, .page-home .hero-routes a:focus-visible{background:rgba(255,255,255,.06)}
.page-home .hero-routes .idx{color:var(--gold-light);font:600 10px/1 var(--sans);letter-spacing:.14em}
.page-home .hero-routes .lab{max-width:13ch;color:#fff;font:500 clamp(16px,1.25vw,21px)/1.18 var(--display);letter-spacing:-.028em;text-wrap:balance}
.page-home .hero-routes .arw{display:block;color:var(--gold-light);font-size:15px;line-height:1}
.page-home /* ---------- 7. H02 THE BLIND SPOT ------------------------- */
.metrics{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.page-home .metric{display:flex;min-height:clamp(178px,16.5vw,232px);flex-direction:column;justify-content:space-between;padding:clamp(24px,2.6vw,38px) clamp(18px,2.2vw,34px);border-left:1px solid var(--line)}
.page-home .metric:first-child{padding-left:0;border-left:0}
.page-home .metric:last-child{padding-right:0}
.page-home .metric-value{display:flex;align-items:baseline;gap:0;color:var(--ink);font:500 var(--fs-metric)/.9 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.page-home .metric-approx{margin-right:.12em}
.page-home .metric-num{display:inline-block;text-align:left;font-variant-numeric:tabular-nums}
.page-home .metric-unit{margin-left:.42em;color:var(--fine);font:500 var(--fs-unit)/1.25 var(--sans);letter-spacing:0}
.page-home .metric-label{max-width:24ch;margin-top:20px;color:var(--fine);font-size:14px;line-height:1.5}
.page-home .photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.7vw,24px)}
.page-home .photo-pair figure{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--stone);aspect-ratio:4/3}
.page-home .photo-pair img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(.96);transform:scale(1.04);transition:transform 1.05s var(--ease)}
.page-home .photo-pair.is-visible img{transform:none}
.page-home /* ---------- 8. H03 THE COST ------------------------------- */
.field{position:relative;overflow:hidden;background:linear-gradient(158deg,var(--field-2) 0%,var(--field) 56%,#164034 100%);color:var(--on-dark)}
.page-home .field::before{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(212,188,132,.045) 0 1px,transparent 1px calc(100% / 6));content:"";pointer-events:none}
.page-home .field > .shell{position:relative;z-index:1}
.page-home .field .eyebrow{color:var(--gold-light)}
.page-home .field .eyebrow::before{background:var(--gold-light)}
.page-home .field .h2{color:#fff}
.page-home .field .topic{color:#F5EFE2}
.page-home .field .body-copy{color:var(--on-dark-body)}
.page-home .field .fine{color:var(--on-dark-fine)}
.page-home .field .bridge, .page-home .field .statement{color:#FFF6E6}
.page-home .field .metrics{border-color:var(--line-dark-strong)}
.page-home .field .metric{border-color:var(--line-dark)}
.page-home .field .metric-value{color:#FFF8EE}
.page-home .field .metric-unit, .page-home .field .metric-label{color:var(--on-dark-fine)}
.page-home .field .close-band{border-color:var(--line-dark-strong)}
.page-home .context-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.page-home .context-3 p{margin:0;padding:0 clamp(18px,2.2vw,34px);border-left:1px solid var(--line-dark);color:var(--on-dark-body);font-size:14px;line-height:1.62}
.page-home .context-3 p:first-child{padding-left:0;border-left:0}
.page-home .context-3 p:last-child{padding-right:0}
.page-home .context-3 strong{color:#FFF6E6;font-weight:500}
.page-home /* ---------- 9. H04 THE OTHER SIDE ------------------------- */
/* Mirrored composition per Design Master H04 lock: media left, .page-home copy right.
   To revert to the Motion Master order, .page-home set --media-order:2 / --copy-order:1. */
.case{--media-order:1;--copy-order:2}
.page-home .case-hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:stretch}
.page-home .case-media{position:relative;order:var(--media-order);min-height:clamp(420px,46vw,640px);margin:0;overflow:hidden;border-radius:var(--radius);background:var(--stone)}
.page-home .case-media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;filter:saturate(.76) contrast(.96);transform:scale(1.04);transition:transform 1.08s var(--ease)}
.page-home .case-hero.is-visible .case-media img{transform:none}
.page-home .case-media::after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,42,33,0) 44%,rgba(8,26,20,.72) 100%);content:"";pointer-events:none}
.page-home .quote-card{position:absolute;z-index:2;right:clamp(18px,2vw,28px);bottom:clamp(18px,2vw,28px);left:clamp(18px,2vw,28px);padding:clamp(22px,2.2vw,32px);border:1px solid rgba(184,152,90,.42);border-radius:calc(var(--radius) - 6px);background:rgba(248,246,240,.96);backdrop-filter:blur(6px);color:var(--ink)}
.page-home .quote-card blockquote{margin:0;font:500 clamp(17px,1.4vw,22px)/1.35 var(--display);letter-spacing:-.02em;text-wrap:pretty}
.page-home .quote-card cite{display:block;margin-top:14px;color:var(--fine);font:500 12px/1.5 var(--sans);font-style:normal}
.page-home .case-copy{display:flex;order:var(--copy-order);flex-direction:column;justify-content:center;padding:clamp(8px,1.4vw,20px) 0}
.page-home .case-copy .body-copy{max-width:46ch;margin-top:26px}
.page-home .case-copy .statement{margin-top:30px}
.page-home .case-copy .case-note{max-width:40ch;margin:16px 0 0;color:var(--fine);font-size:14px;line-height:1.6}
.page-home /* ---------- 10. H05 THREE QUESTIONS ----------------------- */
.axis-stage{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);padding:clamp(32px,3.6vw,56px) clamp(26px,3vw,48px);border-radius:var(--radius);background:linear-gradient(158deg,#0A2119 0%,var(--forest-deep) 58%,#153B2D 100%);color:var(--on-dark)}
.page-home .axis-visual{position:sticky;top:max(calc(var(--header-h) + 24px),calc(50svh - 250px));align-self:start;display:grid;place-items:center;min-height:clamp(300px,30vw,420px);padding-top:clamp(0px,5.5vw,84px)}
.page-home .axis-visual svg{display:block;width:min(100%,500px);height:auto}
.page-home .axis-rings circle{fill:none;stroke:rgba(212,188,132,.22);stroke-width:1}
.page-home .axis-arm path{fill:none;stroke:rgba(255,255,255,.20);stroke-width:2.5;transition:stroke .34s,filter .34s}
.page-home .axis-arm circle{fill:#0C241C;stroke:rgba(255,255,255,.3);stroke-width:2;transition:stroke .34s,filter .34s}
.page-home .axis-arm text{fill:rgba(255,255,255,.5);font:500 26px var(--display);text-anchor:middle;dominant-baseline:central;transition:fill .34s}
.page-home .axis-core{fill:var(--gold)}
.page-home .axis-stage[data-active="x"] .axis-x path, .page-home .axis-stage[data-active="x"] .axis-x circle{stroke:#D4BC84;filter:drop-shadow(0 0 8px rgba(212,188,132,.6))}
.page-home .axis-stage[data-active="x"] .axis-x text{fill:#FFF8E8}
.page-home .axis-stage[data-active="y"] .axis-y path, .page-home .axis-stage[data-active="y"] .axis-y circle{stroke:#9CC89B;filter:drop-shadow(0 0 8px rgba(156,200,155,.55))}
.page-home .axis-stage[data-active="y"] .axis-y text{fill:#E1F3DC}
.page-home .axis-stage[data-active="z"] .axis-z path, .page-home .axis-stage[data-active="z"] .axis-z circle{stroke:#D3B7D4;filter:drop-shadow(0 0 8px rgba(211,183,212,.55))}
.page-home .axis-stage[data-active="z"] .axis-z text{fill:#F2E1F1}
.page-home .axis-stage[data-active="all"] .axis-arm path, .page-home .axis-stage[data-active="all"] .axis-arm circle{stroke:var(--gold-light)}
.page-home .axis-stage[data-active="all"] .axis-arm text{fill:#fff}
.page-home .axis-step{display:flex;min-height:clamp(250px,33vh,340px);flex-direction:column;justify-content:center;padding:clamp(30px,3.4vw,52px) 0;border-bottom:1px solid var(--line-dark)}
.page-home .axis-step:last-child{border-bottom:0}
.page-home .axis-kicker{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--gold-light);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.15em;text-transform:uppercase}
.page-home .axis-kicker::before{flex:none;width:22px;height:1px;background:var(--gold-light);content:""}
.page-home .axis-step h3{max-width:16ch;color:#fff;font:500 var(--fs-h3)/1.14 var(--display);letter-spacing:-.03em}
.page-home .axis-step p{max-width:40ch;margin:18px 0 0;color:var(--on-dark-body);font-size:var(--fs-body);line-height:1.62}
.page-home .axis-note{max-width:62ch;margin:var(--sp-block) auto 0;color:var(--ink);font-size:var(--fs-body);line-height:1.68;text-align:center;text-wrap:pretty}
.page-home /* ---------- 11. H06 ROUTES -------------------------------- */
.rail-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:end}
.page-home .rail-controls{display:flex;align-items:center;gap:10px;margin-top:26px}
.page-home .rail-controls button{display:grid;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--forest);cursor:pointer;place-items:center;transition:background .22s,color .22s,border-color .22s}
.page-home .rail-controls button:hover:not(:disabled), .page-home .rail-controls button:focus-visible{border-color:var(--forest);background:var(--forest);color:#fff}
.page-home .rail-controls button:disabled{opacity:.28;cursor:default}
.page-home .rail-count{min-width:56px;color:var(--fine);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.12em;text-align:center}
.page-home .rail-controls[hidden]{display:none}
.page-home .rail-viewport{overflow:hidden}
.page-home .rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--rail-gap) * (var(--rail-visible) - 1))) / var(--rail-visible));gap:var(--rail-gap);transition:transform .55s var(--ease);--rail-gap:clamp(16px,1.7vw,24px);--rail-visible:3}
.page-home .route-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:var(--radius);background:var(--forest-deep);color:#fff;aspect-ratio:4/5}
.page-home .route-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.74) contrast(.95);transform:scale(1.02);transition:transform .55s var(--ease)}
.page-home .route-card::after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,24,18,.93) 0%,rgba(6,24,18,.5) 46%,rgba(6,24,18,.06) 100%);content:"";pointer-events:none}
.page-home .route-card:hover img, .page-home .route-card:focus-visible img{transform:scale(1.06)}
.page-home .route-body{position:relative;z-index:1;display:flex;min-height:clamp(220px,20vw,268px);flex-direction:column;justify-content:flex-end;padding:clamp(22px,2.2vw,32px)}
.page-home .route-body .tag{color:var(--gold-light);font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.page-home .route-body h3{min-height:2.3em;margin:14px 0 10px;color:#fff;font:500 var(--fs-h3)/1.14 var(--display);letter-spacing:-.03em}
.page-home .route-body p{max-width:34ch;min-height:4.5em;margin:0;color:var(--on-dark-fine);font-size:14px;line-height:1.5}
.page-home .route-body .go{display:inline-flex;align-items:center;gap:.5em;margin-top:20px;color:#fff;font:600 10px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.page-home .route-body .go i{display:block;width:16px;height:1px;background:var(--gold-light);font-style:normal;transition:width .24s}
.page-home .route-card:hover .go i{width:26px}
.page-home /* ---------- 12. FOOTER ------------------------------------ */
.site-footer{padding:clamp(38px,4vw,56px) var(--gutter);background:var(--forest-deep);color:var(--on-dark-fine)}
.page-home .footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 36px;width:min(100%,var(--max));margin-inline:auto}
.page-home .footer-inner .brand{color:#fff}
.page-home .footer-nav{display:flex;flex-wrap:wrap;gap:12px 26px}
.page-home .footer-nav a{color:var(--on-dark-fine);font:600 10px/1.4 var(--sans);letter-spacing:.12em;transition:color .22s}
.page-home .footer-nav a:hover{color:#fff}
.page-home /* ---------- 13. RESPONSIVE -------------------------------- */
@media (max-width:1180px){
  .rail-track{--rail-visible:2}
}
@media (max-width:1080px){body.page-home{--header-h:72px}
.page-home .site-header{grid-template-columns:1fr auto}
.page-home .site-navigation{position:fixed;top:var(--header-h);right:16px;left:16px;display:none;padding:12px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 18px 44px rgba(15,42,33,.13)}
.page-home .site-navigation.is-open{display:grid}
.page-home .site-navigation a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.08em}
.page-home .site-navigation a:last-child{border-bottom:0}
.page-home .site-navigation a::after{display:none}
.page-home .header-cta{display:none}
.page-home .menu-toggle{display:block}
.page-home .grid-2, .page-home .hero-footer, .page-home .case-hero, .page-home .axis-stage, .page-home .rail-head{grid-template-columns:1fr}
.page-home .axis-visual{position:static;min-height:0;margin-bottom:8px}
.page-home .axis-visual svg{width:min(100%,330px)}
.page-home .axis-step{min-height:0;padding:34px 0}
.page-home .case-media{order:1;min-height:clamp(360px,52vw,520px)}
.page-home .case-copy{order:2}
.page-home .hero-intro{max-width:none}
.page-home .rail-head{gap:0}
.page-home .rail-controls{margin-top:22px}
}
@media (max-width:760px){body.page-home{--header-h:68px;--sp-section:clamp(64px,12vw,88px)}
.page-home .brand{gap:9px;font-size:15px;letter-spacing:.18em}
.page-home .brand img{width:29px}
.page-home .hero{min-height:auto;padding-bottom:44px}
.page-home .hero-shell{min-height:0;gap:26px}
.page-home .hero-stage{min-height:clamp(330px,52svh,420px)}
.page-home .hero-deck{width:min(58vw,232px);height:min(40svh,318px)}
.page-home .hero-title{gap:0 .28em}
.page-home .hero-phrase-left, .page-home .hero-phrase-right{transform:none}
.page-home .hero-scrim{width:230%;height:calc(var(--fs-h1) * 7);background:radial-gradient(ellipse 46% 34% at 50% 50%,rgba(6,23,17,.94) 0%,rgba(6,23,17,.74) 40%,rgba(6,23,17,.3) 66%,rgba(6,23,17,0) 86%)}
.page-home .hero-routes{grid-template-columns:1fr;border-top:0}
.page-home .hero-routes a, .page-home .hero-routes a:last-child{grid-template-rows:auto;grid-template-columns:auto 1fr auto;min-height:0;align-items:center;gap:14px;padding:17px 0;border-right:0;border-left:0;border-bottom:1px solid var(--line-dark)}
.page-home .hero-routes a:last-child{border-bottom:0}
.page-home .hero-routes .lab{max-width:none}
.page-home .metrics, .page-home .context-3{display:block}
.page-home .metric{min-height:0;padding:22px 0;border-bottom:1px solid var(--line);border-left:0}
.page-home .metric:last-child{border-bottom:0}
.page-home .field .metric{border-color:var(--line-dark)}
.page-home .context-3 p{padding:16px 0;border-top:1px solid var(--line-dark);border-left:0}
.page-home .context-3 p:first-child{border-top:0}
.page-home .photo-pair{grid-template-columns:1fr}
.page-home .quote-card{position:static;margin:0;border-radius:0;background:transparent;border:0;border-top:1px solid rgba(255,255,255,.28);backdrop-filter:none;color:#fff;padding:20px 0 0}
.page-home .quote-card cite{color:var(--on-dark-fine)}
.page-home .case-media{display:flex;flex-direction:column;overflow:visible;border-radius:0;background:transparent;min-height:0}
.page-home .case-media img{aspect-ratio:4/3;border-radius:var(--radius);height:auto}
.page-home .case-media::after{display:none}
.page-home .case-media .quote-card{background:var(--forest-deep);border-radius:var(--radius);padding:22px;margin-top:14px;border-top:0}
.page-home .axis-stage{padding:26px 20px}
.page-home .rail-track{--rail-visible:1}
.page-home .route-body h3{min-height:0}
}
.page-home /* ---------- 14. REDUCED MOTION ---------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .hero[data-phase] .hero-deck{transform:translate(-50%,-50%)}
  .hero[data-phase] .hero-card{opacity:1;transition:none}
  .hero[data-phase] .hero-card:nth-child(1){transform:translate(-36%,7%) rotate(-13deg)}
  .hero[data-phase] .hero-card:nth-child(2){transform:translate(-13%,1%) rotate(-4.5deg)}
  .hero[data-phase] .hero-card:nth-child(3){transform:translate(13%,1%) rotate(4.5deg)}
  .hero[data-phase] .hero-card:nth-child(4){transform:translate(36%,7%) rotate(13deg)}
  .hero[data-phase] .hero-phrase-left,.hero[data-phase] .hero-phrase-right{transform:none;transition:none}
  .hero[data-phase] .hero-phrase-right{color:var(--gold-light)}
  .photo-pair img,.case-media img,.route-card img{transform:none !important;transition:none !important}
  .rail-track{transition:none !important}
  .axis-arm path,.axis-arm circle{filter:none !important}
}
.page-home .media img, .page-home .translate-media img{will-change:transform}
.page-home .media:hover img, .page-home .media:focus-within img, .page-home .translate-media:hover img{transform:scale(1.045);transition:transform .55s var(--ease)}
.page-home a:hover > .media img, .page-home a:focus-visible > .media img{transform:scale(1.045)}
.page-home /* 28.3 Centred closing notes. Without an auto inline margin a 62ch block sits
   against one edge while its text centres, .page-home which reads as misalignment. */
.close-rule .note, .page-home .close-rule .fine, .page-home .close-rule .bridge{margin-inline:auto}
.page-home .close-rule .note{text-align:center}


/* 30. A centred stack must centre every child block. An earlier rule listed
   .topic, .body-copy and .fine but omitted .note, so a 62ch note sat against
   the left edge with its text centred inside it — which reads as misalignment.
   This is the final word on the selector. */
.stack-center > *,
.stack-center .topic,.stack-center .note,.stack-center .body-copy,
.stack-center .fine,.stack-center .statement{margin-inline:auto}
.stack-center .note{text-align:center}

/* 31. Footer lockup. The full AERTHEIX logo asset is a dark tile drawn for the
   light header; on the forest footer it either disappears or, when inverted,
   turns into a white box. The footer therefore uses the same symbol-plus-
   wordmark lockup as the header, with the symbol inverted to off-white. One
   asset, no baked-in background, legible on either surface. */
.site-footer .brand img{width:34px;height:auto;filter:brightness(0) invert(1);opacity:.9;
  transition:opacity var(--dur-hover)}
.site-footer .brand:hover img{opacity:1}
.site-footer .brand{align-self:center}