/* ============================================================================
   THREAT RESPONSE: Website Design System  (tr-system.css)
   Pass 1 foundation. Built from brand/threat-response-DESIGN.md.
   Brand identity is LOCKED: crimson/ink/steel, Saira + IBM Plex Sans, lion crest.
   Frame dark, content light. Crimson is the one loud voice, never a flood.
   Rule for every contributor: ZERO em dashes, anywhere, ever.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root{
  /* Brand palette (locked hex from the design system) */
  --crimson:#C00010;        /* primary accent on light: fills, rules, key numbers */
  --signal:#EA3B2E;         /* crimson for text/icons on dark (AA on Ink) */
  --crimson-deep:#8E0410;   /* depth, hovers, pressed, gradients */
  --ink:#0E0E10;            /* brand black: dark frames, headers, footers */
  --gunmetal:#21262D;       /* secondary dark surface */
  --steel:#C8CDD4;          /* the only metallic: hairlines, linework on dark */
  --slate:#586068;          /* secondary text, captions, metadata on light */
  --paper:#F6F4F0;          /* default content bg: warm off-white */
  --white:#FFFFFF;          /* cards/callouts on paper */
  --line:#E3E0D9;           /* hairlines + dividers on light */

  /* Derived neutrals (tinted toward ink, not pure greys) */
  --ink-80:rgba(14,14,16,0.80);
  --ink-60:rgba(14,14,16,0.60);
  --ink-40:rgba(14,14,16,0.40);
  --gunmetal-soft:#2B313A;
  --steel-dim:rgba(200,205,212,0.16); /* hairlines on dark */
  --steel-60:rgba(200,205,212,0.62);
  --paper-2:#EFEBE3;        /* alternating light band */

  /* Functional (rare) */
  --ok:#2E7D55;
  --warn:#B97A0B;

  /* Fonts */
  --font-display:'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale (1.25+ ratio, clamp for headings) */
  --fs-eyebrow:clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
  --fs-caption:clamp(0.78rem, 0.76rem + 0.12vw, 0.84rem);
  --fs-body:clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --fs-lead:clamp(1.15rem, 1.06rem + 0.5vw, 1.4rem);
  --fs-h3:clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2:clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
  --fs-h1:clamp(2.4rem, 1.8rem + 3vw, 4rem);
  --fs-display:clamp(3rem, 2rem + 5.2vw, 6.25rem);

  /* Spacing scale */
  --sp-1:0.25rem;  --sp-2:0.5rem;   --sp-3:0.75rem;  --sp-4:1rem;
  --sp-5:1.5rem;   --sp-6:2rem;     --sp-7:2.5rem;   --sp-8:3rem;
  --sp-9:4rem;     --sp-10:5rem;    --sp-12:6rem;    --sp-16:8rem;
  --section-y:clamp(4rem, 2.5rem + 6vw, 8rem);   /* vertical section rhythm */
  --gutter:clamp(1.5rem, 0.5rem + 3vw, 3rem);    /* page side gutter */

  /* Structure */
  --maxw:1200px;        /* standard content width */
  --maxw-wide:1360px;   /* full-bleed-ish bands */
  --maxw-prose:68ch;    /* measure for long copy */
  --radius:10px;
  --radius-sm:8px;
  --radius-lg:16px;
  --radius-pill:999px;
  --header-h:74px;

  /* Elevation (restrained, warm) */
  --shadow-1:0 1px 2px rgba(14,14,16,0.05), 0 1px 1px rgba(14,14,16,0.04);
  --shadow-2:0 12px 30px -12px rgba(14,14,16,0.18), 0 2px 6px rgba(14,14,16,0.06);
  --shadow-ink:0 24px 60px -24px rgba(0,0,0,0.55);

  /* Motion (pass 1: structural only; pass 3 expands) */
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-expo-ish */
  --t-fast:140ms;
  --t-base:220ms;
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-body);
  font-kerning:normal;
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{ display:block; max-width:100%; height:auto; }
img{ font-style:italic; color:var(--slate); } /* alt-text shows gracefully if missing */
a{ color:inherit; text-decoration:none; }
.prose a:not(.btn),.caption a:not(.btn),.faq__answer a,.form__note a,
.contact-row a,.book-aside p a,.site-footer__contact a{
  text-decoration:underline;
  text-decoration-thickness:0.08em;
  text-underline-offset:0.18em;
}
button,input,textarea,select{ font:inherit; color:inherit; }
ul,ol{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:0; }
strong{ font-weight:600; }

:focus-visible{ outline:3px solid var(--signal); outline-offset:3px; border-radius:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--crimson); color:#fff; padding:0.75rem 1.25rem;
  font-family:var(--font-display); font-weight:600; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

/* ----------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:var(--maxw-wide); }
.container--prose{ max-width:var(--maxw-prose); }

.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* Surfaces */
.surface-ink{ background:var(--ink); color:var(--steel); }
.surface-gunmetal{ background:var(--gunmetal); color:var(--steel); }
.surface-paper{ background:var(--paper); color:var(--ink); }
.surface-paper-2{ background:var(--paper-2); color:var(--ink); }
.surface-white{ background:var(--white); color:var(--ink); }
.surface-ink h1,.surface-ink h2,.surface-ink h3,
.surface-gunmetal h1,.surface-gunmetal h2,.surface-gunmetal h3{ color:var(--white); }

/* Asymmetric split (editorial). Collapses on narrow. */
.split{ display:grid; gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:center; }
.split > *{ min-width:0; }
.split--58{ grid-template-columns:1.35fr 1fr; }
.split--46{ grid-template-columns:1fr 1.35fr; }
.split--even{ grid-template-columns:1fr 1fr; }
@media (max-width:860px){
  .split--58,.split--46,.split--even{ grid-template-columns:1fr; }
}

/* Auto-fit grids (breakpoint-free) */
.grid{ display:grid; gap:clamp(1rem, 0.5rem + 1.5vw, 1.75rem); }
.grid--auto{ grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr)); }
.grid--auto-lg{ grid-template-columns:repeat(auto-fit, minmax(min(100%,320px), 1fr)); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(min(100%,210px), 1fr)); }
@media (max-width:760px){ .grid--2,.grid--3{ grid-template-columns:1fr; } }

/* Stack rhythm helper */
.stack > * + *{ margin-top:var(--sp-4); }
.stack-lg > * + *{ margin-top:var(--sp-6); }

/* ----------------------------------------------------------------------------
   4. TYPOGRAPHY CLASSES
   ------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:0.14em;
  color:var(--crimson); display:inline-flex; align-items:center; gap:0.8rem;
}
.surface-ink .eyebrow,.surface-gunmetal .eyebrow,.eyebrow--dark{ color:var(--signal); }
.eyebrow--rule::after{ content:""; width:46px; height:1px; background:currentColor; opacity:0.8; }

.display{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-display); line-height:1.0; letter-spacing:0; }
.h1{ font-size:var(--fs-h1); }
.h2{ font-size:var(--fs-h2); }
.h3{ font-size:var(--fs-h3); }
.accent{ font-weight:600; font-style:italic; color:var(--crimson); }
.surface-ink .accent,.surface-gunmetal .accent,.accent--dark{ color:var(--signal); }

.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--slate); max-width:54ch; }
.surface-ink .lead,.surface-gunmetal .lead{ color:var(--steel); }
.prose{ max-width:var(--maxw-prose); }
.prose p + p{ margin-top:var(--sp-4); }
.prose-col{ max-width:var(--maxw-prose); }
.caption{ font-size:var(--fs-caption); color:var(--slate); letter-spacing:0.01em; }
.surface-ink .caption,.surface-gunmetal .caption{ color:var(--steel-60); }
.measure{ max-width:var(--maxw-prose); }
.text-crimson{ color:var(--crimson); }
.surface-ink .text-crimson{ color:var(--signal); }

/* Light type on dark reads lighter: give it air */
.surface-ink p,.surface-gunmetal p{ line-height:1.7; }

/* ----------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.55rem;
  font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1;
  letter-spacing:0.01em; padding:0.95rem 1.6rem; border-radius:var(--radius-sm);
  border:1.5px solid transparent; cursor:pointer; text-align:center;
  transition:background var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out),
             color var(--t-base) var(--ease-out);
}
.btn .ico{ width:18px; height:18px; }

.btn--primary{ background:var(--crimson); color:#fff; }
.btn--primary:hover{ background:var(--crimson-deep); color:#fff; }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink-40); }
.btn--ghost:hover{ border-color:var(--ink); background:rgba(14,14,16,0.04); }
.surface-ink .btn--ghost,.surface-gunmetal .btn--ghost{ color:var(--white); border-color:var(--steel-60); }
.surface-ink .btn--ghost:hover,.surface-gunmetal .btn--ghost:hover{ border-color:var(--steel); background:rgba(200,205,212,0.08); }

.btn--lg{ padding:1.1rem 2rem; font-size:1.075rem; }
.btn--block{ width:100%; }

/* ----------------------------------------------------------------------------
   6. SITE HEADER + NAV
   ------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100; background:var(--ink);
  border-bottom:1px solid var(--steel-dim);
  height:var(--header-h); display:flex; align-items:center;
}
.site-header__inner{ display:flex; align-items:center; gap:clamp(0.75rem,2vw,2rem); width:100%; }
.brand-lockup{ display:inline-flex; align-items:center; gap:0.55rem; flex:0 1 auto; min-width:0; }
.brand-lockup img{ width:auto; flex:0 0 auto; }
.brand-lockup__wordmark{
  display:flex; flex-direction:column; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-style:italic;
  font-size:0.92rem; line-height:0.82; letter-spacing:0.015em; white-space:nowrap;
}
.brand-lockup__threat{ color:var(--signal); }
.brand-lockup__response{ color:var(--white); }
.site-header__logo img{ height:36px; }
@media (min-width:1200px){ .site-header__logo img{ height:40px; } }
.site-nav{ margin-left:auto; }
.site-nav ul{ display:flex; align-items:center; gap:clamp(1rem, 0.4rem + 1.2vw, 2rem); }
.site-nav a{
  font-family:var(--font-display); font-weight:500; font-size:0.95rem;
  color:var(--steel); padding:0.4rem 0; position:relative;
}
.site-nav a:hover{ color:var(--white); }
.site-nav a[aria-current="page"]{ color:var(--white); }
.site-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--signal);
}
.site-header__cta{ margin-left:0.5rem; }
.nav-toggle{ display:none; background:none; border:0; color:var(--steel); width:44px; height:44px; margin-left:auto; }
.nav-toggle svg{ width:26px; height:26px; }

@media (max-width:920px){
  .site-header{ height:auto; min-height:var(--header-h); }
  .site-header__inner{ flex-wrap:wrap; padding-block:0.75rem; }
  .site-nav{
    width:100%; margin:0;
  }
  .site-nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:0.5rem 0; }
  .site-nav li{ border-top:1px solid var(--steel-dim); }
  .site-nav a{ display:block; padding:1rem 0; font-size:1.05rem; }
  .site-nav .site-header__cta{ margin:1rem 0 0; }

  .nav-enhanced .site-header{ height:var(--header-h); min-height:0; }
  .nav-enhanced .site-header__inner{ flex-wrap:nowrap; padding-block:0; }
  .nav-enhanced .site-nav{
    position:fixed; inset:var(--header-h) 0 auto 0; background:var(--ink);
    width:auto; border-bottom:1px solid var(--steel-dim); margin:0;
    max-height:calc(100vh - var(--header-h));
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto; visibility:hidden; pointer-events:none;
    transform:translateY(-120%);
    box-shadow:var(--shadow-ink);
  }
  .nav-enhanced .site-nav[data-open="true"]{ transform:translateY(0); visibility:visible; pointer-events:auto; }
  .nav-enhanced .site-nav ul{ padding:0.5rem var(--gutter) 1.5rem; }
  .nav-enhanced .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; }
}

@media (max-width:920px) and (prefers-reduced-motion:no-preference){
  .nav-enhanced .site-nav{
    transition:transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
  }
  .nav-enhanced .site-nav[data-open="true"]{ transition-delay:0s; }
}

/* ----------------------------------------------------------------------------
   7. EYEBROW + SECTION HEADER
   ------------------------------------------------------------------------- */
.section-head{ max-width:60ch; margin-bottom:clamp(2rem, 1.2rem + 2vw, 3.5rem); }
.section-head .eyebrow{ margin-bottom:1rem; }
.section-head .h2{ margin-bottom:1rem; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.rule{ height:1px; background:var(--line); border:0; }
.surface-ink .rule,.surface-gunmetal .rule{ background:var(--steel-dim); }
.rule--crimson{ background:var(--crimson); height:2px; width:54px; border:0; }

/* ----------------------------------------------------------------------------
   8. LEAD FRAMEWORK BLOCK  (signature component)
   ------------------------------------------------------------------------- */
.lead-block{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem, 0.5rem + 1vw, 1.5rem); }
@media (max-width:820px){ .lead-block{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .lead-block{ grid-template-columns:1fr; } }
.lead-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.25rem, 1rem + 1vw, 1.75rem); position:relative;
  transition:box-shadow var(--t-base) var(--ease-out);
}
.surface-ink .lead-card,.surface-gunmetal .lead-card{ background:var(--gunmetal-soft); border-color:var(--steel-dim); }
.lead-chip{
  width:48px; height:48px; border-radius:var(--radius-sm); background:var(--crimson);
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.lead-card h3{ font-size:1.2rem; margin-bottom:0.4rem; letter-spacing:0; }
.surface-ink .lead-card h3,.surface-gunmetal .lead-card h3{ color:var(--white); }
.lead-card p{ font-size:0.95rem; color:var(--slate); }
.surface-ink .lead-card p,.surface-gunmetal .lead-card p{ color:var(--steel); }

/* ----------------------------------------------------------------------------
   9. CREDENTIAL STRIP
   ------------------------------------------------------------------------- */
.creds{ display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem; }
.cred-pill{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-family:var(--font-display); font-weight:600; font-size:0.74rem;
  text-transform:uppercase; letter-spacing:0.09em;
  padding:0.45rem 0.85rem; border-radius:var(--radius-pill);
  border:1px solid var(--line); color:var(--slate); background:var(--white);
}
.surface-ink .cred-pill,.surface-gunmetal .cred-pill{ border-color:var(--steel-dim); color:var(--steel); background:transparent; }
.cred-pill--crimson{ background:var(--crimson); border-color:var(--crimson); color:#fff; }
.cred-pill .ico{ width:14px; height:14px; color:var(--crimson); }
.surface-ink .cred-pill .ico{ color:var(--signal); }
.cred-pill--crimson .ico{ color:#fff; }

/* ----------------------------------------------------------------------------
   10. STAT BLOCK
   ------------------------------------------------------------------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(1.5rem, 1rem + 2vw, 3rem); }
.stat__num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem); color:var(--crimson); line-height:1; letter-spacing:0; }
.surface-ink .stat__num,.surface-gunmetal .stat__num{ color:var(--signal); }
.stat__label{ margin-top:0.5rem; font-size:0.95rem; color:var(--slate); max-width:24ch; }
.surface-ink .stat__label,.surface-gunmetal .stat__label{ color:var(--steel); }

/* ----------------------------------------------------------------------------
   11. CARDS (service / generic). Vary them; never an identical icon-grid wall.
   ------------------------------------------------------------------------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.5rem, 1.1rem + 1.2vw, 2rem); display:flex; flex-direction:column; gap:0.7rem;
  transition:box-shadow var(--t-base) var(--ease-out), border-color var(--t-base);
}
.card__kicker{ font-family:var(--font-display); font-weight:600; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--crimson); }
.card__title{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; line-height:1.12; letter-spacing:0; color:var(--ink); }
.card__body{ font-size:0.97rem; color:var(--slate); }
.card__icon{ width:30px; height:30px; color:var(--crimson); margin-bottom:0.3rem; }
.card__num{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--crimson); }
.card--ink{ background:var(--gunmetal-soft); border-color:var(--steel-dim); }
.card--ink .card__title{ color:var(--white); }
.card--ink .card__body{ color:var(--steel); }
.card--feature{ grid-column:span 2; }
@media (max-width:760px){ .card--feature{ grid-column:auto; } }
.card-link{ margin-top:auto; padding-top:0.4rem; font-family:var(--font-display); font-weight:600; font-size:0.9rem; color:var(--crimson); display:inline-flex; align-items:center; gap:0.4rem; }
.card-link .ico{ width:16px; height:16px; }

/* Numbered process steps (alternative to cards) */
.steps{ display:grid; gap:0; counter-reset:step; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.25rem; padding:1.5rem 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step__n{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--crimson); line-height:1; letter-spacing:0; }
.step h3{ font-size:1.2rem; margin-bottom:0.3rem; letter-spacing:0; }
.step p{ color:var(--slate); font-size:0.97rem; }

/* ----------------------------------------------------------------------------
   13. MEDIA
   Real images use <img class="media__img">.
   ------------------------------------------------------------------------- */
.media{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--gunmetal); }
.media--hero{ border-radius:0; }
.media--16x9{ aspect-ratio:16/9; }
.media--4x3{ aspect-ratio:4/3; }
.media--1x1{ aspect-ratio:1/1; }
.media--3x4{ aspect-ratio:3/4; }
.media--21x9{ aspect-ratio:21/9; }
.media__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Scrim for text-over-photo */
.scrim{ position:absolute; inset:0; pointer-events:none; }
.scrim--bottom{ background:linear-gradient(180deg, transparent 30%, rgba(14,14,16,0.85) 100%); }
.scrim--left{ background:linear-gradient(90deg, var(--ink) 4%, rgba(14,14,16,0.55) 36%, rgba(14,14,16,0.05) 70%); }
.scrim--full{ background:rgba(14,14,16,0.55); }

.figure-caption{ margin-top:0.6rem; font-size:0.8rem; color:var(--slate); }

/* Faint lion watermark utility */
.lion-watermark{ position:absolute; pointer-events:none; opacity:0.05; width:160px; height:auto; z-index:0; }

/* ----------------------------------------------------------------------------
   14. HERO
   ------------------------------------------------------------------------- */
.hero{ position:relative; background:var(--ink); color:var(--steel); overflow:hidden; }
.hero--photo{ min-height:min(86vh,760px); display:flex; align-items:center; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__inner{ position:relative; z-index:2; padding-block:clamp(3.5rem, 2rem + 6vw, 7rem); width:100%; }
.hero__eyebrow{ margin-bottom:1.25rem; }
.hero__title{ color:var(--white); font-size:var(--fs-display); line-height:1.0; letter-spacing:0; max-width:16ch; }
.hero__sub{ margin-top:1.5rem; font-size:var(--fs-lead); color:var(--steel); max-width:48ch; line-height:1.55; }
.hero__actions{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:1rem; }
.hero__creds{ margin-top:2.5rem; }

/* ----------------------------------------------------------------------------
   15. MISSION + CTA BANDS
   ------------------------------------------------------------------------- */
.mission-band{ background:var(--crimson-deep); color:#fff; }
.mission-band .container{ padding-block:clamp(2rem, 1.2rem + 2vw, 3rem); }
.mission-band p{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem, 1rem + 1.4vw, 1.9rem); line-height:1.25; max-width:32ch; }
.mission-band p:not(.eyebrow){ letter-spacing:0; }
.mission-band .eyebrow{ color:rgba(255,255,255,0.7); margin-bottom:0.75rem; }

.cta-band{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.cta-band__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; padding-block:clamp(3rem, 2rem + 3vw, 5rem); position:relative; z-index:1; }
.cta-band h2{ color:var(--white); max-width:20ch; }
.cta-band p{ color:var(--steel); margin-top:0.75rem; max-width:46ch; }
.cta-band .lion-watermark{ right:-30px; bottom:-30px; width:280px; opacity:0.06; }

/* ----------------------------------------------------------------------------
   16. FAQ (details/summary): GEO/AI fuel + a11y native
   ------------------------------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.35rem 0; font-family:var(--font-display); font-weight:600; font-size:1.12rem; letter-spacing:0; color:var(--ink);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary .ico{ flex:0 0 22px; width:22px; height:22px; color:var(--crimson); margin-top:2px; }
.faq__answer{ padding:0 0 1.5rem; color:var(--slate); max-width:var(--maxw-prose); }
.faq__answer p + p{ margin-top:0.75rem; }
.surface-ink .faq,.surface-ink .faq__item{ border-color:var(--steel-dim); }
.surface-ink .faq__item summary{ color:var(--white); }
.surface-ink .faq__answer{ color:var(--steel); }

/* ----------------------------------------------------------------------------
   17. FORMS  (Book a Consultation)
   ------------------------------------------------------------------------- */
.form{ display:grid; grid-template-columns:minmax(0, 1fr); gap:1.1rem; }
.form__row{ display:grid; gap:1.1rem; }
@media (min-width:620px){ .form__row--2{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; min-width:0; gap:0.4rem; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:0.85rem; letter-spacing:0.01em; color:var(--ink); }
.surface-ink .field label,.surface-gunmetal .field label{ color:var(--steel); }
.field .req{ color:var(--crimson); }
.field input,.field select,.field textarea{
  width:100%; padding:0.85rem 1.25rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--white); color:var(--ink); transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--crimson); box-shadow:0 0 0 3px rgba(192,0,16,0.12); }
.field input::placeholder,.field textarea::placeholder{ color:var(--slate); opacity:0.7; }
.form__note{ font-size:0.82rem; color:var(--slate); }

/* ----------------------------------------------------------------------------
   18. BREADCRUMB + PAGE HEADER (inner pages)
   ------------------------------------------------------------------------- */
.page-hero{ background:var(--ink); color:var(--steel); position:relative; overflow:hidden; }
.page-hero .container{ padding-block:clamp(3rem, 2rem + 4vw, 5.5rem); position:relative; z-index:1; }
.page-hero .eyebrow{ color:var(--signal); }
.page-hero h1{ color:var(--white); font-size:var(--fs-h1); letter-spacing:0; max-width:18ch; }
.page-hero .lead{ margin-top:1.1rem; max-width:52ch; }
.page-hero .lion-watermark{ right:2%; top:50%; transform:translateY(-50%); width:300px; opacity:0.05; }
.breadcrumb{ display:flex; gap:0.5rem; align-items:center; font-size:0.8rem; color:var(--steel-60); margin-bottom:1.25rem; font-family:var(--font-display); letter-spacing:0.03em; }
.breadcrumb a:hover{ color:var(--steel); }
.breadcrumb .sep{ opacity:0.5; }

/* ----------------------------------------------------------------------------
   19. FOOTER
   ------------------------------------------------------------------------- */
.site-footer{ background:var(--ink); color:var(--steel); padding-block:clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.site-footer__grid{ display:grid; gap:2.5rem; grid-template-columns:1.5fr 1fr 1fr; }
@media (max-width:820px){ .site-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .site-footer__grid{ grid-template-columns:1fr; } }
.site-footer__logo{ margin-bottom:1.25rem; }
.site-footer__logo img{ height:52px; }
.site-footer__logo .brand-lockup__wordmark{ font-size:1.08rem; }
.site-footer__tag{ color:var(--steel); max-width:34ch; font-size:0.95rem; }
.site-footer h3{ font-family:var(--font-display); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--steel-60); margin-bottom:1rem; }
.site-footer__nav a{ display:block; padding:0.4rem 0; color:var(--steel); font-size:0.95rem; }
.site-footer__nav a:hover{ color:var(--white); }
.site-footer__contact{ font-size:0.95rem; line-height:1.9; color:var(--steel); overflow-wrap:anywhere; }
.site-footer__contact a:hover{ color:var(--white); }
.site-footer__social{ display:flex; gap:0.75rem; margin-top:1.25rem; }
.site-footer__social a{ width:40px; height:40px; border:1px solid var(--steel-dim); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--steel); transition:border-color var(--t-fast), color var(--t-fast); }
.site-footer__social a:hover{ border-color:var(--signal); color:var(--white); }
.site-footer__social svg{ width:18px; height:18px; }
.site-footer__bar{ margin-top:clamp(2.5rem, 2rem + 2vw, 3.5rem); border-top:1px solid var(--steel-dim); padding-block:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.site-footer__bar .creds{ gap:0.5rem; }
.site-footer__legal{ font-size:0.8rem; color:var(--steel-60); }

/* ----------------------------------------------------------------------------
   20. UTILITIES
   ------------------------------------------------------------------------- */
.u-center{ text-align:center; }
.u-mt-0{ margin-top:0; }
.u-mt-4{ margin-top:var(--sp-4); }
.u-mt-6{ margin-top:var(--sp-6); }
.u-mt-8{ margin-top:var(--sp-8); }
.u-mb-0{ margin-bottom:0; }
.u-maxw-prose{ max-width:var(--maxw-prose); }
.u-flex{ display:flex; }
.u-wrap{ flex-wrap:wrap; }
.u-gap-4{ gap:var(--sp-4); }
.u-items-center{ align-items:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
main [id]{ scroll-margin-top:calc(var(--header-h) + 1rem); }

/* Entrance-animation hooks (inert in pass 1; pass 3 activates).
   Content is fully visible by default so the mockup never depends on JS. */
[data-reveal]{ opacity:1; }
@media (prefers-reduced-motion:no-preference){
  .js-reveal [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .js-reveal [data-reveal].is-in{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------------------------
   21. VIDEO  (Pass 2)
   Hero background video sits over the still poster (still shows if it fails or
   on reduced-motion). Galleries use click-to-open poster facades so the page
   stays light and screenshots stay crisp.
   ------------------------------------------------------------------------- */
.hero__video{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero__video iframe{ width:100%; height:100%; border:0; display:block; }
.hero--photo .hero__media .scrim{ z-index:2; }
@media (prefers-reduced-motion:reduce){ .hero__video{ display:none; } }
.hero-video-control{
  position:absolute; right:0.75rem; bottom:0.75rem; z-index:3;
  display:inline-flex; align-items:center; gap:0.5rem;
  border:1px solid var(--steel-dim); border-radius:var(--radius-pill);
  background:rgba(14,14,16,0.9); color:var(--steel);
  padding:0.55rem 0.8rem; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:0.78rem;
  letter-spacing:0.02em;
}
.hero-video-control::before{
  content:""; width:0.5rem; height:0.5rem; border-radius:50%;
  background:var(--signal);
}
.hero-video-control[data-state="paused"]::before{ background:var(--steel); }
.hero-video-control[hidden]{ display:none; }
.hero-video-control:disabled{ cursor:default; opacity:0.7; }

/* Poster facade that opens the real video on click */
.video-facade{ position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  background:var(--ink); border:1px solid var(--steel-dim); isolation:isolate; }
.video-facade img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.video-facade::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,14,16,0.12) 0%, rgba(14,14,16,0.6) 100%); }
.video-facade__play{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; }
.video-facade__play span{ width:72px; height:72px; border-radius:50%; background:var(--crimson);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 32px -8px rgba(0,0,0,0.6);
  transition:background var(--t-base); }
.video-facade__play svg{ width:26px; height:26px; color:#fff; margin-left:4px; }
.video-facade__label{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.15rem 1.3rem; color:#fff; }
.video-facade__label .k{ font-family:var(--font-display); font-weight:600; font-size:0.68rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--signal); display:block; margin-bottom:0.3rem; }
.video-facade__label .t{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; line-height:1.2; }
.video-facade--feature{ aspect-ratio:16/9; }

.video-gallery{ display:grid; gap:clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr)); }
.video-gallery .video-facade{ aspect-ratio:16/9; }

/* ----------------------------------------------------------------------------
   22. MOTION  (Pass 3)
   All gated behind prefers-reduced-motion. tr.js adds `js-anim` only after
   observer setup succeeds, then adds `.is-in` as elements enter the viewport.
   With JS off, reduced motion, or a setup failure, content stays fully visible.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .btn{ transition:background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out); }
  .btn:hover{ transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }
  .lead-card,.card{ transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base); }
  .lead-card:hover,.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
  .card-link .ico{ transition:transform var(--t-fast) var(--ease-out); }
  .card:hover .card-link .ico{ transform:translateX(3px); }
  .faq__item summary .ico{ transition:transform var(--t-base) var(--ease-out); }
  .faq__item[open] summary .ico{ transform:rotate(45deg); }
  .video-facade img{ transition:transform var(--t-base) var(--ease-out); }
  .video-facade:hover img{ transform:scale(1.04); }
  .video-facade__play span{ transition:transform var(--t-base) var(--ease-out), background var(--t-base); }
  .video-facade:hover .video-facade__play span,.video-facade:focus-visible .video-facade__play span{ transform:scale(1.08); }
  .video-facade:hover .video-facade__play span{ background:var(--crimson-deep); }
  .audience-index__link{ transition:border-color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out); }
  .audience-index__link:hover{ transform:translateY(-2px); }

  /* --- Scroll reveal --- */
  .js-anim :is(
    .section-head, .card, .lead-card, .step, .faq__item,
    .prog, .belief-item, .video-facade, .stat-grid > div,
    .home-founder__media, .founder-figure, .team-tile,
    .mission-band .container, .cta-band__inner
  ){
    opacity:0;
    transform:translateY(26px);
    transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  }
  .js-anim .is-in{ opacity:1 !important; transform:none !important; }

  /* --- Orchestrated hero / page-hero entrance (auto on load) --- */
  @keyframes trRise{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:none;} }
  .js-anim :is(
    .hero__eyebrow, .hero__title, .hero__sub, .hero__actions, .hero__creds,
    .page-hero .breadcrumb, .page-hero h1, .page-hero .lead
  ){
    opacity:0; animation:trRise .9s var(--ease-out) forwards;
  }
  .js-anim :is(.hero__title, .page-hero h1){ animation-delay:.12s; }
  .js-anim :is(.hero__sub, .page-hero .lead){ animation-delay:.26s; }
  .js-anim .hero__actions{ animation-delay:.40s; }
  .js-anim .hero__creds{ animation-delay:.54s; }

  /* --- Slow hero image drift (sits behind the bg video) --- */
  @keyframes trHeroZoom{ from{transform:scale(1.0);} to{transform:scale(1.07);} }
  .js-anim .hero--photo .hero__media img,
  .js-anim .page-hero .about-hero__photo img{
    animation:trHeroZoom 22s ease-in-out infinite alternate;
  }

  /* --- Eyebrow rule draws in when its heading reveals --- */
  .js-anim .section-head .eyebrow--rule::after{ width:0; transition:width .7s .25s var(--ease-out); }
  .js-anim .section-head.is-in .eyebrow--rule::after{ width:46px; }
}

/* --- Nav underline grows from the left on hover (always on, tiny) --- */
.site-nav a:not([aria-current="page"])::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:var(--signal);
}
.site-nav a:not([aria-current="page"]):hover::after{ right:0; }
@media (prefers-reduced-motion:no-preference){
  .site-nav a,.site-footer__nav a{ transition:color var(--t-fast); }
  .site-nav a:not([aria-current="page"])::after{ transition:right .3s var(--ease-out); }
}

/* ----------------------------------------------------------------------------
   23. SPLIT HERO
   Content left, video in its own panel right. Nothing overlaps the video, so
   it plays fully visible. Stacks on narrow screens (text, then video).
   ------------------------------------------------------------------------- */
.hero--split{ background:var(--ink); color:var(--steel); position:relative; overflow:hidden; }
.hero-split{
  display:grid; grid-template-columns:1fr 1.04fr;
  gap:clamp(2rem, 1rem + 4vw, 4.5rem); align-items:center;
  padding-block:clamp(3rem, 2rem + 5vw, 6rem);
}
.hero-split__content{ max-width:37rem; }
.hero--split .hero__title{ font-size:clamp(2.4rem, 1.7rem + 2.7vw, 3.9rem); line-height:1.02; letter-spacing:0; }
.hero--split .hero__sub{ max-width:44ch; }

.hero-video-panel{
  position:relative; margin:0; aspect-ratio:4/3; border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--steel-dim);
  box-shadow:var(--shadow-ink); background:var(--gunmetal);
}
.hero-video-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-video-panel .hero__video{ z-index:1; }   /* video over poster; nothing over the video */

@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; gap:clamp(1.75rem, 1rem + 3vw, 2.5rem); }
  .hero-split__content{ max-width:none; }
}