/* ---------- Tokens ---------- */
:root {
  color-scheme: only light;
  --bg: #fbf6ee;
  --ink: #1c2a4a;
  --blue: #1b4fa0;
  --blue-deep: #123a7a;
  --green: #2f6b31;
  --leaf: #7dbb3f;
  --orange: #f08a24;
  --purple: #7b4fa0;
  --teal: #2aa3b8;
  --glow: 0;
  --ink-soft: color-mix(in srgb, var(--ink) 90%, var(--bg));   /* secondary text, still >= 4.5:1 */
  --orange-text: #a8520a;   /* orange dark enough to read on light backgrounds */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --radius: 22px;
  --nav-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  overflow-x: hidden;
  transition: background-color .6s ease, color .6s ease;
}
.anim body { transition: none; }   /* GSAP drives colour while animating */
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
p { margin: 0 0 1em; }
em { font-family: var(--serif); font-style: italic; }
a { color: inherit; }

.eyebrow {
  font: 700 .78rem/1.2 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}
.lead { font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.4; font-family: var(--serif); font-weight: 300; }
.muted { color: var(--ink-soft); }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* ---------- Section colour ---------- */
/* Every chapter owns its colours. Small colour changes blend softly; big light/dark changes get flowing waves. */
[data-bg] {
  position: relative;
  /* light-to-light: long eased blend, mixed in OKLab so it never passes through grey */
  background: linear-gradient(to bottom, var(--prev-bg, var(--bg)), var(--bg) 22vh);
  background: linear-gradient(in oklab to bottom,
    var(--prev-bg, var(--bg)) 0,
    color-mix(in oklab, var(--prev-bg, var(--bg)) 75%, var(--bg)) 6vh,
    color-mix(in oklab, var(--prev-bg, var(--bg)) 35%, var(--bg)) 12vh,
    color-mix(in oklab, var(--prev-bg, var(--bg)) 10%, var(--bg)) 18vh,
    var(--bg) 24vh);
  color: var(--ink);
  /* re-derive here: a var() inside a custom property resolves where it's declared, so :root's version is always dark */
  --ink-soft: color-mix(in srgb, var(--ink) 90%, var(--bg));
}

/* Waves: drawn at the top of a section whose colour differs strongly from the one above */
[data-bg] + [data-bg] { margin-top: -1px; }
[data-bg].has-wave {
  --wave-h: clamp(90px, 11vw, 170px);
  /* the strip under the wave matches the colour above, so sub-pixel edges can't show a hairline */
  background: linear-gradient(var(--prev-bg) calc(var(--wave-h) * .4), var(--bg) 0);
}
.wave {
  position: absolute; inset: 0 0 auto; height: var(--wave-h); overflow: hidden;
  /* colour above until the solid bottom wave fully covers it (92%), so no sub-pixel edge can show through */
  background: linear-gradient(var(--prev-bg) 92%, var(--bg) 92%); pointer-events: none; z-index: 0;
}
.wave svg { position: absolute; left: 0; bottom: -1px; width: 200%; height: 100%; }
.wave path { fill: var(--bg); }
/* tinted with the logo's teal and blue so the change of colour flows through the brand palette, not grey */
.wave .w1 { fill: color-mix(in oklab, var(--teal) 30%, var(--prev-bg)); animation: wave-drift 26s linear infinite; }
.wave .w2 { fill: color-mix(in oklab, var(--blue) 55%, var(--bg)); animation: wave-drift 19s linear infinite reverse; }
.wave .w3 { animation: wave-drift 32s linear infinite; }
.wave .w-line { fill: none; stroke-width: 2.5; opacity: .55; animation: wave-drift 23s linear infinite reverse; }
.wave .w-line.a { stroke: var(--teal); }
.wave .w-line.b { stroke: var(--orange); opacity: .4; animation-duration: 29s; animation-direction: normal; }
@keyframes wave-drift { to { transform: translateX(-50%); } }

/* ---------- Progress + nav ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; }
.progress span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--purple), var(--blue), var(--teal), var(--leaf), var(--orange));
}
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 32px);
  transition: background-color .4s, box-shadow .4s, transform .4s;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.05rem var(--serif); }
.nav-brand img { width: 36px; height: auto; }

.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .95em 1.6em; border-radius: 999px;
  background: var(--blue); color: #fff; text-decoration: none;
  font: 700 1rem/1 var(--sans); letter-spacing: .01em;
  transition: transform .25s, box-shadow .25s, background-color .25s;
  box-shadow: 0 6px 20px -8px rgba(27, 79, 160, .6);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(27, 79, 160, .7); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.btn-sm { padding: .7em 1.15em; font-size: .9rem; }
.nav .btn { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), 0 6px 20px -8px rgba(27, 79, 160, .6); }
.btn-wa { background: #15803d; box-shadow: 0 8px 24px -8px rgba(21, 128, 61, .7); }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--nav-h) + 24px) 16px 48px; overflow: hidden;
}
.hero-stage { position: relative; display: grid; place-items: center; }
.hero-emblem { width: min(62vw, 44vh, 420px); height: auto; position: relative; z-index: 2; will-change: transform; }
.ripples { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1; }
.ripples i {
  grid-area: 1 / 1; width: min(62vw, 44vh, 420px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid; opacity: 0; transform: translateY(-8%) scale(.7);
  animation: ripple 9s cubic-bezier(.3, .6, .4, 1) infinite;
}
.ripples i:nth-child(1) { border-color: var(--teal); }
.ripples i:nth-child(2) { border-color: var(--orange); animation-delay: 2.25s; }
.ripples i:nth-child(3) { border-color: var(--purple); animation-delay: 4.5s; }
.ripples i:nth-child(4) { border-color: var(--leaf); animation-delay: 6.75s; }
@keyframes ripple {
  0% { opacity: 0; transform: translateY(-8%) scale(.75); }
  15% { opacity: .5; }
  100% { opacity: 0; transform: translateY(-8%) scale(1.9); }
}
.hero-brand { margin-top: 1.2rem; position: relative; z-index: 2; }
.brand-name {
  font: 600 clamp(2.2rem, 6vw, 4rem)/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); margin: 0;
}
.brand-sub { font: 600 clamp(1rem, 2.4vw, 1.5rem)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: .3rem 0 .6rem; }
.brand-tag { font: italic 300 clamp(1.05rem, 2.2vw, 1.4rem) var(--serif); color: var(--blue); margin: 0; }
.hero-title { max-width: 860px; margin: 3rem auto 0; position: relative; z-index: 3; }
.hero-title h2 { font-size: clamp(2rem, 5vw, 3.9rem); color: var(--blue-deep); }
.hero-title em { color: var(--green); }
.anim .hero-title { position: absolute; inset: 0; margin: auto; height: fit-content; padding: 0 20px; }
.scroll-cue {
  position: absolute; bottom: 22px; left: 50%; translate: -50% 0;
  display: grid; justify-items: center; gap: 8px; font: 600 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.scroll-cue i { width: 1px; height: 38px; background: currentColor; transform-origin: top; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Manifesto ---------- */
.manifesto { display: grid; align-content: center; padding: 12vh 16px 4vh; }
.manifesto-text {
  width: min(980px, 100%); margin: 0 auto;
  font: 300 clamp(1.9rem, 4.8vw, 3.8rem)/1.22 var(--serif); text-align: center; letter-spacing: -.015em;
}
.manifesto-text strong { font-weight: 500; font-style: italic; color: var(--blue); }
.manifesto-text .w { display: inline-block; }
.tide { width: 100%; height: 100px; margin-top: 5vh; overflow: visible; }
.tide path { fill: none; stroke-width: 2; stroke-linecap: round; }
.tide .t1 { stroke: var(--teal); opacity: .8; }
.tide .t2 { stroke: var(--orange); opacity: .55; }
.tide .t3 { stroke: var(--purple); opacity: .4; }

/* ---------- Story (sticky media + scrolling steps) ---------- */
.story {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px);
  padding: 0 clamp(16px, 4vw, 64px);
}
.story-flip .story-media { order: 2; }
.story-media {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; z-index: 1;
}
.frame {
  margin: 0; width: min(40vw, 74vh, 600px); aspect-ratio: 1;
  border-radius: 32px; overflow: hidden; position: relative;
  box-shadow:
    0 30px 60px -30px rgba(20, 30, 60, .45),
    0 0 calc(var(--glow) * 90px) calc(var(--glow) * 18px) rgba(120, 190, 255, calc(var(--glow) * .7));
  transform: rotate(-1.2deg);
}
.story-flip .frame { transform: rotate(1.2deg); }
.frame img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* steps sit at their natural height with a normal gap; the column is centred beside the illustration */
.story-steps {
  position: relative; z-index: 2; padding: 12vh 0;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}
.step { display: flex; align-items: center; padding: 1.4rem 0; }
.step-head { padding-bottom: .6rem; }
.step-card { max-width: 30rem; transition: opacity .7s ease, transform .7s ease; }
.anim .step .step-card { opacity: .8; transform: translateY(12px); }
.anim .step.is-active .step-card { opacity: 1; transform: none; }
.num { display: block; font: 700 .85rem var(--sans); letter-spacing: .2em; color: var(--ink-soft); margin-bottom: .8rem; }
.step-card h2 { margin-bottom: .3em; }

.pills { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pills li { padding: .5em 1em; border-radius: 999px; font-weight: 700; font-size: .9rem; background: color-mix(in srgb, var(--green) 12%, transparent); color: #1d4a20; }

/* conditions */
#conditions { overflow: clip; }
.step-list { min-height: 75vh; }
.cond-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.cond-list li {
  position: relative; padding: 1rem 1.2rem 1rem 3rem; border-radius: 16px;
  background: #fff; border: 1px solid rgba(28, 42, 74, .08);
  box-shadow: 0 12px 26px -22px rgba(28, 42, 74, .5); font-size: 1.12rem;
}
.cond-list li::before {
  content: ""; position: absolute; left: 1.2rem; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 5px rgba(42, 163, 184, .16);
}
.cond-list b { color: var(--blue-deep); font-weight: 700; }
.fireflies { display: none; }   /* single light theme: the night-forest fireflies are retired */
.fireflies { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fireflies span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fffbd6; box-shadow: 0 0 10px 3px rgba(255, 240, 160, .7);
  animation: drift var(--d, 12s) ease-in-out infinite alternate, twinkle var(--t, 3s) ease-in-out infinite;
}
@keyframes drift { to { transform: translate(var(--x, 30px), var(--y, -40px)); } }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* ---------- Session ---------- */
.session { padding: 10vh 0 8vh; }
.session h2 { max-width: 14ch; }
.timeline {
  --p: 0;
  list-style: none; padding: 0; margin: 2.5rem 0 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.timeline::before, .timeline::after {
  content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 2px; border-radius: 2px;
}
.timeline::before { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.timeline::after {
  background: linear-gradient(90deg, var(--purple), var(--blue), var(--teal), var(--leaf));
  transform-origin: 0 50%; transform: scaleX(var(--p));
}
.timeline li { position: relative; z-index: 1; }
.dot {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--purple); color: var(--purple);
  font: 700 1rem var(--sans); margin-bottom: 1.2rem;
}
.timeline p { color: var(--ink-soft); }
.facts { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: 14px; }
.facts li {
  flex: 1 1 200px; padding: 1.3rem 1.5rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--purple) 8%, transparent);
}
.facts b { display: block; font: 500 1.5rem var(--serif); }
.facts span { color: var(--ink-soft); font-size: .95rem; }

/* ---------- About ---------- */
.about { padding: 8vh 0 10vh; }
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.portrait {
  aspect-ratio: 4 / 5; border-radius: 200px 200px 32px 32px; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(160deg, #fde7cf, #e4f0dc 55%, #dbe9f7);
}
.portrait img { width: 70%; height: auto; }
blockquote {
  margin: 2rem 0 0; padding: 1.2rem 0 0 1.4rem; border-left: 3px solid var(--orange);
  font: 300 1.4rem/1.4 var(--serif);
}

/* ---------- Book ---------- */
.book { padding: calc(var(--wave-h, 0px) + 9vh) 0 10vh; color: #fff; position: relative; overflow: hidden; }
.book::before {
  content: ""; position: absolute; width: 900px; aspect-ratio: 1; right: -320px; top: 12vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 163, 184, .35), transparent 65%);
  pointer-events: none;
}
.book .wrap { position: relative; }
.book .eyebrow { color: rgba(255,255,255,.85); }
.book h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 12ch; }
.book .lead { max-width: 32ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 2rem 0 3rem; }
.book-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: stretch; }
.info { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.info li { padding: 1.1rem 1.3rem; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.info span { display: block; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.info b { font-weight: 600; font-size: 1.1rem; }
.map { border-radius: var(--radius); overflow: hidden; min-height: 280px; background: rgba(255,255,255,.08); }
.map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; filter: saturate(.85); }

/* ---------- Footer ---------- */
.footer { background: #0c2753; color: rgba(255,255,255,.92); text-align: center; padding: 56px 16px 40px; }
.footer img { margin: 0 auto 14px; background: #fff; border-radius: 50%; padding: 6px; width: 64px; height: auto; }
.footer .disclaimer { max-width: 60ch; margin: 1.4rem auto; font-size: .88rem; color: rgba(255,255,255,.8); }
.footer .small { font-size: .8rem; color: rgba(255,255,255,.75); margin: 0; }

/* ---------- Roots (horizontal history) ---------- */
.roots { overflow: hidden; }
.roots-pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 4vh) 0 6vh; }
.roots-head { width: min(1120px, 100% - 32px); margin: 0 auto 2.5rem; }
.roots-head em { color: var(--orange-text); }
.roots-track {
  list-style: none; margin: 0; padding: 0 max(16px, (100vw - 1120px) / 2);
  display: flex; gap: 24px; width: max-content;
}
.root-card {
  position: relative; width: min(380px, 78vw); flex: none;
  padding: 2rem 1.8rem 1.8rem; border-radius: var(--radius);
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(120, 80, 30, .12);
  box-shadow: 0 20px 40px -30px rgba(80, 50, 20, .5);
}
.root-card::before {
  content: ""; position: absolute; top: 2.5rem; right: 1.8rem; width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--purple), var(--blue), var(--teal), var(--leaf), var(--orange), var(--purple));
  opacity: .18;
}
.root-year { display: block; font: 500 2.2rem/1 var(--serif); color: var(--orange-text); margin-bottom: 1rem; }
.root-card h3 { font-size: 1.4rem; }
.root-card p { color: var(--ink-soft); margin: 0; }
.root-card-now p { color: rgba(255,255,255,.9); }
.root-card-now { background: var(--blue-deep); color: #fff; border: 0; }
.root-card-now .root-year { color: #ffd59a; }

/* ---------- Reviews (Google) ---------- */
.reviews { padding: 10vh 0; }
.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 2.5rem; }
.reviews-head h2 { margin: 0; }
.reviews-head em { color: var(--orange-text); }
.g-logo { width: 22px; height: 22px; flex: none; }
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars i {
  width: 18px; height: 18px; background: #f5a623;
  clip-path: polygon(50% 0, 61.8% 35.3%, 100% 35.3%, 69.1% 57.1%, 80.9% 92.7%, 50% 70.6%, 19.1% 92.7%, 30.9% 57.1%, 0 35.3%, 38.2% 35.3%);
}
.g-summary {
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: #202124;
  background: #fff; border-radius: 18px; padding: 18px 24px;
  box-shadow: 0 1px 2px rgba(60,64,67,.15), 0 12px 32px -16px rgba(60,64,67,.45);
  transition: transform .25s, box-shadow .25s;
}
.g-summary:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(60,64,67,.15), 0 18px 40px -16px rgba(60,64,67,.5); }
.g-summary > .g-logo { width: 40px; height: 40px; }
.g-summary div { display: grid; gap: 2px; }
.g-title { font: 700 .95rem var(--sans); }
.g-score { display: flex; align-items: center; gap: 8px; }
.g-score b { font: 700 1.6rem/1 var(--sans); color: #202124; }
.g-count { font-size: .85rem; color: #4d5156; }

.review-grid { columns: 3 320px; column-gap: 20px; }
.review {
  break-inside: avoid; margin: 0 0 20px; background: #fff; color: #202124; border-radius: 18px; padding: 20px 22px 18px;
  box-shadow: 0 1px 2px rgba(60,64,67,.12), 0 10px 30px -18px rgba(60,64,67,.4);
}
.review header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review header .g-logo { margin-left: auto; width: 20px; height: 20px; }
.av-purple { --c: #7b4fa0; } .av-blue { --c: #1b4fa0; } .av-teal { --c: #2aa3b8; } .av-orange { --c: #f08a24; } .av-green { --c: #2f6b31; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--c); color: #fff; font: 700 1.05rem var(--sans);
}
.who-rev { display: grid; line-height: 1.25; }
.who-rev b { font: 700 .98rem var(--sans); }
.who-rev .badge { font-size: .76rem; color: #4d5156; }
.who-rev time { font-size: .8rem; color: #4d5156; }
.review .stars i { width: 16px; height: 16px; }
.review-text { margin-top: 8px; font-size: .98rem; line-height: 1.6; color: #3c4043; }
.review-text p { margin: 0 0 .7em; }
.review-text p:last-child { margin: 0; }
.review.clamped .review-text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review.clamped .review-text p { display: inline; }
.review.clamped .review-text p + p::before { content: " "; }
.read-more { margin-top: 8px; background: none; border: 0; padding: 4px 0; font: 700 .9rem var(--sans); color: #1a57c9; cursor: pointer; }
.read-more:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.reviews-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 1.5rem; }
.btn-light { background: #fff; color: #202124; box-shadow: 0 1px 2px rgba(60,64,67,.2), 0 8px 20px -10px rgba(60,64,67,.4); }
.btn-light:hover { box-shadow: 0 1px 2px rgba(60,64,67,.2), 0 12px 26px -10px rgba(60,64,67,.5); }
.text-link { color: var(--blue); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.info small { display: block; margin-top: 4px; font-size: .85rem; color: rgba(255,255,255,.82); }

/* ---------- FAQ ---------- */
.faq { padding: 10vh 0; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-grid header { position: sticky; top: calc(var(--nav-h) + 24px); }
.faq-grid header a { color: var(--blue); font-weight: 700; }
.faq-list details { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
  font: 400 1.2rem/1.35 var(--serif);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); transition: transform .3s;
}
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-list summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.faq-list details p { margin: 0 0 1.3rem; color: var(--ink-soft); max-width: 60ch; }

@media (max-width: 860px) {
  .roots-pin { min-height: 0; padding: 8vh 0; }
  .roots-track { width: auto; flex-direction: column; padding: 0 16px; gap: 16px; }
  .root-card { width: 100%; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid header { position: static; }
}

/* ---------- Nav links ---------- */
.nav-links { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.nav-link { text-decoration: none; font: 700 .92rem var(--sans); color: var(--ink); padding: .5em .2em; border-bottom: 2px solid transparent; transition: border-color .25s; }
.nav-link:hover { border-color: var(--orange); }
.nav-link[aria-current="page"] { border-color: var(--orange); }   /* keep the nav ink: it flips light over dark sections */
.nav-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 420px) { .nav-brand span { display: none; } }

.btn-outline { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); margin-top: 1.6rem; }
.btn-outline:hover { background: var(--blue); color: #fff; }

/* ---------- Home About teaser ---------- */
/* the whole photo: frame matches its 3:4 shape so nothing is cropped */
.portrait-photo { display: block; aspect-ratio: 3 / 4; height: auto; background: #e9dfd0; border-radius: 32px; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; box-shadow: 0 30px 60px -36px rgba(28,42,74,.55); }
.portrait-photo img { width: 100%; height: 100%; object-fit: contain; }
.portrait-photo:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -36px rgba(28,42,74,.6); }
.creds { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 12px; }
.creds li { padding: .9rem 1.1rem .9rem 3rem; border-radius: 14px; background: rgba(255,255,255,.7); position: relative; box-shadow: 0 10px 24px -20px rgba(28,42,74,.5); }
.creds li::before {
  content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--purple), var(--blue), var(--teal), var(--leaf), var(--orange), var(--purple));
}
.creds b { display: block; font-weight: 700; }
.creds span { font-size: .9rem; color: var(--ink-soft); }

/* ---------- About page ---------- */
.ab-hero { padding: calc(var(--nav-h) + 8vh) 0 10vh; overflow-x: clip; }   /* blurred glow sits outside the photo */
.ab-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.ab-hero h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); color: var(--blue-deep); }
.ab-hero h1 em { color: var(--orange-text); }
.ab-facts { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ab-facts li { flex: 1 1 140px; padding: 1rem 1.2rem; border-radius: 16px; background: rgba(255,255,255,.75); box-shadow: 0 12px 28px -22px rgba(28,42,74,.5); }
.ab-facts b { display: block; font: 500 1.5rem/1.1 var(--serif); color: var(--blue-deep); }
.ab-facts span { font-size: .88rem; color: var(--ink-soft); }
.ab-hero-photo { margin: 0; position: relative; }
.ab-hero-photo img {
  width: 100%; height: auto; border-radius: 220px 220px 28px 28px;
  box-shadow: 0 40px 70px -40px rgba(28,42,74,.6);
}
.ab-hero-photo::before {
  content: ""; position: absolute; inset: -18px -18px auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 200deg, var(--purple), var(--blue), var(--teal), var(--leaf), var(--orange), var(--purple));
  opacity: .22; filter: blur(30px);
}
.ab-hero-photo figcaption { margin-top: .9rem; font-size: .9rem; color: var(--ink-soft); text-align: center; }

.ab-approach { padding: 10vh 0; }
.ab-approach h2 em, .ab-training h2 em, .ab-gallery h2 em { color: var(--orange-text); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.4rem; }
.pillars article { padding: 1.8rem 1.6rem; border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: 0 18px 36px -28px rgba(46,33,70,.5); }
.pillar-num { display: block; font: 500 1.9rem/1 var(--serif); color: var(--purple); margin-bottom: 1rem; }
.pillars p { color: var(--ink-soft); margin: 0; }
.ab-quote { margin: 3rem auto 0; max-width: 46rem; text-align: center; border: 0; padding: 0; }
.ab-quote p { font: italic 300 clamp(1.4rem, 2.6vw, 2rem)/1.4 var(--serif); margin-bottom: .8rem; }
.ab-quote cite { font: 700 .9rem var(--sans); font-style: normal; color: var(--ink-soft); }

.ab-training { padding: 10vh 0; overflow-x: clip; }   /* cards slide in from the right */
.train-line { --p: 0; list-style: none; padding: 0 0 0 46px; margin: 3rem 0 0; position: relative; display: grid; gap: 28px; }
.train-line::before, .train-line::after { content: ""; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; }
.train-line::before { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.train-line::after {
  background: linear-gradient(180deg, var(--purple), var(--blue), var(--teal), var(--leaf), var(--orange));
  transform-origin: 50% 0; transform: scaleY(var(--p));
}
.train-item {
  position: relative; display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: center;
  padding: 1.6rem 1.8rem; border-radius: 22px; background: rgba(255,255,255,.75); box-shadow: 0 18px 36px -28px rgba(28,42,74,.55);
}
.train-dot {
  position: absolute; left: -40px; top: 2rem; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--blue); z-index: 1;
}
.train-date { display: block; font: 700 .8rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); margin-bottom: .5rem; }
.train-body h3 { margin-bottom: .4em; }
.train-body p { margin: 0; color: var(--ink-soft); }
.train-doc {
  border: 0; padding: 0; background: none; cursor: zoom-in; position: relative; border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(28,42,74,.6); transition: transform .3s;
}
.train-doc:hover { transform: translateY(-3px) rotate(-1deg); }
.train-doc img { width: 100%; height: 150px; object-fit: cover; object-position: top; }
.train-doc span {
  position: absolute; inset: auto 0 0; padding: .5rem; font: 700 .8rem var(--sans); color: #fff;
  background: linear-gradient(transparent, rgba(18,58,122,.9));
}
.train-doc:focus-visible, .g-item:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.ab-gallery { padding: 10vh 0; }
.gallery { margin-top: 2.4rem; columns: 3 260px; column-gap: 16px; }
.g-item {
  display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; background: none; cursor: zoom-in;
  break-inside: avoid; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 36px -26px rgba(59,42,23,.6);
}
.g-item img { width: 100%; height: auto; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.g-item:hover img { transform: scale(1.05); }

.ab-cta { padding-bottom: 12vh; }
.back-home { color: rgba(255,255,255,.9); font-weight: 700; text-decoration: none; }
.back-home:hover { text-decoration: underline; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.lightbox::backdrop { background: rgba(10, 18, 36, .9); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; padding: 56px 64px; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 78vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox figcaption { color: #fff; text-align: center; max-width: 60ch; font-size: .95rem; }
.lb-close, .lb-nav {
  position: fixed; border: 0; background: rgba(255,255,255,.14); color: #fff; width: 48px; height: 48px; border-radius: 50%;
  font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.26); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb-next { right: 16px; top: 50%; translate: 0 -50%; }

@media (max-width: 860px) {
  .ab-hero-grid { grid-template-columns: 1fr; }
  .ab-hero-photo { max-width: 420px; margin: 0 auto; }
  .pillars { grid-template-columns: 1fr; }
  .train-item { grid-template-columns: 1fr; padding: 1.3rem; }
  .train-doc img { height: 180px; }
  .lightbox figure { padding: 64px 12px; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; translate: none; }
}

/* ---------- SEO-related markup ---------- */
.brand-h1 { margin: 0; font: inherit; letter-spacing: normal; }
.brand-h1 .brand-name, .brand-h1 .brand-sub { display: block; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.crumbs a { color: var(--blue); font-weight: 700; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.footer .nap { font-style: normal; font-size: .9rem; color: rgba(255,255,255,.85); margin: 1rem auto; line-height: 1.7; }
.footer .nap a, .foot-links a { color: #fff; }
.foot-links { font-size: .9rem; margin: 0 0 1.2rem; color: rgba(255,255,255,.6); }
.foot-links a { text-decoration: none; font-weight: 700; }
.foot-links a:hover { text-decoration: underline; }

/* ---------- 404 ---------- */
.page-404 { background: var(--bg); }
.nf { min-height: 100vh; min-height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 48px 16px; }
.nf img { width: min(220px, 50vw); height: auto; margin-bottom: 1.5rem; }
.nf h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); color: var(--blue-deep); }
.nf h1 em { color: var(--orange-text); }
.nf .lead { max-width: 30ch; }
.nf-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.nf-links .btn-outline { margin-top: 0; }

/* ---------- Mobile comfort: tap targets ≥44px, anchors clear the fixed nav ---------- */
html { scroll-padding-top: calc(var(--nav-h) + 16px); }
.nav-links a { white-space: nowrap; }
.nav-brand { min-height: 44px; min-width: 44px; }
.nav .btn-sm { min-height: 44px; }
.nav-link { min-height: 44px; display: inline-flex; align-items: center; }
.read-more { min-height: 46px; padding: 10px 0; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; }
.foot-links a { display: inline-block; padding: 12px 6px; min-width: 44px; text-align: center; }
.scroll-cue { font-size: .75rem; }
@media (max-width: 400px) {
  .nav { padding: 0 12px; }
  .nav-links { gap: 8px; }
  .nav .btn-sm { padding: .7em 1em; }
}

/* ---------- Enquiry form (Book section, on navy) ---------- */
.enquiry {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin: 0 0 3rem;
  padding: clamp(20px, 3vw, 32px); border-radius: var(--radius);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.enquiry-head, .field-wide, .field-choice { grid-column: 1 / -1; }
.enquiry-head h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .3rem; }
.enquiry-head p { margin: 0; color: rgba(255,255,255,.85); }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font: 700 .9rem var(--sans); color: rgba(255,255,255,.92); padding: 0; margin-bottom: 6px; }
.field .opt { font-weight: 400; color: rgba(255,255,255,.7); }
.enquiry input[type=text], .enquiry input[type=tel], .enquiry textarea {
  width: 100%; font: 400 1rem var(--sans); color: #1c2a4a; background: #fff;
  border: 2px solid transparent; border-radius: 12px; padding: 12px 14px; min-height: 48px;
}
.enquiry textarea { resize: vertical; min-height: 96px; }
.enquiry input::placeholder, .enquiry textarea::placeholder { color: #6b7488; }
.enquiry input:focus-visible, .enquiry textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.enquiry [aria-invalid="true"] { border-color: #ffb4a8; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; cursor: pointer;
  border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4); font: 600 .95rem var(--sans); color: #fff;
  transition: background-color .2s, border-color .2s;
}
.chips input { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; }
.chips label:has(input:checked) { background: rgba(255,255,255,.18); border-color: #fff; }
.chips label:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
fieldset[aria-invalid="true"] .chips label { border-color: #ffb4a8; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: rgba(255,255,255,.9); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--orange); flex: none; }
.consent a { color: #fff; font-weight: 700; }
.consent[aria-invalid="true"] span { text-decoration: underline wavy #ffb4a8; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.enquiry-actions .btn[disabled] { opacity: .7; cursor: progress; }
.form-status { margin: 0; font-weight: 600; color: #fff; }
.form-status.err { color: #ffd2ca; }
.enquiry.sent { display: block; text-align: center; }
.enquiry .thanks h3 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.enquiry .thanks p { color: rgba(255,255,255,.9); max-width: 40ch; margin: 0 auto 1.4rem; }
@media (max-width: 860px) { .enquiry { grid-template-columns: 1fr; } }

/* ---------- Legal page ---------- */
.page-legal { background: var(--bg); }
/* script-free pages: the nav needs its scrolled background from the start */
.page-legal .nav, .page-404 .nav {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
.legal { max-width: 46rem; padding: calc(var(--nav-h) + 6vh) 0 10vh; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--blue-deep); }
.legal h2 { font-size: 1.4rem; margin-top: 2rem; }
.legal a { color: var(--blue); font-weight: 700; }

/* ---------- Click-to-load map ---------- */
.map-placeholder {
  height: 100%; min-height: 280px; display: grid; place-content: center; justify-items: center; gap: 10px;
  text-align: center; padding: 24px; color: #fff;
  background:
    radial-gradient(circle at 30% 30%, rgba(42,163,184,.35), transparent 55%),
    repeating-linear-gradient(35deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-55deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px);
}
.map-placeholder svg { color: var(--orange); }
.map-placeholder p { margin: 0; }
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.map-placeholder small { font-size: .82rem; color: rgba(255,255,255,.8); max-width: 34ch; }
.map-placeholder small a { color: #fff; }

.reviews-note { width: 100%; margin: 0; font-size: .88rem; color: var(--ink-soft); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .5rem; }

.footer .credit { margin-top: .6rem; }
.footer .credit a { color: #fff; font-weight: 700; text-decoration: none; display: inline-block; padding: 12px 4px; }
.footer .credit a:hover { text-decoration: underline; }

.nf-credit { margin-top: 2rem; font-size: .85rem; color: var(--ink-soft); }
.nf-credit a { color: var(--blue); font-weight: 700; text-decoration: none; display: inline-block; padding: 12px 4px; }

/* ---------- RakkenHo ---------- */
.rakkenho { padding: 10vh 0; }
.rk-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.rk-head h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); color: var(--blue-deep); margin-bottom: .2em; }
.rk-head .lead em { color: var(--orange-text); }
.rk-media { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 34px 60px -38px rgba(28,42,74,.6); }
.rk-media img { width: 100%; height: auto; will-change: transform; }
.rk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(36px, 6vh, 64px); }
.rk-block { padding: 1.6rem 1.7rem; border-radius: 22px; background: #fff; box-shadow: 0 16px 34px -28px rgba(28,42,74,.55); }
.rk-block p { margin: 0; color: var(--ink-soft); }
.rk-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rk-chips li { padding: .45em .9em; border-radius: 999px; font-size: .92rem; font-weight: 600; background: color-mix(in srgb, var(--teal) 12%, #fff); color: #155e6b; }
.rk-sub { margin: clamp(36px, 6vh, 64px) 0 1.2rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.rk-benefits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.rk-benefits li { padding: 1.4rem 1.3rem; border-radius: 20px; background: #fff; box-shadow: 0 16px 34px -28px rgba(28,42,74,.55); }
.rk-benefits b { display: block; font: 500 1.12rem/1.3 var(--serif); margin: .8rem 0 .4rem; color: var(--blue-deep); }
.rk-benefits p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.rk-icon {
  display: block; width: 38px; height: 38px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 22%, transparent 23%),
    conic-gradient(from 200deg, var(--purple), var(--blue), var(--teal), var(--leaf), var(--orange), var(--purple));
  animation: rk-spin 14s linear infinite;
}
@keyframes rk-spin { to { transform: rotate(1turn); } }
.rk-caution {
  margin-top: clamp(28px, 5vh, 48px); padding: 1.4rem 1.6rem; border-radius: 18px;
  background: #fff7ea; border: 1px solid #f3d3a4; border-left: 5px solid var(--orange);
}
.rk-caution h3 { font-size: 1.2rem; color: var(--orange-text); margin-bottom: .4rem; }
.rk-caution p { margin: 0; }
.rk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 2rem; }
@media (max-width: 1100px) { .rk-benefits { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .rk-intro, .rk-grid { grid-template-columns: 1fr; }
  .rk-benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .rk-benefits { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rk-icon { animation: none; } }

/* ---------- Your space (session section) ---------- */
.space-section { padding: 6vh 0 10vh; }
.space { margin: 0; }
.space-head { max-width: 46rem; margin-bottom: 1.4rem; }
.space-head h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .3rem; }
.space-head p { margin: 0; color: var(--ink-soft); }
.space-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: stretch; }
.space-grid figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.space-grid img {
  width: 100%; height: auto; flex: none; object-fit: cover; border-radius: 22px;   /* height:auto so the HTML height attribute doesn't win; flex:1 would collapse it */
  box-shadow: 0 26px 50px -34px rgba(28,42,74,.6);
}
.space-wide img { aspect-ratio: 4 / 3; }
.space-tall img { aspect-ratio: 3 / 4; }
.space-grid figcaption { font-size: .9rem; color: var(--ink-soft); }
@media (min-width: 861px) { .space-grid img { aspect-ratio: auto; height: clamp(320px, 42vw, 520px); } }
@media (max-width: 860px) { .space-grid { grid-template-columns: 1fr; } }

/* ---------- Review mode (?review) — outlines placeholder copy ---------- */
.review [data-ph] { outline: 2px dashed var(--orange); outline-offset: 6px; position: relative; }
.review [data-ph]::after {
  content: "placeholder"; position: absolute; top: -12px; right: 0; z-index: 5;
  font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  background: var(--orange); color: #fff; padding: 3px 6px; border-radius: 4px;
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .story { display: block; padding: 0; }
  .story-media {
    top: var(--nav-h); height: 46vh; height: 46svh; padding: 12px 16px 12px;
    z-index: 3; background: var(--bg);   /* cards slide underneath the illustration */
  }
  .frame { width: min(84vw, 42svh); border-radius: 24px; }
  .story-steps { min-height: 0; display: block; padding: 8px 16px 6vh; }
  .step, .step-head { padding: 8px 0; }
  .step-list { min-height: 60vh; }
  .step-card {
    max-width: none; width: 100%; padding: 22px 22px 18px; border-radius: 20px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px -24px rgba(0,0,0,.45);
  }
  .anim .step .step-card { opacity: .8; transform: translateY(12px); }
  .anim .step.is-active .step-card { opacity: 1; transform: none; }
  .cond-list li { font-size: 1rem; padding: .8rem 1rem .8rem 2.6rem; }
  .cond-list li::before { left: 1rem; }

  .timeline { grid-template-columns: 1fr; gap: 26px; padding-left: 64px; }
  .timeline::before, .timeline::after { top: 0; bottom: 0; left: 22px; right: auto; width: 2px; height: auto; }
  .timeline::after { transform-origin: 50% 0; transform: scaleY(var(--p)); background: linear-gradient(180deg, var(--purple), var(--blue), var(--teal), var(--leaf)); }
  .dot { position: absolute; left: -64px; top: -4px; }
  .about-grid, .book-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 320px; }
  .nav-brand span { font-size: .98rem; }
}

@media (max-width: 860px) {
  .story.has-wave { padding-top: var(--wave-h); }   /* padding, not a child margin: that would collapse through */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ripples, .fireflies span { display: none; }
  .wave path { animation: none; }
}

/* ---------- Phones held sideways (short + wide): side-by-side stories, compact hero ---------- */
@media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) {
  .scroll-cue { display: none; }
  .hero-brand { margin-top: .6rem; }
  .brand-name { font-size: 1.9rem; }
  .story { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 0 20px; }
  .story-flip .story-media { order: 2; }
  .story-media {
    position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h));
    padding: 8px 0; background: transparent; z-index: 1;
  }
  .frame { width: min(40vw, calc(100svh - var(--nav-h) - 32px)); }
  .story-steps { padding: 4vh 0 8vh; }
  .step, .step-head { padding: 10px 0; }
  .step-card, #conditions .step-card {
    background: none; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .lead { font-size: 1.2rem; }
}