/* ============================================================
   AGC MEDIA — main.css
   Tokens copied verbatim from CLAUDE.md §4 / 01-BRAND-IDENTITY.md §4.9.
   Do not substitute colour values by eye — all pairs are
   WCAG 2.2 validated in the brand document.
   ============================================================ */

/* ---- 1. DESIGN TOKENS (verbatim) ---- */
:root{
  /* gold */
  --gold-100:#FBF0D5;--gold-200:#F6E0A8;--gold-300:#F0CE78;
  --gold-400:#E8BB52;--gold-500:#D4A032;--gold-600:#B07F1E;
  --gold-700:#8A6113;--gold-800:#5E410C;--gold-900:#332306;
  /* dark */
  --ink-950:#0A0A0B;--ink-900:#111113;--ink-850:#16161A;--ink-800:#1D1D22;
  --ink-700:#2A2A31;--ink-600:#3D3D46;--ink-500:#6B6B78;
  --ink-400:#8E8E9C;--ink-300:#B4B4C0;--cream-100:#F5F1E8;--cream-50:#FDFCF9;
  /* light */
  --bone-50:#FDFCF9;--bone-100:#F5F1E8;--bone-200:#EAE4D6;--bone-300:#D8D0BE;
  --stone-500:#8E877A;--slate-500:#6A6558;--slate-700:#43403A;--slate-900:#1A1815;
  /* partner + severity */
  --petrol-500:#0F5E5C;--petrol-300:#3FA8A4;
  --sev-critical:#FF5C57;--sev-needswork:#D98CFF;--sev-strong:#4ADE80;--sev-note:#6E9BFF;
  /* semantic — dark is the default theme */
  --bg:var(--ink-950); --surface:var(--ink-850); --text:var(--cream-100);
  --text-secondary:var(--ink-300); --text-muted:var(--ink-400);
  --border-decorative:var(--ink-700);
  --border-control:var(--ink-500);   /* 3.77:1 — required by WCAG 1.4.11 */
  --accent:var(--gold-400); --accent-fill:var(--gold-400); --accent-text:var(--gold-400);
  --accent-hover:var(--gold-300); --on-accent:var(--ink-950);
  --focus-ring:var(--gold-400); --partner:var(--petrol-300);
  --surface-raised:var(--ink-800); --text-display:var(--cream-50);
  --oxblood-600:#6E1F22; --oxblood-400:#B0453F; --sage-500:#6E7F5C;
  --step--1:clamp(.833rem,.80rem + .16vw,.9rem);
  --ease-inout:cubic-bezier(.65,0,.35,1); --scrub:1;
  /* type */
  --font-display:Anton,"Arial Narrow",Impact,sans-serif;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.25rem,1.18rem + .35vw,1.5rem);
  --step-2:clamp(1.563rem,1.44rem + .61vw,2rem);
  --step-3:clamp(1.953rem,1.76rem + .97vw,2.75rem);
  --step-4:clamp(2.441rem,2.13rem + 1.56vw,3.75rem);
  --step-hero:clamp(3.5rem,13vw,15rem);
  --step-mega:clamp(4rem,18vw,22rem);
  /* motion */
  --dur-micro:120ms;--dur-ui:240ms;--dur-reveal:640ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
[data-theme="light"]{
  --bg:var(--bone-50);--surface:var(--bone-100);--text:var(--slate-900);
  --text-secondary:var(--slate-700);--text-muted:var(--slate-500);
  --border-decorative:var(--bone-200);--border-control:var(--stone-500);
  --accent:var(--gold-600);        /* UI, borders, icons — 3.47:1 */
  --accent-fill:var(--gold-700);   /* button fills — 5.39:1, full AA */
  --accent-text:var(--gold-700);   /* body copy */
  --accent-hover:var(--gold-800);  /* NOT gold-300 — that measures 1.48:1 on bone */
  --surface-raised:var(--bone-50); --text-display:var(--slate-900);
  --on-accent:var(--bone-50);--focus-ring:var(--gold-600);--partner:var(--petrol-500);
  --sev-critical:#C22A26;--sev-needswork:#8E2FA8;--sev-strong:#0F7A52;--sev-note:#2A5BC7;
}

/* Derived semantics (values from the validated palette only) */
:root{
  --input-bg:var(--ink-900);
  --header-h:72px;
  --gutter:clamp(20px,4.5vw,56px);
  --grad-metal:linear-gradient(135deg,#8A6113 0%,#E8BB52 38%,#FBF0D5 52%,#D4A032 68%,#8A6113 100%);
  --grad-scrim:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,.72) 62%,rgba(10,10,11,.96) 100%);
}
[data-theme="light"]{ --input-bg:var(--bone-50); }
[data-theme]{color:var(--text)}

/* ---- 2. FONTS (self-hosted, latin subsets) ---- */
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:optional;
  src:url('/assets/fonts/anton-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- 3. RESET / BASE ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-anchor:none;margin:0;padding:0}
html{scrollbar-gutter:stable}
html{
  color-scheme:dark;
  scroll-padding-top:calc(var(--header-h) + 24px);
  scroll-padding-bottom:88px; /* mobile sticky CTA must never obscure focus */
  -webkit-text-size-adjust:100%;
}
[data-theme="light"]{color-scheme:light}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.6;
  font-synthesis-weight:none;
  min-height:100svh;display:flex;flex-direction:column;
}
main{flex:1}
::selection{background:var(--gold-400);color:var(--ink-950)}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
a{color:var(--text);text-decoration-color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
p,li{max-width:68ch}
strong{font-weight:650}

/* film grain — decorative, compositor-only */
body::after{
  content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 4. UTILITIES ---- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:12px;left:12px;z-index:2147483100;
  transform:translateY(-200%);
  background:var(--accent-fill);color:var(--on-accent);
  padding:14px 24px;border-radius:2px;font-weight:600;text-decoration:none;
}
.skip-link:focus{transform:none;color:var(--on-accent)}
.container{width:min(100% - var(--gutter)*2,1160px);margin-inline:auto}
.container--wide{width:min(100% - var(--gutter)*2,1400px);margin-inline:auto}
.container--narrow{width:min(100% - var(--gutter)*2,760px);margin-inline:auto}
.u-gold{color:var(--accent-text)}
.u-center{text-align:center}
.u-center > p,.u-center > .lead{margin-inline:auto}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.cv{content-visibility:auto;contain-intrinsic-size:auto 720px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---- 5. TYPE ---- */
h1,h2,.display{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.98;color:var(--text-display);
  overflow-wrap:break-word;
}
h1{font-size:var(--step-4);letter-spacing:-.03em}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-weight:700;line-height:1.25;color:var(--text-display)}
h4{font-size:var(--step-0);font-weight:650;color:var(--text-display)}
.display-2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--step-2);letter-spacing:-.02em;line-height:.98;color:var(--text-display)}
.mega{font-size:clamp(2.6rem,8.5vw,7.5rem);letter-spacing:-.03em;line-height:.96}
.hero-display{font-size:clamp(2.9rem,7.2vw,7.5rem);letter-spacing:-.025em;line-height:.95;max-width:12ch;display:block}
.eyebrow{
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
  font-variant-numeric:tabular-nums;
}
.eyebrow--muted{color:var(--text-muted)}
.lead{font-size:var(--step-1);line-height:1.45;color:var(--text-secondary)}
.callout{font-size:var(--step-2);line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--text-display);max-width:32ch}
.small{font-size:var(--step--1);color:var(--text-muted)}
.prose > * + *{margin-top:1.35em}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.5em}
.section-head{margin-bottom:clamp(36px,5vw,64px)}
.section-head .eyebrow{display:block;margin-bottom:18px}
.section-head p{margin-top:20px}

/* ---- 6. HEADER ---- */
.site-header{
  position:sticky;top:0;z-index:1000;height:var(--header-h);
  background:rgba(10,10,11,.92);
  border-bottom:1px solid var(--ink-800);
}
[data-theme="light"] .site-header{background:rgba(253,252,249,.94);border-bottom-color:var(--bone-200)}
.site-header__in{
  width:min(100% - var(--gutter)*2,1400px);margin-inline:auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.wordmark{
  font-family:var(--font-display);font-size:24px;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--text);text-decoration:none;line-height:1;
  display:inline-flex;align-items:center;min-height:44px;
}
.wordmark:hover{color:var(--text)}
.wordmark span{opacity:.62;margin-left:.32em}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font-size:1rem;font-weight:500;text-decoration:none;color:var(--text-secondary);
}
.site-nav a:hover{color:var(--text)}
.site-nav a[aria-current="page"]{color:var(--text)}
.site-nav .btn{margin-left:10px}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;color:var(--text);
}
.motion-toggle{
  display:none;align-items:center;min-height:44px;padding:0 8px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--ink-600);
}
.motion-toggle:hover{color:var(--text-secondary);text-decoration-color:var(--accent)}
.js .motion-toggle{display:inline-flex}
@media (max-width:919px){
  .site-nav{
    position:absolute;top:var(--header-h);left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-900);border-bottom:1px solid var(--ink-800);
    padding:12px 20px 20px;
  }
  [data-theme="light"] .site-nav{background:var(--bone-100);border-bottom-color:var(--bone-200)}
  .site-nav[data-open="true"]{display:flex}
  .site-nav a{min-height:48px}
  .site-nav .btn{margin:12px 0 0}
  .nav-toggle{display:inline-flex}
}

/* ---- 7. BREADCRUMB ---- */
.breadcrumb{padding:18px 0 0}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px;list-style:none}
.breadcrumb li{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);max-width:none;
}
.breadcrumb li + li::before{content:"/";margin-right:4px;color:var(--ink-600)}
.breadcrumb a{color:var(--text-muted);text-decoration:none;display:inline-block;padding:4px 0}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb [aria-current="page"]{color:var(--text-secondary)}

/* ---- 8. BUTTONS ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;min-width:44px;padding:0 28px;border-radius:2px;
  font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;text-align:center;
  transition:transform var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--accent-fill);color:var(--on-accent)}
.site-nav a.btn--primary{color:var(--on-accent)}
.site-nav a.btn--primary:hover{color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn--secondary{background:transparent;border:1px solid var(--border-control);color:var(--text)}
.btn--secondary:hover{border-color:var(--accent);color:var(--text)}
.btn--ghost{
  min-height:44px;padding:0 4px;background:none;color:var(--text);
  text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;
}
.btn--ghost:hover{color:var(--accent-hover)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.9375rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none}
.btn[hidden]{display:none}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.chapter-cta{margin-top:clamp(32px,4vw,56px)}

/* ---- 9. FORMS ---- */
.audit-form fieldset{border:0;padding:0;margin:0;min-width:0}
.field{margin-bottom:18px}
.field label{display:block;font-weight:500;font-size:.9375rem;margin-bottom:8px}
.field input,.field textarea{
  width:100%;height:48px;padding:0 14px;
  background:var(--input-bg);color:var(--text);
  border:1px solid var(--border-control);border-radius:2px;
  font-size:1rem;font-family:var(--font-body);
}
.field textarea{height:auto;min-height:128px;padding:12px 14px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:var(--accent)}
.field-error{display:flex;align-items:flex-start;gap:8px;margin-top:10px;color:var(--sev-critical);font-size:.9375rem}
.field-error[hidden]{display:none}
.field-error svg{flex:none;width:14px;height:14px;margin-top:4px;fill:currentColor}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--sev-critical)}

/* Choice cards — native radios/checkboxes presented as selectable cards */
.choice{border:0;padding:0;margin:0 0 18px}
.choice legend{font-weight:500;font-size:.9375rem;margin-bottom:10px;padding:0}
.choice__grid{display:grid;gap:10px}
.choice label{
  position:relative;display:flex;align-items:center;min-height:52px;padding:14px 16px;
  background:var(--input-bg);border:1px solid var(--border-control);border-radius:2px;
  font-size:.9375rem;cursor:pointer;
}
.choice input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.choice label:has(input:checked){border-color:var(--accent);background:var(--surface)}
.choice label:has(input:checked)::after{
  content:"";position:absolute;right:16px;width:8px;height:8px;border-radius:50%;background:var(--accent);
}
.choice label:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.form-helper{margin-top:16px;font-size:var(--step--1);color:var(--text-muted)}
.audit-form .btn{width:100%;margin-top:6px}
.audit-form{max-width:560px}

/* Step-by-step variant — progressive enhancement; without JS it is one form */
.audit-form--card{
  background:var(--surface);
  border:1px solid var(--border-decorative);
  border-radius:4px;
  padding:clamp(24px,4vw,40px);
}
.form-steps{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.form-steps .eyebrow{margin:0}
.form-back{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--ink-600);
}
.form-back:hover{color:var(--text-secondary);text-decoration-color:var(--accent)}
.form-back[hidden]{display:none}

/* ---- 10. CARDS ---- */
.card{
  background:var(--surface);border:1px solid var(--border-decorative);
  border-radius:4px;padding:32px;
  transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
}
.card:hover{border-color:color-mix(in srgb,var(--gold-400) 40%,transparent);transform:translateY(-4px)}
.card .eyebrow{display:block;margin-bottom:14px}
.card h3{margin-bottom:10px}
.card p + p{margin-top:1em}
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:919px){.grid--3,.grid--4{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}}
@media (min-width:600px) and (max-width:919px){.grid--4{grid-template-columns:repeat(2,1fr)}}

/* ---- 11. SEVERITY CHIPS ---- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  padding:7px 10px;border-radius:2px;border:1px solid;
}
.chip svg{width:14px;height:14px;flex:none;fill:currentColor}
.chip--critical{color:var(--sev-critical);border-color:color-mix(in srgb,var(--sev-critical) 45%,transparent);background:color-mix(in srgb,var(--sev-critical) 12%,transparent)}
.chip--needswork{color:var(--sev-needswork);border-color:color-mix(in srgb,var(--sev-needswork) 45%,transparent);background:color-mix(in srgb,var(--sev-needswork) 12%,transparent)}
.chip--strong{color:var(--sev-strong);border-color:color-mix(in srgb,var(--sev-strong) 45%,transparent);background:color-mix(in srgb,var(--sev-strong) 12%,transparent)}
.chip--note{color:var(--sev-note);border-color:color-mix(in srgb,var(--sev-note) 45%,transparent);background:color-mix(in srgb,var(--sev-note) 12%,transparent)}

/* ---- 12. SCORE DIAL ---- */
.dial{display:inline-grid;place-items:center;position:relative}
.dial svg{width:100%;height:auto}
.dial__track{stroke:var(--ink-800);fill:none}
[data-theme="light"] .dial__track{stroke:var(--bone-200)}
.dial__arc{stroke:url(#gradMetal);fill:none;stroke-linecap:butt}
.dial__readout{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dial__num{font:700 clamp(2.2rem,4vw,3.4rem)/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--text-display);display:block}
.dial__of{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase}

/* ---- 13. SECTIONS ---- */
.section{padding-block:clamp(88px,11vw,152px);position:relative}
.section--flush-top{padding-top:0}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.section--raised{background:var(--ink-900)}
[data-theme="light"] .section--raised{background:var(--bone-100)}
.rule{border:0;border-top:1px solid var(--border-decorative)}
.chapter-num{position:relative;display:block;height:0;overflow:visible;pointer-events:none}
.chapter-num::before{
  content:attr(data-n);
  position:absolute;top:-.18em;right:0;
  font-family:var(--font-display);font-size:var(--step-mega);line-height:1;
  color:var(--ink-850);z-index:-1;letter-spacing:-.02em;
}
[data-theme="light"] .chapter-num::before{color:var(--bone-100)}

/* ---- 14. HERO ---- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:calc(var(--header-h) + 40px) 0 max(56px,6vh);overflow:clip;
}
.hero__media{position:absolute;inset:0;z-index:-2;background:var(--ink-950)}
.hero__media picture{display:contents}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:var(--grad-scrim)}

/* Frame sequence (step 7) — injected by JS only when the device qualifies.
   Sits above the poster, below the scrim (the ::after paints last). */
.hero__seq{
  position:absolute;inset:0;overflow:hidden;
  opacity:0;transition:opacity 240ms var(--ease-out);
}
.hero__seq.is-ready{opacity:1}
.hero__seq-frame{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100vw,177.78svh);aspect-ratio:16/9;
}
.hero__sheet{position:absolute;left:0;top:0;will-change:transform;background-repeat:no-repeat}
html[data-motion="off"] .hero__seq{display:none}

/* Tiers backdrop (clip 2) — injected by JS on capable desktops only and
   scrubbed by the tiers pin timeline. The ::after scrim keeps section text
   AA over the brightest frames; card text sits on solid card surfaces.
   Fail-open: without JS, with motion off, or under 920px the section is
   its normal static self. */
[data-tiers]{position:relative;overflow:clip}

/* Clip-2 span (§4 + §5): the backdrop layer covers the whole wrapper, and a
   sticky 100svh window inside it holds the footage in the viewport through
   the tiers pin. Sections stack above the media; §4's raised background goes
   transparent only while a backdrop exists (JS toggles .has-backdrop on
   inject/teardown) so every no-media state keeps its normal look. */
.clip2-span,.clip3-span{position:relative}
:is(.clip2-span,.clip3-span) > *{position:relative;z-index:1}
.clip2-span > .tiers__media,.clip3-span > .work__media{z-index:0}
:is(.clip2-span,.clip3-span).has-backdrop > .section--raised{background:transparent}
.tiers__media{
  position:absolute;inset:0;
  opacity:0;transition:opacity 240ms var(--ease-out);
}
.tiers__media.is-ready{opacity:1}
.seq-sticky{position:sticky;top:0;height:100svh;overflow:clip}
.seq-sticky::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.85) 0%,rgba(10,10,11,.55) 30%,rgba(10,10,11,.55) 70%,rgba(10,10,11,.88) 100%);
}
html[data-motion="off"] .tiers__media{display:none}

/* Top-anchored cover box for backdrop sheets: footage starts flush at the
   section's top edge and covers its full height (sides crop, no letterbox
   bands). Sized against the section, not the viewport. */
.seq-cover{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  height:100%;aspect-ratio:16/9;min-width:100%;
}

/* Clip-3 backdrop (the Closer) — same span pattern as clip 2: absolute
   over the [data-clip3-span] wrapper (§9 + §10), sticky window inside,
   scrim on the window. Stacking and the §10 raised-background handling
   come from the shared span rules above. */
.work__media{
  position:absolute;inset:0;
  opacity:0;transition:opacity 240ms var(--ease-out);
}
.work__media.is-ready{opacity:1}
html[data-motion="off"] .work__media{display:none}

/* ---- §9 + §10 over the Closer footage — promenade layout (≥920px).
   He walks dead-centre, so the work cards step aside and take one beat
   of the walk each: left, right, left, with the footage breathing
   between them. Cards go glass-dark (no backdrop-filter — compositing
   cost); copy is untouched, this is layout and surface only. Below
   920px (and with motion off, no JS, low-end) the normal stacked
   sections stand. ---- */
@media (min-width:920px){
  [data-clip3-span] .card{
    background:rgba(10,10,11,.78);
    border:1px solid rgba(232,187,82,.26);
    box-shadow:inset 0 1px 0 rgba(253,252,249,.06),0 24px 48px -24px rgba(0,0,0,.65);
  }
  [data-clip3-span] .card:hover{
    border-color:color-mix(in srgb,var(--gold-400) 55%,transparent);
  }
  [data-clip3-span] [data-work] .grid--3{display:block}
  [data-clip3-span] .work-card{width:min(46%,32rem);padding:36px;display:flex;flex-direction:column}
  [data-clip3-span] .work-card + .work-card{margin-top:clamp(140px,26vh,280px)}
  [data-clip3-span] .work-card:nth-child(2){margin-left:auto}
  [data-clip3-span] [data-work] .section-head{margin-bottom:clamp(72px,12vh,140px)}
  [data-clip3-span] [data-work] .section-head h2{font-size:clamp(2.75rem,5.6vw,5.25rem)}
  [data-clip3-span] .work-card__metric{font-size:var(--step-1);letter-spacing:-.01em}
  [data-clip3-span] .chapter-cta{margin-top:clamp(96px,16vh,180px);display:flex;justify-content:center}
  [data-clip3-span] .btn--secondary{background:rgba(10,10,11,.6)}

  /* §9 testimonials ride the walk as wide, readable quote plates —
     the 3-col grid squeezed them into one-word-per-line strips. */
  [data-clip3-span] section:not([data-work]) .grid--3{display:block}
  [data-clip3-span] .quote-card{
    width:min(72%,46rem);padding:clamp(28px,3.4vw,44px);
  }
  [data-clip3-span] .quote-card + .quote-card{margin-top:clamp(96px,16vh,180px)}
  [data-clip3-span] .quote-card:nth-child(2){margin-left:auto}
  [data-clip3-span] .quote-card blockquote{margin:0}
.quote-card blockquote p{
    font-size:clamp(1.25rem,1.8vw,1.625rem);line-height:1.5;letter-spacing:-.01em;
  }
  [data-clip3-span] .quote-card:last-child{
    width:min(44%,26rem);margin-inline:auto;text-align:center;
  }
  [data-clip3-span] .quote-card:last-child .what-changed{text-align:center}
  [data-clip3-span] section:not([data-work]) .section-head{margin-bottom:clamp(64px,10vh,120px)}
}
.hero__content{position:relative;width:min(100% - 40px,1400px);margin-inline:auto}
.hero__content .eyebrow{display:block;margin-bottom:22px}
.hero__h1{margin-left:-.04em}
.hero__sub{margin-top:26px;font-size:var(--step-1);line-height:1.45;color:var(--cream-100);max-width:34ch}
.hero__subsub{margin-top:12px;color:var(--ink-300);max-width:44ch}
.hero__support{margin-top:22px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400)}
.hero__ctas{margin-top:30px}
.hero__scrollcue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-400);
}
@media (max-width:600px){.hero__scrollcue{display:none}}
@media (max-width:767px){.hero{padding-bottom:110px}}

/* ---- 15. STATS STRIP ---- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:28px 20px}
@media (max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat__value{
  font-weight:700;font-size:var(--step-4);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text-display);
}
.stat__value sub,.stat__value .unit{font-size:.45em;font-weight:600;vertical-align:baseline}
.stat__label{margin-top:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.stats-caption{margin-top:40px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}

/* ---- 16. EVIDENCE CARDS ---- */
.evidence .card{display:flex;flex-direction:column;gap:14px}
.evidence__num{
  font-weight:700;font-size:var(--step-4);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--accent-text);
}
.evidence__src{margin-top:auto;padding-top:18px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}

/* ---- 17. TIERS ---- */
.tier{display:flex;flex-direction:column;align-items:flex-start}
.tier__price{
  font-weight:700;font-size:var(--step-3);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--text-display);margin:6px 0 18px;
}
.tier .display-2{margin-bottom:2px}
.tier .btn{margin-top:auto}
.tier__body{margin-bottom:26px}
.tier__body p + p{margin-top:1em}

/* ---- 18. STEPS ---- */
.steps{counter-reset:step}
.step{border-top:1px solid var(--border-decorative);padding:26px 0}
.step__num{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;color:var(--accent-text)}
.step h3{margin:8px 0 8px}
@media (min-width:920px){
  .steps--grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
  .steps--grid .step{border-top:1px solid var(--border-decorative)}
}

/* ---- 19. PILLAR LIST ---- */
.pillars{border-top:1px solid var(--border-decorative)}
.pillar-row{
  display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:16px 40px;
  padding:30px 0;border-bottom:1px solid var(--border-decorative);
}
@media (max-width:760px){.pillar-row{grid-template-columns:1fr}}
.pillar-row h3 a{text-decoration:none;color:var(--text-display)}
.pillar-row h3 a:hover{color:var(--accent-hover)}
.pillar-row__k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase;display:block;margin-bottom:8px}
.pillar-row p{color:var(--text-secondary)}

/* ---- 20. QUOTES ---- */
.quote-card blockquote{margin:0}
.quote-card blockquote p{font-size:var(--step-1);line-height:1.4;color:var(--text)}
.quote-card figcaption{margin-top:18px;color:var(--text-muted);font-size:.9375rem}
.quote-card .what-changed{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--border-decorative);
  font-size:.9375rem;color:var(--text-secondary);
}
.quote-card .what-changed strong{color:var(--accent-text);font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:6px}

/* ---- 21. WORK CARDS ---- */
.work-card{display:flex;flex-direction:column;gap:10px}
.work-card__metric{
  margin-top:auto;padding-top:18px;
  font-family:var(--font-mono);font-weight:500;font-size:1rem;
  font-variant-numeric:tabular-nums;color:var(--accent-text);
}

/* ---- 22. FINALE ---- */
.finale{min-height:88svh;display:flex;align-items:center}
.finale h2{margin-bottom:36px}
.finale .lead{margin-bottom:48px}

/* ---- 23. FOOTER ---- */
.site-footer{border-top:1px solid var(--ink-800);padding:64px 0 110px;margin-top:auto}
[data-theme="light"] .site-footer{border-top-color:var(--bone-200)}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
@media (max-width:919px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer__grid{grid-template-columns:1fr}}
.site-footer h2{
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);
  border-top:1px solid var(--border-decorative);padding-top:14px;margin-bottom:16px;
}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:2px}
.site-footer a{display:inline-block;padding:5px 0;color:var(--text-secondary);text-decoration:none;min-height:24px}
.site-footer a:hover{color:var(--text)}
.site-footer .wordmark{margin-bottom:12px}
.site-footer__tag{color:var(--text-muted);margin-bottom:8px}
.site-footer__meta{margin-top:48px;padding-top:22px;border-top:1px solid var(--border-decorative);display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between}
.site-footer__meta p{font-size:var(--step--1);color:var(--text-muted);max-width:none}
.footer-contact{margin-top:14px;color:var(--text-secondary);font-size:.9375rem}
.footer-contact a{padding:2px 0}
.footer-social{display:flex;flex-wrap:wrap;gap:2px 6px;color:var(--text-muted)}

/* ---- 23b. SERVERS-DOWN AUDIT MODAL (interim — remove with the modal JS) ---- */
html.am-lock,html.am-lock body{overflow:hidden}
.audit-modal{
  border:1px solid var(--border-decorative);border-radius:4px;
  background:var(--surface);color:var(--text);
  padding:0;width:min(560px,calc(100vw - 32px));
  max-height:min(86svh,860px);overflow:auto;
}
.audit-modal::backdrop{background:rgba(10,10,11,.82)}
.audit-modal__in{position:relative;padding:clamp(24px,4vw,40px)}
.audit-modal__close{
  position:absolute;top:8px;right:8px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--text-muted);font-size:1.5rem;line-height:1;cursor:pointer;
}
.audit-modal__close:hover{color:var(--text)}
.audit-modal__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.audit-modal .field input{background:var(--input-bg)}

/* Numbered findings list (results page) */
.pillar-list{list-style:none;padding:0;margin:0;display:grid;gap:20px;max-width:72ch;counter-reset:pl}
.pillar-list li{counter-increment:pl;position:relative;padding-left:56px;color:var(--text-secondary)}
.pillar-list li strong{color:var(--text)}
.pillar-list li::before{
  content:counter(pl,decimal-leading-zero);
  position:absolute;left:0;top:2px;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;color:var(--accent);
}

/* ---- 23c. LIVE PORTFOLIO CARD ---- */
.live-card{
  width:min(100%,920px);margin-inline:auto;
  background:rgba(10,10,11,.78);border:1px solid var(--border-decorative);
  border-radius:6px;overflow:hidden;
  transition:border-color var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out);
}
.live-card:hover{border-color:var(--accent);box-shadow:0 24px 80px rgba(0,0,0,.5)}
.live-card__chrome{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-bottom:1px solid var(--ink-800);
  background:rgba(20,20,22,.9);
}
.live-card__dots{display:flex;gap:6px}
.live-card__dots i{width:10px;height:10px;border-radius:50%;background:var(--ink-600)}
.live-card__dots i:first-child{background:var(--accent)}
.live-card__url{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--text-muted)}
.live-card__badge{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.live-card__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:live-pulse 2s ease-out infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(232,187,82,.55)}70%{box-shadow:0 0 0 9px rgba(232,187,82,0)}100%{box-shadow:0 0 0 0 rgba(232,187,82,0)}}
html[data-motion="off"] .live-card__badge::before{animation:none}
.live-card__screen{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink-950)}
.live-card__screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.live-card__frame{position:absolute;inset:0;opacity:0;transition:opacity 300ms var(--ease-out)}
.live-card.is-live .live-card__frame{opacity:1}
.live-card__frame iframe{
  width:1440px;height:900px;border:0;background:#fff;
  transform-origin:0 0;pointer-events:none;
}
.live-card.is-live .live-card__screen:hover .live-card__frame iframe{pointer-events:auto}
.live-card__hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
  padding:8px 14px;border-radius:999px;white-space:nowrap;
  background:rgba(10,10,11,.85);border:1px solid var(--ink-700);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-100);
  opacity:0;transition:opacity 220ms var(--ease-out);pointer-events:none;
}
.live-card.is-live .live-card__hint{opacity:1}
.live-card.is-live .live-card__screen:hover .live-card__hint{opacity:0}
.live-card__meta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 24px}
.live-card__meta h3{font-size:var(--step-1)}
.live-card__meta p{margin-top:6px;color:var(--text-muted);max-width:44ch}

.wordmark--logo{display:inline-flex;align-items:center}
.wordmark--logo img{display:block;width:36px;height:36px}


/* Pricing: matrix on wide screens, stacked plan cards on narrow — never a
   sideways scroll (Alfie 2026-10-12) */
.plan-cards{display:none}
@media (max-width:819px){
  .table-scroll{display:none}
  .plan-cards{display:grid;gap:18px}
  .plan-card h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--step-1);margin-top:10px}
  .plan-card__price{color:var(--accent-text);font-size:1rem;white-space:nowrap}
  .plan-card__plus{margin-top:14px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
  .plan-card ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
  .plan-card li{padding-left:22px;position:relative;color:var(--text-secondary)}
  .plan-card li::before{content:"✓";position:absolute;left:0;color:var(--accent-text)}
  .plan-card__meta{margin-top:14px;font-size:.9375rem;color:var(--text-muted)}
  .plan-card .btn{width:100%;margin-top:16px}
}

/* ---- 23d. COOKIE CONSENT BANNER ---- */
.consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:950;
  max-width:560px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--border-decorative);border-radius:6px;
  padding:20px;box-shadow:0 24px 64px rgba(0,0,0,.55);
}
.consent p{font-size:.9375rem;color:var(--text-secondary)}
.consent p a{color:var(--accent-text)}
.consent__row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.consent__row .btn{flex:1;min-width:140px}
@media (max-width:767px){.consent{bottom:84px}} /* clear the sticky CTA */
.footer-link-btn{
  background:none;border:0;padding:2px 0;cursor:pointer;font:inherit;
  color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-600);
}
.footer-link-btn:hover{color:var(--text)}

/* ---- 24. MOBILE STICKY CTA ---- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  padding:10px max(16px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom));
  background:rgba(10,10,11,.94);border-top:1px solid var(--ink-800);
  display:none;
}
.sticky-cta .btn{width:100%}
@media (max-width:767px){
  .sticky-cta{display:block}
  .site-footer{padding-bottom:150px}
  /* The fixed bar must never sit on top of the hero's own buttons */
  .hero{padding-bottom:calc(max(56px,6vh) + 78px)}
}

/* ---- 25. FAQ ---- */
.faq{border-top:1px solid var(--border-decorative)}
.faq__item{border-bottom:1px solid var(--border-decorative);padding:30px 0}
.faq__item h3{margin-bottom:12px}
.faq__item p + p{margin-top:1em}

/* ---- 26. TABLES ---- */
.table-scroll{overflow-x:auto;border:1px solid var(--border-decorative);border-radius:4px}
table{border-collapse:collapse;width:100%;min-width:640px}
caption{text-align:left}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border-decorative);vertical-align:top}
thead th{
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);background:var(--surface);
}
tbody th{font-weight:500;color:var(--text-secondary)}
td{color:var(--text)}
td .yes{color:var(--sev-strong)}
td .no{color:var(--text-muted)}
tr:last-child th,tr:last-child td{border-bottom:0}

/* ---- 27. CASE STUDIES ---- */
.case{border:1px solid var(--border-decorative);border-radius:4px;background:var(--surface);padding:clamp(24px,4vw,44px);margin-bottom:24px}
.case dl{display:grid;grid-template-columns:minmax(130px,180px) 1fr;gap:14px 28px}
@media (max-width:640px){.case dl{grid-template-columns:1fr;gap:4px 0}
  .case dd{margin-bottom:14px}}
.case dt{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);padding-top:4px}
.case dd{color:var(--text)}

/* ---- 28. REPORT MOCK (free-audit page) ---- */
.report-mock{background:var(--surface);border:1px solid var(--border-decorative);border-radius:4px;padding:clamp(24px,4vw,44px);display:grid;gap:32px}
@media (min-width:920px){.report-mock{grid-template-columns:auto 1fr;align-items:start}}
.finding{border:1px solid var(--border-decorative);border-radius:4px;padding:22px;background:var(--ink-900)}
[data-theme="light"] .finding{background:var(--bone-50)}
.finding .chip{margin-bottom:14px}
.finding h3{font-size:var(--step-0);margin-bottom:8px}
.finding__fix{margin-top:16px;padding:14px 16px;border-left:2px solid var(--accent);background:var(--surface)}
.finding__fix .eyebrow{display:block;margin-bottom:8px}
.finding__id{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase}

/* ---- 29. LIVE AUDIT (readout) ---- */
.readout{font-family:var(--font-mono);font-size:.9375rem;line-height:1.9;font-variant-numeric:tabular-nums}
.readout ol{list-style:none}
.readout li{display:flex;gap:14px;align-items:baseline;max-width:none}
.readout .st{flex:none;width:1.2em;text-align:center}
.readout [data-state="done"]{color:var(--text-secondary)}
.readout [data-state="done"] .st{color:var(--sev-strong)}
.readout [data-state="current"]{color:var(--text)}
.readout [data-state="current"] .st{color:var(--accent-text)}
.readout [data-state="todo"]{color:var(--text-muted)}
.counters{display:flex;gap:40px;flex-wrap:wrap;margin:34px 0}
.counters .stat__value{font-size:var(--step-3)}

/* ---- 30. MOTION LAYER (build step 5) ----
   Fail-open contract: every element is visible by default. Animation exists
   only under html[data-motion="on"], which only JS sets, and only when the
   OS preference and the toggle both allow it. No JS, reduced motion, or an
   unsupported browser all land on the static, fully visible page. */
.reveal{opacity:1;transform:none}

/* The hook statement lives inside the hero and plays over the orbit.
   Fail-open: without JS or with motion off it joins the flow below the
   hero copy instead of floating over it. */
.hook__l1,.hook__l2{display:block}
.hero__hook{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;
  pointer-events:none;
}
.hook__body{padding-top:clamp(8px,2vw,24px)}
/* Resting state while motion is on: hidden until the orbit cues it in.
   data-motion is set by the inline head script BEFORE first paint, so the
   statement can never flash over the hero copy on load; the GSAP timeline's
   inline styles override this when it plays. */
html[data-motion="on"] .hook__l1,
html[data-motion="on"] .hook__l2{opacity:0}
/* Motion off / no JS: static placement under the hero copy — no overlap. */
html:not([data-motion="on"]) .hero{flex-direction:column;justify-content:flex-end;align-items:stretch}
html:not([data-motion="on"]) .hero__hook{position:static;margin-top:clamp(40px,8vh,96px)}

/* Native scroll-driven reveals (compositor-only; GSAP is reserved for the
   hero, the hook and the tiers) */
@keyframes sa-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
  html[data-motion="on"] .sa-rise{
    animation:sa-rise linear both;
    animation-timeline:view();
    animation-range:entry 6% entry 42%;
  }
  html[data-motion="on"] :is(.grid,.steps--grid) > .sa-rise:nth-child(2){animation-range:entry 14% entry 52%}
  html[data-motion="on"] :is(.grid,.steps--grid) > .sa-rise:nth-child(3){animation-range:entry 22% entry 62%}
  html[data-motion="on"] :is(.grid,.steps--grid) > .sa-rise:nth-child(4){animation-range:entry 30% entry 72%}
  @media (max-width:919px){
    html[data-motion="on"] :is(.grid,.steps--grid) > .sa-rise:nth-child(2),
    html[data-motion="on"] :is(.grid,.steps--grid) > .sa-rise:nth-child(3),
    html[data-motion="on"] :is(.grid,.steps--grid) > .sa-rise:nth-child(4){animation-range:entry 6% entry 42%}
    /* tiers pin is desktop-only; on touch the cards reveal in sequence naturally */
    html[data-motion="on"] .tier{animation:sa-rise linear both;animation-timeline:view();animation-range:entry 6% entry 45%}
  }
}

/* ---- 31. ABOUT ---- */
.about-photo{max-width:420px;border-radius:4px;border:1px solid var(--border-decorative)}
.about-grid{display:grid;gap:48px}
@media (min-width:920px){.about-grid{grid-template-columns:1fr 420px;align-items:start}}

/* ---- 32. STYLEGUIDE ---- */
.sg-block{margin-bottom:64px}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.sg-swatch{border:1px solid var(--border-decorative);border-radius:4px;overflow:hidden}
.sg-swatch div{height:64px}
.sg-swatch p{font-family:var(--font-mono);font-size:.72rem;padding:8px 10px;color:var(--text-muted);letter-spacing:.05em}
.sg-theme{padding:40px;border-radius:4px;border:1px solid var(--border-decorative);background:var(--bg)}
.sg-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:20px}

/* ---- 33. REDUCED MOTION (verbatim contract, 01 §7.3) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation:none!important;
  transition-duration:.01ms!important;scroll-behavior:auto!important;
}

/* ---- 25. BLOG (posts + insights listing) ---- */
.post-body .wp-block-quote{margin:28px 0;padding:18px 22px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 4px 4px 0}
.post-body .wp-block-quote p{font-style:italic}
.post-body .wp-block-quote cite{display:block;margin-top:10px;font-style:normal;font-size:.875rem;color:var(--text-muted)}
.post-body ol.wp-block-list,.post-body ul.wp-block-list{margin:18px 0;padding-left:22px;display:grid;gap:10px;color:var(--text-secondary)}
.post-body h2{margin-top:52px}
.post-body h3{margin-top:34px;font-size:var(--step-1)}
.post-body p+p{margin-top:16px}
.post-body a{color:var(--accent-text);text-underline-offset:3px}