/* Stoelyoga Rotterdam & Do-in Yoga Rotterdam: one stylesheet for both sites.
   Ink on paper. Two fonts only: Fraunces for the big titles (h1, h2, the logo name),
   Nunito Sans for everything else, numbers included.
   No brand colour: the photos bring the colour. WhatsApp green only on WhatsApp buttons.
   Layout: centred. Each section is a title, at most one line of text, then one visual idea.
   One quiet signature: things rest on an edge (the next class on the photo, the time on each
   lesson photo, the portrait on its card, the card on its photo, the figure on the free-lesson card), cut out with
   a thin ring of paper. Icons: Phosphor (MIT), one family. */

/* Self-hosted fonts (SIL Open Font License), latin subset, trimmed to what the site uses:
   Fraunces with SOFT 100 / WONK 0 built in and weights 500–600, Nunito Sans 400–800.
   The full fonts are in research/fonts/. No requests to Google. */
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/nunito-sans.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/fraunces.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
  --head:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#f7f3ec; --fg:#22201c; --soft:#5a554e; --surface:#fffdf9; --tint:#efe8dc;
  --line:#e3dacb; --line-strong:#8d8578;
  --btn:#22201c; --btn-fg:#f7f3ec; --btn-hover:#3b3732;
  --wa:#25d366; --wa-hover:#1ebe5d; --wa-ink:#0b141a;
  --r:24px; --r-lg:32px; --pill:999px;
  --wrap:1160px; --narrow:760px;
  --gutter:clamp(20px,4vw,40px);
  --space:clamp(88px,10vw,136px);     /* between two sections */
  --ring:8px;                          /* paper ring around something that rests on an edge */
  --tuck:clamp(28px,4vw,56px);         /* how far a photo tucks behind the one in front */
  --shadow:0 28px 56px -34px rgba(34,32,28,.5);
  --head-gap:clamp(36px,4.5vw,56px);  /* section title to its content */
  --ease:cubic-bezier(.22,.61,.36,1); --fast:180ms; --med:320ms; --slow:900ms;
  interpolate-size:allow-keywords;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
html.text-lg{font-size:112.5%}
html.menu-open{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.25rem/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
picture>source{display:none}
[hidden]{display:none!important}
p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.22em;transition:text-decoration-thickness var(--fast) var(--ease)}
a:hover{text-decoration-thickness:2.5px}
b,strong{font-weight:700}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:3px solid var(--fg);outline-offset:4px;border-radius:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.narrow{max-width:calc(var(--narrow) + 2 * var(--gutter))}
.icon{width:1.25em;height:1.25em;flex:none;fill:currentColor}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 20px;border-radius:var(--pill);background:var(--fg);color:var(--bg);font-weight:700;text-decoration:none;transition:top var(--fast) var(--ease)}
.skip:focus{top:12px}

/* Brush figures, as masks so they take the text colour */
.fig{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--fig) center/contain no-repeat;mask:var(--fig) center/contain no-repeat;aspect-ratio:var(--ar);height:var(--h,48px)}
.fig-zit{--fig:url(brand/figuur-zittend.png);--ar:224/400}
.fig-staand{--fig:url(brand/figuur-staand.png);--ar:372/400}

/* ---------- Type ---------- */
h1,h2,.h1,.h2{margin:0;font-family:var(--head);font-optical-sizing:auto;font-weight:600;line-height:1.06;letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.h1{font-size:clamp(2.8rem,6vw,4.75rem);line-height:1.02;letter-spacing:-.028em}
.h1 .line{display:block}
.h2{font-size:clamp(2.1rem,4vw,3.1rem);font-weight:560}
h3,.h3{margin:0;font-family:var(--body);font-weight:700;font-size:1.25rem;line-height:1.3;letter-spacing:0;color:var(--fg)}
.text{max-width:34em;margin-top:1rem;font-size:clamp(1.2rem,1.8vw,1.35rem);line-height:1.55;color:var(--soft);text-wrap:pretty}
.small{font-size:1.0625rem;color:var(--soft)}
.head{max-width:44rem;margin:0 auto var(--head-gap);text-align:center}
.head .text,.hero .text{margin-inline:auto;text-wrap:balance}
.center{text-align:center}
.center .text{margin-inline:auto}

/* ---------- Buttons: one shape, one motion ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:58px;padding:0 1.6em;border:2px solid transparent;border-radius:var(--pill);background:var(--btn);color:var(--btn-fg);font:700 1.125rem/1.15 var(--body);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.btn-primary:hover{background:var(--btn-hover)}
.btn-outline{border-color:var(--line-strong);background:transparent;color:var(--fg)}
.btn-outline:hover{border-color:var(--fg);background:var(--surface)}
.btn-wa{background:var(--wa);color:var(--wa-ink)}
.btn-wa:hover{background:var(--wa-hover)}
.btn .icon{width:1.3em;height:1.3em}
.btn .go{width:1.15em;height:1.15em;margin-right:-.2em;transition:transform var(--fast) var(--ease)}
.btn:hover .go{transform:translateX(3px)}
.btn-sm{min-height:48px;padding:0 1.25em;font-size:1.0625rem}
.btns{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:2rem}
.btns .more{margin:0 0 0 12px}
.more{display:inline-flex;align-items:center;gap:.45em;margin-top:1.5rem;padding-bottom:3px;border-bottom:2px solid currentColor;font-weight:700;text-decoration:none}
.more .icon{transition:transform var(--fast) var(--ease)}
.more:hover .icon{transform:translateX(3px)}
.icon-btn{display:inline-grid;place-items:center;width:48px;height:48px;flex:none;border:2px solid var(--line);border-radius:50%;background:transparent;color:var(--fg);text-decoration:none;cursor:pointer;transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.icon-btn:hover{border-color:var(--fg)}
.icon-btn:active{transform:scale(.96)}
.icon-btn .icon{width:22px;height:22px}
.aa{font:800 1.0625rem/1 var(--body);letter-spacing:-.02em}
.text-toggle[aria-pressed="true"]{border-color:var(--fg);background:var(--fg);color:var(--bg)}

/* ---------- Notice (a cancelled class, a message) ---------- */
.notice{background:var(--tint);font-size:1.0625rem;line-height:1.4}
.notice .wrap{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding-block:10px;text-align:center}
.notice .icon{width:22px;height:22px}

/* ---------- Header: one quiet bar ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);box-shadow:0 1px 0 transparent;transition:box-shadow var(--med) var(--ease)}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line)}
.header-inner{display:flex;align-items:center;gap:28px;min-height:84px}
.brand{display:inline-flex;align-items:center;gap:14px;margin-right:auto;text-decoration:none}
.brand .fig{--h:48px;transition:transform var(--med) var(--ease)}
.brand:hover .fig{transform:rotate(-4deg)}
.brand-name{font:600 1.5rem/1 var(--head);white-space:nowrap;letter-spacing:-.015em}
.brand-name small{display:block;margin-top:4px;font:400 1rem/1.2 var(--body);letter-spacing:0;color:var(--soft)}
.main-nav ul{display:flex;gap:30px}
.main-nav a{position:relative;display:block;padding:8px 0;font-size:1.125rem;text-decoration:none}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--med) var(--ease)}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.main-nav a[aria-current="page"]{font-weight:700}
.header-tools{display:flex;align-items:center;gap:12px}
.header-phone{display:inline-flex;align-items:center;gap:.45em;font-size:1.0625rem;font-weight:700;text-decoration:none;white-space:nowrap}
.header-phone .icon{width:20px;height:20px}
.call{display:none}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:10px;min-width:116px;min-height:48px;padding:0 14px;border:2px solid var(--line-strong);border-radius:var(--pill);background:transparent;color:inherit;font:700 1.0625rem/1 var(--body);cursor:pointer;transition:border-color var(--fast) var(--ease)}
.menu-toggle:hover{border-color:var(--fg)}
.bars{position:relative;width:18px;height:12px}
.bars::before,.bars::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform var(--med) var(--ease),top var(--med) var(--ease)}
.bars::before{top:1px}
.bars::after{top:9px}
[aria-expanded="true"] .bars::before{top:5px;transform:rotate(45deg)}
[aria-expanded="true"] .bars::after{top:5px;transform:rotate(-45deg)}

/* Mobile menu: fades and slides in, items follow one by one */
.menu{position:fixed;left:0;right:0;bottom:0;top:var(--menu-top,84px);z-index:29;overflow:auto;padding-block:12px 40px;background:var(--bg);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--med) var(--ease),transform var(--med) var(--ease),visibility 0s linear var(--med)}
.menu.is-open{visibility:visible;opacity:1;transform:none;transition:opacity var(--med) var(--ease),transform var(--med) var(--ease),visibility 0s}
.menu-links li{opacity:0;transform:translateY(6px);transition:opacity var(--med) var(--ease),transform var(--med) var(--ease)}
.menu.is-open .menu-links li{opacity:1;transform:none}
.menu.is-open .menu-links li:nth-child(2){transition-delay:40ms}
.menu.is-open .menu-links li:nth-child(3){transition-delay:80ms}
.menu.is-open .menu-links li:nth-child(4){transition-delay:120ms}
.menu-links a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font:700 1.6rem/1.2 var(--body);text-decoration:none}
.menu-links a .icon{transition:transform var(--fast) var(--ease)}
.menu-links a:hover .icon{transform:translateX(4px)}
.menu-links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.menu .btns{flex-direction:column;align-items:stretch}
.menu .btn{width:100%}
.menu .text-toggle-wide{display:flex;align-items:center;justify-content:center;gap:.6em;width:100%;min-height:58px;margin-top:12px;border:2px solid var(--line);border-radius:var(--pill);background:transparent;color:var(--fg);font:700 1.125rem/1 var(--body);cursor:pointer}
.menu .text-toggle-wide[aria-pressed="true"]{border-color:var(--fg)}

/* ---------- Sections ---------- */
.section{padding-block:calc(var(--space) / 2)}
.section.after{padding-top:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.photo{width:100%;object-fit:cover;border-radius:var(--r-lg);background:var(--tint)}
.photo.land{aspect-ratio:4/3}
.photo.wide{aspect-ratio:16/9}
.card{padding:clamp(28px,4vw,48px);border-radius:var(--r-lg);background:var(--surface)}
.card .h2{font-size:clamp(1.8rem,3vw,2.4rem)}

/* ---------- Hero: centred, one photo in front, two tucked behind it ---------- */
.hero{padding-block:clamp(32px,4.5vw,64px) calc(var(--space) / 2);text-align:center;overflow-x:clip}
.hero .h1{max-width:15ch;margin-inline:auto}
.hero .text{margin-inline:auto}
.collage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.3fr) minmax(0,.8fr);align-items:center;max-width:1080px;margin:clamp(40px,5vw,64px) auto 0;padding-bottom:28px}
.collage .left,.collage .right{width:calc(100% + var(--tuck));max-width:none;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);background:var(--tint)}
.collage .left{grid-area:1/1;justify-self:start;transform:translateY(5%)}
.collage .right{grid-area:1/3;justify-self:start;margin-left:calc(var(--tuck) * -1);transform:translateY(-5%)}
.collage .main{grid-area:1/2;position:relative;z-index:1;margin:0}
.collage .main img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);background:var(--tint);box-shadow:0 0 0 var(--ring) var(--bg)}
.collage .next{position:absolute;left:50%;bottom:0;margin:0;border-color:transparent;white-space:nowrap;transform:translate(-50%,50%);box-shadow:0 0 0 6px var(--bg),0 16px 32px -20px rgba(34,32,28,.45)}
/* one gentle entrance, then everything stays still */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise var(--slow) var(--ease) both;animation-delay:var(--d,0ms)}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* Next class: a dot that breathes at a calm pace (6 breaths a minute) */
.next{display:inline-flex;align-items:center;gap:.75em;margin-top:2rem;padding:.65em 1.2em .65em .95em;border:1px solid var(--line);border-radius:24px;background:var(--surface);font-size:1.0625rem;line-height:1.35;text-align:left}
.next strong{font-weight:700}
.breath{flex:none;width:12px;height:12px;border-radius:50%;background:currentColor;animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.6);opacity:.5}45%,55%{transform:scale(1.15);opacity:1}}
.tools{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:1rem}
.tools.start{justify-content:flex-start}

/* ---------- Features: a two-tone icon on a disc, and a title (no boxes, no small print) ---------- */
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px);max-width:1000px;margin-inline:auto;text-align:center}
.feature .disc{--duo:var(--surface);--duo-o:1;display:grid;place-items:center;width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:var(--tint);transition:transform var(--med) var(--ease)}
.feature:hover .disc{transform:translateY(-4px)}
.feature .disc .icon{width:46px;height:46px}

/* ---------- Teacher: the portrait rests on the edge of the card, then her own words ---------- */
.teacher{--p:clamp(132px,13vw,164px);position:relative;max-width:760px;margin:calc(var(--p) / 2) auto 0;padding:calc(var(--p) / 2 + 28px) clamp(24px,5vw,64px) clamp(36px,5vw,52px);border-radius:var(--r-lg);background:var(--tint);text-align:center}
.teacher.duo{--pw:calc(var(--p) * 1.5)}
.teacher .portrait{position:absolute;left:50%;top:0;width:var(--pw,var(--p));height:var(--p);object-fit:cover;border-radius:var(--pill);background:var(--tint);box-shadow:0 0 0 var(--ring) var(--bg);transform:translate(-50%,-50%)}
.teacher blockquote{font:500 clamp(1.65rem,3vw,2.3rem)/1.25 var(--head);letter-spacing:-.015em;text-wrap:balance}
.teacher figcaption{margin-top:22px}
.teacher figcaption b{display:block;font-size:1.1875rem}
.teacher figcaption span{display:block;margin-top:2px;font-size:1.0625rem;color:var(--soft);text-wrap:balance}
.teacher .more{margin-top:1.25rem}

/* ---------- Moments: a photo, the time resting on its edge, a title ---------- */
.moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,32px);text-align:center}
.moment .pic{position:relative;margin-bottom:38px}
.frame{overflow:hidden;isolation:isolate;border-radius:var(--r-lg);background:var(--tint)}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--slow) var(--ease)}
.moment:hover .frame img{transform:scale(1.04)}
.stamp{position:absolute;left:50%;bottom:0;margin:0;padding:.5em 1.15em;border-radius:var(--pill);background:var(--surface);box-shadow:0 0 0 6px var(--bg);font:800 1.0625rem/1.2 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;transform:translate(-50%,50%);transition:background-color var(--med) var(--ease),color var(--med) var(--ease)}

/* The place: a photo with the practical card resting on its edge */
.place>img,.place>picture>img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--r-lg);background:var(--tint)}
.place .card{position:relative;width:min(620px,calc(100% - 2 * var(--gutter)));margin:clamp(-160px,-12vw,-96px) auto 0;box-shadow:var(--shadow);text-align:center}
.place .facts{width:fit-content;max-width:100%;margin-inline:auto}
.place .btns{margin-top:1.5rem}
.place.side{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}
.place.side>img,.place.side>picture>img{grid-area:1/1;aspect-ratio:4/3}
.place.side .card{grid-area:1/2;width:auto;margin:0 0 0 calc(var(--tuck) * -1.4);text-align:left}
.place.side .facts{width:auto;margin-inline:0}
.place.side .btns{justify-content:flex-start}

/* Facts list: an icon and one line */
.facts{margin-top:1.5rem;text-align:left}
.facts li{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.facts li:first-child{border-top:0}
.facts .icon{--duo-o:0;width:26px;height:26px}

/* People (Over page) */
.duo-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* Steps: a time and a title, centred list */
.steps{max-width:var(--narrow);margin:0 auto}
.steps li{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:20px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line);text-align:left}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps time{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}

/* FAQ: centred, opens smoothly */
.faq{max-width:var(--narrow);margin:0 auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;list-style:none;cursor:pointer;font-size:1.25rem;font-weight:700;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;width:40px;height:40px;border:2px solid var(--line);border-radius:50%;transition:border-color var(--fast) var(--ease),transform var(--med) var(--ease)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:currentColor;transition:transform var(--med) var(--ease)}
.pm::after{transform:rotate(90deg)}
.faq summary:hover .pm{border-color:var(--fg)}
.faq details[open] .pm{transform:rotate(180deg)}
.faq details[open] .pm::after{transform:rotate(0deg)}
.faq details::details-content{height:0;overflow:clip;transition:height var(--med) var(--ease),content-visibility var(--med) allow-discrete}
.faq details[open]::details-content{height:auto}
.faq .answer{padding:0 60px 24px 0;font-size:1.1875rem;color:var(--soft)}
.faq .answer a{color:var(--fg)}

/* Prices: centred list */
.prices{max-width:var(--narrow);margin:0 auto}
.prices li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-top:1px solid var(--line);font-size:1.1875rem}
.prices li:last-child{border-bottom:1px solid var(--line)}
.prices strong{font-size:1.3rem;font-weight:800;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.fine{max-width:var(--narrow);margin:1.25rem auto 0;font-size:1.0625rem;color:var(--soft);text-align:center}

/* Call to action: the brand figure sits on the top edge of the card */
.cta{position:relative;margin-top:clamp(64px,7vw,88px);padding:clamp(48px,6vw,72px) clamp(24px,5vw,64px);border-radius:var(--r-lg);background:var(--tint);text-align:center}
.cta .text{margin-inline:auto}
.cta>.fig{position:absolute;left:50%;top:0;--h:clamp(76px,7.5vw,92px);transform:translate(-50%,calc(-100% + var(--foot,2.5%)))}
.cta>.fig-zit{--foot:6%}

/* The other site, just above the footer */
.promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;isolation:isolate;border-radius:var(--r-lg);background:var(--surface)}
.promo .pic{overflow:hidden;min-height:340px}
.promo .pic img{width:100%;height:100%;object-fit:cover;transition:transform var(--slow) var(--ease)}
.promo:hover .pic img{transform:scale(1.03)}
.promo .body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(32px,5vw,64px)}
.promo .fig{--h:60px;margin-bottom:22px}
.promo .h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.promo .btn{margin-top:2rem}

/* Contact page */
.ways{display:grid;gap:12px;max-width:30rem;margin:0 auto}
.ways .btn{justify-content:flex-start;min-height:68px;padding:0 1.5em;font-size:1.1875rem}
.ways .btn .go{margin-left:auto}
.number{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;user-select:all}

/* Page hero (sub pages) */
.page-hero{padding-block:clamp(56px,8vw,112px) calc(var(--space) / 2);text-align:center}
.page-hero .h1{max-width:16ch;margin-inline:auto}
.page-hero .text{margin-inline:auto}
.page-hero .round{width:clamp(150px,16vw,200px);aspect-ratio:1;margin:0 auto 32px;object-fit:cover;border-radius:50%}
.page-hero .wide-photo{width:min(720px,100%);aspect-ratio:16/9;margin:clamp(36px,5vw,56px) auto 0;object-fit:cover;border-radius:var(--r-lg)}

/* Do-in: rooster */
.rooster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.blok{padding:28px 26px 30px;border-radius:var(--r-lg);background:var(--surface);text-align:center}
.blok h3{margin-bottom:18px;font-size:1.35rem}
.blok h3 span{display:block;margin-top:2px;font-size:1.0625rem;font-weight:400;color:var(--soft)}
.dates{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.dates li{padding:.45em .95em;border:1px solid var(--line);border-radius:var(--pill);font-size:1.0625rem;line-height:1.2;font-variant-numeric:tabular-nums}
.dates li.is-past{opacity:.45;text-decoration:line-through;text-decoration-thickness:1px}
.dates li.is-next{border-color:var(--fg);background:var(--fg);color:var(--bg);font-weight:800}
[data-rooster-fallback]{text-align:center;color:var(--soft)}

/* A simple centred list: name left, detail right */
.list{max-width:var(--narrow);margin:0 auto}
.list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list b{font-size:1.1875rem}
.list span{font-size:1.0625rem;color:var(--soft);text-align:right}

/* ---------- Footer ---------- */
.site-footer{padding-block:56px 40px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:40px}
.site-footer .brand{margin:0}
.site-footer h2{margin-bottom:12px;font:700 1.0625rem/1.3 var(--body);letter-spacing:0}
.site-footer ul{display:grid;gap:8px}
.site-footer li{font-size:1.0625rem;color:var(--soft)}
.site-footer a{color:var(--fg)}
.footer-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:.95rem;color:var(--soft)}
.footer-base a{color:var(--soft)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .header-phone{display:none}
}
@media (max-width:760px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .moments{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  .moments .frame img{aspect-ratio:16/10}
}
@media (max-width:960px){
  .main-nav,.header-tools{display:none}
  .call,.menu-toggle{display:inline-flex}
  .call{display:inline-grid}
  .header-inner{gap:10px;min-height:72px}
  .brand{gap:12px}
  .brand .fig{--h:42px}
  .brand-name{font-size:1.35rem}
  .split,.duo-cards,.promo{grid-template-columns:minmax(0,1fr)}
  .split{text-align:center}
  .split .text{margin-inline:auto}
  .rooster{grid-template-columns:minmax(0,1fr)}
  .place.side{display:block}
  .place>img,.place>picture>img,.place.side>img,.place.side>picture>img{aspect-ratio:4/3}
  .place .card,.place.side .card{width:auto;margin:-56px 12px 0;text-align:center}
  .place.side .facts{width:fit-content;margin-inline:auto}
  .place.side .btns,.place .tools{justify-content:center}
  .promo .pic{min-height:0;aspect-ratio:16/10}
  .promo .body{align-items:center;text-align:center}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:1.1875rem}
  .collage{grid-template-columns:minmax(0,1fr);margin-top:36px;padding-bottom:24px}
  .collage .left,.collage .right{display:none}
  .collage .main{grid-area:auto}
  .collage .main img{aspect-ratio:4/3.3;box-shadow:none}
  .collage .next{gap:.6em;padding:.6em 1.05em .6em .85em;font-size:1rem}
  .features{gap:32px 16px}
  .feature .disc{width:80px;height:80px;margin-bottom:14px}
  .feature .disc .icon{width:38px;height:38px}
  .feature h3{font-size:1.125rem}
  .teacher{--p:124px}
  .place .card,.place.side .card{margin:-48px 8px 0;padding:28px 22px 30px}
  .place .facts li{font-size:1.0625rem}
  .btns .btn,.cta .btn{width:100%}
  .btns .more{margin:8px 0 0}
  .steps li{grid-template-columns:4.8rem minmax(0,1fr);gap:12px}
  .faq summary{font-size:1.15rem}
  .faq .answer{padding-right:0}
  .list li{flex-direction:column;gap:2px}
  .list span{text-align:left}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:374px){
  .collage .next{white-space:normal;max-width:calc(100% - 16px)}
  .header-inner{gap:8px}
  .brand{gap:10px}
  .brand .fig{--h:36px}
  .brand-name{font-size:1.2rem}
  .call{width:44px;height:44px}
  .menu-toggle{min-width:0;padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Print: only the content, e.g. the do-in dates for on the fridge ---------- */
.print-only{display:none}
@media print{
  @page{margin:16mm}
  body{background:#fff;color:#000;font-size:12pt}
  .notice,.site-header,.menu,.site-footer,.no-print,.cta,.next,.tools,.btns,.promo{display:none!important}
  .print-only{display:block!important;margin-top:4mm;text-align:center}
  .page-hero{padding:0 0 8mm}
  .section{padding:0}
  .rooster{grid-template-columns:repeat(3,minmax(0,1fr));gap:4mm}
  .blok{break-inside:avoid;border:1px solid #bbb;background:#fff;padding:5mm}
  .dates li{border-color:#bbb}
  .dates li.is-past{opacity:1;text-decoration:line-through}
  .dates li.is-next{background:#fff;color:#000;border:2px solid #000}
}