/* ==========================================================================
   Lightshine Health. site.css
   Loads after kit.css. Colour, type and layout live here; motion and shape
   vocabulary come from the kit.

   Palette is read from the book cover, the one designed piece she has:
   navy #031f5c and #06358b, gold #e69f17. The lighter golds are the same hue
   lifted for text on navy. Nothing here is a chosen colour.
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2")}

:root{
  --navy:#031f5c;
  --royal:#06358b;
  --deep:#02153f;
  --ink:#0b1a3d;
  --ink-2:#3a4a70;
  --paper:#d8e3f5;   /* the light bands. A real pale blue, the navy lifted, not a new hue */
  --paper-2:#c6d5ee;
  --gold:#e69f17;
  --gold-l:#f0d29a;
  --gold-pale:#fff1cc;
  --gold-deep:#b97c0c;
  --on-navy:rgba(255,250,240,.9);
  --on-navy-2:#d8c79c;

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;
  --gutter:clamp(20px,4vw,48px);
  --sec:clamp(88px,11vw,150px);
  --r:28px;
  --r-lg:36px;
}

/* ------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:clip;
  font-family:var(--text);font-size:1.0625rem;line-height:1.65;
  color:var(--ink);background:var(--navy);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1.02;letter-spacing:-.012em;text-wrap:balance}
h2{font-size:clamp(2.3rem,4.6vw,3.9rem);margin-bottom:clamp(22px,3vw,36px)}
h3{font-size:clamp(1.7rem,2.6vw,2.25rem)}
p{margin:0 0 1.1em}
a{color:inherit}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
input,textarea,button{font:inherit;caret-color:var(--gold)}
html{scrollbar-color:var(--gold-deep) var(--deep)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:8px;border:2px solid var(--deep)}

.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:-999px;top:12px;z-index:100;padding:10px 16px;background:var(--gold);color:var(--navy);border-radius:999px;font-weight:600}
.skip:focus{left:12px}
.i{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.gold{color:var(--gold-l)}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* ==========================================================================
   GOLD LIQUID GLASS
   Four layers, from the back:
     1. backdrop: blur + saturate, and on Chromium the SVG refraction filter
        that bends the backdrop outward at the rim (img/map-*.png).
     2. tint: a warm gradient so the pane reads as gold-tinted glass, not
        smoke.
     3. rim: a 1px conic gradient border, brightest top-left and bottom-right
        where a real edge would catch light.
     4. specular: an off-centre highlight that follows the pointer.
   Every value is a custom property so the header, a card and a form can
   share the material at different strengths.
   ========================================================================== */
.lg{
  position:relative;isolation:isolate;
  border-radius:var(--lg-r,var(--r-lg));
  background:
    /* a tight hot specular and a wide soft one, both following the pointer */
    radial-gradient(34% 30% at var(--mx,22%) var(--my,8%),rgba(255,248,228,var(--lg-spec,.2)) 0,transparent 70%),
    radial-gradient(150% 100% at var(--mx,22%) var(--my,8%),rgba(255,244,214,calc(var(--lg-spec,.2) * .45)) 0,transparent 55%),
    /* a static glint band, the way a pane catches the room */
    linear-gradient(115deg,transparent 34%,rgba(255,250,235,.05) 44%,rgba(255,250,235,.09) 49%,transparent 60%),
    linear-gradient(135deg,rgba(255,241,204,var(--lg-tint,.12)),rgba(230,159,23,.06) 45%,rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(var(--lg-blur,16px)) saturate(1.6) brightness(1.06) contrast(1.03);
          backdrop-filter:blur(var(--lg-blur,16px)) saturate(1.6) brightness(1.06) contrast(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,.62),
    inset 0 -1px 0 rgba(230,159,23,.3),
    inset 1px 0 0 rgba(255,238,196,.18),
    inset -1px 0 0 rgba(230,159,23,.14),
    /* thickness: light pooling along the top inside edge, warmth along the bottom */
    inset 0 22px 34px -24px rgba(255,238,196,.3),
    inset 0 -26px 40px -28px rgba(230,159,23,.38),
    0 36px 80px -36px rgba(0,8,40,.8),
    0 0 0 1px rgba(3,20,70,.25);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.lg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from 200deg at 50% 50%,
    rgba(255,246,214,1),rgba(240,190,80,.5) 12%,rgba(230,159,23,.22) 24%,rgba(255,255,255,.08) 40%,
    rgba(255,236,180,.95) 56%,rgba(240,190,80,.45) 66%,rgba(230,159,23,.24) 80%,rgba(255,246,214,1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* the inner edge: a soft band just inside the rim where a thick pane bends
   the light, and the top-lit gradient a real slab carries */
.lg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(255,250,235,.1),transparent 24%,transparent 78%,rgba(230,159,23,.07));
  box-shadow:inset 0 0 26px rgba(255,222,150,.13),inset 0 0 2px rgba(255,246,214,.35);
}
.lg>*{position:relative;z-index:3}
/* Chromium gets the refraction. motion in site.js adds the class after a
   feature check; the map images are tiny PNGs of how far to bend. */
.lg-refract .lg--pill{-webkit-backdrop-filter:url(#lg-pill) blur(10px) saturate(1.6) brightness(1.06) contrast(1.03);backdrop-filter:url(#lg-pill) blur(10px) saturate(1.6) brightness(1.06) contrast(1.03)}
.lg-refract .lg--card{-webkit-backdrop-filter:url(#lg-card) blur(12px) saturate(1.6) brightness(1.06) contrast(1.03);backdrop-filter:url(#lg-card) blur(12px) saturate(1.6) brightness(1.06) contrast(1.03)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .lg{background:rgba(5,32,90,.94)}
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:46px;padding:.7em 1.35em;border-radius:999px;border:0;
  font-family:var(--text);font-weight:600;font-size:.98rem;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.btn--gold{
  color:var(--navy);
  background:linear-gradient(160deg,#fbe7b5 0%,var(--gold-l) 28%,var(--gold) 70%,#d68f0f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,70,0,.25),0 14px 30px -14px rgba(230,159,23,.7);
  --mag-hover:rgba(255,255,255,.28);
}
.btn--gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(120,70,0,.25),0 18px 36px -14px rgba(230,159,23,.85)}
.btn--lg{min-height:58px;padding:.85em 1.8em;font-size:1.05rem}
.btn--navy{color:var(--gold-pale);background:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -16px rgba(3,31,92,.7)}
.btn--navy:hover{background:var(--royal)}
.btn .i{transition:transform .35s var(--ease)}
.btn:hover .i{transform:translateX(3px)}

/* ==========================================================================
   HEADER. A floating gold-glass pill, fixed, compacting once the page moves.
   ========================================================================== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px var(--gutter) 0;pointer-events:none}
.hdr__bar{
  pointer-events:auto;
  --lg-r:999px;--lg-blur:14px;--lg-tint:.08;--lg-spec:.12;
  width:min(var(--wrap),100%);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  padding:8px 10px 8px 14px;
  background-color:rgba(3,25,80,.42);
  transition:padding .4s var(--ease),background-color .4s var(--ease);
}
.hdr.stuck .hdr__bar{padding:5px 8px 5px 12px;background-color:rgba(3,25,80,.6)}
.brand{display:flex;align-items:center;gap:12px;color:var(--gold-l);text-decoration:none;min-width:0}
.brand__mark{width:46px;height:46px;flex:0 0 auto;transition:width .4s var(--ease),height .4s var(--ease)}
.hdr.stuck .brand__mark{width:38px;height:38px}
.brand__spark{transform-origin:104px 20px;animation:spark 4s ease-in-out infinite}
@keyframes spark{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:1}}
.brand__text{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand__name{font-family:var(--display);font-weight:600;font-size:1.28rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap}
/* the tagline sits in the hero while the hero is on screen, and moves up
   into the header once it has scrolled away */
.brand__tag{font-family:var(--display);font-style:italic;font-size:.98rem;color:var(--gold-l);white-space:nowrap;transition:opacity .3s,max-height .4s var(--ease);max-height:0;opacity:0;overflow:hidden}
.hdr.stuck .brand__tag{opacity:1;max-height:1.3em}
.nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto}
.nav a{
  font-weight:500;font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  color:var(--on-navy);padding:8px 2px;position:relative;
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hdr__cta{min-height:42px;font-size:.9rem;padding:.55em 1.15em}
.menu{display:none;position:relative;width:46px;height:46px;border:0;background:transparent;color:var(--gold-l);cursor:pointer;border-radius:999px;margin-left:auto}
.menu span:not(.menu__label){position:absolute;left:13px;right:13px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),top .35s var(--ease)}
.menu span:nth-child(1){top:18px}.menu span:nth-child(2){top:26px}
.menu[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){top:22px;transform:rotate(-45deg)}
.menu__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   HERO. The light draws itself once, then breathes.
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;   /* the screen-blended light layers blend with the hero only */
  background:
    radial-gradient(90% 60% at 80% 20%,rgba(6,53,139,.9),transparent 60%),
    radial-gradient(70% 40% at 10% 58%,rgba(6,53,139,.55),transparent 60%),
    linear-gradient(180deg,#041a4f,var(--navy) 60%,var(--navy));
  color:var(--on-navy);
  display:flex;align-items:center;
  padding:calc(96px + 6vh) 0 12vh;
}
/* both light layers fade to nothing over the last fifth of the hero, so the
   band below meets plain navy and there is no line */
.hero__water{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.7;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
.hero__light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.beam__body{opacity:0}
.js .beam__body{animation:fadein 1.6s var(--ease) 2.8s forwards}
html:not(.js) .beam__body{opacity:1}
/* god rays: long thin wedges from the star, each breathing on its own clock,
   the whole fan swinging a degree or two */
.rays{transform-origin:1720px -300px;animation:swing 30s ease-in-out infinite alternate}
.rays polygon{fill:url(#ray);animation:ray var(--rt,9s) ease-in-out var(--rd,0s) infinite alternate;opacity:0}
.js .rays{opacity:0;animation:swing 26s ease-in-out infinite alternate,fadein 2.4s var(--ease) 2.2s forwards}
@keyframes fadein{to{opacity:1}}
@keyframes swing{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
@keyframes ray{from{opacity:var(--ro,.35)}to{opacity:.85}}
html:not(.js) .rays{opacity:1}
.beam{position:absolute;right:0;bottom:0;height:100%;width:100%;overflow:visible;opacity:.95}
/* the star is the payoff, so on a wide screen the drawing fits (meet) and on a
   phone it fills (slice); site.js flips the attribute */
.band.curve-top::before{z-index:1;top:-2px}   /* a 2px overlap: at fractional offsets the 1px kit value leaves a lighter antialiased row */
.beam__halo,.beam__core{stroke-dasharray:1;stroke-dashoffset:1}
.js .beam__core{animation:draw 3s var(--ease) .4s forwards}
.js .beam__halo{animation:draw 3s var(--ease) .6s forwards}
html:not(.js) .beam__halo,html:not(.js) .beam__core{stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
.beam__star{transform-origin:1150px 250px;opacity:0}
.js .beam__star{animation:starin 1.6s var(--ease) 2.6s forwards,breathe 6s ease-in-out 4.2s infinite}
html:not(.js) .beam__star{opacity:1}
@keyframes starin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.beam__dust circle{fill:var(--gold-pale);opacity:0;animation:dust var(--t,5s) ease-in-out var(--dd,0s) infinite}
.beam__dust .bk{fill:url(#bokeh)}
.beam__dust use{opacity:0;transform-box:fill-box;transform-origin:center;animation:twinkle var(--t,3s) ease-in-out var(--dd,0s) infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5) rotate(0deg)}50%{opacity:var(--o,.9);transform:scale(1) rotate(20deg)}}
@keyframes dust{0%{opacity:0;transform:translate(0,0)}30%{opacity:var(--o,.7)}70%{opacity:var(--o,.7)}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-40px))}}
.hero__in{position:relative;z-index:2;max-width:760px;margin-inline:0;margin-left:max(var(--gutter),calc((100% - var(--wrap))/2))}
.hero__tag{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--gold-l);margin:0 0 18px}
.hero__h{font-size:clamp(3rem,8.2vw,6.3rem);font-weight:500;line-height:.96;color:#fff;letter-spacing:-.02em}
.hero__h .gold{color:var(--gold-l)}
.hero__body{margin-top:clamp(26px,4vw,44px);max-width:34rem}
.hero__lead{font-family:var(--display);font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.15;color:#fff;margin:0 0 .6em;padding-top:26px;position:relative}
.hero__lead::before{content:"";position:absolute;left:0;top:0;width:64px;height:1px;background:var(--gold)}
.hero__p{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--on-navy);max-width:30rem}
.hero__p em{font-family:var(--display);font-style:italic;font-size:1.25em;color:var(--gold-l)}
.hero__cta{margin-top:clamp(24px,3vw,36px)}

/* ==========================================================================
   BANDS
   ========================================================================== */
.band{position:relative;padding:var(--sec) 0}
.band.curve-top{padding-top:calc(var(--sec) + clamp(30px,5vw,80px))}
.band--paper{background:linear-gradient(180deg,var(--paper),var(--paper-2) 60%,var(--paper));color:var(--ink);overflow:hidden;isolation:isolate}
/* the blobs animate on the compositor; the copy has to be its own layer above
   them or Chrome paints the moving discs over the text */
.band--paper>.wrap{position:relative;z-index:1}
.lb{position:absolute;inset:-10% 0;pointer-events:none;z-index:0}
/* Each orb rises on its own clock and fades in and out over the cycle. The
   scroll parallax is a separate `translate`, written by site.js as --py, so
   it composes with the keyframe transform instead of fighting it.
   Translate and opacity only: animating scale on discs this large made Chrome
   drop the section's own copy from the paint. */
.lb i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,180,.85) 0,rgba(240,200,110,.45) 35%,rgba(230,159,23,.14) 62%,rgba(230,159,23,0) 72%);
  translate:0 calc(var(--py,0px) * var(--pf,1));
  animation:rise var(--lt,50s) linear var(--ld,0s) infinite;opacity:0}
.lb i:nth-child(1){width:min(620px,70vw);aspect-ratio:1;left:-12%;top:14%;--lt:58s;--ld:-20s;--lo:.5;--pf:1.4}
.lb i:nth-child(2){width:min(420px,55vw);aspect-ratio:1;right:-8%;top:34%;--lt:44s;--ld:-9s;--lo:.46;--pf:.8}
.lb i:nth-child(3){width:min(760px,90vw);aspect-ratio:1;left:30%;bottom:-14%;--lt:72s;--ld:-40s;--lo:.36;--pf:.5}
.lb i:nth-child(4){width:min(260px,40vw);aspect-ratio:1;right:22%;top:10%;--lt:36s;--ld:-30s;--lo:.55;--pf:2}
@keyframes rise{0%{transform:translate3d(0,9vh,0);opacity:0}22%{opacity:var(--lo,.5)}78%{opacity:var(--lo,.5)}100%{transform:translate3d(2.5vw,-16vh,0);opacity:0}}
.hope .lb i:nth-child(3){left:auto;right:-20%;bottom:16%}
.band--navy{background:var(--navy);color:var(--on-navy)}
.band--deep{background:var(--deep);color:var(--on-navy)}
.band--navy h2,.band--deep h2{color:#fff}
.band--paper h2{color:var(--navy)}

/* prose: her paragraphs, at a reading measure */
.prose{max-width:60ch}
.prose p{margin-bottom:1.15em}
.prose .pull{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.2;
  color:var(--royal);margin:1.2em 0 1.15em;text-wrap:balance;
}
.prose--dark .pull{color:var(--gold-l)}
.prose .sign{
  font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.2rem);
  line-height:1.15;color:var(--navy);margin-top:1.3em;
}
.prose--dark .sign{color:#fff}
.prose--long .first{font-size:1.2em;color:var(--navy)}
.prose--long .first::first-letter{font-family:var(--display);font-size:3.4em;line-height:.8;float:left;padding:.08em .12em 0 0;color:var(--gold-deep);font-weight:500}
.prose__cta{margin-top:2.2em}

/* ---------------------------------------------------------- 2. story */
.story__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:center}
.story__rings{color:var(--navy);position:relative}
.rings{width:100%;height:auto;opacity:.85}
.rings path{stroke-dasharray:1;stroke-dashoffset:0}
.js .story__rings .rings path{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) calc(var(--i) * 85ms)}
.js .story__rings.in .rings path{stroke-dashoffset:0}
.story__rings::after{
  content:"";position:absolute;inset:-8%;border-radius:50%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,240,205,.55),transparent 70%);
}

/* ------------------------------------------------------------ 3. why */
.glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(#000 62%,transparent 96%);mask-image:linear-gradient(#000 62%,transparent 96%)}
.why .glow{background:
  radial-gradient(26% 34% at 22% 52%,rgba(230,159,23,.42),transparent 70%),
  radial-gradient(20% 28% at 78% 66%,rgba(240,210,154,.3),transparent 70%),
  radial-gradient(40% 40% at 60% 30%,rgba(6,53,139,.9),transparent 70%)}
.why .wrap{position:relative;z-index:1}
.why__in{max-width:820px;margin-inline:auto;text-align:center}
.why__panel{padding:clamp(28px,4vw,52px) clamp(24px,4.5vw,60px);margin:0 auto clamp(36px,5vw,56px);text-align:left}
.why__p{font-family:var(--display);font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.35;color:#fff}
.why__p:last-child{margin-bottom:0}
.why__q{font-family:var(--display);font-style:italic;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.15;color:var(--gold-l);margin:0 0 .8em}
.why__cta{margin:0}

/* ------------------------------------------------------- 4. approach */
.approach{overflow:hidden;padding-bottom:calc(var(--sec) + 40px);background:var(--navy)}
.approach__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bokeh{
  position:absolute;inset:-10% 0;will-change:transform;
  background:
    radial-gradient(16% 22% at 18% 18%,rgba(230,159,23,.34),transparent 70%),
    radial-gradient(10% 14% at 78% 12%,rgba(240,210,154,.28),transparent 70%),
    radial-gradient(22% 26% at 84% 48%,rgba(6,53,139,.9),transparent 70%),
    radial-gradient(12% 16% at 8% 62%,rgba(230,159,23,.24),transparent 70%),
    radial-gradient(18% 22% at 60% 80%,rgba(240,210,154,.2),transparent 70%),
    radial-gradient(9% 12% at 40% 40%,rgba(255,241,204,.22),transparent 70%),
    radial-gradient(26% 30% at 30% 95%,rgba(6,53,139,.8),transparent 70%),
    linear-gradient(180deg,var(--deep),#031b52 50%,var(--deep));
}
/* navy caps over the top and bottom of the field. The layer is scaled and
   moved by the parallax, so a mask on it lands in a different place at every
   scroll position; a cap on the frame does not. */
.approach__bg::before,.approach__bg::after{
  content:"";position:absolute;left:0;right:0;height:clamp(180px,26vh,300px);pointer-events:none;z-index:1;
}
.approach__bg::before{top:0;background:linear-gradient(var(--navy),rgba(3,31,92,0))}
.approach__bg::after{bottom:0;background:linear-gradient(rgba(3,31,92,0),var(--navy))}
.approach__in{position:relative;z-index:1}
.approach__h{text-align:center;margin-bottom:clamp(40px,6vw,80px)}
.path{position:absolute;left:50%;top:clamp(150px,18vw,240px);bottom:120px;width:2px;transform:translateX(-50%);opacity:.6}
.path svg{width:100%;height:100%}
.step{
  width:min(100%,600px);padding:clamp(28px,4vw,48px) clamp(24px,4vw,46px);
  margin-bottom:clamp(28px,4vw,56px);--lg-tint:.1;
}
.step--l{margin-right:auto}
.step--r{margin-left:auto}
.step .bigicon{--icon:clamp(48px,5vw,60px);color:var(--gold-l)}
.step .bigicon svg{stroke-width:1.7}
.step h3{color:#fff;margin-bottom:.55em}
.step p:not([class]){color:var(--on-navy);font-size:1rem}
.step__lead{font-family:var(--display);font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.3;color:var(--gold-l)}
.step__pull{font-family:var(--display);font-style:italic;font-size:clamp(1.45rem,2vw,1.8rem);line-height:1.2;color:#fff;margin:1.1em 0}
.step__end{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.25;color:#fff;margin-bottom:0}
.approach__cta{text-align:center;margin:clamp(16px,3vw,32px) 0 0}

/* ------------------------------------------------------------- 5. hope */
.hope__in{max-width:720px;margin-inline:auto}
.hope h2{max-width:14ch}

/* ------------------------------------------------------------- 6. book */
.book .glow{background:
  radial-gradient(22% 30% at 68% 78%,rgba(230,159,23,.34),transparent 70%),
  radial-gradient(28% 34% at 22% 40%,rgba(6,53,139,.95),transparent 70%),
  radial-gradient(14% 20% at 88% 30%,rgba(240,210,154,.22),transparent 70%)}
.book .wrap{position:relative;z-index:1}
.book__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,100px);align-items:center}
.book__vis{display:flex;justify-content:center;perspective:1600px}
.book3d{
  position:relative;width:min(340px,62vw);aspect-ratio:680/1021;
  transform-style:preserve-3d;
  transform:rotateY(-28deg) rotateX(3deg);
  transition:transform 1.1s var(--ease);
  border-radius:4px 12px 12px 4px;
}
.book__vis:hover .book3d{transform:rotateY(-14deg) rotateX(2deg)}
.book3d__cover{position:absolute;inset:0;border-radius:inherit;overflow:hidden;transform:translateZ(38px);
  box-shadow:inset 0 0 0 1px rgba(255,241,204,.18),inset 6px 0 14px -8px rgba(0,0,0,.6),-30px 50px 60px -20px rgba(0,5,30,.75)}
.book3d__cover img{width:100%;height:100%;object-fit:cover}
.book3d__pages{position:absolute;inset:2px 0;background:linear-gradient(90deg,#efe7d6,#d9cfb6 50%,#efe7d6);border-radius:inherit;transform:translateZ(1px)}
.book3d__spine{position:absolute;left:0;top:0;bottom:0;width:38px;transform-origin:0 50%;transform:rotateY(-90deg);
  background:linear-gradient(90deg,#02143f,#06358b 50%,#02143f);border-radius:4px 0 0 4px;
  box-shadow:inset 0 0 0 1px rgba(255,241,204,.12)}
.book3d.sheen::after{transform:translateX(-140%) skewX(-12deg);z-index:5}
.book__vis:hover .book3d.sheen::after{transform:translateX(140%) skewX(-12deg)}
.book__sub{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.25;color:var(--gold-l);margin:-8px 0 26px;max-width:26ch}
.book__keys{display:flex;align-items:center;gap:18px;margin:8px 0 18px;max-width:34rem}
.book__keys b{font-family:var(--display);font-weight:600;font-size:clamp(4rem,7vw,6rem);line-height:.85;color:var(--gold-l)}
.book__keys span{font-family:var(--display);font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.2;color:#fff;letter-spacing:.06em;text-transform:uppercase}
.book__three{list-style:none;padding:0;margin:0 0 34px;display:flex;flex-wrap:wrap;gap:10px 0}
.book__three li{font-family:var(--display);font-size:1.25rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);padding-right:18px;margin-right:18px;border-right:1px solid rgba(230,159,23,.5)}
.book__three li:last-child{border:0;margin:0;padding:0}

/* ------------------------------------------------------------ 7. linda */
.linda__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.portrait{margin:0;position:sticky;top:110px}
.portrait__frame{
  aspect-ratio:3/4;border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 110px;
  background:linear-gradient(160deg,#0a2b78,#031f5c 55%,#02153f);
  position:relative;overflow:hidden;
  box-shadow:0 40px 70px -40px rgba(3,31,92,.55);
}
.portrait__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.portrait__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -80px 90px -60px rgba(3,31,92,.35);pointer-events:none}
.portrait figcaption{margin-top:20px;display:flex;flex-direction:column;gap:3px;color:var(--ink-2);font-size:1rem}
.portrait figcaption strong{font-family:var(--display);font-weight:600;font-size:1.55rem;color:var(--navy);line-height:1.1;margin-bottom:6px}

/* ------------------------------------------------------------ 8. begin */
.begin{overflow:hidden}
.begin__light{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);
  background:
    radial-gradient(40% 50% at 78% 60%,rgba(230,159,23,.18),transparent 70%),
    radial-gradient(30% 30% at 10% 20%,rgba(6,53,139,.9),transparent 70%);
}
.begin__grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,100px);align-items:center}

/* forms */
.contact{padding:clamp(26px,3.5vw,44px);--lg-tint:.1}
.contact__h{color:#fff;margin-bottom:22px}
.field{margin-bottom:16px}
.field label,.signup__label{display:block;font-size:.86rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-2);margin-bottom:7px}
.field input,.field textarea,.signup input{
  width:100%;min-height:50px;padding:12px 16px;border-radius:16px;
  color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(240,210,154,.28);
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{resize:vertical;min-height:150px;line-height:1.55}
.field input::placeholder,.signup input::placeholder{color:rgba(216,199,156,.7)}
.field input:focus,.field textarea:focus,.signup input:focus{outline:0;border-color:var(--gold);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(230,159,23,.2)}
.contact__send{width:100%;margin-top:6px}
.contact__note,.signup__note{font-size:.92rem;color:var(--on-navy-2);margin:14px 0 0;text-align:center}
.form__msg{margin:12px 0 0;font-size:.95rem;color:var(--gold-l);text-align:center}
.form__msg:empty{display:none}
.signup{padding:22px 24px 20px;max-width:34rem}
.signup__label{margin-bottom:12px;font-family:var(--display);font-size:1.4rem;text-transform:none;letter-spacing:0;color:#fff;font-weight:500}
.signup__row{position:relative;display:flex;gap:10px;align-items:center}
.signup__i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--gold-l);pointer-events:none}
.signup input{padding-left:46px;border-radius:999px}
.signup .btn{min-height:50px}
.signup__note{text-align:left;margin-top:10px}

/* ------------------------------------------------------------ footer */
.foot{background:var(--deep);color:var(--on-navy);padding:clamp(56px,7vw,96px) 0 40px;border-top:1px solid rgba(230,159,23,.18)}
.foot__in{display:grid;grid-template-columns:1fr auto;gap:36px 60px;align-items:start}
.foot__brand{color:var(--gold-l)}
.foot__brand .brand__mark{width:64px;height:64px;margin-bottom:16px}
.foot__name{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 4px}
.foot__tag{font-family:var(--display);font-style:italic;font-size:1.2rem;margin:0 0 14px}
.foot__line{font-family:var(--display);font-size:1.15rem;color:var(--on-navy);margin:0}
.foot__nav{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px}
.foot__nav a{text-decoration:none;font-weight:500;font-size:.92rem;letter-spacing:.04em;color:var(--on-navy)}
.foot__nav a:hover{color:var(--gold-l)}
.foot__base{grid-column:1/-1;margin-top:26px;padding-top:26px;border-top:1px solid rgba(230,159,23,.16);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline}
.foot__small{font-size:.9rem;color:var(--on-navy-2);max-width:60ch;margin:0}
.foot__copy{font-size:.88rem;color:var(--on-navy-2);margin:0;white-space:nowrap}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .brand__tag{display:none}
  .nav{gap:16px}
}
@media (max-width:860px){
  .nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;gap:4px;padding:14px;
    background:rgba(3,22,70,.97);border:1px solid rgba(240,210,154,.25);border-radius:26px;
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .nav.open{display:flex}
  .nav a{padding:12px 14px;font-size:1rem}
  .hdr__cta{display:none}
  .menu{display:block}
  .hdr__bar{position:relative}
  .hero{padding-top:calc(90px + 4vh)}
  .beam{width:100%;right:0;opacity:.45;transform:translate(28%,-10%)}
  .story__grid,.book__grid,.linda__grid,.begin__grid{grid-template-columns:1fr}
  .story__rings{max-width:420px;margin:0 auto}
  .portrait{position:static;max-width:400px;order:2;margin-top:24px}
  .book__vis{margin-bottom:10px}
  .book3d{transform:rotateY(-18deg) rotateX(2deg)}
  .path{display:none}
  .step{width:100%}
  .foot__in{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:1rem}
  .hero__h{font-size:clamp(2.7rem,14vw,3.6rem)}
  .hero__lead{font-size:1.5rem}
  .btn--lg{width:100%}
  .hero__cta .mag{width:100%}
  .signup__row{flex-direction:column;align-items:stretch}
  .signup .btn{width:100%}
  .book__keys b{font-size:3.6rem}
  .brand__name{font-size:1.05rem}
  .brand__mark{width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  .beam__halo,.beam__core{animation:none!important;stroke-dashoffset:0}
  .beam__star{animation:none!important;opacity:1}
  .beam__dust{display:none}
  .brand__spark{animation:none}
  .rays,.rays polygon{animation:none!important;opacity:.6}
  .lb i{animation:none;opacity:var(--lo,.5)}
  .beam__body{animation:none;opacity:1}
  .hero__water,.trail{display:none}
  .book3d{transition:none}
  .js .story__rings .rings path{transition:none;stroke-dashoffset:0}
}