/* ═══════════════════════════════════════════════════════════════
   FINDPEACE — v6 ENHANCEMENT LAYER
   Light breaking through · reflection · organic texture
   Loaded AFTER the inline styles so these win the cascade.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --fp-teal:#0F3333;
  --fp-teal-soft:#1B4D5A;
  --fp-steel:#5497b2;
  --fp-sky:#A9C9D6;
  --fp-sky-pale:#C8DDE6;
  --fp-terra:#D77750;
  --fp-terra-deep:#9c4a28;
  --fp-alabaster:#FFFCFA;
  --fp-serif:Optima,'Segoe UI',Candara,Georgia,serif;
  /* hand-painted brushstroke (tapered both ends) — used in place of hard rules */
  --fp-brush:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2018'%3E%3Cpath%20d='M3,11.5C40,7,120,5,200,6.2C214,6.5,228,7.2,236,8.5C228,10.2,214,10.8,200,11.2C120,13,40,13.2,3,11.5Z'%20fill='%239c4a28'/%3E%3C/svg%3E");
}

/* a touch more air everywhere — serene & spacious */
section{ padding:8.5rem 0; }
@media(max-width:680px){ section{ padding:5.5rem 0; } }

/* ───────────────────────────────────────────────
   HERO — luminous, photographic, light-first
─────────────────────────────────────────────── */
.banner-hero{
  min-height:100svh;
  background:#0d2a2e !important;          /* base behind photo */
  isolation:isolate;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:1; transform:scale(1.04);
  animation:heroDrift 30s ease-in-out infinite alternate;
}
@keyframes heroDrift{ from{ transform:scale(1.04) translateY(0); } to{ transform:scale(1.1) translateY(-1.4%); } }
@media(prefers-reduced-motion:reduce){ .hero-media{ animation:none; } }

/* scrim so the white mark + tagline always read */
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(10,38,42,0) 0%, rgba(10,38,42,.35) 100%),
    linear-gradient(180deg, rgba(8,30,34,.30) 0%, rgba(8,30,34,.05) 32%, rgba(8,30,34,.32) 78%, rgba(8,30,34,.62) 100%);
}

/* per-treatment background image */
body[data-hero="luminous"] .hero-media{ background-image:url('img/hero-lake.png'); background-position:center 30%; }
body[data-hero="doorway"]  .hero-media{ background-image:url('img/doorway.jpg'); }
body[data-hero="forest"]   .hero-media{ background-image:url('img/forest-rays.png'); }
body[data-hero="quiet"]    .hero-media{ display:none; }

/* Sunset — warm sky video (a photo-style hero, white logo) */
.hero-media .hero-vid{
  display:none; position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
body[data-hero="sunset"] .hero-media{ background-image:none; display:block; }
body[data-hero="sunset"] .hero-media .hero-vid-sunset{ display:block; }
body[data-hero="sunset"] .hero-media::after{
  background:
    radial-gradient(ellipse 72% 60% at 50% 40%, rgba(40,18,8,0) 0%, rgba(40,18,8,.28) 100%),
    linear-gradient(180deg, rgba(30,14,8,.34) 0%, rgba(30,14,8,.06) 34%, rgba(30,14,8,.30) 76%, rgba(30,14,8,.60) 100%);
}

/* Atmosphere — soft moving light (reads as glow, not a place; white logo) */
body[data-hero="atmosphere"] .hero-media{ background-image:none; display:block; background:#0d2226; }
body[data-hero="atmosphere"] .hero-media .hero-vid-atmos{ display:block; }
body[data-hero="atmosphere"] .hero-media::after{
  background:
    radial-gradient(ellipse 74% 62% at 50% 42%, rgba(8,30,34,0) 0%, rgba(8,30,34,.46) 100%),
    linear-gradient(180deg, rgba(8,30,34,.44) 0%, rgba(8,30,34,.12) 38%, rgba(8,30,34,.40) 74%, rgba(8,30,34,.58) 100%);
}

/* Aurora — the brand's soft multicolor gradient (a LIGHT hero, dark logo) */
body[data-hero="aurora"] .hero-media{ background-image:url('img/hero-aurora.png'); background-position:center; }
body[data-hero="aurora"] .hero-media::after{
  background:linear-gradient(180deg, rgba(255,252,250,.06) 0%, rgba(255,252,250,0) 45%, rgba(255,252,250,.22) 100%);
}
body[data-hero="aurora"] .banner-symbol{ display:block !important; }
body[data-hero="aurora"] .banner-symbol-white{ display:none !important; }
body[data-hero="aurora"] .banner-tag{ color:var(--fp-teal-soft) !important; text-shadow:none !important; }
body[data-hero="aurora"] .scroll-line{ background:linear-gradient(180deg, var(--fp-steel), rgba(99,154,182,0)) !important; }
body[data-hero="aurora"] header.hero-nav:not(.scrolled){ background:transparent !important; }
body[data-hero="aurora"] header.hero-nav:not(.scrolled) nav a{ color:var(--fp-teal-soft) !important; text-shadow:none !important; }
body[data-hero="aurora"] .banner-glow{ opacity:.4; }

/* quiet keeps the original airy gradient + dark logo */
body[data-hero="quiet"] .banner-hero{
  background:
    radial-gradient(ellipse 72% 58% at 50% 52%, rgba(84,151,178,.18) 0%, transparent 66%),
    linear-gradient(180deg,#FFFCFA 0%, #EEF6FA 54%, #D9ECF3 100%) !important;
}

.banner-glow{ z-index:1 !important; }
body[data-hero="quiet"] .banner-glow{ opacity:.6; }
body:not([data-hero="quiet"]) .banner-glow{
  background:radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255,243,214,.28) 0%, transparent 64%) !important;
}

.banner-inner{ z-index:2 !important; }

/* logo swap: white over photos, colour on quiet */
.banner-symbol, .banner-symbol-white{
  width:clamp(280px,40vw,480px) !important; max-width:86vw !important;
  height:auto !important; display:block !important; margin:0 auto 2.7rem !important;
  animation-duration:14s !important;
}
.banner-symbol-white{
  filter:drop-shadow(0 2px 30px rgba(0,0,0,.28));
  animation:markBreathe 11s cubic-bezier(.45,0,.55,1) infinite;
}
body[data-hero="quiet"] .banner-symbol-white{ display:none !important; }
body:not([data-hero="quiet"]) .banner-symbol{ display:none !important; }
@keyframes markBreathe{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 2px 26px rgba(0,0,0,.18)); }
  44%,56%{ transform:scale(1.07); filter:drop-shadow(0 0 42px rgba(255,240,210,.55)); }
}
@media(prefers-reduced-motion:reduce){ .banner-symbol-white{ animation:none; } }

.banner-tag{
  font-family:var(--fp-serif) !important; font-style:italic; font-weight:400;
  font-size:clamp(18px,2.6vw,27px) !important; letter-spacing:.015em !important;
  color:#fff !important; text-shadow:0 2px 24px rgba(0,0,0,.4);
}
body[data-hero="quiet"] .banner-tag{ color:var(--fp-teal-soft) !important; text-shadow:none; }

.scroll-line{ z-index:2 !important; background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)) !important; }
body[data-hero="quiet"] .scroll-line{ background:linear-gradient(180deg, var(--fp-steel), rgba(99,154,182,0)) !important; }

/* nav over a photographic hero (pre-scroll) — keep links legible on any photo */
/* hide the small corner mark on the hero (the big centered logo is the brand
   statement here) — it fades in only after you scroll past the hero */
header.hero-nav:not(.scrolled) .logo-mini{ opacity:0 !important; pointer-events:none !important; }
header.hero-nav.scrolled .logo-mini{ opacity:1 !important; transition:opacity .5s ease; }
body:not([data-hero="quiet"]) header.hero-nav:not(.scrolled){
  background:linear-gradient(180deg, rgba(8,28,32,.50) 0%, rgba(8,28,32,.12) 70%, rgba(8,28,32,0) 100%);
}
body:not([data-hero="quiet"]) header.hero-nav:not(.scrolled) nav a{ color:#fff !important; opacity:1; text-shadow:0 1px 12px rgba(0,0,0,.6); }
body:not([data-hero="quiet"]) header.hero-nav:not(.scrolled) nav a.cta{ color:#fff !important; }

/* ───────────────────────────────────────────────
   THREE PLACES, ONE PRESENCE — constellation diagram (retired)
   Replaced by a super-transparent image behind each dimension block.
─────────────────────────────────────────────── */
.constellation{ display:none !important; }

.dim{ position:relative; overflow:hidden; }
.dim > *{ position:relative; z-index:1; }
/* each dimension becomes its own quietly-held "place" — air between, soft edge */
.dim{
  border-top:none !important;
  padding:2.9rem clamp(1.4rem,3vw,2.4rem) !important;
  margin:0 0 1.3rem !important;
  border-radius:14px !important;
  box-shadow:inset 0 0 0 .5px rgba(15,51,51,.12);
}
.dim:first-of-type{ margin-top:.5rem !important; }
.dim:last-of-type{ border-bottom:none !important; }
.dim::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:.17;
}
.dim.dim-field::before{ background-image:url('img/field-tree.jpg'); background-position:center; }
.dim.dim-spiral::before{ background-image:url('img/nautilus-ratio.png'); background-position:center right; }
.dim.dim-circle::before{ background-image:url('img/sand-circles.png'); }
.constellation{
  position:relative; width:min(760px,100%); margin:1rem auto 4.5rem;
  aspect-ratio:1/.82;
}
.constellation .clines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; }
.constellation .clines line{
  stroke:rgba(84,151,178,.45); stroke-width:1.2; stroke-dasharray:5 7;
  animation:threadFlow 9s linear infinite;
}
@keyframes threadFlow{ to{ stroke-dashoffset:-48; } }
@media(prefers-reduced-motion:reduce){ .constellation .clines line{ animation:none; } }

.node{
  position:absolute; width:33%; max-width:230px; transform:translate(-50%,-50%);
  text-align:center; z-index:2;
}
.node-field { left:50%;  top:20%; }
.node-spiral{ left:16%;  top:80%; }
.node-circle{ left:84%;  top:80%; }

.node .medallion{
  width:clamp(108px,15vw,150px); height:clamp(108px,15vw,150px);
  margin:0 auto .9rem; border-radius:50%; overflow:hidden;
  box-shadow:0 14px 40px -16px rgba(15,51,51,.5), inset 0 0 0 1px rgba(255,255,255,.5);
  position:relative; background:#dCe9ee;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s;
}
.node .medallion img{ width:100%; height:100%; object-fit:cover; display:block; }
.node .medallion::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 30px rgba(15,51,51,.18);
}
.node:hover .medallion{ transform:translateY(-4px) scale(1.03); box-shadow:0 22px 50px -16px rgba(15,51,51,.55), inset 0 0 0 1px rgba(255,255,255,.6); }
.node .nname{ font-family:var(--fp-serif); font-style:italic; font-size:clamp(19px,2.4vw,24px); color:var(--fp-teal); line-height:1.1; }
.node .nverbs{ font-family:'Mulish',sans-serif; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fp-steel); margin-top:.5rem; }

/* center presence — the Wayfinder */
.node-center{
  position:absolute; left:50%; top:53%; transform:translate(-50%,-50%);
  z-index:3; text-align:center; width:46%;
}
.node-center .halo{
  position:relative; width:clamp(76px,11vw,108px); height:clamp(76px,11vw,108px); margin:0 auto .7rem;
  display:grid; place-items:center;
}
.node-center .halo::before{
  content:''; position:absolute; width:260%; height:260%; left:-80%; top:-80%;
  background:radial-gradient(circle, rgba(255,236,200,.85) 0%, rgba(255,224,170,.35) 30%, transparent 66%);
  z-index:0; animation:wayGlow 7s ease-in-out infinite;
}
@keyframes wayGlow{ 0%,100%{ transform:scale(.92); opacity:.7; } 50%{ transform:scale(1.06); opacity:1; } }
@media(prefers-reduced-motion:reduce){ .node-center .halo::before{ animation:none; } }
.node-center .halo img{ position:relative; z-index:1; width:62%; height:auto; animation:markBreathe 11s cubic-bezier(.45,0,.55,1) infinite; }
.node-center .wname{ font-family:var(--fp-serif); font-style:italic; font-size:clamp(18px,2.2vw,22px); color:var(--fp-teal-soft); }
.node-center .wlabel{ font-family:'Mulish',sans-serif; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--fp-terra); margin-bottom:.35rem; }

/* mobile: stack the constellation into a calm vertical column */
@media(max-width:620px){
  .constellation{ aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:2.2rem; margin-bottom:3rem; }
  .constellation .clines{ display:none; }
  .node, .node-center{ position:static; transform:none; width:100%; max-width:340px; }
  .node-center{ order:-1; }
}

/* ───────────────────────────────────────────────
   PROBLEM — light breaking through storm (Denver sky)
─────────────────────────────────────────────── */
.problem{ background:#0E2E39 !important; }
/* stats settle lower in the band so the sky reads behind the headline */
.problem .stats{ margin-top:6rem !important; margin-bottom:0 !important; align-items:start !important; }
/* numbers share one baseline so the row scans cleanly; labels then top-align */
.problem .stat .num{ display:flex !important; align-items:flex-end !important; justify-content:center !important; min-height:50px !important; line-height:1 !important; }
/* descriptions sit a touch lower, over the darker band of the sky photo;
   soft shadow guarantees the white reads on any part of the image */
.problem .stat .lbl{ margin-top:1.25rem !important; text-shadow:0 1px 14px rgba(6,24,28,.55); }
.problem .stat .src{ text-shadow:0 1px 10px rgba(6,24,28,.5); }

/* Full-width quote banners (Bayo) — a warm counterpart to the Mary Oliver band */
.quotebanner{
  position:relative; text-align:center; margin:0 !important;
  font-family:var(--fp-serif); font-style:italic;
  font-size:clamp(22px,3vw,31px); line-height:1.4; color:var(--fp-teal);
  padding:clamp(2.4rem,4vw,3.6rem) clamp(1.4rem,5vw,3rem);
}
.quotebanner.bayo{
  background:linear-gradient(158deg, #C3D4DB 0%, #9FB4BE 46%, #8AA1AC 100%);
  color:#fff !important;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(2.6rem,5vw,4.2rem) clamp(1.4rem,5vw,3rem) !important;
  isolation:isolate;
}
.quotebanner.bayo cite{ color:rgba(255,255,255,.82) !important; }
/* soft light pooling behind the quote */
.quotebanner.bayo::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(620px,88%); height:120%;
  background:radial-gradient(ellipse 56% 56% at 50% 50%, rgba(232,243,248,.5) 0%, rgba(210,228,236,.18) 42%, transparent 72%);
  z-index:-1; pointer-events:none;
  animation:quoteGlow 9s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){ .quotebanner.bayo::after, .invitation .inv-quote::after{ animation:none !important; } }
@keyframes quoteGlow{
  0%,100%{ transform:translate(-50%,-50%) scale(.95); opacity:.65; }
  50%{ transform:translate(-50%,-50%) scale(1.05); opacity:1; }
}
@media(prefers-reduced-motion:reduce){ .quotebanner.bayo::after, .invitation .inv-quote::after{ animation:none !important; } }
.quotebanner cite{
  display:block; margin-top:1rem;
  font-family:'Mulish',sans-serif; font-style:normal;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--fp-steel);
}
.problem::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:url('img/denver-sky.jpg') center 60%/cover no-repeat;
  opacity:.6; mix-blend-mode:lighten;
}
.problem::after{
  /* keep a soft vignette instead of the watermark */
  background:radial-gradient(ellipse 80% 70% at 50% 30%, rgba(255,210,150,.12) 0%, transparent 60%) !important;
  width:100% !important; height:100% !important; top:0 !important; left:0 !important; transform:none !important;
  animation:none !important;
}

/* ───────────────────────────────────────────────
   INSIDE JOB — the light is already within
─────────────────────────────────────────────── */
.insidejob{ position:relative; overflow:hidden;
  background:radial-gradient(ellipse 64% 56% at 50% 52%, rgba(255,234,200,.5) 0%, rgba(255,247,240,.32) 46%, #FDF8F5 80%) !important;
}
.insidejob::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(760px,96%); height:440px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 58% 58% at 50% 50%, rgba(255,222,162,.55) 0%, transparent 70%);
  filter:blur(26px); opacity:.7;
}
.insidejob .wrap{ position:relative; z-index:1; }

/* ───────────────────────────────────────────────
   TIMELINE — light, warm ground (so the dark Signup below is the finale)
─────────────────────────────────────────────── */
.timeline{ position:relative; overflow:hidden;
  background:linear-gradient(180deg, #FFFCFA 0%, #FBF4EE 55%, #F6EBE2 100%) !important;
}
.timeline::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:url('img/light-path.png') center/cover no-repeat; opacity:.14; mix-blend-mode:multiply;
}
.timeline::after{ display:none !important; }
.timeline .wrap{ position:relative; z-index:1; }
.timeline h2{ color:var(--fp-teal) !important; }
.timeline .tl-mark{ color:var(--fp-terra) !important; }
.timeline .tl p{ color:#3f4f4f !important; }

/* ───────────────────────────────────────────────
   SIGNUP — full-width dark BAND finale (not a floating card)
─────────────────────────────────────────────── */
.signup{
  background:#0E2E39 !important;
  border-radius:0 !important;
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  padding:clamp(5rem,9vw,8rem) clamp(1.5rem,5vw,3rem) !important;
}
.signup::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%, rgba(255,224,170,.5) 0%, rgba(255,210,150,.14) 32%, transparent 62%) !important;
  width:min(820px,96%) !important; height:min(820px,96%) !important; aspect-ratio:1 !important;
  opacity:1 !important; mix-blend-mode:screen !important; animation:signupGlow 10s ease-in-out infinite !important;
  z-index:0; pointer-events:none;
}
/* keep the centering translate while pulsing — wayGlow dropped it, shoving the glow off-center */
@keyframes signupGlow{
  0%,100%{ transform:translate(-50%,-50%) scale(.94); opacity:.82; }
  50%{ transform:translate(-50%,-50%) scale(1.05); opacity:1; }
}
@media(prefers-reduced-motion:reduce){ .signup::after{ animation:none !important; transform:translate(-50%,-50%) !important; } }

/* ───────────────────────────────────────────────
   DEFINITION — a held band of light
─────────────────────────────────────────────── */
.definition{
  background:radial-gradient(ellipse 62% 80% at 50% 50%, rgba(165,202,214,.3) 0%, transparent 70%) !important;
}

/* ───────────────────────────────────────────────
   gentler reveals
─────────────────────────────────────────────── */
.reveal{ transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1) !important; transform:translateY(26px); }
.reveal.in{ transform:none; }

/* ───────────────────────────────────────────────
   HERO STYLE SWITCHER (review tool — remove before launch)
─────────────────────────────────────────────── */
#heroSwitch{
  position:fixed; left:16px; bottom:16px; z-index:200;
  display:flex; gap:6px; align-items:center;
  background:rgba(255,252,250,.92); backdrop-filter:blur(10px);
  border:.5px solid rgba(15,51,51,.16); border-radius:40px; padding:7px 9px 7px 14px;
  box-shadow:0 10px 30px -12px rgba(15,51,51,.4);
  font-family:'Mulish',sans-serif;
}
#heroSwitch .hs-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fp-steel); margin-right:4px; }
#heroSwitch button{
  border:none; cursor:pointer; font-family:inherit; font-size:13px; color:var(--fp-teal-soft);
  background:transparent; padding:6px 12px; border-radius:30px; transition:all .2s;
}
#heroSwitch button:hover{ color:var(--fp-teal); }
#heroSwitch button.active{ background:var(--fp-teal); color:#fff; }
@media(max-width:680px){ #heroSwitch .hs-label{ display:none; } #heroSwitch button{ padding:6px 9px; font-size:12px; } }
@media print{ #heroSwitch{ display:none; } }

/* ═══════════════════════════════════════════════════════════════
   COMMENT-DRIVEN REFINEMENTS (round 1)
   ═══════════════════════════════════════════════════════════════ */

/* (10) Hand-painted brushstroke under the "See how it works" link */
.dim-more a{
  border-bottom:none !important; position:relative; display:inline-block;
  padding-bottom:14px !important;
}
.dim-more a::after{
  content:''; position:absolute; left:-8%; right:-8%; bottom:0; height:14px;
  background:var(--fp-brush) center/contain no-repeat; opacity:.92;
  transition:transform .3s ease;
}
.dim-more a:hover::after{ transform:scaleX(1.04); }

/* (5) Top nav bar — keep brand default sizing (no slimming) */

/* (1) "Do you wake at peace?" — let it stand alone and land as a pause.
   Generous silence above and below so the reader truly stops on it. */
.invitation{ padding-top:13rem !important; padding-bottom:0 !important; }
.inv-head{
  font-size:clamp(34px,6vw,58px) !important; line-height:1.12 !important;
  margin-bottom:5rem !important; text-wrap:balance;
}
@media(max-width:680px){
  .invitation{ padding-top:8rem !important; padding-bottom:7.5rem !important; }
  .inv-head{ margin-bottom:3.4rem !important; }
}

/* The invitation unfolds as ONE sequence, top to bottom, so nothing
   below can be read ahead of the "Come in" lines. Each line stays
   hidden until its turn. */
@media(prefers-reduced-motion:no-preference){
  .invitation .inv-come p,
  .invitation .inv-breathe,
  .invitation .inv-not,
  .invitation .inv-holds,
  .invitation .inv-fix,
  .invitation .inv-quote{
    opacity:0; transform:translateY(16px);
    transition:opacity 1.4s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
  }
  .invitation.emerged .inv-come p,
  .invitation.emerged .inv-breathe,
  .invitation.emerged .inv-not,
  .invitation.emerged .inv-holds,
  .invitation.emerged .inv-fix,
  .invitation.emerged .inv-quote{ opacity:1; transform:none; }

  /* the spoken "Come in" lines linger — slow fade, real beats (tightened) */
  .invitation.emerged .inv-come p{ transition-duration:1.8s; }
  .invitation.emerged .inv-come p:nth-child(1){ transition-delay:.2s; }
  .invitation.emerged .inv-come p:nth-child(2){ transition-delay:1.5s; }
  .invitation.emerged .inv-come p:nth-child(3){ transition-delay:2.7s; }

  /* the rest follows in reading order, a touch quicker */
  .invitation.emerged .inv-breathe{ transition-delay:4.0s; }
  .invitation.emerged .inv-breathe-2{ transition-delay:4.8s; }
  .invitation.emerged .inv-not{ transition-delay:5.7s; }
  .invitation.emerged .inv-holds{ transition-delay:6.5s; }
  .invitation.emerged .inv-fix{ transition-delay:7.3s; }
  .invitation.emerged .inv-quote{ transition-delay:8.1s; }
}

/* (6) Invitation body: explanatory lines in calm Mulish; the spoken
   "Come in" lines return to Optima italic (set below). */
.invitation .inv-breathe,
.invitation .inv-not,
.invitation .inv-holds,
.invitation .inv-fix{
  font-family:'Mulish',sans-serif !important;
  font-style:normal !important;
  font-size:clamp(17px,2.2vw,20px) !important;
  line-height:1.75 !important;
  letter-spacing:.004em !important;
  max-width:600px !important; margin-left:auto !important; margin-right:auto !important;
}
.invitation .inv-come p{
  font-family:var(--fp-serif) !important; font-style:italic !important; font-weight:400 !important;
  font-size:clamp(20px,2.5vw,27px) !important; line-height:1.34 !important;
  color:var(--fp-teal) !important; margin:.5rem auto !important;
  max-width:760px !important;
}
.invitation .inv-breathe{ color:var(--fp-teal-soft); font-weight:500; margin:.2rem auto !important; }
.invitation .inv-breathe{ margin-top:2.4rem !important; }
.invitation .inv-breathe-2{ margin-top:.2rem !important; margin-bottom:2.4rem !important; }

/* "Breathe." gently breathes — a slow, calm swell once it has emerged */
@media(prefers-reduced-motion:no-preference){
  .invitation.emerged .inv-breathe-2{
    animation:breatheWord 5.5s ease-in-out 6.5s infinite;
    transform-origin:center;
  }
  @keyframes breatheWord{
    0%,100%{ transform:scale(1); opacity:.78; letter-spacing:.004em; }
    50%{ transform:scale(1.07); opacity:1; letter-spacing:.05em; }
  }
}
.invitation .inv-not{ color:var(--fp-teal); font-weight:700; margin:0 auto 2rem !important; }
.invitation .inv-holds,
.invitation .inv-fix{ color:#4a5d5d; font-weight:400; margin:0 auto 1.6rem !important; }

/* (2) Mary Oliver quote — dusty blue-gray band, matching Bayo */
.invitation .inv-quote{
  position:relative;
  background:linear-gradient(158deg, #C3D4DB 0%, #9FB4BE 46%, #8AA1AC 100%) !important;
  border:none !important; border-radius:0 !important;
  width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  max-width:100vw !important;
  padding:clamp(2rem,3.4vw,3rem) clamp(1.4rem,5vw,3rem) !important;
  margin-top:6rem !important; margin-bottom:0 !important;
  font-size:clamp(22px,3vw,31px) !important; line-height:1.4 !important;
  color:#fff !important; font-style:italic;
}
.invitation .inv-quote::before{ display:none !important; }
/* soft breathing glow behind the Mary Oliver quote */
.invitation .inv-quote{ overflow:hidden; isolation:isolate; }
.invitation .inv-quote::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(640px,92%); height:130%;
  background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(232,243,248,.5) 0%, rgba(210,228,236,.18) 42%, transparent 72%);
  z-index:-1; pointer-events:none;
  animation:quoteGlow 9s ease-in-out infinite;
}
.invitation .inv-quote cite{
  display:block; margin-top:1rem !important;
  font-family:'Mulish',sans-serif; font-style:normal;
  font-size:13px !important; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.82) !important;
}

/* (3) widow fix — keep "and growth." from dangling alone */
.platform .lead{ text-wrap:pretty; }

/* (9) "You belong here." — joins the line above, in terracotta, as the payoff */
.mirror .closer{ text-wrap:balance; }
.mirror .closer .belong{
  display:inline !important; margin:0 !important;
  font-family:var(--fp-serif) !important; font-style:normal !important; font-weight:600 !important;
  font-size:inherit !important; color:var(--fp-terra) !important;
  white-space:nowrap;
}

/* (7) "What We Are" lead — widen the measure and balance the lines so the
   text uses more of the page and no single word is orphaned. */
.platform .lead,
.platform .nots{
  max-width:760px !important;
  text-wrap:balance;
}
/* tighten the cavernous gap between "What We Are" and "You belong here if…" */
.platform{ padding-bottom:4rem !important; }
.mirror{ padding-top:4.5rem !important; }

/* ═══════════════════════════════════════════════════════════════
   (8) PAGE-WIDE WIDTH HIERARCHY
   Large type runs wider; long prose holds a comfortable measure;
   everything balances so no single word is orphaned.
   ═══════════════════════════════════════════════════════════════ */

/* Section headlines & big statement lines breathe wide */
.platform h2, .mirror h2, .insidejob h2, .timeline h2,
.dimensions .big{
  max-width:900px !important;
  margin-left:auto !important; margin-right:auto !important;
  text-wrap:balance;
}
/* The Problem headline is emotional & short — keep it tighter but balanced */
.problem h2{ max-width:640px !important; text-wrap:balance; }
/* Short feature/definition lines — balance, don't stretch */
.definition .def-body, .dimensions .sub,
.insidejob .here, .platform .medicine{ text-wrap:balance; }

/* Long-form prose sits at a comfortable, readable measure (~720px) */
.insidejob p,
.dim .desc, .wayfinder-box .desc,
.mirror li, .mirror .closer,
.inv-holds, .inv-fix{
  max-width:720px !important;
  margin-left:auto !important; margin-right:auto !important;
  text-wrap:pretty;
}

/* (4) "You belong here." — tighten to read as the payoff of the line above */
.mirror .belong{ margin-top:.6rem !important; text-wrap:nowrap; }

/* Aurora hero — make sure the dark brand logo shows (beats the earlier logo-swap rule) */
body[data-hero="aurora"] .banner-symbol{ display:block !important; }
body[data-hero="aurora"] .banner-symbol-white{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAVIGATION — hamburger menu (added 2026-06-15)
   Collapses the homepage header nav AND the per-section page-navs
   into one fixed hamburger + full-screen overlay at ≤680px.
   Desktop layout is untouched. Menu links reuse the existing
   #top / #how-it-works / #our-story / #join hrefs, so the page's
   own showPage() click-delegation drives section switching as-is.
   ═══════════════════════════════════════════════════════════════ */
.fp-burger{
  display:none;                       /* shown only on mobile (media query below) */
  position:fixed; top:14px; right:16px; z-index:1001;
  width:46px; height:46px; padding:0; margin:0;
  border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,252,250,.9);
  box-shadow:0 6px 20px -6px rgba(15,51,51,.45);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
.fp-burger .fp-burger-box{ position:relative; display:block; width:22px; height:14px; }
.fp-burger .fp-burger-box i{
  position:absolute; left:0; display:block; width:100%; height:2px; border-radius:2px;
  background:#0F3333;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s ease, top .3s ease;
}
.fp-burger .fp-burger-box i:nth-child(1){ top:0; }
.fp-burger .fp-burger-box i:nth-child(2){ top:6px; }
.fp-burger .fp-burger-box i:nth-child(3){ top:12px; }
.fp-burger[aria-expanded="true"] .fp-burger-box i:nth-child(1){ top:6px; transform:rotate(45deg); }
.fp-burger[aria-expanded="true"] .fp-burger-box i:nth-child(2){ opacity:0; }
.fp-burger[aria-expanded="true"] .fp-burger-box i:nth-child(3){ top:6px; transform:rotate(-45deg); }

.fp-mobile-menu{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  background:rgba(255,252,250,.985);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .34s ease, transform .34s ease, visibility 0s linear .34s;
}
.fp-mobile-menu.open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .34s ease, transform .34s ease, visibility 0s;
}
.fp-mobile-menu a{
  font-family:'Mulish',-apple-system,sans-serif; font-weight:500;
  font-size:22px; letter-spacing:.02em;
  color:#1B4D5A; text-decoration:none;       /* teal-soft, matches desktop nav links */
  padding:.85rem 1.4rem; opacity:.9;
  transition:opacity .2s ease, color .2s ease;
}
.fp-mobile-menu a:hover, .fp-mobile-menu a:focus-visible{ opacity:1; color:#0F3333; }
.fp-mobile-menu a.cta{ color:#0F3333; font-weight:600; margin-top:1rem; }

body.fp-menu-open{ overflow:hidden; }        /* lock scroll while the overlay is open */

@media(max-width:680px){
  .fp-burger{ display:flex; }
  header.hero-nav > nav{ display:none; }      /* hide inline homepage links (logo-mini kept) */
  .page-section .page-header{ display:none; } /* hide per-section nav bars */
}