/* ==========================================================================
   Jonny's Angels — design system
   Palette: Navy #1d3a5f · Sky #2f6da8 (Ocean #235684 where it carries text)
            Heaven Gold #ffd98f · White #ffffff
   Blue carries the sky, gold carries the light through it.
   Built to a grief-sensitive brief: calm motion, large type, high contrast,
   one primary action per screen, nothing that ambushes the reader.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --navy:#1d3a5f;
  --navy-deep:#142b47;
  --navy-night:#102138;
  --navy-line:#2f5480;
  --sky:#2f6da8;
  --ocean:#235684;      /* solid fill: white text sits on this */
  --accent:#235684;         /* foreground accent: links, labels, icons */
  --accent-line:#2f6da8;    /* accent used as a rule, border or dot */
  --sky-tint:#eaf2fa;
  --gold:#ffd98f;
  --gold-deep:#f2c268;
  --gold-tint:#fff6e8;
  --white:#ffffff;
  --mist:#f2f7fc;
  --line-soft:#dbe4ec;

  --ink:#22364f;
  --ink-muted:#455465;
  --on-dark:#ffffff;
  --on-dark-muted:#c9dcef;

  --surface:var(--white);
  --surface-2:var(--mist);
  --card:#ffffff;
  --card-line:#dbe4ec;

  --f-display:"Bitter",Georgia,"Times New Roman",serif;
  --f-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --step--1:clamp(.94rem,.91rem + .14vw,1.02rem);
  --step-0:clamp(1.125rem,1.08rem + .2vw,1.2rem);
  --step-1:clamp(1.22rem,1.15rem + .32vw,1.4rem);
  --step-2:clamp(1.35rem,1.2rem + .6vw,1.7rem);
  --step-3:clamp(1.6rem,1.35rem + 1.05vw,2.25rem);
  --step-4:clamp(1.95rem,1.5rem + 1.9vw,3rem);
  --step-5:clamp(2.35rem,1.6rem + 3.2vw,4.1rem);

  --wrap:1180px;
  --wrap-mid:960px;
  --wrap-narrow:700px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --sec:clamp(4rem,8vw,7rem);

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:36px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(16,33,56,.05),0 4px 14px rgba(16,33,56,.05);
  --sh-2:0 2px 6px rgba(16,33,56,.06),0 14px 34px rgba(16,33,56,.08);
  --sh-3:0 4px 12px rgba(16,33,56,.08),0 26px 60px rgba(16,33,56,.13);
  --sh-gold:0 18px 60px rgba(47,109,168,.30),0 4px 18px rgba(16,33,56,.22);

  --e:cubic-bezier(.22,.61,.36,1);
  --t-fast:170ms;
  --t:260ms;
  --t-slow:620ms;

  --hdr-h:76px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#eaf3fb;
    --ink-muted:#b3cbe2;
    --surface:#0f2136;
    --surface-2:#0a1826;
    --card:#16304c;
    --card-line:#2c4a6d;
    --accent:#8fc2ea;
    --accent-line:#6ba6d8;
    --sky-tint:#20405f;
    --gold-tint:#1c3450;
    --mist:#0a1826;
    --line-soft:#2c4a6d;
    --sh-1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --sh-2:0 2px 6px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.3);
    --sh-3:0 4px 12px rgba(0,0,0,.4),0 26px 60px rgba(0,0,0,.45);
  }
}
[data-theme="dark"]{
  --ink:#eaf3fb; --ink-muted:#b3cbe2;
  --surface:#0f2136; --surface-2:#0a1826;
  --card:#16304c; --card-line:#2c4a6d;
  --accent:#8fc2ea; --accent-line:#6ba6d8;
  --sky-tint:#20405f; --gold-tint:#1c3450;
  --mist:#0a1826; --line-soft:#2c4a6d;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.14;margin:0 0 .5em;font-weight:600;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:var(--step-5);letter-spacing:-.022em}
h2{font-size:var(--step-4);letter-spacing:-.018em}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{margin:0 0 1.1em;text-wrap:pretty}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--accent-line)}
strong,b{font-weight:600}
ul,ol{padding-left:1.15em;margin:0 0 1.1em}
li{margin:0 0 .45em}
hr{border:0;height:1px;background:var(--card-line);margin:2.5rem 0}
::selection{background:var(--gold);color:var(--navy)}

:focus-visible{
  outline:3px solid var(--sky);
  outline-offset:3px;
  border-radius:4px;
}
.on-navy :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.crisis :focus-visible{
  outline-color:var(--gold);
}

.skip{
  position:absolute;left:.5rem;top:.5rem;z-index:2000;
  background:var(--gold);color:var(--navy);font-weight:700;
  padding:.75rem 1.25rem;border-radius:var(--r-sm);
  transform:translateY(-160%);transition:transform var(--t) var(--e);
}
.skip:focus{transform:translateY(0)}

/* ---------- 3. Layout ---------- */
.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.container.mid{max-width:var(--wrap-mid)}
.container.narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sec)}
.section.tight{padding-block:clamp(2.6rem,5vw,4rem)}
.section.alt{background:var(--surface-2)}
.section.navy{background:var(--navy);color:var(--on-dark)}
.section.navy h1,.section.navy h2,.section.navy h3{color:var(--gold)}
.section.navy p{color:var(--on-dark-muted)}
.measure{max-width:62ch}
.measure-wide{max-width:70ch}
.center{text-align:center}
.center .measure,.center .measure-wide{margin-inline:auto}

.eyebrow{
  font-family:var(--f-body);font-size:.8rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent-line);border-radius:2px;flex:none}
.center .eyebrow{justify-content:center}
.on-navy .eyebrow,.section.navy .eyebrow{color:var(--gold)}
.on-navy .eyebrow::before,.section.navy .eyebrow::before{background:var(--gold)}
.lede{font-size:var(--step-1);line-height:1.6;color:var(--ink-muted)}
.section.navy .lede{color:var(--on-dark-muted)}
.muted{color:var(--ink-muted)}
.fine{font-size:var(--step--1);color:var(--ink-muted);line-height:1.55}

.grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split.rev>*:first-child{order:2}}
@media (max-width:820px){.g-3{grid-template-columns:1fr}.g-2{grid-template-columns:1fr}}
@media (min-width:560px) and (max-width:819px){.g-3.keep2,.g-2{grid-template-columns:1fr 1fr}}

/* ---------- 4. Buttons ---------- */
.btn{
  --btn-bg:var(--gold);--btn-fg:var(--navy);--btn-line:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:.85rem 1.6rem;
  background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-line);
  font-family:var(--f-body);font-size:1.02rem;font-weight:700;letter-spacing:.005em;
  border-radius:var(--r-pill);text-decoration:none;cursor:pointer;
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e),background var(--t) var(--e),color var(--t) var(--e),border-color var(--t) var(--e);
  box-shadow:var(--sh-1);
}
.btn:hover{background:var(--gold-deep);color:var(--navy);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.ico{width:1.05em;height:1.05em;flex:none}
.btn .ico{width:18px;height:18px;flex:none;transition:transform var(--t) var(--e)}
.btn:hover .ico{transform:translateX(3px)}

.btn.sky{--btn-bg:var(--ocean);--btn-fg:var(--white)}
.btn.sky:hover{background:var(--sky);color:var(--white)}
.btn.ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-line:var(--navy);box-shadow:none}
.btn.ghost:hover{background:var(--navy);color:var(--white)}
.btn.ghost-light{--btn-bg:transparent;--btn-fg:var(--white);--btn-line:rgba(255,255,255,.42);box-shadow:none}
.btn.ghost-light:hover{background:rgba(255,255,255,.1);color:var(--white);border-color:var(--white)}
[data-theme="dark"] .btn.ghost{--btn-fg:var(--ink);--btn-line:var(--ink-muted)}
[data-theme="dark"] .btn.ghost:hover{background:var(--ink);color:var(--navy)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.ghost{--btn-fg:var(--ink);--btn-line:var(--ink-muted)}
  :root:not([data-theme="light"]) .btn.ghost:hover{background:var(--ink);color:var(--navy)}
}
.btn.sm{min-height:44px;padding:.55rem 1.15rem;font-size:.95rem}
.btn.block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.center .btn-row{justify-content:center}

.textlink{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:600;
  color:var(--accent);text-decoration:none;border-bottom:2px solid rgba(47,109,168,.42);
  padding-bottom:2px;transition:border-color var(--t) var(--e),gap var(--t) var(--e),color var(--t) var(--e);
}
.textlink:hover{border-color:var(--sky);gap:.7rem}
.textlink .ico{width:17px;height:17px;transition:transform var(--t) var(--e)}
.textlink:hover .ico{transform:translateX(2px)}
.on-navy .textlink,.section.navy .textlink{color:var(--gold);border-color:rgba(255,217,143,.4)}
.on-navy .textlink:hover,.section.navy .textlink:hover{border-color:var(--gold)}

/* ---------- 5. Crisis strip ---------- */
.crisis{
  background:var(--navy-night);color:#d3e3f2;
  font-size:.86rem;line-height:1.45;
  padding:.55rem var(--gut);
  display:flex;gap:.35rem .9rem;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center;
  border-bottom:1px solid rgba(255,217,143,.16);
}
.crisis b{color:var(--gold);font-weight:700}
.crisis a{color:var(--gold);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,217,143,.5)}
.crisis a:hover{color:#fff;border-color:#fff}
.crisis .dot{opacity:.45}
@media (max-width:700px){.crisis{font-size:.8rem;padding:.5rem 1rem;gap:.25rem}.crisis .hide-sm,.crisis .dot{display:none}}

/* ---------- 6. Header & navigation ---------- */
.site-header{
  position:sticky;top:0;z-index:900;
  background:var(--navy);color:var(--on-dark);
  border-bottom:1px solid rgba(255,217,143,.14);
  transition:box-shadow var(--t) var(--e),background var(--t) var(--e);
}
.site-header.stuck{box-shadow:0 10px 34px rgba(10,24,40,.28)}
.nav{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  min-height:var(--hdr-h);
  display:flex;align-items:center;gap:1rem;
}
.brand{
  display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--white);
  margin-right:auto;padding:.4rem 0;flex:none;
}
.brand img{width:38px;height:38px;transition:transform var(--t-slow) var(--e)}
.brand:hover img{transform:scale(1.07) rotate(-3deg)}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--f-display);font-weight:700;font-size:1.16rem;color:var(--white);letter-spacing:-.01em}
.brand-sub{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600;margin-top:2px}

.nav-list{display:none;list-style:none;margin:0;padding:0;align-items:center;gap:.15rem}
.nav-list>li{position:relative;margin:0}
.nav-link,.nav-drop{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--f-body);font-size:.99rem;font-weight:600;
  color:rgba(255,255,255,.9);background:none;border:0;cursor:pointer;
  padding:.6rem .78rem;border-radius:var(--r-sm);text-decoration:none;
  transition:color var(--t) var(--e),background var(--t) var(--e);
  position:relative;
}
.nav-link:hover,.nav-drop:hover,.nav-link:focus-visible,.nav-drop:focus-visible{color:var(--gold);background:rgba(255,217,143,.09)}
.nav-link::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.34rem;height:2px;
  background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:center;
  transition:transform var(--t) var(--e);
}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{color:var(--gold)}
.nav-item.open>.nav-drop{color:var(--gold);background:rgba(255,217,143,.09)}
.caret{width:11px;height:11px;transition:transform var(--t) var(--e);opacity:.75}
.nav-item.open .caret{transform:rotate(180deg)}
.nav-item.here>.nav-drop{color:var(--gold)}

.panel{
  position:absolute;top:calc(100% + 10px);left:50%;
  width:min(560px,86vw);
  background:var(--white);color:var(--navy);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:.85rem;
  opacity:0;visibility:hidden;
  transform:translate(-50%,-8px);
  transition:opacity var(--t) var(--e),transform var(--t) var(--e),visibility var(--t);
}
.panel.right{left:auto;right:0;transform:translate(0,-8px)}
.nav-item.open .panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-item.open .panel.right{transform:translate(0,0)}
.panel::before{
  content:"";position:absolute;top:-7px;left:50%;margin-left:-7px;
  width:13px;height:13px;background:var(--white);
  border-left:1px solid var(--line-soft);border-top:1px solid var(--line-soft);
  transform:rotate(45deg);border-radius:2px;
}
.panel.right::before{left:auto;right:34px;margin-left:0}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem}
.panel.one .panel-grid{grid-template-columns:1fr}
.panel-head{
  grid-column:1/-1;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);padding:.5rem .7rem .35rem;margin:0;
}
.p-item{
  display:block;padding:.62rem .7rem;border-radius:var(--r-sm);text-decoration:none;color:var(--navy);
  transition:background var(--t) var(--e),transform var(--t) var(--e);
}
.p-item:hover{background:var(--sky-tint);color:var(--navy);transform:translateX(3px)}
.p-item .t{display:block;font-weight:700;font-size:.98rem;line-height:1.3}
.p-item .d{display:block;font-size:.83rem;color:var(--ink-muted);line-height:1.4;margin-top:2px}
.panel-foot{
  grid-column:1/-1;margin-top:.4rem;padding:.7rem;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
}
[data-theme="dark"] .panel,[data-theme="dark"] .panel::before{background:var(--card);border-color:var(--card-line)}
[data-theme="dark"] .p-item,[data-theme="dark"] .panel .t{color:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .panel::before{background:#16304c;border-color:#2c4a6d}
  :root:not([data-theme="light"]) .p-item,
  :root:not([data-theme="light"]) .panel .t{color:var(--ink)}
}

.nav-cta{margin-left:.5rem;flex:none}
.nav-toggle{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  min-height:46px;padding:.5rem .9rem;background:rgba(255,217,143,.1);
  border:1px solid rgba(255,217,143,.28);border-radius:var(--r-pill);
  color:var(--white);font-family:var(--f-body);font-weight:700;font-size:.9rem;cursor:pointer;
  transition:background var(--t) var(--e);
}
.nav-toggle:hover{background:rgba(255,217,143,.2)}
.burger{width:18px;height:12px;position:relative;flex:none}
.burger span{position:absolute;left:0;right:0;height:2px;background:var(--gold);border-radius:2px;transition:transform var(--t) var(--e),opacity var(--t) var(--e)}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:5px}
.burger span:nth-child(3){top:10px}
[aria-expanded="true"] .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
[aria-expanded="true"] .burger span:nth-child(2){opacity:0}
[aria-expanded="true"] .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (min-width:1024px){
  .nav-list{display:flex}
  .nav-toggle{display:none}
}
.cta-short{display:none}
@media (max-width:1023px){
  .brand-sub{display:none}
  .nav-cta .cta-long{display:none}
  .nav-cta .cta-short{display:inline}
  .nav{gap:.6rem}
}
@media (max-width:620px){
  .nav-cta{display:none}
  .brand img{width:34px;height:34px}
  .brand-name{font-size:1.05rem}
  :root{--hdr-h:66px}
}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:1000;
  visibility:hidden;pointer-events:none;
}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer-scrim{
  position:absolute;inset:0;background:rgba(10,24,40,.55);
  opacity:0;transition:opacity var(--t) var(--e);backdrop-filter:blur(2px);
}
.drawer.open .drawer-scrim{opacity:1}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,90vw);
  background:var(--navy);color:var(--white);
  transform:translateX(100%);
  transition:transform 340ms var(--e);
  display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid rgba(255,217,143,.16);
  position:sticky;top:0;background:var(--navy);z-index:2;
}
.drawer-close{
  min-width:46px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,217,143,.1);border:1px solid rgba(255,217,143,.28);
  border-radius:var(--r-pill);color:var(--gold);cursor:pointer;font-size:1.3rem;line-height:1;
  transition:background var(--t) var(--e);
}
.drawer-close:hover{background:rgba(255,217,143,.22)}
.drawer-body{padding:.75rem 1.25rem 2rem}
.d-group{border-bottom:1px solid rgba(255,217,143,.13)}
.d-top{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:none;border:0;color:var(--white);cursor:pointer;
  font-family:var(--f-display);font-size:1.15rem;font-weight:600;
  padding:1.05rem .25rem;text-align:left;text-decoration:none;
  transition:color var(--t) var(--e);
}
.d-top:hover,.d-group.open .d-top{color:var(--gold)}
.d-group.open .caret{transform:rotate(180deg)}
.d-sub{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 320ms var(--e);
}
.d-group.open .d-sub{grid-template-rows:1fr}
.d-sub>div{overflow:hidden}
.d-sub a{
  display:block;padding:.6rem .25rem .6rem 1rem;
  color:rgba(255,255,255,.82);text-decoration:none;font-size:1rem;
  border-left:2px solid rgba(255,217,143,.25);margin-left:.25rem;
  transition:color var(--t) var(--e),border-color var(--t) var(--e),padding-left var(--t) var(--e);
}
.d-sub a:hover{color:var(--gold);border-color:var(--gold);padding-left:1.25rem}
.d-sub>div>*:last-child{margin-bottom:.9rem}
.drawer-cta{margin-top:1.5rem;display:grid;gap:.7rem}
.drawer-meta{margin-top:1.6rem;font-size:.88rem;color:rgba(255,255,255,.66);line-height:1.6}
.drawer-meta a{color:var(--gold)}

body.locked{overflow:hidden}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(107,166,216,.40) 0%,rgba(107,166,216,0) 58%),
    radial-gradient(90% 70% at 12% 88%,rgba(29,58,95,0) 30%,rgba(10,24,40,.55) 100%),
    linear-gradient(168deg,#254a76 0%,var(--navy) 42%,var(--navy-deep) 100%);
  color:var(--on-dark);
  padding-block:clamp(3.2rem,7vw,6rem) clamp(4.5rem,9vw,7.5rem);
}
.hero::before{ /* dawn glow — ambient, opacity only */
  content:"";position:absolute;z-index:-1;
  left:50%;top:-14%;width:min(1100px,120%);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,217,143,.30) 0%,rgba(255,217,143,.10) 34%,rgba(255,217,143,0) 66%);
  opacity:.85;
  animation:dawn 16s var(--e) infinite;
  pointer-events:none;
}
.hero::after{ /* soft horizon of cloud light at the base */
  content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-1px;height:38%;
  background:linear-gradient(to top,rgba(255,217,143,.12),rgba(47,109,168,.08) 45%,transparent);
  pointer-events:none;
}
@keyframes dawn{
  0%,100%{opacity:.72}
  50%{opacity:1}
}
.hero-grid{display:grid;gap:clamp(2.4rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:940px){.hero-grid{grid-template-columns:1.02fr .98fr}}
.hero h1{color:var(--white);margin-bottom:.4em}
.hero h1 .lit{
  color:var(--gold);
  display:inline-block;
}
.hero-lede{font-size:var(--step-1);color:#cfe0f0;max-width:34ch;line-height:1.58}
.hero .eyebrow{color:var(--gold)}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:1.9rem}
.hbadge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.85rem;font-weight:600;color:#d3e3f2;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,217,143,.22);
  padding:.42rem .82rem;border-radius:var(--r-pill);
}
.hbadge .dotg{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

.hero-art{position:relative;justify-self:center;width:100%;max-width:470px}
.hero-art .frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-gold);
  border:1px solid rgba(255,217,143,.3);
  background:var(--navy-deep);
}
.hero-art .frame img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.hero-art .frame::after{ /* one-time light sweep */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 32%,rgba(255,241,214,.30) 47%,transparent 62%);
  transform:translateX(-115%);
  animation:sweep 2.6s var(--e) .55s 1 forwards;
}
@keyframes sweep{to{transform:translateX(115%)}}
.hero-art .halo{
  position:absolute;inset:-11%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,217,143,.30),rgba(47,109,168,.18) 45%,transparent 70%);
  animation:dawn 14s var(--e) infinite reverse;
}
.hero-quote{
  position:absolute;left:-4%;bottom:-26px;
  max-width:250px;
  background:var(--white);color:var(--navy);
  border-radius:var(--r);padding:.85rem 1.05rem;
  box-shadow:var(--sh-3);
  font-family:var(--f-display);font-size:.95rem;font-weight:500;line-height:1.4;
  border-left:4px solid var(--sky);
}
.hero-quote cite{display:block;font-family:var(--f-body);font-style:normal;font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ocean);margin-top:.45rem}
@media (max-width:939px){
  .hero-art{max-width:400px;margin-top:.5rem}
  .hero-quote{position:static;max-width:none;margin-top:1.2rem}
}

/* motes — decorative drifting light, killed with reduced motion */
.motes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mote{position:absolute;border-radius:50%;background:rgba(255,241,214,.5);filter:blur(1px);opacity:0}
.mote.m1{width:6px;height:6px;left:14%;top:72%;animation:drift 26s linear infinite}
.mote.m2{width:4px;height:4px;left:34%;top:84%;animation:drift 34s linear 5s infinite}
.mote.m3{width:8px;height:8px;left:62%;top:78%;animation:drift 30s linear 11s infinite}
.mote.m4{width:5px;height:5px;left:82%;top:88%;animation:drift 38s linear 3s infinite}
.mote.m5{width:3px;height:3px;left:48%;top:66%;animation:drift 29s linear 16s infinite}
@keyframes drift{
  0%{transform:translateY(0);opacity:0}
  14%{opacity:.55}
  80%{opacity:.3}
  100%{transform:translateY(-260px);opacity:0}
}

/* hero entrance stagger */
.rise{opacity:0;transform:translateY(12px)}
.js .rise{animation:rise 720ms var(--e) forwards}
.js .rise.d1{animation-delay:80ms}
.js .rise.d2{animation-delay:170ms}
.js .rise.d3{animation-delay:260ms}
.js .rise.d4{animation-delay:350ms}
.js .rise.d5{animation-delay:440ms}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.js .settle{animation:settle 2.1s var(--e) forwards}
@keyframes settle{from{transform:scale(1.035)}to{transform:scale(1)}}

/* ---------- 8. Doors (identity segmentation) ---------- */
.doors-wrap{margin-top:calc(-1 * clamp(2.6rem,5vw,4.2rem));position:relative;z-index:5}
.doors{display:grid;gap:clamp(.85rem,2vw,1.2rem);grid-template-columns:1fr}
@media (min-width:760px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{
  display:flex;flex-direction:column;gap:.45rem;
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,1.7rem);text-decoration:none;color:var(--ink);
  box-shadow:var(--sh-2);
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e),border-color var(--t) var(--e);
  position:relative;overflow:hidden;
}
.door::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sky);
  transform:scaleY(0);transform-origin:top;transition:transform var(--t-slow) var(--e);
}
.door:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--sky)}
.door:hover::before{transform:scaleY(1)}
.door .ic{width:34px;height:34px;color:var(--accent)}
.door .t{font-family:var(--f-display);font-size:var(--step-1);font-weight:600;line-height:1.25;color:var(--ink)}
.door .d{font-size:.95rem;color:var(--ink-muted);line-height:1.5}
.door .go{margin-top:.35rem;font-size:.88rem;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:.4rem;transition:gap var(--t) var(--e)}
.door:hover .go{gap:.65rem}
.door .go .ico{width:17px;height:17px}

/* ---------- 9. Cards & panels ---------- */
.card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--sh-1);
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e),border-color var(--t) var(--e);
  display:flex;flex-direction:column;
}
.card.hover:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--sky)}
.card h3{margin-bottom:.4em}
.grid.g-2 .card>h3:first-child{font-size:var(--step-1)}
.card p:last-child{margin-bottom:0}
.card .card-ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--sky-tint);color:var(--accent);margin-bottom:1rem;flex:none;
}
.card .card-ic svg{width:24px;height:24px}
.card-num{
  font-family:var(--f-display);font-size:2.1rem;font-weight:700;color:var(--gold-deep);
  line-height:1;margin-bottom:.55rem;
}
.card.navy{background:var(--navy);border-color:var(--navy-line);color:var(--on-dark)}
.card.navy h3,.card.navy h4{color:var(--gold)}
.card.navy p{color:var(--on-dark-muted)}
.card.navy .textlink,.card.navy a:not(.btn){color:var(--gold);border-color:rgba(255,217,143,.4)}
.card.navy .textlink:hover{border-color:var(--gold)}
.card.navy .tick li::before{background:var(--gold);box-shadow:0 0 0 4px rgba(255,217,143,.16)}
.card.gold{background:var(--gold-tint);border-color:#f6dfb4}
[data-theme="dark"] .card.gold{border-color:#2c4a6d}

.panel-soft{
  background:var(--sky-tint);border:1px solid rgba(47,109,168,.18);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3.4vw,2.6rem);
}
.panel-gold{
  background:var(--gold-tint);border:1px solid rgba(242,194,104,.4);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3.4vw,2.6rem);
}

/* checklist / normalising list */
.tick{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.tick li{position:relative;padding-left:1.55rem;margin:0;line-height:1.55}
.tick li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:9px;height:9px;border-radius:50%;
  background:var(--sky);box-shadow:0 0 0 4px var(--sky-tint);
}
.tick.gold li::before{background:var(--gold-deep);box-shadow:0 0 0 4px var(--gold-tint)}
.tick.on-navy li::before{background:var(--gold);box-shadow:0 0 0 4px rgba(255,217,143,.16)}
@media (min-width:700px){.tick.two{grid-template-columns:1fr 1fr;gap:.7rem 2rem}}

/* time badge */
.when{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;max-width:100%;
  font-size:.84rem;font-weight:700;letter-spacing:.03em;
  background:var(--navy);color:var(--gold);
  padding:.45rem .9rem;border-radius:var(--r-pill);margin-bottom:1rem;
  align-self:flex-start;width:max-content;
}
.when svg{width:15px;height:15px;flex:none}
@media (max-width:420px){.when{font-size:.78rem;padding:.4rem .75rem}}
.when.gold{background:var(--gold);color:var(--navy)}
.when.sky{background:var(--ocean);color:var(--white)}

/* price */
.price{display:flex;align-items:baseline;gap:.45rem;margin:.2rem 0 1rem;flex-wrap:wrap}
.price .amt{font-family:var(--f-display);font-size:2.5rem;font-weight:700;line-height:1;color:var(--ink)}
.price .per{font-size:.95rem;color:var(--ink-muted);font-weight:600}
.card.navy .price .amt{color:var(--gold)}
.price .free{color:var(--accent)}

/* quote */
.pullquote{
  font-family:var(--f-display);font-size:var(--step-3);line-height:1.35;font-weight:500;
  color:var(--ink);margin:0;position:relative;padding-left:1.4rem;
  border-left:4px solid var(--sky);
}
.section.navy .pullquote,.on-navy .pullquote{color:var(--gold);border-color:var(--gold)}
.pullquote cite{
  display:block;margin-top:1rem;font-family:var(--f-body);font-style:normal;
  font-size:.85rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
}
.section.navy .pullquote cite,.on-navy .pullquote cite{color:var(--on-dark-muted)}

/* portrait */
.portrait{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);background:var(--navy-deep)}
.portrait img{width:100%;display:block}
.portrait.tall img{aspect-ratio:4/5;object-fit:cover}
.portrait.cert{border-radius:6px;background:#f2f5eb} /* a certificate is a sheet of paper: square corners, no dark bleed */
.portrait-wrap{position:relative}
.portrait-wrap::before{
  content:"";position:absolute;inset:-6%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,217,143,.28),transparent 68%);
}
.stamp,.section.navy p.stamp,.on-navy p.stamp{
  position:absolute;right:0;bottom:-14px;
  background:var(--gold);color:var(--navy);
  border-radius:var(--r);padding:.7rem .95rem;box-shadow:var(--sh-2);
  font-family:var(--f-display);font-weight:700;font-size:.92rem;line-height:1.25;max-width:190px;
}
@media (max-width:560px){.stamp{position:static;margin-top:1rem;max-width:none;display:inline-block}}

/* candle */
.candle{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:1rem}
.flame{
  width:22px;height:32px;border-radius:50% 50% 46% 46%/62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 72%,#fff6e2 0%,var(--gold) 38%,rgba(242,194,104,.55) 68%,rgba(47,109,168,0) 100%);
  filter:blur(.3px);
  animation:flicker 4.2s ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes flicker{
  0%,100%{opacity:.88}
  25%{opacity:1}
  50%{opacity:.82}
  75%{opacity:.97}
}

/* horizon rule */
.horizon{height:1px;background:linear-gradient(to right,transparent,var(--sky),transparent);
  transform:scaleX(.15);opacity:0;transition:transform 1s var(--e),opacity .7s var(--e);margin:0}
.horizon.in{transform:scaleX(1);opacity:.55}
.on-navy .horizon,.section.navy .horizon{background:linear-gradient(to right,transparent,var(--gold),transparent)}

/* ---------- 10. Steps rail ---------- */
.rail{position:relative;display:grid;gap:1.3rem;padding-left:2.4rem}
.rail::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(to bottom,var(--sky),rgba(47,109,168,.18));border-radius:2px;
}
.rail li{position:relative;margin:0;list-style:none}
.rail li::before{
  content:"";position:absolute;left:-2.4rem;top:.45em;width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:2px solid var(--sky);
  transition:background var(--t) var(--e),transform var(--t) var(--e);
}
.rail li::after{
  content:"";position:absolute;left:calc(-2.4rem + 8px);top:calc(.45em + 8px);width:8px;height:8px;border-radius:50%;
  background:var(--sky);transform:scale(0);transition:transform 500ms var(--e);
}
.rail li.in::after{transform:scale(1)}
.rail .st{display:block;font-family:var(--f-display);font-weight:600;font-size:var(--step-1);line-height:1.3;margin-bottom:.15rem}

/* ---------- 11. Accordion / FAQ ---------- */
.faq{display:grid;gap:.7rem}
.faq details{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--t) var(--e),box-shadow var(--t) var(--e);
}
.faq details[open]{border-color:var(--sky);box-shadow:var(--sh-1)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 3.2rem 1.05rem 1.25rem;
  font-family:var(--f-display);font-weight:600;font-size:var(--step-1);line-height:1.35;
  position:relative;min-height:56px;display:flex;align-items:center;
  transition:color var(--t) var(--e);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;width:13px;height:13px;
  border-right:2.5px solid var(--sky);border-bottom:2.5px solid var(--sky);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t) var(--e);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 1.25rem 1.25rem;color:var(--ink-muted)}
.faq .ans>*:last-child{margin-bottom:0}

/* ---------- 12. Forms ---------- */
.field{display:grid;gap:.4rem;margin-bottom:1.1rem;text-align:left}
.field label{font-weight:700;font-size:.95rem;color:var(--ink)}
.field .hint{font-size:.86rem;color:var(--ink-muted)}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%;min-height:54px;padding:.8rem 1rem;
  font-family:var(--f-body);font-size:1.02rem;color:var(--ink);
  background:var(--card);border:2px solid var(--card-line);border-radius:var(--r-sm);
  transition:border-color var(--t) var(--e),box-shadow var(--t) var(--e);
}
textarea{min-height:140px;resize:vertical;line-height:1.6}
input:hover,textarea:hover,select:hover{border-color:rgba(47,109,168,.5)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(47,109,168,.16)}
::placeholder{color:#7b8896;opacity:1}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232f6da8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem}

.signup{display:flex;gap:.7rem;flex-wrap:wrap;align-items:stretch}
.signup input{flex:1 1 260px;min-width:0}
.signup .btn{flex:0 0 auto}
.on-navy input,.section.navy input,.on-navy textarea{
  background:rgba(255,255,255,.96);border-color:rgba(255,217,143,.4);color:var(--navy);
}
.on-navy input:focus,.section.navy input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,217,143,.25)}
.form-note{font-size:.88rem;color:var(--ink-muted);margin-top:.75rem}
.section.navy .form-note,.on-navy .form-note{color:var(--on-dark-muted)}
.form-ok{
  background:var(--gold-tint);border:1px solid var(--gold-deep);border-radius:var(--r);
  padding:1rem 1.2rem;color:var(--ink);font-weight:600;margin-top:1rem;
}

/* ---------- 13. Books ---------- */
.books{display:grid;gap:clamp(1.1rem,2.6vw,1.8rem);grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.book{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-lg);
  padding:1.1rem;display:flex;flex-direction:column;gap:.55rem;box-shadow:var(--sh-1);
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e),border-color var(--t) var(--e);
}
.book:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--sky)}
.book .cover{
  border-radius:var(--r-sm);background:var(--mist);
  aspect-ratio:3/4;display:grid;place-items:center;padding:.7rem;overflow:hidden;
  container-type:inline-size;
}
.book .cover img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  max-height:calc(100cqw * 4 / 3 - 1.4rem); /* tall covers fit inside the 3:4 box */
  border-radius:4px;box-shadow:0 8px 22px rgba(16,33,56,.22);
  transition:transform var(--t-slow) var(--e);
}
.book:hover .cover img{transform:scale(1.04)}
.cover-hero{
  background:var(--mist);border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,2.2rem);
  display:grid;place-items:center;
}
.cover-hero img{
  max-width:100%;width:auto;border-radius:6px;
  box-shadow:0 18px 44px rgba(16,33,56,.28);
}
.book h3{font-size:1.08rem;margin:.35rem 0 .1rem;line-height:1.3}
.book .by{font-size:.88rem;color:var(--ink-muted);margin:0}
.book .p{font-family:var(--f-display);font-weight:700;color:var(--accent);margin:.1rem 0 .3rem}
.book .btn{margin-top:auto}

/* ---------- 14. Blog ---------- */
.posts{display:grid;gap:clamp(1.2rem,2.6vw,1.9rem);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.post-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e),border-color var(--t) var(--e);
}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--sky)}
.post-card .thumb{overflow:hidden;background:var(--mist);aspect-ratio:16/9}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--e)}
.post-card:hover .thumb img{transform:scale(1.05)}
.post-card .body{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-card h3{font-size:1.2rem;margin:0;line-height:1.32}
.post-card h3 a{color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--sky),var(--sky));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--t) var(--e)}
.post-card:hover h3 a{background-size:100% 2px}
.post-card p{margin:0;font-size:.96rem;color:var(--ink-muted);line-height:1.55}
.tag{
  align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);background:var(--sky-tint);padding:.3rem .65rem;border-radius:var(--r-pill);
  text-decoration:none;
}
a.tag:hover{background:var(--ocean);color:var(--white)}
.section.navy .tag,.on-navy .tag,.hero .tag{
  background:rgba(255,217,143,.12);color:var(--gold);border:1px solid rgba(255,217,143,.32);
}
.section.navy a.tag:hover,.on-navy a.tag:hover{background:var(--gold);color:var(--navy)}
.post-card .meta{margin-top:auto;padding-top:.45rem;font-size:.83rem;color:var(--ink-muted)}

.post-hero{background:var(--navy);color:var(--on-dark);padding-block:clamp(2.6rem,6vw,4.4rem) clamp(2rem,4vw,3rem);position:relative;overflow:hidden}
.post-hero::before{
  content:"";position:absolute;left:50%;top:-40%;width:900px;aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,217,143,.16),transparent 65%);pointer-events:none;
}
.post-hero h1{color:var(--white);font-size:var(--step-4);max-width:20ch;margin-bottom:.35em;position:relative}
.post-hero .post-cat{position:relative}
.post-hero .post-cat a{color:var(--gold);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,217,143,.4)}
.post-meta{font-size:.92rem;color:var(--on-dark-muted);margin:0;position:relative}

.prose{max-width:68ch;margin-inline:auto}
.prose>h2{font-size:var(--step-3);margin-top:2.2em;margin-bottom:.5em}
.prose>h3{font-size:var(--step-2);margin-top:1.8em}
.prose>p,.prose>ul,.prose>ol{font-size:1.14rem;line-height:1.78}
.prose>ul,.prose>ol{padding-left:1.3em}
.prose img.post-cover{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-2);margin:0 0 1.5rem;aspect-ratio:16/9;object-fit:cover}
.prose blockquote{
  margin:2rem 0;padding:1.2rem 1.5rem;background:var(--sky-tint);
  border-left:4px solid var(--sky);border-radius:0 var(--r) var(--r) 0;
  font-family:var(--f-display);font-size:var(--step-2);line-height:1.45;font-weight:500;color:var(--ink);
}
.prose blockquote p{margin:0;font-size:inherit;line-height:inherit}
.prose .faq{margin-top:1.2rem}
/* the "Know a parent who needs a witness?" box inside every article: give it room and a frame */
.prose .cta-box{
  margin:2.8rem 0 0;padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2.2rem);
  background:var(--card);border:1px solid var(--card-line);border-left:4px solid var(--sky);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.prose .cta-box h3{margin:0 0 .5rem}
.prose .cta-box p{margin:0 0 1.1rem}
.prose .cta-box .btn{margin:0}
.prose .cta-box+p{margin-top:2.4rem !important}
.post-cta{
  background:var(--navy);color:var(--on-dark);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3.4vw,2.4rem);margin:2.6rem auto 0;max-width:68ch;text-align:center;
}
.post-cta h3{color:var(--gold)}
.post-cta p{color:var(--on-dark-muted)}

/* ---------- 15. State lookup ---------- */
.lookup-result{margin-top:1.2rem}
.result-box{
  background:var(--card);border:1px solid var(--card-line);border-left:4px solid var(--sky);
  border-radius:var(--r);padding:1.15rem 1.3rem;
  animation:fadeIn 400ms var(--e);
}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.result-box h4{margin:0 0 .35rem;font-size:1.15rem}
.result-box p:last-child{margin-bottom:0}

/* ---------- 16. Footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--on-dark-muted);padding-block:clamp(3rem,6vw,4.5rem) 2rem;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,var(--sky),var(--gold),var(--sky))}
.f-grid{display:grid;gap:2.2rem;grid-template-columns:1fr}
@media (min-width:760px){.f-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.f-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-bottom:1rem}
.f-brand img{width:40px;height:40px}
.f-brand span{font-family:var(--f-display);font-size:1.2rem;font-weight:700;color:var(--white)}
.site-footer h3{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);font-family:var(--f-body);font-weight:700;margin-bottom:.9rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.site-footer li{margin:0}
.site-footer a{color:var(--on-dark-muted);text-decoration:none;transition:color var(--t) var(--e);font-size:.97rem}
.site-footer a:hover{color:var(--gold)}
.f-note{font-size:.92rem;line-height:1.6;max-width:38ch}
.f-bottom{
  margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid rgba(255,217,143,.16);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;font-size:.87rem;
}
.motion-toggle{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.45rem 1rem;
  background:rgba(255,217,143,.08);border:1px solid rgba(255,217,143,.28);border-radius:var(--r-pill);
  color:var(--gold);font-family:var(--f-body);font-size:.87rem;font-weight:600;cursor:pointer;
  transition:background var(--t) var(--e);
}
.motion-toggle:hover{background:rgba(255,217,143,.2)}
.motion-toggle .sw{width:30px;height:17px;border-radius:999px;background:rgba(255,217,143,.3);position:relative;flex:none;transition:background var(--t) var(--e)}
.motion-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--gold);transition:transform var(--t) var(--e)}
.motion-toggle[aria-pressed="true"] .sw{background:rgba(255,217,143,.55)}
.motion-toggle[aria-pressed="true"] .sw::after{transform:translateX(13px)}

/* ---------- 17. Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--e),transform var(--t-slow) var(--e)}
.reveal.in{opacity:1;transform:none}
.reveal.s1{transition-delay:70ms}
.reveal.s2{transition-delay:140ms}
.reveal.s3{transition-delay:210ms}
.reveal.s4{transition-delay:280ms}
html:not(.js) .reveal{opacity:1;transform:none}
html:not(.js) .rise{opacity:1;transform:none}
html:not(.js) .horizon{opacity:.55;transform:none}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal,.rise{opacity:1 !important;transform:none !important}
  .horizon{opacity:.55 !important;transform:none !important}
  .mote{display:none}
}
html.no-motion *,html.no-motion *::before,html.no-motion *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
html.no-motion .reveal,html.no-motion .rise{opacity:1 !important;transform:none !important}
html.no-motion .horizon{opacity:.55 !important;transform:none !important}
html.no-motion .mote,html.no-motion .hero-art .frame::after{display:none}
html.no-motion{scroll-behavior:auto}

/* ---------- 19. Utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}
.stack{display:grid;gap:1.1rem}
.stack-lg{display:grid;gap:2rem}
.flow>*+*{margin-top:1.1rem}
.nowrap{white-space:nowrap}
.notice{
  background:var(--gold-tint);border:1px solid rgba(242,194,104,.5);border-left:4px solid var(--gold-deep);
  border-radius:var(--r-sm);padding:1rem 1.2rem;font-size:.96rem;line-height:1.6;color:var(--ink);
}
.notice strong{color:var(--ink)}
.section.navy .notice,.on-navy .notice{background:rgba(255,217,143,.1);border-color:rgba(255,217,143,.35);color:var(--on-dark-muted)}
.section.navy .notice strong,.on-navy .notice strong{color:var(--gold)}


/* ---------- 20. Imagery added from Kathryn's source files ---------- */

/* the 12-Step Manual, floating at the foot of the hero art */
.hero-book{
  position:absolute;left:-13%;bottom:-44px;width:min(196px,44%);
  display:block;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--card-line);
  border-radius:var(--r);padding:.6rem .6rem .95rem;
  box-shadow:var(--sh-3);
  transform:rotate(-4deg);
  transition:transform var(--t) var(--e),box-shadow var(--t) var(--e);
}
.hero-book img{width:100%;border-radius:8px;display:block;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.hero-book .t{display:block;font-family:var(--f-display);font-weight:700;font-size:.92rem;line-height:1.25;margin:.55rem 0 .1rem;padding-inline:.15rem}
.hero-book .d{display:block;font-size:.75rem;line-height:1.4;color:var(--ink-muted);padding-inline:.15rem;text-wrap:pretty}
.hero-book .d b{color:var(--accent)}
.hero-book:hover{transform:rotate(-1deg) translateY(-5px);color:var(--ink)}
@media (max-width:939px){
  .hero-book{position:static;width:100%;max-width:none;transform:none;margin-top:1.2rem;
    display:grid;grid-template-columns:88px 1fr;gap:.9rem;align-items:center;padding:.75rem}
  .hero-book .t{margin-top:0}
  .hero-book:hover{transform:translateY(-3px)}
}

/* a picture that sits beside prose without pretending to be a card */
.plate{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:var(--card);border:1px solid var(--card-line)}
.plate img{width:100%;display:block}
.plate.square img{aspect-ratio:1;object-fit:cover}
.plate{position:relative}
.plate .inset{ /* a second cover tucked into the corner of a photo */
  position:absolute;right:3.5%;bottom:3.5%;width:27%;display:block;
  border-radius:6px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.38);
  transition:transform var(--t) var(--e)}
.plate .inset img{width:100%;display:block}
.plate .inset:hover{transform:translateY(-4px)}
.plate .inset:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.figure{margin:0}
.figure figcaption{margin-top:.7rem;font-size:.9rem;line-height:1.5;color:var(--ink-muted)}
.figure figcaption strong{color:var(--ink)}
.section.navy .figure figcaption,.on-navy .figure figcaption,
.section.plum .figure figcaption,.on-plum .figure figcaption{color:var(--on-dark-muted)}
.section.navy .figure figcaption strong,.on-navy .figure figcaption strong,
.section.plum .figure figcaption strong,.on-plum .figure figcaption strong{color:var(--gold)}

/* two book covers shown as a pair */
.cover-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.3rem)}
.cover-pair .plate img{aspect-ratio:1;object-fit:cover}
.cover-pair figcaption{margin-top:.55rem;font-size:.85rem}

/* the JA heart trademark, small and quiet */
.mark-note{display:flex;gap:1rem;align-items:center}
.mark-note img{width:84px;flex:none;border-radius:var(--r-sm)}
.mark-note p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-muted)}


/* ---------- 21. Calendar ---------- */
.cal-layout{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.cal-layout{grid-template-columns:1fr 1.05fr}.cal-side{position:sticky;top:calc(var(--hdr-h) + 84px)}}
.cal-tz{font-size:.92rem;color:var(--ink-muted);margin:0 0 1.1rem}

.cal-wrap{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-lg);padding:clamp(1rem,2.4vw,1.5rem);box-shadow:var(--sh-1)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.cal-month{margin:0;font-size:var(--step-2);text-align:center;flex:1}
.cal-nav{
  min-width:44px;min-height:44px;padding:0 .8rem;flex:none;
  background:transparent;border:1.5px solid var(--card-line);border-radius:var(--r-pill);
  color:var(--accent);font-family:var(--f-body);font-size:0;font-weight:700;cursor:pointer;
  transition:border-color var(--t) var(--e),background var(--t) var(--e),color var(--t) var(--e);
  display:inline-flex;align-items:center;justify-content:center;
}
.cal-nav::before{font-size:1.15rem;line-height:1}
.cal-nav:first-of-type::before{content:"\2190"}
.cal-nav:last-of-type::before{content:"\2192"}
.cal-head .cal-nav:nth-child(1)::before{content:"\2190"}
.cal-head .cal-nav:nth-child(3)::before{content:"\2192"}
.cal-nav:hover{border-color:var(--accent);background:var(--accent-tintish,transparent);color:var(--accent)}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);padding:.4rem 0 .55rem}
.cal-cell{
  position:relative;aspect-ratio:1;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid transparent;font-variant-numeric:tabular-nums;
}
.cal-cell.cal-empty{border:0}
.cal-num{font-size:.9rem;color:var(--ink-muted);line-height:1}
.cal-cell.has-meeting{background:var(--gold-tint);border-color:var(--gold-deep);}
.cal-cell.has-meeting .cal-num{color:var(--ink);font-weight:700}
.cal-cell.is-today{outline:2px solid var(--accent);outline-offset:-2px}
.cal-cell.is-today .cal-num{color:var(--accent);font-weight:700}
.cal-marks{display:flex;gap:3px}
.cal-mark{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}
.cal-mark.cal-free{background:var(--gold-deep)}
.cal-mark.cal-members{background:var(--accent)}

.cal-key{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.45rem;font-size:.9rem;color:var(--ink-muted)}
.cal-key li{display:flex;align-items:center;gap:.55rem;margin:0}

.cal-list{display:grid;gap:.9rem}
.cal-item{
  background:var(--card);border:1px solid var(--card-line);border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:1.1rem 1.2rem;
  display:grid;gap:.8rem;
}
.cal-when{display:grid;gap:.15rem}
.cal-when-day{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.cal-when-time{font-family:var(--f-display);font-size:var(--step-2);line-height:1.15;color:var(--ink)}
.cal-when-home{font-size:.85rem;color:var(--ink-muted)}
.cal-body h3{font-size:var(--step-1);margin:0 0 .4rem}
.cal-body p{font-size:.95rem;color:var(--ink-muted);margin:.5rem 0 0}
.cal-tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:var(--r-pill);background:var(--accent);color:#fff;
}
.cal-tag-free{background:var(--gold);color:var(--ink)}
.cal-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.cal-note{font-size:.87rem;color:var(--ink-muted);line-height:1.5;margin:.8rem 0 0}
.cal-empty-note{font-size:.95rem;color:var(--ink-muted);margin:0}
.assurances{display:grid;gap:.9rem}
.assurances p{margin:0}

.cal-assure .card>h3:first-child{font-size:var(--step-1)}

/* ---------- 22. Sky hero: looping cloud video with the books floating over it ---------- */
.hero.hero-sky{
  --hs-ink:#16304c; --hs-muted:#3a4f66; --hs-lit:#235684; --hs-line:rgba(29,58,95,.16);
  --hs-scrim:251,248,243;
  color:var(--hs-ink);
  background:#c6d6e3 url(assets/hero-clouds-poster.jpg) center bottom/cover no-repeat;
  min-height:min(78vh,720px);display:flex;align-items:center;
  padding-block:clamp(3rem,6vw,4.6rem) clamp(4rem,8vw,6.5rem);
}
.hero-sky::before,.hero-sky::after{display:none}
.hero-sky .container{width:100%}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#c6d6e3}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 74% at 20% 44%,rgba(var(--hs-scrim),.74) 0%,rgba(var(--hs-scrim),.36) 44%,rgba(var(--hs-scrim),0) 72%),
    linear-gradient(to top,rgba(var(--hs-scrim),.10),rgba(var(--hs-scrim),0) 30%);
}
.hero-sky h1{color:var(--hs-ink)}
.hero-sky h1 .lit{color:var(--hs-lit)}
.hero-sky .hero-lede{color:var(--hs-muted)}
.hero-sky .eyebrow{color:var(--hs-lit)}
.hero-sky .hbadge{color:var(--hs-ink);background:rgba(255,255,255,.66);border-color:var(--hs-line)}
.hero.hero-sky .hero-copy .btn.ghost,
:root:not([data-theme="light"]) .hero.hero-sky .hero-copy .btn.ghost,
[data-theme="dark"] .hero.hero-sky .hero-copy .btn.ghost{
  --btn-fg:var(--hs-ink);--btn-line:var(--hs-ink);color:var(--hs-ink);border-color:var(--hs-ink);
  background:rgba(255,255,255,.34)}
.hero.hero-sky .hero-copy .btn.ghost:hover,
:root:not([data-theme="light"]) .hero.hero-sky .hero-copy .btn.ghost:hover,
[data-theme="dark"] .hero.hero-sky .hero-copy .btn.ghost:hover{background:var(--hs-ink);color:#fff;border-color:var(--hs-ink)}
.hero-sky .hero-grid{align-items:center}
@media (min-width:940px){.hero-sky .hero-grid{grid-template-columns:1.05fr .95fr}}

.hero-books{justify-self:end;width:100%;max-width:540px}
.hb-stage{position:relative;aspect-ratio:1025/748}
.hb{position:absolute;display:block;filter:drop-shadow(0 22px 26px rgba(30,15,50,.30))}
.hb img{width:100%;height:auto;display:block;transition:transform .55s var(--e);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));transform-style:preserve-3d}
.hb-manual{left:0;top:0;width:73%;z-index:2;animation:hover-a 8s ease-in-out infinite}
.hb-work{left:50.3%;top:4.7%;width:49.7%;z-index:1;animation:hover-b 10s ease-in-out 1.5s infinite}
.hb:hover img,.hb:focus-visible img{--ty:-6px;--sc:1.03}
.hb:focus-visible{outline:3px solid var(--hs-lit);outline-offset:6px;border-radius:6px}
@keyframes hover-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hover-b{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-books-cap{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;margin-left:6%;
  background:rgba(255,255,255,.78);color:var(--hs-ink);border:1px solid var(--hs-line);
  border-radius:var(--r-pill);padding:.5rem 1rem .5rem 1.05rem;
  font-size:.9rem;font-weight:600;text-decoration:none;
  transition:background var(--t) var(--e),transform var(--t) var(--e);
}
.hero-books-cap b{color:var(--hs-lit)}
.hero-books-cap .ico{width:16px;height:16px}
.hero-books-cap:hover{background:#fff;color:var(--hs-ink);transform:translateY(-2px)}
@media (max-width:939px){
  .hero.hero-sky{min-height:0}
  .hero-books{justify-self:center;max-width:380px;margin-top:.4rem}
  .hero-books-cap{margin-left:0;font-size:.84rem}
}
/* motion off: the still poster stands in for the video, books stop floating */
html.no-motion .hero-video{display:none}
html.no-motion .hb{animation:none}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hb{animation:none}
}

/* ---------- 23. More motion, site-wide ----------
   Everything here is opacity, small rises, slow ambient gradients and one-time settles.
   No parallax, no autoplay carousels. All of it is killed by html.no-motion and
   prefers-reduced-motion (section 18), so the reader stays in charge. */

/* a. auto-reveal: app.js tags most blocks on every page with .reveal and a stagger */
.reveal{transition-delay:var(--d,0ms)}

/* b. page load: header settles in, the crisis strip and page fade up */
.js .site-header{animation:headdown .7s var(--e) both}
@keyframes headdown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.js main{animation:pagein .6s var(--e) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}

/* c. headlines: each word rises on its own (app.js wraps words in .w) */
.js h1 .w{display:inline-block;animation:wordin .8s var(--e) both;animation-delay:calc(90ms + var(--i,0) * 70ms)}
@keyframes wordin{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}

/* d. eyebrow dash draws in when its block reveals (or on load in the hero) */
.eyebrow::before{transform-origin:left center;transform:scaleX(0);animation:dash .9s var(--e) .25s both}
.reveal .eyebrow::before{animation:none;transition:transform .9s var(--e) .15s}
.reveal.in .eyebrow::before{transform:scaleX(1)}
@keyframes dash{to{transform:scaleX(1)}}

/* e. photos settle from a slight zoom the moment they reveal */
.reveal.in .plate img,.reveal.in .portrait img,.reveal.in .figure img,.reveal.in .thumb img{animation:settle 2s var(--e) both}
.post-card:hover .thumb img{animation:none}

/* f. dark bands breathe: two slow light pools drifting behind the content */
.section.navy{position:relative;overflow:hidden;isolation:isolate}
.section.navy::before{
  content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 46% at 22% 30%,rgba(255,217,143,.13) 0%,rgba(255,217,143,0) 70%),
    radial-gradient(34% 44% at 78% 72%,rgba(47,109,168,.42) 0%,rgba(47,109,168,0) 70%);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(6%,4%,0) rotate(6deg)}
}
.section.navy .motes{position:absolute;inset:0;z-index:-1}

/* g. gold buttons breathe a slow, soft glow */
.btn:not(.ghost):not(.ghost-light){animation:btn-glow 6s ease-in-out 2s infinite}
@keyframes btn-glow{
  0%,100%{box-shadow:var(--sh-1)}
  50%{box-shadow:0 6px 18px rgba(16,33,56,.16),0 0 0 6px rgba(255,217,143,.16),0 0 28px rgba(255,217,143,.45)}
}
.btn:not(.ghost):not(.ghost-light):hover{animation:none}

/* h. cards, doors and books lift a little further and glow on hover */
.card,.door,.book,.post-card,.tile{transition:transform .45s var(--e),box-shadow .45s var(--e),border-color .45s var(--e)}
.card:hover,.book:hover,.post-card:hover,.tile:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(29,58,95,.16)}
.door:hover{transform:translateY(-6px)}

/* i. FAQ answers fade up when a question opens */
.faq details[open] .ans,.faq details[open]>p,.faq details[open]>div{animation:fadeup .45s var(--e) both}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* j. links underline slides in */
.prose a:not(.btn),.card p a,.door .go{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s var(--e)}
.prose a:not(.btn):hover,.card p a:hover{background-size:100% 1.5px}

/* k. reading progress line at the very top of every page */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:1200;background:var(--gold);transform:scaleX(0);transform-origin:left;pointer-events:none;box-shadow:0 0 12px rgba(255,217,143,.6)}

/* l. footer and crisis strip */
.crisis{animation:pagein .8s var(--e) both}

/* everything above is silenced with motion off */
html.no-motion .progress{display:none}
html.no-motion .section.navy::before{animation:none}
html.no-motion .btn{animation:none}
html.no-motion h1 .w{animation:none}
@media (prefers-reduced-motion:reduce){
  .progress{display:none}
  .section.navy::before,.btn{animation:none}
  h1 .w{animation:none}
  .eyebrow::before{transform:none !important}
}

/* ---------- 24. Cinematic motion ----------
   The showpiece layer: page curtain, cursor light, rising motes, book tilt, image
   curtains, word-by-word headings, magnetic buttons, ripples, drifting cloud dividers,
   counting prices, a heartbeat on the logo. Still transform/opacity only, still all
   switched off by the motion toggle and reduced-motion. */

/* a. navy curtain lifts on arrival, drops when you leave for another page */
.js body::before{
  content:"";position:fixed;inset:0;z-index:3000;pointer-events:none;
  background:linear-gradient(to bottom,var(--navy) 0%,var(--navy) calc(100% - 4px),var(--gold) calc(100% - 4px));
  transform-origin:50% 0;animation:curtain-lift .85s cubic-bezier(.77,0,.18,1) .05s both;
}
@keyframes curtain-lift{from{transform:scaleY(1)}to{transform:scaleY(0)}}
html.leaving body::before{transform-origin:50% 100%;background:linear-gradient(to top,var(--navy) 0%,var(--navy) calc(100% - 4px),var(--gold) calc(100% - 4px));animation:curtain-drop .42s cubic-bezier(.77,0,.18,1) both}
@keyframes curtain-drop{from{transform:scaleY(0)}to{transform:scaleY(1)}}


/* c. angel light: specks rising slowly through the hero */
.hero-sky .motes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-sky .mote{
  position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,244,214,.9) 40%,rgba(255,244,214,0) 70%);
  opacity:0;animation:mote-rise var(--dur,14s) linear var(--delay,0s) infinite;filter:blur(.3px);
}
@keyframes mote-rise{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  12%{opacity:.9}
  60%{opacity:.7}
  100%{transform:translate3d(var(--dx,20px),-110vh,0) scale(1.15);opacity:0}
}

/* d. scroll cue at the foot of the hero */
.scroll-cue{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--hs-ink);
  opacity:.75;transition:opacity .5s var(--e),transform .5s var(--e);animation:rise 1s var(--e) 1.4s both;
}
.scroll-cue i{width:14px;height:14px;border-right:2px solid var(--hs-ink);border-bottom:2px solid var(--hs-ink);transform:rotate(45deg);animation:cue-bob 1.8s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}}
html.scrolled .scroll-cue{opacity:0;transform:translate(-50%,10px);pointer-events:none}
@media (max-width:939px){.scroll-cue{display:none}}

/* e. the highlighted word in the headline carries a slow light sweep */
.hero-sky h1 .lit,.hero-sky h1 .lit .w{
  background:linear-gradient(100deg,var(--hs-lit) 0%,var(--hs-lit) 42%,#e9b94f 50%,var(--hs-lit) 58%,var(--hs-lit) 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lit-sweep 7s var(--e) 1.8s infinite;
}
@keyframes lit-sweep{0%{background-position:100% 0}35%{background-position:0% 0}100%{background-position:0% 0}}

/* f. photographs reveal with a curtain wipe instead of a plain fade */
.reveal .plate,.reveal .portrait,.reveal.plate,.reveal.portrait,.reveal .thumb,.reveal.figure .plate{
  clip-path:inset(0 100% 0 0 round var(--r-lg));transition:clip-path 1.15s cubic-bezier(.77,0,.18,1) .1s;
}
.reveal.in .plate,.reveal.in .portrait,.reveal.plate.in,.reveal.portrait.in,.reveal.in .thumb{clip-path:inset(0 0 0 0 round var(--r-lg))}

/* g. section headings rise word by word when their block reveals (app.js wraps .w2) */
.reveal.in .w2{display:inline-block;animation:wordin .75s var(--e) both;animation-delay:calc(var(--i,0) * 55ms)}

/* h. icons breathe; on hover they wake up */
.door svg,.card>svg,.tile>svg,.p-item svg{animation:breathe 4.5s ease-in-out infinite;transform-origin:center}
.door:hover svg,.card:hover>svg,.tile:hover>svg{animation:none;transform:translateY(-3px) scale(1.12) rotate(-4deg);transition:transform .4s var(--e)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* i. the timeline rail draws itself as you reach it */
.rail::before{transform:scaleY(0);transform-origin:top;transition:transform 1.4s cubic-bezier(.77,0,.18,1)}
.rail:has(li.in)::before{transform:scaleY(1)}

/* j. the heart logo has a heartbeat */
.brand img{animation:heartbeat 4s ease-in-out 2s infinite}
@keyframes heartbeat{0%,20%,100%{transform:scale(1)}5%{transform:scale(1.12)}10%{transform:scale(1)}15%{transform:scale(1.09)}}
.brand:hover img{animation:none}

/* k. button ripple (span injected on click) */
.btn .ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .7s var(--e) both}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* l. drifting cloud line where a light section meets a navy one, and at the footer */
.section.navy::after,.site-footer::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:40px;pointer-events:none;z-index:1;
  background:var(--divider,var(--surface));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 40' preserveAspectRatio='none'><path d='M0 0H900V14C860 14 850 30 810 30C770 30 760 12 720 12C680 12 670 34 620 34C570 34 560 16 520 16C480 16 470 28 430 28C390 28 380 10 340 10C300 10 290 32 240 32C190 32 180 14 140 14C100 14 90 26 50 26C20 26 10 14 0 14Z' fill='black'/></svg>") repeat-x;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 40' preserveAspectRatio='none'><path d='M0 0H900V14C860 14 850 30 810 30C770 30 760 12 720 12C680 12 670 34 620 34C570 34 560 16 520 16C480 16 470 28 430 28C390 28 380 10 340 10C300 10 290 32 240 32C190 32 180 14 140 14C100 14 90 26 50 26C20 26 10 14 0 14Z' fill='black'/></svg>") repeat-x;
  -webkit-mask-size:900px 40px;mask-size:900px 40px;
  animation:clouds-drift 70s linear infinite;
}
.section.navy+.section.navy::after,.page-head+.section.navy::after,.hero+.section.navy::after{display:none}
main:has(>.section.navy:last-child)+.site-footer::after,main:has(>.section.navy:last-of-type:last-child)+.site-footer::after{display:none}
@keyframes clouds-drift{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:900px 0;mask-position:900px 0}}
.section.navy>.container{position:relative;z-index:2}

/* m. back to top */
.to-top{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:950;width:48px;height:48px;border-radius:50%;
  background:var(--gold);color:var(--navy);border:0;cursor:pointer;box-shadow:var(--sh-2);
  display:grid;place-items:center;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .45s var(--e),transform .45s var(--e),background .3s;
}
.to-top svg{width:20px;height:20px}
html.scrolled-far .to-top{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--gold-deep);transform:translateY(-3px)}
.to-top:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* n. prices count up (app.js) – keep the width steady while counting */
.price .amt{font-variant-numeric:tabular-nums}

/* o. hero badges pop in */
.hero-sky .hbadge{animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}
.hero-sky .hbadge:nth-child(1){animation-delay:.9s}.hero-sky .hbadge:nth-child(2){animation-delay:1.05s}.hero-sky .hbadge:nth-child(3){animation-delay:1.2s}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(6px)}to{opacity:1;transform:none}}

/* p. nav links: gold underline sweeps in from the centre (already), the CTA glows */
.nav-cta .btn{box-shadow:0 0 0 0 rgba(255,217,143,.55);animation:cta-glow 4s ease-in-out 3s infinite}
@keyframes cta-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,217,143,.0)}50%{box-shadow:0 0 0 8px rgba(255,217,143,.18)}}

/* silence with motion off */
html.no-motion body::before{display:none}
html.no-motion .scroll-cue,html.no-motion .hero-sky .mote{display:none}
html.no-motion .reveal .plate,html.no-motion .reveal .portrait,html.no-motion .reveal.plate,html.no-motion .reveal.portrait,html.no-motion .reveal .thumb{clip-path:none}
html.no-motion .rail::before{transform:none}
html.no-motion .hero-sky h1 .lit,html.no-motion .hero-sky h1 .lit .w{animation:none;background:none;color:var(--hs-lit)}
html.no-motion .section.navy::after,html.no-motion .site-footer::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .js body::before{display:none}
  .scroll-cue,.hero-sky .mote{display:none}
  .reveal .plate,.reveal .portrait,.reveal.plate,.reveal.portrait,.reveal .thumb{clip-path:none !important}
  .rail::before{transform:none}
  .hero-sky h1 .lit,.hero-sky h1 .lit .w{animation:none;background:none;color:var(--hs-lit)}
}

/* footer credit */
.f-credit{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,217,143,.35)}
.f-credit:hover{border-bottom-color:var(--gold)}

/* cards in a row line up their buttons at the bottom whatever the copy length;
   when the price sits right above the button, the pair moves down together */
.card>.btn:last-child{margin-top:auto}
.card>.price:has(+.btn:last-child){margin-top:auto;padding-top:.9rem}
.card>.price:has(+.btn:last-child)+.btn{margin-top:.9rem}
/* card rows with prices: reserve two lines for the title so prices, copy and buttons line up across the row */
.grid>.card:has(>.price)>h3{min-height:2.5em;line-height:1.25}
.grid>.card:has(>.price)>.when{margin-bottom:.9rem}

/* ---------- 25. Kathryn on YouTube ---------- */
.watch{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.watch{grid-template-columns:1.15fr .85fr}}
.yt{margin:0;justify-self:center;width:100%;max-width:360px}
.yt-poster{
  position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;cursor:pointer;
  border-radius:var(--r-xl);overflow:hidden;background:var(--navy);box-shadow:var(--sh-3);
  transition:transform .5s var(--e),box-shadow .5s var(--e);
}
.yt-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--e)}
.yt-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,43,71,.55),rgba(20,43,71,0) 45%)}
.yt-poster:hover{transform:translateY(-5px);box-shadow:0 26px 50px rgba(20,43,71,.32)}
.yt-poster:hover img{transform:scale(1.04)}
.yt-poster:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.yt-play{
  position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;z-index:2;
  display:grid;place-items:center;background:var(--gold);color:var(--navy);box-shadow:0 12px 30px rgba(0,0,0,.35);
  animation:play-pulse 2.6s ease-in-out infinite;
}
.yt-play svg{width:38px;height:38px;margin-left:5px}
@keyframes play-pulse{0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 0 0 rgba(255,217,143,.55)}60%{box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 0 18px rgba(255,217,143,0)}}
.yt-len{position:absolute;right:.8rem;bottom:.8rem;z-index:2;background:rgba(0,0,0,.7);color:#fff;font-size:.8rem;font-weight:700;padding:.2rem .5rem;border-radius:6px}
.yt.playing .yt-poster{cursor:default}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt figcaption{margin-top:.8rem;font-size:.9rem;line-height:1.5;color:var(--ink-muted)}
.yt figcaption strong{color:var(--ink)}
.watch .btn .ico{width:20px;height:20px}
html.no-motion .yt-play{animation:none}
@media (prefers-reduced-motion:reduce){.yt-play{animation:none}}
.yt-note .textlink{display:inline-flex;margin:.6rem 1.2rem 0 0}


/* 26. YouTube in nav + hero */
.nav-yt{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-left:.25rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);color:var(--white);background:transparent;transition:background .25s,color .25s,border-color .25s,transform .25s}
.nav-yt .ico{width:19px;height:19px}
.nav-yt:hover,.nav-yt:focus-visible{background:#ff0000;border-color:#ff0000;color:#fff;transform:translateY(-1px)}
@media (max-width:900px){.nav-yt{width:36px;height:36px;margin-left:auto}}
.hero.hero-sky .hero-copy .hero-yt{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.25rem;font:600 .95rem/1 var(--font-sans,inherit);color:var(--hs-ink,#1d3a5f);text-decoration:none;letter-spacing:.01em}
.hero-yt-play{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;max-width:38px;max-height:38px;flex:none;border-radius:999px;background:#1d3a5f;color:#fff;box-shadow:0 6px 18px rgba(29,58,95,.28);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s}
.hero-yt-play svg{width:18px;height:18px;margin-left:2px}
.hero-yt:hover .hero-yt-play,.hero-yt:focus-visible .hero-yt-play{transform:scale(1.12);background:#ff0000}
.hero-yt-n{padding:.3rem .6rem;border-radius:999px;background:rgba(29,58,95,.08);font-weight:500;font-size:.8rem;color:#2f6da8}
.hero-yt:hover{text-decoration:underline;text-underline-offset:.25em}
html.no-motion .hero-yt-play,html.no-motion .nav-yt{transition:none}

/* 27. Caring Listener card */
.card.listener{height:100%;display:flex;flex-direction:column}
.card.listener .listener-tel{margin:1.1rem 0 .8rem}
.card.listener .listener-tel .btn{width:100%;justify-content:center}
.card.listener .listener-tel .btn .ico{width:18px;height:18px;margin-right:.5rem}

/* 28. Free 12-step signup: name, email, optional phone */
.signup.signup-full{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem;align-items:end}
.signup.signup-full .sfield{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.signup.signup-full .sfield-wide{grid-column:1 / -1}
.signup.signup-full .sfield label{font:600 .82rem/1.3 var(--f-sans,inherit);letter-spacing:.02em;color:inherit;opacity:.92}
.signup.signup-full .sfield .opt{font-weight:400;opacity:.62;font-size:.95em}
.signup.signup-full .sfield input{width:100%;flex:none}
.signup.signup-full .btn{grid-column:1 / -1;justify-content:center}
@media (max-width:640px){.signup.signup-full{grid-template-columns:1fr}}
.on-navy .signup.signup-full .sfield label{color:var(--white)}

/* ---- published letters (grandchild alienation) ---- */
.letter{
  background:var(--card,#fff);border:1px solid rgba(47,109,168,.16);
  border-left:4px solid var(--ocean);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3.4vw,2.8rem);
}
.letter h2{font-size:var(--step-3)}
.letter p{max-width:62ch}
.letter > p.fine{margin-top:-.4rem;margin-bottom:1.6rem}
.letter-sign{
  font-family:var(--f-body);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:var(--step--1);color:var(--ocean);
  margin-top:1.6rem
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .letter-sign{color:var(--accent)}
  :root:not([data-theme="light"]) .letter{border-left-color:var(--accent-line)}
}
[data-theme="dark"] .letter-sign{color:var(--accent)}
[data-theme="dark"] .letter{border-left-color:var(--accent-line)}

/* ---- checkout block on the booking page ---- */
.paybox{
  background:var(--sky-tint);border:1px solid rgba(47,109,168,.18);
  border-radius:var(--r-lg);padding:clamp(1.2rem,2.6vw,1.8rem);
}
.paybox .fine{margin-bottom:1.1rem}
.paybtns{display:flex;flex-direction:column;gap:.7rem}
.paybtns .btn{width:100%;justify-content:center}

/* ---- YouTube banner (books page) ---- */
.yt-banner{
  display:flex;align-items:center;gap:clamp(1rem,2.6vw,1.8rem);
  margin-top:clamp(2.2rem,4vw,3.2rem);
  background:var(--navy);color:var(--white);
  border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3.4vw,2.6rem);
  box-shadow:var(--sh-2);
}
.yt-banner-ic{
  flex:none;display:grid;place-items:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--gold);color:var(--navy);
}
.yt-banner-ic .ico{width:32px;height:32px}
.yt-banner-text{flex:1;min-width:0}
.yt-banner-text .eyebrow{color:var(--gold);margin-bottom:.35rem}
.yt-banner-text h3{color:var(--white);font-size:var(--step-3);margin-bottom:.4rem}
.yt-banner-text p{color:rgba(255,255,255,.86)}
.yt-banner .btn{flex:none}
@media (max-width:760px){
  .yt-banner{flex-direction:column;align-items:flex-start;text-align:left}
  .yt-banner .btn{width:100%;justify-content:center}
}

/* hero credential stamp — "Grief Coaching" between the headline and the lede */
.hero-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 0 1.2rem;
  font-family:var(--f-body);
  font-size:.92rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  line-height:1;
  color:#16304c;background:rgba(255,255,255,.70);
  border:1.5px solid var(--gold-deep);border-radius:var(--r-pill);
  padding:.55rem 1.05rem;
  box-shadow:0 2px 12px rgba(29,58,95,.10);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
.hero-tag svg{color:var(--gold-deep);flex:none}
.hero-sky .hero-tag{color:#16304c;background:rgba(255,255,255,.70);border-color:var(--gold-deep)}
[data-theme="dark"] .hero.hero-sky .hero-tag{color:#16304c;background:rgba(255,255,255,.78)}