/* ============================================================
   CoastalRev — shared design system
   One stylesheet for all four pages so they physically cannot drift.
   Page-specific CSS (the 3D scene, the chart chapter) stays inline
   in index.html. Everything reusable lives here.

   Tempo note: the calm timings tuned on 2026-07-25 are load-bearing.
   Durations here sit in the 0.6-1.2s band with a single easing curve.
   Do not speed these up.
   ============================================================ */

:root{
  /* --- ink & sea --- */
  --ink:#0d1c3f;
  --ink-2:#12294f;
  --dim:rgba(13,28,63,.66);
  --dim-2:rgba(13,28,63,.46);
  --paper:#f2f7fc;
  --sea:#0e3a5c;
  --sea-deep:#092039;

  /* --- signal --- */
  --lime:#7fae23;
  --lime-bright:#9ac738;
  --lime-wash:rgba(154,199,56,.12);

  /* --- glass --- */
  --glass:linear-gradient(150deg,rgba(255,255,255,.88),rgba(255,255,255,.72));
  --glass-soft:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.62));
  --glass-edge:rgba(255,255,255,.78);
  --glass-shadow:0 30px 70px -30px rgba(4,24,45,.55);

  /* --- rhythm --- */
  --gut:34px;
  --maxw:1180px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --dur:.9s;
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--sea);
  color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- type ---------- */
.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;
}

h1,h2,h3{font-weight:700;letter-spacing:-.032em;line-height:1.05;color:var(--ink)}
h1{font-size:clamp(40px,7vw,94px);letter-spacing:-.038em;line-height:1.02}
h2{font-size:clamp(28px,4vw,52px);max-width:18ch}
h3{font-size:clamp(20px,2.1vw,27px);letter-spacing:-.024em;line-height:1.2}

h2 .glow,h1 .glow,h3 .glow{color:var(--lime)}

.lede{color:var(--dim);max-width:56ch;margin-top:20px;font-size:17px}
.lede + .lede{margin-top:16px}
.lede strong{color:var(--ink);font-weight:600}

/* the pull-quote / conviction line */
.conviction{
  margin:38px 0 0;padding:0 0 0 22px;
  border-left:2px solid var(--lime);
  font-size:clamp(19px,2.2vw,25px);line-height:1.34;
  font-weight:600;letter-spacing:-.02em;color:var(--ink);
  max-width:34ch;
}
.conviction cite{
  display:block;margin-top:14px;font-style:normal;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);font-weight:400;
}

/* ---------- layout ---------- */
main{position:relative;z-index:2}
section{min-height:100vh;display:flex;align-items:center;padding:120px var(--gut);position:relative}
section.short{min-height:0;padding:104px var(--gut)}
.wrap{max-width:var(--maxw);margin:0 auto;width:100%}
.wrap.narrow{max-width:820px}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;width:100%}

/* section index marker — the quiet numbering that makes it feel authored */
.smark{
  display:flex;align-items:center;gap:14px;
  color:var(--dim-2);margin-bottom:18px;
}
.smark::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35;max-width:120px}
.smark.on-sea{color:rgba(255,255,255,.62)}

/* ---------- glass ---------- */
.panel{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(118%);
  -webkit-backdrop-filter:blur(18px) saturate(118%);
  border:1px solid var(--glass-edge);
  border-radius:18px;
  padding:52px 48px;
  box-shadow:var(--glass-shadow);
}
.panel.tight{padding:38px 36px}

.card{
  position:relative;padding:34px 30px;border-radius:16px;
  background:var(--glass-soft);
  border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 26px 60px -26px rgba(4,24,45,.6);
}
.card .tag{color:var(--lime);margin-bottom:18px}
.card .big{font-size:clamp(30px,3.6vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.card .big em{font-style:normal;color:var(--lime)}
.card .sub{color:var(--dim);font-size:14.5px;margin-top:12px}

/* ---------- the numbered situation / step grid ---------- */
.rows{display:grid;gap:1px;background:rgba(13,28,63,.12);border-radius:14px;overflow:hidden;margin-top:40px}
.row{
  background:rgba(255,255,255,.55);
  padding:30px 32px;
  display:grid;grid-template-columns:52px 1fr;gap:24px;align-items:start;
  transition:background var(--dur) var(--ease);
}
.row:hover{background:rgba(255,255,255,.78)}
.row .n{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:13px;letter-spacing:.1em;color:var(--lime);
  padding-top:5px;font-weight:500;
}
.row h3{margin-bottom:8px}
.row p{color:var(--dim);font-size:16px;max-width:62ch}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{
  padding:9px 16px;border-radius:100px;
  border:1px solid rgba(13,28,63,.18);
  background:rgba(255,255,255,.5);
  font-size:13.5px;color:var(--ink-2);font-weight:500;
}

/* ---------- CTA ---------- */
.cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:38px;
  padding:17px 32px;text-decoration:none;color:#0d1c3f;font-weight:700;font-size:15px;
  background:var(--lime-bright);border-radius:2px;
  box-shadow:0 14px 44px -12px rgba(0,0,0,.55);
  transition:box-shadow .5s var(--ease),transform .4s var(--ease);
}
.cta:hover{box-shadow:0 18px 56px -10px rgba(154,199,56,.6);transform:translateY(-2px)}
.cta .arw{transition:transform .5s var(--ease)}
.cta:hover .arw{transform:translateX(4px)}

.cta-note{margin-top:16px;font-size:14px;color:var(--dim);max-width:44ch}
.hero .cta-note{color:rgba(255,255,255,.74);text-shadow:0 2px 18px rgba(4,24,45,.6)}

/* text link with the slow underline */
.tlink{
  color:var(--lime);text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(127,174,35,.4);
  padding-bottom:2px;transition:border-color .5s var(--ease),color .5s var(--ease);
}
.tlink:hover{border-color:var(--lime);color:var(--ink)}

/* ---------- header / nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:30;
  padding:22px var(--gut);
  display:flex;justify-content:space-between;align-items:center;
  transition:background .7s var(--ease),backdrop-filter .7s var(--ease),padding .7s var(--ease);
}
header.docked{
  background:rgba(9,32,58,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  padding-top:15px;padding-bottom:15px;
}
.wordmark{
  font-weight:700;letter-spacing:-.022em;font-size:19px;color:#fff;
  text-decoration:none;text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.wordmark i{font-style:normal;color:var(--lime-bright)}

nav{display:flex;align-items:center;gap:30px}
nav a{
  color:rgba(255,255,255,.88);text-decoration:none;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
  position:relative;padding-bottom:3px;
}
nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--lime-bright);transition:right .6s var(--ease);
}
nav a:hover::after,nav a[aria-current="page"]::after{right:0}
nav a[aria-current="page"]{color:#fff}
nav .navcta{
  padding:10px 20px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.32);border-radius:2px;
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
nav .navcta::after{display:none}
nav .navcta:hover{background:var(--lime-bright);border-color:var(--lime-bright);color:#0d1c3f}

.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:#fff}
.navtoggle span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:transform .5s var(--ease),opacity .3s}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:2;padding:64px var(--gut) 44px;
  color:rgba(255,255,255,.82);font-size:14px;
  background:rgba(9,32,58,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.1);
}
.footgrid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;
}
footer a{color:rgba(255,255,255,.86);text-decoration:none;transition:color .4s var(--ease)}
footer a:hover{color:var(--lime-bright)}
footer h4{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:500;margin-bottom:16px;
}
.footlinks{display:flex;flex-direction:column;gap:11px}
.footbase{
  max-width:var(--maxw);margin:44px auto 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:rgba(255,255,255,.5);font-size:13px;
}

/* ---------- accessibility ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:#fff;color:var(--ink);font-weight:700;border-radius:0 0 8px 0;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--lime-bright);outline-offset:3px}

.noscript-note{
  position:relative;z-index:20;max-width:620px;margin:16vh auto;padding:32px;
  background:rgba(255,255,255,.94);color:var(--ink);border-radius:14px;
  font-size:17px;line-height:1.6;
}
.noscript-note a{color:#2f6b1f;font-weight:600}

/* ---------- grain plate ---------- */
#grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.6'/></svg>");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}

/* ---------- subpage sea backdrop ----------
   Lightweight horizon for /how-it-works, /faq, /about. No WebGL, no model.
   Same palette as the homepage scene so the pages read as one site. */
.seabg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 68% at 50% 104%, rgba(9,32,58,.96) 0%, rgba(14,58,92,0) 62%),
    radial-gradient(84% 52% at 76% -8%, rgba(255,214,158,.30) 0%, rgba(255,214,158,0) 60%),
    linear-gradient(180deg,#1d5680 0%,#14456b 34%,#0e3a5c 62%,#092039 100%);
}
/* The horizon. It must sit exactly where the sea gradient begins (62%) — at 46%
   it floated above the water and read as a stray rule drawn through the intro
   copy rather than as a horizon. */
.seabg::after{
  content:"";position:absolute;left:0;right:0;top:62%;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.26),rgba(255,255,255,0));
}

/* sea-lite canvas: live water behind the subpages (desktop only).
   Fades in over the .seabg gradient once the first frame renders. */
#sea{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 2.2s var(--ease)}
body.sea-ready #sea{opacity:1}
@media(max-width:900px){#sea{display:none}}

/* page masthead used by the three subpages */
.masthead{padding:190px var(--gut) 92px;position:relative;z-index:2;min-height:0;display:block}
.masthead .wrap{max-width:var(--maxw)}
.masthead h1{color:#fff;max-width:16ch;text-shadow:0 4px 40px rgba(4,24,45,.55)}
.masthead .eyebrow{color:rgba(255,255,255,.72);margin-bottom:22px}
.masthead .intro{
  margin-top:26px;max-width:56ch;font-size:clamp(16px,1.6vw,19px);
  color:rgba(255,255,255,.88);text-shadow:0 2px 24px rgba(4,24,45,.55);
}

/* staggered-reveal primitives (GSAP targets these).
   overflow:hidden is the MASK the word-reveal slides out of — words start
   translated 118% down and rise into view. If you screenshot mid-reveal it
   looks like the last line is being clipped; it isn't. Measured 2026-07-25:
   scrollHeight vs height differs by at most 1px (subpixel rounding) at every
   heading and viewport. Don't "fix" the clipping you see in a paused frame. */
.wd{display:inline-block;will-change:transform}
h1,h2{overflow:hidden}

/* ============================================================
   MOBILE TIER
   Phones get no WebGL at all. The 3D canvas is removed from the
   document by script; these rules cover the layout that replaces it.
   ============================================================ */
@media(max-width:900px){
  :root{--gut:22px}
  section{padding:96px var(--gut);min-height:0}
  section.short{padding:76px var(--gut)}
  .split{grid-template-columns:1fr;gap:36px}
  .panel{padding:34px 26px;border-radius:14px}
  .panel.tight{padding:28px 24px}
  .row{grid-template-columns:38px 1fr;gap:16px;padding:26px 22px}
  .masthead{padding:132px var(--gut) 64px}
  .footgrid{grid-template-columns:1fr;gap:34px}
  footer{padding:52px var(--gut) 36px}

  nav{
    position:fixed;inset:0 0 auto;top:0;
    background:rgba(9,32,58,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:28px;padding:100px 28px 44px;height:100vh;
    transform:translateY(-100%);transition:transform .7s var(--ease);
  }
  nav.open{transform:translateY(0)}
  nav a{font-size:24px;font-weight:600;letter-spacing:-.02em}
  nav .navcta{margin-top:10px;font-size:16px;padding:14px 26px}
  .navtoggle{display:block;position:relative;z-index:2}
  .navtoggle.x span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle.x span:nth-child(2){opacity:0}
  .navtoggle.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  header.docked{background:rgba(9,32,58,.9)}
}

@media(max-width:600px){
  .conviction{font-size:20px;padding-left:16px}
  .chips{gap:8px}
  .chip{font-size:12.5px;padding:8px 13px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #grain{animation:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}