/* =============================================================================
   BSE — shared.css   ·   theme: "Graphite Noir" (dark-neutral + iris glow)
   Single source of truth for raw brand vars, primitives, nav, buttons, a11y.
   Page-specific styles remain in each page's <style> block; tokens.css adds the
   semantic aliases + scales on top of the raw vars defined here.
   ============================================================================= */

/* ---------- Self-hosted web fonts (Geist · OFL · /fonts, font-src 'self') ---- */
/* Variable woff2 (wght axis 100–900) — one file per family, no CDN, no cookies. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/geist-variable.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/geist-mono-variable.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/caveat-latin-700.woff2') format('woff2')}

:root{
  /* === BASE + SURFACES (true black; raised = a hair lighter) ================ */
  --bg:#000000;            /* app canvas / void (solid black) */
  --bg-subtle:#09090b;     /* sunken wells, tracks */
  --bg-2:#0f0f12;          /* default card / panel surface */
  --bg-3:#17171b;          /* raised: modal, popover, hover-elevated */
  --line:#222226;          /* hairline 1px border / divider */
  --line-2:#34343b;        /* inputs, focused/hovered edges */

  /* === TEXT RAMP (cool near-white) ========================================= */
  --ink:#f4f5f7;           /* headings, KPI numbers */
  --ink-dim:#c0c2c9;       /* body */
  --ink-mute:#83858d;      /* captions, axis ticks */
  --ink-faint:#54565d;     /* disabled/placeholder, decorative only */

  /* === ACCENT (whiteish silver / platinum, with a metallic gradient) ======= */
  --accent:#d6dae2;        /* interactive / active / primary */
  --accent-2:#eef0f4;      /* hover/active (brighter silver) */
  --silver-grad:linear-gradient(150deg, #fbfcfe 0%, #d4d8e0 46%, #aab0bd 100%);
  --accent-bg:rgba(214,218,226,.10);
  --accent-border:rgba(214,218,226,.26);
  --accent-glow:rgba(228,232,240,.40);

  /* === STATUS (valence only; kept functional) ============================= */
  --warn:#d8b059;
  --danger:#e8736b;
  --ok:#5bbf8a;

  /* === Type (Geist sans for text+display, Geist Mono for data/labels) ====== */
  --serif:"Geist", ui-sans-serif, system-ui, sans-serif;  /* display role */
  --sans:"Geist", ui-sans-serif, system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === Layout ============================================================== */
  --gutter:clamp(20px, 4vw, 56px);
  --max:1440px;            /* pages can override: --max:1200px */

  /* === Motion ============================================================== */
  --ease:cubic-bezier(.2,.65,.2,1);
  --ease-out:cubic-bezier(.4,0,.2,1);
  --motion-hover:140ms var(--ease-out);
  --motion-press:80ms var(--ease-out);

  /* === Elevation (tinted depth — never pure black; raised gets a lit edge) == */
  --shadow-resting:0 1px 2px -1px rgba(6,8,16,.60), 0 2px 6px -2px rgba(6,8,16,.45);
  --shadow-raised:0 4px 10px -4px rgba(6,8,16,.55), 0 12px 28px -8px rgba(6,8,16,.50), inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-overlay:0 16px 40px -12px rgba(6,8,16,.70), 0 4px 12px -4px rgba(6,8,16,.55), inset 0 1px 0 rgba(255,255,255,.05);

  /* === Glow (cool silver/white halo; restrained) =========================== */
  --glow-soft:0 0 0 1px var(--accent-border), 0 4px 16px -6px var(--accent-glow);
  --glow-hover:0 0 0 1px rgba(228,232,240,.45), 0 6px 22px -6px var(--accent-glow), 0 2px 40px -8px rgba(228,232,240,.18);
  --glow-focus:0 0 0 3px rgba(228,232,240,.30);
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --ambient-glow:radial-gradient(60% 50% at 50% 0%, rgba(228,232,240,.10) 0%, rgba(228,232,240,.04) 38%, transparent 72%);
}

/* HTML hidden attribute restoration (defeats class display: overrides) */
[hidden] { display: none !important; }

/* ---------- Reset + base ---------------------------------------------------- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
::selection{background:var(--accent); color:var(--color-on-accent)}

.mono{font-family:var(--mono); font-weight:400}
.serif{font-family:var(--serif)}
.dim{color:var(--ink-dim)}
.mute{color:var(--ink-mute)}

/* ---------- Skip to content (a11y) ----------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden;
}
.skip:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto;
  padding:12px 18px; border-radius:8px;
  background:var(--accent); color:var(--color-on-accent); font-weight:600;
  z-index:999; box-shadow:var(--glow-focus);
}

/* ---------- Focus visibility (a11y) ---------------------------------------- */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.btn:focus-visible{outline-offset:3px}
.btn.primary:focus-visible,.btn-primary:focus-visible{box-shadow:var(--glow-soft), var(--glow-focus)}
@media (forced-colors:active){
  :focus-visible{outline:3px solid CanvasText; outline-offset:2px}
}

/* ---------- Brand mark ----------------------------------------------------- */
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-weight:600; font-size:16px; letter-spacing:-.01em;
  text-decoration:none; color:var(--ink);
}
.brand-mark{width:22px; height:22px; display:grid; place-items:center; position:relative}
.brand-mark svg,.brand-mark img{width:100%; height:100%; object-fit:contain; display:block}
.brand small{
  font-family:var(--sans); font-weight:500; font-size:11px; color:var(--ink-mute);
  letter-spacing: .02em; margin-left:6px;
}
/* handwritten wordmark (the brand name only) */
.brand .wm{
  font-family:'Caveat', cursive; font-weight:700; font-size:25px; line-height:1;
  letter-spacing:.01em; text-transform:none;
  color:var(--accent);
  background:var(--silver-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* metallic wordmark IMAGE — small instances (doc-page topbar/footer).
   Carries the signature upward tilt that the hero wordmark uses. The host
   .brand keeps overflow:visible so the rotated box is never clipped. */
.brand-wm{
  height:26px; width:auto; display:block;
  transform:rotate(-12deg); transform-origin:center center;
  filter:saturate(1.04) brightness(1.03);
  user-select:none; -webkit-user-drag:none;
}
.brand{ overflow:visible; }

/* ---------- Nav (two variants: absolute/landing, sticky/subpages) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px var(--gutter);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:rgba(10,11,13,.55);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.scrolled{border-bottom-color:var(--line); background:rgba(10,11,13,.82)}

.top{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:18px var(--gutter);
  border-bottom:1px solid var(--line);
  background:rgba(10,11,13,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}

.nav-links{
  display:flex; gap:28px; align-items:center;
  font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing: .01em;
  text-transform: none; color:var(--ink-dim);
}
.nav-links a{transition:color .2s ease; text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--accent)}
@media(max-width:860px){.nav-links{display:none}}

.nav-cta{display:flex; gap:10px; align-items:center}

/* ---------- Buttons (visible AT REST: own fill + border + resting shadow +
   inset top-highlight; hover lifts 1px + brightens; active drops to 0) ------ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px;
  font-family:var(--sans); font-size:14px; font-weight:500;
  letter-spacing: .005em; text-transform: none;
  text-decoration:none; cursor:pointer;
  color:var(--ink); background:var(--bg-3); border:1px solid var(--line-2);
  box-shadow:var(--shadow-resting), inset 0 1px 0 rgba(255,255,255,.05);
  transition:background-color var(--motion-hover), border-color var(--motion-hover),
             box-shadow var(--motion-hover), transform var(--motion-hover), color var(--motion-hover);
}
.btn:hover{transform:translateY(-1px); background:#22262c; border-color:#41464e; box-shadow:var(--shadow-raised)}
.btn:active{transform:translateY(0); box-shadow:var(--shadow-resting)}

/* Primary = a brushed-silver CTA (metallic fill, dark text) */
.btn-primary,.btn.primary{
  background:var(--silver-grad); color:var(--color-on-accent);
  border-color:transparent; box-shadow:var(--glow-soft);
}
.btn-primary:hover,.btn.primary:hover{transform:translateY(-1px); background:linear-gradient(150deg,#ffffff 0%,#e3e6eb 50%,#bdc2cd 100%); border-color:transparent; box-shadow:var(--glow-hover)}
.btn-primary:active,.btn.primary:active{transform:translateY(0); box-shadow:var(--glow-soft)}

/* Ghost = transparent but still readable at rest (never invisible-until-hover) */
.btn-ghost,.btn.ghost{background:transparent; color:var(--ink-dim); border-color:var(--line); box-shadow:none}
.btn-ghost:hover,.btn.ghost:hover{background:var(--bg-2); color:var(--ink); border-color:var(--line-2); transform:translateY(-1px); box-shadow:var(--shadow-resting)}

/* Outline = neutral border that resolves to accent on hover */
.btn-outline,.btn.outline{background:transparent; color:var(--ink); border-color:var(--line-2); box-shadow:none}
.btn-outline:hover,.btn.outline:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}

/* Small = compact size; composes with primary/ghost/outline/danger for dense rows */
.btn-sm,.btn.sm{padding:7px 14px; font-size:13px; gap:6px}

.arrow{display:inline-block; transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- Typography helpers -------------------------------------------- */
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.02em}
.display{
  font-family:var(--serif); font-weight:600;
  line-height:1.02; letter-spacing:-.03em;
}
.h-xxl{font-size:clamp(48px,8.5vw,128px)}
.h-xl {font-size:clamp(40px,6vw,84px)}
.h-l  {font-size:clamp(32px,4.2vw,56px)}
.h-m  {font-size:clamp(22px,2.2vw,30px)}
.kicker{font-family:var(--serif); font-weight:400; color:var(--ink-dim)}

.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:11.5px; letter-spacing: .04em;
  text-transform: none; color:var(--ink-mute);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--ink-mute)}
.eyebrow.accent{color:var(--accent)}
.eyebrow.accent::before{background:var(--accent)}

/* ---------- Section + wrap ------------------------------------------------- */
.section{padding:clamp(80px,10vw,160px) var(--gutter); position:relative}
.wrap{max-width:var(--max); margin:0 auto; width:100%}

/* ---------- Reveal on scroll ---------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
.reveal.in{opacity:1; transform:none}

.reveal-stagger > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal-stagger.in > *{opacity:1; transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}

/* ---------- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal-stagger > *{opacity:1; transform:none}
  .btn:hover,.btn-primary:hover,.btn.primary:hover{transform:none}
}

/* ---------- Scrollbar (webkit) -------------------------------------------- */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10); border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.20)}

/* ---------- Progress bar (landing) ---------------------------------------- */
.progress-bar{
  position:fixed; top:0; left:0; height:2px;
  background:var(--accent); z-index:100;
  width:0; transition:width .08s linear;
  box-shadow:0 0 10px var(--accent-glow);
}

/* ---------- Anchor offset (sub-pages) ------------------------------------- */
.anchor-target{scroll-margin-top:90px}

/* ---------- Utility: parallax hook ---------------------------------------- */
.parallax-y{will-change:transform}

/* ---------- Print (force light so an exec's printout is legible) ----------- */
@media print{
  .nav,.top,.progress-bar,.hero-grid,.hero-glow,.hero-viz,canvas{display:none !important}
  html,body{background:#fff !important; color:#111 !important}
  a{color:#111; text-decoration:underline}
  *{box-shadow:none !important; text-shadow:none !important}
}

/* ---------- Form controls baseline ---------------------------------------- */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],input[type=url],
textarea,select{
  background:var(--bg-subtle); color:var(--color-text-primary);
  border:1px solid var(--color-border-strong); border-radius:var(--radius-md);
  padding:10px 12px; font:inherit; font-size:14.5px; line-height:1.5;
  width:100%; max-width:100%;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
input::placeholder,textarea::placeholder{color:var(--ink-mute)}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:var(--glow-focus)}
textarea{font-family:var(--sans); resize:vertical; min-height:80px}
/* kill the up/down spinner arrows on number inputs (e.g. People affected) */
input[type=number]{-moz-appearance:textfield; appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
input:disabled,textarea:disabled,select:disabled{opacity:.55; cursor:not-allowed}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border:1px solid var(--color-status-danger);outline:2px solid var(--color-status-danger);outline-offset:0}
input[type=checkbox],input[type=radio]{accent-color:var(--color-accent-primary); cursor:pointer; width:16px; height:16px}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.55; cursor:not-allowed}

/* ---------- Button :disabled ----------------------------------------------- */
.btn.primary:disabled,.btn.ghost:disabled,.btn.outline:disabled,
.btn-primary:disabled,.btn-ghost:disabled,.btn-outline:disabled{opacity:.5; cursor:not-allowed; transform:none; pointer-events:none; box-shadow:none}