/* ===========================================================================
   KIHON — kihon.au marketing site
   Built on the Kihon Design System (tokens + components extracted verbatim),
   fused with cinematic dojo photography. Static, dependency-free.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. WEBFONTS  (self-hosted subsets — Newsreader / Hanken Grotesk / IBM Plex Mono)
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/hanken.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: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/hanken.latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/newsreader.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: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/newsreader.latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../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("../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;
}

/* ---------------------------------------------------------------------------
   2. COLOR TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* Paper / surfaces (warm washi off-whites) */
  --paper-0:#FBF8F2; --paper-1:#F6F1E8; --paper-2:#EFE8DA; --paper-3:#E7DECB;
  /* Ink (charcoal type, never pure black) */
  --ink-0:#1B1916; --ink-1:#36322C; --ink-2:#5C564C; --ink-3:#8C8475; --ink-4:#B7AD9A;
  /* Crimson (aka — the primary accent) */
  --crimson-700:#6E1B22; --crimson-600:#8A222C; --crimson-500:#A12C36; --crimson-300:#D98C92; --crimson-100:#F2DDDD;
  /* Gold (restrained highlight) */
  --gold-600:#9C7A33; --gold-500:#BE9646; --gold-300:#DCC078; --gold-100:#F2E7CC;
  /* Timber (natural wood tones) */
  --timber-700:#6B4F37; --timber-500:#8A6A4A; --timber-300:#B6936B; --timber-100:#E8D8C2;
  /* Sage (health / approved / automatic-allowed) */
  --sage-700:#3C5A45; --sage-600:#4F7458; --sage-300:#9DBCA4; --sage-100:#DFEADF;
  /* Charcoal (dark cinematic sections) */
  --char-900:#14120F; --char-800:#1C1916; --char-700:#2A2620; --char-600:#3A352D;
  /* Functional / status */
  --amber-600:#B07A1E; --amber-100:#F4E6C8; --slate-600:#5C6670; --slate-100:#DEE3E6;

  /* Semantic surfaces */
  --surface-page:var(--paper-1); --surface-page-soft:var(--paper-0); --surface-alt:var(--paper-2);
  --surface-card:#FFFFFF; --surface-card-tint:var(--paper-0);
  --surface-inverse:var(--char-800); --surface-inverse-raised:var(--char-700);
  /* Text */
  --text-strong:var(--ink-0); --text-body:var(--ink-1); --text-muted:var(--ink-2);
  --text-faint:var(--ink-3); --text-disabled:var(--ink-4);
  --text-on-crimson:#FBEFEF; --text-on-dark:#EFE9DD; --text-on-dark-muted:#A89F8E;
  /* Brand / accents */
  --accent:var(--crimson-600); --accent-hover:var(--crimson-500); --accent-press:var(--crimson-700);
  --accent-wash:var(--crimson-100); --highlight:var(--gold-500); --highlight-text:var(--gold-600);
  /* Borders / lines */
  --line-hair:rgba(27,25,22,0.10); --line-soft:rgba(27,25,22,0.16);
  --line-strong:rgba(27,25,22,0.28); --line-on-dark:rgba(239,233,221,0.16);
  /* Permission states */
  --state-auto:var(--sage-600); --state-auto-wash:var(--sage-100);
  --state-approval:var(--amber-600); --state-approval-wash:var(--amber-100);
  --state-human:var(--slate-600); --state-human-wash:var(--slate-100);
  --state-disabled:var(--ink-3); --state-disabled-wash:var(--paper-3);
  /* Focus ring — solid for visible 3:1 contrast (gold variant on dark surfaces) */
  --focus-ring:var(--accent);

  /* Typography */
  --font-serif:'Newsreader','Iowan Old Style',Georgia,'Times New Roman',serif;
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --font-display:var(--font-serif); --font-body:var(--font-sans); --font-code:var(--font-mono);
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;
  --t-display-2xl:5.0rem; --t-display-xl:3.75rem; --t-display-lg:2.75rem; --t-display-md:2.125rem;
  --t-h1:1.75rem; --t-h2:1.375rem; --t-h3:1.125rem;
  --t-body-lg:1.1875rem; --t-body:1.0625rem; --t-body-sm:0.9375rem; --t-caption:0.8125rem; --t-eyebrow:0.75rem;
  --lh-tight:1.04; --lh-snug:1.18; --lh-normal:1.5; --lh-relaxed:1.62;
  --ls-display:-0.022em; --ls-tight:-0.012em; --ls-normal:0em; --ls-eyebrow:0.16em; --ls-mono:0.01em;

  /* Spacing & layout */
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --space-10:8rem; --space-11:10rem;
  --container-prose:44rem; --container-narrow:60rem; --container:72rem; --container-wide:84rem;
  --gutter-mobile:1.25rem; --gutter:2rem;
  --section-y:var(--space-11); --section-y-tight:var(--space-9);

  /* Radius / border / shadow / motion */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-pill:999px;
  --border-hair:1px solid var(--line-hair); --border-soft:1px solid var(--line-soft); --border-strong:1px solid var(--line-strong);
  --shadow-xs:0 1px 2px rgba(27,25,22,0.05);
  --shadow-sm:0 1px 3px rgba(27,25,22,0.06),0 1px 2px rgba(27,25,22,0.04);
  --shadow-md:0 4px 14px rgba(27,25,22,0.07),0 2px 5px rgba(27,25,22,0.05);
  --shadow-lg:0 14px 40px rgba(27,25,22,0.10),0 4px 12px rgba(27,25,22,0.06);
  --shadow-xl:0 30px 70px rgba(27,25,22,0.14),0 10px 24px rgba(27,25,22,0.08);
  --shadow-inset:inset 0 1px 2px rgba(27,25,22,0.08);
  --shadow-dark:0 20px 60px rgba(0,0,0,0.45);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); --ease-in-out:cubic-bezier(0.45,0,0.2,1); --ease-entrance:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:480ms; --dur-reveal:720ms;
  --z-base:0; --z-raised:10; --z-sticky:100; --z-overlay:1000; --z-toast:2000;
}

/* ---------------------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body {
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--t-body); line-height:var(--lh-relaxed);
  font-weight:var(--w-regular); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,.kh-display {
  font-family:var(--font-display); color:var(--text-strong); font-weight:var(--w-medium);
  line-height:var(--lh-snug); letter-spacing:var(--ls-tight); margin:0 0 0.5em; text-wrap:balance;
}
h1 { font-size:var(--t-h1); }
h2 { font-size:var(--t-h2); }
h3 { font-size:var(--t-h3); font-family:var(--font-body); font-weight:var(--w-semibold); letter-spacing:var(--ls-normal); }
p { margin:0 0 1em; text-wrap:pretty; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }
strong { font-weight:var(--w-semibold); color:var(--text-strong); }
img { max-width:100%; display:block; }
code,pre,kbd { font-family:var(--font-code); font-size:0.92em; }
::selection { background:var(--crimson-100); color:var(--crimson-700); }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-xs); }
/* On dark/photo surfaces the crimson ring is too low-contrast — switch to gold. */
.hero :focus-visible, .photo-section :focus-visible, .section--dark :focus-visible,
.kh-cinematic :focus-visible, .cta :focus-visible, .site-footer :focus-visible { outline-color:var(--gold-300); }

.kh-eyebrow,.eyebrow {
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-body); font-size:var(--t-eyebrow); font-weight:var(--w-semibold);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--text-muted); margin:0;
}
.eyebrow::before { content:""; width:18px; height:2px; background:currentColor; opacity:0.5; display:inline-block; flex:none; }
.eyebrow--accent { color:var(--accent); }
.eyebrow--accent::before { opacity:1; }
.eyebrow--ondark { color:var(--text-on-dark-muted); }
.eyebrow--gold { color:var(--gold-300); }
.eyebrow--gold::before { opacity:1; }

.kh-mono,.mono { font-family:var(--font-code); letter-spacing:var(--ls-mono); }

.kh-rule { height:1px; border:0; background:var(--line-hair); }
.kh-rule--accent { width:40px; height:2px; border:0; background:var(--accent); }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:50%; transform:translateX(-50%) translateY(-120%);
  top:8px; background:var(--char-800); color:var(--text-on-dark); padding:10px 18px;
  border-radius:var(--radius-md); z-index:var(--z-toast); transition:transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform:translateX(-50%) translateY(0); color:var(--text-on-dark); }

/* ---------------------------------------------------------------------------
   4. TEXTURES & SURFACE MOTIFS
   --------------------------------------------------------------------------- */
.kh-paper-grain { position:relative; }
.kh-paper-grain::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.5; z-index:0;
  background-image:
    radial-gradient(circle at 25% 15%, rgba(139,106,74,0.05) 0, transparent 38%),
    radial-gradient(circle at 78% 70%, rgba(139,34,44,0.035) 0, transparent 42%);
}
.kh-tatami {
  background-color:var(--paper-2);
  background-image:
    repeating-linear-gradient(0deg, rgba(107,79,55,0.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(107,79,55,0.045) 0 1px, transparent 1px 7px);
}
.kh-cinematic {
  background-color:var(--char-800);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(138,34,44,0.16) 0, transparent 60%),
    radial-gradient(80% 60% at 80% 120%, rgba(190,150,70,0.07) 0, transparent 55%);
  color:var(--text-on-dark);
}
.kh-cinematic h1,.kh-cinematic h2,.kh-cinematic h3 { color:var(--text-on-dark); }

/* ---------------------------------------------------------------------------
   5. COMPONENTS (Button, Badge, StaffCard, JourneyStep — from design system)
   --------------------------------------------------------------------------- */
.kh-btn {
  --_bg:var(--accent); --_fg:var(--text-on-crimson); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:0.5em;
  font-family:var(--font-body); font-weight:var(--w-semibold); letter-spacing:-0.005em;
  line-height:1; cursor:pointer; border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-md); text-decoration:none; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kh-btn--md { font-size:var(--t-body-sm); padding:0.72em 1.2em; }
.kh-btn--sm { font-size:var(--t-caption); padding:0.6em 0.95em; border-radius:var(--radius-sm); }
.kh-btn--lg { font-size:var(--t-body); padding:0.95em 1.6em; }
.kh-btn--block { display:flex; width:100%; }
.kh-btn--primary { --_bg:var(--accent); --_fg:var(--text-on-crimson); box-shadow:var(--shadow-sm); }
.kh-btn--primary:hover { --_bg:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); color:var(--text-on-crimson); }
.kh-btn--primary:active { --_bg:var(--accent-press); transform:translateY(0); box-shadow:var(--shadow-xs); }
.kh-btn--secondary { --_bg:transparent; --_fg:var(--ink-0); --_bd:var(--line-strong); }
.kh-btn--secondary:hover { --_bg:var(--paper-2); --_bd:var(--ink-2); color:var(--ink-0); }
.kh-btn--secondary:active { --_bg:var(--paper-3); }
.kh-btn--ghost { --_bg:transparent; --_fg:var(--ink-1); }
.kh-btn--ghost:hover { --_bg:var(--paper-2); color:var(--ink-1); }
.kh-btn--gold { --_bg:transparent; --_fg:var(--gold-600); --_bd:var(--gold-500); }
.kh-btn--gold:hover { --_bg:var(--gold-100); color:var(--gold-600); }
.kh-btn--on-dark { --_bg:var(--paper-0); --_fg:var(--ink-0); }
.kh-btn--on-dark:hover { --_bg:#fff; transform:translateY(-1px); color:var(--ink-0); box-shadow:var(--shadow-dark); }
.kh-btn--on-dark.kh-btn--secondary { --_bg:transparent; --_fg:var(--text-on-dark); --_bd:var(--line-on-dark); }
.kh-btn--on-dark.kh-btn--secondary:hover { --_bg:rgba(255,255,255,0.08); color:var(--text-on-dark); }
.kh-btn:disabled,.kh-btn[aria-disabled="true"] {
  --_bg:var(--paper-3); --_fg:var(--text-disabled); --_bd:transparent;
  cursor:not-allowed; box-shadow:none; transform:none; pointer-events:none; opacity:0.7;
}
.kh-btn .ico { width:1.15em; height:1.15em; }

.kh-badge {
  display:inline-flex; align-items:center; gap:0.45em; font-family:var(--font-body);
  font-weight:var(--w-semibold); font-size:var(--t-caption); line-height:1; letter-spacing:0;
  padding:0.4em 0.7em; border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap;
}
.kh-badge__dot { width:0.5em; height:0.5em; border-radius:50%; background:currentColor; flex:none; }
.kh-badge--neutral { background:var(--paper-2); color:var(--ink-2); border-color:var(--line-hair); }
.kh-badge--crimson { background:var(--crimson-100); color:var(--crimson-700); }
.kh-badge--gold { background:var(--gold-100); color:var(--gold-600); }
.kh-badge--auto { background:var(--state-auto-wash); color:var(--sage-700); }
.kh-badge--approval { background:var(--state-approval-wash); color:#7A5310; }
.kh-badge--human { background:var(--state-human-wash); color:#3C4650; }
.kh-badge--disabled { background:var(--state-disabled-wash); color:var(--ink-2); }

.kh-staff__rows { display:flex; flex-direction:column; gap:var(--space-3); }
.kh-staff__row { display:flex; gap:var(--space-3); font-size:var(--t-body-sm); line-height:var(--lh-normal); }
.kh-staff__k { flex:none; width:74px; font-weight:var(--w-semibold); color:var(--ink-2); font-size:var(--t-caption);
  text-transform:uppercase; letter-spacing:0.08em; padding-top:2px; }
.kh-staff__v { color:var(--ink-1); }

.kh-jstep { display:flex; align-items:flex-start; gap:var(--space-3); font-family:var(--font-body); min-width:0; }
.kh-jstep__node { display:flex; flex-direction:column; align-items:center; flex:none; }
.kh-jstep__dot { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:var(--w-bold); border:2px solid var(--line-strong); background:var(--surface-card); color:var(--ink-3); }
.kh-jstep__dot .ico { width:15px; height:15px; }
.kh-jstep__line { width:2px; flex:1; min-height:22px; background:var(--line-soft); margin:4px 0; }
.kh-jstep--done .kh-jstep__dot { background:var(--accent); border-color:var(--accent); color:var(--text-on-crimson); }
.kh-jstep--active .kh-jstep__dot { background:var(--surface-card); border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-wash); }
.kh-jstep--done .kh-jstep__line { background:var(--accent); }
.kh-jstep__body { padding-bottom:var(--space-6); min-width:0; }
.kh-jstep__label { font-size:var(--t-body); font-weight:var(--w-semibold); color:var(--ink-0); line-height:1.2; }
.kh-jstep--upcoming .kh-jstep__label { color:var(--ink-3); }
.kh-jstep__note { font-size:var(--t-caption); color:var(--ink-3); margin-top:3px; line-height:var(--lh-normal); }

/* ---------------------------------------------------------------------------
   6. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.container { max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.container--narrow { max-width:var(--container-narrow); }
.container--prose { max-width:var(--container-prose); }
.section { padding-block:var(--space-10); position:relative; }
.section--tight { padding-block:var(--space-9); }
.section--dark { color:var(--text-on-dark); }
.section-head { max-width:52rem; }
.section-head h2 {
  font-family:var(--font-serif); font-size:clamp(2rem,1.2rem + 2.6vw,2.75rem);
  color:var(--ink-0); font-weight:var(--w-medium); letter-spacing:-0.02em;
  margin:18px 0 0; line-height:1.12; max-width:24ch;
}
.section--dark .section-head h2 { color:var(--text-on-dark); }
.section-head .lead {
  font-size:var(--t-body-lg); color:var(--ink-2); max-width:46ch; margin:18px 0 0; line-height:1.6;
}
.section--dark .section-head .lead { color:var(--text-on-dark-muted); }
.crimson-accent { color:var(--crimson-300); }
.gold-accent { color:var(--gold-300); }

/* Icon helper */
.ico { width:24px; height:24px; flex:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
  stroke-linejoin:round; fill:none; display:inline-block; vertical-align:middle; }

/* Reveal-on-scroll (guarded so no-JS / reduced-motion shows everything) */
.js .reveal { opacity:0; transform:translateY(20px); transition:opacity var(--dur-reveal) var(--ease-entrance), transform var(--dur-reveal) var(--ease-entrance); }
.js .reveal.is-in { opacity:1; transform:none; }
.js .reveal[data-delay="1"] { transition-delay:80ms; }
.js .reveal[data-delay="2"] { transition-delay:160ms; }
.js .reveal[data-delay="3"] { transition-delay:240ms; }

/* ---------------------------------------------------------------------------
   7. HEADER
   --------------------------------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:var(--z-sticky);
  background:rgba(246,241,232,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color:var(--line-hair); background:rgba(246,241,232,0.92); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:68px; gap:var(--space-5); }
.brand { display:inline-flex; align-items:baseline; gap:9px; line-height:1; }
.brand__bar { width:6px; height:24px; border-radius:3px; background:var(--crimson-600); align-self:center; }
.brand__word { font-family:var(--font-serif); font-weight:var(--w-medium); font-size:1.85rem; letter-spacing:-0.02em; color:var(--ink-0); }
.brand:hover { color:inherit; }
.site-header .brand:hover .brand__word { color:var(--ink-0); }
.nav { display:flex; gap:28px; align-items:center; }
.nav a { font-size:var(--t-body-sm); color:var(--ink-2); font-weight:var(--w-medium); transition:color var(--dur-fast) var(--ease-out); }
.nav a:hover { color:var(--accent); }
.header-actions { display:flex; gap:14px; align-items:center; }
.menu-toggle { display:none; background:none; border:0; padding:10px; cursor:pointer; color:var(--ink-1); border-radius:var(--radius-sm); }
.menu-toggle:hover { background:var(--paper-2); }
.mobile-nav { display:none; }

@media (max-width:900px) {
  .nav { display:none; }
  .menu-toggle { display:inline-flex; }
  .header-actions .kh-btn--sm { min-height:44px; padding-block:0; }
  .mobile-nav {
    display:block; position:fixed; inset:68px 0 auto 0; z-index:var(--z-sticky);
    background:var(--paper-0); border-bottom:1px solid var(--line-soft); box-shadow:var(--shadow-lg);
    padding:var(--space-4) var(--gutter-mobile) var(--space-6);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .mobile-nav.is-open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-nav a { display:block; padding:14px 4px; font-size:var(--t-body); color:var(--ink-1); font-weight:var(--w-medium); border-bottom:1px solid var(--line-hair); }
  .mobile-nav a:last-child { border-bottom:0; }
}

/* ---------------------------------------------------------------------------
   8. HERO
   --------------------------------------------------------------------------- */
.hero { position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero__media { position:absolute; inset:0; z-index:-2; }
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:58% center; }
.hero__scrim {
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(20,18,15,0.74) 0%, rgba(20,18,15,0.40) 38%, rgba(20,18,15,0.06) 64%, rgba(20,18,15,0) 80%),
    linear-gradient(0deg, rgba(20,18,15,0.62) 0%, rgba(20,18,15,0.12) 32%, rgba(20,18,15,0) 55%);
}
.hero__inner { padding-block:clamp(7rem,14vh,12rem) clamp(4rem,9vh,7rem); width:100%; position:relative; }
.hero__content { max-width:40rem; }
.hero .eyebrow { color:var(--gold-300); }
.hero .eyebrow::before { opacity:1; }
.hero__title {
  font-family:var(--font-serif); color:var(--text-on-dark); font-weight:var(--w-medium);
  font-size:clamp(3rem,2.2rem + 6vw,5.25rem); line-height:0.98; letter-spacing:-0.022em;
  margin:18px 0 0; text-wrap:balance; text-shadow:0 1px 30px rgba(0,0,0,0.25);
}
.hero__sub { color:var(--text-on-dark); font-size:clamp(1.0625rem,1rem + 0.4vw,1.25rem);
  max-width:44ch; margin:26px 0 0; line-height:1.6; opacity:0.94; text-shadow:0 1px 16px rgba(0,0,0,0.32); }
.hero__actions { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero__note { display:inline-flex; align-items:center; gap:10px; margin-top:28px; color:var(--text-on-dark);
  font-size:var(--t-body-sm); }
.hero__note .pip { width:8px; height:8px; border-radius:50%; background:var(--gold-300); box-shadow:0 0 0 4px rgba(190,150,70,0.18);
  animation:pip-pulse 2.8s var(--ease-in-out) infinite; }
@keyframes pip-pulse { 0%,100%{ opacity:0.5; } 50%{ opacity:1; } }
.scroll-cue { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); color:var(--text-on-dark-muted);
  display:flex; flex-direction:column; align-items:center; gap:4px; font-size:var(--t-caption); z-index:1; }
.scroll-cue .ico { width:20px; height:20px; animation:cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { 0%,100%{ transform:translateY(0); opacity:0.6; } 50%{ transform:translateY(5px); opacity:1; } }

/* ---------------------------------------------------------------------------
   9. HIDDEN WORK
   --------------------------------------------------------------------------- */
.hidden-layout { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--space-8); align-items:start; margin-top:44px; }
.task-wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.task-chip {
  background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-md);
  padding:14px 16px; font-size:var(--t-body-sm); color:var(--ink-2); box-shadow:var(--shadow-xs);
  display:flex; align-items:center; gap:10px;
}
.task-chip .pip { width:6px; height:6px; border-radius:50%; background:var(--ink-4); flex:none; }
.hidden-photo { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-soft); box-shadow:var(--shadow-lg);
  position:sticky; top:96px; }
.hidden-photo img { width:100%; height:100%; object-fit:cover; aspect-ratio:16/11; }
.hidden-close { font-size:var(--t-body-lg); color:var(--ink-1); margin-top:40px; max-width:42ch; }

@media (max-width:840px) {
  .hidden-layout { grid-template-columns:1fr; gap:var(--space-6); }
  .hidden-photo { position:static; order:-1; }
}

/* ---------------------------------------------------------------------------
   10. FULL-BLEED PHOTO SECTIONS (workforce, journey, closing)
   --------------------------------------------------------------------------- */
.photo-section { position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden; isolation:isolate; color:var(--text-on-dark); }
.photo-section__media { position:absolute; inset:0; z-index:-2; }
.photo-section__media img { width:100%; height:100%; object-fit:cover; }
.photo-section__scrim { position:absolute; inset:0; z-index:-1; }
.photo-section--left .photo-section__scrim {
  background:linear-gradient(90deg, rgba(20,18,15,0.82) 0%, rgba(20,18,15,0.55) 45%, rgba(20,18,15,0.30) 72%, transparent 92%);
}
.photo-section--center .photo-section__scrim {
  background:linear-gradient(0deg, rgba(20,18,15,0.84) 0%, rgba(20,18,15,0.50) 40%, rgba(20,18,15,0.30) 100%);
}
.photo-section__content { max-width:40rem; padding-block:var(--space-9); }
.photo-section h2 {
  font-family:var(--font-serif); color:var(--text-on-dark); font-weight:var(--w-medium);
  font-size:clamp(2.1rem,1.4rem + 3vw,3.25rem); letter-spacing:-0.02em; line-height:1.08; margin:18px 0 0;
  text-shadow:0 1px 18px rgba(0,0,0,0.35);
}
.photo-section .lead { color:var(--text-on-dark); opacity:0.92; font-size:var(--t-body-lg); max-width:46ch; margin-top:20px; line-height:1.6; text-shadow:0 1px 14px rgba(0,0,0,0.3); }
.photo-section .eyebrow { color:var(--gold-300); }
.photo-section .eyebrow::before { opacity:1; }
.photo-section__media img { object-position:center; }

/* ---------------------------------------------------------------------------
   11. DIGITAL STAFF CARDS
   --------------------------------------------------------------------------- */
.staff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); gap:18px; margin-top:48px; }
.staff-card {
  background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.staff-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
/* Media doesn't clip — the chip straddles the divider below it. The image
   (and its hover zoom) is clipped by the picture wrapper instead. */
.staff-card__media { position:relative; aspect-ratio:16/9; background:var(--paper-2); }
.staff-card__media picture { position:absolute; inset:0; overflow:hidden; }
.staff-card__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.staff-card:hover .staff-card__media img { transform:scale(1.04); }
.staff-card__media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg, rgba(20,18,15,0.36), transparent 55%); }
.staff-card__chip {
  position:absolute; left:16px; bottom:-22px; width:48px; height:48px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; background:var(--surface-card);
  color:var(--timber-700); border:1px solid var(--line-soft); box-shadow:var(--shadow-md); z-index:1;
}
.staff-card__chip .ico { width:23px; height:23px; }
.staff-card__body { padding:var(--space-5); padding-top:34px; display:flex; flex-direction:column; gap:var(--space-4); }
.staff-card__role { font-family:var(--font-serif); font-size:var(--t-h2); color:var(--ink-0); line-height:1.1; letter-spacing:-0.01em; margin:0; font-weight:var(--w-medium); }
.staff-card__tagline { font-size:var(--t-caption); color:var(--ink-2); margin-top:3px; }

/* ---------------------------------------------------------------------------
   12. IN CONTROL (permission matrices + policy flow) — dark
   --------------------------------------------------------------------------- */
.perm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:18px; margin-top:48px; }
.perm-card { background:var(--char-700); border:1px solid var(--line-on-dark); border-radius:var(--radius-lg); padding:8px 22px 14px; }
.perm-card__title { color:var(--text-on-dark); font-family:var(--font-serif); font-size:var(--t-h2); padding:16px 0 6px; margin:0; font-weight:var(--w-medium); }
.perm-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line-on-dark); }
.perm-row:last-child { border-bottom:0; }
.perm-row__action { color:var(--text-on-dark); font-size:var(--t-body-sm); font-weight:var(--w-medium); }

.policy-flow { margin-top:52px; display:grid; grid-template-columns:auto 1fr; gap:var(--space-5) var(--space-6); align-items:center; max-width:760px; }
.policy-trigger { grid-column:1 / -1; display:flex; align-items:center; gap:14px; color:var(--text-on-dark); }
.policy-trigger .mono { background:var(--char-700); border:1px solid var(--line-on-dark); padding:9px 14px; border-radius:var(--radius-sm); font-size:var(--t-body-sm); }
.policy-trigger .ico { color:var(--gold-300); }
.policy-rows { grid-column:1 / -1; display:flex; flex-direction:column; gap:10px; }
.policy-rule {
  display:grid; grid-template-columns:170px 1fr; gap:16px; align-items:center;
  background:var(--char-700); border:1px solid var(--line-on-dark); border-left-width:3px;
  border-radius:var(--radius-md); padding:13px 18px;
}
.policy-rule__state { display:flex; align-items:center; gap:9px; font-weight:var(--w-semibold); font-size:var(--t-body-sm); }
.policy-rule__state .dot { width:9px; height:9px; border-radius:50%; flex:none; }
.policy-rule__outcome { color:var(--text-on-dark-muted); font-size:var(--t-body-sm); }
.policy-rule--auto { border-left-color:var(--sage-600); }
.policy-rule--auto .policy-rule__state { color:var(--sage-300); } .policy-rule--auto .dot { background:var(--sage-600); }
.policy-rule--approval { border-left-color:var(--amber-600); }
.policy-rule--approval .policy-rule__state { color:#E3B765; } .policy-rule--approval .dot { background:var(--amber-600); }
.policy-rule--human { border-left-color:var(--slate-600); }
.policy-rule--human .policy-rule__state { color:#A7B2BC; } .policy-rule--human .dot { background:var(--slate-600); }
.policy-rule--disabled { border-left-color:var(--ink-3); }
.policy-rule--disabled .policy-rule__state { color:var(--ink-4); } .policy-rule--disabled .dot { background:var(--ink-3); }

@media (max-width:560px){
  .policy-rule { grid-template-columns:1fr; gap:6px; }
}

/* ---------------------------------------------------------------------------
   13. TRUST — DB comparison + convergence
   --------------------------------------------------------------------------- */
.flow-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px; }
.flow-card {
  background:var(--surface-card); border:1px solid var(--line-soft); border-top:3px solid var(--sage-600);
  border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-md);
}
.flow-card--bad { background:var(--paper-2); border:1px dashed var(--line-strong); border-top:1px dashed var(--line-strong); box-shadow:none; }
.flow-card__label { font-size:var(--t-caption); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:0.14em;
  color:var(--sage-700); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.flow-card--bad .flow-card__label { color:var(--ink-3); }
.flow-card__label .ico { width:16px; height:16px; stroke-width:2.4; }
.flow-card--bad .flow-card__label .ico { color:var(--crimson-600); }
.flow-steps { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.flow-steps .step { font-family:var(--font-code); letter-spacing:var(--ls-mono); font-size:var(--t-body-sm); padding:7px 12px;
  border-radius:var(--radius-sm); background:var(--paper-1); border:1px solid var(--line-soft); color:var(--ink-1); }
.flow-card--bad .flow-steps .step { background:transparent; }
.flow-card--bad .flow-steps .step--src { color:var(--crimson-600); border-color:var(--crimson-300); }
.flow-steps .arrow { color:var(--ink-3); }
.flow-card__note { font-size:var(--t-body-sm); color:var(--ink-2); margin:20px 0 0; }

.converge { margin-top:56px; }
.converge__grid { display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-6); align-items:center; }
.converge__sources { display:flex; flex-direction:column; gap:10px; }
.src-pill { display:flex; align-items:center; gap:10px; background:var(--surface-card); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); padding:10px 14px; font-size:var(--t-body-sm); color:var(--ink-1); box-shadow:var(--shadow-xs); }
.src-pill .ico { width:18px; height:18px; color:var(--timber-700); }
.converge__pipe { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-3); }
.converge__pipe .ico { width:26px; height:26px; }
.converge__core { display:flex; flex-direction:column; gap:12px; }
.core-node { border-radius:var(--radius-md); padding:14px 18px; font-family:var(--font-code); font-size:var(--t-body-sm); letter-spacing:var(--ls-mono); }
.core-node--cmd { background:var(--crimson-600); color:var(--text-on-crimson); box-shadow:var(--shadow-md); font-weight:500; }
.core-node--rule { background:var(--surface-card); border:1px solid var(--line-soft); color:var(--ink-1); }
.core-node--event { background:var(--sage-100); border:1px solid var(--sage-300); color:var(--sage-700); }
.core-node__cap { display:block; font-family:var(--font-body); letter-spacing:0; font-size:var(--t-caption); opacity:0.78; margin-top:3px; }
.converge__down { display:flex; justify-content:center; color:var(--ink-3); margin:8px 0; }

/* Plain-English "connect an AI assistant" explainer */
.ai-use { margin-top:56px; max-width:760px; background:var(--surface-card); border:1px solid var(--line-soft);
  border-radius:var(--radius-xl); padding:var(--space-7); box-shadow:var(--shadow-sm); }
.ai-use__intro { display:flex; align-items:center; gap:16px; }
.ai-use__icon { width:48px; height:48px; border-radius:var(--radius-md); flex:none; display:flex; align-items:center;
  justify-content:center; background:var(--accent-wash); color:var(--accent); }
.ai-use__icon .ico { width:24px; height:24px; }
.ai-use__title { font-family:var(--font-serif); font-weight:var(--w-medium); font-size:var(--t-h2); color:var(--ink-0); margin:5px 0 0; line-height:1.15; }
.ai-use__lead { font-size:var(--t-body); color:var(--ink-1); margin:20px 0 0; line-height:1.6; }
.ai-use__term { color:var(--ink-3); }
.ai-use__examples { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.ai-use__q { display:flex; align-items:flex-start; gap:12px; background:var(--paper-1); border:1px solid var(--line-hair);
  border-radius:var(--radius-md); padding:13px 16px; font-family:var(--font-serif); font-style:italic;
  font-size:var(--t-body); color:var(--ink-1); }
.ai-use__q .ico { width:18px; height:18px; color:var(--accent); margin-top:4px; flex:none; }
.ai-use__foot { display:flex; align-items:flex-start; gap:10px; margin:22px 0 0; font-size:var(--t-body-sm); color:var(--ink-2); }
.ai-use__foot .ico { width:18px; height:18px; color:var(--sage-600); margin-top:2px; flex:none; }

@media (max-width:820px){
  .flow-grid { grid-template-columns:1fr; }
  .converge__grid { grid-template-columns:1fr; gap:var(--space-4); }
  .converge__pipe { flex-direction:row; }
  .converge__pipe .ico { transform:rotate(90deg); }
}

/* ---------------------------------------------------------------------------
   14. WEEK IN LIFE
   --------------------------------------------------------------------------- */
.week-list { margin-top:44px; }
.week-row { display:flex; gap:24px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line-hair); }
.week-row:last-child { border-bottom:0; }
.week-day { flex:none; width:54px; color:var(--crimson-600); font-weight:500; font-size:var(--t-body-sm);
  font-family:var(--font-code); letter-spacing:var(--ls-mono); }
.week-text { font-size:var(--t-body); color:var(--ink-1); }
.week-text strong { color:var(--ink-0); }

/* ---------------------------------------------------------------------------
   15. STUDENT JOURNEY (over photo)
   --------------------------------------------------------------------------- */
.journey-steps { max-width:560px; margin-top:8px; }
.photo-section .kh-jstep__dot { background:rgba(20,18,15,0.5); border-color:rgba(239,233,221,0.45); color:var(--text-on-dark); }
.photo-section .kh-jstep--done .kh-jstep__dot { background:var(--accent); border-color:var(--accent); color:var(--text-on-crimson); }
.photo-section .kh-jstep--active .kh-jstep__dot { background:rgba(20,18,15,0.4); border-color:var(--gold-300); color:var(--gold-300); box-shadow:0 0 0 4px rgba(190,150,70,0.22); }
.photo-section .kh-jstep__line { background:rgba(239,233,221,0.3); }
.photo-section .kh-jstep--done .kh-jstep__line { background:var(--accent); }
.photo-section .kh-jstep__label { color:var(--text-on-dark); }
.photo-section .kh-jstep--upcoming .kh-jstep__label { color:var(--text-on-dark-muted); }
.photo-section .kh-jstep__note { color:var(--text-on-dark-muted); }

/* ---------------------------------------------------------------------------
   16. MODULE LADDER (start with fundamentals)
   --------------------------------------------------------------------------- */
.ladder { margin-top:48px; display:flex; flex-direction:column; gap:16px; }
.rung {
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-5); align-items:center;
  background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6); box-shadow:var(--shadow-xs);
}
.rung__step { display:flex; flex-direction:column; align-items:center; justify-content:center; width:66px; min-height:66px;
  padding:9px 7px; border-radius:var(--radius-md); background:var(--paper-1); border:1px solid var(--line-hair); flex:none; }
.rung__num { font-family:var(--font-serif); font-size:1.5rem; color:var(--crimson-600); line-height:1; }
.rung__phase { font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-2); margin-top:4px;
  text-align:center; line-height:1.25; }
.rung__title { font-family:var(--font-serif); font-size:var(--t-h2); color:var(--ink-0); margin:0 0 6px; }
.rung__items { display:flex; flex-wrap:wrap; gap:8px; }
.rung__items span { font-size:var(--t-caption); color:var(--ink-2); background:var(--paper-1); border:1px solid var(--line-hair);
  border-radius:var(--radius-pill); padding:5px 11px; }
.rung--ai { background:linear-gradient(180deg,var(--char-800),var(--char-900)); border-color:var(--char-600); }
.rung--ai .rung__step { background:var(--char-700); border-color:var(--char-600); }
.rung--ai .rung__num { color:var(--gold-300); }
.rung--ai .rung__phase { color:var(--text-on-dark-muted); }
.rung--ai .rung__title { color:var(--text-on-dark); }
.rung--ai .rung__items span { background:var(--char-700); border-color:var(--char-600); color:var(--text-on-dark); }

@media (max-width:560px){
  .rung { grid-template-columns:1fr; gap:var(--space-3); }
}

/* ---------------------------------------------------------------------------
   17. FEATURE GRID (built for real dojos)
   --------------------------------------------------------------------------- */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); gap:16px; margin-top:48px; }
.feature-card { background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:var(--space-5); box-shadow:var(--shadow-xs); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.feature-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.feature-card__icon { width:42px; height:42px; border-radius:var(--radius-md); background:var(--paper-1); border:1px solid var(--line-hair);
  display:flex; align-items:center; justify-content:center; color:var(--timber-700); margin-bottom:16px; }
.feature-card__icon .ico { width:21px; height:21px; }
.feature-card h3 { font-family:var(--font-serif); font-weight:var(--w-medium); font-size:var(--t-h3); letter-spacing:-0.01em;
  color:var(--ink-0); margin:0 0 6px; }
.feature-card p { font-size:var(--t-body-sm); color:var(--ink-2); margin:0; line-height:1.5; }

/* ---------------------------------------------------------------------------
   18. CLOSING CTA (dark photo) + form
   --------------------------------------------------------------------------- */
.cta { position:relative; overflow:hidden; isolation:isolate; color:var(--text-on-dark); padding-block:clamp(6rem,12vh,9rem); }
.cta__media { position:absolute; inset:0; z-index:-2; }
.cta__media img { width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.cta__scrim { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,18,15,0.86) 0%, rgba(20,18,15,0.72) 45%, rgba(20,18,15,0.86) 100%); }
.cta__inner { text-align:center; }
.cta__title { font-family:var(--font-serif); color:var(--text-on-dark); font-weight:var(--w-medium);
  font-size:clamp(2.2rem,1.5rem + 3.4vw,3.5rem); letter-spacing:-0.022em; line-height:1.08; margin:0 auto; max-width:20ch; }
.cta__sub { color:var(--text-on-dark); opacity:0.86; font-size:var(--t-body-lg); margin:22px auto 0; max-width:44ch; }
.cta-form { display:flex; gap:12px; justify-content:center; margin:40px auto 0; flex-wrap:wrap; max-width:560px; }
.cta-form .field { flex:1 1 260px; min-width:240px; text-align:left; }
.field-control {
  font-family:var(--font-body); font-size:var(--t-body); color:var(--text-on-dark); width:100%;
  background:var(--char-700); border:1px solid var(--line-on-dark); border-radius:var(--radius-md);
  padding:0.85em 1em; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field-control::placeholder { color:var(--text-on-dark-muted); }
.field-control:focus { outline:none; border-color:var(--gold-300); box-shadow:0 0 0 3px rgba(190,150,70,0.28); }
.cta-form .kh-btn { flex:none; }
.cta__formnote { color:var(--text-on-dark-muted); font-size:var(--t-body-sm); margin-top:18px; }
.cta__success { margin:40px auto 0; max-width:46ch; }
.cta__success .tick { width:54px; height:54px; border-radius:50%; background:var(--sage-600); color:#fff; display:flex;
  align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 0 0 6px rgba(79,116,88,0.25); }
.cta__success .tick .ico { width:28px; height:28px; stroke-width:2.5; }
.cta__success p { color:var(--sage-300); font-size:var(--t-body-lg); margin:0; }
.cta__success .small { color:var(--text-on-dark-muted); font-size:var(--t-body-sm); margin-top:10px; }
[hidden] { display:none !important; }

/* ---------------------------------------------------------------------------
   19. FOOTER
   --------------------------------------------------------------------------- */
.site-footer { padding-block:72px 44px; }
.footer-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; }
.footer-brand { max-width:320px; }
.footer-brand .brand__word { color:var(--text-on-dark); }
.footer-brand .brand__bar { background:var(--gold-500); }
.footer-brand p { color:var(--text-on-dark-muted); font-size:var(--t-body-sm); margin-top:16px; line-height:1.6; }
.footer-col h3 { font-size:var(--t-caption); text-transform:uppercase; letter-spacing:0.14em; color:var(--text-on-dark-muted);
  font-weight:var(--w-semibold); margin:0 0 14px; font-family:var(--font-body); }
.footer-col a { display:block; color:var(--text-on-dark); font-size:var(--t-body-sm); margin-bottom:10px; opacity:0.9; }
.footer-col a:hover { color:var(--gold-300); opacity:1; }
.footer-bottom { border-top:1px solid var(--line-on-dark); margin-top:48px; padding-top:24px; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--text-on-dark-muted); font-size:var(--t-caption); }

/* ---------------------------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:720px) {
  .container { padding-inline:var(--gutter-mobile); }
  .section { padding-block:var(--space-9); }
  .ai-use { padding:var(--space-6); }
  .ai-use__intro { gap:13px; }
  .ai-use__icon { width:42px; height:42px; }
  .hero { min-height:90vh; }
  .hero__media img { object-position:64% center; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(20,18,15,0.78) 0%, rgba(20,18,15,0.55) 55%, rgba(20,18,15,0.30) 100%),
      linear-gradient(0deg, rgba(20,18,15,0.72) 0%, rgba(20,18,15,0.15) 45%, transparent 70%);
  }
  /* Full-width mobile text needs a dark base across the whole column, not just the left. */
  .photo-section--left .photo-section__scrim {
    background:
      linear-gradient(180deg, rgba(20,18,15,0.58) 0%, rgba(20,18,15,0.82) 100%),
      linear-gradient(90deg, rgba(20,18,15,0.80) 0%, rgba(20,18,15,0.45) 60%, rgba(20,18,15,0.30) 100%);
  }
  .footer-top { gap:28px; }
  .footer-col { min-width:44%; }
}
@media (max-width:420px) {
  .hero__actions .kh-btn { width:100%; }
  .cta-form .kh-btn { width:100%; }
}

/* ---------------------------------------------------------------------------
   21. REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  .js .reveal { opacity:1 !important; transform:none !important; }
  .hero__note .pip, .scroll-cue .ico { animation:none; }
}