/* ============================================================
   firn.css — the single source of truth for FIRN's design system.
   Every page that carries the FIRN chrome links this file and
   nothing else for tokens, nav, footer, buttons, cards and layout.
   Page-specific styling stays in that page's own <style> block.

   Legacy token names (--navy, --teal, --gold) are kept deliberately:
   ~90 pages reference them inline. Their VALUES now carry the FIRN
   palette, so the whole site re-skins from the block below.
   ============================================================ */

:root{
  /* FIRN palette — one hue at six densities. */
  --polar:#0B1A2B;   /* Polar Night  */
  --deep:#123A56;    /* Deep Ice     */
  --glacier:#2E7FA6; /* Glacier      */
  --melt:#69B3D1;    /* Melt         */
  --rime:#BCDCEA;    /* Rime         */
  --snow:#F2F7FA;    /* Snow         */
  --amber:#D98324;   /* data + alerts only, never identity */

  /* Legacy names, retargeted. Do not rename — pages depend on them. */
  --navy:var(--polar);
  --navy2:var(--deep);
  --teal:var(--glacier);
  --teal-d:#1F6285;
  --gold:var(--amber);
  --ink:var(--polar);
  --muted:#5A6675;
  --bg:#fff;
  --soft:var(--snow);
  --card:#fff;
  --line:#DCE6EC;

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --wrap:1200px;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;
  line-height:1.08;margin:0;text-wrap:balance}
a{color:inherit;text-decoration:none;transition:color .15s ease}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
section{padding:86px 0}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal-d)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* ---------- brand ---------- */
.firn-mark{display:block;color:var(--polar)}
.firn-lockup{display:flex;align-items:center;gap:12px}
.firn-lockup .firn-mark{height:34px;width:34px}
.firn-lockup .firn-word{font-family:var(--sans);font-weight:600;font-size:23px;
  letter-spacing:.14em;padding-left:.14em;color:var(--polar);line-height:1}
.firn-endorse{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;white-space:nowrap}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;height:74px}
nav .brand img{height:38px;width:auto;display:block}
nav .lk{display:flex;gap:22px;align-items:center}
nav .lk a{color:#33404f;font-size:14.5px;font-weight:500;white-space:nowrap}
nav .lk a:hover{color:var(--teal-d)}
nav .lk .cta{background:var(--navy);color:#fff;padding:10px 20px;border-radius:999px;
  font-weight:600;font-size:14px}
nav .lk .cta:hover{background:var(--navy2)}
nav .adminbtn{font-size:12px;font-weight:600;color:#5b6b7a;border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;text-decoration:none;white-space:nowrap}
nav .adminbtn:hover{color:var(--teal-d);border-color:var(--teal)}
@media(max-width:1240px){nav .wrap{gap:18px}nav .lk{gap:13px}nav .lk a{font-size:13.5px}nav .lk .cta{padding:9px 15px}}
/* 1041-1120px: keep the eight section links, drop the Explore shortcut. */
@media(max-width:1120px){nav .lk .cta{display:none}}
/* <=1040px: the links no longer fit. Fall back to Explore, which lands on the
   homepage toolkit grid — every section is reachable from there. */
@media(max-width:1040px){nav .lk a:not(.cta){display:none}nav .lk .cta{display:inline-flex}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;
  font-size:15.5px;padding:15px 30px;border-radius:999px;transition:.16s;cursor:pointer;border:none}
.btn.p{background:var(--teal);color:#fff}
.btn.p:hover{background:#357FA8;transform:translateY(-1px)}
.btn.g{border:1px solid rgba(255,255,255,.45);color:#fff;margin-left:12px}
.btn.g:hover{background:rgba(255,255,255,.12)}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42}
.hero .ov{position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(11,26,43,.93),rgba(11,26,43,.62) 60%,rgba(11,26,43,.26))}
.hero .wrap{position:relative;padding:112px 30px 100px}
.hero h1{font-size:clamp(40px,5.6vw,70px);max-width:17ch;margin:20px 0 24px;color:#fff;
  font-weight:500;letter-spacing:-.02em}
.hero p{font-family:var(--sans);font-size:clamp(17px,1.7vw,21px);max-width:52ch;
  color:var(--rime);margin:0 0 32px;text-wrap:pretty}

/* ---------- sections, cards, stats ---------- */
.shead{max-width:740px;margin:0 0 44px}
.shead h2{font-size:clamp(30px,3.6vw,46px);margin:14px 0 0;color:var(--navy)}
.shead p{font-family:var(--sans);color:var(--muted);font-size:18.5px;margin:16px 0 0;text-wrap:pretty}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:.22s}
.tcard:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(11,26,43,.14);border-color:var(--rime)}
.tcard .im{height:196px;background-size:cover;background-position:center;margin:10px 10px 0;border-radius:12px}
.tcard .bd{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.tcard h3{font-size:25px;color:var(--navy);margin:8px 0 10px;font-weight:500}
.tcard p{font-family:var(--sans);color:var(--muted);font-size:15.5px;margin:0 0 18px;flex:1}
.tcard .more{font-family:var(--sans);color:var(--teal-d);font-weight:600;font-size:15px}
.feat{background:var(--soft)}
.feat .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding:90px 30px}
@media(max-width:900px){.feat .wrap{grid-template-columns:1fr;gap:30px}}
.feat h2{font-size:clamp(30px,3.6vw,44px);color:var(--navy);margin:16px 0 18px;max-width:15ch}
.feat p{font-family:var(--sans);color:#45525f;font-size:17.5px;margin:0 0 26px}
.feat .im{border-radius:18px;height:400px;background-size:cover;background-position:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:640px){.stats{grid-template-columns:1fr}}
.stat{background:var(--soft);padding:34px 30px;border-radius:18px}
.stat .n{font-family:var(--serif);font-size:52px;font-weight:500;color:var(--navy);
  line-height:1;letter-spacing:-.02em}
.stat .l{font-family:var(--sans);color:var(--muted);font-size:15px;margin-top:10px}
.note2{max-width:960px;margin:0 auto;text-align:center}
.note2 h2{font-size:clamp(24px,2.5vw,32px);color:var(--navy)}
.note2 p{font-family:var(--sans);color:var(--muted);font-size:17.5px;margin-top:14px;text-wrap:pretty}
@media(min-width:760px){.note2 h2{white-space:nowrap}}

/* ---------- footer ---------- */
footer{background:var(--navy);color:var(--rime);padding:52px 0;font-family:var(--sans)}
footer .firn-lockup .firn-mark{color:var(--rime);height:38px;width:38px}
footer .firn-lockup .firn-word{color:#fff;font-size:25px}
footer .firn-endorse{color:#8FA9BC}
footer .fine{font-size:12.5px;color:#8FA9BC;max-width:82ch;margin-top:12px;line-height:1.6}
footer a{color:var(--melt)}

/* ---------- interaction polish ---------- */
::selection{background:rgba(46,127,166,.22)}
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible{outline:2px solid var(--glacier);outline-offset:2px}
input[type=text],input[type=number],input[type=email],select,textarea{border-radius:8px}