/* ESSENCE by the sea. Tokens follow the ESSENCE design system. */
@font-face{font-family:"TAN Pearl";src:url("fonts/TAN-Pearl-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Garet";src:url("fonts/Garet-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Garet";src:url("fonts/Garet-Heavy.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@property --hv{syntax:"<number>";inherits:false;initial-value:1}

:root{
  --cream-50:#FFF8F3;--cream:#FEF1E8;--cream-200:#F6E4D7;--cream-300:#EAD3C3;
  --red-400:#A8393A;--red:#8F2426;--red-600:#761B1E;--red-700:#5C1416;
  --forest-400:#4A5740;--forest:#303B27;--forest-600:#252E1E;--forest-700:#1A2015;

  --surface-page:var(--cream);--surface-raised:var(--cream-50);--surface-sunken:var(--cream-200);
  --text-headline:var(--red);--text-body:var(--forest);--text-muted:rgba(48,59,39,.76);--text-on-dark:var(--cream);
  --border-subtle:rgba(48,59,39,.18);--border-strong:var(--forest);
  --scrim:rgba(26,32,21,.55);

  --display:"TAN Pearl","Cormorant Garamond",Georgia,serif;
  --r-photo:12px;--r-box:12px;--r-control:6px;   /* soft corners: calmer than hard edges, still crisp */
  --lh-display:1.3;   /* TAN Pearl capitals fill the whole em and the J dips .21em below it: any tighter and a J touches the line below */
  --body:"Garet","Jost","Helvetica Neue",Arial,sans-serif;

  --breath:cubic-bezier(.22,.61,.36,1);
  --settle:cubic-bezier(.33,0,.15,1);
  --t-quick:160ms;--t-base:280ms;--t-slow:520ms;--t-reveal:1300ms;

  --gutter:clamp(16px,5vw,64px);
  --max:1200px;
  --bar-h:72px;
  --tshadow:0 1px 2px rgba(34,22,17,.55),0 3px 14px rgba(34,22,17,.45),0 10px 40px rgba(34,22,17,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip;margin:0;background:var(--surface-page);color:var(--text-body);font:400 16px/1.6 var(--body);letter-spacing:.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
main section,.foot{scroll-margin-top:var(--bar-h)}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0}
::selection{background:var(--red);color:var(--cream)}
:focus-visible{outline:1px solid var(--red);outline-offset:4px}
html.is-locked{overflow:hidden}

/* Language switch: Dutch first, English on request */
html[data-lang="nl"] [data-l="en"],html[data-lang="en"] [data-l="nl"]{display:none}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--forest);color:var(--cream);padding:12px 18px;text-decoration:none;transition:top var(--t-base) var(--breath)}
.skip:focus{top:16px}

/* Environment: window light drifting over plaster, behind everything */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--surface-page)}
.env__light{position:absolute;inset:-30%;opacity:.55;
  background:repeating-linear-gradient(116deg,transparent 0 14%,rgba(255,250,244,.9) 14% 20%,transparent 20% 23%,rgba(255,250,244,.7) 23% 27%,transparent 27% 46%);
  filter:blur(28px);animation:drift 90s var(--breath) infinite alternate;animation-delay:-30s}
.env__grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .19 0 0 0 0 .23 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{from{transform:translate3d(-6%,-3%,0) rotate(0deg)}to{transform:translate3d(6%,3%,0) rotate(2deg)}}

/* Type */
.display{font:400 clamp(40px,7vw,96px)/var(--lh-display) var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--text-headline)}
.display--cream{color:var(--cream)}
.title{font:400 clamp(28px,4.2vw,56px)/var(--lh-display) var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--text-headline)}
.title--cream{color:var(--cream)}
.eyebrow{font:400 12px/1.4 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.eyebrow--cream{color:rgba(254,241,232,.82)}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;max-width:56ch;color:var(--text-body)}
.body{color:var(--text-muted);max-width:52ch}
.dash{display:block;width:48px;height:1.5px;background:currentColor;opacity:.7;margin:24px auto;transform-origin:center;animation:dash 6s var(--breath) infinite alternate;animation-delay:-2s}
.dash--left{margin-left:0}
@keyframes dash{from{transform:scaleX(.55)}to{transform:scaleX(1)}}
.textlink{position:relative;display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--forest)}
.textlink::after{content:"";position:absolute;left:0;right:1.4em;bottom:10px;height:1px;background:currentColor;transform-origin:left;transition:transform var(--t-base) var(--breath)}
@media (hover:hover) and (pointer:fine){.textlink:hover::after{transform:scaleX(.4)}}

/* Buttons: softly rounded, tracked, darken on hover and press (no shrink) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:44px;padding:14px 26px;border:1px solid transparent;border-radius:var(--r-control);font:400 13px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background-color var(--t-quick) var(--breath),color var(--t-quick) var(--breath),border-color var(--t-quick) var(--breath)}
.btn--solid{background:var(--red);color:var(--cream)}
.btn--solid:active{background:var(--red-700)}
.btn--ghost{border-color:rgba(254,241,232,.85);color:var(--cream)}
.btn--ghost:active{background:var(--cream-200);color:var(--forest)}
.btn--line{border-color:var(--forest);color:var(--forest)}
.btn--line:active{background:var(--forest-600);color:var(--cream)}
@media (hover:hover) and (pointer:fine){
  .btn--solid:hover{background:var(--red-600)}
  .btn--ghost:hover{background:var(--cream);color:var(--forest)}
  .btn--line:hover{background:var(--forest);color:var(--cream)}
}

/* The bar: Op de lijst · wordmark · Menu */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--bar-h);padding:0 var(--gutter);color:var(--cream);
  transition:transform 640ms var(--settle),background-color var(--t-slow) var(--breath),color var(--t-slow) var(--breath),box-shadow var(--t-slow) var(--breath)}
.bar[data-tone="light"]{color:var(--forest)}
.bar__link{position:relative;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;font:400 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:inherit;cursor:pointer}
.bar__link::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--breath)}
@media (hover:hover) and (pointer:fine){.bar__link:hover::after{transform:scaleX(1)}}
.bar__menu{justify-self:end}
.bar__menu::after{transform-origin:right}
.bar__brand{justify-self:center;display:block;width:150px;color:inherit;transform-origin:center;transition:transform var(--t-slow) var(--settle),color var(--t-slow) var(--breath)}
.bar[data-tone="light"] .bar__brand{color:var(--red)}
.bar.is-scrolled{background:rgba(254,241,232,.96);color:var(--forest);box-shadow:0 1px 0 var(--border-subtle)}
.bar.is-scrolled .bar__brand{transform:scale(.72);color:var(--red)}
.bar.is-hidden{transform:translateY(-100%)}
@media (max-width:720px){.bar__brand{width:118px}.bar__link{font-size:11px;letter-spacing:.16em}}

/* The menu: a cream panel that unfolds from the top, on the right */
.menu{position:fixed;inset:0;z-index:80}
.menu__veil{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--t-slow) var(--breath)}
.menu__panel{position:absolute;top:8px;right:8px;bottom:8px;width:min(480px,calc(100vw - 16px));display:flex;flex-direction:column;gap:clamp(28px,5vh,48px);overflow:auto;overscroll-behavior:contain;
  padding:20px clamp(24px,3vw,40px) 32px;border-radius:var(--r-box);background:var(--cream-50);color:var(--forest);
  clip-path:inset(0 0 100% 0);transition:clip-path 720ms var(--settle)}
.menu.is-open .menu__veil{opacity:1}
.menu.is-open .menu__panel{clip-path:inset(0 0 0 0)}
.menu__top{display:flex;justify-content:space-between;align-items:center}
.menu__label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.menu__close{min-height:44px;padding:0;background:none;border:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);cursor:pointer}
.menu__main{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.menu__main a{font:400 clamp(34px,4vw,46px)/var(--lh-display) var(--display);letter-spacing:.01em;text-transform:uppercase;text-decoration:none;color:var(--forest)}
.menu__main a[aria-current="page"]{color:var(--red)}
.menu__sub{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.menu__sub a{display:inline-flex;align-items:center;min-height:36px;font-size:16px;text-decoration:none;color:var(--forest)}
.menu__sub a[aria-current="page"]{color:var(--red)}
.menu__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:16px}
.menu__small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.menu__curl{position:absolute;right:-28px;bottom:72px;width:min(46%,200px);height:auto;pointer-events:none;fill:none;stroke:var(--red);stroke-width:1.2;stroke-linecap:round;overflow:visible;opacity:.85}
.menu__curl path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--settle) .35s}
.menu.is-open .menu__curl path{stroke-dashoffset:0}
.menu__main a,.menu__sub a,.menu__foot{opacity:0;transform:translateY(12px);
  transition:opacity 520ms var(--breath),transform 640ms var(--settle),color var(--t-base) var(--breath)}
.menu.is-open .menu__main a,.menu.is-open .menu__sub a,.menu.is-open .menu__foot{opacity:1;transform:none}
.menu.is-open .menu__main a:nth-child(1){transition-delay:180ms}
.menu.is-open .menu__main a:nth-child(2){transition-delay:240ms}
.menu.is-open .menu__main a:nth-child(3){transition-delay:300ms}
.menu.is-open .menu__main a:nth-child(4){transition-delay:360ms}
.menu.is-open .menu__main a:nth-child(5){transition-delay:420ms}
.menu.is-open .menu__sub a{transition-delay:480ms}
.menu.is-open .menu__foot{transition-delay:540ms}
.menu.is-settled .menu__main a,.menu.is-settled .menu__sub a,.menu.is-settled .menu__foot{transition-delay:0ms!important}
@media (hover:hover) and (pointer:fine){
  .menu__main a:hover,.menu__sub a:hover{color:rgba(48,59,39,.42)}
}
.lang{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.16em}
.lang__btn{min-height:44px;background:none;border:0;padding:0 4px;cursor:pointer;opacity:.55;transition:opacity var(--t-quick) var(--breath)}
.lang__btn[aria-pressed="true"]{opacity:1}
@media (hover:hover) and (pointer:fine){.lang__btn:hover{opacity:1}}
.lang__sep{opacity:.5}

/* The list panel: slides in from the right, like a booking panel */
.lpanel{position:fixed;inset:0;z-index:85}
.lpanel__veil{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--t-slow) var(--breath)}
.lpanel__card{position:absolute;top:8px;right:8px;bottom:8px;width:min(560px,calc(100vw - 16px));overflow:auto;overscroll-behavior:contain;
  padding:20px clamp(24px,3.4vw,48px) 40px;border-radius:var(--r-box);background:var(--cream-50);color:var(--forest);
  transform:translateX(calc(100% + 16px));transition:transform 720ms var(--settle)}
.lpanel.is-open .lpanel__veil{opacity:1}
.lpanel.is-open .lpanel__card{transform:none}
.lpanel__top{display:flex;justify-content:flex-end}
.lpanel__body{display:grid;gap:18px;padding-top:clamp(16px,6vh,64px)}
.lpanel__body .title{font-size:clamp(34px,4vw,48px)}

/* Hero: film on the home page, still photo on the other pages */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--forest-700);color:var(--cream)}
.hero--page{height:82vh;height:82svh;min-height:520px}
.hero__media{position:absolute;inset:0;transform:scale(1.06);transform-origin:50% 40%}
.hero__poster,.hero__video,.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__poster{background:var(--forest-600) center/cover no-repeat}
.hero__video{opacity:0;transition:opacity 1.2s var(--breath)}
.hero.is-playing .hero__video{opacity:1}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(34,22,17,.56) 0%,rgba(34,22,17,.32) 8%,rgba(34,22,17,0) 18%),
             radial-gradient(ellipse 50% 42% at 25% 75%,rgba(34,22,17,.5) 0%,rgba(34,22,17,.3) 55%,rgba(34,22,17,0) 100%),
             linear-gradient(90deg,rgba(34,22,17,.46) 0%,rgba(34,22,17,.32) 30%,rgba(34,22,17,.1) 52%,rgba(34,22,17,0) 64%),
             linear-gradient(0deg,rgba(34,22,17,.6) 0%,rgba(34,22,17,.2) 38%,rgba(34,22,17,0) 56%)}
@media (max-width:720px){
  .hero__wm{width:78vw}
  .hero__scrim{background:linear-gradient(180deg,rgba(34,22,17,.7) 0%,rgba(34,22,17,.45) 9%,rgba(34,22,17,0) 20%),
                          linear-gradient(0deg,rgba(34,22,17,.8) 0%,rgba(34,22,17,.66) 30%,rgba(34,22,17,.42) 48%,rgba(34,22,17,0) 66%)}
}
.hero--page .hero__scrim{background:linear-gradient(180deg,rgba(34,22,17,.78) 0%,rgba(34,22,17,.55) 8%,rgba(34,22,17,0) 18%),
                                    linear-gradient(90deg,rgba(34,22,17,.5) 0%,rgba(34,22,17,.36) 30%,rgba(34,22,17,.14) 50%,rgba(34,22,17,0) 66%),
                                    linear-gradient(0deg,rgba(34,22,17,.66) 0%,rgba(34,22,17,.36) 24%,rgba(34,22,17,.08) 46%,rgba(34,22,17,0) 58%)}
.hero--page .hero__content{isolation:isolate}
.hero--page .hero__content::before{content:"";position:absolute;inset:-34% -26% -36% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 56% at 42% 54%,rgba(34,22,17,.74) 0%,rgba(34,22,17,.62) 46%,rgba(34,22,17,.26) 74%,rgba(34,22,17,0) 100%)}
.hero__content{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,9vh,96px);max-width:820px;text-shadow:var(--tshadow)}
.hero--page .hero__content{max-width:920px}
.hero--page .display{font-size:clamp(40px,6vw,84px);line-height:var(--lh-display);max-width:12ch}
.hero--page .eyebrow{margin-bottom:18px}
.hero__lead{margin-top:20px;max-width:46ch;font-size:clamp(16px,1.5vw,19px);color:rgba(254,241,232,.92)}
.badge{display:inline-block;margin-bottom:22px;padding:7px 14px;border:1px solid rgba(254,241,232,.7);border-radius:999px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;background:rgba(34,22,17,.5);text-shadow:none}
.hero__title{margin:0}
.hero__wm{width:min(50vw,680px);color:var(--cream);filter:drop-shadow(0 2px 18px rgba(34,22,17,.45))}
.hero__sub{margin-top:22px;font-size:clamp(13px,1.3vw,16px);letter-spacing:.22em;text-transform:uppercase}
.hero__sub--en{margin-top:6px;font-size:11px;opacity:.78}
.hero__btn{margin-top:30px;text-shadow:none}
.hero__play{position:absolute;right:var(--gutter);bottom:clamp(40px,9vh,96px);min-height:44px;padding:12px 18px;border-radius:var(--r-control);border:1px solid rgba(254,241,232,.85);background:rgba(254,241,232,.12);color:var(--cream);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
@media (max-width:720px){
  .hero--page .hero__scrim{background:linear-gradient(180deg,rgba(34,22,17,.8) 0%,rgba(34,22,17,.55) 10%,rgba(34,22,17,0) 22%),
                                     linear-gradient(0deg,rgba(34,22,17,.8) 0%,rgba(34,22,17,.62) 34%,rgba(34,22,17,0) 70%)}
}

/* Split hero on light pages (shop): text left, photo right */
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;min-height:92vh;padding:calc(var(--bar-h) + 48px) var(--gutter) 72px;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
.hero-split .display{font-size:clamp(44px,7vw,96px);max-width:11ch}
.hero-split .lead{margin-top:24px}
.hero-split .eyebrow{margin-bottom:18px}
/* TAN Pearl capitals rise above a tight line box: give a heading under a small label the same room, scaled to its size */
.eyebrow + :is(.display,.title){padding-top:.03em}
.eyebrow + .pcard__name{padding-top:.14em}
.hero-split__img{aspect-ratio:4/5;overflow:hidden;background:var(--surface-sunken)}
@media (max-width:860px){.hero-split{grid-template-columns:1fr;min-height:0;padding-top:calc(var(--bar-h) + 32px)}}

/* Reveal: fires once, slow and calm */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--t-reveal) var(--breath),transform var(--t-reveal) var(--settle)}
.reveal.in{opacity:1;transform:none}

/* Depth: every photo sits enlarged in its frame and drifts slower than the page (scroll-driven) */
.pimg{position:relative;overflow:hidden;border-radius:var(--r-photo);isolation:isolate;background:var(--surface-sunken)}
.pimg img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(calc(1.14 * var(--hv)));transition:--hv 1.2s var(--breath);will-change:transform}
.glints{position:absolute;inset:0;pointer-events:none;transform:translate3d(0,var(--py,0px),0) scale(1.14)}
@media (hover:hover) and (pointer:fine){.card:hover .pimg img,.pimg:hover img{--hv:1.03}}

/* Signature: the curl from the C, drawn by scroll */
.curl{position:absolute;pointer-events:none;fill:none;stroke:var(--red);stroke-width:1.2;stroke-linecap:round;overflow:visible}
.curl path{stroke-dasharray:1;stroke-dashoffset:var(--draw,1)}

/* Statement that shrinks into place as you scroll (the signature heading) */
.zoomhead{display:block;transform-origin:50% 60%;will-change:transform}

/* Premise */
.premise{position:relative;overflow:hidden;overflow:clip;padding:clamp(96px,16vh,180px) var(--gutter);text-align:center}
.premise__inner{max-width:880px;margin:0 auto}
.premise .display{max-width:12ch;margin:0 auto}
.premise .lead{margin:0 auto}
.premise .dash{color:var(--forest)}
.curl--premise{right:max(2vw,calc(50% - 640px));top:6%;width:min(24vw,300px);height:auto;opacity:.9}
@media (max-width:720px){.curl--premise{width:30vw;right:-4vw;top:6px;opacity:.7}}

/* Word strip (in place of a press strip) */
.marquee{overflow:hidden;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:22px 0;color:var(--forest)}
.marquee__track{display:flex;width:max-content;animation:marquee 70s linear infinite}
.marquee__set{display:flex;align-items:center;gap:36px;padding-right:36px;font:400 clamp(26px,3vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.marquee__set i{font-style:normal;color:var(--red)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Classes (home) */
.classes{padding:clamp(72px,10vh,120px) var(--gutter) clamp(96px,14vh,160px);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
.classes__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:48px}
.classes__head .eyebrow{flex-basis:100%}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;gap:14px}
.card:nth-child(2){transition-delay:90ms}
.card:nth-child(3){transition-delay:180ms}
.card:nth-child(4){transition-delay:270ms}
.card__img{aspect-ratio:4/5}
.card__title{font:400 28px/var(--lh-display) var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--red)}
.card p{color:var(--text-muted);max-width:40ch}
.cards--2{grid-template-columns:repeat(2,1fr);margin-bottom:clamp(48px,7vh,72px)}
.cards--2 .card__img{aspect-ratio:4/3}
.cards--3{grid-template-columns:repeat(3,1fr)}
.tag{display:inline-block;vertical-align:middle;margin-left:10px;padding:6px 10px;border:1px solid var(--red);border-radius:999px;font:400 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--red);transform:translateY(-5px)}
@media (max-width:1100px){.cards--4{grid-template-columns:repeat(2,1fr);row-gap:48px}}
@media (max-width:860px){.cards,.cards--2,.cards--3{grid-template-columns:1fr;gap:48px}.card__img,.cards--2 .card__img{aspect-ratio:5/4}}

/* Breath */
.breath{position:relative;display:grid;justify-items:center;gap:40px;padding:clamp(96px,14vh,160px) var(--gutter);background:var(--forest);color:var(--cream);text-align:center}
.breath__intro{display:grid;gap:14px;justify-items:center}
.breath__hint{font-size:13px;letter-spacing:.22em;text-transform:uppercase;opacity:.82}
.breath__step{display:block;text-wrap:balance}
.orb{--p:0;position:relative;width:min(56vw,240px);aspect-ratio:1;border:0;border-radius:50%;padding:0;background:transparent;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.orb__ring{position:absolute;inset:0;transform:rotate(-90deg)}
.orb__track{fill:none;stroke:rgba(254,241,232,.32);stroke-width:1}
.orb__prog{fill:none;stroke:var(--cream);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.orb__fill{position:absolute;inset:8%;border-radius:50%;background:var(--red);transform:scale(calc(.18 + .82*var(--p)));opacity:calc(.35 + .65*var(--p))}
.orb::before{content:"";position:absolute;inset:8%;border-radius:50%;background:var(--cream);opacity:.08;animation:idle 5s var(--breath) infinite alternate;animation-delay:-1.5s}
@keyframes idle{from{transform:scale(.92)}to{transform:scale(1)}}
.orb__label{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.breath__done{display:grid;gap:40px;justify-items:center;max-width:var(--max);width:100%}
.breath__line{max-width:36ch;font-size:clamp(17px,1.6vw,20px);opacity:0;transform:translateY(10px);transition:opacity var(--t-slow) var(--breath),transform var(--t-slow) var(--settle)}
.pillars{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;width:100%}
.pillar{display:grid;gap:10px;justify-items:center;padding-top:24px;border-top:1px solid rgba(254,241,232,.28);opacity:.22;transform:translateY(10px);transition:opacity var(--t-slow) var(--breath),transform var(--t-slow) var(--settle)}
.pillar h3{font:400 clamp(24px,2.6vw,36px)/var(--lh-display) var(--display);letter-spacing:.01em;text-transform:uppercase}
.pillar p{max-width:28ch;opacity:.85}
.breath.is-complete .breath__line{opacity:1;transform:none}
.breath.is-complete .pillar{opacity:1;transform:none}
.breath.is-complete .pillar:nth-child(1){transition-delay:240ms}
.breath.is-complete .pillar:nth-child(2){transition-delay:400ms}
.breath.is-complete .pillar:nth-child(3){transition-delay:560ms}
/* The orb says what to do: breathe in, let go, breathe out */
.orb__say{grid-area:1/1;opacity:0;transition:opacity var(--t-base) var(--breath)}
.orb[data-phase="in"] .orb__say--in,.orb[data-phase="hold"] .orb__say--hold,.orb[data-phase="out"] .orb__say--out{opacity:1}
@media (max-width:720px){.pillars{grid-template-columns:1fr;gap:24px}}

/* First class */
.first{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(96px,14vh,160px) var(--gutter);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
.first__img{aspect-ratio:3/4}
.first__body{display:grid;gap:32px}
.steps{list-style:none;padding:0;display:grid;gap:0}
.step{display:grid;grid-template-columns:56px 1fr;column-gap:16px;row-gap:8px;padding:28px 0;border-top:1px solid var(--border-subtle)}
.step:last-child{border-bottom:1px solid var(--border-subtle)}
.step:nth-child(2){transition-delay:90ms}
.step:nth-child(3){transition-delay:180ms}
.step__no{grid-row:span 2;font:400 28px/1 var(--display);color:var(--red)}
.step__title{font:400 clamp(22px,2.2vw,28px)/var(--lh-display) var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--forest)}
.step p{color:var(--text-muted);max-width:52ch}
@media (max-width:860px){.first{grid-template-columns:1fr}.first__img{aspect-ratio:4/3}}

/* The bar: matcha and cocktails */
.barsec{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(96px,14vh,160px) var(--gutter);background:var(--surface-sunken)}
.barsec__body{display:grid;gap:22px;max-width:560px;justify-self:end}
.barsec__body .title{max-width:14ch}
.barsec__menu{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:8px 0 0}
.barsec__menu div{display:grid;gap:6px;padding-top:18px;border-top:1px solid var(--border-subtle)}
.barsec__menu dt{font:400 clamp(22px,2.2vw,28px)/var(--lh-display) var(--display);text-transform:uppercase;color:var(--red)}
.barsec__menu dd{margin:0;color:var(--text-muted)}
.barsec__note{font-size:14px;color:var(--text-muted)}
.barsec__img{aspect-ratio:4/5;max-width:520px;width:100%}
@media (max-width:860px){.barsec{grid-template-columns:1fr}.barsec__body{justify-self:stretch}.barsec__img{max-width:none;aspect-ratio:5/4}}
@media (max-width:480px){.barsec__menu{grid-template-columns:1fr}}

/* Disco */
.disco{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,96px);padding:clamp(72px,12vh,140px) var(--gutter);background:var(--red);color:var(--cream)}
.disco__img{position:relative;max-width:520px;justify-self:end;width:100%;aspect-ratio:982/1400}
.glint{position:absolute;width:22px;fill:#fff;opacity:0;animation:glint 6s var(--breath) infinite}
.glint--a{left:24%;top:31%;animation-delay:-1s}
.glint--b{left:47%;top:44%;width:14px;animation-delay:-4s}
@keyframes glint{0%,70%,100%{opacity:0;transform:scale(.4) rotate(0)}80%{opacity:.95;transform:scale(1) rotate(20deg)}}
.disco__line{font-size:clamp(30px,4vw,60px);line-height:var(--lh-display);max-width:14ch}
@media (max-width:860px){.disco{grid-template-columns:1fr}.disco__img{justify-self:center;max-width:420px}}

/* FAQ accordion */
.faq{max-width:880px;margin:0 auto;padding:clamp(96px,14vh,160px) var(--gutter)}
.faq>.title{margin-bottom:40px;text-align:center}
.qa{border-top:1px solid var(--border-subtle)}
.qa:last-child{border-bottom:1px solid var(--border-subtle)}
.qa h3{margin:0;font:inherit}
.qa__q{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:24px;padding:24px 0;background:none;border:0;text-align:left;cursor:pointer;font:400 clamp(17px,1.6vw,19px)/1.4 var(--body);color:var(--forest)}
.qa__icon{position:relative;flex:none;width:14px;height:14px;align-self:center}
.qa__icon::before,.qa__icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--red);transition:transform var(--t-base) var(--breath)}
.qa__icon::after{transform:rotate(90deg)}
.qa__q[aria-expanded="true"] .qa__icon::after{transform:rotate(0deg)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--breath)}
.qa__a>div{overflow:hidden}
.qa__a p{padding:0 40px 26px 0;color:var(--text-muted);opacity:0;transition:opacity var(--t-slow) var(--breath)}
.qa.open .qa__a{grid-template-rows:1fr}
.qa.open .qa__a p{opacity:1}
.faqpage{display:grid;gap:clamp(56px,9vh,96px);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(80px,12vh,140px) var(--gutter)}
.faqgroup{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:clamp(24px,5vw,80px);align-items:start}
.faqgroup__title{position:sticky;top:calc(var(--bar-h) + 24px);font:400 clamp(26px,3vw,40px)/var(--lh-display) var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--red)}
@media (max-width:860px){.faqgroup{grid-template-columns:1fr}.faqgroup__title{position:static}}

/* Forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}
.form--stack{grid-template-columns:1fr}
.field{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field legend{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);padding:0}
.field input[type=text],.field input[type=email],.field textarea{min-height:48px;padding:12px 14px;border:1px solid rgba(48,59,39,.5);border-radius:var(--r-control);background:var(--surface-raised);font:400 16px/1.4 var(--body);color:var(--forest);transition:border-color var(--t-quick) var(--breath)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 1px var(--forest)}
.field input[aria-invalid="true"]{border-color:var(--red)}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chips legend{margin-bottom:10px;width:100%}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip>span{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:var(--r-control);border:1px solid var(--forest);font-size:13px;letter-spacing:.16em;text-transform:uppercase;transition:background-color var(--t-quick) var(--breath),color var(--t-quick) var(--breath)}
.chip input:checked+span{background:var(--forest);color:var(--cream)}
.chip input:focus-visible+span{outline:1px solid var(--red);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.chip:hover>span{background:rgba(48,59,39,.08)}.chip input:checked:hover+span{background:var(--forest-600)}}
.check{grid-column:1/-1;display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:15px}
.check input{width:20px;height:20px;margin:0;accent-color:var(--forest)}
.form__err{grid-column:1/-1;color:var(--red);font-size:14px}
.form__note{grid-column:1/-1;margin:0;font-size:12px;line-height:1.5;color:var(--text-muted)}
.form__note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form__btn{grid-column:1/-1;justify-self:start;margin-top:8px}
.form__btn[disabled]{opacity:.6;cursor:progress;animation:busy 1.8s var(--breath) infinite}   /* sending: the sheet takes a few seconds */
@keyframes busy{50%{opacity:.32}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__ok{font:400 clamp(24px,3vw,36px)/var(--lh-display) var(--display);text-transform:uppercase;color:var(--red);opacity:0;transform:translateY(10px);transition:opacity var(--t-slow) var(--breath),transform var(--t-slow) var(--settle)}
.form__ok.shown{opacity:1;transform:none}
@media (max-width:600px){.form{grid-template-columns:1fr}}

/* Closing card: photo + cream card, leads to the list panel */
.cta{padding:clamp(72px,10vh,120px) var(--gutter) 0;background:var(--forest)}
.cta__inner{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-box);overflow:hidden;isolation:isolate;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
.cta__img{aspect-ratio:4/3}
.cta__inner .pimg{border-radius:0}
.cta__card{display:grid;align-content:center;gap:18px;padding:clamp(32px,5vw,72px);background:var(--cream-50)}
.cta__card p{color:var(--text-muted);max-width:42ch}
.cta__card .btn{justify-self:start;margin-top:8px}
@media (max-width:860px){.cta__inner{grid-template-columns:1fr}}

/* Footer: dark, a statement on the left, links on the right */
.foot{background:var(--forest);color:var(--cream);padding:clamp(72px,10vh,120px) var(--gutter) 40px}
.foot__top{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding-bottom:clamp(56px,8vh,96px);border-bottom:1px solid rgba(254,241,232,.18)}
.foot__statement{font:400 clamp(36px,5vw,72px)/var(--lh-display) var(--display);text-transform:uppercase;letter-spacing:.01em;max-width:14ch;text-wrap:balance}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot__h{margin-bottom:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(254,241,232,.62)}
.foot__cols a{display:block;width:max-content;padding:6px 0;font-size:15px;text-decoration:none;color:var(--cream);background:none;border:0;cursor:pointer}
.foot__cols a span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t-base) var(--breath)}
@media (hover:hover) and (pointer:fine){.foot__cols a:hover span{background-size:100% 1px}}
.foot__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding-top:32px;font-size:12px;letter-spacing:.12em;color:rgba(254,241,232,.72)}
.foot__wm{width:140px;color:var(--cream)}
@media (max-width:860px){.foot__top{grid-template-columns:1fr}.foot__cols{grid-template-columns:repeat(2,1fr)}}

/* Over ons */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(96px,14vh,160px) var(--gutter)}
.split__body{display:grid;gap:22px}
.split__img{aspect-ratio:3/2}
.split--rev .split__img{order:-1}
@media (max-width:860px){.split{grid-template-columns:1fr}.split--rev .split__img{order:0}}
.statement{padding:clamp(96px,14vh,160px) var(--gutter);background:var(--red);color:var(--cream)}
.statement__head{text-align:center;display:grid;justify-items:center;gap:16px;margin-bottom:clamp(48px,8vh,88px)}
.statement{overflow:hidden;overflow:clip}
.statement .pillars{max-width:var(--max);margin:0 auto}
.statement .pillar{opacity:0;transform:translateY(16px);border-top-color:rgba(254,241,232,.34)}
.statement .pillar.in{opacity:1;transform:none}
.statement .pillar:nth-child(2){transition-delay:120ms}
.statement .pillar:nth-child(3){transition-delay:240ms}
.wide{position:relative;height:88vh;min-height:520px;overflow:hidden;color:var(--cream)}
.wide .pimg{position:absolute;inset:0;border-radius:0}
.wide__card{position:absolute;left:var(--gutter);bottom:clamp(32px,7vh,72px);max-width:520px;display:grid;gap:14px;padding:clamp(24px,3vw,40px);border-radius:var(--r-box);background:var(--cream-50);color:var(--forest)}
.wide__card .title{font-size:clamp(28px,3.4vw,44px)}
.team{padding:clamp(96px,14vh,160px) var(--gutter);text-align:center;display:grid;justify-items:center;gap:18px}
.team .title{max-width:16ch}
.team .lead{max-width:44ch}

/* Thoughts slider */
.thoughts{display:grid;justify-items:center;gap:36px;padding:clamp(96px,14vh,160px) var(--gutter);background:var(--forest);color:var(--cream);text-align:center}
.thoughts__stage{display:grid;justify-items:center;width:min(100%,980px)}
.thought{grid-area:1/1;max-width:20ch;font:400 clamp(30px,4.4vw,60px)/var(--lh-display) var(--display);text-transform:uppercase;letter-spacing:.01em;opacity:0;transform:translateY(14px);transition:opacity 700ms var(--breath),transform 800ms var(--settle);pointer-events:none}
.thought.is-active{opacity:1;transform:none;pointer-events:auto}
.thoughts__nav{display:flex;gap:12px}
.arrow{display:grid;place-items:center;width:56px;height:44px;border-radius:var(--r-control);border:1px solid rgba(254,241,232,.7);background:none;color:var(--cream);cursor:pointer;font-size:18px;transition:background-color var(--t-quick) var(--breath),color var(--t-quick) var(--breath)}
@media (hover:hover) and (pointer:fine){.arrow:hover{background:var(--cream);color:var(--forest)}}
.arrow:active{background:var(--cream-200);color:var(--forest)}

/* Lessen */
.intro{max-width:880px;margin:0 auto;padding:clamp(96px,14vh,160px) var(--gutter) 0;text-align:center}
.intro .lead{margin:0 auto}
.classlist{padding:clamp(56px,8vh,96px) var(--gutter) clamp(96px,14vh,160px);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
.private{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(96px,14vh,160px) var(--gutter);background:var(--surface-sunken)}
.private__img{aspect-ratio:4/5;max-width:560px;width:100%;justify-self:end}
.private__body{display:grid;gap:28px;max-width:560px}
.private__item{display:grid;gap:8px;padding-top:22px;border-top:1px solid var(--border-subtle)}
.private__item h3{font:400 clamp(24px,2.4vw,32px)/var(--lh-display) var(--display);text-transform:uppercase;color:var(--red)}
.private__note{font-size:14px;color:var(--text-muted)}
@media (max-width:860px){.private{grid-template-columns:1fr}.private__img{justify-self:stretch;max-width:none;aspect-ratio:5/4}}

/* Shop */
.product{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(72px,12vh,140px) var(--gutter);background:var(--surface-sunken)}
.product__img{aspect-ratio:3/4;max-width:620px;width:100%;justify-self:end}
.product__body{display:grid;gap:22px;max-width:520px}
.product__tag{justify-self:start;padding:6px 12px;border:1px solid var(--forest);border-radius:999px;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
@media (max-width:860px){.product{grid-template-columns:1fr}.product__img{justify-self:stretch;max-width:none}}

/* Contact */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,112px);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(96px,14vh,160px) var(--gutter)}
.contact__info{display:grid;gap:32px;align-content:start}
.contact__item{display:grid;gap:6px;padding-top:20px;border-top:1px solid var(--border-subtle)}
.contact__item a{text-decoration:none;border-bottom:1px solid var(--border-subtle);justify-self:start}
.contact__form{display:grid;gap:24px;align-content:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

/* Lessen: one hour, then a block per class */
.hour{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(96px,14vh,160px) var(--gutter) clamp(56px,8vh,96px)}
.hour__head{display:grid;gap:14px;max-width:640px}
.hour__bar{display:grid;grid-template-columns:8fr 14fr 62fr 16fr;gap:6px;margin:clamp(40px,6vh,64px) 0 12px}
.hour__seg{height:6px;background:var(--forest);transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--settle)}
.hour__seg--work{background:var(--red)}
.hour__bar.in .hour__seg{transform:scaleX(1)}
.hour__bar.in .hour__seg:nth-child(2){transition-delay:250ms}
.hour__bar.in .hour__seg:nth-child(3){transition-delay:500ms;transition-duration:1400ms}
.hour__bar.in .hour__seg:nth-child(4){transition-delay:1500ms}
.hour__scale{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.hour__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);list-style:none;padding:0;margin:28px 0 0}
.hour__step{display:grid;gap:8px;align-content:start;padding-right:16px}
.hour__step h3{font:400 clamp(20px,2vw,26px)/var(--lh-display) var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--forest)}
.hour__step:nth-child(3) h3{color:var(--red)}
.hour__step:nth-child(2){transition-delay:120ms}
.hour__step:nth-child(3){transition-delay:240ms}
.hour__step:nth-child(4){transition-delay:360ms}
@media (max-width:1100px){.hour__steps{grid-template-columns:repeat(2,1fr);row-gap:28px}}
@media (max-width:600px){.hour__steps{grid-template-columns:1fr}}
.classrows{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter) clamp(72px,10vh,120px)}
.crow{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(56px,9vh,104px) 0;border-top:1px solid var(--border-subtle)}
.crow:nth-of-type(even) .crow__img{order:2}
.crow__img{aspect-ratio:4/5;width:100%;max-width:480px}
.crow:nth-of-type(odd) .crow__img{justify-self:end}
.crow__body{display:grid;gap:16px;align-content:start;max-width:560px}
.crow__name{font:400 clamp(36px,4.2vw,60px)/var(--lh-display) var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--red)}
.crow__meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.crow__meta li{padding:6px 12px;border:1px solid var(--forest);border-radius:999px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--forest)}
.crow__label{margin-top:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.crow__list{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.crow__list strong{font-weight:700}
.crow__list li{position:relative;padding-left:28px;color:var(--text-body)}
.crow__list li::before{content:"";position:absolute;left:0;top:.8em;width:16px;height:1px;background:var(--red)}
.crow .textlink{justify-self:start}
.card__meta{margin-top:-6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
@media (max-width:860px){.crow{grid-template-columns:1fr}.crow:nth-of-type(even) .crow__img{order:0}.crow__img,.crow:nth-of-type(odd) .crow__img{justify-self:stretch;max-width:none;aspect-ratio:5/4}}

/* Prijzen: how credits work, the two credit cards, treatments, booking */
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(80px,12vh,140px) var(--gutter) clamp(40px,6vh,64px)}
.howto__step{display:grid;gap:10px;align-content:start;padding-top:22px;border-top:1px solid var(--border-subtle)}
.howto__step:nth-child(3){transition-delay:90ms}
.howto__step:nth-child(4){transition-delay:180ms}
.howto__no{font:400 28px/1 var(--display);color:var(--red)}
.howto__step h3{font:400 clamp(22px,2.2vw,28px)/var(--lh-display) var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--forest)}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(24px,4vh,48px) var(--gutter) clamp(96px,14vh,160px)}
.pcard{display:grid;align-content:start;gap:14px;padding:clamp(24px,3vw,44px);border-radius:var(--r-box);background:var(--cream-50);border:1px solid var(--border-subtle)}
.pcard:nth-of-type(2){transition-delay:120ms}
.pcard__name{font:400 clamp(40px,4.4vw,60px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--red)}
.pcard--mat .pcard__name{color:var(--forest)}
.pcard__for-label{margin-top:6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.pcard__for{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 10px}
.pcard__for li{padding:6px 12px;border:1px solid var(--border-subtle);border-radius:999px;font-size:12px;letter-spacing:.08em}
.prow{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto;column-gap:clamp(14px,2vw,28px);align-items:center;padding:18px 0;border-top:1px solid var(--border-subtle)}
.prow__qty{grid-column:1;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--forest)}
.prow__per{grid-column:1;grid-row:2;font-size:13px;color:var(--text-muted)}
.prow__price{grid-column:2;grid-row:1/3;font:400 clamp(28px,2.8vw,36px)/1 var(--display);color:var(--forest)}
.prow__buy{grid-column:3;grid-row:1/3;padding:12px 18px;font-size:12px}
.prices__rule{grid-column:1/-1;max-width:64ch;font-size:15px;color:var(--text-muted)}
.treat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);padding:clamp(96px,14vh,160px) var(--gutter);background:var(--surface-sunken)}
.treat__head{display:grid;gap:14px;align-content:start;max-width:440px;justify-self:end;width:100%}
.treat>*{min-width:0}
.treat .title{font-size:clamp(30px,3.4vw,44px)}
.treat__list{max-width:640px}
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;border-top:1px solid var(--border-subtle)}
.trow:last-child{border-bottom:1px solid var(--border-subtle)}
.trow__name{font:400 clamp(20px,2vw,26px)/var(--lh-display) var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--forest)}
.trow__price{font:400 clamp(24px,2.4vw,32px)/1 var(--display);color:var(--red);white-space:nowrap}
.trow__price--soon{font:400 12px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.booking{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(96px,14vh,160px) var(--gutter) clamp(48px,8vh,96px)}
.booking__head{display:grid;gap:12px;margin-bottom:32px}
.crm{min-height:420px;display:grid;background:var(--cream-50);border:1px solid var(--border-subtle)}
.crm iframe{width:100%;min-height:720px;border:0}
.crm__wait{display:grid;gap:18px;align-content:center;justify-items:center;padding:clamp(40px,6vw,80px);text-align:center}
.crm__wait .lead{max-width:46ch}
.faq--short{padding-top:clamp(48px,8vh,96px)}
.pricecue{display:grid;justify-items:center;gap:18px;padding:clamp(96px,14vh,160px) var(--gutter);background:var(--surface-sunken);text-align:center}
.pricecue .lead{max-width:52ch}
@media (max-width:860px){
  .howto,.prices,.treat{grid-template-columns:1fr}
  .treat__head{justify-self:stretch;max-width:none}
}
@media (max-width:420px){.prow__buy{padding:10px 14px}}
@media (max-width:560px){.trow{gap:12px}.trow__name{font-size:18px}.trow__price{font-size:24px}.trow__price--soon{font-size:11px;letter-spacing:.12em}}

/* Pause loops off-screen and on hidden tabs */
.paused-anim,.paused-anim *,.paused-anim *::before,.paused-anim *::after,
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* Reduced motion: final states, no movement */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .reveal{opacity:1;transform:none}
  .curl path,.menu__curl path{stroke-dashoffset:0}
  .hero__media{transform:none!important}
  .pimg img,.glints{transform:none!important}
  .zoomhead{transform:none!important;opacity:1!important}
  .breath__line,.pillar{opacity:1;transform:none}
  .orb__label{opacity:0}
  .form__ok{transform:none}
  .menu__main a,.menu__sub a,.menu__foot{opacity:1;transform:none}
  .hour__seg{transform:none}
  .marquee__track{transform:none}
}
@media (max-height:560px){.curl{display:none}}