/* ---- vendor/lenis.css ---- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ---- css/tokens.css ---- */
/* ============================================================
   Esencja Clinic — journey homepage · design tokens
   Brand values copied from the live style.css (Zapizen, 2026).
   Do not change the identity — extend it.
   ============================================================ */

:root{
  --ink:        #03090b;
  --bg:         #061317;
  --bg-alt:     #08191e;
  --surface:    #0b2127;
  --surface-hi: #0f2a31;
  --accent:       #40d4e6;
  --accent-light: #8be9f4;
  --accent-deep:  #169fbd;
  --accent-ink:   #03222a;
  --accent-glow:  rgba(64,212,230,.13);
  --text:  #f2f8f9;
  --muted: #a9bdc2;
  --dim:   #6c848a;
  --line:        rgba(64,212,230,.16);
  --line-strong: rgba(64,212,230,.4);

  --ff-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-sans:   'Lexend', 'Segoe UI', system-ui, sans-serif;
  --ff-script: 'Sacramento', 'Segoe Script', 'Brush Script MT', cursive;

  --shadow-md: 0 18px 40px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 34px 70px -28px rgba(0,0,0,.75);
  --ease: cubic-bezier(.2,.7,.2,1);

  --radius: 20px;
  --header-h: 72px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Journey additions ---- */
  /* Ambient glow colour as an "r g b" triplet so it can be tweened and used with alpha.
     teal (default) → amber (hot stone) → ember (cupping) → teal. */
  --glow: 64 212 230;
  --glow-teal:  64 212 230;
  --glow-amber: 224 160 96;
  --glow-ember: 232 110 64;
  --glow-strength: .12;

  --thread: var(--accent);
  --thread-width: 1.25px;

  --ease-calm: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .25s;
  --dur: .6s;

  /* Icons as CSS masks (same as live) */
  --lotus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 4C24 14 24 26 32 36 40 26 40 14 32 4Z'/%3E%3Cpath d='M18 10C13 21 19 32 32 36 29 27 25 16 18 10Z'/%3E%3Cpath d='M46 10C51 21 45 32 32 36 35 27 39 16 46 10Z'/%3E%3Cpath d='M6 21C7 30 18 37 32 36 23 31 15 24 6 21Z'/%3E%3Cpath d='M58 21C57 30 46 37 32 36 41 31 49 24 58 21Z'/%3E%3Cpath d='M9 41C16 45 24 44 28 42M55 41C48 45 40 44 36 42'/%3E%3Ccircle cx='32' cy='43' r='1.8' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 .5C7.4.5.5 7.4.5 16c0 2.7.7 5.4 2 7.7L.5 31.5l8-2.1c2.3 1.2 4.8 1.9 7.5 1.9 8.6 0 15.5-6.9 15.5-15.5S24.6.5 16 .5zm0 28.2c-2.4 0-4.7-.6-6.7-1.8l-.5-.3-4.8 1.3 1.3-4.6-.3-.5c-1.3-2.1-2-4.5-2-6.9C3 8.8 8.8 3 16 3s13 5.8 13 13-5.8 12.7-13 12.7zm7.1-9.5c-.4-.2-2.3-1.1-2.6-1.3-.4-.1-.6-.2-.9.2-.3.4-1 1.3-1.2 1.5-.2.2-.4.3-.8.1-.4-.2-1.6-.6-3.1-1.9-1.1-1-1.9-2.2-2.1-2.6-.2-.4 0-.6.2-.8l.6-.7c.2-.2.3-.4.4-.7.1-.3 0-.5 0-.7-.1-.2-.9-2.1-1.2-2.9-.3-.8-.6-.7-.9-.7h-.8c-.3 0-.7.1-1.1.5-.4.4-1.4 1.4-1.4 3.4s1.5 3.9 1.7 4.2c.2.3 2.9 4.5 7.1 6.3 1 .4 1.8.7 2.4.9 1 .3 1.9.3 2.6.2.8-.1 2.3-.9 2.6-1.9.3-.9.3-1.7.2-1.9-.1-.2-.4-.3-.8-.5z'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---- css/base.css ---- */
/* ============================================================
   Base — reset, type, buttons, forms, small components.
   Component looks follow the live style.css.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 8px)}
html:not(.lenis){scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--ff-sans);font-weight:300;font-size:1rem;line-height:1.75;
  color:var(--muted);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{max-width:100%;display:block}
img{height:auto}
picture{display:contents}
ul,ol{list-style:none}
a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast)}
a:hover{color:var(--accent-light)}
button{font:inherit;color:inherit}
address{font-style:normal}

h1,h2,h3,h4{font-family:var(--ff-serif);color:var(--text);font-weight:600;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(2.7rem,7.2vw,5.8rem);line-height:1.04;letter-spacing:-.015em}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08}
h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2}
h1 em,h2 em,h3 em{font-style:italic;font-weight:500;color:var(--accent-light)}
p{text-wrap:pretty}
strong{font-weight:500;color:var(--text)}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- Language toggle (same mechanism as the live site) ---------- */
html[data-lang="nl"] .pl{display:none !important}
html[data-lang="pl"] .nl{display:none !important}

/* ---------- Layout helpers ---------- */
.container{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.narrow{width:min(780px,100% - 2*var(--gutter))}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{
  position:fixed;left:1rem;top:-4rem;z-index:300;padding:.7rem 1.1rem;border-radius:10px;
  background:var(--accent);color:var(--accent-ink);font-weight:500;transition:top var(--dur-fast);
}
.skip-link:focus{top:1rem;color:var(--accent-ink)}

/* ---------- Type helpers ---------- */
.eyebrow{
  display:inline-block;font-size:.74rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.1rem;
}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.7;color:var(--muted)}
.script{font-family:var(--ff-script);font-weight:400;color:var(--accent);line-height:1.1}
.note{font-size:.9rem;padding:.9rem 1.1rem;border-left:2px solid var(--line-strong);background:rgba(11,33,39,.5);border-radius:0 12px 12px 0}

/* ---------- Icons (CSS masks take the text colour) ---------- */
.ico{
  display:inline-block;flex:none;width:1em;height:1em;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
}
.ico-wa{--i:var(--wa)}
.ico-arrow{--i:var(--arrow)}
.ico-down{transform:rotate(90deg)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:44px;
  padding:.9rem 1.8rem;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  font-family:var(--ff-sans);font-weight:500;font-size:.92rem;letter-spacing:.04em;line-height:1.2;
  transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s,border-color .3s;
}
.btn-primary{background:linear-gradient(135deg,#6be3f1 0%,#27b9d3 100%);color:var(--accent-ink);box-shadow:0 8px 26px rgba(64,212,230,.22)}
.btn-primary:hover{color:var(--accent-ink);transform:translateY(-2px);box-shadow:0 14px 34px rgba(64,212,230,.36)}
.btn-ghost{color:var(--text);border-color:var(--line-strong);background:rgba(6,19,23,.35)}
.btn-ghost:hover{color:var(--text);background:var(--accent-glow);border-color:var(--accent);transform:translateY(-2px)}
.btn-whatsapp{background:#25d366;color:#06301a;box-shadow:0 8px 24px rgba(37,211,102,.2)}
.btn-whatsapp:hover{color:#06301a;transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.34)}
.btn .ico{font-size:1.15em}
.btn-sm{padding:.62rem 1.25rem;font-size:.84rem}
.btn-icon{width:48px;height:48px;padding:0}
.btn-block{display:flex;width:100%;white-space:normal;text-align:center}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.link-more{display:inline-flex;align-items:center;gap:.45rem;font-weight:400;font-size:.92rem;min-height:44px}
.link-more .ico{transition:transform .3s var(--ease)}
.link-more:hover .ico{transform:translateX(4px)}

/* ---------- Chips, tags, badges ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .95rem;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--text);font-size:.86rem;font-weight:400;white-space:nowrap;
}
.chip-accent{border-color:var(--accent);background:var(--accent-glow)}
.chip-note{
  display:inline-block;padding:.05rem .45rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-size:.68rem;font-weight:600;letter-spacing:.06em;
}
.tag-list{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem}
.tag-list li{position:relative;padding-left:1rem;font-size:.86rem;color:var(--accent-light);letter-spacing:.04em}
.tag-list li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.badge-new{
  display:inline-block;margin-left:.5rem;padding:.12rem .6rem;border-radius:999px;vertical-align:.12em;
  background:var(--accent);color:var(--accent-ink);font-family:var(--ff-sans);font-size:.62rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.6;
}

/* ---------- Forms (as live) ---------- */
.form-card{
  background:linear-gradient(180deg,var(--surface) 0%,rgba(11,33,39,.5) 100%);
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,4vw,2.8rem);box-shadow:var(--shadow-md);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.form-field.full{grid-column:1/-1}
.form-field label{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.form-field input,.form-field select,.form-field textarea{
  width:100%;min-height:48px;padding:.85rem 1rem;border-radius:12px;border:1px solid rgba(64,212,230,.24);background:rgba(3,9,11,.55);
  font-family:var(--ff-sans);font-weight:300;font-size:1rem;color:var(--text);color-scheme:dark;
  transition:border-color .25s,box-shadow .25s;
}
.form-field select{
  appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340d4e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:1.1rem;
}
.form-field select option{background:var(--surface);color:var(--text)}
.form-field textarea{resize:vertical;min-height:120px}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.form-actions{margin-top:1.6rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.form-note{font-size:.82rem;color:var(--muted)}
.form-privacy{margin-top:1rem;font-size:.82rem;color:var(--muted)}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{display:none;margin-top:1.4rem;padding:1.1rem 1.4rem;border-radius:12px;font-size:.95rem}
.form-status.ok{display:block;background:rgba(37,211,102,.1);color:#8fe6b4;border:1px solid rgba(37,211,102,.3)}
.form-status.err{display:block;background:rgba(224,92,92,.1);color:#f2a7a7;border:1px solid rgba(224,92,92,.3)}

@media (max-width: 560px){
  .form-grid{grid-template-columns:1fr}
  .btn{padding:.85rem 1.4rem}
}

/* ---- css/layout.css ---- */
/* ============================================================
   Layout — persistent UI: ambient glow, header, journey map,
   progress rail/bar, lotus thread, footer, WhatsApp button.
   ============================================================ */

/* ---------- Ambient glow (colour follows the chapter via --glow) ---------- */
.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 38%, rgb(var(--glow) / var(--glow-strength)), transparent 72%),
    radial-gradient(50% 40% at 85% 100%, rgb(var(--glow) / calc(var(--glow-strength) * .5)), transparent 70%);
}
main,.site-footer{position:relative;z-index:1}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;gap:1rem;padding-inline:var(--gutter);
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,box-shadow .35s,transform .45s var(--ease-calm);
}
.site-header::before{
  content:"";position:absolute;inset:0 0 -30px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,9,11,.75),rgba(3,9,11,0));transition:opacity .35s;
}
.site-header.is-scrolled{
  background:rgba(6,19,23,.86);border-bottom-color:var(--line);box-shadow:0 10px 30px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.site-header.is-scrolled::before{opacity:0}
.site-header.is-hidden{transform:translateY(-100%)}
.menu-open .site-header{transform:none;background:transparent;border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-open .site-header::before{opacity:0}

.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;color:var(--text)}
.brand:hover{color:var(--text)}
.brand img{height:36px;width:auto}
.brand-text{font-family:var(--ff-serif);font-weight:500;font-size:1.35rem;line-height:1;color:var(--text);letter-spacing:.01em}
.brand-text em{
  display:block;margin-top:.28rem;font-family:var(--ff-sans);font-style:normal;font-weight:400;
  font-size:.52rem;letter-spacing:.5em;text-transform:uppercase;color:var(--accent);
}
.header-actions{display:flex;align-items:center;gap:.8rem}
.lang-switch{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.lang-switch button{
  border:0;background:transparent;cursor:pointer;padding:.42rem .75rem;min-height:36px;
  font-family:var(--ff-sans);font-size:.76rem;font-weight:500;letter-spacing:.06em;color:var(--muted);transition:.25s;
}
.lang-switch button:hover{color:var(--text)}
.lang-switch button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

.menu-toggle{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.4rem .2rem .4rem .6rem;
  background:none;border:0;cursor:pointer;color:var(--text);
  font-size:.74rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
}
.menu-toggle-icon{display:grid;gap:6px;width:26px}
.menu-toggle-icon span{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
.menu-toggle-icon span:last-child{width:62%;justify-self:end}
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child{width:100%;transform:translateY(-3.75px) rotate(-45deg)}

@media (max-width: 720px){
  .header-book{display:none}
  .menu-toggle-label{display:none}
  .brand-text{font-size:1.15rem}
  .brand img{height:30px}
}
@media (max-width: 380px){ .brand-text{display:none} }

/* ---------- Journey map (menu overlay) ---------- */
.journey-map{
  position:fixed;inset:0;z-index:90;overflow-y:auto;
  background:rgba(3,9,11,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:calc(var(--header-h) + 2rem) var(--gutter) 3rem;
}
.journey-map[hidden]{display:none}
.journey-map-inner{width:min(980px,100%);margin-inline:auto;display:grid;gap:2.5rem}
.journey-map-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.2rem 2.5rem;counter-reset:jm}
.journey-map-list a{
  display:flex;align-items:baseline;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line);
  font-family:var(--ff-serif);font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--text);
}
.journey-map-list a:hover,.journey-map-list a[aria-current="true"]{color:var(--accent-light)}
.jm-num{font-family:var(--ff-sans);font-size:.72rem;letter-spacing:.2em;color:var(--accent)}
.journey-map-pages{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.journey-map-pages a{color:var(--muted);font-size:.92rem}
.journey-map-pages a:hover{color:var(--text)}
.menu-open{overflow:hidden}

/* ---------- Progress rail (desktop) ---------- */
.progress-rail{
  position:fixed;right:clamp(.9rem,1.6vw,1.6rem);top:50%;z-index:80;transform:translateY(-50%);
  display:none;
}
.progress-rail ol{position:relative;display:grid;gap:1.05rem}
.progress-rail ol::before{
  content:"";position:absolute;right:5px;top:6px;bottom:6px;width:1px;background:var(--line);
}
.progress-rail a{
  position:relative;display:flex;align-items:center;justify-content:flex-end;gap:.8rem;min-height:12px;
  color:var(--muted);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.progress-rail a::after{
  content:"";flex:none;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--bg);transition:background .35s,border-color .35s,transform .35s var(--ease);
}
.progress-rail a.is-done::after{background:var(--accent-deep);border-color:var(--accent-deep)}
.progress-rail a[aria-current="true"]::after{background:var(--accent);border-color:var(--accent);transform:scale(1.35);box-shadow:0 0 14px rgb(var(--glow) / .6)}
.rail-label{
  opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--ease);white-space:nowrap;
  padding:.15rem .5rem;border-radius:6px;background:rgba(3,9,11,.7);
}
.progress-rail a:hover .rail-label,.progress-rail a:focus-visible .rail-label,.progress-rail a[aria-current="true"] .rail-label{opacity:1;transform:none}
.progress-rail a[aria-current="true"]{color:var(--text)}
.progress-rail.is-quiet a:not(:hover):not(:focus-visible) .rail-label{opacity:0}
@media (min-width: 900px){ .progress-rail{display:block} }

/* ---------- Progress bar (mobile) ---------- */
.progress-bar{position:fixed;inset:0 0 auto 0;z-index:110;height:2px;pointer-events:none}
.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));transform-origin:0 50%;transform:scaleX(0)}
@media (min-width: 900px){ .progress-bar{display:none} }

/* ---------- Lotus thread (one SVG per section, built by js/core/thread.js) ---------- */
.thread-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.thread-svg path{fill:none;stroke:var(--thread);stroke-width:var(--thread-width);stroke-linecap:round;opacity:.6}
.thread-svg .thread-glow{stroke-width:6px;opacity:.08}
/* zero specificity so chapter-specific positioning (absolute backgrounds) wins */
:where(.chapter) > :where(:not(.thread-svg)){position:relative;z-index:1}

/* ---------- WhatsApp floating button (mobile) ---------- */
.wa-fab{
  position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:85;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#06301a;box-shadow:0 10px 28px rgba(0,0,0,.4);font-size:1.6rem;
  transition:opacity .35s,transform .35s var(--ease);
}
.wa-fab:hover{color:#06301a}
.wa-fab.is-hidden{opacity:0;transform:translateY(20px) scale(.9);pointer-events:none}
@media (min-width: 900px){ .wa-fab{display:none} }

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(3,9,11,.6));padding-top:4rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer-brand p{margin-top:1rem;font-size:.92rem;max-width:34ch}
.footer-brand .script{font-size:1.8rem;margin-top:.8rem}
.footer-title{font-family:var(--ff-sans);font-size:.74rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--text);margin-bottom:1rem}
.footer-links{display:grid;gap:.55rem;font-size:.92rem}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text)}
.footer-bottom{margin-top:3rem;padding:1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} }
@media (max-width: 520px){ .footer-grid{grid-template-columns:1fr} }

/* Touch: every control gets at least a 44×44 hit area (WCAG 2.5.5 / Apple HIG) */
.brand{min-height:44px}
.menu-toggle{min-width:44px;justify-content:center}
@media (pointer: coarse){
  .lang-switch button{min-width:44px;min-height:44px;padding-inline:.6rem}
}

/* ---- css/chapters.css ---- */
/* ============================================================
   Chapters — static layout for all nine chapters.
   Motion lives in JS; everything here must read well without it.
   ============================================================ */

.chapter{position:relative;padding-block:clamp(5.5rem,14vh,10rem)}
.section-intro{margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.center h2 + p{margin-top:1.1rem}

/* ---------- 01 · Aankomst (hero) ---------- */
.ch-hero{
  min-height:100svh;display:grid;align-content:end;justify-items:center;
  padding-top:calc(var(--header-h) + 2rem);padding-bottom:clamp(6rem,14vh,9rem);overflow:clip;
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.9}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(6,19,23,.25) 0%, rgba(6,19,23,0) 25%, rgba(6,19,23,.55) 55%, var(--bg) 92%),
    radial-gradient(80% 60% at 50% 100%, rgba(6,19,23,.6), transparent 70%);
}
.hero-content{text-align:center;display:grid;justify-items:center}
/* Avoid a flash before the intro plays. If main.js never runs, the copy appears after 2.5s anyway. */
.js .hero-content,.js .scroll-cue{opacity:0;animation:hero-fallback 0s 2.5s forwards}
.motion .hero-content,.motion .scroll-cue{opacity:1;animation:none}
@keyframes hero-fallback{to{opacity:1}}
.hero-lotus{width:72px;height:auto;color:var(--accent);margin-bottom:1.4rem;filter:drop-shadow(0 0 12px rgb(var(--glow) / .5))}
.ch-hero h1{max-width:14ch}
.ch-hero .lead{max-width:56ch;margin-top:1.4rem}
.ch-hero .actions{justify-content:center;margin-top:2.2rem}
.scroll-cue{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:1;
  display:grid;justify-items:center;gap:.6rem;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.scroll-cue-line{width:1px;height:42px;background:linear-gradient(180deg,var(--accent),transparent);transform-origin:top;animation:cue 2.6s var(--ease-calm) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion: reduce){ .scroll-cue-line{animation:none} }
/* Phones: portrait orchid sits in the top part, copy below it on dark */
@media (max-width: 1024px) and (orientation: portrait){
  .hero-media{bottom:auto;height:66svh}
  .hero-media img{object-position:50% 88%}
  .hero-media::after{background:linear-gradient(180deg, rgba(6,19,23,.2) 0%, rgba(6,19,23,0) 25%, rgba(6,19,23,.62) 55%, var(--bg) 92%)}
  .ch-hero{padding-bottom:5rem}
  .scroll-cue{bottom:.8rem}
  .scroll-cue > :not(.scroll-cue-line){display:none}
  .hero-lotus{width:56px;margin-bottom:1rem}
}
@media (max-height: 640px){ .scroll-cue{display:none} }

/* ---------- 02 · De drukte ---------- */
.ch-drukte{overflow:clip}
.noise-stage{position:relative;width:min(1100px,100% - 2*var(--gutter));margin:clamp(2.5rem,6vh,4rem) auto}
.noise-words{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.4rem 1.6rem}
.noise-words li{
  font-family:var(--ff-serif);color:var(--dim);line-height:1.2;white-space:nowrap;
  font-size:clamp(1.05rem,2vw,1.5rem);
}
.noise-words li:nth-child(3n+1){font-size:clamp(1.4rem,3.2vw,2.5rem);color:var(--muted)}
.noise-words li:nth-child(4n+2){font-family:var(--ff-sans);font-weight:300;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(.78rem,1.2vw,.95rem)}
.noise-words li:nth-child(5n){font-style:italic}
.noise-resolve{display:grid;justify-items:center;gap:.6rem}
.noise-final{
  font-family:var(--ff-serif);font-style:italic;font-weight:500;color:var(--accent-light);
  font-size:clamp(3.2rem,9vw,7rem);line-height:1;text-shadow:0 0 40px rgb(var(--glow) / .35);
}

/* ---------- 03 · Adem ---------- */
.ch-adem{overflow:clip}
.adem-bg{position:absolute;inset:0;z-index:0}
.adem-bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.adem-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(6,19,23,.2) 30%,rgba(6,19,23,.2) 70%,var(--bg) 100%)}
.adem-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;min-height:min(80svh,760px)}
.breath{position:relative;width:min(76vw,460px);aspect-ratio:1;justify-self:center}
.breath-orb{position:absolute;inset:0;display:grid;place-items:center}
.breath-circle{
  width:80%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%, rgb(var(--glow) / .28) 0%, rgb(var(--glow) / .1) 45%, rgb(var(--glow) / 0) 70%);
  border:1px solid var(--line-strong);
  box-shadow:0 0 80px rgb(var(--glow) / .15), inset 0 0 60px rgb(var(--glow) / .12);
}
.breath-core{width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--accent-light),rgb(var(--glow) / .2) 70%);filter:blur(1px);opacity:.85}
.breath-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;pointer-events:none}
.breath-ring circle{fill:none;stroke-width:.45}
.breath-ring-track{stroke:var(--line)}
.breath-ring-fill{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 0 2px rgb(var(--glow) / .8))}
.breath-ring-guide{stroke:var(--accent-light);stroke-width:.9 !important;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:opacity .6s}
.breath.is-guided .breath-ring-guide{opacity:1}
.breath.is-guided .breath-ring-fill{opacity:.25}
.breath-stop-label{display:none}
.breath-start[aria-pressed="true"] .breath-start-label{display:none}
.breath-start[aria-pressed="true"] .breath-stop-label{display:inline}
.breath-start[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-glow)}
.breath-phase{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.breath-word{
  grid-area:1/1;font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--text);
  opacity:0;transition:opacity .6s var(--ease-calm);
}
.breath-word.is-active{opacity:1}
.adem-copy p + p{margin-top:1rem}
.adem-copy h2{margin-bottom:1.4rem}
.breath-start{margin-top:2rem}

/* ---------- 04 · Behandelingen ---------- */
.stop{padding-block:clamp(3rem,9vh,6.5rem)}
.stop-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5.5vw,5.5rem);align-items:center}
.stop-flip .stop-media{order:2}
.stop-media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-lg);background:var(--surface)}
.stop-media-tall{aspect-ratio:4/5;max-height:78svh;justify-self:center;width:min(100%,520px)}
.stop-media img{width:100%;height:100%;object-fit:cover}
.stop-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.stop-fx{position:absolute;inset:0;pointer-events:none}
.stop-copy{display:grid;gap:1.15rem;align-content:center}
.stop-num{font-size:.74rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.stop-promise{font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.4;color:var(--accent-light)}
.stop-copy .actions{margin-top:.4rem}

/* ---------- 05 · Kiezen ---------- */
.chooser{width:min(920px,100% - 2*var(--gutter));display:grid;gap:2.2rem}
.chooser-step{border:0;min-width:0}
.chooser-step legend{
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem;
  font-family:var(--ff-serif);font-size:clamp(1.3rem,2.2vw,1.65rem);color:var(--text);
}
.step-n{
  display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:50%;
  border:1px solid var(--line-strong);font-family:var(--ff-sans);font-size:.85rem;color:var(--accent);
}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.option-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.option{position:relative;display:block;cursor:pointer}
.option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.option > span{
  display:flex;align-items:center;min-height:64px;height:100%;padding:1rem 1.2rem;border-radius:14px;
  border:1px solid var(--line);background:rgba(11,33,39,.55);color:var(--text);font-size:.98rem;line-height:1.4;
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.option:hover > span{border-color:var(--line-strong);transform:translateY(-2px)}
.option input:checked + span{border-color:var(--accent);background:linear-gradient(135deg,rgba(64,212,230,.16),rgba(11,33,39,.7));box-shadow:0 0 0 1px var(--accent) inset}
.option input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.option-grid-3 .option > span{justify-content:center}
.chooser-result{border:1px solid var(--line-strong);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);background:var(--surface)}
.chooser-fallback{text-align:center;font-size:.92rem}
.js .chooser-fallback{font-size:.86rem;color:var(--muted)}

/* ---------- 06 · Ritueel ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative}
.steps::before{
  content:"";position:absolute;top:1.6rem;left:16.66%;right:16.66%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 15%,var(--line-strong) 85%,transparent);
}
.step{display:grid;justify-items:center;text-align:center;gap:.7rem}
.step-dot{
  position:relative;display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;
  border:1px solid var(--accent);background:var(--bg);color:var(--accent);font-family:var(--ff-serif);font-size:1.25rem;
  box-shadow:0 0 24px rgb(var(--glow) / .2);
}
.step h3{font-size:1.35rem}
.step p{max-width:28ch}
.steps-note{text-align:center;font-size:clamp(1.9rem,3.4vw,2.6rem);margin-top:clamp(2.5rem,6vh,4rem)}

/* ---------- 07 · Prijzen ---------- */
.price-groups{width:min(880px,100% - 2*var(--gutter));display:grid;gap:2.6rem}
.price-group h3{font-size:.76rem;font-family:var(--ff-sans);font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.price-row{
  display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:.3rem 1.4rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
}
.price-name{color:var(--text);font-size:1.02rem;font-weight:400}
.price-meta{font-size:.86rem;color:var(--muted);white-space:nowrap}
.price-amount{font-family:var(--ff-serif);font-size:1.3rem;color:var(--text);white-space:nowrap;text-align:right;min-width:4.5ch}
.price-amount s{font-family:var(--ff-sans);font-size:.85rem;color:var(--muted);margin-right:.5rem}
.price-save{grid-column:1/-1;font-size:.84rem;color:var(--accent-light)}
.price-more{margin-top:2.4rem}

/* ---------- 08 · De ruimte ---------- */
.ruimte-grid{display:grid;grid-template-columns:.9fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.ruimte-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;max-height:80svh;box-shadow:var(--shadow-lg)}
.ruimte-media img{width:100%;height:115%;object-fit:cover}
.ruimte-copy{display:grid;gap:1.2rem;justify-items:start}
.address{font-family:var(--ff-serif);font-size:1.35rem;line-height:1.5;color:var(--text)}

/* ---------- 09 · Boeken ---------- */
.ch-boeken{padding-bottom:clamp(4rem,10vh,7rem)}
.bloom-lotus{width:clamp(88px,10vw,128px);height:auto;margin:0 auto 1.6rem;color:var(--accent);filter:drop-shadow(0 0 16px rgb(var(--glow) / .45))}
.booking-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.booking-contact{display:grid;gap:1.8rem;padding-top:.4rem}
.contact-list{display:grid;gap:1.1rem}
.contact-list dt{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.contact-list dd{color:var(--text);overflow-wrap:anywhere}

/* ---------- Responsive ---------- */
@media (max-width: 899px){
  .adem-grid,.stop-grid,.ruimte-grid,.booking-grid{grid-template-columns:1fr}
  .adem-grid{min-height:0;gap:3rem}
  .adem-copy{order:-1}
  .stop-flip .stop-media{order:0}
  .stop-media-tall{width:100%;aspect-ratio:4/5;max-height:70svh}
  .steps{grid-template-columns:1fr;gap:2.4rem}
  .steps::before{top:1.6rem;bottom:1.6rem;left:50%;right:auto;width:1px;height:auto;background:linear-gradient(180deg,transparent,var(--line-strong) 10%,var(--line-strong) 90%,transparent)}
  .ruimte-media{aspect-ratio:4/3}
}
@media (max-width: 560px){
  .option-grid{grid-template-columns:1fr}
  .option-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .price-row{grid-template-columns:1fr auto}
  .price-meta{grid-column:1;grid-row:2}
  .price-amount{grid-row:1/3;grid-column:2;align-self:center}
}

/* ============================================================
   Phase 3 · scene states
   Classes like .is-scene are added by the chapter JS inside gsap.matchMedia(),
   so reduced motion and no-JS keep the static layout above.
   ============================================================ */

/* ---------- 02 · Drukte scene ---------- */
.ch-drukte.is-scene .noise-scene{position:relative;height:100svh;overflow:hidden}
.ch-drukte.is-scene .noise-stage{position:absolute;inset:0;width:auto;margin:0}
.ch-drukte.is-scene .noise-words{display:block;position:absolute;inset:0}
.ch-drukte.is-scene .noise-words li{position:absolute;left:0;top:0}
.ch-drukte.is-scene .noise-words li > span{display:inline-block}
.ch-drukte.is-scene .noise-resolve{position:absolute;inset:0;margin-inline:auto;display:grid;place-content:center;justify-items:center;gap:.8rem}
.ch-drukte.is-scene-mobile .noise-words li:nth-child(n+9){display:none}
.noise-after{font-size:1.05rem}

/* ---------- 04 · Treatment emblems (abstract line art, brand cyan) ---------- */
.emblem{display:block;height:84px;color:var(--accent);overflow:visible}
.emblem-kobido{width:112px}
.emblem-hotstone,.emblem-cupping{width:92px}
.emblem-massage{width:180px;height:64px}
.emblem .e-line{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.e-ground,.e-skin{opacity:.45}
.e-stone{fill:url(#basalt);stroke:currentColor;stroke-width:1;stroke-opacity:.85}
.e-flame{fill:url(#flame);transform-box:fill-box;transform-origin:50% 100%}
.e-mark{fill:none;stroke:#e88a9a;stroke-width:1.3;opacity:.75}
.stop-hotstone .emblem{color:#f0b27a}
.stop-cupping .emblem{color:#f39a6b}
html:not(.motion) .emblem-massage{display:none} /* its paths are generated in JS */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference){
  .motion .e-flame{animation:flicker 1.5s ease-in-out infinite}
}
@keyframes flicker{0%,100%{transform:scale(1,1)}25%{transform:scale(.9,1.1) skewX(2deg)}55%{transform:scale(1.06,.94) skewX(-2deg)}80%{transform:scale(.96,1.04)}}

/* Photo overlays (opacity driven by JS) */
.stop-fx{opacity:0}
.stop-hotstone .stop-fx{background:radial-gradient(75% 70% at 35% 75%, rgba(255,150,70,.6), transparent 70%);mix-blend-mode:soft-light}
.stop-cupping .stop-fx{background:radial-gradient(70% 70% at 60% 60%, rgba(240,100,50,.55), transparent 70%);mix-blend-mode:soft-light}
.stop-kobido .stop-fx{opacity:1;--ring-s:.4;--ring-o:0}
.stop-kobido .stop-fx::before{
  content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:3/4;border-radius:50%;
  border:1px solid var(--accent-light);box-shadow:0 0 24px rgb(var(--glow) / .5);
  transform:translate(-50%,-50%) scale(var(--ring-s));opacity:var(--ring-o);
}

/* Thread nodes: one per stop, sitting on the lotus thread in the left margin */
.stop{position:relative}
.thread-node{
  position:absolute;z-index:2;left:0;top:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  border:1px solid var(--accent);background:var(--bg);pointer-events:none;
  transition:background .5s,box-shadow .5s;
}
.thread-node::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgb(var(--glow) / .6);
  opacity:0;transform:scale(.4);transition:opacity .6s,transform .8s var(--ease-calm);
}
.thread-node.is-lit{background:var(--accent);box-shadow:0 0 18px rgb(var(--glow) / .8)}
.thread-node.is-lit::after{opacity:1;transform:scale(1)}
@media (max-width: 899px){ .thread-node{width:9px;height:9px;margin:-4.5px 0 0 -4.5px} }

/* ============================================================
   Phase 4 · interactive features
   ============================================================ */

/* Chooser */
.chooser-step legend .step-n{transition:background .3s,color .3s,border-color .3s}
.chooser-step.is-answered legend .step-n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chooser-result{display:grid;gap:1rem;box-shadow:0 0 0 1px var(--line-strong),0 20px 60px -20px rgb(64 212 230 / .25)}
.chooser-result[hidden]{display:none}
.chooser-result .eyebrow{margin-bottom:0}
.chooser-name{font-size:clamp(1.5rem,2.6vw,2rem)}
.chooser-tip{font-size:.9rem;color:var(--accent-light)}
.chooser-alt{font-size:.92rem;padding-top:1rem;border-top:1px solid var(--line)}
.chooser-alt-meta{color:var(--muted);white-space:nowrap}
.chooser-note{font-size:.8rem;color:var(--muted)}

/* Booking form */
.form-field [aria-invalid="true"]{border-color:#e07a7a;box-shadow:0 0 0 4px rgba(224,122,122,.15)}
.form-field select.is-preselected{animation:preselect 1.6s var(--ease-calm)}
@keyframes preselect{0%,40%{border-color:var(--accent);box-shadow:0 0 0 6px rgb(64 212 230 / .25)}100%{box-shadow:0 0 0 0 rgb(64 212 230 / 0)}}
.form-card[aria-busy="true"] button[type="submit"]{opacity:.6;cursor:progress}
.form-status:not(.ok):not(.err):not(:empty){display:block;padding:.6rem 0;color:var(--muted)}
@media (prefers-reduced-motion: reduce){ .form-field select.is-preselected{animation:none;border-color:var(--accent)} }

/* Price deal: the strike is drawn as a line so it can animate (--strike set by JS) */
.price-row-deal.is-animated s{text-decoration:none;position:relative;display:inline-block}
.price-row-deal.is-animated s::after{
  content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:var(--accent-light);
  transform:scaleX(var(--strike,1));transform-origin:left center;
}

/* Ritual: the connecting line draws, dots light up */
.steps::before{transform-origin:left center;transform:scaleX(var(--steps-p,1))}
.step-dot{transition:background .5s,color .5s,box-shadow .5s}
.step.is-lit .step-dot{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 28px rgb(64 212 230 / .45)}
@media (max-width: 899px){ .steps::before{transform-origin:center top;transform:scaleY(var(--steps-p,1))} }

/* ---------- Phase 5 · awkward viewports ---------- */
/* Short portrait phones (e.g. 360×640): give the copy more room below the photo */
@media (max-width: 1024px) and (orientation: portrait) and (max-height: 700px){
  .hero-media{height:52svh}
  .hero-lotus{width:48px;margin-bottom:.6rem}
}
/* Landscape phones (e.g. 844×390): keep scenes within the short viewport */
@media (max-width: 899px) and (orientation: landscape){
  .breath{width:min(76vw,460px,74svh)}
  .stop-media,.stop-media-tall,.ruimte-media{max-height:78svh}
  .ch-hero{padding-top:calc(var(--header-h) + .5rem);padding-bottom:3.5rem}
}
/* Portrait phones/tablets: the copy may overlap the orchid's lower petals — keep it legible */
@media (max-width: 1024px) and (orientation: portrait){
  .ch-hero .eyebrow,.ch-hero h1,.ch-hero .lead{text-shadow:0 0 14px rgba(6,19,23,.95),0 0 4px rgba(6,19,23,.8)}
}