/* Pracownia Pilatesu — phone first. Two colours (cream, deep brown) plus clay; a serif for display, the system sans for text. */
:root {
  --cream: #f5e8df;
  --blush: #ecd8ca;
  --sand: #e3c9b8;
  --clay: #8a5a3c;
  --brown: #25140c;
  --ink: #2c1b12;
  --muted: #6e5546;
  --line: rgba(37, 20, 12, .14);
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 999px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --glide: cubic-bezier(.16, 1, .3, 1);    /* long, soft settle: opening */
  --drift: cubic-bezier(.7, 0, .25, 1);    /* gentle ease-in-out: closing */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.65 var(--sans); overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .055;
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
em { font-style: italic; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--brown); color: var(--cream); border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* Type */
.display { font: 400 clamp(46px, 13vw, 132px)/.95 var(--serif); letter-spacing: -.02em; }
.heading { font: 400 clamp(34px, 8.5vw, 72px)/1.02 var(--serif); letter-spacing: -.015em; }
.heading em, .display em { color: inherit; }
.heading--light { color: var(--cream); }
.eyebrow { margin: 0 0 18px; font: 600 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }
.eyebrow--light { color: rgba(245, 232, 223, .82); }
.placeholder-note { font-size: 14px; color: var(--muted); border-left: 2px solid var(--sand); padding-left: 12px; margin-top: 18px; }

/* Buttons and links */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px;
        border: 1px solid var(--brown); border-radius: var(--radius); background: var(--brown); color: var(--cream);
        font: 500 16px/1 var(--sans); text-decoration: none; cursor: pointer;
        transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.pill:hover { transform: translateY(-2px); }
.pill--light { background: var(--cream); border-color: var(--cream); color: var(--brown); }
.pill--ghost-light { background: transparent; border-color: rgba(245, 232, 223, .7); color: var(--cream); }
.pill--outline { background: transparent; color: var(--brown); }
.pill--outline:hover { background: var(--brown); color: var(--cream); }
.pill--small { min-height: 42px; padding: 0 18px; font-size: 15px; }
.pill--wide { width: 100%; }
.text-link { display: inline-flex; gap: 8px; align-items: center; padding: 10px 0; border: 0; background: none; color: var(--brown);
             font: 500 16px/1.2 var(--sans); text-decoration: none; border-bottom: 1px solid currentColor; cursor: pointer; }
.text-link::after { content: "→"; transition: transform .3s var(--ease); }
.text-link:hover::after { transform: translateX(4px); }
.round-button { width: 50px; height: 50px; border: 1px solid rgba(245, 232, 223, .5); border-radius: 50%; background: transparent;
                color: var(--cream); font-size: 20px; cursor: pointer; transition: background .3s var(--ease); }
.round-button:hover { background: rgba(245, 232, 223, .12); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between;
               padding: 14px var(--gutter); color: var(--cream); transition: background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease); }
.site-header.is-solid { background: rgba(245, 232, 223, .92); color: var(--brown); padding-top: 10px; padding-bottom: 10px;
                        backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); }
/* Below the solid header, a soft fade (colour + blur that thin out) so text dissolves instead of being cut by an edge */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 56px; pointer-events: none; opacity: 0;
                      background: linear-gradient(180deg, rgba(245, 232, 223, .92), rgba(245, 232, 223, .55) 45%, rgba(245, 232, 223, 0));
                      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
                      -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
                      transition: opacity .4s var(--ease); }
.site-header.is-solid::after { opacity: 1; }
.wordmark { display: inline-flex; align-items: center; color: inherit; text-decoration: none; --logo-accent: var(--sand); }
/* Ania's logo (brand/make_logo.py): the name with the pilates ring over "PRACOWNIA PILATESU"; the text follows the header's
   colour, the ring and the rules take the accent (sand over the hero, clay on the light header) */
.wordmark-logo { display: block; height: 44px; width: calc(44px * 7.67); }
.site-header.is-solid .wordmark { --logo-accent: var(--clay); }
@media (max-width: 640px) { .wordmark-logo { height: 34px; width: calc(34px * 7.67); } }
@media (max-width: 420px) { .wordmark-logo { height: 30px; width: calc(30px * 7.67); } }   /* room for "EN" and the menu on a small phone */
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-book { display: none; }
.site-header.is-solid .header-book { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.menu-button { display: inline-flex; align-items: center; gap: 12px; min-width: 44px; height: 36px; padding: 0 2px; border: 0;
               background: none; color: inherit; font: 500 14px/1 var(--sans); letter-spacing: .04em; cursor: pointer; }
.menu-lines { display: grid; gap: 7px; width: 26px; justify-items: end; }
.menu-lines span { display: block; height: 1px; background: currentColor; transition: width .6s var(--ease); }
.menu-lines span:first-child { width: 26px; }
.menu-lines span:last-child { width: 16px; }
.menu-button:hover .menu-lines span:last-child, .menu-button:focus-visible .menu-lines span:last-child { width: 26px; }
.menu-label { display: none; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--cream); padding: 0; }
.hero-art { position: absolute; inset: -6% 0 0; width: 100%; height: 112%; }
.hero-glow { position: absolute; inset: 0; background: radial-gradient(55% 45% at 32% 38%, rgba(255, 241, 226, .38), transparent 70%);
             animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .45; } to { opacity: 1; } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37, 20, 12, .35) 0%, rgba(37, 20, 12, .12) 35%, rgba(37, 20, 12, .62) 100%); }
.hero-copy { position: relative; z-index: 1; width: 100%; padding: 0 var(--gutter) clamp(72px, 12vh, 150px); }   /* the text starts where every section's does */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(72px, 9vh, 110px); pointer-events: none;
               background: linear-gradient(180deg, rgba(245, 232, 223, 0.00) 0%, rgba(245, 232, 223, 0.03) 10%, rgba(245, 232, 223, 0.10) 20%, rgba(245, 232, 223, 0.22) 30%, rgba(245, 232, 223, 0.35) 40%, rgba(245, 232, 223, 0.50) 50%, rgba(245, 232, 223, 0.65) 60%, rgba(245, 232, 223, 0.78) 70%, rgba(245, 232, 223, 0.90) 80%, rgba(245, 232, 223, 0.97) 90%, rgba(245, 232, 223, 1.00) 100%); }   /* the scene dissolves into the next section */
.hero-copy .display { margin-bottom: 22px; }
/* Each line slides up inside a clipping box; the box reaches below the letters (g, j, ę, ą tails) and past the
   italic overhang, and the negative margin keeps the headline's line spacing unchanged. */
.line { display: block; overflow: hidden; padding: 0 .12em .24em 0; margin-bottom: -.18em; }
.line > span { display: block; text-wrap: balance; transform: translateY(105%); transition: transform 1.6s var(--ease); }
.is-loaded .line > span { transform: none; }
.is-loaded .line:nth-child(2) > span { transition-delay: .2s; }
.hero-lead { max-width: 34ch; font-size: 18px; color: rgba(245, 232, 223, .9); }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 14px; color: rgba(245, 232, 223, .86);
              text-decoration: none; transition: color .4s var(--ease); }
.hero-badge::before { content: ""; flex: 0 0 28px; height: 1px; background: currentColor; opacity: .7; }
.hero-badge em { font: italic 400 19px/1 var(--serif); white-space: nowrap; }
.hero-badge:hover { color: var(--cream); }

/* Sections */
section { padding: clamp(38px, 5.4vw, 70px) var(--gutter); }
/* A link to a section (menu, "Poznaj Anię") lands on its content, not on the empty top padding: the negative
   scroll margin skips most of that padding, leaving 32 px of air under the header (scroll-padding-top in html). */
main > section { scroll-margin-top: calc(32px - clamp(38px, 5.4vw, 70px)); }
.trainer { scroll-margin-top: calc(32px - clamp(113px, 10vw, 140px)); }   /* its top padding holds the dark section's fade */
.principles, .hero { scroll-margin-top: 0; }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4.5vw, 48px); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.5s var(--ease), transform 1.5s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Scroll focus: like depth of field, text sharpens in the last line above the bottom edge (the bottom tenth of the
   screen) and dissolves, fading and blurring, in the line just before it slides under the header. The scroll position itself drives it (scroll-driven
   animations run off the main thread); where the browser lacks them, app.js sets the same values by hand and marks
   <html class="focus-js">. Photos only fade: blurring them costs too much on phones. The calendar and forms stay sharp
   (nobody should type into blurred fields); the hero and the quotes keep their own motion. */
@keyframes focus-in { from { opacity: 0; filter: blur(7px); transform: translateY(8px); } 60% { filter: blur(1px); }
                      to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes focus-out { from { opacity: 1; filter: blur(0); } 40% { filter: blur(1px); } to { opacity: 0; filter: blur(7px); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@supports (animation-timeline: view(0px)) {
  @media (prefers-reduced-motion: no-preference) {
    :root:not(.focus-js) .reveal { opacity: 1; transform: none; transition: none; }   /* the entrance is scroll-linked below */
    :root:not(.focus-js) :is(.intro-text > *, .statement, .section-head > *, .approach-steps > li, .session-text > *, .session-facts > li, .trainer-text > *, .certificate, .source-text > :not(.lineage, .source-gains), .lineage > li, .source-gains > li, .pass, .pay-note, .faq-list > details, .contact-text > *) {
      animation: focus-out ease-in forwards, focus-in ease-out backwards;
      animation-timeline: view(0px), view(0px);   /* 0px: measure from the window edge, not from scroll-padding-top */
      /* leaving: from the block's bottom edge 16 percent down the screen until it is under the header (7 percent);
         entering: the first tenth of the screen above the bottom edge. Narrow zones keep the reading area wide. */
      animation-range: exit calc(100% - 16vh) exit calc(100% - 7vh), entry 0 entry 10vh;
    }
    :root:not(.focus-js) :is(.intro-art, .trainer-art) {          /* photos: the same range, fade only */
      animation: fade-out ease-in forwards, fade-in ease-out backwards;
      animation-timeline: view(0px), view(0px);   /* 0px: measure from the window edge, not from scroll-padding-top */
      animation-range: exit calc(100% - 16vh) exit calc(100% - 7vh), entry 0 entry 10vh;
    }
  }
}
.focus-js .reveal { opacity: 1; transform: none; transition: none; }
/* Apple WebKit (app.js sets .apple-webkit): no fixed grain layer and no full-screen backdrop blurs, see app.js */
.apple-webkit body::after { content: none; }
.apple-webkit :is(.scrim, .ask, .sheet) { backdrop-filter: none; -webkit-backdrop-filter: none; }
.apple-webkit .scrim { background: rgba(37, 20, 12, .42); }

/* Intro */
.intro-grid { display: grid; gap: 44px; }
.intro-text p { max-width: 46ch; color: var(--muted); }
.intro-text .heading { margin-bottom: 26px; }
.intro-art, .trainer-art { position: relative; margin: 0; overflow: hidden; border-radius: 280px 280px 18px 18px; aspect-ratio: 600 / 760; }
.intro-art svg, .trainer-art svg { width: 100%; height: 108%; }
figcaption { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--radius);
             background: rgba(245, 232, 223, .85); font-size: 12px; color: var(--muted); white-space: nowrap; }
.statement { max-width: 1100px; margin: clamp(56px, 8vw, 96px) 0 0; font: 400 clamp(30px, 7vw, 68px)/1.12 var(--serif); }
.statement .word { color: rgba(37, 20, 12, .16); transition: color .5s var(--ease); }
.statement .word.is-lit { color: var(--brown); }

/* Ania's training: Lolita's Legacy and the line back to Joseph Pilates */
.source { background: radial-gradient(55% 45% at 22% 42%, rgba(236, 216, 202, .75), rgba(245, 232, 223, 0) 70%), var(--cream);
          padding-bottom: clamp(40px, 6vw, 80px); }
.source-grid { display: grid; gap: 52px; }
/* Ania's certificate: ivory paper in a double gold frame, the ring mark as its seal */
.certificate { width: min(100%, 360px); margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(37, 20, 12, .18)); }
.certificate-frame { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
                     padding: 44px 28px 36px; border-radius: 6px; color: var(--ink);
                     background: linear-gradient(160deg, #fdf8f2, #f6ebdf 55%, #f1e2d2);
                     box-shadow: inset 0 0 0 1px #c4a66a, inset 0 0 0 9px #fbf3ea, inset 0 0 0 10px #c4a66a, inset 0 0 0 11px #e9d7b4; }
.certificate-frame::before, .certificate-frame::after {   /* gold corner flourishes */
  content: ""; position: absolute; width: 26px; height: 26px; border: 1px solid #b8975b; pointer-events: none; }
.certificate-frame::before { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.certificate-frame::after { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.certificate-mark { width: 52px; height: 52px; margin-bottom: 14px; color: #b8975b; --logo-accent: #b8975b; }
.certificate-kicker { margin: 0 0 6px; font: 600 11px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #a3844b; }
.certificate-number { margin: 0; font: 400 clamp(84px, 20vw, 112px)/.9 var(--serif); letter-spacing: -.03em;
                      background: linear-gradient(180deg, #c9ab6c, #9f7f44); -webkit-background-clip: text; background-clip: text; color: transparent; }
.certificate-unit { margin: 8px 0 22px; font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.certificate-school { margin: 0; padding-top: 20px; width: 100%; border-top: 1px solid #d9c293; }
/* The school is named in our own gold lettering: its logo is its trademark (used only with its written permission) */
.certificate-school-name { display: block; padding-bottom: .2em; margin-bottom: -.1em;   /* the gold fill reaches the g's tail */
                           font: 400 30px/1.15 var(--serif); letter-spacing: .01em;
                           background: linear-gradient(180deg, #b08d4f, #8a6a32); -webkit-background-clip: text; background-clip: text; color: transparent; }
.certificate-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.certificate-name { margin: 22px 0 0; font: italic 400 22px/1.2 var(--serif); color: #a3844b; }
.gains-title { margin: 30px 0 0; font: 400 clamp(24px, 4.5vw, 30px)/1.15 var(--serif); }
.source-text > p { max-width: 50ch; color: var(--muted); }
.source-text > p strong { color: var(--ink); font-weight: 600; }
.source-text .heading { margin-bottom: 0; }
.source-lead { margin: 22px 0 32px; font: 400 clamp(22px, 4.2vw, 28px)/1.4 var(--serif); color: var(--ink) !important; }
.lineage { position: relative; display: grid; gap: 22px; margin: 0 0 30px; padding: 0 0 0 30px; list-style: none; }
.lineage::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 12px; width: 1px;
                   background: linear-gradient(180deg, rgba(138, 90, 60, .2), rgba(138, 90, 60, .55)); }
.lineage li { position: relative; }
.lineage li::before { content: ""; position: absolute; left: -30px; top: 7px; width: 11px; height: 11px; border-radius: 50%;
                      background: var(--cream); border: 1px solid var(--clay); }
.lineage li:last-child::before { background: var(--clay); box-shadow: 0 0 0 5px rgba(138, 90, 60, .14); }
.lineage-role { display: block; font: italic 400 17px/1.3 var(--serif); color: var(--clay); }
.lineage h3 { margin: 2px 0; font: 400 clamp(25px, 5vw, 30px)/1.15 var(--serif); }
.lineage p { margin: 0; max-width: 44ch; font-size: 16px; color: var(--muted); }
.source-gains { margin: 28px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.source-gains li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); color: var(--muted); }
.source-gains li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 14px; height: 1px; background: var(--clay); }
.source-gains strong { font-weight: 600; color: var(--ink); }
.source-text .pill { margin-top: 12px; }

/* Approach: the individual path, step by step */
.approach { background: linear-gradient(180deg, var(--cream), var(--blush) 180px); }
.approach-lead { max-width: 44ch; margin-top: 22px; font: 400 clamp(21px, 4vw, 26px)/1.45 var(--serif); color: var(--muted); }
.approach-steps { position: relative; display: grid; gap: 34px; margin: 0; padding: 0 0 0 34px; list-style: none; }
.approach-steps::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 1px; background: rgba(138, 90, 60, .35); }
.approach-steps li { position: relative; }
.approach-steps li::before { content: ""; position: absolute; left: -31px; top: 9px; width: 11px; height: 11px; border-radius: 50%;
                             background: var(--blush); border: 1px solid var(--clay); }
.approach-number { font: italic 400 20px/1 var(--serif); color: var(--clay); }
.approach-steps h3 { margin: 6px 0 6px; font: 400 clamp(28px, 6vw, 36px)/1.1 var(--serif); }
.approach-steps p { max-width: 34ch; color: var(--muted); }
.approach-steps li:nth-child(2) { transition-delay: .12s; } .approach-steps li:nth-child(3) { transition-delay: .24s; }
.approach-steps li:nth-child(4) { transition-delay: .36s; }
.contact-lead { max-width: 40ch; margin-top: 18px; font: 400 clamp(21px, 4vw, 25px)/1.45 var(--serif); color: var(--muted); }

/* Marquee */
.marquee { overflow: hidden; padding: 26px 0; background: var(--blush); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee-track span { padding: 0 28px; font: italic 400 clamp(26px, 5vw, 40px)/1 var(--serif); color: var(--clay); white-space: nowrap; }
.marquee-track span::after { content: "·"; margin-left: 56px; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Offer */
.offer { padding-bottom: clamp(113px, 10vw, 140px); }  /* room for the fade into the dark section */
/* The one kind of session: a short text and four facts */
.session { display: grid; gap: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.session-text h3 { font: 400 clamp(34px, 7vw, 52px)/1.05 var(--serif); margin-bottom: 14px; }
.session-text p { max-width: 46ch; color: var(--muted); margin-bottom: 22px; }
.session-facts { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.session-facts li { display: grid; gap: 2px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.session-facts strong { font: 400 clamp(24px, 4.5vw, 30px)/1.15 var(--serif); }
.session-facts span { color: var(--muted); font-size: 15px; }
/* Why only 1:1: Ania's three reasons */
.why { margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(32px, 5vw, 48px); border-top: 1px solid var(--line); }
.why-title { max-width: 18ch; margin: 0 0 16px; font: 400 clamp(30px, 6.5vw, 48px)/1.05 var(--serif); letter-spacing: -.01em; }
.why-lead { max-width: 60ch; margin: 0 0 30px; font: 400 clamp(18px, 3.2vw, 21px)/1.5 var(--serif); color: var(--muted); }
.why-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.why-list li { padding: 22px 24px; border-radius: 20px; background: rgba(245, 232, 223, .7); border: 1px solid var(--line); }
.why-list h4 { margin: 0 0 8px; font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--clay); }
.why-list p { margin: 0; color: var(--muted); font-size: 16px; }

/* Principles: a dark, sticky, scroll-driven section */
.principles { position: relative; height: 340vh; padding: 0; background: var(--brown); color: var(--cream); }
.principles::before, .principles::after { content: ""; position: absolute; left: 0; right: 0; height: 110px; pointer-events: none; z-index: 1; }
.principles::before { top: -110px; background: linear-gradient(180deg, rgba(37, 20, 12, 0), var(--brown)); }
.principles::after { bottom: -110px; background: linear-gradient(180deg, var(--brown), rgba(37, 20, 12, 0)); }
.principles-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: 38% 1fr; overflow: hidden; }
.principles-art { position: relative; overflow: hidden; }
.principles-art svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(var(--zoom, 1.12)); transition: transform .2s linear; }
.principles-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37, 20, 12, 0) 40%, var(--brown)); }
.principles-copy { padding: 22px var(--gutter) 34px; display: flex; flex-direction: column; }
.principles-copy .heading { font-size: clamp(30px, 7vw, 60px); margin-bottom: 18px; }
.steps { position: relative; flex: 1; margin: 0; padding: 0; list-style: none; }
.steps li { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.steps li.is-active { opacity: 1; transform: none; }
.steps span { font: italic 400 20px/1 var(--serif); color: var(--sand); }
.steps h3 { margin: 6px 0 8px; font: 400 clamp(36px, 8vw, 56px)/1 var(--serif); }
.steps p { max-width: 40ch; color: rgba(245, 232, 223, .82); }

/* Trainer */
.trainer { padding-top: clamp(113px, 10vw, 140px); display: grid; gap: 40px; background: linear-gradient(180deg, var(--blush), var(--blush) 80%, var(--cream)); }
.trainer-art { width: 85%; justify-self: center; }  /* Ania's photo, a little smaller than its column */
.trainer-text p { max-width: 46ch; color: var(--muted); }
.trainer-text .heading { margin-bottom: 24px; }
.trainer-text .pill { margin-top: 10px; }
.trainer-lead { font: 400 clamp(22px, 4.5vw, 28px)/1.3 var(--serif); color: var(--ink) !important; }
.trainer-invite { font: italic 400 24px/1.3 var(--serif); color: var(--clay) !important; }
.trainer-art img, .intro-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.intro-art img { object-position: 50% 50%; }
.has-photo svg, .has-photo figcaption { display: none; }

/* Quotes carousel */
.quotes { background: linear-gradient(180deg, var(--cream) 0px, color-mix(in srgb, var(--clay) 3%, var(--cream)) 10px, color-mix(in srgb, var(--clay) 10%, var(--cream)) 20px, color-mix(in srgb, var(--clay) 22%, var(--cream)) 30px, color-mix(in srgb, var(--clay) 35%, var(--cream)) 40px, color-mix(in srgb, var(--clay) 50%, var(--cream)) 50px, color-mix(in srgb, var(--clay) 65%, var(--cream)) 60px, color-mix(in srgb, var(--clay) 78%, var(--cream)) 70px, color-mix(in srgb, var(--clay) 90%, var(--cream)) 80px, color-mix(in srgb, var(--clay) 97%, var(--cream)) 90px, var(--clay) 100px,
                                     var(--clay) calc(100% - 100px), color-mix(in srgb, var(--clay) 97%, var(--cream)) calc(100% - 90px), color-mix(in srgb, var(--clay) 90%, var(--cream)) calc(100% - 80px), color-mix(in srgb, var(--clay) 78%, var(--cream)) calc(100% - 70px), color-mix(in srgb, var(--clay) 65%, var(--cream)) calc(100% - 60px), color-mix(in srgb, var(--clay) 50%, var(--cream)) calc(100% - 50px), color-mix(in srgb, var(--clay) 35%, var(--cream)) calc(100% - 40px), color-mix(in srgb, var(--clay) 22%, var(--cream)) calc(100% - 30px), color-mix(in srgb, var(--clay) 10%, var(--cream)) calc(100% - 20px), color-mix(in srgb, var(--clay) 3%, var(--cream)) calc(100% - 10px), var(--cream) 100%);
          color: var(--cream); text-align: center; padding-top: clamp(93px, 8.7vw, 113px); padding-bottom: clamp(93px, 8.7vw, 113px); }
.quotes .eyebrow { color: rgba(245, 232, 223, .8); }
.quote-stage { display: grid; justify-items: center; max-width: 920px; margin: 0 auto; }
.quote-count { margin: 4px 0 26px; font-size: 14px; color: rgba(245, 232, 223, .75); }
.quote { grid-area: 3 / 1; margin: 0; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.quote.is-active { opacity: 1; transform: none; pointer-events: auto; }
.quote p { margin: 0; font: italic 400 clamp(26px, 5.5vw, 46px)/1.25 var(--serif); }
.quote-source { grid-area: 4 / 1; margin: 26px 0 0; font-size: 13px; color: rgba(245, 232, 223, .75); }
.quote-controls { grid-area: 5 / 1; display: flex; gap: 12px; margin-top: 26px; }

/* Quiz */
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Booking */
.booking { background: linear-gradient(180deg, var(--cream), var(--blush) 160px, var(--blush) calc(100% - 160px), var(--cream)); }
.type-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.type-filter button { border: 0; background: none; color: var(--clay); text-decoration: underline; cursor: pointer; font: inherit; padding: 8px 0; }
/* Booking calendar: a month of days (a clay dot = free places), then the free times of the chosen day */
.planner { display: grid; gap: 22px; margin-bottom: 44px; }
.calendar { align-self: start; padding: clamp(18px, 4vw, 26px); border-radius: 24px; background: var(--cream); border: 1px solid var(--line); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.calendar-title { margin: 0; font: 400 28px/1.1 var(--serif); }
.calendar-title::first-letter, .day-title::first-letter { text-transform: uppercase; }
.calendar .round-button { width: 42px; height: 42px; border-color: var(--line); color: var(--brown); font-size: 18px; }
.calendar .round-button:hover:not(:disabled) { background: var(--blush); }
.calendar .round-button:disabled { opacity: .3; cursor: default; }
.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendar-week span { font: 600 11px/2.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.calendar-day { position: relative; justify-self: center; width: 100%; max-width: 46px; aspect-ratio: 1; padding: 0; border: 1px solid transparent;
                border-radius: 50%; background: none; color: rgba(44, 27, 18, .3); font: 400 16px/1 var(--sans); cursor: default;
                transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.calendar-day.has-free { color: var(--ink); cursor: pointer; }
.calendar-day.has-free::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px;
                                border-radius: 50%; background: var(--clay); }
.calendar-day.has-free:hover { border-color: var(--clay); }
.calendar-day.is-today { border-color: var(--sand); }
.calendar-day.is-selected { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.calendar-day.is-selected::after { background: var(--sand); }
.calendar-legend { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); }
.day-slots { display: grid; gap: 10px; align-content: start; }
.day-title { margin: 4px 0 6px; font: 400 clamp(24px, 4vw, 30px)/1.15 var(--serif); }
.day-slots .empty a { color: var(--clay); }
.chosen { margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(227, 201, 184, .4); color: var(--muted); font-size: 15px;
          transition: background-color .5s var(--ease), color .5s var(--ease); }
.chosen.is-set { background: var(--brown); color: var(--cream); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* the honeypot field bots fill in */
.class-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: center; padding: 18px; border-radius: 18px;
              background: var(--cream); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.class-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(37, 20, 12, .5); }
.class-time { grid-row: 1 / span 2; font: 400 30px/1 var(--serif); }
.class-name { margin: 0; font: 400 24px/1.1 var(--serif); }
.class-meta { grid-column: 2; font-size: 14px; color: var(--muted); }
.class-places { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px;
                padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.class-places button { min-height: 40px; padding: 0 16px; border: 1px solid var(--brown); border-radius: var(--radius); background: transparent;
                       color: var(--brown); font: 500 14px/1 var(--sans); cursor: pointer; }
.class-places button:hover { background: var(--brown); color: var(--cream); }
.class-card.is-full { opacity: .55; }
.class-card.is-full .class-places strong { color: var(--clay); }
.class-card.is-chosen { border-color: var(--brown); box-shadow: inset 0 0 0 1px var(--brown); }
.empty { padding: 18px; color: var(--muted); }
.booking-form { display: grid; gap: 14px; max-width: 560px; padding: clamp(22px, 5vw, 40px); border-radius: 24px; background: var(--cream); border: 1px solid var(--line); }
.booking-form h3 { font: 400 32px/1.1 var(--serif); margin-bottom: 4px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.optional { font-weight: 400; color: var(--muted); }
input[type="text"], input[type="tel"], input[type="email"], select {
  width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid rgba(37, 20, 12, .28); border-radius: 12px;
  background: #fffaf6; color: var(--ink); font: 400 16px/1.3 var(--sans); }
input:focus, select:focus { outline: 2px solid var(--clay); outline-offset: 1px; border-color: transparent; }
.pay-choice { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.pay-choice legend { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.pay-choice label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 46px; padding: 8px 14px;
                    border: 1px solid var(--line); border-radius: 14px; background: #fffaf6; font-size: 15px; cursor: pointer; }
.pay-choice label:has(input:checked) { border-color: var(--brown); box-shadow: inset 0 0 0 1px var(--brown); }
.pay-choice input { accent-color: var(--clay); width: 18px; height: 18px; margin: 0; }
.blik-row { display: flex; align-items: center; gap: 14px; }
.blik-field input { width: 168px; min-height: 50px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fffaf6;
                    font: 600 22px/1 var(--sans); letter-spacing: .18em; text-align: center; }   /* sized to the six digits, boxed like the payment choices */
.blik-badge { height: 44px; width: auto; flex: none; }
.test-note { font-size: 13px; color: var(--clay); }
.pay-now .pay-state { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 16px; color: var(--cream); }
.pay-now .spinner { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(245, 232, 223, .3);
                    border-top-color: var(--cream); animation: spin 1s linear infinite; }
.pay-now .retry { display: grid; gap: 10px; margin-top: 12px; }
.pay-now .retry input { min-height: 46px; border-radius: 12px; border: 0; padding: 0 14px; font: 600 20px var(--sans); letter-spacing: .16em; max-width: 200px; }
.pay-now .retry-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-now .retry-buttons button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--cream); background: var(--cream);
                                 color: var(--brown); font: 600 14px var(--sans); cursor: pointer; }
.pay-now .retry-buttons button.ghost { background: transparent; color: var(--cream); }
@keyframes spin { to { transform: rotate(360deg); } }
.buy-form { display: grid; gap: 14px; margin-top: 18px; }
.buy-lead { color: var(--ink); }
.pass-field input { font: 600 22px/1 var(--sans); letter-spacing: .18em; max-width: 220px; }
.pay-now .pass-number-label { margin: 10px 0 2px; font: 600 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
                              color: rgba(245, 232, 223, .75); }
.pay-now .pass-number { margin: 0 0 10px; font: 400 44px/1 var(--serif); letter-spacing: .08em; color: var(--cream); }
.pay-now .after { margin-top: 12px; }
.pay-now .after button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--cream); background: var(--cream);
                         color: var(--brown); font: 600 14px var(--sans); cursor: pointer; }
.pay-now { padding: 16px 18px; border-radius: 16px; background: var(--brown); color: var(--cream); font-size: 15px; }
.pay-now h4 { margin: 0 0 8px; font: 400 22px/1.2 var(--serif); }
.pay-now ol { margin: 0 0 8px; padding-left: 20px; }
.pay-now strong { color: var(--cream); letter-spacing: .02em; }
.pay-now p { margin: 0; color: rgba(245, 232, 223, .8); font-size: 14px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--clay); }
.form-message { min-height: 1.5em; margin: 0; font-size: 15px; }
.form-message.is-error { color: #9b2c1c; }
.form-message.is-ok { color: var(--brown); font-weight: 600; }

/* Passes */
.pass-list { display: grid; gap: 14px; }
.pass { display: grid; gap: 6px; grid-template-rows: auto auto 1fr auto; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: #fbf4ef; }
.pass h3 { font: 400 26px/1.1 var(--serif); }
.pass .price { margin: 6px 0 2px; font: 400 52px/1 var(--serif); }
.pass p { color: var(--muted); }
.pass .pill { justify-self: start; align-self: end; margin-top: 8px; }
.pass--dark { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.pass--dark p { color: rgba(245, 232, 223, .8); }
.pass--dark .price { color: var(--cream); }
.pay-note { margin: 22px 0 0; color: var(--muted); font-size: 15px; }

/* FAQ */
.faq-list { max-width: 900px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none;
               font: 400 clamp(22px, 4.5vw, 30px)/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 28px/1 var(--sans); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 62ch; padding-bottom: 22px; color: var(--muted); }
.faq-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: -8px; padding-bottom: 24px; font-size: 15px; color: var(--muted); }

/* Contact */
.contact { background: linear-gradient(180deg, var(--cream), var(--blush) 160px); }
.contact address { margin: 26px 0 18px; font: normal 400 22px/1.5 var(--serif); }
.big-link { font: 400 clamp(40px, 10vw, 80px)/1 var(--serif); text-decoration: none; }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.studio-notes { max-width: 52ch; margin: 0 0 6px; padding: 0; list-style: none; }
.studio-notes li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.studio-notes strong { color: var(--ink); font-weight: 600; }

/* Footer */
/* The footer shares the menu panel's warm layered brown and faint arch, so the page ends like the studio in the evening. */
.footer-logo { display: block; width: min(100%, 440px); height: auto; margin-bottom: 10px; }
.site-footer { position: relative; overflow: hidden; padding: clamp(64px, 10vw, 120px) var(--gutter) calc(14px + env(safe-area-inset-bottom));
               color: var(--cream); background:
    radial-gradient(70% 90% at 12% 0%, rgba(138, 90, 60, .42), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(12, 6, 3, .55), transparent 70%),
    linear-gradient(165deg, #3a2217, #25140c 55%, #1c0f08); }
.site-footer::before { content: ""; position: absolute; right: clamp(-120px, -6vw, -60px); top: 70px; width: clamp(260px, 30vw, 420px);
                       height: 140%; pointer-events: none; border: 1px solid rgba(245, 232, 223, .08); border-radius: 210px 210px 0 0; }
.site-footer > * { position: relative; }
.footer-top { display: grid; gap: 34px; }
.footer-line { margin: 0; font: 400 clamp(38px, 9vw, 76px)/1.02 var(--serif); }
.footer-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 36px; }
.footer-nav a, .footer-contact a { text-decoration: none; color: rgba(245, 232, 223, .85); }
.footer-nav a:hover, .footer-contact a:hover { color: var(--cream); text-decoration: underline; }
.footer-contact { margin: 0; color: rgba(245, 232, 223, .7); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 54px; padding: 20px 0;
                 border-top: 1px solid rgba(245, 232, 223, .18); font-size: 13px; color: rgba(245, 232, 223, .6); }
.footer-bottom a { color: inherit; }
.admin-link { transition: color .4s var(--ease); }   /* same line, size and underline as Regulamin · Polityka prywatności */
.admin-link:hover { color: var(--cream); }
/* The language switch in the header: PL / EN in the header's own colour (cream over the hero, brown on the light bar) */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 2px; box-sizing: border-box;   /* as tall as the "Menu" text */
               border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; }
.lang-switch > * { display: inline-flex; align-items: center; height: 16px; padding: 0 7px; border-radius: 999px; font: 600 11px/1 var(--sans);
                   letter-spacing: .08em; text-transform: uppercase;
                   color: inherit; opacity: .78;
                   text-decoration: none; transition: background-color .5s var(--ease), color .5s var(--ease); }
.lang-switch [aria-current] { background: color-mix(in srgb, currentColor 16%, transparent); opacity: 1; }
.lang-switch a:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
@media (max-width: 480px) { .lang-switch [aria-current] { display: none; } }   /* a small phone shows only the other language */

/* Slide-in panels */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(37, 20, 12, .32); opacity: 0;
         backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); transition: opacity .7s var(--drift) .1s; }
.scrim.is-open { opacity: 1; transition: opacity 1s var(--glide); }
.panel { position: fixed; inset: 0 0 0 auto; z-index: 50; width: min(100%, 440px); display: flex; flex-direction: column;
         padding: 22px clamp(24px, 6vw, 44px) 30px; background: var(--brown); color: var(--cream); overflow-y: auto; overflow-x: hidden;
         transform: translateX(100%); visibility: hidden; will-change: transform;
         transition: transform .75s var(--drift) .12s, visibility 0s linear .9s; }
.panel.is-open { transform: none; visibility: visible; transition: transform 1.1s var(--glide), visibility 0s; }
/* The menu panel: warm layered brown, a soft clay light and one faint arch, like the studio in the evening. */
.panel--menu { background:
    radial-gradient(120% 70% at 15% 0%, rgba(138, 90, 60, .42), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(12, 6, 3, .55), transparent 70%),
    linear-gradient(165deg, #3a2217, #25140c 55%, #1c0f08); }
.panel--menu::before { content: ""; position: absolute; right: -80px; top: 90px; width: 330px; height: 520px; pointer-events: none;
                       border: 1px solid rgba(245, 232, 223, .08); border-radius: 165px 165px 0 0; }
.panel--light { background: var(--cream); color: var(--ink); }
.panel-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.panel-mark { width: 34px; height: 34px; color: var(--cream); --logo-accent: #e3c9b8; }
.panel-close { display: inline-flex; align-items: center; gap: 12px; align-self: flex-end; min-height: 44px; padding: 0 2px; border: 0;
               background: none; color: inherit; font: 500 14px/1 var(--sans); letter-spacing: .04em; cursor: pointer; }
.panel--light .panel-close { text-decoration: underline; text-underline-offset: 4px; }
.close-x { position: relative; width: 18px; height: 18px; }
.close-x::before, .close-x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor;
                                    transition: transform .6s var(--ease); }
.close-x::before { transform: rotate(45deg); } .close-x::after { transform: rotate(-45deg); }
.panel :focus-visible { outline: 1px solid rgba(245, 232, 223, .55); outline-offset: 4px; }
.panel--light :focus-visible { outline-color: var(--clay); }
.panel:focus { outline: none; }
.panel-close:hover .close-x::before { transform: rotate(135deg); } .panel-close:hover .close-x::after { transform: rotate(45deg); }
.panel-nav { position: relative; display: grid; margin-top: clamp(28px, 7vh, 56px); border-top: 1px solid rgba(245, 232, 223, .1); }
.panel-nav a { display: flex; align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(245, 232, 223, .1);
               text-decoration: none; opacity: 0; transform: translateX(28px); transition: opacity .3s ease, transform .4s var(--drift); }
.panel.is-open .panel-nav a { transition: opacity 1s var(--glide), transform 1.1s var(--glide); }
.panel-link { font: 400 clamp(23px, 6vw, 28px)/1.2 var(--serif); letter-spacing: .005em; transition: transform .5s var(--ease); }
.panel-nav a:hover .panel-link, .panel-nav a:focus-visible .panel-link { font-style: italic; transform: translateX(6px); }
.panel.is-open .panel-nav a { opacity: 1; transform: none; }
.panel.is-open .panel-nav a:nth-child(1) { transition-delay: .22s; } .panel.is-open .panel-nav a:nth-child(2) { transition-delay: .28s; }
.panel.is-open .panel-nav a:nth-child(3) { transition-delay: .34s; } .panel.is-open .panel-nav a:nth-child(4) { transition-delay: .4s; }
.panel.is-open .panel-nav a:nth-child(5) { transition-delay: .46s; } .panel.is-open .panel-nav a:nth-child(6) { transition-delay: .52s; }
.panel.is-open .panel-nav a:nth-child(7) { transition-delay: .58s; } .panel.is-open .panel-nav a:nth-child(8) { transition-delay: .64s; }
.panel.is-open .panel-nav a:nth-child(9) { transition-delay: .7s; }
/* The rest of the panel follows the links in the same slow wave, and leaves first when it closes. */
.panel-top, .panel-invite, .panel-foot { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .4s var(--drift); }
.panel.is-open .panel-top { opacity: 1; transform: none; transition: opacity .9s var(--glide) .15s, transform 1s var(--glide) .15s; }
.panel.is-open .panel-invite { opacity: 1; transform: none; transition: opacity 1s var(--glide) .7s, transform 1.1s var(--glide) .7s; }
.panel.is-open .panel-foot { opacity: 1; transform: none; transition: opacity 1s var(--glide) .8s, transform 1.1s var(--glide) .8s; }
.panel-invite { position: relative; margin-top: 30px; }
.panel-invite p { max-width: 30ch; margin-bottom: 16px; font: italic 400 19px/1.45 var(--serif); color: rgba(245, 232, 223, .82); }
.panel-foot { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: auto 0 0; padding-top: 30px; }
.panel-foot dt { margin-bottom: 4px; font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(227, 201, 184, .6); }
.panel-foot dd { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(245, 232, 223, .85); }
.panel-foot a { text-decoration: none; }
.panel-foot a:hover { text-decoration: underline; }
.panel--light { background: var(--cream); color: var(--ink); }
/* The registration card: the question (a small centred dialog) and the form (a sheet over the page) */
.ask, .sheet { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 20px; background: rgba(37, 20, 12, .45);
               backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .6s var(--glide); }
.ask.is-open, .sheet.is-open { opacity: 1; }
.ask-box { width: min(100%, 520px); padding: clamp(28px, 5vw, 44px); border-radius: 28px; background: var(--cream); color: var(--ink);
           text-align: center; box-shadow: 0 50px 100px -40px rgba(37, 20, 12, .6); transform: translateY(18px) scale(.97);
           transition: transform .8s var(--glide); }
.ask.is-open .ask-box { transform: none; }
.ask-mark { width: 54px; height: 54px; margin-bottom: 12px; color: var(--clay); --logo-accent: var(--clay); }
.heading--ask { font-size: clamp(26px, 5vw, 34px); margin-bottom: 12px; }
.ask-box p, .card-thanks p { color: var(--muted); }
.ask-buttons { display: grid; gap: 10px; margin-top: 22px; }
.sheet { align-items: start; overflow-y: auto; padding: clamp(12px, 3vw, 40px) 12px; }
.sheet-box { position: relative; width: min(100%, 760px); margin: 0 auto; padding: clamp(22px, 5vw, 48px); border-radius: 28px;
             background: var(--cream); color: var(--ink); transform: translateY(24px); transition: transform .9s var(--glide); }
.sheet.is-open .sheet-box { transform: none; }
.sheet-box .panel-close { position: absolute; top: 18px; right: 22px; text-decoration: underline; text-underline-offset: 4px; }
.sheet-logo { display: block; width: min(100%, 300px); height: auto; margin-bottom: 22px; }
.card-form { display: grid; gap: 28px; margin-top: 26px; }
.card-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.card-form legend { padding: 0; margin: 0 0 12px; font: 400 clamp(22px, 4vw, 26px)/1.2 var(--serif); }
.card-form .fields { display: grid; gap: 12px; }
.group-title { margin: 14px 0 8px; font: 600 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }
.ticks { display: grid; gap: 8px; }
.tick { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 14px; background: rgba(251, 244, 239, .9);
        border: 1px solid var(--line); cursor: pointer; font-size: 15px; color: var(--ink); transition: border-color .3s, background-color .3s; }
.tick:has(input:checked) { border-color: var(--clay); background: rgba(227, 201, 184, .45); }
.tick input { margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--clay); }
.tick .inline-field { margin-left: auto; width: 96px; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line);
                      background: #fff; font: inherit; }
.card-form textarea { width: 100%; min-height: 96px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fbf4ef;
                      font: inherit; resize: vertical; }
.card-form textarea:focus { outline: 2px solid var(--clay); outline-offset: 1px; border-color: transparent; }
.yesno { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.yesno > span { flex: 1 1 240px; }
.yesno label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.yesno input { accent-color: var(--clay); width: 17px; height: 17px; }
.statements { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 14px; }
.statements li { margin-bottom: 8px; }
.rodo { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.card-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.card-thanks { text-align: center; padding: 30px 0 10px; }
.card-thanks .pill { margin-top: 18px; }
@media (min-width: 720px) {
  .ticks { grid-template-columns: 1fr 1fr; }
  .ask-buttons { grid-template-columns: 1fr 1fr; }
  .card-form .fields--2 { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ask-box, .sheet-box { transform: none; } }

/* Document panels (the rules, the privacy policy): wider, plain reading */
.panel--doc { width: min(100%, 680px); padding-bottom: 60px; }
.doc-body { margin-top: 26px; max-width: 60ch; }
.heading--doc { font-size: clamp(32px, 6vw, 46px); margin-bottom: 16px; }
.doc-lead { font: 400 18px/1.55 var(--serif); color: var(--ink); }
.doc-body h3 { margin: 30px 0 10px; font: 400 clamp(22px, 4vw, 26px)/1.2 var(--serif); }
.doc-body p, .doc-body li { color: var(--muted); font-size: 15px; line-height: 1.6; }
.doc-body ul { margin: 0 0 12px; padding-left: 20px; }
.doc-body li { margin-bottom: 8px; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--clay); }
.doc-quote { margin: 30px 0 0; padding: 20px 22px; border-left: 2px solid var(--clay); font: italic 400 19px/1.45 var(--serif) !important; color: var(--ink) !important; }
.doc-quote span { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--clay); }
.doc-meta { margin-top: 24px; font-size: 13px !important; color: var(--muted); }
.details-body { margin-top: 30px; }
.details-body .heading { margin-bottom: 18px; }
.details-body p { color: var(--muted); }
body.has-panel { overflow: hidden; }

/* Wider screens */
@media (min-width: 720px) {
  .header-book { display: inline-flex; }
  .menu-label { display: inline; }
  .intro-grid { grid-template-columns: 1.1fr .9fr; align-items: start; gap: 72px; }
  .principles-sticky { grid-template-rows: none; grid-template-columns: 1.15fr 1fr; }
  /* the light sections dissolve straight into the scene and the scene straight into the next section: the fades sit inside
     the section, over the panel's first and last pixels, so no solid brown ever meets the scene's light wall or floor */
  .principles::before, .principles::after { height: clamp(140px, 22svh, 280px); }
  .principles::before { top: 0; background: linear-gradient(180deg, var(--cream) 0%, rgba(245, 232, 223, .96) 10%, rgba(245, 232, 223, .82) 26%, rgba(245, 232, 223, .55) 48%,
                                                            rgba(245, 232, 223, .25) 70%, rgba(245, 232, 223, .07) 88%, rgba(245, 232, 223, 0) 100%); }
  .principles::after { bottom: 0; background: linear-gradient(0deg, var(--blush) 0%, rgba(236, 216, 202, .96) 10%, rgba(236, 216, 202, .82) 26%, rgba(236, 216, 202, .55) 48%,
                                                            rgba(236, 216, 202, .25) 70%, rgba(236, 216, 202, .07) 88%, rgba(236, 216, 202, 0) 100%); }
  /* the scene runs on under the copy column's empty gutter, so its fade into the brown is long and eased and ends before the text */
  .principles-art { margin-right: calc(-1 * min(260px, var(--gutter))); }
  .principles-art::after { background: linear-gradient(90deg, rgba(37, 20, 12, 0) 45%, rgba(37, 20, 12, .05) 55%, rgba(37, 20, 12, .15) 64%, rgba(37, 20, 12, .32) 72%,
                                                       rgba(37, 20, 12, .55) 80%, rgba(37, 20, 12, .78) 88%, rgba(37, 20, 12, .93) 95%, var(--brown) 100%); }
  .principles-copy { position: relative; }
  .principles-copy { justify-content: center; padding: 60px var(--gutter); }
  .steps { flex: 0 0 240px; }
  .trainer { grid-template-columns: .85fr 1.15fr; align-items: start; gap: 80px; }
  .trainer-art { position: sticky; top: 110px; width: 100%; max-width: 440px; }   /* shorter than the screen, so it stays while the text scrolls */
  .source-grid { grid-template-columns: .8fr 1.2fr; align-items: start; gap: 80px; }
  .certificate { position: sticky; top: 110px; width: 100%; max-width: 380px; }
  .planner { grid-template-columns: minmax(300px, 380px) 1fr; align-items: start; gap: 28px; }
  .pass-list { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
  .footer-logo { margin-top: -6px; }
}
@media (min-width: 1040px) {
  .approach-steps { grid-template-columns: repeat(4, 1fr); gap: 36px; padding: 34px 0 0; }
  .approach-steps::before { left: 6px; right: 6px; top: 0; bottom: auto; width: auto; height: 1px; }
  .approach-steps li::before { left: 0; top: -39px; }
  /* The form sits beside the calendar only when both have room. */
  .booking { display: grid; grid-template-columns: 1fr minmax(340px, 420px); gap: 0 48px; align-items: start; }
  .booking .section-head, .booking .type-filter { grid-column: 1 / -1; }
  .booking .planner { grid-column: 1; margin-bottom: 0; grid-template-columns: 1fr; }
  .booking .booking-form { grid-column: 2; position: sticky; top: 110px; }
  .pass-list { grid-template-columns: repeat(4, 1fr); }
  .pass-list--two { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
  .session { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .why-list { grid-template-columns: repeat(3, 1fr); }
}

/* Full-screen monitors: the side gutter grows so every section's content sits in one centred column of 1280 px
   (backgrounds still run edge to edge); the header, the footer and the grids follow the same column. */
@media (min-width: 1440px) {
  :root { --gutter: calc((100vw - 1280px) / 2); }
}
@media (min-width: 1280px) {
  .booking .planner { grid-template-columns: minmax(300px, 360px) 1fr; }
  /* the closing section is symmetric: text, address and buttons centred */
  .contact-text { max-width: 720px; margin: 0 auto; text-align: center; }
  .contact-lead, .studio-notes { margin-left: auto; margin-right: auto; }
  .contact-buttons { justify-content: center; }
  /* The lower text sections (prices, questions) would hug the left edge of a wide screen: one centred column instead */
  .passes > *, .faq > *, .contact > * { max-width: 960px; margin-left: auto; margin-right: auto; }
  .contact .heading { font-size: clamp(30px, 5.5vw, 56px); }
  .passes .section-head, .faq .section-head { max-width: 960px; }
  .pass-list--two { max-width: 960px; }
  .passes .heading, .faq .heading { font-size: clamp(30px, 5.5vw, 56px); }
  .faq summary { font-size: clamp(20px, 2.2vw, 24px); }
  .pass .price { font-size: 46px; }
  .pass h3 { font-size: 24px; }
}

/* Motion off when asked for: content stays, animation stops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-glow { opacity: .8; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .reveal, .line > span, .panel-nav a, .panel-top, .panel-invite, .panel-foot { opacity: 1; transform: none; }
  .statement .word { color: var(--brown); }
  .principles { height: auto; }
  .principles-sticky { position: relative; height: auto; }
  .steps li { position: relative; opacity: 1; transform: none; margin-bottom: 22px; }
}

/* The cancel-link page: one calm card */
.cancel-page { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 28px;
               padding: 40px var(--gutter); background: radial-gradient(70% 50% at 50% 30%, var(--blush), var(--cream) 70%); }
.cancel-home { display: inline-flex; align-items: center; gap: 10px; color: var(--brown); text-decoration: none; font: 400 26px/1 var(--serif); }
.cancel-home img { width: min(100%, 320px); height: auto; }
.cancel-card { width: min(100%, 560px); padding: clamp(26px, 6vw, 44px); border-radius: 28px; background: #fbf4ef; border: 1px solid var(--line);
               box-shadow: 0 40px 80px -60px rgba(37, 20, 12, .5); }
.cancel-card .heading { font-size: clamp(32px, 7vw, 44px); margin-bottom: 14px; }
.cancel-text { color: var(--muted); font-size: 17px; }
.cancel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }