/* Generated by tools/build.py from src/home.html: nav, CTA and footer for inner pages. */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/Fraunces.ttf') format('truetype-variations'),
      url('../fonts/Fraunces.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/Fraunces-Italic.ttf') format('truetype-variations'),
      url('../fonts/Fraunces-Italic.ttf') format('truetype');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('../fonts/GeistMono.ttf') format('truetype-variations'),
      url('../fonts/GeistMono.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
.nav,.nav-drawer,.foot,.ci-cta{
  /* type system
     display  — Fraunces, main headers only
     mono     — Geist Mono, kickers above the headers + all data/instrument labels
     body     — Montserrat, every paragraph and UI label                        */
  --font-display:'Fraunces',Georgia,serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  /* brand */
  --green-900:#011515;
  --green-800:#022422;
  --green-700:#043024;
  --green-600:#063427;
  --green-500:#0A4432;
  --lime:#9AEF57;
  --lime-soft:#C2F59A;
  --peri:#A5A6E9;
  --orange:#FD5E08;
  --cream:#F5EFE5;
  --cream-warm:#F9F5EF;

  --ink:var(--cream);
  --ink-dim:rgba(245,239,229,.58);
  --ink-faint:rgba(245,239,229,.32);
  --hair:rgba(245,239,229,.13);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --pad:clamp(20px,3.4vw,52px);
  --nav-h:clamp(72px,7vw,104px);
  /* how far the cream panel rides up over the hero — the hero reserves the
     same amount as bottom padding so no tile ever gets covered */
  --overlap:13vh;
}
/* ---------- nav (fixed, inverts over the cream panel) ---------- */
.nav{
  height:var(--nav-h);
  padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:fixed;top:0;left:0;right:0;z-index:80;
  /* always present, so the nav reads against any section under it */
  background:rgba(1,21,21,.66);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
          backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(245,239,229,.08);
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out);
}
.nav.cream{
  background:rgba(246,239,229,.80);
  border-bottom-color:rgba(1,21,21,.08);
}
/* full lockup — one geometry, three fill tokens that cross-fade with the plate */
.brand .lg-word{fill:#FFFFFF}
.brand .lg-mark{fill:#99F44B}
.brand .lg-dot {fill:#FFFFFF}
.brand .lg-word,.brand .lg-mark,.brand .lg-dot{transition:fill .5s var(--ease-out)}
.nav.cream .brand .lg-word{fill:#022422}
.nav.cream .brand .lg-mark{fill:#022422}
.nav.cream .brand .lg-dot {fill:#7BC34A}
.nav.cream .nav-links a{color:var(--green-900)}
.nav.cream .nav-links a::after{background:var(--green-700)}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.brand .brand-logo{height:clamp(21px,1.95vw,29px);width:auto;display:block;
  transition:opacity .4s var(--ease-out)}
.brand:hover .brand-logo{opacity:.86}

.nav-links{display:flex;align-items:center;gap:clamp(18px,2.6vw,42px)}
.nav-links a{
  font-family:var(--font-body);
  position:relative;color:var(--ink);text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:.005em;
  padding:6px 0;opacity:.82;transition:opacity .4s var(--ease-out);
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--lime);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- mobile shell ----------
   The hamburger, the drawer and the hero CTA exist in the markup at every
   width but are switched off above the phone breakpoint, so the desktop bar
   is byte-for-byte what it was. */
.nav-toggle{display:none}
.nav-drawer{display:none}
.head-act{display:none}

.cta{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  background:var(--lime);color:var(--green-900);
  font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:-.005em;
  padding:14px 22px;border:none;border-radius:8px;cursor:pointer;white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:box-shadow .5s var(--ease-out), background .4s var(--ease-out);
  overflow:hidden;
}
.cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .9s var(--ease-out);
}
.cta:hover::before{transform:translateX(120%)}
.cta:hover{
  background:var(--lime-soft);
  box-shadow:0 0 44px rgba(154,239,87,.42), 0 14px 34px rgba(0,0,0,.3);
}
/* radar mark on the CTA — always live. A real decaying conic sweep sits in a
   recessed well so the mark separates from the lime field; on hover the scan
   accelerates and each blip lights at the exact angle the beam crosses it. */
.cta .radar{
  position:relative;display:inline-flex;flex:0 0 auto;
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(1,21,21,.13) 0%, rgba(1,21,21,.06) 56%, rgba(1,21,21,0) 76%);
  transition:transform .55s var(--ease-out);
}
.cta:hover .radar{transform:scale(1.08)}
.cta .radar svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible}

/* the beam: hard leading edge, tail decaying ~84° behind it */
.cta .radar-sweep{
  position:absolute;inset:5.4%;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,
    rgba(1,21,21,0)    0deg,
    rgba(1,21,21,.07) 24deg,
    rgba(1,21,21,.19) 54deg,
    rgba(1,21,21,.36) 76deg,
    rgba(1,21,21,.52) 84deg,
    rgba(1,21,21,0)   84.4deg,
    rgba(1,21,21,0)  360deg);
  opacity:.74;
  animation:radarSpin 4.4s linear infinite;
  transition:opacity .35s ease;
}
.cta:hover .radar-sweep{opacity:1;animation-duration:1.5s}

.cta .radar .ring{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.5;transform-origin:13px 13px}
.cta .radar .r3{stroke-width:1.6;opacity:.64}
.cta .radar .tick{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;opacity:.5}
.cta .radar .hub{fill:currentColor;transform-origin:13px 13px}
.cta .radar .blip{fill:currentColor;opacity:0}
.cta .radar .b1{transform-origin:18.6px 8.1px}
.cta .radar .b2{transform-origin:8.4px 17.6px}

.cta:hover .radar .r1{animation:radarPing 1.5s var(--ease-out) infinite}
.cta:hover .radar .r2{animation:radarPing 1.5s var(--ease-out) .16s infinite}
.cta:hover .radar .r3{animation:radarPing 1.5s var(--ease-out) .32s infinite}
.cta:hover .radar .hub{animation:radarHub 1.5s var(--ease-out) infinite}
/* fired at the fraction of the cycle where the beam actually reaches them:
   b1 sits at 49° clockwise from north → 90%; b2 at 225° → 39% */
.cta:hover .radar .b1{animation:radarBlipA 1.5s linear infinite}
.cta:hover .radar .b2{animation:radarBlipB 1.5s linear infinite}

@keyframes radarSpin{to{transform:rotate(360deg)}}
@keyframes radarPing{
  0%{opacity:.82;transform:scale(.84)}
  60%{opacity:.34;transform:scale(1.05)}
  100%{opacity:.82;transform:scale(.84)}
}
@keyframes radarHub{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.22)}
}
@keyframes radarBlipA{
  0%,85%{opacity:0;transform:scale(.5)}
  90%{opacity:1;transform:scale(1.4)}
  97%{opacity:.42;transform:scale(1)}
  100%{opacity:0;transform:scale(.85)}
}
@keyframes radarBlipB{
  0%,34%{opacity:0;transform:scale(.5)}
  39%{opacity:.92;transform:scale(1.32)}
  53%{opacity:.34;transform:scale(1)}
  64%,100%{opacity:0;transform:scale(.85)}
}
@media (prefers-reduced-motion:reduce){
  .cta .radar-sweep{animation:none;opacity:.7}
  .cta:hover .radar{transform:none}
  .cta:hover .radar .ring,.cta:hover .radar .blip,.cta:hover .radar .hub{animation:none}
  .cta:hover .radar .b1{opacity:.9}
}


@media (max-width:860px){
/* ---------- nav: logo and a menu, nothing else ---------- */
  .nav-links{display:none}
  .nav > .cta{display:none}                 /* the CTA moves under the headline */
  .nav-toggle{
    display:grid;place-content:center;gap:5px;margin-left:auto;
    width:44px;height:44px;                 /* a real tap target, not an icon */
    background:none;border:0;cursor:pointer;padding:0;
  }
  .nav-toggle span{
    display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);
    transition:transform .4s var(--ease-out), opacity .3s ease;
  }
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .nav-drawer{
    display:block;position:fixed;left:0;right:0;top:var(--nav-h);z-index:99;
    padding:8px var(--pad) 22px;
    background:rgba(1,21,21,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(245,239,229,.13);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .3s ease, transform .4s var(--ease-out);
  }
  .nav-drawer[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav-drawer a{
    display:block;padding:14px 0;border-bottom:1px solid rgba(245,239,229,.13);
    font-family:var(--font-body);font-size:16px;color:var(--cream);text-decoration:none;
  }
  .nav-drawer a:last-child{border-bottom:0}

  
  .nav-drawer a.cta{display:inline-flex;margin-top:16px;padding:14px 22px;border:0;color:var(--green-900);font-size:15px}
}
a.cta{text-decoration:none}
.ci-cta .cta{margin-top:40px;font-size:clamp(15px,1.05vw,17px);padding:18px 30px;border-radius:10px}
.ci-cta .cta .radar{width:24px;height:24px}
:root{--nav-h:clamp(72px,7vw,104px)}
html{scroll-padding-top:var(--nav-h)}
.ci-inner .ci-hero{padding-top:calc(var(--nav-h) + clamp(40px,6vw,72px))}
.foot{
  background:var(--green-900);
  padding:clamp(30px,4vh,52px) var(--pad);
  border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:clamp(10.5px,.78vw,12.5px);color:var(--ink-dim);
}
.foot-links{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,26px)}
.foot-links a{color:inherit;text-decoration:none;transition:color .3s ease}
.foot-links a:hover{color:var(--ink)}