/* ═══════════════════════════════════════════════════════════════════
   THE NAVIGATOR — shared foundation (System A)
   Loaded by every Navigator page after /theme.js:
     <link rel="stylesheet" href="/assets/site.css?v=1">
   Page-specific styles stay inline and always win (they load after).
   Dashboards (mission-control, clinical-ops, agent-console) are
   dark-native and do NOT load this file — see design/DESIGN.md.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layer 1 · tokens (90% ivory · 8% navy · 2% gold) ── */
:root{
  --ivory:#F8F7F3; --ivory-2:#F1EFE8; --navy:#0B1623; --navy-soft:#16243a;
  --gold:#C9A227; --gold-deep:#A8851b; --charcoal:#1C1C1C; --slate:#4A5568; --slate-2:#6b7686;
  --line:rgba(11,22,35,.12); --line-soft:rgba(11,22,35,.07);
  --display:'Cormorant Garamond',Georgia,serif; --body:'Inter',system-ui,-apple-system,sans-serif;
  /* foundation */
  --gold-2:rgba(201,162,39,.45);
  --shadow-1:0 8px 24px rgba(11,22,35,.06);
  --shadow-2:0 18px 44px rgba(11,22,35,.10);
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:12px;
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px;
  --space-5:32px; --space-6:48px; --space-7:72px; --space-8:104px;
  --fs-h1:clamp(46px,7vw,88px); --fs-h2:clamp(30px,4vw,44px); --fs-h3:clamp(22px,2.6vw,27px);
}
/* dark theme: additive override, applies when theme.js sets data-theme="dark" */
:root[data-theme="dark"]{
  --ivory:#0B1420; --ivory-2:#121C29; --navy:#F1EFE8; --navy-soft:#22334a;
  --gold:#C9A227; --gold-deep:#D8B23A; --charcoal:#E7E4DC; --slate:#9aa7b8; --slate-2:#7c8798;
  --line:rgba(248,247,243,.12); --line-soft:rgba(248,247,243,.07);
  --shadow-1:0 8px 24px rgba(0,0,0,.32);
  --shadow-2:0 18px 44px rgba(0,0,0,.45);
}
/* shared dark-mode fixes for surfaces that bypass the token system */
:root[data-theme="dark"] header.nav{background:rgba(11,20,32,.84)}
:root[data-theme="dark"] .cta-band{background:var(--ivory-2)}
:root[data-theme="dark"] .cta-inner h2{color:var(--navy)}
:root[data-theme="dark"] footer.foot{background:var(--ivory-2)}
:root[data-theme="dark"] .foot .brand{color:var(--navy)}
:root[data-theme="dark"] .btn-gold{color:#0B1420}
:root[data-theme="dark"] .btn-gold:hover{color:#fff}

/* ── Layer 2 · base ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--ivory);color:var(--charcoal);-webkit-font-smoothing:antialiased;line-height:1.65;letter-spacing:.005em}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
::selection{background:rgba(201,162,39,.22)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.eyebrow-line{display:inline-flex;align-items:center;gap:12px}
.eyebrow-line::before{content:'';width:26px;height:1px;background:var(--gold);flex:none}
h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--navy);letter-spacing:.01em;line-height:1.06}
h1 .em{font-style:italic;color:var(--gold-deep)}
.lead{font-size:19px;color:var(--slate);line-height:1.7}
.ic{width:15px;height:15px;display:inline-block;vertical-align:-3px;margin-right:5px}
section{padding:96px 0}
/* keyboard focus — gold ring, visible in both themes */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.horizon .lh-hit:focus,.horizon .lh-hit:focus-visible{outline:none} /* the lamp lights instead */

/* ── Layer 3 · components ── */
/* buttons */
.btn{display:inline-block;font-size:14px;font-weight:500;letter-spacing:.02em;padding:14px 26px;border-radius:4px;transition:all .22s var(--ease);cursor:pointer;border:1px solid transparent}
.btn-gold{background:var(--gold);color:var(--navy);font-weight:600;position:relative;overflow:hidden}
.btn-gold::after{content:'';position:absolute;top:0;left:-70%;width:44%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);transition:left .5s var(--ease);pointer-events:none}
.btn-gold:hover{background:var(--gold-deep);color:#fff;transform:translateY(-1px)}
.btn-gold:hover::after{left:126%}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:var(--ivory)}
.btn-ghost{padding-left:0;padding-right:0;color:var(--navy)}
.btn-ghost .arr{color:var(--gold-deep);transition:margin .22s}
.btn-ghost:hover .arr{margin-left:6px}

/* nav */
header.nav{position:sticky;top:0;z-index:40;background:rgba(248,247,243,.82);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:11px}
.brand .mk{width:22px;height:22px;flex:none}
.nav-right{display:flex;align-items:center;gap:30px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a.lnk{font-size:14px;color:var(--slate);font-weight:500;transition:color .2s}
.nav-links a.lnk:hover{color:var(--navy)}
.nav-links a.lnk.active{color:var(--navy)}
.nav-cta{font-size:13px;padding:10px 20px}

/* mobile menu button — hidden on desktop, so .nav-inner keeps its two-child layout */
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;padding:0;background:transparent;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;transition:border-color .2s;
  -webkit-tap-highlight-color:transparent}
.nav-toggle:hover{border-color:var(--gold)}
.nav-toggle span{display:block;width:17px;height:1.5px;border-radius:2px;background:var(--navy);
  transition:transform .28s var(--ease),opacity .18s}
.nav-toggle span + span{margin-top:4.5px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.nav-open{overflow:hidden}

/* theme toggle button (pages without the lighthouse) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--slate);cursor:pointer;transition:color .2s,border-color .2s;flex:none;-webkit-tap-highlight-color:transparent}
.theme-toggle:hover{color:var(--gold-deep);border-color:var(--gold)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:inline-block}

/* hero lighthouse — the beacon is the theme toggle; it sweeps in the dark */
.horizon .lh-beam,.horizon .lh-glow{opacity:0}
.horizon .lh-lamp{transition:fill .4s}
.horizon .lh-hit{pointer-events:all;cursor:pointer}
.horizon:hover .lh-glow,.horizon:focus-within .lh-glow{opacity:1}
.horizon:hover .lh-lamp,.horizon:focus-within .lh-lamp{fill:#ffe6a8}
:root[data-theme="dark"] .horizon{opacity:.5}
:root[data-theme="dark"] .horizon .lh-glow{opacity:1}
:root[data-theme="dark"] .horizon .lh-lamp{fill:#ffe6a8}
:root[data-theme="dark"] .horizon .lh-rays{stroke:#ffdd82}
:root[data-theme="dark"] .horizon .lh-beam{opacity:1;transform-box:view-box;transform-origin:200px 104px;animation:lhSweep 10s linear infinite}
@keyframes lhSweep{to{transform:rotate(-360deg)}}

/* CTA band */
.cta-band{background:var(--navy);color:var(--ivory)}
.cta-inner{padding:90px 0;text-align:center}
.cta-inner .eyebrow{color:var(--gold)}
.cta-inner h2{color:var(--ivory);font-size:clamp(30px,4.2vw,48px);margin:16px auto;max-width:18ch}
.cta-inner p{max-width:48ch;margin:0 auto 30px;color:rgba(248,247,243,.72);font-size:17px}
.cta-actions{display:flex;gap:14px 24px;align-items:center;justify-content:center;flex-wrap:wrap}
.cta-link{color:rgba(248,247,243,.85);font-size:14px;font-weight:500;display:inline-flex;align-items:center;transition:color .2s}
.cta-link:hover{color:var(--gold)}
.cta-link .ic{margin-right:7px}

/* footer */
footer.foot{background:var(--navy);color:rgba(248,247,243,.7);border-top:1px solid rgba(248,247,243,.1);position:relative}
footer.foot::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent)}
.foot-inner{padding:44px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.foot .brand{color:var(--ivory)}.foot .brand .mk{color:var(--gold)}
.foot-links{display:flex;gap:24px;font-size:13.5px;flex-wrap:wrap}
.foot-links a{color:rgba(248,247,243,.7);transition:color .2s}
.foot-links a:hover{color:var(--gold)}
.foot-legal{width:100%;border-top:1px solid rgba(248,247,243,.1);padding:18px 0;font-size:12px;color:rgba(248,247,243,.45)}

/* scroll reveal (+ optional sibling stagger via .stagger on the parent) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger>.reveal:nth-child(2){transition-delay:.06s}
.stagger>.reveal:nth-child(3){transition-delay:.12s}
.stagger>.reveal:nth-child(4){transition-delay:.18s}
.stagger>.reveal:nth-child(5){transition-delay:.24s}

/* ambient hero media — poster-first, lazy, reduced-motion-safe (DESIGN.md §7) */
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.only-dark{display:none!important}
:root[data-theme="dark"] .only-dark{display:block!important}
:root[data-theme="dark"] .only-light{display:none!important}

/* ── Layer 4 · utilities ── */
/* film grain — one fixed overlay, add class="grain" to <body> */
body.grain::after{content:'';position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hairline{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold-2),transparent)}

/* ── responsive + reduced motion ── */
@media (max-width:860px){
  /* The links move out of the bar and into a drop panel. It is positioned against
     header.nav (sticky, therefore a containing block) so it spans full-bleed and
     does not disturb the bar's own flex layout. */
  .nav-toggle{display:flex}
  .nav-right{gap:12px}
  /* Scoped to #navLinks, not .nav-links: the tool pages reuse .nav-links for a pair of
     plain inline links with no toggle, and turning those into an absolutely-positioned
     panel displaced them. Only the pages carrying the menu markup use this id.
     Shown/hidden with `display` and nothing else — an opacity/transform entrance was
     tried first and dropped, because every way it can fail to run leaves the panel
     stranded at opacity 0, i.e. an invisible menu. Instant is the correct trade. */
  #navLinks{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px 0 12px;
    /* fully opaque: bright hero type ghosts through even a 2% alpha */
    background:#0e1a29;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 24px 50px rgba(0,0,0,.45);
    max-height:calc(100vh - 74px);overflow-y:auto
  }
  #navLinks.open{display:flex}
  #navLinks a.lnk{display:block;font-size:15.5px;padding:15px 26px;color:var(--slate);
    border-bottom:1px solid var(--line-soft)}
  #navLinks a.lnk:last-child{border-bottom:none}
  #navLinks a.lnk:hover,#navLinks a.lnk.active{color:var(--navy)}
}
/* keep the brand + CTA + button on one line on the narrowest phones */
@media (max-width:420px){
  .brand{font-size:13px;letter-spacing:.12em;gap:8px}
  .brand .mk{width:19px;height:19px}
  .nav-cta{font-size:12px;padding:9px 13px}
  .nav-right{gap:10px}
}
@media (max-width:600px){
  .wrap{padding:0 22px}
  section{padding:66px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  *{transition:none!important;animation:none!important}
  :root[data-theme="dark"] .horizon .lh-beam{animation:none;opacity:.75}
}