/* ============================================================
   REEFORMER PILATES — site.css
   Tokens + components. See design-system/reeformer-pilates/MASTER.md
   ============================================================ */

:root{
  /* Brand Identity Kit v1.2 — October 2026 */
  --gold:#B38642;             /* #B38642  accents, eyebrows, rules */
  --reef:#1F7A99;             /* #1F7A99  primary blue */
  --deep:#0F3B4C;             /* #0F3B4C  darkest ground, headlines */
  --foam:#EAF3F4;             /* #EAF3F4  pale blue ground */
  --shell:#FAF6E8;            /* #FAF6E8  warm cream ground */

  /* Derived grounds */
  --deep-2:#0A2B38;           /* a step below deep, for depth */
  --reef-2:#2A8FB0;
  --sand:#F0E6CE;             /* shell, one step warmer */
  --paper:#FFFFFF;

  /* Ink */
  --ink:#1A2E38;              /* body text on light */
  --ink-soft:#4A6270;         /* secondary text on light */
  --ink-dim:#6E8591;          /* captions, sources */
  --on-deep:#F2F7F8;          /* body text on deep blue */
  --on-deep-soft:#AFCBD6;     /* secondary text on deep blue */
  --gold-ink:#8A6327;         /* gold dark enough for text on cream */
  --reef-ink:#176479;         /* reef blue dark enough for text on cream */

  /* Lines */
  --line:rgba(15,59,76,.14);
  --line-strong:rgba(15,59,76,.26);
  --line-deep:rgba(242,247,248,.18);

  /* Legacy aliases, so older pages keep rendering */
  --tide:#1F7A99; --lagoon:#7FB6C6; --cacao:#1A2E38;
  --shell-2:#F2ECDA; --aubergine:#0F3B4C; --tide-ink:#176479;

  /* Type */
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --serif:'Libre Baskerville',ui-serif,Georgia,'Times New Roman',serif;

  /* Space */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
  --sec:clamp(72px,12vw,144px);
  --wrap:min(1180px,100% - 44px);
  --wrap-narrow:min(760px,100% - 44px);

  /* Motion */
  --ease:cubic-bezier(.16,.84,.44,1);
  --nav-h:72px;
  --bar-h:0px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--shell);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tide);outline-offset:3px;border-radius:4px}

/* ---------- Layout ---------- */
.wrap{width:var(--wrap);margin-inline:auto}
.wrap-narrow{width:var(--wrap-narrow);margin-inline:auto}
.sec{padding-block:var(--sec);position:relative}
.sec-sm{padding-block:clamp(52px,8vw,88px)}
.center{text-align:center}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.055'/></svg>");
}

/* Grounds */
.g-shell{background:var(--shell)}
.g-shell2{background:var(--shell-2)}
.g-sand{background:var(--sand)}
.g-deep{background:var(--deep);color:var(--on-deep)}
.g-deep2{background:var(--deep-2);color:var(--on-deep)}
.g-deep h1,.g-deep h2,.g-deep h3,.g-deep2 h1,.g-deep2 h2,.g-deep2 h3{color:var(--shell)}
.g-deep .lead,.g-deep2 .lead{color:var(--on-deep-soft)}
.g-deep .rule,.g-deep2 .rule{background:var(--line-deep)}

/* Warm light-leak, used on deep grounds */
.leak{position:relative;isolation:isolate}
.leak::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 15% 0%,rgba(180,154,106,.22),transparent 70%),
    radial-gradient(50% 45% at 92% 88%,rgba(127,182,198,.16),transparent 72%);
}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0;font-weight:500;color:var(--deep);letter-spacing:-.01em;text-wrap:balance}
.display{
  font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.018em;
  font-size:clamp(40px,8.6vw,88px);
}
.display-sm{
  font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:-.015em;
  font-size:clamp(32px,5.6vw,58px);
}
.display em,.display-sm em{font-style:italic;color:var(--tide)}
.g-deep .display em,.g-deep2 .display em,.g-deep .display-sm em,.g-deep2 .display-sm em{color:var(--lagoon)}
h2.h{font-size:clamp(26px,4.4vw,40px);font-weight:600;line-height:1.14;letter-spacing:-.022em}
h3.h{font-size:clamp(20px,2.6vw,25px);font-weight:600;line-height:1.24;letter-spacing:-.018em}

.label{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 var(--s2)
}
.g-deep .label,.g-deep2 .label{color:var(--gold)}
.label-tide{color:var(--tide)}
.lead{font-size:clamp(17px,2.1vw,19.5px);line-height:1.62;color:var(--ink-soft);max-width:60ch}
.lead-lg{font-size:clamp(19px,2.6vw,23px);line-height:1.5;color:var(--ink-soft);max-width:34ch}
.small{font-size:14.5px;line-height:1.55;color:var(--ink-dim)}
.g-deep .small,.g-deep2 .small{color:var(--on-deep-soft)}
.rule{height:1px;background:var(--line);border:0;margin:var(--s4) 0}
.mx-auto{margin-inline:auto}
.stack>*+*{margin-top:var(--s3)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:15px 30px;border-radius:100px;border:1px solid transparent;
  font-weight:600;font-size:16px;letter-spacing:-.01em;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--deep);color:var(--shell)}
.btn-primary:hover{background:var(--tide)}
.btn-ghost{background:transparent;color:var(--deep);border-color:rgba(15,59,76,.3)}
.btn-ghost:hover{border-color:var(--deep);background:rgba(15,59,76,.05)}
.g-deep .btn-ghost,.g-deep2 .btn-ghost{color:var(--shell);border-color:rgba(242,247,248,.36)}
.g-deep .btn-ghost:hover,.g-deep2 .btn-ghost:hover{background:rgba(242,247,248,.1);border-color:var(--shell)}
.btn-light{background:var(--shell);color:var(--deep)}
.btn-light:hover{background:var(--lagoon);color:var(--deep-2)}
.btn-gold{background:var(--gold);color:#241C16}
.btn-gold:hover{background:#C2AA7E}
.btn-sm{min-height:44px;padding:11px 22px;font-size:15px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btns.center{justify-content:center}
.arrow{transition:transform .22s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

.tlink{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--tide);
  border-bottom:1px solid rgba(31,122,153,.35);padding-bottom:2px;transition:border-color .2s,color .2s
}
.tlink:hover{border-color:var(--tide)}
.g-deep .tlink,.g-deep2 .tlink{color:var(--lagoon);border-color:rgba(127,182,198,.4)}

/* ---------- Announcement bar ---------- */
.bar{
  background:var(--deep-2);color:var(--on-deep);font-size:13.5px;letter-spacing:.01em;
  text-align:center;padding:9px 16px;position:relative;z-index:60
}
.bar b{color:var(--lagoon);font-weight:600}
.bar a{border-bottom:1px solid rgba(127,182,198,.45)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(245,239,230,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s
}
.nav.scrolled{border-color:var(--line);background:rgba(245,239,230,.95)}
.nav-in{display:flex;align-items:center;gap:var(--s3);height:var(--nav-h)}
.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.brand-mark{font-size:25px;font-weight:600;letter-spacing:-.035em;color:var(--deep)}
.brand-sub{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:var(--s3)}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink);padding:6px 0;position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--tide);
  transition:right .28s var(--ease)
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.burger span{display:block;width:20px;height:1.5px;background:var(--deep);position:relative;transition:transform .25s,background .25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--deep);transition:transform .25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none;border-top:1px solid var(--line);padding:var(--s3) 0 var(--s4)}
.nav.open .mobile-menu{display:block}
.mobile-menu a{display:block;padding:13px 0;font-size:19px;font-weight:500;border-bottom:1px solid var(--line)}
.mobile-menu .btns{margin-top:var(--s3)}
.mobile-menu .btn{width:100%}

@media(max-width:900px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .burger{display:flex}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(580px,84svh,820px);display:flex;align-items:flex-end;overflow:hidden;background:var(--deep-2)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%;transform:scale(1.06);will-change:transform}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(10,43,56,.94) 0%,rgba(10,43,56,.6) 34%,rgba(10,43,56,.2) 66%,rgba(10,43,56,.5) 100%),
    linear-gradient(100deg,rgba(10,43,56,.84) 0%,rgba(10,43,56,.6) 32%,rgba(10,43,56,.18) 62%,rgba(10,43,56,0) 82%),
    radial-gradient(75% 60% at 45% 100%,rgba(10,43,56,.45),transparent 72%);
}
.hero-in{position:relative;z-index:2;width:var(--wrap);margin-inline:auto;padding-block:clamp(44px,7vw,78px);color:var(--shell)}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lagoon);margin-bottom:var(--s3);
  text-shadow:0 1px 14px rgba(10,43,56,.6)
}
.hero .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
.hero h1{color:var(--shell);max-width:17ch;font-size:clamp(38px,6.6vw,74px)}
.hero h1 em{color:var(--lagoon)}
.hero .lead-lg{color:rgba(242,247,248,.9);margin-top:var(--s3);max-width:42ch;text-shadow:0 1px 18px rgba(10,43,56,.45)}
.hero .btns{margin-top:clamp(26px,3.2vw,38px)}
.hero-foot{
  margin-top:clamp(28px,4vw,46px);padding-top:var(--s3);border-top:1px solid rgba(242,247,248,.18);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5)
}
.hero-foot div{min-width:0}
.hero-foot .k{font-size:clamp(24px,3.4vw,32px);font-weight:600;letter-spacing:-.03em;color:var(--shell);line-height:1}
.hero-foot .v{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,247,248,.6);margin-top:7px}
.scroll-cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,247,248,.5);
  display:flex;flex-direction:column;align-items:center;gap:8px
}
.scroll-cue i{display:block;width:1px;height:26px;background:linear-gradient(to bottom,rgba(242,247,248,.6),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--shell-2);padding-block:16px}
.g-deep .marquee{border-color:var(--line-deep);background:transparent}
.marquee-track{display:flex;gap:var(--s5);width:max-content;animation:slide 34s linear infinite}
.marquee span{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;display:flex;align-items:center;gap:var(--s5)}
.marquee span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Split / feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.wide-left{grid-template-columns:1.08fr .92fr}
.split-media{position:relative}
.arch{border-radius:1000px 1000px 18px 18px;overflow:hidden;background:var(--sand)}
.arch img{width:100%;aspect-ratio:3/4;object-fit:cover}
.frame{border-radius:18px;overflow:hidden;background:var(--sand)}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.frame-wide img{aspect-ratio:16/10}
@media(max-width:820px){.split,.split.wide-left{grid-template-columns:1fr;gap:var(--s4)}}

/* ---------- Cards ---------- */
.grid{display:grid;gap:var(--s3)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--shell);border:1px solid var(--line);border-radius:18px;padding:var(--s4) var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);transition:border-color .25s,transform .25s var(--ease),box-shadow .25s
}
.card:hover{border-color:rgba(31,122,153,.45);transform:translateY(-2px);box-shadow:0 12px 34px -20px rgba(15,59,76,.35)}
.g-deep .card,.g-deep2 .card{background:rgba(242,247,248,.045);border-color:var(--line-deep)}
.g-deep .card:hover,.g-deep2 .card:hover{border-color:rgba(127,182,198,.4);background:rgba(242,247,248,.07)}
.card .n{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500
}
.card p{color:var(--ink-soft);font-size:16px}
.g-deep .card p,.g-deep2 .card p{color:var(--on-deep-soft)}
.card-media{border-radius:18px;overflow:hidden;background:var(--sand);margin:calc(var(--s4) * -1) calc(var(--s3) * -1) 0;border-radius:18px 18px 0 0}
.card-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-pad-top{padding-top:var(--s3);display:flex;flex-direction:column;gap:10px}

/* Numbered steps */
.steps{counter-reset:step;display:grid;gap:var(--s3)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;padding-block:var(--s3);border-top:1px solid var(--line)}
.g-deep .step{border-color:var(--line-deep)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--gold);padding-top:5px
}
.step h3{margin-bottom:6px}

/* ---------- Offer ---------- */
.offer{
  border:1px solid rgba(180,154,106,.5);border-radius:22px;padding:clamp(28px,4.5vw,52px);
  background:linear-gradient(140deg,rgba(180,154,106,.1),rgba(127,182,198,.07));
  position:relative;overflow:hidden
}
.offer-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-block:var(--s2) var(--s3)}
.offer-price .now{font-size:clamp(40px,7vw,64px);font-weight:600;letter-spacing:-.04em;color:var(--deep);line-height:1}
.g-deep .offer-price .now{color:var(--shell)}
.offer-price .was{font-size:20px;color:var(--ink-dim);text-decoration:line-through}
.g-deep .offer-price .was{color:rgba(242,247,248,.5)}
.offer-price .per{font-size:15px;color:var(--ink-soft)}
.g-deep .offer-price .per{color:var(--on-deep-soft)}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:16px;align-items:start}
.ticks svg{margin-top:5px;flex:none;color:var(--tide)}
.g-deep .ticks svg{color:var(--lagoon)}

/* ---------- Pricing ---------- */
.price-card{
  border:1px solid var(--line);border-radius:20px;padding:var(--s4) var(--s3);background:var(--shell);
  display:flex;flex-direction:column;gap:var(--s2)
}
.price-card.featured{border-color:var(--gold);background:linear-gradient(160deg,rgba(180,154,106,.08),transparent 60%)}
.price-card .amt{font-size:clamp(32px,4.6vw,42px);font-weight:600;letter-spacing:-.035em;color:var(--deep);line-height:1}
.price-card .amt small{font-size:15px;font-weight:500;color:var(--ink-dim);letter-spacing:0}
.price-card .btn{margin-top:auto}
.badge{
  display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;border-radius:100px;background:var(--gold);color:#241C16;align-self:flex-start
}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.gallery figure{margin:0;border-radius:16px;overflow:hidden;background:var(--sand);position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{
  position:absolute;left:14px;bottom:12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(10,43,56,.7)
}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}
.gallery figure img{aspect-ratio:4/3}
.gallery .tall img{aspect-ratio:1/2}
@media(max-width:820px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .tall{grid-row:auto}.gallery .tall img{aspect-ratio:4/3}
}

/* ---------- Testimonials ---------- */
.quotes{display:grid;gap:var(--s3);grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{
  border:1px solid var(--line-deep);border-radius:18px;padding:var(--s4) var(--s3);
  background:rgba(242,247,248,.05);position:relative
}
.quote p{font-family:var(--serif);font-size:23px;line-height:1.35;font-weight:300;color:var(--shell)}
.quote .who{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-deep-soft);margin-top:var(--s3)}
.ph-flag{
  position:absolute;top:12px;right:12px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(180,154,106,.9);color:#241C16;padding:4px 8px;border-radius:5px;font-weight:600
}
body:not(.placeholder-mode) .ph-flag{display:none}
.ph-note{display:none}
body.placeholder-mode .ph-note{display:block}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.g-deep .faq{border-color:var(--line-deep)}
.faq details{border-bottom:1px solid var(--line)}
.g-deep .faq details{border-color:var(--line-deep)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--s3) 44px var(--s3) 0;position:relative;
  font-size:clamp(17px,2.2vw,19px);font-weight:600;color:var(--deep);letter-spacing:-.015em
}
.g-deep .faq summary{color:var(--shell)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:1.5px solid var(--tide);border-bottom:1.5px solid var(--tide);
  transform:rotate(45deg);transition:transform .25s var(--ease)
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .a{padding:0 44px var(--s3) 0;color:var(--ink-soft);max-width:70ch}
.g-deep .faq .a{color:var(--on-deep-soft)}

/* ---------- Quiz ---------- */
.quiz{border:1px solid var(--line);border-radius:22px;background:var(--shell);padding:clamp(24px,4vw,44px);position:relative}
.quiz-progress{height:3px;background:var(--line);border-radius:100px;overflow:hidden;margin-bottom:var(--s3)}
.quiz-progress i{display:block;height:100%;background:var(--tide);width:0;transition:width .45s var(--ease)}
.quiz-step{display:none}
.quiz-step.active{display:block;animation:qin .4s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quiz-count{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.quiz h3{margin-bottom:var(--s3)}
.opts{display:grid;gap:10px}
.opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;min-height:56px;
  padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:transparent;cursor:pointer;
  font-size:16.5px;font-weight:500;transition:border-color .2s,background .2s,transform .2s var(--ease)
}
.opt:hover{border-color:var(--tide);background:rgba(31,122,153,.06)}
.opt.sel{border-color:var(--tide);background:rgba(31,122,153,.1)}
.opt .k{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--line);flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--ink-dim);transition:all .2s
}
.opt:hover .k,.opt.sel .k{border-color:var(--tide);color:var(--tide)}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:var(--s4)}
.quiz-back{background:none;border:0;cursor:pointer;color:var(--ink-dim);font-size:15px;font-weight:500;padding:10px 0}
.quiz-back:hover{color:var(--deep)}
.quiz-result{display:none}
.quiz-result.active{display:block;animation:qin .5s var(--ease)}
.field{display:grid;gap:7px;margin-bottom:var(--s2)}
.field label{font-size:13.5px;font-weight:600;color:var(--ink)}
.field input{
  min-height:52px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;
  font:inherit;font-size:16.5px;color:var(--ink);transition:border-color .2s
}
.field input:focus{border-color:var(--tide);outline:none;box-shadow:0 0 0 3px rgba(31,122,153,.16)}
.field .err{font-size:13.5px;color:#A6392F;display:none}
.field.invalid input{border-color:#A6392F}
.field.invalid .err{display:block}

/* ---------- Location ---------- */
.loc{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:820px){.loc{grid-template-columns:1fr}}
.map{border-radius:18px;overflow:hidden;border:1px solid var(--line-deep);background:var(--deep-2);min-height:320px}
.map iframe{width:100%;height:100%;min-height:320px;border:0;display:block;filter:grayscale(.35) sepia(.16) saturate(.9)}

/* ---------- Footer ---------- */
.foot{background:var(--deep-2);color:var(--on-deep-soft);padding-block:var(--s6) var(--s4);font-size:15px}
.foot a:hover{color:var(--lagoon)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s4)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:var(--s2)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot .brand-mark{color:var(--shell);font-size:30px}
.foot-bot{
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line-deep);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;font-size:13.5px
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(245,239,230,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)
}
.sticky-cta.show{transform:none}
.sticky-cta .btn{flex:1;min-height:50px;font-size:15.5px;padding-inline:14px}
@media(max-width:720px){.sticky-cta{display:flex}}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s}
.rv-d4{transition-delay:.24s}.rv-d5{transition-delay:.3s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .hero-media img{transform:none!important}
  .marquee-track{animation:none}
}

/* ---------- Article ---------- */
.article{max-width:none}
.article h2{font-size:clamp(24px,3.4vw,32px);font-weight:600;margin-top:var(--s5);margin-bottom:var(--s2);letter-spacing:-.022em}
.article h3{font-size:clamp(19px,2.4vw,22px);font-weight:600;margin-top:var(--s4);margin-bottom:10px}
.article p,.article li{font-size:17.5px;line-height:1.7;color:var(--ink-soft)}
.article ul,.article ol{padding-left:22px;margin:0 0 1em;display:grid;gap:9px}
.article strong{color:var(--ink);font-weight:600}
.article blockquote{
  margin:var(--s4) 0;padding:var(--s3) 0 var(--s3) var(--s3);border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:25px;line-height:1.35;font-weight:300;color:var(--deep)
}
.meta{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.post-card{display:flex;flex-direction:column;gap:11px;padding:var(--s3) 0;border-top:1px solid var(--line)}
.post-card:hover h3{color:var(--tide)}
.post-card h3{transition:color .2s}

/* ---------- Hero overrides (light type on photography) ---------- */
.hero .btn-ghost{color:var(--shell);border-color:rgba(242,247,248,.5);backdrop-filter:blur(3px)}
.hero .btn-ghost:hover{background:rgba(242,247,248,.14);border-color:var(--shell)}

/* ---------- Small screens ---------- */
@media(max-width:600px){
  body{font-size:16.5px}
  .bar{font-size:12.5px;padding:8px 14px;line-height:1.45}
  .bar .bar-long{display:none}
  .brand-sub{display:none}
  .brand-mark{font-size:23px}
  .nav-cta .btn{padding-inline:20px;font-size:14.5px}
  .hero{min-height:clamp(560px,86svh,760px)}
  .hero h1{max-width:14ch}
  .hero .btns .btn{width:100%}
  .hero-foot{gap:var(--s3) var(--s4)}
  .hero-foot>div{flex:1 1 40%}
  .sticky-cta{display:flex}
}
@media(max-width:720px){
  body{padding-bottom:72px}
}

/* ============================================================
   v2 — funnel homepage: ticker, press, stat, 3D reformer,
   hero carousel, centre sticky CTA
   ============================================================ */

/* ---------- Ticker (fashion-brand strip, used 3x) ---------- */
.ticker{overflow:hidden;padding-block:13px;border-block:1px solid var(--line);background:var(--shell-2)}
.ticker.t-deep{background:var(--deep-2);border-color:var(--line-deep)}
.ticker.t-gold{background:var(--gold);border-color:transparent}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-seq{display:flex;align-items:center;gap:36px;padding-right:36px}
.ticker i{font-style:normal;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;display:inline-flex;align-items:center;gap:36px}
.ticker i::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}
.ticker i.hot{color:var(--deep);font-weight:700}
.ticker.t-deep i{color:var(--on-deep-soft)}
.ticker.t-deep i.hot{color:var(--lagoon);font-weight:700}
.ticker.t-gold i{color:#2C2117}
.ticker.t-gold i::after{background:rgba(44,33,23,.55)}
.ticker.t-gold i.hot{color:#1C140D;font-weight:700}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- Hero carousel ---------- */
.hero-media .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero-media .slide.on{opacity:1}
.hero-media .slide img{width:100%;height:100%;object-fit:cover;object-position:center 58%;transform:scale(1.06)}
.hero-dots{position:absolute;right:max(22px,calc((100vw - 1180px)/2));bottom:26px;z-index:4;display:flex;gap:8px}
.hero-dots button{
  width:26px;height:3px;border:0;padding:0;border-radius:100px;background:rgba(242,247,248,.32);cursor:pointer;
  transition:background .3s
}
.hero-dots button[aria-current="true"]{background:var(--shell)}
.hero-dots button::after{content:"";position:absolute;inset:-14px -4px}
.hero-dots{align-items:center}
.hero-dots button{position:relative}
@media(max-width:720px){.hero-dots{display:none}}

.hero-proof{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px;
  font-size:13.5px;color:rgba(242,247,248,.8)
}
.hero-proof span{display:inline-flex;align-items:center;gap:8px}
.hero-proof svg{color:var(--lagoon);flex:none}

/* ---------- Press strip ---------- */
.press{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media(max-width:900px){.press{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.press{grid-template-columns:1fr}}
.press a{
  display:flex;flex-direction:column;gap:9px;padding:var(--s3) 0;border-top:1px solid var(--line);
  transition:border-color .25s
}
.press a:hover{border-color:var(--tide)}
.press .src{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.press .hl{font-family:var(--serif);font-size:21px;line-height:1.24;font-weight:400;color:var(--deep)}
.press a:hover .hl{color:var(--tide)}
.press .go{font-size:12.5px;color:var(--ink-dim)}
.disclaim{
  font-size:13.5px;color:var(--ink-dim);border-left:2px solid var(--gold);padding-left:14px;max-width:62ch
}

/* ---------- Big stat ---------- */
.stat{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
@media(max-width:820px){.stat{grid-template-columns:1fr;gap:var(--s3)}}
.stat .big{
  font-size:clamp(88px,20vw,220px);font-weight:700;letter-spacing:-.06em;line-height:.82;
  color:var(--shell);font-variant-numeric:tabular-nums
}
.stat .big sup{font-size:.36em;font-weight:600;letter-spacing:-.02em;top:-.72em;position:relative}
.cite{font-size:12.5px;color:var(--on-deep-soft);margin-top:14px}
.cite a{border-bottom:1px solid rgba(127,182,198,.4);color:var(--lagoon)}

/* ---------- 3D reformer ---------- */
.r3d-wrap{display:grid;grid-template-columns:1fr 360px;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:960px){.r3d-wrap{grid-template-columns:1fr}}
.r3d-stage{
  position:relative;height:clamp(330px,44vw,470px);perspective:1500px;perspective-origin:50% 45%;
  display:grid;place-items:center;overflow:hidden
}
.r3d{position:relative;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(-16deg) rotateY(-32deg) scale(var(--rs,1));will-change:transform}
.bx{position:absolute;transform-style:preserve-3d}
.bx .f{position:absolute;left:0;top:0;background:var(--c,#B08E64);backface-visibility:hidden}
.bx .f.t{filter:brightness(1.22)}
.bx .f.bo{filter:brightness(.6)}
.bx .f.l,.bx .f.r{filter:brightness(.82)}
.bx .f.bk{filter:brightness(.7)}
.r3d-hot{
  position:absolute;z-index:3;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--lagoon);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none;white-space:nowrap
}
.r3d-hot::before{content:"";position:absolute;left:-26px;top:50%;width:20px;height:1px;background:var(--lagoon)}
.r3d-hot.on{opacity:1;transform:none}
.r3d-steps{display:grid;gap:2px}
.r3d-step{padding:16px 0 16px 20px;border-left:2px solid var(--line-deep);transition:border-color .35s,opacity .35s;opacity:.4}
.r3d-step.on{border-color:var(--gold);opacity:1}
.r3d-step h3{font-size:18px;font-weight:600;color:var(--shell);margin-bottom:5px;letter-spacing:-.015em}
.r3d-step p{font-size:14.5px;color:var(--on-deep-soft);margin:0}
.r3d-hint{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-deep-soft);opacity:.6;text-align:center;margin-top:10px}

/* ---------- Claim rows ---------- */
.claim{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;
  padding:clamp(20px,3vw,30px) 0;border-top:1px solid var(--line)
}
.claim:last-child{border-bottom:1px solid var(--line)}
.g-deep .claim,.g-deep2 .claim{border-color:var(--line-deep)}
.claim .no{font-size:11.5px;letter-spacing:.14em;color:var(--gold);font-weight:600}
.claim h3{font-size:clamp(21px,3.2vw,30px);font-weight:600;letter-spacing:-.022em;line-height:1.16}
.claim .cta{white-space:nowrap}
@media(max-width:720px){
  .claim{grid-template-columns:1fr;gap:12px}
  .claim .cta .btn{width:100%}
}

/* ---------- Sticky centre CTA (all breakpoints) ---------- */
.dock{
  position:fixed;left:50%;bottom:20px;transform:translate(-50%,160%);z-index:58;
  display:flex;align-items:center;gap:10px;padding:9px 9px 9px 20px;border-radius:100px;
  background:rgba(10,43,56,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(242,247,248,.16);box-shadow:0 18px 44px -18px rgba(10,43,56,.6);
  transition:transform .4s var(--ease);max-width:calc(100vw - 28px)
}
.dock.show{transform:translate(-50%,0)}
.dock .msg{font-size:13.5px;color:var(--on-deep-soft);white-space:nowrap}
.dock .msg b{color:var(--lagoon);font-weight:600}
.dock .btn{min-height:44px;padding:11px 22px;font-size:15px}
@media(max-width:720px){
  .dock{left:12px;right:12px;bottom:12px;transform:translateY(160%);padding:8px 8px 8px 8px;gap:8px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .dock.show{transform:none}
  .dock .msg{display:none}
  .dock .btn{flex:1;padding-inline:12px;font-size:15px}
  .dock .btn-ghost{flex:0 0 auto}
}
.sticky-cta{display:none!important}

.dock .btn-ghost{color:var(--shell);border-color:rgba(242,247,248,.38)}
.dock .btn-ghost:hover{background:rgba(242,247,248,.12);border-color:var(--shell)}

/* ============================================================
   v3 — offer card, logo wall, chart, steps, video reviews,
   scarcity counter, mobile tightening
   ============================================================ */

/* ---------- Hero offer card ---------- */
.hero-in{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);align-items:end}
.hero-copy{min-width:0}
.offer-card{
  width:min(360px,100%);background:rgba(245,239,230,.96);color:var(--ink);
  border-radius:22px;padding:26px 24px;box-shadow:0 26px 60px -26px rgba(10,43,56,.75);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.offer-card .kicker{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#7A5F2E;
  background:rgba(180,154,106,.28);display:inline-block;padding:5px 10px;border-radius:100px
}
.offer-card h2{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--deep);margin:14px 0 2px}
.offer-card .pr{display:flex;align-items:baseline;gap:9px;margin:10px 0 14px}
.offer-card .pr .now{font-size:46px;font-weight:700;letter-spacing:-.045em;color:var(--deep);line-height:1}
.offer-card .pr .was{font-size:17px;color:var(--ink-dim);text-decoration:line-through}
.offer-card .pr .per{font-size:13.5px;color:var(--ink-soft)}
.offer-card ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.offer-card li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:14.5px;align-items:start;color:var(--ink-soft)}
.offer-card li svg{margin-top:4px;color:var(--tide);flex:none}
.offer-card .btn{width:100%}
.offer-card .fine{font-size:12px;color:var(--ink-dim);margin-top:11px;text-align:center}
@media(max-width:1080px){
  .hero-in{grid-template-columns:1fr;align-items:start}
  .offer-card{width:100%;max-width:460px}
}

/* ---------- Scarcity / founding places ---------- */
.places{margin:16px 0 0;font-size:13px;color:var(--ink-soft)}
.places .bar-track{height:6px;border-radius:100px;background:rgba(26,46,56,.12);overflow:hidden;margin:7px 0 6px}
.places .bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--tide),var(--gold));width:0;transition:width 1.4s var(--ease)}
.places b{color:var(--deep);font-weight:700}

/* ---------- Logo wall ---------- */
.logowall{overflow:hidden;padding-block:clamp(16px,2.4vw,26px);position:relative}
.logowall::before,.logowall::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none
}
.logowall::before{left:0;background:linear-gradient(90deg,var(--shell),transparent)}
.logowall::after{right:0;background:linear-gradient(270deg,var(--shell),transparent)}
.g-shell2 .logowall::before{background:linear-gradient(90deg,var(--shell-2),transparent)}
.g-shell2 .logowall::after{background:linear-gradient(270deg,var(--shell-2),transparent)}
.logowall-track{display:flex;width:max-content;animation:tick 44s linear infinite}
.logowall:hover .logowall-track{animation-play-state:paused}
.logowall-seq{display:flex;align-items:center;gap:clamp(36px,5vw,72px);padding-right:clamp(36px,5vw,72px)}
.wm{
  font-size:clamp(20px,2.8vw,32px);font-weight:700;letter-spacing:-.03em;color:var(--deep);
  white-space:nowrap;opacity:.72;transition:opacity .25s
}
.logowall:hover .wm{opacity:.42}
.logowall .wm:hover{opacity:1}
.wm.serif{font-family:var(--serif);font-weight:400;letter-spacing:.01em;font-size:clamp(23px,3.2vw,38px)}
.wm.caps{font-size:clamp(16px,2.1vw,23px);letter-spacing:.18em;text-transform:uppercase;font-weight:600}
@media(prefers-reduced-motion:reduce){.logowall-track{animation:none}}

/* ---------- Chart ---------- */
.chart-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.chart-wrap{grid-template-columns:1fr;gap:var(--s4)}}
.chart{
  position:relative;border:1px solid var(--line-deep);border-radius:20px;padding:clamp(20px,3vw,32px);
  background:rgba(242,247,248,.04)
}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px}
.chart-head .t{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-deep-soft)}
.chart-head .n{font-size:clamp(34px,5vw,50px);font-weight:700;letter-spacing:-.04em;color:var(--lagoon);line-height:1;font-variant-numeric:tabular-nums}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,44px);align-items:end;height:clamp(150px,22vw,210px)}
.bar-col{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:10px}
.bar-col .v{
  width:100%;border-radius:10px 10px 4px 4px;height:0;transition:height 1.1s var(--ease);
  background:linear-gradient(180deg,rgba(127,182,198,.35),rgba(31,122,153,.22));border:1px solid rgba(127,182,198,.4)
}
.bar-col.hot .v{background:linear-gradient(180deg,var(--lagoon),var(--tide));border-color:var(--lagoon)}
.bar-col .lbl{font-size:12.5px;color:var(--on-deep-soft);text-align:center}
.bar-col .num{font-size:14px;font-weight:700;color:var(--shell);text-align:center;font-variant-numeric:tabular-nums}
.chart-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-deep);font-size:12px;color:var(--on-deep-soft)}
.chart-foot a{color:var(--lagoon);border-bottom:1px solid rgba(127,182,198,.4)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pill{
  font-size:12px;letter-spacing:.06em;padding:7px 13px;border-radius:100px;
  border:1px solid rgba(127,182,198,.35);color:var(--lagoon)
}

/* ---------- Step-by-step ---------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
@media(max-width:1000px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}
.flow-step{
  border:1px solid var(--line);border-radius:18px;padding:22px 20px;background:var(--shell);
  display:flex;flex-direction:column;gap:9px;position:relative;transition:border-color .25s,transform .25s var(--ease)
}
.flow-step:hover{border-color:rgba(31,122,153,.45);transform:translateY(-2px)}
.flow-step .s{
  width:30px;height:30px;border-radius:50%;background:var(--deep);color:var(--shell);
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:none
}
.flow-step.final .s{background:var(--gold);color:#241C16}
.flow-step h3{font-size:18px;font-weight:600;letter-spacing:-.018em}
.flow-step p{font-size:14.5px;color:var(--ink-soft);margin:0}
.flow-step a{font-size:14px;color:var(--tide);font-weight:600}

/* ---------- Horizontal scroller (mobile) ---------- */
.hscroll{display:grid;gap:var(--s3)}
@media(max-width:820px){
  .hscroll{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(50% - 50vw);padding:2px 22px 14px;scrollbar-width:none
  }
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll>*{flex:0 0 78%;scroll-snap-align:center;min-width:0}
}

/* ---------- Video reviews ---------- */
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
@media(max-width:1000px){.vids{grid-template-columns:repeat(2,1fr)}}
.vid{
  position:relative;border-radius:18px;overflow:hidden;background:var(--deep-2);aspect-ratio:9/16;
  border:1px solid var(--line-deep);display:block
}
.vid video,.vid img{width:100%;height:100%;object-fit:cover;display:block}
.vid .empty{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;
  background:linear-gradient(170deg,rgba(31,122,153,.18),rgba(15,59,76,.6))
}
.vid .empty span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-deep-soft);line-height:1.6}
.vid .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;
  background:rgba(245,239,230,.92);display:grid;place-items:center;pointer-events:none;
  box-shadow:0 8px 26px -10px rgba(10,43,56,.7)
}
.vid .play svg{color:var(--deep);margin-left:3px}
.vid .cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 14px 13px;
  background:linear-gradient(to top,rgba(10,43,56,.9),transparent);
  font-size:13px;color:var(--shell);font-weight:600
}
.vid .cap small{display:block;font-weight:400;font-size:11.5px;color:rgba(242,247,248,.7);margin-top:2px}

/* ============================================================
   MOBILE TIGHTENING
   ============================================================ */
@media(max-width:720px){
  /* ticker off at the very top on phones */
  body>.ticker:first-of-type{display:none}
  /* no booking button in the top bar — it lives in the dock instead */
  .nav-cta .btn{display:none}
  .nav-in{height:60px}
  /* hero: no address line, no big stat row */
  .hero .eyebrow{display:none}
  .hero-foot{display:none}
  .hero{min-height:auto;padding-top:26px}
  .hero-in{padding-block:26px 30px;gap:22px}
  .hero h1{font-size:clamp(34px,9.2vw,46px);max-width:none}
  .hero .lead-lg{font-size:17px;margin-top:14px}
  .hero .btns{margin-top:22px}
  .hero-proof{gap:8px 14px;font-size:12.5px;margin-top:18px}
  .scroll-cue{display:none}
  /* smaller media everywhere */
  .arch img{aspect-ratio:1/1}
  .frame img,.frame-wide img{aspect-ratio:3/2}
  .card-media img{aspect-ratio:16/10}
  .gallery figure img,.gallery .tall img{aspect-ratio:3/2}
  .map,.map iframe{min-height:230px}
  .vids{grid-template-columns:repeat(2,1fr);gap:10px}
  /* tighter type rhythm */
  .sec{padding-block:clamp(48px,10vw,72px)}
  .lead{font-size:16.5px}
  .split{gap:26px}
}
@media(max-width:520px){
  .hero .btns .btn{width:100%}
  .offer-card{padding:22px 18px}
  .offer-card .pr .now{font-size:40px}
}

/* reformer: tight on mobile, copy right under it */
@media(max-width:960px){
  .r3d-wrap{gap:18px}
  .r3d-stage{height:clamp(210px,52vw,300px)}
  .r3d-hint{margin-top:2px}
  .r3d-steps{gap:0}
  .r3d-step{padding:12px 0 12px 16px}
  .r3d-step h3{font-size:16.5px}
  .r3d-step p{font-size:14px}
}

/* reformer: coil texture on the springs */
.bx.spring .f{
  background-image:repeating-linear-gradient(90deg,
    rgba(0,0,0,.55) 0 1.6px, rgba(255,255,255,.28) 1.6px 2.6px, transparent 2.6px var(--coil,7px));
}
.bx.spring .f.t{filter:brightness(1.35)}
.vid.playing .play,.vid.playing .cap{opacity:0;transition:opacity .25s}

/* hero headline sits beside the offer card — keep it to three lines */
@media(min-width:1081px){
  .hero-copy h1{font-size:clamp(38px,4.9vw,64px);max-width:16ch}
  .hero-copy .lead-lg{max-width:38ch}
}

/* ============================================================
   v4 — review fixes: contrast, no-js, transitions, mobile type
   ============================================================ */

/* Accessible ink versions of the accent colours, for use on light grounds.
   --gold and --tide keep their brand values and are still used on dark. */
:root{
  --gold-ink:#7A5F2E;   /* 5.3:1 on --shell  (was --gold #B38642 at 2.4:1) */
  --tide-ink:#37736F;   /* 4.7:1 on --shell  (was --tide #1F7A99 at 3.2:1) */
  --ink-dim:#6F5F52;    /* 5.2:1 on --shell  (was #8A7868 at 3.7:1)        */
}
.label,.card .n,.price-card .n,.press .src,.flow-step .n{color:var(--gold-ink)}
.g-deep .label,.g-deep2 .label,.g-deep .card .n,.g-deep2 .card .n,
.g-deep .press .src,.foot h4{color:var(--gold)}
.tlink,.flow-step a,.faq .a a{color:var(--tide-ink)}
.tlink{border-bottom-color:rgba(55,115,111,.4)}
.g-deep .tlink,.g-deep2 .tlink{color:var(--lagoon);border-bottom-color:rgba(127,182,198,.4)}
.btn-primary:hover{background:var(--deep-2)}
.faq summary::after{border-color:var(--tide-ink)}
.g-deep .faq summary::after{border-color:var(--lagoon)}
.opt:hover .k,.opt.sel .k{border-color:var(--tide-ink);color:var(--tide-ink)}
.quiz-progress i{background:var(--tide-ink)}
.chart-foot a,.cite a{color:var(--lagoon)}

/* Reveal only animates on the way in — it must not steal .card's hover
   transition once the element has arrived. */
.rv{transition:none}
.rv:not(.in){opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* No JavaScript: show everything rather than a blank page. */
html:not(.js) .rv{opacity:1!important;transform:none!important}
html:not(.js) .quiz-step{display:block;margin-bottom:28px}
html:not(.js) .r3d-stage,html:not(.js) .r3d-hint{display:none}
html:not(.js) .bar-col .v{height:var(--h-static,60%)}
html:not(.js) .dock{transform:none}

/* Chart: JS drives the height every frame, so no CSS transition on top. */
.bar-col .v{transition:none}

/* Carousel controls: real hit area, and visible on phones. */
.hero-dots{gap:4px}
.hero-dots button{width:34px;height:34px;background:transparent;border-radius:6px;display:grid;place-items:center}
.hero-dots button::before{
  content:"";width:26px;height:3px;border-radius:100px;background:rgba(242,247,248,.35);transition:background .3s
}
.hero-dots button[aria-current="true"]::before{background:var(--shell)}
.hero-dots button::after{content:none}
.hero-pause{
  width:34px;height:34px;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;
  color:rgba(242,247,248,.7);border-radius:6px
}
.hero-pause:hover{color:var(--shell)}
@media(max-width:720px){
  .hero-dots{display:flex;right:auto;left:22px;bottom:14px}
}

/* Mobile: nothing that functions as body copy below 16px. */
@media(max-width:720px){
  .small,.flow-step p,.offer-card li,.card p,.step .small{font-size:16px;line-height:1.55}
  .r3d-step p{font-size:15.5px}
  .places{font-size:15px}
  .hero-proof{font-size:13.5px}
  .quote p{font-size:20px}
  .disclaim{font-size:15px}
}

/* v4 fixes found in QA */
/* the earlier [aria-current] rule was painting the whole 34px button white */
.hero-dots button,
.hero-dots button[aria-current="true"]{background:transparent}
/* dock: never let a CTA wrap to two lines; drop the message before it squeezes */
.dock .btn{white-space:nowrap}
@media(max-width:1000px){.dock .msg{display:none}}

/* ============================================================
   v5 — coming-soon build: top words, the date, the lead magnet
   ============================================================ */

/* The five words, straight across the top of the hero */
.topwords{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:clamp(20px,3vw,30px)
}
.topwords span{
  font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--lagoon);white-space:nowrap;display:inline-flex;align-items:center;gap:18px
}
.topwords span:not(:last-child)::after{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none
}
@media(max-width:600px){
  .topwords{gap:8px 12px}
  .topwords span{font-size:10.5px;letter-spacing:.13em;gap:12px}
  .topwords span:not(:last-child)::after{width:3px;height:3px}
}

/* Coming soon */
.comingsoon{
  display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:clamp(16px,2.4vw,24px)
}
.comingsoon .cs-lab{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)
}
.comingsoon .cs-date{
  font-family:var(--sans);font-size:clamp(30px,5.6vw,52px);font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--shell)
}
.g-shell .comingsoon .cs-date,.g-shell2 .comingsoon .cs-date{color:var(--deep)}

/* Lead-magnet card (replaces the old price card in the hero) */
.magnet{
  width:min(380px,100%);background:rgba(245,239,230,.96);color:var(--ink);
  border-radius:22px;padding:28px 26px;box-shadow:0 26px 60px -26px rgba(10,43,56,.75);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.magnet .kicker{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#7A5F2E;
  background:rgba(180,154,106,.28);display:inline-block;padding:5px 10px;border-radius:100px
}
.magnet h2{font-size:23px;font-weight:700;letter-spacing:-.028em;color:var(--deep);margin:14px 0 8px;line-height:1.18}
.magnet p{font-size:15px;color:var(--ink-soft);margin:0 0 16px}
.magnet .field{margin-bottom:12px}
.magnet .btn{width:100%}
.magnet .fine{font-size:12px;color:var(--ink-dim);margin:12px 0 0;text-align:center}
.magnet ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:7px}
.magnet li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:14.5px;align-items:start;color:var(--ink-soft)}
.magnet li svg{margin-top:4px;color:var(--tide-ink);flex:none}
@media(max-width:1080px){.magnet{width:100%;max-width:460px}}
@media(max-width:520px){.magnet{padding:22px 18px}}

/* The manual, shown as an object rather than a form on dark sections */
.manual{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media(max-width:760px){.manual{grid-template-columns:1fr}}
.manual-cover{
  width:clamp(150px,20vw,210px);aspect-ratio:3/4;border-radius:6px 14px 14px 6px;
  background:linear-gradient(135deg,var(--sand),var(--shell));
  box-shadow:0 22px 50px -22px rgba(10,43,56,.8), inset 8px 0 14px -10px rgba(26,46,56,.4);
  display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px;position:relative
}
.manual-cover::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:rgba(26,46,56,.16)}
.manual-cover .mc-brand{font-size:21px;font-weight:600;letter-spacing:-.035em;color:var(--deep)}
.manual-cover .mc-sub{font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-top:3px}
.manual-cover .mc-title{font-family:var(--serif);font-size:clamp(17px,2.2vw,21px);line-height:1.15;color:var(--deep);font-weight:400}

/* v5 fix — the hero's second column was sizing to the card's max-content and
   squeezing the headline into a 280px gutter. Pin it instead. */
@media(min-width:1081px){
  .hero-in{grid-template-columns:minmax(0,1fr) 380px;align-items:center}
  .hero-copy h1{max-width:14ch;font-size:clamp(40px,4.6vw,62px)}
  .hero-copy .lead-lg{max-width:34ch}
  .topwords{flex-wrap:nowrap}
}
@media(min-width:1081px) and (max-width:1300px){
  .topwords span{font-size:10.5px;letter-spacing:.12em;gap:12px}
  .topwords span:not(:last-child)::after{width:3px;height:3px}
}
.comingsoon .cs-date{font-size:clamp(28px,4.2vw,46px)}
@media(min-width:1081px){
  .hero-copy h1{max-width:22ch;font-size:clamp(38px,4.2vw,56px)}
}

/* ============================================================
   v6 — quieter hero, see-through signup, modal, tighter rhythm
   ============================================================ */

/* Tighter overall rhythm */
:root{--sec:clamp(56px,8vw,104px)}
.sec-sm{padding-block:clamp(40px,6vw,64px)}

/* ---------- HERO, simplified ---------- */
.hero{min-height:clamp(560px,86svh,800px)}
.hero-in{display:block;padding-block:clamp(40px,6vw,72px)}
.hero-copy{max-width:min(640px,100%)}
.hero-copy h1,
.hero h1{
  font-family:var(--serif);font-weight:300;font-style:normal;
  font-size:clamp(38px,6vw,68px);line-height:1.04;letter-spacing:-.02em;
  color:var(--shell);max-width:17ch;text-wrap:balance
}
.hero h1 em{font-style:normal;color:var(--shell)}
.hero .sub{
  font-family:var(--sans);font-size:clamp(15.5px,1.7vw,18px);line-height:1.55;font-weight:400;
  color:rgba(242,247,248,.84);max-width:44ch;margin-top:clamp(14px,2vw,20px)
}
.hero .sub b{font-weight:600;color:var(--shell)}
.topwords{margin-bottom:clamp(16px,2.2vw,24px)}
.topwords span{color:rgba(242,247,248,.66);font-weight:500}

/* Slim, see-through signup — no white box over the photograph */
.slimform{margin-top:clamp(22px,3vw,30px);max-width:460px}
.slimform .row{
  display:flex;align-items:stretch;gap:0;border:1px solid rgba(242,247,248,.34);
  border-radius:100px;background:rgba(10,43,56,.28);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);overflow:hidden;transition:border-color .25s,background .25s
}
.slimform .row:focus-within{border-color:rgba(242,247,248,.72);background:rgba(10,43,56,.42)}
.slimform input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--shell);
  font:inherit;font-size:16px;padding:15px 20px;min-height:52px
}
.slimform input::placeholder{color:rgba(242,247,248,.56)}
.slimform input:focus{outline:none}
.slimform button{
  border:0;background:var(--shell);color:var(--deep);font-weight:600;font-size:15px;
  padding:0 24px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .22s var(--ease);white-space:nowrap
}
.slimform button:hover{background:var(--lagoon)}
.slimform .note{font-size:13px;color:rgba(242,247,248,.62);margin:11px 0 0}
.slimform .note a{border-bottom:1px solid rgba(242,247,248,.3)}
.slimform .err{display:none;font-size:13.5px;color:#F0B7AE;margin-top:9px}
.slimform.invalid .err{display:block}
.slimform .done{display:none;font-size:16px;color:var(--lagoon);font-weight:600;margin-top:4px}
.slimform.sent .row,.slimform.sent .note{display:none}
.slimform.sent .done{display:block}
@media(max-width:560px){
  .slimform .row{flex-direction:column;border-radius:18px;background:rgba(10,43,56,.4)}
  .slimform input{padding:14px 18px}
  .slimform button{padding:15px 20px;justify-content:center;border-radius:0}
}

/* Hero dots sit bottom-right again now the card has gone */
.hero-dots{right:max(22px,calc((100vw - 1180px)/2));left:auto;bottom:20px}
@media(max-width:720px){.hero-dots{left:22px;right:auto;bottom:14px}}

/* ---------- MODAL ---------- */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;
  background:rgba(8,28,30,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s
}
.modal.open{opacity:1;visibility:visible}
.modal-card{
  position:relative;width:min(760px,100%);max-height:calc(100svh - 44px);overflow:auto;
  background:var(--shell);border-radius:22px;display:grid;grid-template-columns:1fr 1fr;
  transform:translateY(16px) scale(.98);transition:transform .4s var(--ease);
  box-shadow:0 40px 90px -40px rgba(8,28,30,.9)
}
.modal.open .modal-card{transform:none}
.modal-art{
  background:linear-gradient(160deg,var(--deep),var(--deep-2));display:grid;place-items:center;padding:34px;
  border-radius:22px 0 0 22px
}
.modal-body{padding:clamp(26px,3.4vw,40px)}
.modal-body .kicker{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#7A5F2E;
  background:rgba(180,154,106,.28);display:inline-block;padding:5px 10px;border-radius:100px
}
.modal-body h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.4vw,34px);line-height:1.1;color:var(--deep);margin:14px 0 10px}
.modal-body p{font-size:15.5px;color:var(--ink-soft);margin:0 0 16px}
.modal-body ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.modal-body li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:15px;align-items:start;color:var(--ink-soft)}
.modal-body li svg{margin-top:4px;color:var(--tide-ink);flex:none}
.modal-close{
  position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(26,46,56,.08);color:var(--ink);display:grid;place-items:center;transition:background .2s;z-index:2
}
.modal-close:hover{background:rgba(26,46,56,.16)}
@media(max-width:700px){
  .modal-card{grid-template-columns:1fr}
  .modal-art{border-radius:22px 22px 0 0;padding:26px}
  .modal-art .manual-cover{width:120px}
}

/* ---------- News cards back on the homepage ---------- */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:900px){.newsgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.newsgrid{grid-template-columns:1fr}}
.newscard{
  display:flex;flex-direction:column;gap:10px;padding:var(--s3);border:1px solid var(--line);
  border-radius:16px;background:var(--shell);transition:border-color .25s,transform .3s var(--ease),box-shadow .3s
}
.newscard:hover{border-color:rgba(55,115,111,.5);transform:translateY(-3px);box-shadow:0 16px 40px -24px rgba(15,59,76,.5)}
.newscard .src{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.newscard .hl{font-family:var(--serif);font-size:20px;line-height:1.22;font-weight:400;color:var(--deep)}
.newscard .go{font-size:12.5px;color:var(--ink-dim);margin-top:auto}

/* ---------- More scroll motion ---------- */
.rv-up:not(.in){opacity:0;transform:translateY(34px)}
.rv-up.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-left:not(.in){opacity:0;transform:translateX(-26px)}
.rv-left.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-scale:not(.in){opacity:0;transform:scale(.965)}
.rv-scale.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-d6{transition-delay:.36s}.rv-d7{transition-delay:.42s}
/* media drifts up a touch slower than its copy */
.drift{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .rv-up,.rv-left,.rv-scale{opacity:1!important;transform:none!important}
  .drift{transform:none!important}
}
html:not(.js) .rv-up,html:not(.js) .rv-left,html:not(.js) .rv-scale{opacity:1!important;transform:none!important}
html:not(.js) .modal{display:none}

/* ============================================================
   v7 — lighter hero, ambient light, Apple-style glass
   ============================================================ */

:root{
  /* a touch lighter and warmer across the board */
  --shell:#F8F4ED;
  --shell-2:#F2ECE1;

  /* glass tokens */
  --glass-blur:saturate(175%) blur(22px);
  --glass-light:rgba(255,255,255,.58);
  --glass-light-hi:rgba(255,255,255,.86);
  --glass-light-line:rgba(255,255,255,.72);
  --glass-dark:rgba(242,247,248,.09);
  --glass-dark-line:rgba(242,247,248,.18);
  --glass-shadow:0 18px 44px -22px rgba(15,59,76,.34);
  --glass-shadow-lg:0 30px 70px -32px rgba(10,43,56,.5);
}

/* ---------- HERO: let the room show through ---------- */
.hero-media::after{
  background:
    linear-gradient(to top,rgba(14,44,47,.74) 0%,rgba(14,44,47,.34) 30%,rgba(14,44,47,.04) 60%,rgba(14,44,47,.22) 100%),
    linear-gradient(100deg,rgba(14,44,47,.7) 0%,rgba(14,44,47,.42) 30%,rgba(14,44,47,.08) 58%,rgba(14,44,47,0) 76%),
    radial-gradient(70% 55% at 40% 100%,rgba(15,59,76,.24),transparent 72%);
}
/* a soft readability pad that sits only behind the words */
.hero-copy{position:relative}
.hero-copy::before{
  content:"";position:absolute;inset:-34px -40px -28px -44px;z-index:-1;pointer-events:none;
  background:radial-gradient(74% 82% at 26% 50%,rgba(10,34,37,.5),rgba(10,34,37,.22) 56%,transparent 78%);
  filter:blur(6px)
}
.hero h1{text-shadow:0 2px 26px rgba(10,34,37,.42)}
.hero .sub{color:rgba(248,244,237,.92);text-shadow:0 1px 16px rgba(10,34,37,.5)}
.topwords span{color:rgba(248,244,237,.82);text-shadow:0 1px 12px rgba(10,34,37,.6)}

/* ---------- Deep sections: lift them off pure dark ---------- */
.g-deep{background:linear-gradient(168deg,#164A4D 0%,#0F3B4C 52%,#0F373A 100%)}
.g-deep2{background:linear-gradient(168deg,#0F3B4C 0%,#0E3336 60%,#0A2B38 100%)}
.leak::before{
  background:
    radial-gradient(58% 48% at 12% 0%,rgba(180,154,106,.3),transparent 70%),
    radial-gradient(52% 46% at 92% 90%,rgba(127,182,198,.24),transparent 72%),
    radial-gradient(44% 40% at 70% 12%,rgba(127,182,198,.12),transparent 70%);
}

/* ---------- Ambient bloom on light sections, so glass has something to blur ---------- */
.g-shell,.g-shell2{position:relative;isolation:isolate}
.g-shell::before,.g-shell2::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 42% at 8% 4%,rgba(127,182,198,.24),transparent 68%),
    radial-gradient(44% 40% at 94% 92%,rgba(180,154,106,.2),transparent 70%),
    radial-gradient(38% 34% at 62% 20%,rgba(221,208,188,.4),transparent 72%);
}

/* ============================================================
   GLASS
   ============================================================ */
.card,.newscard,.flow-step,.price-card,.quiz,.offer,.magnet{
  background:var(--glass-light);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-light-line);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.7);
}
.card:hover,.newscard:hover,.flow-step:hover{
  background:var(--glass-light-hi);
  border-color:rgba(255,255,255,.9);
  box-shadow:var(--glass-shadow-lg), inset 0 1px 0 rgba(255,255,255,.85);
}
.price-card.featured{
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(180,154,106,.14));
  border-color:rgba(180,154,106,.42)
}
.offer{
  background:linear-gradient(140deg,rgba(255,255,255,.66),rgba(127,182,198,.14));
  border-color:rgba(255,255,255,.7)
}

/* glass on dark grounds */
.g-deep .card,.g-deep2 .card,.chart,.r3d-steps .r3d-step,.quote{
  background:var(--glass-dark);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-color:var(--glass-dark-line)
}
.g-deep .card,.g-deep2 .card{box-shadow:inset 0 1px 0 rgba(242,247,248,.14)}
.g-deep .card:hover,.g-deep2 .card:hover{
  background:rgba(242,247,248,.15);border-color:rgba(127,182,198,.45);
  box-shadow:0 24px 54px -28px rgba(0,0,0,.6), inset 0 1px 0 rgba(242,247,248,.26)
}
.chart{box-shadow:var(--glass-shadow-lg), inset 0 1px 0 rgba(242,247,248,.16)}

/* ---------- Glass CTAs ---------- */
.btn{
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px -14px rgba(10,43,56,.5);
}
.btn-primary{
  background:linear-gradient(180deg,rgba(28,84,88,.96),rgba(15,59,76,.98));
  border-color:rgba(255,255,255,.14);color:var(--shell)
}
.btn-primary:hover{background:linear-gradient(180deg,rgba(38,104,104,.98),rgba(24,78,80,.99))}
.btn-light{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,244,237,.82));
  color:var(--deep);border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 12px 30px -16px rgba(10,43,56,.55)
}
.btn-light:hover{background:linear-gradient(180deg,#fff,rgba(214,238,232,.94))}
.btn-ghost{
  background:rgba(255,255,255,.3);border-color:rgba(15,59,76,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)
}
.btn-ghost:hover{background:rgba(255,255,255,.62);border-color:rgba(15,59,76,.34)}
.g-deep .btn-ghost,.g-deep2 .btn-ghost,.hero .btn-ghost{
  background:rgba(242,247,248,.12);border-color:rgba(242,247,248,.34);
  box-shadow:inset 0 1px 0 rgba(242,247,248,.2)
}
.g-deep .btn-ghost:hover,.g-deep2 .btn-ghost:hover,.hero .btn-ghost:hover{
  background:rgba(242,247,248,.24);border-color:rgba(242,247,248,.6)
}

/* ---------- Glass chrome ---------- */
.nav{
  background:rgba(248,244,237,.62);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)
}
.nav.scrolled{
  background:rgba(248,244,237,.78);
  box-shadow:0 1px 0 rgba(255,255,255,.7), 0 10px 30px -22px rgba(15,59,76,.4)
}
.dock{
  background:rgba(16,52,55,.6);
  -webkit-backdrop-filter:saturate(180%) blur(26px);backdrop-filter:saturate(180%) blur(26px);
  border-color:rgba(242,247,248,.22);
  box-shadow:0 24px 60px -24px rgba(8,28,30,.7), inset 0 1px 0 rgba(242,247,248,.18)
}
.slimform .row{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.44);
  -webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34)
}
.slimform .row:focus-within{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.8)}
.modal{background:rgba(10,34,37,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.modal-card{
  background:rgba(250,247,241,.86);
  -webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 50px 100px -40px rgba(8,28,30,.7), inset 0 1px 0 rgba(255,255,255,.9)
}
.faq details{border-color:rgba(15,59,76,.13)}
.gallery figure,.map,.vid{box-shadow:var(--glass-shadow)}
.ticker{
  background:rgba(242,236,225,.6);
  -webkit-backdrop-filter:saturate(170%) blur(16px);backdrop-filter:saturate(170%) blur(16px)
}

/* Safari/Firefox without backdrop-filter: fall back to solid so nothing turns unreadable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.newscard,.flow-step,.price-card,.quiz,.offer,.magnet,.modal-card{background:rgba(255,255,255,.95)}
  .nav{background:rgba(248,244,237,.97)}
  .dock{background:rgba(10,43,56,.96)}
  .slimform .row{background:rgba(10,43,56,.6)}
  .g-deep .card,.g-deep2 .card,.chart{background:rgba(242,247,248,.12)}
}

/* ============================================================
   v8 — warm hero: coffee, chocolate, gold and cream (no teal)
   ============================================================ */

.hero{background:#2A201A}

.hero-media::after{
  background:
    /* a cream wash that lifts the whole frame */
    linear-gradient(to bottom,rgba(248,244,237,.1) 0%,rgba(248,244,237,0) 34%),
    /* coffee fade up from the base, much lighter than before */
    linear-gradient(to top,rgba(44,33,25,.72) 0%,rgba(52,39,29,.3) 30%,rgba(60,45,34,.03) 58%,rgba(44,33,25,.16) 100%),
    /* chocolate wash behind the copy column only */
    linear-gradient(100deg,rgba(45,33,25,.66) 0%,rgba(26,46,56,.38) 30%,rgba(60,46,35,.06) 56%,rgba(60,46,35,0) 74%),
    /* warm gold bloom, low and left, where the lamps are */
    radial-gradient(64% 52% at 22% 88%,rgba(180,154,106,.26),transparent 70%),
    radial-gradient(48% 40% at 84% 12%,rgba(221,208,188,.18),transparent 72%);
}

/* the readability pad goes warm too */
.hero-copy::before{
  background:radial-gradient(74% 82% at 26% 50%,rgba(38,27,20,.5),rgba(38,27,20,.2) 56%,transparent 78%)
}

.hero h1{color:#FBF7F0;text-shadow:0 2px 26px rgba(34,24,17,.46)}
.hero .sub{color:rgba(251,247,240,.93);text-shadow:0 1px 16px rgba(34,24,17,.55)}
.hero .sub b{color:#FFFBF4}
.topwords span{color:rgba(247,237,221,.86);text-shadow:0 1px 12px rgba(34,24,17,.6)}
.topwords span:not(:last-child)::after{background:var(--gold)}

/* hero controls pick up the warm key */
.hero .eyebrow .dot{background:var(--gold)}
.scroll-cue{color:rgba(247,237,221,.6)}
.scroll-cue i{background:linear-gradient(to bottom,rgba(247,237,221,.7),transparent)}
.hero-dots button::before{background:rgba(247,237,221,.38)}
.hero-dots button[aria-current="true"]::before{background:#FBF7F0}
.hero-pause{color:rgba(247,237,221,.75)}
.hero-pause:hover{color:#FBF7F0}

/* the signup pill: warm glass, cream fill, gold-lit focus */
.slimform .row{
  background:rgba(255,250,242,.16);border-color:rgba(247,237,221,.46);
  box-shadow:inset 0 1px 0 rgba(255,250,242,.36)
}
.slimform .row:focus-within{
  background:rgba(255,250,242,.26);border-color:rgba(214,188,138,.9);
  box-shadow:inset 0 1px 0 rgba(255,250,242,.5), 0 0 0 3px rgba(180,154,106,.22)
}
.slimform input{color:#FBF7F0}
.slimform input::placeholder{color:rgba(247,237,221,.6)}
.slimform button{background:#FBF7F0;color:#3A2A1E}
.slimform button:hover{background:var(--gold);color:#251A12}
.slimform .note{color:rgba(247,237,221,.68);text-shadow:0 1px 10px rgba(34,24,17,.55)}
.slimform .note b{color:rgba(255,251,244,.94)}
.slimform .note a{border-bottom-color:rgba(247,237,221,.4)}
.slimform .done{color:#E4C98E}

/* hero ghost button, warm */
.hero .btn-ghost{
  background:rgba(255,250,242,.13);border-color:rgba(247,237,221,.4);color:#FBF7F0;
  box-shadow:inset 0 1px 0 rgba(255,250,242,.22)
}
.hero .btn-ghost:hover{background:rgba(255,250,242,.26);border-color:rgba(247,237,221,.7)}

/* ---------- AEO answer block: the bit an answer engine lifts ---------- */
.answer{
  border-left:3px solid var(--gold);padding:18px 0 18px 22px;margin:0 0 var(--s3);
  font-size:clamp(17px,2.1vw,19.5px);line-height:1.55;color:var(--ink);max-width:62ch
}
.g-deep .answer,.g-deep2 .answer{color:var(--on-deep);border-left-color:var(--gold)}
.answer strong{font-weight:700}
.answer + .lead{margin-top:0}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:13px;color:var(--ink-dim);margin-bottom:var(--s2);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{border-bottom:1px solid rgba(111,95,82,.3)}
.crumbs a:hover{color:var(--tide-ink)}
.crumbs span{opacity:.5}
.g-deep .crumbs,.g-deep2 .crumbs{color:var(--on-deep-soft)}
.g-deep .crumbs a,.g-deep2 .crumbs a{border-bottom-color:rgba(185,201,196,.35)}

/* ---------- service link hub ---------- */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
@media(max-width:900px){.hub{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hub{grid-template-columns:1fr}}
.hub a{
  display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;
  border:1px solid var(--glass-light-line);background:var(--glass-light);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .25s var(--ease),border-color .25s
}
.hub a:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.95)}
.hub .t{font-weight:600;font-size:16.5px;color:var(--deep);letter-spacing:-.015em}
.hub .d{font-size:14px;color:var(--ink-soft)}
.g-deep .hub a,.g-deep2 .hub a{background:var(--glass-dark);border-color:var(--glass-dark-line);box-shadow:none}
.g-deep .hub .t,.g-deep2 .hub .t{color:var(--shell)}
.g-deep .hub .d,.g-deep2 .hub .d{color:var(--on-deep-soft)}

/* ============================================================
   v9 — the real manual: cover art, spreads, download focus
   ============================================================ */

/* The cover is now a photograph of the actual PDF, not a drawn box. */
.manual-cover{
  width:clamp(160px,22vw,240px);aspect-ratio:636/900;padding:0;position:relative;
  border-radius:3px 12px 12px 3px;overflow:visible;background:none;
  box-shadow:none;display:block
}
.manual-cover img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:3px 12px 12px 3px;
  box-shadow:0 28px 60px -24px rgba(8,28,30,.75), 0 2px 8px -2px rgba(8,28,30,.4)
}
.manual-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:11px;border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,rgba(255,255,255,.4),rgba(0,0,0,.22) 42%,rgba(255,255,255,.14));
  z-index:2;pointer-events:none
}
.manual-cover::after{
  content:"";position:absolute;right:-5px;top:8px;bottom:8px;width:5px;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,rgba(248,244,237,.9),rgba(214,203,186,.7));
  box-shadow:1px 0 3px rgba(8,28,30,.3);z-index:1
}
.manual-cover.tilt{transform:rotate(-2.2deg);transition:transform .5s var(--ease)}
.manual-cover.tilt:hover{transform:rotate(0deg) scale(1.02)}

/* Cover + two spreads, fanned */
.manual-stack{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0}
.manual-stack .sheet{
  width:clamp(96px,13vw,150px);aspect-ratio:537/760;border-radius:4px;overflow:hidden;
  box-shadow:0 20px 46px -22px rgba(8,28,30,.7);border:1px solid rgba(255,255,255,.5)
}
.manual-stack .sheet img{width:100%;height:100%;object-fit:cover;display:block}
.manual-stack .sheet:first-child{transform:rotate(-8deg) translateX(26px);z-index:1}
.manual-stack .sheet:last-child{transform:rotate(8deg) translateX(-26px);z-index:1}
.manual-stack .manual-cover{z-index:3;position:relative}
@media(max-width:560px){.manual-stack .sheet{display:none}}

/* What's inside, as a spec strip */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s3)}
@media(max-width:700px){.spec{grid-template-columns:repeat(2,1fr)}}
.spec div{
  padding:16px 18px;border-radius:14px;border:1px solid var(--glass-dark-line);
  background:var(--glass-dark);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)
}
.g-shell .spec div,.g-shell2 .spec div{border-color:var(--glass-light-line);background:var(--glass-light)}
.spec .k{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.035em;color:var(--lagoon);line-height:1}
.g-shell .spec .k,.g-shell2 .spec .k{color:var(--deep)}
.spec .v{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-deep-soft);margin-top:7px}
.g-shell .spec .v,.g-shell2 .spec .v{color:var(--ink-dim)}

/* the parts list */
.parts{display:grid;gap:10px;margin-top:var(--s3)}
.parts div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.parts .n{font-size:11.5px;letter-spacing:.14em;color:var(--gold);font-weight:700;white-space:nowrap}
.parts .t{font-size:16.5px;color:var(--on-deep)}
.g-shell .parts .t,.g-shell2 .parts .t{color:var(--ink)}
.g-shell .parts .n,.g-shell2 .parts .n{color:var(--gold-ink)}

/* success state: the actual download button */
.dl-ready{display:grid;gap:12px;margin-top:6px}
.dl-ready .btn{width:100%}

/* ============================================================
   v10 — thank you page: download, then the referral
   ============================================================ */

.ty-hero{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,56px);align-items:center}
@media(max-width:760px){.ty-hero{grid-template-columns:1fr;text-align:left}}
.ty-tick{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(127,182,198,.18);border:1px solid rgba(127,182,198,.5);color:var(--lagoon);
  margin-bottom:18px
}
.ty-dl{
  display:grid;gap:14px;margin-top:26px;padding:22px;border-radius:18px;
  border:1px solid var(--glass-dark-line);background:var(--glass-dark);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)
}
.ty-dl .btn{width:100%}
.ty-dl .hint{font-size:13.5px;color:var(--on-deep-soft);margin:0}

/* ---------- referral ---------- */
.ref{
  border:1px solid var(--glass-light-line);border-radius:22px;padding:clamp(24px,4vw,42px);
  background:var(--glass-light);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.7)
}
.ref h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.6vw,38px);line-height:1.1;color:var(--deep);margin:0 0 12px}
.ref .why{font-size:16.5px;color:var(--ink-soft);max-width:54ch;margin:0 0 22px}

.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:700px){.share-grid{grid-template-columns:repeat(2,1fr)}}
.share-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-height:92px;padding:16px 12px;border-radius:16px;cursor:pointer;
  border:1px solid rgba(15,59,76,.16);background:rgba(255,255,255,.62);
  font:inherit;font-size:14.5px;font-weight:600;color:var(--deep);text-align:center;
  transition:transform .22s var(--ease),border-color .22s,background .22s
}
.share-btn:hover{transform:translateY(-2px);border-color:rgba(55,115,111,.5);background:#fff}
.share-btn svg{color:var(--tide-ink)}
.share-btn.wa{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.38)}
.share-btn.wa:hover{background:rgba(37,211,102,.16)}
.share-btn.wa svg{color:#128C4A}
.share-btn.copied{background:rgba(127,182,198,.22);border-color:var(--tide-ink)}

.ref-or{
  display:flex;align-items:center;gap:14px;margin:26px 0 20px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)
}
.ref-or::before,.ref-or::after{content:"";flex:1;height:1px;background:var(--line)}

.ref-rows{display:grid;gap:10px}
.ref-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.ref-row input{
  min-height:52px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.8);font:inherit;font-size:16.5px;color:var(--ink);width:100%
}
.ref-row input:focus{border-color:var(--tide-ink);outline:none;box-shadow:0 0 0 3px rgba(55,115,111,.16)}
.ref-row .go{
  min-height:52px;padding:0 20px;border-radius:12px;border:1px solid rgba(15,59,76,.2);
  background:rgba(255,255,255,.7);font:inherit;font-weight:600;font-size:15px;color:var(--deep);
  cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s
}
.ref-row .go:hover{background:var(--deep);color:var(--shell);border-color:var(--deep)}
.ref-row.sent input{border-color:rgba(55,115,111,.5);background:rgba(127,182,198,.14)}
.ref-row.sent .go{background:rgba(127,182,198,.22);border-color:var(--tide-ink);color:var(--deep)}
.ref-add{
  background:none;border:0;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;
  color:var(--tide-ink);padding:10px 0;margin-top:4px
}
.ref-add:hover{text-decoration:underline}
.ref-note{font-size:13px;color:var(--ink-dim);margin-top:18px;max-width:60ch}
.ref-count{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 14px;border-radius:100px;
  background:rgba(127,182,198,.2);border:1px solid rgba(55,115,111,.3);
  font-size:14px;font-weight:600;color:var(--deep)
}
.ref-count[hidden]{display:none}

/* ============================================================
   v11 — thank you: the button first, then the thanks, then the ask
   ============================================================ */

.ty-wrap{max-width:720px;margin-inline:auto;text-align:center}
.btn-huge{
  display:flex;align-items:center;justify-content:center;gap:14px;width:100%;
  min-height:76px;padding:22px 32px;border-radius:20px;
  font-size:clamp(18px,2.6vw,23px);font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(180deg,#FFFFFF,rgba(248,244,237,.9));color:var(--deep);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 22px 50px -20px rgba(8,28,30,.7);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s
}
.btn-huge:hover{
  transform:translateY(-2px);background:linear-gradient(180deg,#fff,rgba(214,238,232,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 28px 60px -20px rgba(8,28,30,.8)
}
.btn-huge svg{flex:none}
@media(max-width:560px){.btn-huge{min-height:68px;padding:18px 22px;font-size:18px}}

.ty-meta{font-size:13.5px;color:var(--on-deep-soft);margin:14px 0 0}
.ty-thanks{
  margin-top:clamp(26px,4vw,40px);padding-top:clamp(24px,3.4vw,34px);
  border-top:1px solid var(--line-deep)
}
.ty-thanks p{font-size:clamp(16.5px,2vw,18.5px);line-height:1.6;color:var(--on-deep-soft);max-width:56ch;margin-inline:auto}
.ty-thanks p strong{color:var(--shell);font-weight:600}

/* the referral ask leads with the email field now */
.ref{text-align:left}
.ref-lead{font-size:clamp(17px,2.1vw,19px);line-height:1.55;color:var(--ink-soft);max-width:54ch;margin:0 0 22px}
.ref-rows{margin-top:4px}
.ref-row .go{background:var(--deep);color:var(--shell);border-color:var(--deep);font-weight:600}
.ref-row .go:hover{background:var(--tide-ink);border-color:var(--tide-ink)}
.ref-secondary{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.ref-secondary .lbl{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 14px
}

/* ============================================================
   v12 — opening animation + pristine landing page
   ============================================================ */

/* ---------- the intro veil ---------- */
.intro{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 18% 12%,rgba(127,182,198,.85),transparent 62%),
    radial-gradient(110% 90% at 86% 86%,rgba(221,208,188,.95),transparent 64%),
    linear-gradient(155deg,#7FB6C6 0%,#C9D9D1 34%,#E7DECC 68%,#F3ECDE 100%);
  transition:transform 1s cubic-bezier(.76,0,.24,1),opacity .7s ease .25s
}
.intro.done{transform:translateY(-102%);opacity:0;pointer-events:none}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px}
.intro-mark{
  font-size:clamp(44px,9vw,86px);font-weight:600;letter-spacing:-.045em;color:var(--deep);
  opacity:0;transform:translateY(14px);animation:introMark .9s var(--ease) .15s forwards
}
.intro-sub{
  font-size:clamp(9.5px,1.5vw,12px);letter-spacing:.3em;text-transform:uppercase;color:rgba(15,59,76,.6);
  opacity:0;animation:introMark .9s var(--ease) .4s forwards;margin-top:-16px
}
@keyframes introMark{to{opacity:1;transform:none}}
.intro svg{width:min(560px,86vw);height:auto;overflow:visible}
.intro svg .ln{
  fill:none;stroke:var(--deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin="round";
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  animation:draw 1.5s cubic-bezier(.65,0,.35,1) .35s forwards
}
.intro svg .ln.s2{animation-delay:.6s}
.intro svg .ln.s3{animation-delay:.85s}
.intro svg .sp{
  fill:none;stroke:var(--tide);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:120;stroke-dashoffset:120;animation:draw 1s var(--ease) 1.05s forwards
}
.intro svg .carriage{opacity:0;animation:slideIn 1.1s cubic-bezier(.34,1.4,.4,1) 1.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes slideIn{0%{opacity:0;transform:translateX(52px)}100%{opacity:1;transform:translateX(0)}}
.intro-skip{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  background:none;border:0;cursor:pointer;font:inherit;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(15,59,76,.55)
}
.intro-skip:hover{color:var(--deep)}
body.intro-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .intro{display:none}
}
html:not(.js) .intro{display:none}

/* ---------- landing-page hero: bigger, quieter ---------- */
.hero.landing{min-height:clamp(600px,92svh,880px)}
.hero.landing .hero-in{padding-block:clamp(48px,8vw,90px)}
.hero.landing h1{font-size:clamp(40px,6.4vw,74px);max-width:15ch}
.hero.landing .sub{font-size:clamp(16.5px,2vw,20px);max-width:46ch}

/* ---------- proof strip right under the hero ---------- */
.proof-strip{padding-block:clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
.proof-strip .cap{
  text-align:center;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 16px
}

/* ---------- the big claim block ---------- */
.claimbig{text-align:center;max-width:22ch;margin-inline:auto}
.claimbig .num{
  font-size:clamp(64px,13vw,150px);font-weight:700;letter-spacing:-.05em;line-height:.85;
  color:var(--shell);font-variant-numeric:tabular-nums
}
.claimbig .num sup{font-size:.34em;top:-.9em;position:relative;font-weight:600}
.claimbig .cap{
  font-size:clamp(17px,2.3vw,21px);line-height:1.4;color:var(--on-deep-soft);margin-top:18px;
  max-width:26ch;margin-inline:auto
}

/* ---------- two-up feature (manual + location) ---------- */
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:860px){.twoup{grid-template-columns:1fr;gap:var(--s4)}}

/* ============================================================
   v13 — Apple-grade landing: marks, pinned type, scroll craft
   ============================================================ */

/* ---------- the re:ef mark ---------- */
.mark{display:inline-block;line-height:0}
.mark svg{display:block;overflow:visible}
.mark .ring{fill:none;stroke:currentColor;stroke-linecap:round;opacity:.9}
.mark .wordmark{font-family:var(--serif);font-weight:400;fill:currentColor}
.mark.draw .ring{stroke-dasharray:var(--rl,760);stroke-dashoffset:var(--rl,760);animation:ringDraw 1.6s cubic-bezier(.62,0,.3,1) forwards}
.mark.draw .ring:nth-of-type(2){animation-delay:.12s}
.mark.draw .ring:nth-of-type(3){animation-delay:.24s}
.mark.draw .wordmark{opacity:0;animation:markIn .8s var(--ease) .75s forwards}
@keyframes ringDraw{to{stroke-dashoffset:0}}
@keyframes markIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.brand .mark{color:var(--deep);width:74px}
@media(max-width:600px){.brand .mark{width:62px}}

/* ---------- pinned, word-by-word highlight ---------- */
.pin{position:relative;height:320svh}
.pin-stage{
  position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 22px;overflow:hidden
}
.pin-type{
  font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(28px,5.4vw,66px);max-width:17ch;text-align:center
}
.pin-type w{
  display:inline-block;color:rgba(242,247,248,.17);transition:color .18s linear, opacity .18s linear;
  margin-right:.24em
}
.pin-type w.lit{color:var(--shell)}
.pin-type w.key.lit{color:var(--lagoon)}
.pin-prog{
  position:absolute;left:50%;bottom:36px;transform:translateX(-50%);
  width:min(320px,58vw);height:2px;border-radius:2px;background:rgba(242,247,248,.16)
}
.pin-prog i{display:block;height:100%;border-radius:2px;background:var(--lagoon);width:0}

/* ---------- big number blocks ---------- */
.mega{display:grid;place-items:center;text-align:center;gap:10px}
.mega .n{
  font-size:clamp(84px,20vw,260px);font-weight:700;letter-spacing:-.055em;line-height:.8;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(170deg,var(--shell) 20%,var(--lagoon) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.g-shell .mega .n,.g-shell2 .mega .n{background:linear-gradient(170deg,var(--deep) 20%,var(--tide) 100%);-webkit-background-clip:text;background-clip:text}
.mega .n sup{font-size:.3em;top:-1.05em;position:relative;font-weight:600;-webkit-text-fill-color:var(--gold)}
.mega .cap{font-size:clamp(16px,2.1vw,20px);color:var(--on-deep-soft);max-width:24ch;line-height:1.45}
.g-shell .mega .cap,.g-shell2 .mega .cap{color:var(--ink-soft)}
.mega .src{font-size:12px;color:var(--on-deep-soft);opacity:.75;margin-top:4px}
.g-shell .mega .src,.g-shell2 .mega .src{color:var(--ink-dim)}
.mega .src a{border-bottom:1px solid currentColor}

/* ---------- reveal media with a clip wipe ---------- */
.wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.62,0,.24,1)}
.wipe.in{clip-path:inset(0 0 0 0)}

/* ---------- section kicker used everywhere ---------- */
.kick{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--gold);margin:0 0 16px
}
.g-shell .kick,.g-shell2 .kick{color:var(--gold-ink)}
.tight{max-width:20ch}
.tight-l{max-width:30ch}

/* ---------- three-card strip, Apple-ish ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
@media(max-width:820px){.trio{grid-template-columns:1fr}}
.trio .t{
  border-radius:22px;overflow:hidden;position:relative;min-height:clamp(300px,38vw,420px);
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px;isolation:isolate
}
.trio .t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.trio .t::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,34,37,.86),rgba(10,34,37,.18) 60%,transparent)}
.trio .t h3{font-size:clamp(20px,2.4vw,26px);color:var(--shell);font-weight:600;letter-spacing:-.02em}
.trio .t p{font-size:15px;color:rgba(242,247,248,.84);margin-top:8px;max-width:26ch}

/* ---------- coming soon finale ---------- */
.finale{text-align:center}
.finale .word{
  font-family:var(--serif);font-weight:300;font-size:clamp(46px,12vw,150px);line-height:.92;
  letter-spacing:-.04em;color:var(--shell);display:block
}
.finale .word em{font-style:italic;color:var(--lagoon)}
.finale .date{
  font-size:clamp(14px,1.8vw,17px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-top:22px
}
/* nav brand now carries the mark */
.brand{gap:0}
.brand .mark{margin-bottom:-6px}
.brand .brand-sub{font-size:7.5px;letter-spacing:.19em}
/* the ringed mark is square — keep it inside the nav bar */
.brand .mark{width:46px;margin-bottom:0}
.brand{flex-direction:row;align-items:center;gap:11px}
.brand .brand-sub{margin-top:0;font-size:7.5px;letter-spacing:.18em;max-width:9ch;line-height:1.4}
@media(max-width:600px){
  .brand .mark{width:40px}
  .brand .brand-sub{display:none}
}
/* the mark carries the brand on its own — drop the strapline from the bar */
.nav .brand .brand-sub{display:none}
.nav .brand{gap:0}
.nav .brand .mark{width:48px}
.foot .brand-sub{display:block}

/* ============================================================
   v14 — satellite location zoom, clickable evidence
   ============================================================ */

.satwrap{
  position:relative;border-radius:24px;overflow:hidden;min-height:clamp(380px,56vw,620px);
  background:var(--deep-2);isolation:isolate
}
.satwrap iframe{
  position:absolute;inset:-8%;width:116%;height:116%;border:0;display:block;
  filter:saturate(.82) contrast(1.04);
  transform:scale(var(--sat,1.28));transform-origin:50% 46%;
  transition:transform .12s linear;will-change:transform
}
.satwrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(58% 52% at 50% 46%,transparent 34%,rgba(10,34,37,.5) 88%);
}
.satpin{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;
  display:grid;place-items:center
}
.satpin .dot{width:14px;height:14px;border-radius:50%;background:var(--lagoon);box-shadow:0 0 0 4px rgba(127,182,198,.35)}
.satpin .ping{
  position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--lagoon);
  animation:ping 2.4s cubic-bezier(.2,.6,.3,1) infinite
}
.satpin .ping.b{animation-delay:1.2s}
@keyframes ping{0%{transform:scale(1);opacity:.85}100%{transform:scale(7);opacity:0}}
.satlabel{
  position:absolute;left:50%;top:calc(46% + 34px);transform:translateX(-50%);z-index:4;
  padding:9px 16px;border-radius:100px;white-space:nowrap;
  background:rgba(10,43,56,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(242,247,248,.24);color:var(--shell);
  font-size:13px;font-weight:600;letter-spacing:.01em
}
.satcopy{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:clamp(22px,3vw,34px)}
.satcopy h2{color:var(--shell);font-size:clamp(28px,4.4vw,52px)}
.satcopy p{color:rgba(242,247,248,.86);margin-top:10px;max-width:34ch;font-size:clamp(15.5px,1.9vw,18px)}
@media(prefers-reduced-motion:reduce){
  .satwrap iframe{transform:scale(1.05)}
  .satpin .ping{animation:none;opacity:0}
}

/* evidence cards are links now */
a.t{text-decoration:none}
a.t .go{
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--lagoon);margin-top:12px;
  display:inline-flex;align-items:center;gap:7px
}
a.t:hover .go{gap:11px}
a.t{transition:transform .3s var(--ease)}
a.t:hover{transform:translateY(-3px)}

/* one statistic, given room */
.statline{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;justify-content:center;margin-top:20px}
.statline span{font-size:13.5px;color:var(--on-deep-soft)}
.statline b{color:var(--lagoon);font-weight:700}
/* the free embed is a road map, so tint it to the brand rather than fake satellite */
.satwrap iframe{filter:saturate(.62) contrast(1.06) sepia(.16) hue-rotate(-6deg) brightness(.97)}
.satwrap::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,34,37,.92) 0%,rgba(10,34,37,.35) 38%,transparent 62%),
             radial-gradient(52% 46% at 50% 44%,transparent 30%,rgba(10,34,37,.42) 92%)
}
.satwrap::after{background:none}
/* the map must sit above the section background, and the scrim must be lighter */
.satwrap{background:#E9E3D6}
.satwrap iframe{z-index:0;filter:saturate(.7) contrast(1.03) sepia(.1) brightness(1.02)}
.satwrap::before{
  background:linear-gradient(to top,rgba(10,34,37,.88) 0%,rgba(10,34,37,.28) 34%,transparent 56%)
}

/* ============================================================
   v15 — scroll cues, section rhythm, referral steps
   ============================================================ */

/* ---------- a proper "scroll" invitation in the hero ---------- */
.scroll-cue{
  bottom:22px;gap:10px;font-size:10.5px;letter-spacing:.22em;color:rgba(247,237,221,.72);
  animation:cueFloat 2.8s ease-in-out infinite
}
.scroll-cue i{
  width:1px;height:34px;
  background:linear-gradient(to bottom,transparent,rgba(247,237,221,.85));
  animation:none
}
.scroll-cue .tip{
  display:block;width:8px;height:8px;border-right:1px solid rgba(247,237,221,.85);
  border-bottom:1px solid rgba(247,237,221,.85);transform:rotate(45deg);margin-top:-5px
}
@keyframes cueFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media(prefers-reduced-motion:reduce){.scroll-cue{animation:none}}

/* ---------- keep-scrolling hint above the pin progress bar ---------- */
.pin-hint{
  position:absolute;left:50%;bottom:58px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,247,248,.5);
  transition:opacity .4s ease
}
.pin-hint .arr{
  width:9px;height:9px;border-right:1px solid rgba(242,247,248,.6);
  border-bottom:1px solid rgba(242,247,248,.6);transform:rotate(45deg);
  animation:hintDrop 2.2s ease-in-out infinite
}
@keyframes hintDrop{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}
.pin-hint.gone{opacity:0}
@media(prefers-reduced-motion:reduce){.pin-hint .arr{animation:none}}

/* ---------- a warm ground so sections stop repeating themselves ---------- */
.g-sandy{
  background:
    radial-gradient(58% 50% at 14% 6%,rgba(221,208,188,.9),transparent 66%),
    radial-gradient(52% 46% at 88% 92%,rgba(180,154,106,.42),transparent 70%),
    linear-gradient(160deg,#F1E8D8 0%,#E7DCC7 52%,#DED2BA 100%);
  color:var(--cacao)
}
.g-sandy h1,.g-sandy h2,.g-sandy h3{color:var(--deep)}
.g-sandy .kick{color:#7A5F2E}
.g-sandy .mega .n{
  background:linear-gradient(168deg,var(--deep) 18%,var(--tide) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.g-sandy .mega .n sup{-webkit-text-fill-color:#8A6A2A}
.g-sandy .mega .cap{color:#5A4A3C}
.g-sandy .mega .src{color:#645646}
.g-sandy .statline span{color:#5A4A3C}
.g-sandy .statline b{color:var(--deep)}

/* ---------- referral: the three steps after they refer ---------- */
.steps3{display:grid;gap:12px;margin-top:20px}
.step3{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:16px 18px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.6)
}
.step3 .n{
  width:26px;height:26px;border-radius:50%;background:var(--deep);color:var(--shell);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none
}
.step3.done .n{background:var(--tide-ink)}
.step3 h4{font-size:16px;font-weight:600;color:var(--deep);margin:0 0 3px;letter-spacing:-.015em}
.step3 p{font-size:14.5px;color:var(--ink-soft);margin:0}
.step3 .btn{margin-top:10px}
.ref-done{display:none}
.ref.sent .ref-done{display:block}
.ref.sent .ref-ask{display:none}

/* ============================================================
   v16 — Brand Identity Kit v1.2 + the manual's editorial grammar
   Libre Baskerville runs large and has no light weight, so every
   serif size from the Cormorant era is rescaled here.
   ============================================================ */

/* ---------- serif recalibration ---------- */
.display,.display-sm,.pin-type,.finale .word,.wm.serif,.quote p,.ref h2,
.modal-body h2,.press .hl,.newscard .hl,.manual-cover .mc-title,.mega .n{
  font-weight:400
}
.display{font-size:clamp(33px,6.6vw,68px);line-height:1.08;letter-spacing:-.022em}
.display-sm{font-size:clamp(26px,4.3vw,44px);line-height:1.14;letter-spacing:-.018em}
.pin-type{font-size:clamp(24px,4.2vw,52px);line-height:1.18;letter-spacing:-.022em;max-width:19ch}
.finale .word{font-size:clamp(38px,9.4vw,116px);line-height:.98;letter-spacing:-.035em}
.quote p{font-size:19px;line-height:1.45}
.ref h2,.modal-body h2{font-size:clamp(22px,2.9vw,30px);line-height:1.18}
.press .hl,.newscard .hl{font-size:17px;line-height:1.3}

/* the manual sets one phrase of every headline in italic reef blue */
.display em,.display-sm em{font-style:italic;color:var(--reef)}
.g-deep .display em,.g-deep2 .display em,.g-deep3 .display em,
.g-deep .display-sm em,.g-deep2 .display-sm em,.g-deep3 .display-sm em,
.g-reef .display em,.g-reef .display-sm em{color:var(--on-deep);opacity:.82}

/* ---------- grounds, straight off the kit ---------- */
.g-reef{background:var(--reef);color:var(--on-deep)}
.g-reef h1,.g-reef h2,.g-reef h3,.g-reef h4{color:#fff}
.g-reef .label,.g-reef .kick{color:rgba(255,255,255,.72)}
.g-reef p,.g-reef .lead{color:rgba(255,255,255,.88)}
.g-deep3{background:var(--deep);color:var(--on-deep)}
.g-deep3 h1,.g-deep3 h2,.g-deep3 h3,.g-deep3 h4{color:#fff}
.g-deep3 .label,.g-deep3 .kick{color:var(--gold)}
.g-deep3 p,.g-deep3 .lead{color:var(--on-deep-soft)}
.g-foam{background:var(--foam);color:var(--ink)}
.g-foam h1,.g-foam h2,.g-foam h3{color:var(--deep)}
.g-foam .label,.g-foam .kick{color:var(--gold-ink)}
.g-paper{background:var(--paper);color:var(--ink)}
.g-paper .label,.g-paper .kick{color:var(--gold-ink)}

/* ---------- the chapter opener: eyebrow, serif head, short rule ---------- */
.chap{max-width:62ch}
.chap .no{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:14px
}
.g-deep3 .chap .no,.g-reef .chap .no,.g-deep .chap .no,.g-deep2 .chap .no{color:var(--gold)}
.g-reef .chap .no{color:rgba(255,255,255,.66)}
.chap h2{font-family:var(--serif);font-weight:400;color:var(--deep);
  font-size:clamp(27px,4.4vw,46px);line-height:1.14;letter-spacing:-.022em}
.g-deep3 .chap h2,.g-reef .chap h2,.g-deep .chap h2,.g-deep2 .chap h2{color:#fff}
.chap h2 em{font-style:italic;color:var(--reef)}
.g-deep3 .chap h2 em,.g-reef .chap h2 em{color:var(--on-deep);opacity:.82}
.chap .bar{display:block;width:58px;height:2px;background:var(--gold);margin:18px 0 0}
.g-reef .chap .bar{background:rgba(255,255,255,.5)}
.chap .deck{
  font-family:var(--serif);font-weight:400;color:var(--reef-ink);
  font-size:clamp(17px,2.2vw,22px);line-height:1.42;margin:22px 0 0;max-width:46ch
}
.chap .deck em{font-style:italic}
.g-deep3 .chap .deck,.g-deep .chap .deck,.g-deep2 .chap .deck{color:var(--on-deep-soft)}
.g-reef .chap .deck{color:rgba(255,255,255,.9)}

/* ---------- the four-number strip ---------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:var(--s4) 0 0}
.fig{padding:20px 18px 22px;border-top:3px solid var(--line-strong);background:var(--paper)}
.fig .n{
  font-family:var(--serif);font-weight:400;font-size:clamp(23px,3vw,31px);
  line-height:1;color:var(--deep);display:block
}
.fig .t{font-size:13.5px;line-height:1.42;color:var(--ink-soft);margin:9px 0 0}
.fig .src{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink-dim);margin:8px 0 0}
.fig:nth-child(1){background:var(--deep);border-top-color:var(--gold)}
.fig:nth-child(1) .n{color:#fff}
.fig:nth-child(1) .t{color:var(--on-deep-soft)}
.fig:nth-child(1) .src{color:rgba(175,203,214,.72)}
.fig:nth-child(2){background:var(--paper);border-top-color:var(--reef)}
.fig:nth-child(2) .n{color:var(--reef-ink)}
.fig:nth-child(3){background:var(--foam);border-top-color:var(--reef)}
.fig:nth-child(3) .n{color:var(--reef-ink)}
.fig:nth-child(4){background:var(--shell);border-top-color:var(--gold)}
.fig:nth-child(4) .n{color:var(--gold-ink)}
@media(max-width:860px){.figs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.figs{grid-template-columns:1fr}}

/* ---------- the two-tone panel pair ---------- */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:var(--s4) 0 0}
.panel{padding:24px 24px 26px}
.panel h4{
  font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  margin:0 0 12px
}
.panel p{font-size:15px;line-height:1.58;margin:0 0 10px}
.panel p:last-child{margin-bottom:0}
.panel b,.panel strong{font-weight:600}
.panel.cream{background:var(--shell);color:var(--ink)}
.panel.cream h4{color:var(--gold-ink)}
.panel.cream b{color:var(--reef-ink)}
.panel.blue{background:var(--reef);color:#fff}
.panel.blue h4{color:rgba(255,255,255,.76)}
.panel.blue b{color:#fff}
.panel.ice{background:var(--foam);color:var(--ink)}
.panel.ice h4{color:var(--reef-ink)}
.panel.ice b{color:var(--reef-ink)}
@media(max-width:760px){.panels{grid-template-columns:1fr}}

/* ---------- the three-card row from "three ways to train" ---------- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:var(--s4) 0 0}
.way{display:flex;flex-direction:column;background:var(--shell);overflow:hidden}
.way .top{
  background:var(--foam);padding:14px 18px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--reef-ink)
}
.way .art{display:block;width:100%;height:132px;object-fit:cover;background:var(--foam)}
.way .body{padding:20px 20px 22px;flex:1}
.way h3{
  font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;
  color:var(--deep);margin:0
}
.way .when{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin:7px 0 14px
}
.way p{font-size:14.5px;line-height:1.56;color:var(--ink-soft);margin:0 0 10px}
.way .suits{font-size:14px;line-height:1.5;color:var(--ink);margin:14px 0 0}
.way .suits b{color:var(--reef-ink);font-weight:600}
.way.feature{background:var(--reef)}
.way.feature .top{background:rgba(255,255,255,.14);color:rgba(255,255,255,.84)}
.way.feature h3,.way.feature .big{color:#fff}
.way.feature .when{color:rgba(255,255,255,.72)}
.way.feature p,.way.feature .suits{color:rgba(255,255,255,.9)}
.way.feature .suits b{color:#fff}
.way .big{
  font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;
  color:var(--deep);display:block;margin:14px 0 2px
}
@media(max-width:860px){.ways{grid-template-columns:1fr}}

/* ---------- the numbered walk-through ---------- */
.walk{counter-reset:w;display:grid;grid-template-columns:1fr 1fr;gap:20px 34px;margin:var(--s4) 0 0}
.walk > div{counter-increment:w;position:relative;padding-left:42px}
.walk > div::before{
  content:counter(w,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--serif);font-size:17px;color:var(--gold);line-height:1.3
}
.walk h4{font-size:15.5px;font-weight:600;color:var(--reef-ink);margin:0 0 5px}
.walk p{font-size:14.5px;line-height:1.56;color:var(--ink-soft);margin:0}
.g-deep3 .walk h4{color:#fff}
.g-deep3 .walk p{color:var(--on-deep-soft)}
@media(max-width:720px){.walk{grid-template-columns:1fr}}

/* ---------- the source line the manual puts under every figure ---------- */
.srcline{
  font-size:12px;line-height:1.5;color:var(--ink-dim);margin:14px 0 0;max-width:72ch
}
.srcline b{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;color:var(--ink-soft)}
.g-deep3 .srcline,.g-deep .srcline,.g-deep2 .srcline{color:rgba(175,203,214,.7)}
.g-deep3 .srcline b,.g-deep .srcline b{color:rgba(175,203,214,.9)}
sup.fn{font-size:.62em;vertical-align:super;line-height:0;color:var(--reef);font-weight:600;margin-left:1px}
.g-deep3 sup.fn,.g-reef sup.fn{color:var(--gold)}

/* ---------- the full-bleed part divider ---------- */
.part{background:var(--reef);color:#fff;padding:clamp(80px,14vw,170px) 0}
.part .num{
  font-family:var(--serif);font-weight:400;font-size:clamp(90px,17vw,190px);
  line-height:.8;color:rgba(255,255,255,.26);display:block;letter-spacing:-.04em
}
.part .lbl{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin:30px 0 10px
}
.part h2{
  font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(34px,7vw,74px);line-height:1.02;letter-spacing:-.03em;margin:0
}
.part .deck{
  font-family:var(--serif);font-weight:400;color:rgba(255,255,255,.9);
  font-size:clamp(17px,2.3vw,23px);line-height:1.45;margin:26px 0 0;max-width:40ch
}

/* ---------- the shell diagram band ---------- */
.band{background:var(--shell);padding:clamp(22px,3.4vw,34px);margin:var(--s4) 0 0}
.band.ice{background:var(--foam)}
.band .cap{
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--reef-ink);margin:0 0 16px;text-align:center
}
.band img,.band svg{display:block;width:100%;height:auto}

/* ---------- the running header rule the manual uses ---------- */
.crumbs{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin:0 0 26px;
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase
}
.crumbs .l{color:var(--reef-ink)}
.crumbs .r{color:var(--gold-ink);text-align:right}
.g-deep3 .crumbs,.g-reef .crumbs{border-bottom-color:var(--line-deep)}
.g-deep3 .crumbs .l,.g-reef .crumbs .l{color:#fff}
.g-deep3 .crumbs .r,.g-reef .crumbs .r{color:var(--gold)}
@media(max-width:560px){.crumbs .r{display:none}}

/* ---------- brand logo in the chrome ---------- */
.brandmark{display:block;height:38px;width:auto}
.nav .brandmark{height:34px}
@media(max-width:560px){.nav .brandmark{height:28px}}

/* ---------- hero, in the manual's cover language ---------- */
.hero-eyebrow{
  font-size:clamp(10px,1.3vw,11.5px);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin:0 0 18px;max-width:46ch;line-height:1.7
}
.hero-copy h1{
  font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(31px,5.6vw,62px);line-height:1.06;letter-spacing:-.028em;margin:0
}
.hero-copy h1 em{font-style:italic;color:#fff;opacity:.84}
.hero-copy .sub{font-size:clamp(15px,1.9vw,17.5px);line-height:1.55;color:rgba(255,255,255,.88);margin:20px 0 0;max-width:42ch}
.hero-copy .sub b{font-weight:600;color:#fff}

/* a shallower section, for the numbers strip under the hero */
.sec.tight-sec{padding-top:clamp(40px,6vw,62px);padding-bottom:clamp(40px,6vw,62px)}

.finale-mark{display:block;width:96px;height:auto;margin:0 auto}

/* the pinned line now sits on reef blue */
.pin.g-reef .pin-type w{color:rgba(255,255,255,.22)}
.pin.g-reef .pin-type w.lit{color:#fff}
.pin.g-reef .pin-type w.key.lit{color:var(--shell)}
.pin.g-reef .pin-prog{background:rgba(255,255,255,.2)}
.pin.g-reef .pin-prog i{background:#fff}
.pin.g-reef .pin-hint{color:rgba(255,255,255,.62)}
.pin.g-reef .pin-hint .arr{border-color:rgba(255,255,255,.7)}

/* the white ground needs its own body colour, the page default is cream */
.g-paper{background:var(--paper)}
.g-paper p,.g-paper .lead{color:var(--ink-soft)}
.g-paper h2,.g-paper h3,.g-paper h4{color:var(--deep)}

/* the trio cards, on deep blue */
.g-deep3 .trio .t{background:rgba(255,255,255,.06);border:1px solid var(--line-deep)}
.g-deep3 .trio .t h3{color:#fff}
.g-deep3 .trio .t p{color:var(--on-deep-soft)}
.g-deep3 .trio .t .go{color:var(--gold)}

/* footer brand */
.foot .brandmark{height:44px;margin-bottom:4px}

/* the intro now shows the primary logo, drawn in gold on the brand gradient */
.intro{
  background:
    radial-gradient(120% 90% at 18% 12%,rgba(31,122,153,.9),transparent 62%),
    radial-gradient(110% 90% at 86% 86%,rgba(15,59,76,.95),transparent 64%),
    linear-gradient(155deg,#1F7A99 0%,#17627C 40%,#0F3B4C 100%)
}
.intro-logo{
  display:block;width:min(260px,58vw);height:auto;
  opacity:0;transform:translateY(10px) scale(.97);
  animation:introLogo 1.15s cubic-bezier(.2,.7,.2,1) .12s forwards
}
@keyframes introLogo{to{opacity:1;transform:none}}
.intro-sub{color:rgba(255,255,255,.72)}
.intro-skip{color:rgba(255,255,255,.6)}
.intro-skip:hover{color:#fff}
@media(prefers-reduced-motion:reduce){.intro-logo{animation:none;opacity:1;transform:none}}

/* ---------- the hero wears the manual cover's blue wash ---------- */
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(15,59,76,.52) 0%,rgba(15,59,76,.18) 26%,rgba(15,59,76,.62) 62%,rgba(10,43,56,.93) 100%),
    linear-gradient(104deg,rgba(31,122,153,.58) 0%,rgba(31,122,153,.24) 46%,rgba(15,59,76,.5) 100%)
}
.hero h1{color:#fff;max-width:none}
.hero .hero-copy{max-width:min(720px,100%)}
.hero-eyebrow{max-width:62ch}
.hero .slimform .note{color:rgba(255,255,255,.76)}
.hero .slimform .note b{color:#fff}
.hero .slimform .note a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
@media(max-width:700px){
  .hero-eyebrow{font-size:9.5px;letter-spacing:.15em;max-width:34ch}
  .hero .hero-copy h1{font-size:clamp(29px,8.4vw,42px)}
}

/* panels sit inside sections that set their own p colour, so state it here */
.sec .panel.blue,.sec .panel.blue p,.g-paper .panel.blue p,.g-foam .panel.blue p{color:#fff}
.sec .panel.blue h4,.g-paper .panel.blue h4,.g-foam .panel.blue h4{color:rgba(255,255,255,.78)}
.sec .panel.blue b,.sec .panel.blue strong{color:#fff}
.sec .panel.cream p,.g-paper .panel.cream p,.g-foam .panel.cream p,
.sec .panel.ice p,.g-paper .panel.ice p,.g-foam .panel.ice p{color:var(--ink)}
.sec .panel.cream b,.sec .panel.ice b{color:var(--reef-ink)}
.sec .way p,.g-paper .way p{color:var(--ink-soft)}
.sec .way.feature p,.g-paper .way.feature p,.sec .way.feature .suits{color:rgba(255,255,255,.92)}
.sec .way .suits,.g-paper .way .suits{color:var(--ink)}
.sec .way.feature .when{color:rgba(255,255,255,.74)}
.sec .fig .t,.g-paper .fig .t,.g-shell .fig .t{color:var(--ink-soft)}
.sec .fig:nth-child(1) .t,.g-paper .fig:nth-child(1) .t,.g-shell .fig:nth-child(1) .t{color:var(--on-deep-soft)}
.sec .walk p,.g-foam .walk p{color:var(--ink-soft)}

/* ---------- gold is a mid tone, so it needs a tint per ground ----------
   #B38642 on deep blue is 3.66:1 and on reef blue it cannot pass at all,
   so small gold text gets lifted on deep and dropped for shell on reef. */
:root{--gold-on-deep:#CFA058}
.g-deep .label,.g-deep2 .label,.g-deep3 .label,
.g-deep .kick,.g-deep2 .kick,.g-deep3 .kick,
.g-deep3 .chap .no,.g-deep .chap .no,.g-deep2 .chap .no,
.g-deep3 .srcline b,.g-deep .srcline b,
.g-deep3 .trio .t .go,.g-deep3 sup.fn,
.foot h4{color:var(--gold-on-deep)}
.g-reef .chap .no,.g-reef .label,.g-reef .kick,.g-reef sup.fn,
.part .lbl,.finale .date{color:var(--shell)}
.g-reef .chap .bar,.part .bar{background:rgba(250,246,232,.55)}

/* ---------- the schematic map, drawn the way the manual draws it ----------
   An inline SVG instead of a Maps embed: nothing third party to block, no
   consent cookie to ask for, and it matches the book. */
.mapcard{background:var(--shell);padding:clamp(14px,2.2vw,26px);border-radius:4px}
.mapcard svg{display:block;width:100%;height:auto}
.mapcard .river{fill:none;stroke:#C9E2EA;stroke-width:13;stroke-linejoin:round}
.mapcard .road{fill:none;stroke:#E2DACA;stroke-width:9;stroke-linecap:round}
.mapcard .road.main{stroke:var(--gold);stroke-width:7;opacity:.85}
.mapcard .bridge{stroke:#1A2E38;stroke-width:4;stroke-linecap:round}
.mapcard .pt circle{fill:var(--reef)}
.mapcard text{font-family:var(--sans);font-size:12.5px;fill:var(--ink)}
.mapcard .pt text{font-size:12.5px;font-weight:500}
.mapcard .pt .sub{font-size:11px;fill:var(--ink-dim);font-weight:400}
.mapcard .end{text-anchor:end}
.mapcard .street{font-size:10.5px;font-weight:700;letter-spacing:.09em;fill:var(--ink-soft)}
.mapcard .rot{fill:var(--gold-ink)}
.mapcard .water{font-family:var(--serif);font-style:italic;font-size:12.5px;fill:#6E9FB0}
.mapcard .here .halo{fill:rgba(179,134,66,.18)}
.mapcard .here .ring{fill:none;stroke:var(--gold);stroke-width:2.5}
.mapcard .here .addr{text-anchor:middle;font-size:11.5px;fill:var(--ink-soft)}
.mapcard .here .name{text-anchor:middle;font-family:var(--serif);font-size:17px;fill:var(--reef-ink)}
.mapcard .walkline{stroke:var(--ink-soft);stroke-width:1.4;stroke-dasharray:4 4;fill:none}
.mapcard .carpark rect{fill:var(--reef)}
.mapcard .carpark text{text-anchor:middle;font-size:10px;font-weight:700;letter-spacing:.07em;fill:#fff}
.mapcard .walkt{text-anchor:end;font-size:11px;font-weight:600;letter-spacing:.07em;fill:var(--ink-soft)}
@media(max-width:620px){
  .mapcard text{font-size:15px}
  .mapcard .pt .sub,.mapcard .street,.mapcard .carpark text{font-size:13px}
}

.walktable{width:100%;border-collapse:collapse;margin-top:4px}
.walktable td{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:14.5px;line-height:1.35}
.walktable tr:last-child td{border-bottom:0}
.walktable td:nth-child(2),.walktable td:last-child{text-align:right;white-space:nowrap;padding-left:14px;font-variant-numeric:tabular-nums}
.walktable td:last-child{opacity:.72}

/* ---------- the finale on reef blue ---------- */
.g-reef .finale .word{color:#fff}
.g-reef .finale .word em{color:var(--shell);opacity:.78}
.g-reef .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.g-reef .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.g-reef .btn-light{background:var(--shell);color:var(--deep)}
.g-reef .btn-light:hover{background:#fff}

/* the brand name is never set in capitals */
.foot h4{text-transform:none;letter-spacing:.01em;font-size:13px}

/* At phone width an 880-unit viewBox shrinks the labels to about 6px, so the
   map gets its own scroller and keeps a legible minimum width. */
@media(max-width:700px){
  .mapcard{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:14px}
  .mapcard svg{min-width:660px}
  .mapcard::after{
    content:'Scroll the map sideways';display:block;margin-top:10px;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
    position:sticky;left:0
  }
}

/* ============================================================
   v17 — glass, organic edges, and a page that never sits still
   Everything here is suppressed under prefers-reduced-motion and
   by the user's own motion switch (html.motion-off).
   ============================================================ */

:root{
  --r-sm:14px; --r-md:22px; --r-lg:30px; --r-xl:42px;
  --glass-light:rgba(255,255,255,.58);
  --glass-dark:rgba(255,255,255,.08);
  --glass-edge:rgba(255,255,255,.55);
  --glass-edge-dark:rgba(255,255,255,.16);
  --glass-shadow:0 20px 50px -24px rgba(15,59,76,.38), 0 2px 8px -4px rgba(15,59,76,.18);
}

/* ---------- the glass surface ---------- */
.glass{
  position:relative;
  background:var(--glass-light);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
  box-shadow:var(--glass-shadow);
  overflow:hidden
}
/* the hairline of light along the top edge, the thing that sells it */
.glass::before{
  content:'';position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 22%,rgba(255,255,255,.9) 78%,transparent)
}
.g-deep .glass,.g-deep2 .glass,.g-deep3 .glass,.g-reef .glass,.part .glass{
  background:var(--glass-dark);border-color:var(--glass-edge-dark);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6)
}
.g-deep .glass::before,.g-deep2 .glass::before,.g-deep3 .glass::before,.g-reef .glass::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34) 25%,rgba(255,255,255,.34) 75%,transparent)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.9)}
  .g-deep .glass,.g-deep2 .glass,.g-deep3 .glass,.g-reef .glass{background:rgba(10,43,56,.84)}
}

/* ---------- nothing is a square block any more ---------- */
.fig{border-radius:var(--r-md)}
.figs{gap:14px}
.panel{border-radius:var(--r-lg)}
.way{border-radius:var(--r-lg)}
.way .art{border-radius:0}
.band,.mapcard{border-radius:var(--r-lg)}
.trio .t{border-radius:var(--r-md)}
.manual-cover img{border-radius:6px}
.btn{border-radius:999px}

/* the figure strip becomes glass, and lifts as you point at it */
.figs .fig{
  border-top-width:3px;border-top-style:solid;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)
}
.figs .fig:hover{transform:translateY(-6px)}

/* ---------- branch-like section transitions ----------
   A flowing edge instead of a ruled line. The curve drifts very
   slowly, so a section boundary is never completely still. */
.wave{position:relative;display:block;width:100%;height:clamp(46px,6vw,92px);margin:0;line-height:0}
.wave svg{display:block;width:140%;height:100%;margin-left:-20%}
.wave path{animation:flowDrift 26s ease-in-out infinite alternate}
@keyframes flowDrift{
  0%  {transform:translate3d(0,0,0) scaleY(1)}
  50% {transform:translate3d(-2.4%,2px,0) scaleY(1.05)}
  100%{transform:translate3d(-5%,0,0) scaleY(.97)}
}
.wave.up{transform:scaleY(-1)}

/* a section can also simply curve into the next one */
.sec.curve-top{border-start-start-radius:var(--r-xl);border-start-end-radius:var(--r-xl);margin-top:-1px}
.sec.curve-bot{border-end-start-radius:var(--r-xl);border-end-end-radius:var(--r-xl)}

/* ---------- the branch that grows down the walk-through ---------- */
.walk{position:relative}
.walk .branch{
  position:absolute;left:14px;top:0;width:3px;height:100%;pointer-events:none;
  overflow:visible
}
.walk .branch i{
  position:absolute;inset:0;display:block;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),rgba(179,134,66,.15));
  transform-origin:top;transform:scaleY(var(--grow,0));
  transition:transform .18s linear
}
.walk > div::before{
  z-index:2;background:var(--foam);border-radius:50%;width:26px;height:26px;
  display:grid;place-items:center;left:2px;top:-3px;
  box-shadow:0 0 0 3px var(--foam)
}
@media(max-width:720px){.walk .branch{display:none}}

/* ---------- text that underlines itself ---------- */
.ul{
  position:relative;white-space:nowrap;
  background-image:linear-gradient(90deg,var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
  transition:background-size .7s cubic-bezier(.62,0,.2,1);
  padding-bottom:2px
}
.ul.drawn{background-size:100% 2px}
.g-deep3 .ul,.g-reef .ul,.g-deep .ul,.part .ul{
  background-image:linear-gradient(90deg,var(--shell),var(--shell))
}
/* every link in running copy gets the same sweep, on hover */
.sec p a:not(.btn),.panel a:not(.btn),.srcline a{
  background-image:linear-gradient(90deg,currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  text-decoration:none;transition:background-size .34s var(--ease)
}
.sec p a:not(.btn):hover,.panel a:not(.btn):hover,.srcline a:hover{background-size:0% 1px}

/* ---------- the three second pulse ----------
   A conductor in site.js lights exactly one on screen element at a
   time, so there is always something moving without everything moving. */
.pulsing{animation:pulseLift 1.5s cubic-bezier(.33,1,.5,1)}
@keyframes pulseLift{
  0%{transform:translateY(0) scale(1)}
  28%{transform:translateY(-7px) scale(1.012)}
  100%{transform:translateY(0) scale(1)}
}
.fig.pulsing,.way.pulsing,.panel.pulsing,.trio .t.pulsing{
  box-shadow:0 26px 60px -26px rgba(15,59,76,.5)
}
.sheen{position:relative;overflow:hidden}
.sheen.pulsing::after{
  content:'';position:absolute;top:0;bottom:0;width:48%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  animation:sheenSweep 1.5s cubic-bezier(.4,0,.2,1);pointer-events:none
}
@keyframes sheenSweep{from{left:-55%}to{left:105%}}

/* a quiet breath on the big coloured grounds */
.g-reef,.g-deep3,.part{position:relative}
.g-reef::after,.part::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 50% at 22% 18%,rgba(255,255,255,.14),transparent 70%);
  animation:breathe 11s ease-in-out infinite alternate
}
.g-reef > *,.part > *{position:relative;z-index:1}
@keyframes breathe{from{opacity:.45;transform:translate3d(0,0,0) scale(1)}
                   to{opacity:.95;transform:translate3d(3%,2%,0) scale(1.1)}}

/* ---------- the motion switch ---------- */
.motion-toggle{
  position:fixed;right:14px;bottom:calc(var(--dock-h,76px) + 14px);z-index:120;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--deep);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(255,255,255,.6);border-radius:999px;
  box-shadow:0 10px 26px -14px rgba(15,59,76,.5)
}
.motion-toggle:hover{background:rgba(255,255,255,.82)}
.motion-toggle .dot{width:7px;height:7px;border-radius:50%;background:var(--reef);flex:none;
  animation:dotBlink 2.4s ease-in-out infinite}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.25}}
html.motion-off .motion-toggle .dot{background:var(--ink-dim);animation:none}
@media(max-width:700px){.motion-toggle{right:10px;bottom:calc(var(--dock-h,76px) + 10px);padding:8px 11px;font-size:11px}}

/* one switch turns the whole lot off */
html.motion-off .wave path,
html.motion-off .g-reef::after,
html.motion-off .part::after,
html.motion-off .motion-toggle .dot,
html.motion-off .pin-hint .arr,
html.motion-off .scroll-cue{animation:none!important}
html.motion-off .pulsing{animation:none!important}
html.motion-off .sheen.pulsing::after{display:none}
html.motion-off .ul{transition:none}

@media(prefers-reduced-motion:reduce){
  .wave path,.g-reef::after,.part::after,.motion-toggle .dot{animation:none!important}
  .pulsing{animation:none!important}
  .sheen.pulsing::after{display:none}
  .ul{transition:none;background-size:100% 2px}
  .figs .fig{transition:none}
}

/* the flowing edge carries the colour it is leaving, and fills with
   the colour it is arriving at */
.wave.f-paper{background:var(--paper)} .wave.t-paper path{fill:var(--paper)}
.wave.f-shell{background:var(--shell)} .wave.t-shell path{fill:var(--shell)}
.wave.f-foam{background:var(--foam)}   .wave.t-foam path{fill:var(--foam)}
.wave.f-reef{background:var(--reef)}   .wave.t-reef path{fill:var(--reef)}
.wave.f-deep{background:var(--deep)}   .wave.t-deep path{fill:var(--deep)}
.wave.f-none{background:transparent}

/* the switch shrinks to its dot on a phone, so it never fights the dock */
@media(max-width:620px){
  .motion-toggle{padding:9px;gap:0}
  .motion-toggle .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .motion-toggle .dot{width:9px;height:9px}
}

/* ---------- the walk through is one growing stem, at every width ----------
   Two columns made the branch relate only to the left half, which read as a
   stray line. One column is what the thing actually is: a route in order. */
.walk{grid-template-columns:1fr;max-width:760px;gap:26px;padding-left:4px}
@media(max-width:720px){.walk{grid-template-columns:1fr}}
.walk .branch{display:block}
.walk > div{padding-left:52px}
.walk > div::before{
  content:counter(w,decimal-leading-zero);
  width:30px;height:30px;left:0;top:-4px;
  font-size:12px;font-weight:600;font-family:var(--sans);letter-spacing:.04em;
  color:var(--reef-ink);background:var(--paper);
  border:1px solid rgba(15,59,76,.16);box-shadow:none
}
.g-foam .walk > div::before{background:var(--foam);border-color:rgba(15,59,76,.14)}
.walk .branch{left:15px;width:2px}
.walk h4{font-size:16.5px}

/* the switch has to stay findable on a white ground */
.motion-toggle{border-color:rgba(15,59,76,.18);box-shadow:0 10px 26px -12px rgba(15,59,76,.45),0 0 0 1px rgba(255,255,255,.6) inset}
.motion-toggle:focus-visible{outline:2px solid var(--reef);outline-offset:3px}
@media(max-width:620px){.motion-toggle{padding:10px;background:rgba(255,255,255,.86)}}

/* ---------- glass TINTS a surface, it does not repaint it ----------
   .glass sets its own background, which was wiping out the cream, ice
   and blue variants and leaving cream text on dark glass. Each variant
   keeps its own colour, just translucent. */
.panel.cream.glass,.g-deep3 .panel.cream.glass,.g-reef .panel.cream.glass{background:rgba(250,246,232,.88)}
.panel.ice.glass,.g-deep3 .panel.ice.glass{background:rgba(234,243,244,.86)}
.panel.blue.glass,.g-deep3 .panel.blue.glass,.g-reef .panel.blue.glass{background:rgba(31,122,153,.86)}
.panel.cream.glass,.panel.ice.glass{border-color:rgba(255,255,255,.7)}
.panel.blue.glass{border-color:rgba(255,255,255,.26)}
.panel.blue.glass::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 25%,rgba(255,255,255,.4) 75%,transparent)}

.way.glass{background:rgba(250,246,232,.9)}
.way.feature.glass{background:rgba(31,122,153,.9);border-color:rgba(255,255,255,.26)}

.fig.glass{background:rgba(255,255,255,.72)}
.figs .fig.glass:nth-child(1){background:rgba(15,59,76,.92);border-color:rgba(255,255,255,.18)}
.figs .fig.glass:nth-child(3){background:rgba(234,243,244,.86)}
.figs .fig.glass:nth-child(4){background:rgba(250,246,232,.9)}
.figs .fig.glass:nth-child(1)::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.3) 25%,rgba(255,255,255,.3) 75%,transparent)}

.mapcard.glass{background:rgba(250,246,232,.94)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .panel.cream.glass{background:var(--shell)} .panel.ice.glass{background:var(--foam)}
  .panel.blue.glass{background:var(--reef)}   .way.glass{background:var(--shell)}
  .way.feature.glass{background:var(--reef)}  .mapcard.glass{background:var(--shell)}
  .fig.glass{background:var(--paper)}
  .figs .fig.glass:nth-child(1){background:var(--deep)}
  .figs .fig.glass:nth-child(3){background:var(--foam)}
  .figs .fig.glass:nth-child(4){background:var(--shell)}
}

/* the breathing highlight lifts the reef ground a touch, which drops shell
   text to 4.45:1 — pure white keeps these two above AA */
.part .lbl,.g-reef .finale .date{color:#fff}

/* ============================================================
   v18 — a lighter hero, real mastheads, the reworked pin,
   the reading section and a real map
   ============================================================ */

/* ---------- 1. the hero goes light blue and gold, and glassy ---------- */
.hero{background:var(--foam)}
.hero-media img{object-position:center 54%}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(177deg,rgba(234,243,244,.34) 0%,rgba(234,243,244,0) 34%),
    linear-gradient(8deg,rgba(15,59,76,.74) 0%,rgba(31,122,153,.40) 42%,rgba(127,182,198,.16) 72%,rgba(250,246,232,.12) 100%),
    radial-gradient(76% 58% at 12% 88%,rgba(31,122,153,.44),transparent 72%),
    radial-gradient(60% 50% at 92% 8%,rgba(179,134,66,.30),transparent 70%)
}
.hero-in{color:#fff}
.hero-copy h1{text-shadow:0 2px 34px rgba(10,43,56,.34)}
.hero-copy .sub{color:rgba(255,255,255,.94);text-shadow:0 1px 18px rgba(10,43,56,.4)}

/* the email bar becomes a single pill of glass */
.hero .slimform .row{
  background:rgba(255,255,255,.17);
  -webkit-backdrop-filter:saturate(180%) blur(26px);backdrop-filter:saturate(180%) blur(26px);
  border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:6px;
  box-shadow:0 26px 60px -28px rgba(10,43,56,.75),0 0 0 1px rgba(255,255,255,.14) inset
}
.hero .slimform input{background:transparent;border:0;color:#fff;padding-inline:22px}
.hero .slimform input::placeholder{color:rgba(255,255,255,.72)}
.hero .slimform button{
  border-radius:999px;background:var(--gold);color:#241C16;border:0;
  box-shadow:0 10px 24px -12px rgba(179,134,66,.9)
}
.hero .slimform button:hover{background:#C79A52}

/* the countdown chip */
.countdown{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  padding:9px 16px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  color:#fff
}
.countdown .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 0 rgba(179,134,66,.8);animation:ctPulse 2.6s ease-out infinite}
@keyframes ctPulse{0%{box-shadow:0 0 0 0 rgba(179,134,66,.75)}70%{box-shadow:0 0 0 11px rgba(179,134,66,0)}100%{box-shadow:0 0 0 0 rgba(179,134,66,0)}}
.countdown:empty,.countdown.hide{display:none}
.countdown.solo{margin:22px auto 0;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
html.motion-off .countdown .dot{animation:none}

/* ---------- 2. the mastheads ---------- */
.logowall{padding-block:8px}
.wm{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding-inline:clamp(18px,2.6vw,34px);flex:none;
  color:var(--deep);opacity:.74;transition:opacity .3s var(--ease),transform .3s var(--ease);
  text-decoration:none;white-space:nowrap
}
.wm:hover{opacity:1;transform:translateY(-2px)}
.wm span{display:block;line-height:1}
.wm-vogue span{font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:.12em;text-transform:uppercase}
.wm-cnn span{font-family:var(--sans);font-weight:700;font-size:30px;letter-spacing:-.04em}
.wm-mclaire span{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.015em}
.wm-today span{font-family:var(--sans);font-weight:600;font-size:23px;letter-spacing:.3em;text-transform:uppercase}
.wm-cth span{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.02em}
.wm-medscape span{font-family:var(--sans);font-weight:700;font-size:21px;letter-spacing:.055em;text-transform:uppercase}
.wm-athletech span{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.018em}
.wm-classpass span{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:-.02em}
.wm-swl span{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:.14em;text-transform:uppercase}
.wm-psuk span{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:.03em}
/* it never stops, not for hover and not for the pointer sitting on it */
.logowall[data-nopause] .logowall-track{animation-play-state:running!important}
.logowall[data-nopause]:hover .logowall-track{animation-play-state:running!important}
html.motion-off .logowall-track{animation-play-state:paused!important}

/* ---------- 3-6. the pinned line, reworked ----------
   The copy sits half its own height above centre, holds there while the
   words light, and the section below rises the last 20vh over the top. */
.pin{position:relative;height:230svh;margin-bottom:-20svh;contain:paint}
.pin-stage{
  position:sticky;top:0;height:100svh;display:grid;place-items:center;
  padding:0 22px;overflow:hidden;will-change:transform
}
.pin-type{transform:translateY(-50%);will-change:contents}
.pin-hint{bottom:94px}
.sec.rise,section.rise{position:relative;z-index:3;will-change:transform}
.pin + .wave,.pin + .sec,.pin + section{transform:translateY(20svh)}

/* ---------- 10. fewer glitches ---------- */
.rv,.rv-up,.rv-left,.rv-scale{will-change:opacity,transform;backface-visibility:hidden}
.rv.in,.rv-up.in,.rv-left.in,.rv-scale.in{will-change:auto}
.wave{contain:paint}
.wave path{will-change:transform}
.figs .fig,.way,.panel{transform:translateZ(0)}

/* ---------- 11. the reading section ---------- */
.reads{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:var(--s4)}
.read{
  display:flex;flex-direction:column;padding:24px 22px 22px;text-decoration:none;
  border-radius:var(--r-lg);transition:transform .45s var(--ease),box-shadow .45s var(--ease)
}
.read:hover{transform:translateY(-6px);box-shadow:0 30px 64px -28px rgba(15,59,76,.46)}
.read .k{
  font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:14px
}
.read h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.2;color:var(--deep);margin:0 0 10px}
.read p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 18px;flex:1}
.read .go{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--reef-ink)}
.read:hover .go{color:var(--deep)}
@media(max-width:980px){.reads{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.reads{grid-template-columns:1fr}}

/* ---------- 13. the real map ---------- */
.mapcard{position:relative;padding:0;overflow:hidden}
.mapcard img{display:block;width:100%;height:auto}
.mappin{position:absolute;left:46.4%;top:50%;width:0;height:0}
.mappin .dot{
  position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--gold);border:3px solid #fff;box-shadow:0 4px 14px rgba(10,43,56,.5)
}
.mappin .ping{
  position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:rgba(179,134,66,.55);animation:mapPing 2.8s cubic-bezier(.2,.6,.3,1) infinite
}
@keyframes mapPing{0%{transform:scale(1);opacity:.8}70%{transform:scale(4.6);opacity:0}100%{opacity:0}}
html.motion-off .mappin .ping{animation:none;opacity:0}
.maptag{
  position:absolute;left:46.4%;top:50%;transform:translate(-50%,-250%);
  padding:7px 13px;border-radius:999px;white-space:nowrap;
  font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--deep);
  background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 22px -10px rgba(10,43,56,.5)
}
.mapcredit{
  position:absolute;right:8px;bottom:6px;font-size:10.5px;color:var(--ink-soft);
  background:rgba(255,255,255,.72);padding:3px 8px;border-radius:6px
}
.walktable td:nth-child(2){text-align:right;white-space:nowrap;padding-left:14px;font-variant-numeric:tabular-nums}
.walktable td:last-child{opacity:1}

/* ---------- 15. glassier, shinier, all through ---------- */
:root{--glass-light:rgba(255,255,255,.46);--glass-edge:rgba(255,255,255,.62)}
.glass{
  -webkit-backdrop-filter:saturate(195%) blur(26px);backdrop-filter:saturate(195%) blur(26px);
  box-shadow:0 24px 58px -26px rgba(15,59,76,.42),0 1px 0 0 rgba(255,255,255,.5) inset
}
/* a slow shine that travels across the glass */
.glass::after{
  content:'';position:absolute;inset:-40% -10%;pointer-events:none;z-index:0;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%);
  transform:translateX(-38%);transition:transform 1.1s var(--ease)
}
.glass:hover::after{transform:translateX(38%)}
.glass > *{position:relative;z-index:1}
html.motion-off .glass::after{display:none}
.nav{
  background:rgba(250,246,232,.62);
  -webkit-backdrop-filter:saturate(190%) blur(24px);backdrop-filter:saturate(190%) blur(24px);
  border-bottom:1px solid rgba(255,255,255,.5)
}
.dock{
  background:rgba(15,59,76,.74);
  -webkit-backdrop-filter:saturate(190%) blur(24px);backdrop-filter:saturate(190%) blur(24px);
  border:1px solid rgba(255,255,255,.18)
}

/* `.glass > *` sets position:relative on every child, which was knocking the
   map overlays out of absolute positioning — these need to outrank it */
.mapcard .mappin{position:absolute;left:46.4%;top:50%;width:0;height:0;z-index:3}
.mapcard .maptag{position:absolute;left:46.4%;top:50%;transform:translate(-50%,-260%);z-index:3}
.mapcard .mapcredit{position:absolute;right:8px;bottom:6px;z-index:3}
.mapcard img{position:relative;z-index:0}
/* the shine must not sit over the map */
.mapcard.glass::after{display:none}

/* The glass shine lives on ::after, and so does the photo scrim on the study
   cards — one was wiping out the other. Photo cards are not glass. */
.trio .t{background:var(--deep);border:0}
.trio .t::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,43,56,.9),rgba(10,43,56,.26) 58%,rgba(10,43,56,.08))}
.trio .t h3{color:#fff}
.trio .t p{color:rgba(242,247,248,.9)}
.trio .t .go{color:var(--gold-on-deep)}
.g-paper .trio .t h3{color:#fff}
.g-paper .trio .t p{color:rgba(242,247,248,.9)}
.g-paper .trio .t .go{color:var(--gold-on-deep)}
.trio .t{box-shadow:0 22px 52px -26px rgba(15,59,76,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.trio .t:hover{transform:translateY(-6px)}

/* ============================================================
   v22 — a centred pin, the facilities grid, the book as the
   headline read, the live map and the closing ask
   ============================================================ */

/* ---------- the pinned line sits dead centre, with even air ---------- */
.pin-type{transform:none}
.pin-stage{
  display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;
  padding:clamp(96px,13vh,132px) 22px
}
.pin-stage .pin-type{grid-row:1;align-self:center;margin:0}
.pin-stage .pin-hint{position:static;grid-row:2;margin:0 0 16px}
.pin-stage .pin-prog{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(40px,6vh,58px)}
.pin-hint.gone{opacity:0}

/* ---------- the facilities grid on the blue panel ---------- */
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(34px,5vw,54px)}
.bit{padding:22px 20px 24px;border-radius:var(--r-md)}
.bit .n{
  font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;
  color:#fff;display:block;margin-bottom:12px
}
.bit h4{font-size:15.5px;font-weight:600;color:#fff;margin:0 0 6px}
.bit p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.84);margin:0}
.part .bit.glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
@media(max-width:860px){.kit{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kit{grid-template-columns:1fr}}

/* ---------- the book, set above the guides ---------- */
.headline-read{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,46px);align-items:center;
  padding:clamp(26px,3.6vw,42px);border-radius:var(--r-xl);margin-top:var(--s4)
}
.headline-read .hr-cover img{
  display:block;width:clamp(140px,16vw,210px);height:auto;border-radius:6px;
  box-shadow:0 30px 60px -26px rgba(15,59,76,.55);transform:rotate(-2.2deg)
}
.headline-read .k{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:12px
}
.headline-read h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(23px,3.2vw,34px);
  line-height:1.14;color:var(--deep);margin:0 0 14px
}
.headline-read p{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0 0 22px;max-width:56ch}
.headline-read .small{margin-top:11px}
.also{
  margin:clamp(34px,5vw,52px) 0 0;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)
}
.also + .reads{margin-top:18px}
@media(max-width:760px){
  .headline-read{grid-template-columns:1fr;text-align:center;justify-items:center}
  .headline-read p{max-width:none}
  .headline-read .hr-cover img{transform:none}
}

/* ---------- the live map ---------- */
.mapbox{width:100%;height:clamp(340px,52vh,520px);background:var(--foam);z-index:0}
.mapbox.static img{display:block;width:100%;height:100%;object-fit:cover}
.mapcard .leaflet-container{font-family:var(--sans);background:var(--foam)}
.mapcard .leaflet-control-zoom a{
  width:34px;height:34px;line-height:32px;color:var(--deep);
  background:rgba(255,255,255,.9);border:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:19px
}
.mapcard .leaflet-control-zoom a:hover{background:#fff;color:var(--reef-ink)}
.mapcard .leaflet-control-zoom{border:0;border-radius:10px;overflow:hidden;box-shadow:0 8px 22px -10px rgba(10,43,56,.5)}
.mapcard .leaflet-control-attribution{
  background:rgba(255,255,255,.82);font-size:10.5px;color:var(--ink-soft);padding:2px 7px
}
.mapcard .leaflet-control-attribution a{color:var(--reef-ink)}
.reefpin .dot{
  position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:var(--gold);border:3px solid #fff;box-shadow:0 4px 14px rgba(10,43,56,.55)
}
.reefpin .ping{
  position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:rgba(179,134,66,.5);animation:mapPing 2.8s cubic-bezier(.2,.6,.3,1) infinite
}
html.motion-off .reefpin .ping{animation:none;opacity:0}
.reeftip{
  background:rgba(255,255,255,.92);border:0;border-radius:999px;color:var(--deep);
  font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 12px;
  box-shadow:0 8px 20px -10px rgba(10,43,56,.5)
}
.reeftip::before{display:none}

/* ---------- the last ask ---------- */
.lastask{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4.4vw,56px);align-items:center
}
.lastask .la-cover img{width:clamp(160px,19vw,250px);height:auto;display:block}
.lastask .no{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:12px
}
.lastask h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.6vw,48px);
  line-height:1.1;color:var(--deep);margin:0
}
.lastask .bar{display:block;width:58px;height:2px;background:var(--gold);margin:18px 0 0}
.lastask .deck{font-size:16.5px;line-height:1.6;color:var(--ink-soft);margin:20px 0 26px;max-width:52ch}
.slimform.wide{max-width:540px}
.slimform.wide .row{
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8);border-radius:999px;padding:6px;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 20px 44px -24px rgba(15,59,76,.45)
}
.slimform.wide input{background:transparent;border:0;color:var(--ink);padding-inline:20px}
.slimform.wide input::placeholder{color:var(--ink-dim)}
.slimform.wide button{border-radius:999px;background:var(--deep);color:var(--shell);border:0}
.slimform.wide button:hover{background:var(--reef)}
.slimform.wide .note{color:var(--ink-dim);margin-top:11px}
@media(max-width:760px){
  .lastask{grid-template-columns:1fr;justify-items:center;text-align:center}
  .lastask .deck{max-width:none}
  .lastask .bar{margin-inline:auto}
  .slimform.wide{max-width:none;width:100%}
}

/* The hint was sitting in the grid flow and pushing the line off centre.
   The copy gets the whole stage; the hint and bar float over it. */
.pin-stage{display:grid;grid-template-rows:1fr;place-items:center;padding:clamp(90px,12vh,124px) 22px}
.pin-stage .pin-type{grid-row:1;margin:0}
.pin-stage .pin-hint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(78px,10vh,104px);margin:0
}
.pin-stage .pin-prog{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(40px,5.5vh,56px)}

/* ---------- the second door out of the hero ----------
   Not everyone arriving is ready to hand over an email. This gives the
   nervous visitor somewhere to go without competing with the gold CTA. */
.btn-alt{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  padding:11px 20px 11px 18px;border-radius:999px;text-decoration:none;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 14px 34px -20px rgba(10,43,56,.8);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)
}
.btn-alt:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.btn-alt:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn-alt .q{font-size:14px;color:rgba(255,255,255,.8)}
.btn-alt .a{font-size:14px;font-weight:600;color:#fff;white-space:nowrap}
.btn-alt .arrow{display:inline-block;transition:transform .3s var(--ease)}
.btn-alt:hover .arrow{transform:translateX(3px)}
@media(max-width:560px){
  .btn-alt{width:100%;justify-content:center;flex-wrap:wrap;gap:6px;padding:13px 18px}
  .btn-alt .q,.btn-alt .a{font-size:13.5px}
}

/* ============================================================
   v23 — the phone build
   Nearly everyone arrives on a phone, so this is the real layout:
   one spacing rhythm, one type scale, thumb sized targets, and the
   same animations as the desktop, just shorter.
   ============================================================ */
@media(max-width:760px){

  /* ---- one rhythm. Every section breathes the same ---- */
  :root{--mpad:56px; --wrap:min(1180px,100% - 36px)}
  .sec,.sec.tight-sec,.part,section.sec{padding-top:var(--mpad);padding-bottom:var(--mpad)}
  .proof-strip{padding-top:30px;padding-bottom:30px}
  .wave{height:34px}

  /* ---- one type scale, sized to be read at arm's length ---- */
  .chap h2,.part h2{font-size:clamp(27px,7.4vw,34px);line-height:1.16}
  .chap .deck,.part .deck{font-size:16.5px;line-height:1.52;margin-top:16px;max-width:none}
  .chap .no,.part .lbl{font-size:11px;letter-spacing:.17em}
  .chap .bar{margin-top:16px}
  p,.lead{font-size:16px}
  .srcline{font-size:13px;line-height:1.55;margin-top:18px}

  /* ---- hero ---- */
  .hero{min-height:auto;padding-bottom:30px}
  .hero-in{padding-block:40px 30px}
  .hero-copy h1{font-size:clamp(30px,8.6vw,40px);line-height:1.08}
  .hero-copy .sub{font-size:16px;margin-top:16px}
  .hero-eyebrow{display:none}            /* the countdown chip says it better */
  .countdown{font-size:11px;padding:9px 14px;margin-bottom:16px}
  .hero .slimform .row{flex-direction:column;gap:6px;padding:7px;border-radius:26px}
  .hero .slimform input{min-height:50px;font-size:16px;text-align:center}
  .hero .slimform button{min-height:52px;width:100%;font-size:16px}
  .hero .slimform .note{text-align:center;margin-top:12px}
  .btn-alt{margin-top:14px}

  /* ---- the four numbers read as a list, not a cramped grid ---- */
  .figs{grid-template-columns:1fr 1fr;gap:10px}
  .fig{padding:16px 14px 18px}
  .fig .n{font-size:26px}
  .fig .t{font-size:13px;line-height:1.38;margin-top:7px}
  .fig .src{font-size:10.5px;margin-top:6px}

  /* ---- the pinned lines are shorter, so the thumb is not working ---- */
  .pin{height:175svh;margin-bottom:-14svh}
  .pin + .wave,.pin + .sec,.pin + section{transform:translateY(14svh)}
  .pin-stage{padding:clamp(76px,11vh,100px) 20px}
  .pin-type{font-size:clamp(25px,7.2vw,34px);line-height:1.22;max-width:15ch}
  .pin-hint{bottom:66px;font-size:9.5px}
  .pin-prog{bottom:34px}

  /* ---- cards: fewer, bigger, easier ---- */
  .ways{gap:14px}
  .way .art{height:168px}
  .way .body{padding:20px 18px 22px}
  .way h3{font-size:22px}
  .way .big{font-size:38px}
  .way p,.way .suits{font-size:15px}
  .panels{gap:12px}
  .panel{padding:22px 20px 24px;border-radius:24px}
  .panel p{font-size:15.5px}
  .kit{gap:10px}
  .bit{padding:18px 18px 20px}
  .bit .n{font-size:26px;margin-bottom:9px}
  .trio{grid-template-columns:1fr;gap:12px}
  .trio .t{min-height:210px}
  .reads{gap:12px}
  .read{padding:20px 18px}
  .read h3{font-size:19px}
  .read p{font-size:15px;margin-bottom:14px}

  /* ---- the book, the thing we actually want them to take ---- */
  .headline-read{padding:26px 20px 28px;border-radius:30px;gap:20px}
  .headline-read .hr-cover img{width:150px;margin-inline:auto}
  .headline-read h3{font-size:24px}
  .headline-read p{font-size:15.5px;margin-bottom:20px}
  .headline-read .btn{width:100%}
  .lastask{gap:24px}
  .lastask h2{font-size:clamp(28px,8vw,38px)}
  .lastask .deck{font-size:16px;margin:18px 0 22px}
  .slimform.wide .row{flex-direction:column;gap:6px;padding:7px;border-radius:26px}
  .slimform.wide input{min-height:50px;font-size:16px;text-align:center}
  .slimform.wide button{min-height:52px;width:100%;font-size:16px}
  .slimform.wide .note{text-align:center}

  /* ---- the map ---- */
  .mapbox{height:320px}
  .walktable td{font-size:14.5px;padding:11px 0}

  /* ---- the finale ---- */
  .finale .word{font-size:clamp(42px,14vw,62px)}
  .finale .date{font-size:13px;letter-spacing:.14em}
  .finale .btns{flex-direction:column;gap:10px}
  .finale .btns .btn{width:100%}

  /* ---- thumbs need 48px, every time ---- */
  .btn{min-height:48px;padding-inline:22px}
  .btn-sm{min-height:44px}
  .read,.trio .t,.way{-webkit-tap-highlight-color:rgba(31,122,153,.12)}

  /* ---- nothing hides behind the sticky dock ---- */
  .foot{padding-bottom:calc(var(--dock-h,84px) + 20px)}
}

/* very small phones */
@media(max-width:380px){
  :root{--mpad:48px}
  .figs{grid-template-columns:1fr}
  .hero-copy h1{font-size:29px}
  .pin-type{font-size:23px}
}

/* the map stays locked on a phone until it is asked for, so a one finger
   drag never steals the page scroll */
.mapveil{
  position:absolute;inset:0;z-index:500;border:0;cursor:pointer;
  display:grid;place-items:center;font:inherit;
  background:rgba(10,43,56,.26);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)
}
.mapveil span{
  padding:11px 20px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--deep);
  font-size:14px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 10px 26px -12px rgba(10,43,56,.7)
}
.mapveil:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.mapbox.unlocked{box-shadow:inset 0 0 0 2px var(--gold)}

@media(max-width:760px){
  /* 11px uppercase is fine on a desktop and unreadable on a bus. Everything
     a visitor has to read is at least 13px on a phone. */
  .chap .no,.part .lbl,.headline-read .k,.lastask .no,.read .k,
  .way .when,.way .top,.panel h4,.bit h4,.crumbs,.proof-strip .cap,
  .countdown,.fig .src,.also{font-size:13px;letter-spacing:.12em}
  .panel h4{font-size:13.5px;letter-spacing:.1em}
  .way .top{padding:13px 18px}
  .pin-hint{font-size:12px;letter-spacing:.16em}
  .fig .t{font-size:14px}
  .fig .src{font-size:12px;letter-spacing:.02em}
  .srcline b{font-size:12.5px}
  .mapcredit,.leaflet-control-attribution{font-size:12px!important}
  .small{font-size:14.5px}

  /* every tappable thing gets a thumb sized hit area */
  .wm{height:56px}
  .hero-dots{gap:4px}
  .hero-dots button{position:relative}
  .hero-dots button::after{content:'';position:absolute;inset:-18px -8px}
  .motion-toggle{min-height:44px;min-width:44px;padding:12px}
  .leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:42px!important;font-size:22px!important}

  /* the pinned lines, trimmed again so the page is not a marathon */
  .pin{height:165svh;margin-bottom:-12svh}
  .pin + .wave,.pin + .sec,.pin + section{transform:translateY(12svh)}
}

/* ============================================================
   v24 — the tree, a real text field, tighter air, warmer blocks
   ============================================================ */

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- email fields that look like email fields ---------- */
.slimform .row,.slimform.wide .row,.hero .slimform .row{
  display:flex;gap:10px;background:none;border:0;padding:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0
}
.slimform input,.slimform.wide input,.hero .slimform input{
  flex:1;min-width:0;min-height:56px;padding:0 18px;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid rgba(15,59,76,.2);border-radius:12px;
  text-align:left;box-shadow:0 1px 2px rgba(15,59,76,.05) inset;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.slimform input::placeholder{color:#8C9EA8;opacity:1}
.slimform input:focus,.slimform.wide input:focus,.hero .slimform input:focus{
  outline:0;border-color:var(--reef);box-shadow:0 0 0 4px rgba(31,122,153,.16)
}
.slimform button,.slimform.wide button,.hero .slimform button{
  flex:none;min-height:56px;padding:0 26px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:600;white-space:nowrap
}
.hero .slimform button{background:var(--gold);color:#241C16}
.hero .slimform button:hover{background:#C79A52}
.slimform.wide button{background:var(--deep);color:var(--shell)}
.slimform.wide button:hover{background:var(--reef)}
.hero .slimform input{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.6)}

/* ---------- the tree ---------- */
.chap.centred{margin-inline:auto;text-align:center;max-width:46ch}
.chap.centred .bar{margin-inline:auto}
.chap.centred .deck{margin-inline:auto}
.tree{margin-top:clamp(30px,4vw,44px)}
.tree-top{display:flex;justify-content:center}
.tree-top .node{
  display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;
  background:var(--deep);color:#fff;box-shadow:0 18px 40px -22px rgba(15,59,76,.8)
}
.tree-top .node svg{width:54px;height:29px;color:var(--gold);flex:none}
.tree-top .node b{font-size:15px;font-weight:600;letter-spacing:.01em}
.tree-lines{display:block;width:100%;height:76px;margin:0}
/* the lines are drawn by default; the animation is the enhancement, so a
   missed observer or a JS failure never leaves the diagram disconnected */
.tree-lines path{fill:none;stroke:rgba(15,59,76,.26);stroke-width:1.5}
.tree.armed .tree-lines path{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.tree.armed.in .tree-lines path{animation:treeDraw 1.1s cubic-bezier(.62,0,.2,1) forwards}
.tree.armed.in .tree-lines path:nth-child(2){animation-delay:.1s}
.tree.armed.in .tree-lines path:nth-child(3){animation-delay:.2s}
@keyframes treeDraw{to{stroke-dashoffset:0}}
.tree-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.branch{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding:26px 24px 24px;border-radius:var(--r-lg);text-decoration:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)
}
.branch:hover{transform:translateY(-6px);box-shadow:0 30px 64px -28px rgba(15,59,76,.45)}
.branch .pic{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:var(--foam);color:var(--reef-ink);margin-bottom:18px;flex:none
}
.branch .pic svg{width:30px;height:30px}
.branch h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1;color:var(--deep);margin:0 0 8px}
.branch .one{font-size:16px;font-weight:600;color:var(--reef-ink);margin:0 0 10px;line-height:1.35}
.branch p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0}
.branch .for{
  display:block;margin-top:16px;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--gold-ink)
}
.branch .go{margin-top:16px;font-size:14px;font-weight:600;color:var(--reef-ink)}
.branch:hover .go{color:var(--deep)}
.branch.feature{background:rgba(31,122,153,.94);border-color:rgba(255,255,255,.26)}
.branch.feature h3,.branch.feature .one{color:#fff}
.branch.feature p{color:rgba(255,255,255,.9)}
.branch.feature .pic{background:rgba(255,255,255,.16);color:#fff}
.branch.feature .for{color:rgba(255,255,255,.78)}
.branch.feature .go{color:#fff}
@media(max-width:860px){
  .tree-cards{grid-template-columns:1fr}
  .tree-lines{height:34px}
  .tree-lines path:nth-child(1),.tree-lines path:nth-child(3){display:none}
}

/* ---------- the offer block ---------- */
.offer{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.offer-cover img{
  display:block;width:clamp(180px,22vw,300px);height:auto;border-radius:8px;
  box-shadow:0 40px 70px -30px rgba(15,59,76,.6);transform:rotate(-2deg)
}
.offer-copy h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(26px,4.2vw,42px);
  line-height:1.12;color:var(--deep);margin:0 0 18px;max-width:18ch
}
.offer-copy p{font-size:17px;line-height:1.6;color:var(--ink-soft);margin:0 0 14px;max-width:48ch}
.ticks{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.ticks li::before{
  content:'';position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:50%;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M4 9l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat,
  linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude
}
@media(max-width:760px){
  .offer{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px}
  .offer-cover img{transform:none;width:190px}
  .offer-copy h2{max-width:none}
  .offer-copy p{max-width:none}
  .ticks{text-align:left;justify-self:stretch}
}

/* ---------- less dead air ---------- */
.pin{height:190svh}
.pin-stage{padding:clamp(60px,8vh,88px) 22px}
@media(max-width:760px){
  :root{--mpad:44px}
  .pin{height:150svh;margin-bottom:-10svh}
  .pin + .wave,.pin + .sec,.pin + section{transform:translateY(10svh)}
  .pin-stage{padding:clamp(48px,7vh,68px) 20px}
  .wave{height:26px}
  .tree-top .node{padding:12px 18px}
  .tree-top .node svg{width:44px;height:24px}
  .branch{padding:22px 20px}
  .offer-copy h2{font-size:clamp(25px,7.4vw,32px)}
  .offer-copy p{font-size:16px}
  .slimform .row{flex-direction:column;gap:8px}
  .slimform button{width:100%}
}

/* the hero photo is driven from script now, so it must not fight a transform
   of its own, and it needs somewhere to move into */
.hero-media img{transform:none!important;will-change:auto}
.hero-media{will-change:transform;transform-origin:center 60%}
.hero-in{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){
  .hero-media,.hero-in{transform:none!important;opacity:1!important}
}

/* ============================================================
   v26 — less dead air on a phone
   ============================================================ */
@media(max-width:760px){
  /* the pinned line fills the screen instead of floating in it */
  .pin-type{font-size:clamp(28px,8.4vw,38px);line-height:1.2;max-width:13ch}
  .pin-stage{padding:clamp(34px,5vh,52px) 20px}
  .pin-hint{bottom:48px}
  .pin-prog{bottom:24px}

  /* the reading list: the book, then two guides, the rest a tap away */
  .reads .read:nth-child(n+3){display:none}
  .reads.all .read{display:flex}
  .also{margin-top:30px}
  .headline-read{padding:22px 18px 24px}
  .headline-read .hr-cover img{width:132px}

  /* the questions open in a short stack with the rest behind a button */
  .faq details:nth-of-type(n+7){display:none}
  .faq.all details{display:block}
  .faq-more{
    display:block;width:100%;margin-top:18px;min-height:50px;
    border:1.5px solid rgba(15,59,76,.22);border-radius:12px;background:#fff;
    font:inherit;font-size:15px;font-weight:600;color:var(--deep);cursor:pointer
  }
  .faq-more:hover{border-color:var(--reef);color:var(--reef-ink)}
  .faq.all + .faq-more{display:none}
}
@media(min-width:761px){.faq-more{display:none}}

@media(max-width:760px){
  /* the sentence should own the screen, not float in the middle of it */
  .pin-type{font-size:clamp(31px,10.2vw,46px);line-height:1.16;max-width:11ch;letter-spacing:-.025em}
  .pin{height:140svh;margin-bottom:-8svh}
  .pin + .wave,.pin + .sec,.pin + section{transform:translateY(8svh)}

  /* the tree, tightened */
  .tree{margin-top:26px}
  .tree-cards{gap:12px}
  .branch{padding:20px 18px}
  .branch .pic{width:46px;height:46px;border-radius:14px;margin-bottom:14px}
  .branch .pic svg{width:26px;height:26px}
  .branch h3{font-size:22px}
  .branch .one{font-size:15.5px}
  .branch p{font-size:14.5px}
  .branch .for,.branch .go{margin-top:12px}
  .panels{gap:10px}
  .panel{padding:20px 18px}
}

/* ============================================================
   v28 — the quiz: a breather, a finish line, and a result card
   that looks like something worth waiting for
   ============================================================ */

/* ---- the mid-quiz fact ---- */
.quiz-fact{text-align:center;padding:8px 0 4px}
.quiz-fact .dyk{
  display:inline-block;margin-bottom:18px;padding:7px 15px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-ink);background:rgba(179,134,66,.14)
}
.quiz-fact .fact{
  font-family:var(--serif);font-weight:400;font-size:clamp(21px,3.4vw,30px);
  line-height:1.26;color:var(--deep);margin:0 auto;max-width:22ch
}
.quiz-fact .fact-src{
  margin:16px 0 26px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-dim)
}
.quiz-fact .btn{min-width:200px}

/* ---- the finish line ---- */
.quiz-done{display:none;text-align:center;padding:10px 0 4px}
.quiz-done.active{display:block;animation:doneIn .5s var(--ease)}
@keyframes doneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.quiz-done .tick{
  display:grid;place-items:center;width:72px;height:72px;margin:0 auto 20px;
  border-radius:50%;background:var(--reef);color:#fff;
  box-shadow:0 18px 40px -18px rgba(31,122,153,.9)
}
.quiz-done .tick svg{width:40px;height:40px}
.quiz-done h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(25px,4vw,34px);
  line-height:1.14;color:var(--deep);margin:0 0 12px
}
.quiz-done p{font-size:16.5px;line-height:1.55;color:var(--ink-soft);margin:0 auto 26px;max-width:34ch}
.btn-lg{min-height:58px;padding-inline:30px;font-size:16.5px}

/* ---- the result ---- */
.quiz-result{display:none}
.quiz-result.active{display:block;animation:doneIn .55s var(--ease)}
.res{border-radius:var(--r-xl);overflow:hidden;padding:0}
.res-head{
  padding:clamp(28px,4vw,40px) clamp(24px,3.4vw,38px) clamp(24px,3vw,32px);
  background:linear-gradient(150deg,var(--deep) 0%,var(--reef) 150%);color:#fff
}
.res .level{
  display:inline-block;margin-bottom:16px;padding:7px 15px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--deep);background:var(--gold)
}
.res-head h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(25px,4.2vw,38px);
  line-height:1.12;color:#fff;margin:0
}
.res-line{font-size:16px;line-height:1.6;color:rgba(255,255,255,.88);margin:16px 0 0;max-width:50ch}
.res-plan{
  display:flex;gap:20px;align-items:center;
  padding:22px clamp(24px,3.4vw,38px);background:rgba(234,243,244,.9);
  border-bottom:1px solid rgba(15,59,76,.1)
}
.res-plan .pill{
  flex:none;display:grid;place-items:center;width:104px;padding:14px 8px;border-radius:18px;
  background:#fff;box-shadow:0 10px 26px -14px rgba(15,59,76,.5)
}
.res-plan .pill b{font-family:var(--serif);font-weight:400;font-size:25px;color:var(--reef-ink);line-height:1}
.res-plan .pill span{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-top:5px}
.res-plan p{font-size:15px;line-height:1.55;color:var(--ink);margin:0}
.res-get{padding:clamp(26px,3.6vw,38px) clamp(24px,3.4vw,38px) clamp(28px,3.6vw,38px)}
.res-get h4{
  font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.8vw,26px);
  color:var(--deep);margin:0 0 10px
}
.res-get > p{font-size:15.5px;line-height:1.58;color:var(--ink-soft);margin:0 0 22px;max-width:48ch}
.res-get .field{margin-bottom:14px}
.res-get label{
  display:block;margin-bottom:7px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--deep)
}
.res-get input{
  width:100%;min-height:54px;padding:0 16px;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid rgba(15,59,76,.2);border-radius:12px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.res-get input::placeholder{color:#8C9EA8}
.res-get input:focus{outline:0;border-color:var(--reef);box-shadow:0 0 0 4px rgba(31,122,153,.16)}
.res-get .btn{width:100%;margin-top:6px}
.res-get .small{margin-top:12px;text-align:center}
.res-get .err{display:none;margin-top:6px;font-size:13px;color:#A6392F}
.res-get .field.bad input{border-color:#A6392F}
.res-get .field.bad .err{display:block}
@media(max-width:560px){
  .res-plan{flex-direction:column;align-items:flex-start;gap:14px}
  .res-plan .pill{width:100%;flex-direction:row;gap:8px;padding:12px}
  .res-plan .pill span{margin-top:0}
}

/* ---------- the positioning band ---------- */
.stake{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.stake h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(27px,4.4vw,46px);
  line-height:1.1;color:var(--deep);margin:0;letter-spacing:-.02em
}
.stake h2 em{font-style:italic;color:var(--reef)}
.stake .big{
  font-size:clamp(17px,2.2vw,21px);line-height:1.5;color:var(--deep);
  font-weight:500;margin:0 0 16px
}
.stake p{font-size:16px;line-height:1.62;color:var(--ink-soft);margin:0}
@media(max-width:760px){
  .stake{grid-template-columns:1fr;gap:18px}
  .stake .big{font-size:17.5px}
  .stake p{font-size:16px}
}

/* ============================================================
   v29 — contact: cards, the email address, the social row
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ccard{
  display:flex;flex-direction:column;padding:28px 24px 26px;border-radius:var(--r-lg);
  text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)
}
a.ccard:hover{transform:translateY(-6px);box-shadow:0 30px 64px -28px rgba(15,59,76,.45)}
.ccard .pic{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:var(--foam);color:var(--reef-ink);margin-bottom:18px;flex:none
}
.ccard .pic svg{width:26px;height:26px}
.ccard h2{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.1;color:var(--deep);margin:0 0 10px}
.ccard .addr{
  font-size:16.5px;font-weight:600;line-height:1.4;color:var(--reef-ink);margin:0 0 12px;
  word-break:break-word
}
.ccard p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0}
.ccard .go{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:var(--reef-ink);text-decoration:none}
.ccard:hover .go{color:var(--deep)}
.ccard.primary{background:rgba(31,122,153,.94);border-color:rgba(255,255,255,.26)}
.ccard.primary h2,.ccard.primary .addr{color:#fff}
.ccard.primary p{color:rgba(255,255,255,.9)}
.ccard.primary .pic{background:rgba(255,255,255,.18);color:#fff}
.ccard.primary .go{color:#fff}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* the address, wherever it appears in running text */
a.mail{color:var(--gold-on-deep);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(207,160,88,.45)}
a.mail:hover{color:#fff;border-bottom-color:#fff}

/* the social row */
.social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.social .sq{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  color:var(--on-deep-soft);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  transition:color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)
}
.social .sq:hover{color:#fff;background:rgba(255,255,255,.18);transform:translateY(-2px)}
.social .sq svg{width:20px;height:20px}
.social.big{justify-content:center;margin-top:22px}
.social.big .sq{
  width:56px;height:56px;border-radius:17px;color:var(--reef-ink);
  background:var(--foam);border-color:rgba(15,59,76,.1)
}
.social.big .sq:hover{color:#fff;background:var(--reef)}
.social.big .sq svg{width:25px;height:25px}

.follow{text-align:center;margin-top:clamp(40px,6vw,70px)}
.follow h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,30px);color:var(--deep);margin:0 0 10px}
.follow > p{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0 auto;max-width:40ch}
.follow .soon{
  margin:18px auto 0;max-width:46ch;font-size:14.5px;line-height:1.55;color:var(--ink-dim)
}
.social:not(.has-links){display:none}
.social.has-links + .soon,.follow .social.has-links ~ .soon{display:none}

@media(max-width:760px){
  .ccard{padding:22px 20px}
  .ccard h2{font-size:21px}
  .ccard .addr{font-size:16px}
  .social .sq{width:46px;height:46px}
  .social.big .sq{width:54px;height:54px}
}

/* ============================================================
   v31 — the phone email bar, an obvious close, richer reveals
   ============================================================ */

/* ---------- the sticky email bar, phones only ---------- */
.dockform{display:none}
@media(max-width:720px){
  .dock .msg,.dock > .btn{display:none}
  .dock{padding:8px;gap:0}
  .dockform{
    display:grid;grid-template-columns:1fr auto;gap:8px;width:100%;position:relative
  }
  .dockform input{
    width:100%;min-height:50px;padding:0 16px;border-radius:14px;
    font-family:var(--sans);font-size:16px;color:var(--ink);
    background:#fff;border:1.5px solid transparent;
    transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
  }
  .dockform input::placeholder{color:#7D8E99;opacity:1}
  .dockform input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(179,134,66,.3)}
  .dockform button{
    flex:none;width:54px;min-height:50px;border:0;border-radius:14px;cursor:pointer;
    background:var(--gold);color:#241C16;display:grid;place-items:center;
    transition:background .2s var(--ease),transform .2s var(--ease)
  }
  .dockform button:hover,.dockform button:focus-visible{background:#C79A52}
  .dockform button:active{transform:scale(.96)}
  .dockform button svg{width:21px;height:21px}
  .dock-err,.dock-done{
    display:none;grid-column:1 / -1;margin:2px 2px 0;font-size:13px;line-height:1.35
  }
  .dock-err{color:#FFC9C2}
  .dock-done{color:var(--lagoon)}
  .dockform.bad .dock-err{display:block}
  .dockform.sent .dock-done{display:block}
  .dockform.sent input,.dockform.sent button{display:none}
}

/* ---------- a close button nobody can miss ---------- */
.modal-close{
  top:10px;right:10px;width:48px;height:48px;
  background:var(--deep);color:#fff;
  box-shadow:0 8px 22px -10px rgba(10,43,56,.8);
  border:2px solid rgba(255,255,255,.9)
}
.modal-close:hover,.modal-close:focus-visible{background:var(--reef);color:#fff;transform:scale(1.06)}
.modal-close:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.modal-close svg{width:20px;height:20px}
@media(max-width:700px){
  .modal-close{top:8px;right:8px;width:46px;height:46px}
}

/* ---------- reveals, with a little more craft ----------
   A slower curve, a touch of travel, and children that arrive one
   after another instead of all at once. */
.rv,.rv-up,.rv-left,.rv-scale{
  opacity:0;transition:opacity .85s cubic-bezier(.22,.68,.3,1), transform .85s cubic-bezier(.22,.68,.3,1)
}
.rv{transform:translateY(16px)}
.rv-up{transform:translateY(34px)}
.rv-left{transform:translateX(-30px)}
.rv-scale{transform:scale(.965) translateY(20px)}
.rv.in,.rv-up.in,.rv-left.in,.rv-scale.in{opacity:1;transform:none}

/* children of a revealed group arrive in sequence */
.figs.in > *,.ways.in > *,.tree-cards.in > *,.panels.in > *,
.reads.in > *,.trio.in > *,.kit.in > *,.contact-grid.in > *,.walk.in > *{
  animation:stagIn .7s cubic-bezier(.22,.68,.3,1) backwards
}
@keyframes stagIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.figs.in > *:nth-child(1),.ways.in > *:nth-child(1),.tree-cards.in > *:nth-child(1),
.panels.in > *:nth-child(1),.reads.in > *:nth-child(1),.trio.in > *:nth-child(1),
.kit.in > *:nth-child(1),.contact-grid.in > *:nth-child(1),.walk.in > *:nth-child(1){animation-delay:.04s}
.figs.in > *:nth-child(2),.ways.in > *:nth-child(2),.tree-cards.in > *:nth-child(2),
.panels.in > *:nth-child(2),.reads.in > *:nth-child(2),.trio.in > *:nth-child(2),
.kit.in > *:nth-child(2),.contact-grid.in > *:nth-child(2),.walk.in > *:nth-child(2){animation-delay:.12s}
.figs.in > *:nth-child(3),.ways.in > *:nth-child(3),.tree-cards.in > *:nth-child(3),
.panels.in > *:nth-child(3),.reads.in > *:nth-child(3),.trio.in > *:nth-child(3),
.kit.in > *:nth-child(3),.contact-grid.in > *:nth-child(3),.walk.in > *:nth-child(3){animation-delay:.2s}
.figs.in > *:nth-child(4),.reads.in > *:nth-child(4),.kit.in > *:nth-child(4),
.walk.in > *:nth-child(4){animation-delay:.28s}
.kit.in > *:nth-child(5),.walk.in > *:nth-child(5){animation-delay:.36s}
.kit.in > *:nth-child(6),.walk.in > *:nth-child(6){animation-delay:.44s}

/* a heading and its rule arrive in order too */
.chap.in .no{animation:stagIn .6s cubic-bezier(.22,.68,.3,1) backwards;animation-delay:.02s}
.chap.in h1,.chap.in h2{animation:stagIn .7s cubic-bezier(.22,.68,.3,1) backwards;animation-delay:.1s}
.chap.in .bar{animation:barIn .6s cubic-bezier(.22,.68,.3,1) backwards;animation-delay:.26s}
.chap.in .deck{animation:stagIn .7s cubic-bezier(.22,.68,.3,1) backwards;animation-delay:.3s}
@keyframes barIn{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
.chap .bar{transform-origin:left}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-up,.rv-left,.rv-scale{opacity:1!important;transform:none!important;transition:none}
  .figs.in > *,.ways.in > *,.tree-cards.in > *,.panels.in > *,.reads.in > *,.trio.in > *,
  .kit.in > *,.contact-grid.in > *,.walk.in > *,
  .chap.in .no,.chap.in h1,.chap.in h2,.chap.in .bar,.chap.in .deck{animation:none!important}
}

/* the press mastheads, set in each publication's own character */
.wm-nature span{font-family:var(--serif);font-weight:700;font-size:25px;letter-spacing:.01em}
.wm-fortune span{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.09em}
.wm-healthline span{font-family:var(--sans);font-weight:700;font-size:21px;letter-spacing:-.025em}
.wm-mnt span{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.01em}

/* ============================================================
   v33 — the map fills its box, the numbers link to About,
   and the free manual reads like a gift
   ============================================================ */

/* The embed was sitting inside the card's padding and keeping its own
   aspect ratio, which left a white margin round three sides. It now
   fills the card edge to edge. */
.mapcard{padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--foam);line-height:0}
.mapcard iframe{
  display:block;width:100%;height:clamp(360px,54vh,560px);border:0;margin:0
}
@media(max-width:760px){.mapcard iframe{height:340px}}

/* the four numbers are a door into About */
.figs-eyebrow{
  margin:0 0 14px;text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)
}
a.fig{text-decoration:none;display:flex;flex-direction:column}
a.fig .more{
  margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;color:var(--reef-ink);opacity:0;
  transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)
}
a.fig:hover .more,a.fig:focus-visible .more{opacity:1;transform:none}
a.fig:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.figs .fig.glass:nth-child(1) .more{color:var(--gold-on-deep)}
@media(hover:none){a.fig .more{opacity:1;transform:none}}

/* ============================================================
   v34 — the services: the row on the homepage, the grid on the page
   ============================================================ */

/* the six-up row on the homepage */
.svc-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:var(--s4)}
.svcm{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding:20px 16px 18px;border-radius:var(--r-md);text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)
}
.svcm:hover{transform:translateY(-5px);box-shadow:0 26px 54px -26px rgba(15,59,76,.45)}
.svcm .i{
  font-size:22px;line-height:1;color:var(--gold-ink);margin-bottom:12px;
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(179,134,66,.14)
}
.svcm h3{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.16;color:var(--deep);margin:0 0 6px}
.svcm p{font-size:13.5px;line-height:1.42;color:var(--ink-soft);margin:0}
@media(max-width:1000px){.svc-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.svc-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .svcm{padding:16px 14px}.svcm h3{font-size:16px}.svcm p{font-size:13px}
  .svcm .i{width:36px;height:36px;font-size:19px;margin-bottom:10px}}

/* the three-step flow */
.trio-flow{display:flex;align-items:stretch;gap:14px;margin-top:var(--s4)}
.tf{
  flex:1;padding:26px 22px;border-radius:var(--r-lg);
  background:var(--foam);border:1px solid rgba(15,59,76,.08)
}
.tf .k{
  display:block;font-family:var(--serif);font-size:19px;color:var(--gold-ink);margin-bottom:10px
}
.tf h3{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--deep);margin:0 0 8px}
.tf p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0}
.tf-arrow{align-self:center;color:var(--gold);font-size:22px;flex:none}
@media(max-width:860px){
  .trio-flow{flex-direction:column}
  .tf-arrow{transform:rotate(90deg);align-self:center}
}

/* the full service grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--s4)}
.svc{padding:26px 24px 26px;border-radius:var(--r-lg)}
.svc.wide{grid-column:span 3}
.svc .tag{
  display:inline-block;margin-bottom:14px;padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);background:rgba(179,134,66,.15)
}
.svc h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.12;color:var(--deep);margin:0 0 10px}
.svc .lead-line{font-size:16.5px;font-weight:600;line-height:1.4;color:var(--reef-ink);margin:0 0 12px}
.svc p{font-size:15px;line-height:1.58;color:var(--ink-soft);margin:0}
.svc-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.svc-list li{
  position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:var(--ink)
}
.svc-list li::before{
  content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--gold)
}
.svc-list b{color:var(--reef-ink);font-weight:600}
.src-inline{display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--ink-dim)}
@media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}.svc.wide{grid-column:span 2}}
@media(max-width:620px){
  .svc-grid{grid-template-columns:1fr;gap:12px}.svc.wide{grid-column:span 1}
  .svc{padding:22px 20px}.svc h3{font-size:22px}.svc .lead-line{font-size:16px}
}

/* ============================================================
   v35 — the Reef Wellness Studio lockup
   The kit's horizontal logo has "reeformer" drawn into the artwork,
   so until a new one is cut this is built from the wordmark free
   ring plus type, matched to the kit: Libre Baskerville lowercase
   over letterspaced caps.
   ============================================================ */
.lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.lockup .lk-mark{display:block;width:38px;height:auto;flex:none}
.lockup .lk-words{display:flex;flex-direction:column;justify-content:center;line-height:1}
.lockup .lk-words b{
  font-family:var(--serif);font-weight:400;font-size:25px;line-height:.98;
  letter-spacing:-.005em;color:var(--deep)
}
.lockup .lk-words i{
  font-style:normal;font-family:var(--sans);font-weight:600;
  font-size:8.5px;letter-spacing:.235em;text-transform:uppercase;
  color:var(--deep);opacity:.72;margin-top:4px
}
.lockup.on-dark .lk-words b,.lockup.on-dark .lk-words i{color:#fff}
.lockup.on-dark .lk-words i{opacity:.75}

.nav .lockup .lk-mark{width:34px}
.nav .lockup .lk-words b{font-size:23px}
.foot .lockup .lk-mark{width:44px}
.foot .lockup .lk-words b{font-size:28px}
.foot .lockup .lk-words i{font-size:9px}
@media(max-width:560px){
  .nav .lockup{gap:9px}
  .nav .lockup .lk-mark{width:29px}
  .nav .lockup .lk-words b{font-size:20px}
  .nav .lockup .lk-words i{font-size:7.5px;letter-spacing:.2em}
}