/* CSS changed? Bump ?v=N on the matching <link> in index.html — these files are cached independently of the HTML. */

/* ============================================================
   base.css — design tokens, reset, element defaults
   Loaded by: every page
   Depends on: nothing
   ============================================================ */

:root{
  --ink:#080c18;
  --logo-red:#E92E33;
  --navy:#0d1530;
  --navy-2:#141d40;
  --red:var(--logo-red);
  --red-2:var(--logo-red);
  --bone:#ffffff;
  --bone-2:#f2f2f2;
  --steel:#8a91ab;
  --green:#4ade80;
  --line:rgba(255,255,255,0.10);
  --line-dark:rgba(8,12,24,0.12);
  --white:#fdfcf9;
  --section-padding:66px;
  --wrap-pad:40px;
  --wrap-max:1240px;

  /* Secondary accent (#E0324A). Deliberately warmer than --logo-red and used
     ONLY at low alpha: glows, gradient stops, shadows, hover tints.
     Channel list because rgba() cannot take a hex custom property.
     This is intentional, not drift — do not "correct" it to --logo-red. */
  --accent-red-rgb: 224, 50, 74;

  /* type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* muted body text */
  --text-muted-dark:  #c4c9dc;   /* on navy / ink */
  --text-muted-light: #4a4f63;   /* on bone / white */

  /* radii */
  --radius-sm:   12px;
  --radius-lg:   24px;
  --radius-pill: 100px;

  /* motion — only the two curves that recur; the one-off cubic-beziers
     elsewhere keep their literals rather than being rounded to a token */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Breakpoints ----------
   Reuse an existing value. Do not introduce an 11th without a note here.
   Media queries live WITH their component, never in a separate file.
   Breakpoints cannot be custom properties: @media (max-width: var(--x)) never
   matches, because media queries resolve before custom properties do.

    900  three-col → two-col grids (close-grid, cap-tiles)
    850  two-col → one-col body grids (speed-grid, talent-grid, reframe-cols)
    800  desktop nav → hamburger + mobile menu; scope tabs → swipe panel;
         proof split row collapses
    801  min-width companion to 800 — hides mobile-only components on desktop
    700  section padding tightening; hero + display type step-down
    640  --wrap-pad 40px → 22px; review controls
    600  form rows stack; industry grid; proof banner squares up; marquee
    560  cap-tiles two-col → one-col
    400  narrow-device nav squeeze
    340  narrowest nav squeeze before the 320px min-width floor
   ---------------------------------- */

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-body);
  /* no overflow-x:hidden here — WebKit propagates it to the viewport, which would
     kill the horizontal scrollbar below the 320px min-width. The only wide element,
     the reviews marquee, is already clipped by .marquee-outer. */
  min-width:320px;
}
h1,h2,h3,.disp{
  font-family:var(--font-display);
  letter-spacing:-0.03em;
  line-height:1.05;
}
.mono{
  font-family:var(--font-mono);
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.72rem;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad);}
@media (max-width:640px){:root{--wrap-pad:22px;}}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* section padding tightens on small screens; consumed by the section
   shells in components.css (custom properties resolve at use time, so
   file order does not matter here) */
@media (max-width:700px){:root{--section-padding:50px;}}