/* ============================================================
   Shared premium design layer — floats on top of each page's
   existing inline styles. Nav, grain, cards, buttons, motion.
   ============================================================ */

:root{
  --navy:#12293F;
  --sand:#F0E9DD;
  --coral:#E8623C;
  --seafoam:#8FA998;
  --ink:#1B1B1B;
  --paper:#FAF6EF;
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

body{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
}

/* ---------- Film grain (fixed, cheap, never on scrolling layers) ---------- */
.grain{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:0.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Floating pill nav ---------- */
.site-nav{
  position:sticky;
  top:18px;
  z-index:40;
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}
.site-nav-inner{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(250,246,239,0.72);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(18,41,63,0.1);
  border-radius:999px;
  padding:8px 8px 8px 20px;
  box-shadow:0 8px 30px rgba(18,41,63,0.08);
  max-width:calc(100vw - 32px);
}
.site-nav-links{
  display:flex;
  align-items:center;
  gap:4px;
}
.site-nav-links a{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--navy);
  opacity:0.65;
  padding:9px 14px;
  border-radius:999px;
  transition:opacity .5s var(--ease-spring), background .5s var(--ease-spring);
  white-space:nowrap;
}
.site-nav-links a:hover{opacity:1; background:rgba(18,41,63,0.06);}
.site-nav-links a.active{opacity:1; background:var(--navy); color:var(--paper);}
.site-nav-cta{
  margin-left:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--paper);
  background:var(--coral);
  padding:9px 16px;
  border-radius:999px;
  white-space:nowrap;
  transition:transform .5s var(--ease-spring), background .5s var(--ease-spring);
}
.site-nav-cta:hover{transform:translateY(-1px); background:var(--navy);}

.site-nav-burger{
  display:none;
  width:38px;height:38px;
  border-radius:50%;
  border:none;
  background:rgba(18,41,63,0.06);
  position:relative;
  cursor:pointer;
  flex:0 0 auto;
}
.site-nav-burger span{
  position:absolute;
  left:11px; right:11px;
  height:1.5px;
  background:var(--navy);
  transition:transform .5s var(--ease-spring), opacity .3s ease;
}
.site-nav-burger span:nth-child(1){top:15px;}
.site-nav-burger span:nth-child(2){top:21px;}
.site-nav-burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.site-nav-burger.is-open span:nth-child(2){transform:translateY(-6px) rotate(-45deg);}

.site-nav-overlay{
  position:fixed;
  inset:0;
  z-index:39;
  background:rgba(18,41,63,0.92);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease-spring);
}
.site-nav-overlay.is-open{opacity:1; pointer-events:auto;}
.site-nav-overlay a{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(28px,7vw,44px);
  color:var(--paper);
  text-decoration:none;
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s var(--ease-spring), transform .7s var(--ease-spring);
}
.site-nav-overlay.is-open a{opacity:1; transform:translateY(0);}
.site-nav-overlay.is-open a:nth-child(1){transition-delay:.08s;}
.site-nav-overlay.is-open a:nth-child(2){transition-delay:.16s;}
.site-nav-overlay.is-open a:nth-child(3){transition-delay:.24s;}
.site-nav-overlay.is-open a:nth-child(4){transition-delay:.32s;}

@media (max-width:720px){
  .site-nav-links{display:none;}
  .site-nav-burger{display:block;}
  .site-nav-inner{padding:8px;}
}

/* ---------- Double-bezel nested card architecture ---------- */
.shell{
  background:rgba(18,41,63,0.045);
  border:1px solid rgba(18,41,63,0.08);
  border-radius:2rem;
  padding:8px;
}
.shell-core{
  background:var(--paper);
  border-radius:calc(2rem - 8px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.6);
  padding:2rem;
}
.shell-core.on-navy{
  background:var(--navy);
  color:var(--sand);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.08);
}

/* ---------- Pill buttons, button-in-button icon ---------- */
.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:6px 6px 6px 26px;
  border-radius:999px;
  background:var(--coral);
  color:var(--paper);
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .5s var(--ease-spring), background .5s var(--ease-spring);
}
.btn-pill.ghost{
  background:transparent;
  color:var(--navy);
  border:1.5px solid rgba(18,41,63,0.35);
  padding:6px 6px 6px 24px;
}
.btn-pill .icon-circle{
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease-spring);
  flex:0 0 auto;
  font-size:14px;
}
.btn-pill.ghost .icon-circle{background:rgba(18,41,63,0.08);}
.btn-pill:hover{transform:translateY(-2px); background:var(--navy);}
.btn-pill.ghost:hover{background:rgba(18,41,63,0.06); border-color:var(--navy);}
.btn-pill:hover .icon-circle{transform:translate(2px,-2px) scale(1.08);}
.btn-pill:active{transform:scale(0.97);}

/* ---------- Eyebrow pill badge ---------- */
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(232,98,60,0.3);
  background:rgba(232,98,60,0.08);
  color:var(--coral);
  border-radius:999px;
  padding:5px 14px 5px 10px;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-weight:700;
}
.badge-pill::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--coral);
}

/* ---------- Scroll reveal ----------
   Visible by default (no-JS, crawlers, single-shot renders, slow JS
   all get full content immediately). Only html.js-ready arms the
   hidden-then-reveal animation, and site.js guarantees every
   .reveal element is force-shown shortly after load regardless of
   whether IntersectionObserver ever fires for it. */
.reveal{
  opacity:1;
  transform:none;
  filter:none;
}
html.js-ready .reveal{
  opacity:0;
  transform:translateY(44px);
  filter:blur(6px);
  transition:opacity 900ms var(--ease-spring), transform 900ms var(--ease-spring), filter 900ms var(--ease-spring);
  will-change:transform, opacity;
}
html.js-ready .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
  html.js-ready .reveal{opacity:1; transform:none; filter:none; transition:none;}
}