/* =========================================================================
   Two Rivers Pharmacy
   One stylesheet. Two canvases: the deep compounding world above the
   waterline, daylight below it.
   ========================================================================= */

:root{
  /* below the waterline: the compounding world */
  --deep:#06192B;
  --deep-2:#0A2338;
  --deep-panel:#0C2941;
  --deep-line:#1B3E5C;
  --on-deep:#E9F2F8;
  --on-deep-dim:#9BB5C9;

  /* above the waterline: daylight */
  --canvas:#F6F4EF;
  --panel:#FFFFFF;
  --panel-2:#FBFAF6;
  --line:#E2DFD6;
  --line-strong:#C9C4B6;
  --text:#0F1E2B;
  --text-dim:#4C5F70;

  /* the brand, exact from the logo file */
  --navy:#144C8E;
  --river:#1173CC;
  --river-light:#4FA3E3;
  --river-ink:#0E62B2;   /* the brand blue darkened just enough to clear 4.5:1 on paper */

  /* the accent, from the storefront awnings. rare doses only */
  --accent:#1C7F5F;
  --accent-hover:#166B50;
  --accent-muted:rgba(28,127,95,.20);
  /* small accent text on paper: #1C7F5F measures 4.49:1, just under AA */
  --accent-ink:#176C50;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --wrap:1180px;
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
  margin:0;
  padding:0;
}

html{scroll-behavior:smooth}

body{
  background:var(--canvas);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(16px,.4vw + 15px,18px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%;display:block}
img{height:auto}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 0;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}

p{margin:0}

a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:12px 20px;
  border-radius:0 0 10px 0;font-weight:600;
}
.skip:focus{left:0}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- the fixed environment layer ---------- */

.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 82% 8%, rgba(17,115,204,.10), transparent 62%),
    radial-gradient(760px 560px at 8% 88%, rgba(20,76,142,.07), transparent 60%);
  animation:envdrift 78s var(--ease) -22s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-2.2%,0) scale(1.05)}
}

/* grain, whisper level */
.env::after{
  content:"";position:absolute;inset:0;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;z-index:1;
}

.wrap-wide{max-width:1400px}

section{position:relative;z-index:1}

.sec{padding-block:clamp(72px,10vw,140px)}
.sec-tight{padding-block:clamp(52px,7vw,96px)}

/* deep sections */
.deep{background:var(--deep);color:var(--on-deep)}
.deep h1,.deep h2,.deep h3{color:var(--on-deep)}

/* ---------- type helpers ---------- */

.kicker{
  font-family:var(--mono);
  font-size:.70rem;
  font-weight:500;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--river-ink);
  margin:0 0 18px;
  display:block;
}
.deep .kicker,.band .kicker,.static-hero .kicker,.pagehead .kicker,.foot h3{color:var(--river-light)}

h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:300}
h2{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:300}
h3{font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.01em;line-height:1.22}

.lede{
  font-size:clamp(1.06rem,1.4vw,1.28rem);
  color:var(--text-dim);
  max-width:62ch;
  margin-top:22px;
  line-height:1.56;
}
.deep .lede{color:var(--on-deep-dim)}

.sec-head{max-width:820px;margin-bottom:clamp(40px,5vw,68px)}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--body);
  font-size:.95rem;font-weight:600;letter-spacing:.005em;
  padding:15px 28px;
  border-radius:999px;
  border:1.5px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
  text-shadow:none;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.06),0 12px 30px rgba(28,127,95,.26);
}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 2px 0 rgba(0,0,0,.06),0 16px 38px rgba(28,127,95,.34)}

.btn-ghost{
  background:transparent;color:var(--text);border-color:var(--line-strong);
}
.btn-ghost:hover{border-color:var(--text);background:rgba(15,30,43,.04)}

.deep .btn-ghost,.pagehead .btn-ghost,.band .btn-ghost,.static-hero .btn-ghost{
  color:#EDF4F9;border-color:rgba(175,200,218,.62);
}
.deep .btn-ghost:hover,.pagehead .btn-ghost:hover,.band .btn-ghost:hover,.static-hero .btn-ghost:hover{
  border-color:#EDF4F9;background:rgba(233,242,248,.10);color:#fff;
}

/* The nav bar is transparent over the deep hero until it goes solid, and it is
   none of the deep contexts above, so its ghost button was rendering dark ink
   on dark. Both states are stated explicitly here. */
.nav .btn-ghost{color:#EDF4F9;border-color:rgba(175,200,218,.62)}
.nav .btn-ghost:hover{border-color:#EDF4F9;background:rgba(233,242,248,.10);color:#fff}
.nav.solid .btn-ghost{color:var(--text);border-color:var(--line-strong)}
.nav.solid .btn-ghost:hover{border-color:var(--text);background:rgba(15,30,43,.04);color:var(--text)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

@media (pointer:coarse){
  .btn{min-height:48px}
}

/* download pill */
.dl{
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
  color:var(--accent);
  padding:11px 18px;border:1.5px solid var(--accent-muted);border-radius:999px;
  background:var(--panel);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.dl:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.dl svg{width:14px;height:14px;flex:none}
@media (pointer:coarse){.dl{min-height:46px}}

/* ---------- nav ---------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:24px;
  padding:14px var(--gutter);
  transition:background-color .5s var(--ease),backdrop-filter .5s var(--ease),
             box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav.solid{
  background:rgba(246,244,239,.92);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--line),0 10px 34px rgba(15,30,43,.06);
  padding-block:10px;
}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex:none}
.nav-logo img{height:34px;width:auto;transition:opacity .4s var(--ease)}
.nav-logo .lw{display:block}
.nav-logo .lc{display:none}
.nav.solid .nav-logo .lw{display:none}
.nav.solid .nav-logo .lc{display:block}

.nav-links{
  display:flex;align-items:center;gap:4px;margin-left:auto;
  list-style:none;padding:0;margin-block:0;
}
.nav-links a{
  display:block;padding:9px 14px;border-radius:999px;
  font-size:.9rem;font-weight:500;text-decoration:none;
  color:var(--on-deep);
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.nav.solid .nav-links a{color:var(--text-dim)}
.nav-links a:hover{background:rgba(233,242,248,.12);color:#fff}
.nav.solid .nav-links a:hover{background:rgba(15,30,43,.05);color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--river-light)}
.nav.solid .nav-links a[aria-current="page"]{color:var(--river-ink)}

.nav .btn{padding:11px 20px;font-size:.86rem;margin-left:10px}
.nav-refill{margin-left:14px}
@media (max-width:1180px){.nav-refill{display:none}}

.nav-toggle{
  display:none;margin-left:auto;
  background:none;border:1.5px solid rgba(155,181,201,.4);border-radius:10px;
  width:44px;height:44px;cursor:pointer;
  align-items:center;justify-content:center;
  color:var(--on-deep);
}
.nav.solid .nav-toggle{color:var(--text);border-color:var(--line-strong)}
.nav-toggle svg{width:20px;height:20px}

@media (max-width:1000px){
  .nav-links,.nav>.btn{display:none}
  .nav-toggle{display:inline-flex}
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:100%;left:var(--gutter);right:var(--gutter);
    background:var(--panel);border:1px solid var(--line);border-radius:16px;
    padding:12px;box-shadow:0 24px 60px rgba(15,30,43,.16);
  }
  .nav.open .nav-links a{color:var(--text);padding:13px 16px;border-radius:10px}
  .nav.open>.btn{
    display:inline-flex;position:absolute;
    top:calc(100% + 8px);left:var(--gutter);right:calc(50% + 5px);
    margin-left:0;
  }
  .nav.open>.btn.btn-primary{left:calc(50% + 5px);right:var(--gutter)}
  .nav.open>.nav-refill{display:inline-flex}
}

/* ---------- the scrub hero ---------- */

/* 640vh gives each of the four beats a plateau of roughly 113vh, which is what
   the flick test demanded. 400vh made beats 1 and 2 skippable at speed. */
.hero{position:relative;height:640vh;background:var(--deep)}

.stage{
  position:sticky;top:0;height:100vh;
  overflow:hidden;
  background:var(--deep);
}

.stage .poster,
.stage video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.stage .poster{
  background-size:cover;background-position:center;
  background-color:var(--deep);
  background-image:
    radial-gradient(120% 90% at 76% 10%, rgba(17,115,204,.32), transparent 58%),
    radial-gradient(90% 74% at 10% 94%, rgba(20,76,142,.42), transparent 60%);
}
.stage video{
  opacity:0;
  transition:opacity .9s var(--ease);
  transform:translateZ(0);
  will-change:transform;
}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}

/* the global base scrim */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(6,25,43,0) 32%,rgba(6,25,43,.66) 100%);
}
/* the text lane wash: always on, protects the left column whatever the footage does */
.scrim-left{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,
    rgba(4,13,24,.80) 0%,
    rgba(4,13,24,.66) 26%,
    rgba(4,13,24,.34) 48%,
    rgba(4,13,24,0) 68%);
}
/* a soft vertical wash so the nav always has ground */
.scrim-top{
  position:absolute;inset:0 0 auto 0;height:36vh;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,25,43,.62),rgba(6,25,43,0));
}

/* caption bands */
.bands{
  position:absolute;inset:0;
  display:grid;
  align-items:center;
  padding:0 var(--gutter);
  pointer-events:none;
}
.band{
  grid-area:1/1;
  width:min(46%,620px);
  opacity:0;
  text-shadow:var(--tshadow);
  color:var(--on-deep);
  position:relative;
}
.band::before{
  content:"";position:absolute;inset:-22% -24% -22% -40%;
  pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 86% 74% at 40% 50%,rgba(4,13,24,.80) 0%,rgba(4,13,24,.58) 48%,rgba(4,13,24,0) 78%);
}
.band .btn{text-shadow:none;pointer-events:auto}
.band a{pointer-events:auto}

.band h1,.band h2{color:#fff}
.band .sub{
  font-size:clamp(1rem,1.25vw,1.18rem);
  color:#D8E6F0;margin-top:20px;max-width:44ch;line-height:1.5;
}

/* the settle band sits centered-low with an upper ellipse scrim */
.band.settle{
  width:min(58%,760px);
}
.band.settle::before{
  inset:-26% -22% -26% -40%;
  background:radial-gradient(ellipse 92% 84% at 38% 48%,rgba(4,13,24,.88) 0%,rgba(4,13,24,.70) 46%,rgba(4,13,24,0) 80%);
}

/* split-text spans */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vis{display:block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) drift-down */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* (i) weave */
.e-weave .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * var(--jy,0px)));
}
/* (d) word-punch with overshoot */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (e) staged settle */
.e-settle .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px));
}
.e-settle .sub{
  --ks:clamp(0,(var(--k,0) - .60)*3.6,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks)) * 16px));
}
.e-settle .btn-row{
  --kb:clamp(0,(var(--k,0) - .74)*4.4,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 14px));
}

/* the loading ring */
.ring{
  position:absolute;right:calc(var(--gutter));bottom:38px;
  width:44px;height:44px;color:rgba(233,242,248,.72);
  transform:rotate(-90deg);
  transition:opacity .6s var(--ease);
}
.stage.video-ready .ring{opacity:0}
.chev{
  position:absolute;right:var(--gutter);bottom:38px;
  width:26px;height:44px;color:rgba(233,242,248,.6);
  animation:chev 2.6s var(--ease) infinite;
}
@keyframes chev{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:.9}}

/* static hero (the five gates) */
.static-hero{
  display:none;
  position:relative;
  min-height:92vh;
  /* a designed background so a missing poster still reads as intentional */
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(17,115,204,.34), transparent 58%),
    radial-gradient(90% 70% at 12% 92%, rgba(20,76,142,.40), transparent 60%),
    var(--deep);
  color:var(--on-deep);
  align-items:center;
  overflow:hidden;
}
/* the static hero's art is a background, not an <img>, so desktop never fetches it:
   a hidden element's background is not downloaded, but a hidden <img> still is */
.static-hero .poster-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.static-hero .sh-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(6,25,43,.72) 0%,rgba(6,25,43,.52) 42%,rgba(6,25,43,.86) 100%);
}
.static-hero .wrap{padding-block:120px 72px}
.static-hero h1{color:#fff;text-shadow:var(--tshadow)}
.static-hero .lede{color:#D8E6F0;text-shadow:0 2px 10px rgba(5,5,10,.8)}
.static-hero .kicker{color:var(--river-light);text-shadow:0 2px 8px rgba(5,5,10,.9)}

/* ---------- the waterline (the signature element) ---------- */

.waterline{
  position:relative;
  height:clamp(90px,11vw,150px);
  background:var(--deep);
  overflow:hidden;
  margin-bottom:-1px;
}
.waterline svg{
  position:absolute;bottom:-1px;left:0;
  width:100%;height:100%;
  display:block;
}
/* each wave tiles at its own period, so translating by exactly one period loops seamlessly */
.waterline .w1{fill:var(--navy);opacity:.46;animation:wave1 30s linear infinite -4s}
.waterline .w2{fill:var(--river);opacity:.30;animation:wave2 23s linear infinite -9s}
.waterline .w3{fill:var(--canvas)}
@keyframes wave1{from{transform:translateX(0)}to{transform:translateX(-480px)}}
@keyframes wave2{from{transform:translateX(0)}to{transform:translateX(360px)}}

/* the inverted waterline, for going back under the surface */
.waterline.down{background:var(--canvas)}
.waterline.down .w1{fill:var(--river);opacity:.28}
.waterline.down .w2{fill:var(--navy);opacity:.24}
.waterline.down .w3{fill:var(--deep)}

/* card wave rule */
.waverule{display:block;width:100%;height:9px;color:var(--river-light);opacity:.4}

/* ---------- cards ---------- */

.grid{display:grid;gap:clamp(18px,2.2vw,30px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .55s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 60px rgba(15,30,43,.11);
  border-color:var(--line-strong);
}
.card-media{
  position:relative;aspect-ratio:4/3;background:var(--panel-2);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.035)}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-body p{color:var(--text-dim);font-size:.96rem;line-height:1.55}
.card-foot{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.card a.stretch::after{content:"";position:absolute;inset:0}
.card{position:relative}

.card-link{
  font-weight:600;font-size:.94rem;text-decoration:none;color:var(--navy);
  display:inline-flex;align-items:center;gap:.45em;
  transition:gap .4s var(--ease),color .4s var(--ease);
}
.card-link:hover{gap:.8em;color:var(--river-ink)}

/* deep context: rows, prose, tags */
.deep .rows,.deep .row{border-color:var(--deep-line)}
.deep .row dt{color:var(--river-light)}
.deep .row dd{color:var(--on-deep-dim)}
.deep .prose ul li{color:var(--on-deep-dim)}
.deep .prose ul li::before{background:var(--river-light)}
.deep .prose h3{color:var(--on-deep)}

/* deep cards */
.deep .card{background:var(--deep-panel);border-color:var(--deep-line)}
.deep .card-media{background:var(--deep-2);border-color:var(--deep-line)}
.deep .card-body p{color:var(--on-deep-dim)}
.deep .card-link{color:var(--river-light)}


/* ---------- the three pillars: an index, not another card grid ----------
   Deliberately a different skeleton from the catalog cards that follow it,
   so the page never stamps the same layout twice in a row. */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-strong);
}
.pillar{
  padding:34px 30px 32px 0;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  transition:padding-left .5s var(--ease);
}
.pillar:last-child{border-right:0}
.pillar+.pillar{padding-left:30px}
.pillar::after{
  content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--accent);
  transition:width .7s var(--ease-out);
}
.pillar:hover::after{width:100%}
.pillar .picon{width:44px;height:44px;color:var(--navy)}
.pillar h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600}
.pillar p{color:var(--text-dim);font-size:.97rem;line-height:1.55}
.pillar .card-link{margin-top:auto;padding-top:6px}
.pillar a.stretch::after{content:"";position:absolute;inset:0}
@media (max-width:860px){
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:0;border-bottom:1px solid var(--line);padding:26px 0}
  .pillar+.pillar{padding-left:0}
  .pillar:last-child{border-bottom:0}
}

/* ---------- numbered route cards (prescribers) ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:860px){.routes{grid-template-columns:1fr}}
.route{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:28px 26px 26px;display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .5s var(--ease);
}
.route:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(15,30,43,.11);border-color:var(--line-strong)}
.route .rn{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--river-ink);
}
.route h3{font-size:1.22rem}
.route p{color:var(--text-dim);font-size:.95rem;line-height:1.55}
.route .big{
  font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--navy);
  letter-spacing:-.01em;
}
.route::before{
  content:"";position:absolute;right:-70px;bottom:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(17,115,204,.07),rgba(17,115,204,.03) 42%,transparent 72%);
  transition:transform .9s var(--ease-out);
}
.route:hover::before{transform:scale(1.22)}


/* ---------- full-width image band ----------
   A visual breath between text-heavy sections. Parallax-free on purpose: the hero
   already owns the motion budget, and a second scroll-driven surface competes with it. */
.imgband{
  position:relative;overflow:hidden;
  height:clamp(240px,34vw,460px);
  background:var(--deep);
  margin:0;            /* figure carries a default margin; a full-bleed band wants none */
  width:100%;
}
.imgband img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
}
.imgband::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,25,43,.34) 0%,rgba(6,25,43,0) 34%,rgba(6,25,43,0) 66%,rgba(6,25,43,.34) 100%);
}
.imgband figcaption{
  position:absolute;left:var(--gutter);bottom:22px;z-index:2;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#DCE9F2;text-shadow:0 2px 10px rgba(5,5,10,.9);
  max-width:min(60ch,70%);
}
@media (max-height:560px){.imgband{height:200px}}

/* an image sitting inside a split, matched to the card radius */
.splitimg{
  border-radius:18px;border:1px solid var(--line);overflow:hidden;
  width:100%;display:block;
}
.deep .splitimg{border-color:var(--deep-line)}


/* embedded third-party form (Google Forms) */
.formwrap{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:0 18px 44px rgba(15,30,43,.07);
  /* Google's form column is 640px plus its own 24px gutters. Capping the card
     just above that stops it floating in a sea of white inside a wider column. */
  max-width:700px;
}
/* A cross-origin Google Form cannot report its own height, so the frame is sized
   by hand. Measured in a real browser: Google pins the form's content column at
   640px and the whole thing runs 2448px tall at that width, so anything wider
   than ~660px is the same height. Below that the column narrows, labels wrap
   onto second lines and it grows. Every value here overshoots on purpose:
   spare height shows a little blank white inside the card, while coming up
   short gives the form its own inner scrollbar, which is much worse. */
.formwrap iframe{display:block;width:100%;border:0;height:2520px}
@media (max-width:720px){ .formwrap iframe{height:2780px} }
@media (max-width:560px){ .formwrap iframe{height:3080px} }
@media (max-width:400px){ .formwrap iframe{height:3320px} }

/* ---------- entrances ---------- */

.reveal>*{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.reveal.in>*{opacity:1;transform:none}
.reveal.in>*:nth-child(1){transition-delay:0ms}
.reveal.in>*:nth-child(2){transition-delay:80ms}
.reveal.in>*:nth-child(3){transition-delay:160ms}
.reveal.in>*:nth-child(4){transition-delay:240ms}
.reveal.in>*:nth-child(5){transition-delay:320ms}
.reveal.in>*:nth-child(6){transition-delay:400ms}
.reveal.in>*:nth-child(7){transition-delay:480ms}
/* retire the delays so hovers do not lag. matches the nth-child specificity */
.reveal.done.in>*:nth-child(n){transition-delay:0s !important}

.rise{
  opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
}
.rise.in{opacity:1;transform:none}

/* ---------- footer ---------- */

.foot{background:var(--deep);color:var(--on-deep-dim);padding-block:clamp(56px,7vw,88px) 40px}
.foot a{color:var(--on-deep-dim);text-decoration:none;transition:color .35s var(--ease)}
.foot a:hover{color:#fff}
.foot h4{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--river-light);margin:0 0 16px;
}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:.93rem}
/* 18px of line box is under the 24px minimum target size, so the padding
   here is what makes each footer link tappable rather than decorative. */
.foot ul a{display:inline-block;padding-block:4px}
.foot-logo img{height:38px;width:auto;margin-bottom:20px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-base{
  margin-top:clamp(40px,5vw,64px);padding-top:26px;
  border-top:1px solid var(--deep-line);
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  font-size:.82rem;color:#7893A8;
}

/* ---------- misc ---------- */

.hr-wave{height:1px;background:var(--line);border:0;margin:0}

.tag{
  display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:6px 11px;border-radius:6px;
  background:rgba(17,115,204,.09);color:var(--navy);
}
.deep .tag{background:rgba(79,163,227,.14);color:var(--river-light)}

.pagehead{
  background:var(--deep);color:var(--on-deep);
  padding-block:clamp(130px,15vw,180px) clamp(56px,7vw,86px);
  position:relative;overflow:hidden;
}
.pagehead h1{color:#fff;font-size:clamp(2.3rem,5vw,3.7rem)}
.pagehead .lede{color:var(--on-deep-dim)}
.pagehead .kicker{color:var(--river-light)}
.pagehead .kicker a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* prose */
.prose h3{margin-top:34px;margin-bottom:12px}
.prose p+p{margin-top:14px}
.prose ul{margin:14px 0 0;padding-left:0;list-style:none;display:grid;gap:11px}
.prose ul li{position:relative;padding-left:26px;color:var(--text-dim)}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:11px;height:2px;border-radius:2px;background:var(--river);
}

/* definition rows */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:200px 1fr;gap:clamp(16px,3vw,40px);
  padding:22px 0;border-bottom:1px solid var(--line);
  align-items:baseline;
}
.row dt{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.row dd{margin:0;color:var(--text-dim)}
@media (max-width:700px){.row{grid-template-columns:1fr;gap:6px}}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(1.06rem,1.5vw,1.28rem);font-weight:600;
  line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:13px;height:13px;margin-top:-7px;
  border-right:2px solid var(--river);border-bottom:2px solid var(--river);
  transform:rotate(45deg);transition:transform .45s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 26px;color:var(--text-dim);max-width:70ch}

/* form */
.form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);
}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--text);
  background:var(--panel);
  border:1.5px solid var(--line-strong);border-radius:12px;
  padding:14px 16px;width:100%;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-muted);
}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.f2{grid-template-columns:1fr}}

.form-done{
  display:none;padding:26px;border-radius:14px;
  background:var(--accent-muted);border:1.5px solid var(--accent);
  font-weight:600;color:var(--accent-hover);
}
.form.sent .form-done{display:block}
.form.sent .form-fields{display:none}

/* contact rail */
.rail{display:grid;gap:2px;border-top:1px solid var(--line)}
.rail a,.rail div{
  display:flex;gap:16px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--text);
  transition:padding-left .4s var(--ease),color .4s var(--ease);
}
.rail a:hover{padding-left:8px;color:var(--river-ink)}
.rail .lbl{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);flex:none;width:92px;
}

/* ---------- the interactive moment ---------- */

.hold-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.hold-wrap{grid-template-columns:1fr}}

.hold-stage{
  position:relative;aspect-ratio:1/1;max-width:460px;width:100%;margin-inline:auto;
}
.hold-stage svg{width:100%;height:100%;overflow:visible}

.hold-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  margin-top:26px;padding:15px 30px;border-radius:999px;
  background:var(--deep-panel);color:var(--on-deep);
  border:1.5px solid var(--deep-line);
  font-family:var(--body);font-weight:600;font-size:.95rem;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),transform .3s var(--ease);
}
.hold-btn:hover{border-color:var(--river)}
.hold-btn:active{transform:scale(.98)}
.hold-btn .prog{
  position:absolute;inset:0;border-radius:999px;
  background:var(--accent);opacity:.24;
  transform-origin:left center;
  transform:scaleX(var(--hp,0));
  pointer-events:none;
}
.hold-btn{position:relative;overflow:hidden}

.changes{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:2px}
.changes li{
  display:grid;grid-template-columns:38px 1fr;gap:16px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--deep-line);
  opacity:.26;
  transition:opacity .7s var(--ease),transform .7s var(--ease-out);
  transform:translateY(8px);
}
.changes li.lit{opacity:1;transform:none}
.changes .n{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--river-light);
}
.changes strong{display:block;font-size:1.02rem;color:var(--on-deep);margin-bottom:3px}
.changes span.d{color:var(--on-deep-dim);font-size:.93rem}

/* ---------- droplet motes, deep regions only ---------- */

.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.5}
.mote{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85),rgba(79,163,227,.28) 62%,transparent 72%);
}
.motes.play .mote{animation:mote linear infinite}
@keyframes mote{
  from{transform:translate3d(0,14vh,0);opacity:0}
  12%{opacity:.75}
  88%{opacity:.55}
  to{transform:translate3d(14px,-104vh,0);opacity:0}
}

/* ---------- pause everything when hidden ---------- */
body.paused *,
body.paused *::before,
body.paused *::after{animation-play-state:paused !important}

/* ---------- short screens: hide scroll furniture ---------- */
@media (max-height:560px){
  .ring,.chev,.motes{display:none}
}

/* =========================================================================
   The five static-hero gates. These five strings must match site.js exactly.
   ========================================================================= */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:flex}
  .static-hero .poster-img{
    background-image:url("/assets/hero-ending.jpg");
    background-size:cover;background-position:center;
  }
}

/* ---------- reduced motion, honored completely ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .reveal>*,.rise{opacity:1 !important;transform:none !important}
  .changes li{opacity:1;transform:none}
  .env{animation:none}
  .waterline .w1,.waterline .w2{animation:none}
}

/* ================================================================ TRAINING
   The staff training page: stat strip, the published Slides deck, the
   attestation gate, and the quiz. Everything here is scoped to that page. */

.stats{gap:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.stat{
  padding:22px 24px 20px 0;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;
}
.stat:last-child{border-right:0}
.stat .v{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.2;color:var(--text);
}
@media (max-width:860px){
  .stat{padding-right:18px}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:460px){
  .stat{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .stat:last-child{border-bottom:0}
}

/* the deck. 1400x816 is what Google publishes; the extra 29px over 16:9 is
   its own control bar, so the ratio is taken from the source rather than
   assumed. */
.deck{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(155,181,201,.26);
  background:#05121F;
  box-shadow:0 34px 80px rgba(3,10,20,.5);
}
.deck iframe{display:block;width:100%;aspect-ratio:1400/816;border:0}

.notice{
  margin-top:30px;padding:20px 24px;border-radius:14px;
  background:rgba(28,127,95,.06);
  border:1px solid var(--accent-muted);
  font-size:.95rem;line-height:1.65;color:var(--text-dim);
}
.notice strong{color:var(--accent-ink);font-weight:600}
.deep .notice{
  background:rgba(233,242,248,.06);border-color:rgba(175,200,218,.3);color:#C7D8E5;
}
.deep .notice strong{color:var(--river-light)}

/* attestation gate */
.attest{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:26px 28px;box-shadow:0 18px 44px rgba(15,30,43,.06);
}
.attest label{display:flex;gap:16px;align-items:flex-start;cursor:pointer}
.attest input{
  width:26px;height:26px;flex:none;margin:1px 0 0;
  accent-color:var(--accent);cursor:pointer;
}
.attest .t{display:block;font-weight:600;margin-bottom:7px;color:var(--text)}
.attest .d{display:block;font-size:.92rem;line-height:1.65;color:var(--text-dim)}
@media (pointer:coarse){.attest input{width:30px;height:30px}}

.quizslot{margin-top:28px}
.quiz-locked{
  display:grid;place-items:center;text-align:center;
  min-height:150px;padding:34px 24px;
  border:1px dashed var(--line-strong);border-radius:18px;
  color:var(--text-dim);font-size:.95rem;
}
.quizslot.open .quiz-locked{display:none}
.quiz-live{display:none}
.quizslot.open .quiz-live{display:block}

/* Measured in a real browser: 27 questions, 7122px tall at Google's fixed
   640px column. Embedded whole so there is no scrollbar inside a scrollbar. */
.quiz-embed{display:block}
.quiz-embed iframe{display:block;width:100%;border:0;height:7260px}
.quiz-open{display:none}
/* Below this the form's column starts shrinking and the page would run past
   11,000px. A 27-question quiz inside a nested scroll frame on a phone is
   worse than Google's own full-screen form, so hand it over instead. */
@media (max-width:860px){
  .quiz-embed{display:none}
  .quiz-open{display:block;text-align:center;padding:34px 24px}
  .quiz-open p{color:var(--text-dim);font-size:.95rem;margin-bottom:20px}
}