/* ==========================================================================
   Total Beauty Club NL — site.css
   Public site + shared components. No build step, no external requests.
   Reference: /assets/COMPONENTS.md · Styleguide: design/styleguide.html
   Breakpoints (mobile-first): 600 · 768 · 1024 · 1200 · 1440
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts (local, OFL — see ../fonts/OFL.txt)
   -------------------------------------------------------------------------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400.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: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600.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: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-cyrillic-800.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-ext-800.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800.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; }
/* Handwritten accent — Bad Script (thin monoline, Cyrillic) */
@font-face { font-family: "Bad Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bad-script-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Bad Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bad-script-latin-400.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; }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand (sampled from materials/brand/brand-colors-and-font.png) */
  --c-lime: #BAC545;
  --c-blue: #6A88A4;
  --c-black: #000000;
  --c-white: #FFFFFF;

  /* Brand tints & AA text variants (see design/tools/contrast.py) */
  --c-lime-600: #A6B13A;      /* hover of lime fills */
  --c-lime-200: #DFE5AC;      /* soft lime surface (donations, Тіло) */
  --c-lime-100: #F1F3DA;      /* pale lime surface */
  --c-lime-ink: #5C6218;      /* lime for TEXT: 5.4–6.5:1 on light grounds */
  --c-blue-200: #C8D4E0;
  --c-blue-100: #E8EDF2;
  --c-blue-ink: #4E6880;      /* blue for TEXT & links: 4.8–5.8:1 */
  --c-blue-deep: #3F566B;     /* hover of blue-ink */

  /* Neutrals (warm, from the current site) */
  --c-ink: #171717;
  --c-ink-2: #3D3B36;
  --c-muted: #67625A;
  --c-cream: #F7F1E6;
  --c-sand: #F0EAD8;
  --c-line: #E4DBC8;
  --c-line-strong: #CFC4AE;
  --c-field-border: #8C8578;

  /* Semantic */
  --c-success: #2E6B35;  --c-success-bg: #E4F0E1;
  --c-warning: #855400;  --c-warning-bg: #FBEFD4;
  --c-danger: #B3261E;   --c-danger-bg: #FCE8E6;
  --c-info: #4E6880;     --c-info-bg: #E8EDF2;

  /* Roles */
  --bg: var(--c-cream);
  --surface: var(--c-white);
  --surface-alt: var(--c-sand);
  --text: var(--c-ink);
  --text-2: var(--c-ink-2);
  --text-muted: var(--c-muted);
  --link: var(--c-blue-ink);
  --link-hover: var(--c-blue-deep);
  --focus: var(--c-blue-ink);
  --selection: var(--c-lime-200);

  /* Typography */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-script: "Bad Script", "Segoe Script", "Apple Chancery", cursive;

  --fs-2xs: 0.75rem;                                        /* 12 — legal fine print only */
  --fs-xs: 0.8125rem;                                       /* 13 — eyebrow, badges */
  --fs-sm: 0.9375rem;                                       /* 15 — meta, hints */
  --fs-base: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);  /* 17 → 18 */
  --fs-lg: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);     /* 19 → 22 lead */
  --fs-h4: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);         /* 20 → 24 */
  --fs-h3: clamp(1.5rem, 1.33rem + 0.75vw, 2rem);           /* 24 → 32 */
  --fs-h2: clamp(2rem, 1.55rem + 2vw, 3.25rem);             /* 32 → 52 */
  --fs-h1: clamp(2.25rem, 1.6rem + 2.9vw, 4.25rem);         /* 36 → 68 */
  --fs-display: clamp(2.75rem, 1.7rem + 4.7vw, 6rem);       /* 44 → 96 */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-base: 1.6;
  --ls-tight: -0.035em;
  --ls-caps: 0.16em;
  --ls-wide: 0.06em;

  /* Spacing (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;     --space-7: 3rem;     --space-8: 4rem;
  --space-9: 6rem;     --space-10: 8rem;
  --section-y: clamp(3.5rem, 2.2rem + 5.5vw, 7.5rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

  /* Layout */
  --container: 76rem;         /* 1216 */
  --container-wide: 86rem;    /* 1376 */
  --container-narrow: 48rem;  /* 768 — prose, forms */

  /* Radius */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 28px;  --r-2xl: 40px;  --r-pill: 999px;

  /* Shadows (warm) */
  --sh-1: 0 1px 2px rgb(56 44 20 / 0.06), 0 2px 8px rgb(56 44 20 / 0.05);
  --sh-2: 0 4px 12px rgb(56 44 20 / 0.06), 0 12px 32px rgb(56 44 20 / 0.08);
  --sh-3: 0 12px 24px rgb(40 32 16 / 0.08), 0 28px 64px rgb(40 32 16 / 0.14);
  --sh-header: 0 6px 16px rgb(40 32 16 / 0.06), 0 18px 40px rgb(40 32 16 / 0.10);

  /* Z-index */
  --z-base: 1;  --z-raised: 10;  --z-sticky: 50;  --z-header: 100;  --z-menu: 110;  --z-overlay: 200;  --z-skip: 1000;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 450ms;
  --marquee-dur: 70s;

  /* Header geometry (used by hero overlap) */
  --header-gap: 0.625rem;
  --header-h: 4.25rem;

  /* Icons */
  --icon-stroke: 1.6;

  color-scheme: light;
}
@media (min-width: 768px) {
  :root { --header-gap: 1rem; }
}
@media (min-width: 1024px) {
  :root { --header-gap: 1.25rem; --header-h: 4.75rem; }
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--header-gap) * 2); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
ul[class], ol[class] { list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { line-height: var(--lh-snug); text-wrap: balance; font-weight: 600; }
p, li, dd, blockquote { text-wrap: pretty; }
strong, b { font-weight: 600; }
small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--space-6) 0; }
address { font-style: normal; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--selection); color: var(--c-ink); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.icon {
  width: 1.5rem; height: 1.5rem; flex: none;
  stroke-width: var(--icon-stroke);
  vertical-align: middle;
}
.icon--sm { width: 1.125rem; height: 1.125rem; --icon-stroke: 1.8; }
.icon--lg { width: 2rem; height: 2rem; }
.icon--xl { width: 3rem; height: 3rem; --icon-stroke: 1.2; }
.icon--2xl { width: 4.5rem; height: 4.5rem; --icon-stroke: 1; }

/* Utilities */
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5); border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-white); font-weight: 600; text-decoration: none;
  transform: translateY(-200%); transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: none; color: var(--c-white); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }
.break-word { overflow-wrap: anywhere; }
/* Contact channels: the icon stays next to its text even when the value is long (V-contact 24.09). */
.contact-channel { display: flex; align-items: center; gap: var(--space-3); }
.contact-channel__text { min-width: 0; flex: 1; }
.contact-channel__value { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }
.contact-channel__value--long { font-size: var(--fs-base); overflow-wrap: anywhere; }
@media (max-width: 479px) { .contact-channel__value--long { font-size: var(--fs-xs); } }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.site { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* SITE_BANNER strip above the header (preview: "Тестова версія сайту — дані не справжні"). Scrolls away; header stays sticky. */
.site-banner { padding: 0.55rem var(--gutter); background: var(--c-ink); color: var(--c-white); text-align: center; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.site-banner p { max-width: var(--container); margin-inline: auto; }
.site-main { flex: 1 0 auto; }
/* <main tabindex="-1"> receives focus from the skip link and after closing a flash — no outline around the whole page. */
.site-main:focus { outline: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--white { background: var(--c-white); }
.section--sand { background: var(--c-sand); }
.section--lime { background: var(--c-lime-100); }
.section--rounded { border-radius: var(--r-2xl); margin-inline: clamp(0.5rem, 0.2rem + 1vw, 1rem); }

.section__head { display: grid; gap: var(--space-4); margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); max-width: 46rem; }
.section__head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section__head--split { max-width: none; }
@media (min-width: 768px) {
  .section__head--split { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--space-7); }
  .section__head--split > .section__action { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}

.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.stack--sm { --stack: var(--space-2); }
.stack--lg { --stack: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-3)); }
.cluster--lg { --cluster: var(--space-5); }
.cluster--center { justify-content: center; }

.grid { display: grid; gap: var(--grid-gap, clamp(1rem, 0.7rem + 1.2vw, 2rem)); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Top-aligned: the text column next to a long FAQ/form starts at the top instead of floating mid-height (U-36). */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.split--center { align-items: center; }
@media (min-width: 900px) { .split > .split__sticky { position: sticky; top: calc(var(--header-h) + var(--header-gap) * 2); } }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   4. Typography components
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75em;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.3;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-lime-ink);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--c-lime); flex: none; }
.eyebrow--plain::before { display: none; }
.eyebrow--blue { color: var(--c-blue-ink); }
.eyebrow--blue::before { background: var(--c-blue); }
.eyebrow--light { color: var(--c-lime); }

.title, .h1, .h2, .h3, .h4 { font-family: var(--font-sans); color: inherit; }
.h1 { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.h2, .title { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.02em; }
.h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.01em; }
.title--caps { font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.title--sm { font-size: var(--fs-h3); }

/* Handwritten accent word inside a heading: <span class="script">на вересень</span> */
.script {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.22em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-blue);          /* brand blue: large text only (3.3:1) */
  transform: rotate(-3deg);
  padding: 0 0.06em 0.14em;      /* room for long handwritten descenders */
}
.script--ink { color: var(--c-blue-ink); }
.script--lime { color: var(--c-lime); }  /* only on dark grounds */
.script--light { color: var(--c-white); }
.script--block { display: block; margin-top: 0.05em; }

.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-2); max-width: 40rem; }
.section__head--center .lead { margin-inline: auto; }

.prose { max-width: 42rem; color: var(--text-2); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin-top: 2em; }
.prose h3 { font-size: var(--fs-h4); font-weight: 600; color: var(--text); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose ul li::marker { color: var(--c-lime-ink); }
.prose blockquote { border-left: 3px solid var(--c-lime); padding-left: 1.2em; font-size: var(--fs-lg); color: var(--text); }

.check-list { display: grid; gap: var(--space-3); }
.check-list li { position: relative; padding-left: 2.1rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--c-lime-200);
}
/* V-26 (25.09, Walt: "галочки выглядят ненормально"): the tick was two CSS borders rotated -45°, which sat
   off-centre and looked heavy. Now a real SVG tick (rounded ends) centred in the circle via mask — colour = currentColor-free ink. */
.check-list li::after {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.35rem; height: 1.35rem;
  background: var(--c-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-ink); --btn-fg: var(--c-white); --btn-border: var(--btn-bg);
  --btn-bg-hover: var(--c-black); --btn-fg-hover: var(--btn-fg); --btn-border-hover: var(--btn-bg-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0.7em 1.6em;
  border: 1.5px solid var(--btn-border); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
  text-align: center; text-decoration: none; white-space: normal;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--btn-border-hover); text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-1); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .icon { width: 1.25em; height: 1.25em; --icon-stroke: 1.8; transition: transform var(--dur) var(--ease); }
.btn:hover .icon--move { transform: translateX(3px); }

.btn--primary { /* defaults */ }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-border: var(--c-ink); --btn-bg-hover: var(--c-ink); --btn-fg-hover: var(--c-white); --btn-border-hover: var(--c-ink); }
.btn--lime { --btn-bg: var(--c-lime); --btn-fg: var(--c-ink); --btn-border: var(--c-lime); --btn-bg-hover: var(--c-lime-600); --btn-border-hover: var(--c-lime-600); }
.btn--blue { --btn-bg: var(--c-blue-ink); --btn-fg: var(--c-white); --btn-bg-hover: var(--c-blue-deep); }
.btn--light { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); --btn-border: var(--c-white); --btn-bg-hover: var(--c-cream); --btn-border-hover: var(--c-cream); }
.btn--ghost-light { --btn-bg: rgb(255 255 255 / 0.08); --btn-fg: var(--c-white); --btn-border: rgb(255 255 255 / 0.85); --btn-bg-hover: var(--c-white); --btn-fg-hover: var(--c-ink); --btn-border-hover: var(--c-white); backdrop-filter: blur(6px); }
.btn--danger { --btn-bg: var(--c-danger); --btn-fg: var(--c-white); --btn-bg-hover: #8E1D17; }
.btn--danger-outline { --btn-bg: transparent; --btn-fg: var(--c-danger); --btn-border: var(--c-danger); --btn-bg-hover: var(--c-danger-bg); --btn-fg-hover: var(--c-danger); --btn-border-hover: var(--c-danger); }

/* 44 px touch target even for compact buttons (U-24; audience with little computer experience). */
.btn--sm { min-height: 2.75rem; padding: 0.5em 1.15em; font-size: 0.9375rem; }
.btn--lg { min-height: 3.75rem; padding: 0.8em 2em; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 3.25rem; }
.btn--icon.btn--sm { width: 2.75rem; }

.btn[disabled], .btn[aria-disabled="true"] {
  --btn-bg: var(--c-sand); --btn-fg: var(--c-muted); --btn-border: var(--c-line-strong);
  --btn-bg-hover: var(--c-sand); --btn-fg-hover: var(--c-muted); --btn-border-hover: var(--c-line-strong);
  cursor: not-allowed; transform: none; box-shadow: none;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; color: var(--c-ink); text-decoration: none;
  padding-block: 0.35em; border-bottom: 1.5px solid currentColor;
}
.link-arrow .icon { width: 1.2em; height: 1.2em; --icon-stroke: 1.8; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--c-ink); text-decoration: none; border-bottom-color: var(--c-lime); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow--light, .link-arrow--light:hover { color: var(--c-white); }
.link-arrow--quiet { border-bottom-color: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 479px) { .btn-row--stack-mobile > .btn { flex: 1 1 100%; } }

/* --------------------------------------------------------------------------
   6. Header (floating pill) + nav + language + mobile menu
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  padding: var(--header-gap) clamp(0.5rem, 0.2rem + 1vw, 1rem) 0;
  pointer-events: none;
}
.site-header__bar {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  max-width: var(--container-wide); height: var(--header-h); margin-inline: auto;
  /* Symmetric: Walt saw the pill as lopsided (left 22px vs right 8px). The logo file carries ~4.5% own
     transparent margin, which is the small optical extra the wordmark needs — no asymmetry in the CSS. */
  padding-inline: clamp(0.625rem, 0.4rem + 0.6vw, 0.875rem);
  background: rgb(255 255 255 / 0.94);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-header);
  backdrop-filter: saturate(1.4) blur(14px);
}
/* --control-h: shared height of the language switch, the account button and the burger, so they sit in one row */
.site-header__bar { --control-h: 3.125rem; }
/* The pill's corners are fully rounded, so a rectangular wordmark needs a bigger inset than the round
   buttons on the right — with the same inset its corner ran into the curve. The lockup's ink also sits
   low (the 'y' swash fills the upper third), hence the 2 px optical lift. Walt 17.09, third pass. */
.site-header__logo { display: block; flex: none; margin-right: auto; margin-left: 0.5rem; border-radius: var(--r-sm); transform: translateY(-2px); }
/* Scales with the pill: leaves the same air above and below the wordmark as around the round buttons */
.site-header__logo img { width: auto; height: calc(var(--header-h) * 0.82); }
.site-header__tools { display: flex; align-items: center; gap: var(--space-2); flex: none; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(0.25rem, -0.6rem + 1.4vw, 0.9rem); }
.nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.6rem;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; color: var(--c-ink); text-decoration: none;
  border-radius: var(--r-pill); white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.45rem; height: 2px; border-radius: 2px;
  background: var(--c-lime); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--c-ink); text-decoration: none; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__item--extra { display: none; }
@media (min-width: 900px) { .nav { display: block; margin-right: var(--space-2); } }
@media (min-width: 1200px) { .nav__item--extra { display: list-item; } }

/* Language switch UA / EN */
.lang { display: inline-flex; align-items: center; padding: 3px; border-radius: var(--r-pill); background: var(--c-cream); }
.site-header__tools > .lang { height: var(--control-h); display: none; }
@media (min-width: 600px) { .site-header__tools > .lang { display: inline-flex; } }
.lang__link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 100%; min-height: 2.5rem; padding: 0 0.55rem;
  border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; color: var(--c-muted); text-decoration: none;
}
.lang__link:hover { color: var(--c-ink); text-decoration: none; }
.lang__link[aria-current="true"] { background: var(--c-ink); color: var(--c-white); }
.lang--light { background: rgb(255 255 255 / 0.1); }
.lang--light .lang__link { color: rgb(255 255 255 / 0.8); }
.lang--light .lang__link:hover { color: var(--c-white); }
.lang--light .lang__link[aria-current="true"] { background: var(--c-lime); color: var(--c-ink); }

/* Account link */
/* Visible at every width (U-10): below 1280 px an icon-only 44×44 button with a visually hidden label. */
.site-header__account {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: var(--control-h); padding-inline: 1rem;
  border-radius: var(--r-pill); color: var(--c-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  border: 1.5px solid var(--c-line);
}
.site-header__account:hover { color: var(--c-ink); border-color: var(--c-ink); text-decoration: none; }
.site-header__account .icon { width: 1.25rem; height: 1.25rem; }
@media (max-width: 1279px) {
  .site-header__account { width: var(--control-h); padding-inline: 0; }
  .site-header__account-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Burger menu: <details class="menu"> — works without JS */
.menu { position: static; }
.menu__toggle {
  display: inline-flex; align-items: center; gap: 0.55rem; height: var(--control-h); padding-inline: 1rem;
  border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-white);
  font-size: 0.9375rem; font-weight: 600; list-style: none; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--dur) var(--ease);
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu__toggle::marker { content: ""; }
.menu__toggle:hover { background: var(--c-black); }
.menu__label { line-height: 1; }
@media (max-width: 599px) {
  /* no room for the word: three lines only, square, same height as the other controls */
  .menu__toggle { width: var(--control-h); padding-inline: 0; justify-content: center; gap: 0; }
  .menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.menu__bars { position: relative; width: 1.125rem; height: 0.75rem; flex: none; }
.menu__bars::before, .menu__bars::after, .menu__bars span {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur) var(--ease);
}
.menu__bars::before { top: 0; }
.menu__bars span { top: calc(50% - 1px); }
.menu__bars::after { top: calc(100% - 2px); }
.menu[open] .menu__bars::before { top: calc(50% - 1px); transform: rotate(45deg); }
.menu[open] .menu__bars span { opacity: 0; }
.menu[open] .menu__bars::after { top: calc(50% - 1px); transform: rotate(-45deg); }
.menu[open] .menu__toggle { background: var(--c-lime); color: var(--c-ink); }

.menu__panel {
  position: absolute; z-index: var(--z-menu);
  top: calc(100% + 0.5rem); left: 0; right: 0;
  max-height: calc(100vh - var(--header-h) - var(--header-gap) - 1.5rem); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-3);
  background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  transform-origin: top right;
}
.menu:not([open]) .menu__panel { display: none; }
.menu[open] .menu__panel { animation: menu-in var(--dur) var(--ease) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (min-width: 600px) { .menu__panel { left: auto; width: 23rem; } }
@media (min-width: 1200px) { .menu { display: none; } }

.menu__list { display: grid; }
.menu__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 3.5rem; padding: 0 var(--space-4); border-radius: var(--r-md);
  font-size: 1.125rem; font-weight: 600; color: var(--c-ink); text-decoration: none;
}
.menu__link .icon { width: 1.25rem; height: 1.25rem; color: var(--c-muted); transition: transform var(--dur) var(--ease); }
.menu__link:hover { background: var(--c-cream); color: var(--c-ink); text-decoration: none; }
.menu__link:hover .icon { transform: translateX(3px); color: var(--c-ink); }
.menu__link[aria-current="page"] { background: var(--c-lime-100); }
.menu__link[aria-current="page"]::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-lime); flex: none; margin-right: -0.25rem; order: -1; }
.menu__link[aria-current="page"] > span { margin-right: auto; }
.menu__footer { display: grid; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--c-line); }
.menu__footer .lang { justify-self: stretch; padding: 4px; }
/* language switch inside the menu: two large targets; hidden where the header already shows it */
.lang--in-menu { display: inline-flex; }
.lang--in-menu .lang__link { flex: 1 1 0; min-height: 3rem; font-size: 0.9375rem; }
@media (min-width: 600px) { .menu__footer .lang--in-menu { display: none; } }

/* --------------------------------------------------------------------------
   7. Hero with background video
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(36rem, 92vh, 56rem);
  margin: calc(-1 * (var(--header-h) + var(--header-gap))) clamp(0.5rem, 0.2rem + 1vw, 1rem) 0;
  padding: calc(var(--header-h) + var(--header-gap) + var(--space-7)) 0 var(--space-8);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  color: var(--c-white);
  background: var(--c-blue-ink);
}
@media (min-width: 768px) { .hero { border-radius: var(--r-2xl); margin-top: calc(0.5rem - var(--header-h) - var(--header-gap)); } }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { z-index: 1; }
.hero__media .ph { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; place-content: end; justify-items: end; padding: var(--space-6) var(--space-7); }
.hero__shade {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgb(12 14 16 / 0.42), transparent 75%),
    linear-gradient(180deg, rgb(12 14 16 / 0.38) 0%, rgb(12 14 16 / 0.18) 35%, rgb(12 14 16 / 0.28) 65%, rgb(12 14 16 / 0.62) 100%);
}
.hero__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-6); }
.hero__title { display: grid; justify-items: center; gap: var(--space-5); margin: 0; font-weight: 400; }
.hero__logo { width: clamp(15rem, 10rem + 22vw, 27rem); height: auto; filter: drop-shadow(0 4px 24px rgb(0 0 0 / 0.25)); }
.hero__slogan {
  display: block; max-width: 38rem;
  font-size: clamp(1rem, 0.85rem + 0.7vw, 1.375rem); font-weight: 600; line-height: 1.45;
  letter-spacing: 0.14em; text-transform: uppercase; text-wrap: balance;
  text-shadow: 0 1px 18px rgb(0 0 0 / 0.35);
}
/* One sentence under the slogan: who the club is for and what it offers (U-11). */
.hero__lead { max-width: 36rem; margin: 0; font-size: var(--fs-lg); line-height: 1.55; color: rgb(255 255 255 / 0.9); text-align: center; text-wrap: balance; text-shadow: 0 1px 18px rgb(0 0 0 / 0.35); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); width: 100%; }
.hero__actions .btn { min-width: 11rem; }
@media (max-width: 479px) { .hero__actions .btn { flex: 1 1 100%; } }
.hero__pillars {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.25rem; margin-top: var(--space-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgb(255 255 255 / 0.92);
}
.hero__pillars li { display: inline-flex; align-items: center; gap: 1.25rem; }
.hero__pillars li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-lime); }
.hero__pause {
  position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 3;
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.5); border-radius: var(--r-pill);
  background: rgb(0 0 0 / 0.25); color: var(--c-white); font-size: var(--fs-sm); font-weight: 600;
  backdrop-filter: blur(6px);
}
.hero__pause:hover { background: rgb(0 0 0 / 0.45); }
.hero--compact { min-height: clamp(26rem, 60vh, 38rem); }
/* Phone first screen (Walt 17.09): logo + one short line + two buttons. The descriptive sentence and the
   Дух·Душа·Тіло line made it noisy and pushed the buttons down; both stay from 600 px up (and in the HTML). */
@media (max-width: 599px) {
  .hero__lead, .hero__pillars { display: none; }
  .hero { min-height: clamp(30rem, 80vh, 44rem); }
}
.hero :focus-visible { outline-color: var(--c-white); }

/* --------------------------------------------------------------------------
   8. Inner page header, breadcrumbs
   -------------------------------------------------------------------------- */
.page-hero { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(2rem, 1rem + 3vw, 3.5rem); }
.page-hero__inner { display: grid; gap: var(--space-4); max-width: 52rem; }
.page-hero__title { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.page-hero--center .page-hero__inner { margin-inline: auto; text-align: center; justify-items: center; }

.breadcrumbs { font-size: var(--fs-sm); color: var(--text-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0; }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: "/"; margin-inline: 0.6rem; color: var(--c-line-strong); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; padding-block: 0.4rem; }
.breadcrumbs a:hover { color: var(--c-ink); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; }
/* Phones (U-17): one "← parent" link instead of 2–3 wrapped lines with hanging slashes; the page title follows anyway. */
@media (max-width: 599px) {
  .breadcrumbs li { display: none; }
  .breadcrumbs li:nth-last-child(2) { display: inline-flex; }
  .breadcrumbs li:nth-last-child(2)::before { display: none; }
  .breadcrumbs li:nth-last-child(2) a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding-block: 0; }
  .breadcrumbs li:nth-last-child(2) a::before { content: "←"; content: "←" / ""; }
  /* A single-item trail has no parent: show the current page. */
  .breadcrumbs li:only-child { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   9. Media, photo placeholders, badges, date chip, price
   -------------------------------------------------------------------------- */
.media { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--c-sand); }
.media > img, .media > video, .media > picture img { width: 100%; height: 100%; object-fit: cover; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--1x1 { aspect-ratio: 1; }
/* Native proportions of the client's photos: 1600×1066 landscape and 1066×1600 portrait — no crop. */
.media--3x2 { aspect-ratio: 3 / 2; }
.media--2x3 { aspect-ratio: 2 / 3; }

/* Brand placeholder used until real photos arrive: role="img" aria-label="Фото буде" */
.ph {
  position: relative; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: var(--space-2);
  aspect-ratio: 4 / 3; border-radius: var(--r-xl);
  color: var(--c-blue-ink);
  background:
    radial-gradient(circle at 18% 22%, rgb(255 255 255 / 0.65) 0 12%, transparent 42%),
    radial-gradient(circle at 85% 90%, rgb(186 197 69 / 0.35) 0 10%, transparent 45%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0) 0 14px, rgb(255 255 255 / 0.28) 14px 15px),
    linear-gradient(160deg, var(--c-blue-100), var(--c-blue-200));
}
.ph--lime {
  color: var(--c-lime-ink);
  background:
    radial-gradient(circle at 80% 18%, rgb(255 255 255 / 0.6) 0 10%, transparent 40%),
    radial-gradient(circle at 12% 88%, rgb(106 136 164 / 0.22) 0 10%, transparent 45%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0) 0 14px, rgb(255 255 255 / 0.3) 14px 15px),
    linear-gradient(160deg, var(--c-lime-100), var(--c-lime-200));
}
.ph--sand {
  color: var(--c-muted);
  background:
    radial-gradient(circle at 25% 20%, rgb(255 255 255 / 0.7) 0 12%, transparent 45%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0) 0 14px, rgb(255 255 255 / 0.4) 14px 15px),
    linear-gradient(160deg, var(--c-cream), #E6DCC6);
}
.ph--dark {
  color: rgb(255 255 255 / 0.85);
  background:
    radial-gradient(ellipse at 30% 30%, rgb(186 197 69 / 0.35), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgb(200 212 224 / 0.35), transparent 55%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0) 0 18px, rgb(255 255 255 / 0.06) 18px 19px),
    linear-gradient(150deg, #33485B, var(--c-blue) 60%, #7E9A6A);
}
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x4 { aspect-ratio: 3 / 4; }
.ph--1x1 { aspect-ratio: 1; }
.media > .ph { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.ph__icon { width: clamp(2.5rem, 2rem + 2vw, 3.5rem); height: auto; aspect-ratio: 1; --icon-stroke: 1.1; opacity: 0.9; }
.ph__label { font-family: var(--font-script); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1; }

.badge {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 1.75rem; padding: 0.2em 0.75em;
  border-radius: var(--r-pill); background: var(--c-sand); color: var(--c-ink-2);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; letter-spacing: var(--ls-wide); text-transform: uppercase; white-space: nowrap;
}
.badge .icon { width: 1em; height: 1em; --icon-stroke: 2.2; }
.badge--lime { background: var(--c-lime-200); color: var(--c-ink); }
.badge--blue { background: var(--c-blue-100); color: var(--c-blue-ink); }
.badge--dark { background: var(--c-ink); color: var(--c-white); }
.badge--white { background: var(--c-white); color: var(--c-ink); }
.badge--success { background: var(--c-success-bg); color: var(--c-success); }
.badge--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--info { background: var(--c-info-bg); color: var(--c-info); }
.badge--soon { background: var(--c-white); color: var(--c-blue-ink); box-shadow: inset 0 0 0 1.5px var(--c-blue-200); }
/* long badge text (e.g. the yearly saving, V-7) may wrap instead of overflowing the card */
.badge--wrap { white-space: normal; text-align: center; }
.badge--dot::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }

.date-chip {
  display: inline-grid; justify-items: center; align-content: center; min-width: 4.25rem; padding: 0.55rem 0.7rem 0.6rem;
  border-radius: var(--r-md); background: var(--c-white); color: var(--c-ink); box-shadow: var(--sh-1); line-height: 1;
}
.date-chip__day { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; }
.date-chip__month { margin-top: 0.3rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-lime-ink); }
.date-chip--lime { background: var(--c-lime); box-shadow: none; }
.date-chip--lime .date-chip__month { color: var(--c-ink); }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; }
.price__now { font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.price__old { font-size: var(--fs-base); font-weight: 400; color: var(--text-muted); text-decoration: line-through; white-space: nowrap; }
.price__note { flex-basis: 100%; display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-lime-ink); }
.price__note .icon { width: 1.1rem; height: 1.1rem; }
.price--sm .price__now { font-size: 1.375rem; }

.seats { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.seats::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-success); flex: none; }
.seats--low { color: var(--c-warning); }
.seats--low::before { background: #D38B0B; }
.seats--full { color: var(--c-danger); }
.seats--full::before { background: var(--c-danger); }

.facts { display: grid; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-2); }
.facts li { display: flex; align-items: flex-start; gap: 0.6rem; }
.facts .icon { width: 1.25rem; height: 1.25rem; color: var(--c-blue-ink); margin-top: 0.1em; }
.facts strong { color: var(--c-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Cards: generic, event (featured + compact), events layout
   -------------------------------------------------------------------------- */
.card { position: relative; background: var(--surface); border-radius: var(--r-xl); padding: clamp(1.25rem, 1rem + 1vw, 2rem); box-shadow: var(--sh-1); }
.card--flat { box-shadow: none; }
.card--outline { box-shadow: inset 0 0 0 1px var(--c-line); }

.event-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-1); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.event-card:hover { box-shadow: var(--sh-2); }
.event-card__media { position: relative; border-radius: 0; }
.event-card__media .ph, .event-card__media img { border-radius: 0; width: 100%; height: 100%; }
.event-card__media .date-chip { position: absolute; left: var(--space-4); top: var(--space-4); }
.event-card__body { display: grid; gap: var(--space-4); align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.event-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.event-card__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.event-card__title a { color: inherit; text-decoration: none; }
.event-card__title a:hover { text-decoration: underline; text-decoration-color: var(--c-lime); text-decoration-thickness: 3px; }
.event-card__text { color: var(--text-2); }
.event-card__footer { display: grid; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-line); }
.event-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.event-card__actions .btn { flex: 1 1 11rem; }

@media (min-width: 768px) {
  .event-card--featured .event-card__media { aspect-ratio: 16 / 10; }
  /* Wide card (home, V-2): media column left, text right; on phones the DOM order gives photo first. */
  .event-card--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .event-card--wide .event-card__media { aspect-ratio: auto; height: 100%; min-height: 20rem; }
  .event-card--wide .event-card__body { padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); align-content: center; }
}

/* Compact card: date chip + info + actions in one row on desktop */
.event-card--compact { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-4); padding: var(--space-4); border-radius: var(--r-lg); }
.event-card--compact .date-chip { background: var(--c-cream); box-shadow: none; }
.event-card--compact .event-card__body { padding: 0; gap: var(--space-2); }
.event-card--compact .event-card__title { font-size: var(--fs-h4); }
.event-card--compact .event-card__footer { grid-column: 1 / -1; padding-top: var(--space-3); gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.event-card--compact .event-card__actions .btn { flex: 1 1 8rem; }
@media (min-width: 600px) {
  .event-card--compact .event-card__footer { grid-template-columns: auto 1fr; align-items: center; }
  .event-card--compact .event-card__actions { justify-content: flex-end; }
  .event-card--compact .event-card__actions .btn { flex: 0 0 auto; }
}

.events { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 2rem); }
.events__list { display: grid; gap: var(--space-4); align-content: start; }
.events__list-title { margin: clamp(1.25rem, 1rem + 1vw, 2rem) 0 var(--space-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
/* Thin rule between the wide card and the row of the next events */
.events__divider { height: 1px; margin: 0; border: 0; background: var(--c-line-strong); }
.events__row { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 2rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px) { .events__row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } }
.events__row .event-card--compact .event-card__footer { grid-template-columns: minmax(0, 1fr); }
.events__row .event-card--compact .event-card__actions { justify-content: flex-start; }
.events__row .event-card--compact .event-card__actions .btn { flex: 1 1 8rem; }

/* --------------------------------------------------------------------------
   11. Pillars — Дух · Душа · Тіло
   -------------------------------------------------------------------------- */
.pillars { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 1vw, 1.75rem); } }
.pillar {
  position: relative; display: grid; gap: var(--space-3); align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); border-radius: var(--r-xl);
  background: var(--c-white); box-shadow: var(--sh-1);
}
.pillar--spirit { background: var(--c-white); }
.pillar--soul { background: var(--c-blue-100); box-shadow: none; }
.pillar--body { background: var(--c-lime-200); box-shadow: none; }
.pillar__icon {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--space-2);
  border-radius: 50%; background: var(--c-lime-100); color: var(--c-lime-ink);
}
.pillar--soul .pillar__icon { background: var(--c-white); color: var(--c-blue-ink); }
.pillar--body .pillar__icon { background: rgb(255 255 255 / 0.65); color: var(--c-ink); }
.pillar__icon .icon { width: 2.5rem; height: 2.5rem; --icon-stroke: 1.2; }
/* The client's own ink illustrations (dove · censer · bonsai): transparent webp, so no frame and no circle —
   they sit straight on the card like a drawing on paper. Heights differ by artwork, the box height does not. */
.pillar__art { width: auto; height: clamp(4.5rem, 3.4rem + 3.2vw, 6.5rem); max-width: 100%; object-fit: contain; justify-self: start; margin-bottom: var(--space-2); }
.pillar__title { font-size: var(--fs-h3); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; }
.pillar__sub { font-family: var(--font-script); font-size: 1.5rem; line-height: 1; color: var(--c-blue-ink); margin-top: -0.35rem; }
.pillar__text { color: var(--text-2); }
.pillar .link-arrow { justify-self: start; margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   12. CTA panel (fitness) & about block
   -------------------------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center;
  padding: clamp(1.75rem, 1rem + 3.5vw, 4.5rem);
  border-radius: var(--r-2xl);
  background: var(--c-blue-ink); color: var(--c-white);
  --focus: var(--c-white);
}
.cta::before {
  content: ""; position: absolute; z-index: -1; width: 38rem; height: 38rem; right: -14rem; top: -18rem; border-radius: 50%;
  background: radial-gradient(circle, rgb(186 197 69 / 0.28), transparent 65%);
}
.cta::after {
  content: ""; position: absolute; z-index: -1; width: 26rem; height: 26rem; right: -10rem; bottom: -14rem; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.14);
}
@media (min-width: 900px) { .cta { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.cta__content { display: grid; gap: var(--space-5); align-content: start; }
.cta__title { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.cta__text { font-size: var(--fs-lg); line-height: 1.55; color: rgb(255 255 255 / 0.9); max-width: 34rem; }
/* Small caps label on the blue panel: lime was 3.1:1, pale lime 4.4:1 — white is 5.9:1 (U-26). */
.cta .eyebrow { color: var(--c-white); }
.cta .check-list li::before { background: var(--c-lime); }
.cta__note { font-size: var(--fs-sm); color: rgb(255 255 255 / 0.85); }
.cta__note strong { color: var(--c-white); font-size: 1.125rem; }
.cta__media { position: relative; min-width: 0; }
.cta__media .ph, .cta__media .media { box-shadow: var(--sh-3); }
.cta__float {
  position: absolute; left: clamp(-1rem, -2vw, 0rem); bottom: -1rem; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); background: var(--c-white); color: var(--c-ink); box-shadow: var(--sh-2);
  font-size: var(--fs-sm); line-height: 1.3;
}
.cta__float .icon { width: 2.25rem; height: 2.25rem; padding: 0.4rem; border-radius: 50%; background: var(--c-lime); --icon-stroke: 1.8; }
.cta__float strong { display: block; font-size: 1rem; }
.cta--lime { background: var(--c-lime-200); color: var(--c-ink); --focus: var(--c-blue-ink); }
.cta--lime .eyebrow { color: var(--c-lime-ink); }
.cta--lime .cta__text, .cta--lime .cta__note { color: var(--text-2); }
.cta--lime .check-list li::before { background: var(--c-white); }
.cta--dark { background: var(--c-ink); }

.about { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.about__collage { position: relative; padding: 0 12% 14% 0; }
.about__collage > :first-child { border-radius: var(--r-2xl); }
.about__collage > :nth-child(2) {
  position: absolute; right: 0; bottom: 0; width: 48%; border-radius: var(--r-xl);
  box-shadow: 0 0 0 clamp(6px, 0.4rem + 0.4vw, 12px) var(--bg), var(--sh-2);
}
.about__stamp {
  position: absolute; left: -0.5rem; bottom: 20%; z-index: 2;
  display: grid; place-items: center; width: clamp(6rem, 5rem + 3vw, 8rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--c-lime); color: var(--c-ink); text-align: center; line-height: 1.1; box-shadow: var(--sh-2);
  font-family: var(--font-script); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); transform: rotate(-8deg);
}
.section--sand .about__collage > :nth-child(2) { box-shadow: 0 0 0 clamp(6px, 0.4rem + 0.4vw, 12px) var(--c-sand), var(--sh-2); }
.about__content { display: grid; gap: var(--space-5); align-content: start; }
/* The heading lives inside the text column of .about, so it must not add its own bottom margin on top of the gap. */
.about__content > .section__head { margin-bottom: 0; max-width: none; }

/* --------------------------------------------------------------------------
   12-ter. Photo collage & photo band (real photos from the client, 21.09)
   The 2fr / 1fr columns inside a square keep all three portraits at their native 2:3 — nothing is cropped.
   On a phone only the first photo is shown, so the block stays about one screen tall.
   -------------------------------------------------------------------------- */
.collage { display: grid; gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem); }
.collage > .media + .media { display: none; }
@media (min-width: 600px) {
  .collage { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1 / 1; }
  /* the second selector repeats the mobile "hide" one, so it wins on specificity and brings the photos back */
  .collage > .media, .collage > .media + .media { display: block; aspect-ratio: auto; }
  .collage > .media:first-child { grid-row: 1 / span 2; }
  /* Diptych: two photos side by side, each at its own ratio. */
  .collage--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; aspect-ratio: auto; }
  .collage--pair > .media { aspect-ratio: 2 / 3; }
  .collage--pair > .media:first-child { grid-row: auto; }
}
/* Capped so a pair of studio portraits does not tower over the text next to it. */
.collage--pair { max-width: 40rem; margin-inline: auto; }
/* A single photo used as a band inside a text section: wide by default, narrow for a portrait shot. */
.photo-band { max-width: 46rem; margin-inline: auto; }
.photo-band--tall { max-width: 24rem; }

/* --------------------------------------------------------------------------
   12-quater. Photo strip ("Спільнота" on the home page)
   Portrait and landscape shots share one height, like a filmstrip. Plain scroll-snap: no JS, and the strip
   runs to the edge of a phone screen while staying inside the container on a wide one.
   -------------------------------------------------------------------------- */
.gallery {
  /* same width as .container, so the first photo starts exactly under the heading */
  width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto;
  padding-inline: var(--gutter); padding-block: var(--space-1);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery:focus-visible { outline-offset: -3px; }
.gallery__track { display: flex; gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem); width: max-content; }
.gallery__item {
  flex: 0 0 auto; height: clamp(14rem, 11rem + 12vw, 22rem); scroll-snap-align: center;
  overflow: hidden; border-radius: var(--r-xl); background: var(--c-sand); box-shadow: var(--sh-1);
}
.gallery__img { height: 100%; width: auto; max-width: none; object-fit: cover; }
.values { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.values--center { justify-content: center; }
.values li {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.3rem 1rem 0.3rem 0.4rem;
  border-radius: var(--r-pill); background: var(--c-white); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--sh-1);
}
.values .icon { width: 1.9rem; height: 1.9rem; padding: 0.3rem; border-radius: 50%; background: var(--c-lime-200); color: var(--c-ink); --icon-stroke: 1.6; }

/* --------------------------------------------------------------------------
   12-bis. Slider (auto-advancing cards: the week schedule in the fitness CTA, V-3)
   Works without JS: the viewport scrolls and snaps. site.js adds auto-advance and the dots.
   -------------------------------------------------------------------------- */
.slider { display: grid; gap: var(--space-2); min-width: 0; }
.slider__viewport {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  border-radius: var(--r-xl); scrollbar-width: none;
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__track { display: flex; }
.slider__slide {
  flex: 0 0 100%; scroll-snap-align: center;
  display: grid; align-content: center; justify-items: center; gap: var(--space-3); text-align: center;
  /* fixed minimum height: the card must not jump when the slide changes */
  min-height: 13.5rem; padding: var(--space-5);
  background: var(--c-white); color: var(--c-ink); border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.slide__photo {
  display: grid; place-items: center; overflow: hidden;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--c-lime-100); color: var(--c-lime-ink); font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.slide__photo img { width: 100%; height: 100%; object-fit: cover; }
.slide__when { font-size: 1.0625rem; font-weight: 700; }
.slide__class { color: var(--text-2); }
.slider__dots { display: flex; flex-wrap: wrap; justify-content: center; }
.slider__dot { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; }
.slider__dot::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgb(255 255 255 / 0.45); transition: background-color var(--dur) var(--ease); }
.slider__dot:hover::before { background: rgb(255 255 255 / 0.75); }
.slider__dot[aria-current="true"]::before { background: var(--c-lime); width: 0.7rem; height: 0.7rem; }
.cta--lime .slider__dot::before, .section--white .slider__dot::before, .section--sand .slider__dot::before { background: var(--c-line-strong); }
.cta--lime .slider__dot[aria-current="true"]::before { background: var(--c-lime-ink); }
@media (prefers-reduced-motion: reduce) { .slider__viewport { scroll-behavior: auto; } }

/* --------------------------------------------------------------------------
   13. Reviews marquee (CSS animation, pauses on hover & focus)
   -------------------------------------------------------------------------- */
.marquee { position: relative; }
.marquee__viewport {
  overflow: hidden; padding-block: var(--space-3) var(--space-5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  border-radius: var(--r-md);
}
.marquee__viewport:focus-visible { outline-offset: -3px; }
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-dur) linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee__group { display: flex; gap: var(--space-4); padding-right: var(--space-4); flex: none; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__controls { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--space-2)); padding-inline: var(--gutter); max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; }
.marquee__toggle {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 1rem;
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill); background: transparent;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
}
.marquee__toggle:hover { border-color: var(--c-ink); }
.marquee__toggle .icon { width: 1.25rem; height: 1.25rem; }

.review {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4);
  width: clamp(17rem, 70vw, 23rem); min-height: 13.5rem; padding: var(--space-5);
  border-radius: var(--r-xl); background: var(--c-white); box-shadow: var(--sh-1);
}
.review__mark { display: block; height: 1.5rem; font-family: var(--font-script); font-size: 4rem; line-height: 1; color: var(--c-lime); }
.review__mark::before { content: "\201C"; }
.review__quote { font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.review__author { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.review__avatar {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none;
  background: var(--c-blue-100); color: var(--c-blue-ink); font-weight: 600;
}
.review__name { display: block; font-weight: 600; color: var(--c-ink); }
.review__meta { display: block; color: var(--text-muted); font-size: 0.875rem; }
.review--lime { background: var(--c-lime-100); box-shadow: none; }
.review--sand { background: var(--c-sand); box-shadow: none; }

/* --------------------------------------------------------------------------
   14. Year schedule (rows: date + title)
   -------------------------------------------------------------------------- */
.year-list { border-top: 1px solid var(--c-line-strong); }
.year-list__item {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4);
  padding: var(--space-4) var(--space-1); border-bottom: 1px solid var(--c-line);
  transition: background-color var(--dur) var(--ease);
}
.year-list__date { grid-column: 1 / -1; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.02em; color: var(--c-ink); white-space: nowrap; }
.year-list__date span { color: var(--c-lime-ink); font-weight: 600; }
.year-list__title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.year-list__title a { color: inherit; text-decoration: none; }
.year-list__title a::after { content: ""; position: absolute; inset: 0; }
.year-list__title a:hover { text-decoration: underline; text-decoration-color: var(--c-lime); text-decoration-thickness: 3px; }
.year-list__tag { justify-self: end; }
.year-list__arrow { display: none; color: var(--c-muted); }
.year-list__item:has(a):hover { background: var(--c-white); }
.year-list__item:has(a):hover .year-list__arrow { color: var(--c-ink); transform: translateX(3px); }
.year-list__item--past { color: var(--text-muted); }
.year-list__item--past .year-list__date, .year-list__item--past .year-list__date span { color: var(--text-muted); }
@media (min-width: 768px) {
  .year-list__item { grid-template-columns: 13rem minmax(0, 1fr) auto 1.5rem; padding: var(--space-5) var(--space-4); border-radius: 0; }
  .year-list__date { grid-column: auto; font-size: 1.0625rem; }
  .year-list__arrow { display: block; transition: transform var(--dur) var(--ease); }
}

/* --------------------------------------------------------------------------
   15. FAQ (<details>, no JS)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-3); }
.faq__item { border-radius: var(--r-lg); background: var(--c-white); box-shadow: var(--sh-1); transition: box-shadow var(--dur) var(--ease); }
.faq__item[open] { box-shadow: var(--sh-2); }
.faq__q {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 4rem; padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 600; line-height: 1.35; border-radius: var(--r-lg);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__icon { position: relative; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; background: var(--c-lime-200); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.85rem; height: 2px; margin: -1px 0 0 -0.425rem; border-radius: 2px; background: var(--c-ink); transition: transform var(--dur) var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--c-lime); transform: rotate(180deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__q:hover .faq__icon { background: var(--c-lime); }
.faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--text-2); max-width: 46rem; }
.faq__a > * + * { margin-top: 0.75em; }
.faq__item[open] .faq__a { animation: fade-down var(--dur) var(--ease) both; }
/* V-4: the single centred column on the home page — the "write to us" button under the list */
.faq-actions { justify-content: center; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@keyframes fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   16. Donation block
   -------------------------------------------------------------------------- */
.donate {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center;
  padding: clamp(1.75rem, 1rem + 3.5vw, 4.5rem); border-radius: var(--r-2xl);
  background: var(--c-lime-200); color: var(--c-ink);
}
.donate::after {
  content: ""; position: absolute; z-index: -1; right: -6rem; bottom: -8rem; width: 24rem; height: 24rem; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.55), transparent 68%);
}
@media (min-width: 900px) { .donate { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.donate__content { display: grid; gap: var(--space-5); align-content: start; }
.donate__title { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.donate__text { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-2); max-width: 36rem; }
.donate__aside { display: grid; gap: var(--space-4); padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-xl); background: rgb(255 255 255 / 0.72); }
.donate__heart { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--c-lime); }
.donate__heart .icon { width: 1.75rem; height: 1.75rem; --icon-stroke: 1.7; }
.donate__amounts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.donate__amount {
  display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 3rem; padding: 0 1rem;
  border-radius: var(--r-pill); background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--c-line-strong);
  font-weight: 600; color: var(--c-ink); text-decoration: none;
}
.donate__amount:hover { color: var(--c-ink); text-decoration: none; box-shadow: inset 0 0 0 2px var(--c-ink); }
.anbi { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); }
.anbi__mark { flex: none; padding: 0.3rem 0.55rem; border-radius: var(--r-xs); background: var(--c-ink); color: var(--c-white); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   17. Weekly fitness schedule (like their monthly graphic)
   -------------------------------------------------------------------------- */
.week { padding: clamp(1.25rem, 0.8rem + 2vw, 3rem); border-radius: var(--r-2xl); background: var(--c-white); box-shadow: var(--sh-1); }
.week__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.week__title { font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; }
.week__title .script { font-size: 1.05em; text-transform: none; font-weight: 400; margin-left: 0.1em; }
.week__list { display: grid; }
.week__row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "day time" "class class" "trainer trainer";
  gap: 0.15rem var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-top: 1px solid var(--c-line);
}
.week__day { grid-area: day; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 800; text-transform: uppercase; line-height: 1.15; }
.week__time { grid-area: time; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.week__class { grid-area: class; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.week__trainer { grid-area: trainer; justify-self: start; margin-top: var(--space-2); }
.week__trainer span {
  display: inline-block; padding: 0.2rem 0.75rem; border-radius: var(--r-pill); background: var(--c-lime);
  font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.week__row--off { color: var(--text-muted); }
.week__row--off .week__class { text-decoration: line-through; }
.week__row--off .week__trainer span { background: var(--c-sand); color: var(--text-muted); }
/* Day without classes ("Неділя — день відпочинку"): one calm full-width line, not a cancelled class. */
.week__row--rest { grid-template-columns: minmax(0, 1fr); grid-template-areas: "class"; }
.week__row--rest .week__class { font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
@media (min-width: 768px) {
  .week__row { grid-template-columns: 9.5rem 11rem 6rem minmax(0, 1fr); grid-template-areas: "trainer day time class"; align-items: center; padding: var(--space-4) var(--space-2); }
  .week__trainer { justify-self: end; margin-top: 0; }
  .week__row--rest { grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-areas: ". class"; }
}

/* --------------------------------------------------------------------------
   18. Subscription plans, products
   -------------------------------------------------------------------------- */
.plans { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 2rem); }
@media (min-width: 768px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.plan {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-4);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); border-radius: var(--r-xl); background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--c-line);
}
.plan__name { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-lime-ink); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; }
.plan__amount { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.plan__period { font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); }
.plan__note { font-size: var(--fs-sm); color: var(--text-muted); }
.plan__features { align-content: start; }
.plan__badge { position: absolute; top: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); right: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); }
.plan--featured { background: var(--c-ink); color: var(--c-white); box-shadow: var(--sh-3); --focus: var(--c-lime); }
.plan--featured .plan__name { color: var(--c-lime); }
.plan--featured .plan__period, .plan--featured .plan__note { color: rgb(255 255 255 / 0.75); }
.plan--featured .check-list li::before { background: var(--c-lime); }

.products { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.product { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); background: var(--c-white); box-shadow: var(--sh-1); overflow: hidden; transition: box-shadow var(--dur) var(--ease); }
.product:hover { box-shadow: var(--sh-2); }
.product__media { border-radius: 0; aspect-ratio: 4 / 3; }
.product__media .ph { border-radius: 0; height: 100%; }
.product__media .badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.product__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-2); padding: var(--space-5); }
.product__type { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-blue-ink); }
.product__title { font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; }
.product__title a { color: inherit; text-decoration: none; }
.product__title a::after { content: ""; position: absolute; inset: 0; }
.product__text { font-size: var(--fs-sm); color: var(--text-2); }
.product__footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.product__price { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.product.is-soon .product__media { filter: saturate(0.6); }
.product.is-soon .product__price { color: var(--text-muted); font-weight: 600; font-size: 1rem; }

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 600px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__section { display: grid; gap: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--c-line); }
.form__section-title { font-size: var(--fs-h4); font-weight: 600; }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-top: var(--space-2); }
.form__note { font-size: var(--fs-sm); color: var(--text-muted); }
.form-card { padding: clamp(1.25rem, 0.8rem + 2vw, 3rem); border-radius: var(--r-2xl); background: var(--c-white); box-shadow: var(--sh-1); }
/* A white flat card (price box) inside the white form card: no second inner padding, it lines up with the fields (U-39). */
.form-card > .card--flat { padding: 0; border-radius: 0; }

.field { display: grid; gap: var(--space-2); }
.field__label { font-size: 1rem; font-weight: 600; color: var(--c-ink); line-height: 1.35; }
.field__req { color: var(--c-danger); margin-left: 0.15em; }
.field__optional { font-weight: 400; color: var(--text-muted); font-size: var(--fs-sm); }
.field__hint { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; }
.field__error { display: flex; align-items: flex-start; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-danger); line-height: 1.4; }
.field__error .icon { width: 1.15rem; height: 1.15rem; margin-top: 0.05em; --icon-stroke: 2; }

.input, .select, .textarea {
  display: block; width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem;
  border: 1.5px solid var(--c-field-border); border-radius: var(--r-md); background: var(--c-white); color: var(--c-ink);
  font-size: 1.0625rem; line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #8F897E; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-ink-2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--c-blue-ink); box-shadow: 0 0 0 4px rgb(78 104 128 / 0.25); }
.textarea { min-height: 8rem; resize: vertical; }
.select {
  padding-right: 3rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%), linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.4rem) 55%, calc(100% - 1.05rem) 55%;
  background-size: 0.36rem 0.36rem; background-repeat: no-repeat;
}
.input[disabled], .select[disabled], .textarea[disabled] { background-color: var(--c-sand); color: var(--text-muted); cursor: not-allowed; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .field--error .input, .field--error .select, .field--error .textarea {
  border-color: var(--c-danger); background-color: #FFFBFA;
}
.input--code { max-width: 14rem; font-size: 1.75rem; font-weight: 600; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }

.fieldset { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.fieldset__legend { padding: 0; margin-bottom: var(--space-2); font-size: 1rem; font-weight: 600; }

/* Checkbox & radio — native input kept (accessible), styled box */
.check { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; cursor: pointer; line-height: 1.45; }
.check__input { position: absolute; opacity: 0; width: 1.5rem; height: 1.5rem; margin: 0; cursor: pointer; }
.check__box {
  position: relative; width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; border-radius: 6px;
  border: 1.5px solid var(--c-field-border); background: var(--c-white);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check__box::after {
  content: ""; position: absolute; left: 0.45rem; top: 0.2rem; width: 0.45rem; height: 0.8rem;
  border-right: 2.5px solid var(--c-ink); border-bottom: 2.5px solid var(--c-ink); transform: rotate(45deg) scale(0); transition: transform var(--dur-fast) var(--ease);
}
.check--radio .check__box { border-radius: 50%; }
.check--radio .check__box::after { left: 50%; top: 50%; width: 0.7rem; height: 0.7rem; margin: -0.35rem 0 0 -0.35rem; border: 0; border-radius: 50%; background: var(--c-ink); transform: scale(0); }
.check__input:checked + .check__box { background: var(--c-lime); border-color: var(--c-ink); }
.check__input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check--radio .check__input:checked + .check__box::after { transform: scale(1); }
.check__input:focus-visible + .check__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.check__input[aria-invalid="true"] + .check__box { border-color: var(--c-danger); }
.check:hover .check__box { border-color: var(--c-ink); }
.check__label { font-size: 1rem; color: var(--text-2); }
.check__label a { font-weight: 600; }
.check-group { display: grid; gap: var(--space-3); }

/* Payment method — two big choice cards */
.pay-options { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.pay-options__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* Donations form: the sponsor-letter checkbox only for a monthly gift (U-29). Without :has() it simply stays visible. */
.donate-form:has(input[name="kind"][value="once"]:checked) .donate-form__newsletter { display: none; }
.pay-option { position: relative; display: block; cursor: pointer; }
.pay-option__input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pay-option__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4);
  min-height: 5.5rem; padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg); background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--c-field-border);
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.pay-option__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-cream); }
.pay-option__icon .icon { width: 1.6rem; height: 1.6rem; }
.pay-option__title { display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.25; color: var(--c-ink); }
.pay-option__text { display: block; margin-top: 0.15rem; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
.pay-option__radio { width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-field-border); background: var(--c-white); transition: box-shadow var(--dur-fast) var(--ease); }
.pay-option:hover .pay-option__card { box-shadow: inset 0 0 0 2px var(--c-ink); }
.pay-option__input:checked + .pay-option__card { background: var(--c-lime-100); box-shadow: inset 0 0 0 2.5px var(--c-ink); }
.pay-option__input:checked + .pay-option__card .pay-option__icon { background: var(--c-lime); }
.pay-option__input:checked + .pay-option__card .pay-option__radio { box-shadow: inset 0 0 0 7px var(--c-ink); }
.pay-option__input:focus-visible + .pay-option__card { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Alternative per PLAN §5: two submit buttons with name="payment_method" */
.pay-buttons { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pay-buttons .btn { min-height: 4.25rem; font-size: 1.0625rem; }
.pay-buttons__hint { display: block; font-size: 0.8125rem; font-weight: 400; opacity: 0.85; }
.pay-buttons .btn { flex-direction: column; gap: 0.1rem; }
.pay-buttons .btn > span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Error summary at top of a form */
.form-errors { padding: var(--space-4) var(--space-5); border-radius: var(--r-lg); background: var(--c-danger-bg); color: var(--c-danger); }
.form-errors__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.form-errors ul { margin-top: var(--space-2); padding-left: 2rem; list-style: disc; }
.form-errors a { color: var(--c-danger); font-weight: 600; }

/* --------------------------------------------------------------------------
   20. Flash messages
   -------------------------------------------------------------------------- */
.flash-stack { display: grid; gap: var(--space-3); margin-block: var(--space-5); }
.flash {
  --flash-fg: var(--c-info); --flash-bg: var(--c-info-bg);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-radius: var(--r-lg);
  background: var(--flash-bg); color: var(--c-ink); box-shadow: inset 4px 0 0 var(--flash-fg);
}
.flash__icon { width: 1.5rem; height: 1.5rem; color: var(--flash-fg); margin-top: 0.05rem; --icon-stroke: 1.9; }
.flash__body { display: grid; gap: 0.15rem; line-height: 1.5; }
.flash__title { font-weight: 600; color: var(--flash-fg); }
.flash__close {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: -0.4rem -0.2rem -0.4rem 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--c-ink-2);
}
.flash__close:hover { background: rgb(0 0 0 / 0.06); }
.flash__close .icon { width: 1.25rem; height: 1.25rem; }
.flash--success { --flash-fg: var(--c-success); --flash-bg: var(--c-success-bg); }
.flash--warning { --flash-fg: var(--c-warning); --flash-bg: var(--c-warning-bg); }
.flash--error { --flash-fg: var(--c-danger); --flash-bg: var(--c-danger-bg); }
.flash--info { --flash-fg: var(--c-info); --flash-bg: var(--c-info-bg); }
.flash.is-leaving { animation: flash-out var(--dur) var(--ease) forwards; }
@keyframes flash-out { to { opacity: 0; transform: translateY(-6px); } }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 0; /* spacing comes from the last .section */
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 var(--space-6);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: var(--c-ink); color: rgb(255 255 255 / 0.82);
  --focus: var(--c-lime);
}
/* Buttons keep their own colours: white-on-lime "Зробити внесок" was 1.9:1 and vanished on hover (U-06). */
.site-footer a:not(.btn) { color: var(--c-white); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--c-lime); text-decoration: underline; }
.site-footer__top { display: grid; gap: var(--space-7); }
@media (min-width: 768px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .site-footer__top { grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: var(--space-6); } }
.site-footer__brand { display: grid; gap: var(--space-5); align-content: start; justify-items: start; }
.site-footer__logo img { width: 10.5rem; height: auto; }
.site-footer__tagline { max-width: 20rem; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6; color: rgb(255 255 255 / 0.9); }
.site-footer__heading { margin-bottom: var(--space-4); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-lime); }
.site-footer__links { display: grid; gap: var(--space-1); }
.site-footer__links a { display: inline-block; padding-block: 0.7rem; font-weight: 400; }
.contact-list { display: grid; gap: var(--space-3); min-width: 0; }
.contact-list li { display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.contact-list a, .contact-list span { overflow-wrap: anywhere; }
.contact-list .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--c-lime); }
.site-footer__support { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.site-footer__support p { font-size: var(--fs-sm); }
.site-footer__bottom {
  display: grid; gap: var(--space-4); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 0.14); font-size: var(--fs-sm);
}
@media (min-width: 900px) { .site-footer__bottom { grid-template-columns: 1fr auto; align-items: start; } }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-footer__legal a { display: inline-block; padding-block: 0.7rem; }
.site-footer__fund { grid-column: 1 / -1; font-size: var(--fs-2xs); line-height: 1.7; color: rgb(255 255 255 / 0.62); }
.site-footer__copy { color: rgb(255 255 255 / 0.62); }

.social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social__link {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--c-line-strong); color: var(--c-ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.social__link:hover { background: var(--c-ink); color: var(--c-white); box-shadow: none; }
.social__link .icon { width: 1.35rem; height: 1.35rem; }
.site-footer .social__link { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.28); color: var(--c-white); }
.site-footer .social__link:hover { background: var(--c-lime); color: var(--c-ink); text-decoration: none; }

/* --------------------------------------------------------------------------
   22. 404 / error page
   -------------------------------------------------------------------------- */
.error-page { display: grid; justify-items: center; text-align: center; gap: var(--space-5); padding: clamp(3rem, 2rem + 6vw, 8rem) 0; }
.error-page__code {
  position: relative; isolation: isolate; font-size: clamp(6rem, 4rem + 12vw, 13rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em;
  color: var(--c-blue-200);
}
.error-page__code::after {
  content: ""; position: absolute; left: 50%; bottom: 12%; width: 70%; height: 0.16em; transform: translateX(-50%) rotate(-4deg);
  border-radius: var(--r-pill); background: var(--c-lime); z-index: -1;
}
.error-page__title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.error-page__text { max-width: 32rem; color: var(--text-2); font-size: var(--fs-lg); }
.error-page .btn-row { justify-content: center; }
.error-page__links a { display: inline-block; padding-block: 0.7rem; }
.error-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   23. Reveal-on-load helper (pure CSS, subtle)
   -------------------------------------------------------------------------- */
.fade-in { animation: fade-up var(--dur-slow) var(--ease) both; }
.fade-in--d1 { animation-delay: 80ms; }
.fade-in--d2 { animation-delay: 160ms; }
.fade-in--d3 { animation-delay: 240ms; }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   24. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .hero__video, .hero__pause { display: none; }
  /* Marquee becomes a static, swipeable/scrollable strip */
  .marquee__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); scrollbar-width: thin; }
  .marquee__group { padding-right: var(--gutter); }
  .marquee__track { animation: none !important; transform: none !important; }
  .marquee__group[aria-hidden="true"] { display: none; }
  /* Fill-up copies inside the first group (few reviews on a wide screen) are for the loop only. */
  .marquee__group > [aria-hidden="true"] { display: none; }
  .marquee__group .review { scroll-snap-align: start; }
  .marquee__controls { display: none; }
  .btn:hover, .btn:active { transform: none; }
  .script { transform: none; }
}

/* --------------------------------------------------------------------------
   25. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .hero__media, .marquee__controls, .menu, .flash__close { display: none !important; }
  body { background: #fff; }
  .hero { color: var(--c-ink); background: none; min-height: 0; margin: 0; padding: 1rem 0; }
}

/* --------------------------------------------------------------------------
   26. Photos on the retreats, event and sponsors pages (events & donations modules, 21.09)
   Only new classes — nothing above is redefined.
   -------------------------------------------------------------------------- */
/* Inner page header with a photo beside the text ("Ретрити"). */
.page-hero--media .page-hero__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.page-hero--media .page-hero__inner { max-width: none; }
@media (min-width: 900px) {
  .page-hero--media .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.page-hero__media { box-shadow: var(--sh-2); }

/* The long "що входить у ретрит" list reads as two columns once there is room. */
@media (min-width: 768px) {
  .check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
}

/* Fallback cover of an event without its own photo: a portrait shot keeps the face inside a wide crop. */
.media--face > img { object-position: 50% 20%; }

/* === V-12/V-13 === */
/* V-12. «Місце зустрічей і тепла» (home #community): the photo strip runs slowly right-to-left on the shared
   marquee (§13) — same photo height and rounding as the old .gallery strip; pauses on hover/focus/button;
   with prefers-reduced-motion it stands still and scrolls by hand (§24 turns the track off and hides the copy). */
.marquee--gallery { --marquee-dur: 90s; }
.marquee--gallery .marquee__viewport { padding-block: var(--space-1) var(--space-3); border-radius: 0; }
.marquee--gallery .marquee__group { gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem); padding-right: clamp(0.5rem, 0.3rem + 0.8vw, 1rem); }
@media (prefers-reduced-motion: reduce) {
  .marquee--gallery .marquee__viewport { scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
}

/* V-13. Event cards in one row share height and width; the price + buttons sit at the bottom of every card. */
.events__row { align-items: stretch; }
.event-card--featured:not(.event-card--wide) { grid-template-rows: auto 1fr; }
.event-card--compact { grid-template-rows: 1fr auto; }
.event-card:not(.event-card--wide) .event-card__body { display: flex; flex-direction: column; }
.event-card--featured:not(.event-card--wide) .event-card__footer { margin-top: auto; }

/* === V-15 fitness === */
/* "Фітнес" page (V-15 → V-20). Header: full-width video loop over the .hero shell from §7, text left-aligned and
   vertically centred; a left-to-right shade keeps white text AA over the bright sky. Then two zigzag rows
   (text | photo, photo | text) without a frame, "Як це працює" steps, and compact plan cards. */
.fit-hero { align-items: center; min-height: clamp(34rem, 84vh, 48rem); margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); padding-bottom: calc(var(--space-8) + 1rem); }
.fit-hero__poster, .fit-hero__video { object-position: 62% 50%; }
.fit-hero__shade {
  background:
    linear-gradient(90deg, rgb(12 14 16 / 0.76) 0%, rgb(12 14 16 / 0.62) 34%, rgb(12 14 16 / 0.3) 60%, rgb(12 14 16 / 0.04) 85%),
    linear-gradient(180deg, rgb(12 14 16 / 0.4) 0%, transparent 28%, transparent 70%, rgb(12 14 16 / 0.45) 100%);
}
.fit-hero__inner { display: grid; justify-items: start; gap: var(--space-4); max-width: calc(var(--container) + var(--gutter) * 2); }
.fit-hero__inner > * { max-width: 36rem; }
.fit-hero__title { color: var(--c-white); font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem); line-height: 1; text-shadow: 0 2px 24px rgb(0 0 0 / 0.3); }
.fit-hero__eyebrow { color: var(--c-white); }
.fit-hero__lead { margin: 0; color: rgb(255 255 255 / 0.94); text-shadow: 0 1px 18px rgb(0 0 0 / 0.35); }
.fit-hero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.fit-hero__facts li {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; padding: 0 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.4); border-radius: var(--r-pill); background: rgb(255 255 255 / 0.1);
  color: var(--c-white); font-size: var(--fs-sm); font-weight: 600; backdrop-filter: blur(6px);
}
.fit-hero__facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-lime); }
.fit-hero .btn-row { margin-top: var(--space-2); }
.fit-hero .breadcrumbs, .fit-hero .breadcrumbs a { color: rgb(255 255 255 / 0.85); }
.fit-hero .breadcrumbs a:hover, .fit-hero .breadcrumbs [aria-current="page"] { color: var(--c-white); }
.fit-hero .breadcrumbs li + li::before { color: rgb(255 255 255 / 0.5); }
@media (max-width: 599px) {
  .fit-hero { min-height: clamp(34rem, 90vh, 44rem); padding-bottom: calc(var(--space-7) + 3rem); } /* room for the pause pill */
  .fit-hero__poster, .fit-hero__video { object-position: 70% 50%; }
  .fit-hero__shade { background: linear-gradient(180deg, rgb(12 14 16 / 0.5) 0%, rgb(12 14 16 / 0.45) 40%, rgb(12 14 16 / 0.75) 100%); }
  .fit-hero__facts li { min-height: 2rem; padding: 0 0.75rem; font-size: var(--fs-xs); }
}
/* Zigzag rows: plain layout, the photo carries the colour. */
.fit-story .stack--xl { --stack: clamp(3rem, 2rem + 4vw, 6rem); }
.fit-zig { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 4rem); align-items: center; }
.fit-zig__text { --stack: var(--space-4); max-width: 34rem; }
.fit-zig__text .lead { margin: 0; }
.fit-zig__media { overflow: hidden; border-radius: var(--r-2xl); aspect-ratio: 5 / 4; box-shadow: var(--sh-2); }
.fit-zig__media > img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .fit-zig { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .fit-zig--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .fit-zig--flip .fit-zig__media { order: -1; }
  .fit-zig--flip .fit-zig__text { justify-self: end; }
}
@media (max-width: 599px) { .fit-zig__media { aspect-ratio: 4 / 3; border-radius: var(--r-xl); } }
/* "Як це працює": numbered steps in a row (2 × 2 on tablets, a column on phones). */
.fit-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 600px) { .fit-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fit-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fit-steps__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-5); border-radius: var(--r-xl); background: var(--c-cream); }
.fit-steps__item p { margin: 0; font-weight: 500; line-height: 1.45; }
.fit-steps__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c-lime); color: var(--c-ink); font-weight: 800; }
@media (max-width: 599px) { .fit-steps { gap: var(--space-3); } .fit-steps__item { padding: var(--space-4); align-items: center; } }
/* Plan cards: equal height, price on one line (big amount + small "/ місяць"), the saving as a short line. */
.fit-plans { align-items: stretch; }
.fit-plan { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
.fit-price { margin: 0; white-space: nowrap; font-size: var(--fs-sm); color: var(--text-2); }
.fit-price__amount { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); font-weight: 800; line-height: 1.1; color: var(--c-ink); letter-spacing: -0.01em; }
.fit-saving { margin: 0; display: flex; gap: 0.4rem; align-items: baseline; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--c-lime-ink); }
.fit-saving::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-lime); transform: translateY(-0.1em); }
.fit-plan__billing { margin-top: auto; }
@media (max-width: 479px) { .fit-plans { grid-template-columns: minmax(0, 1fr); } }

/* === V-14 sponsors === */
/* «Для спонсорів» (donations module): cover photo, photo blocks alternating left/right, ways to help, CTA with the form.
   Only new sponsor-* classes; the rest is .split / .media / .card / .form-card from above. */
.sponsor-cover { aspect-ratio: 4 / 3; margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); box-shadow: var(--sh-2); }
.sponsor-cover > img { object-position: 50% 55%; }
@media (min-width: 600px) { .sponsor-cover { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .sponsor-cover { aspect-ratio: 21 / 9; } }

.sponsor-feature + .sponsor-feature { padding-top: 0; }
.sponsor-feature__media { box-shadow: var(--sh-2); }
.sponsor-feature__body { max-width: 38rem; }
.sponsor-feature__body > .lead { max-width: none; }

/* Three-photo mosaic for «Що ми робимо»: one wide shot on top, two below. */
.sponsor-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem); align-self: start; }
.sponsor-mosaic > .media { box-shadow: var(--sh-1); }
.sponsor-mosaic__main { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.sponsor-mosaic__side { aspect-ratio: 1; }
@media (min-width: 900px) { .sponsor-mosaic { position: sticky; top: calc(var(--header-h) + var(--header-gap) * 2); } }

/* Spirit · soul · body — the three branches with the client's ink illustrations. */
.sponsor-branches { display: grid; gap: var(--space-4); }
.sponsor-branch { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start;
  padding: var(--space-4); border-radius: var(--r-lg); background: var(--c-white); box-shadow: var(--sh-1); }
.sponsor-branch--soul { background: var(--c-blue-100); box-shadow: none; }
.sponsor-branch--body { background: var(--c-lime-100); box-shadow: none; }
.sponsor-branch__art { display: grid; place-items: center; height: 3.5rem; }
.sponsor-branch__art .pillar__art { height: 3.25rem; margin: 0; justify-self: center; }
@media (max-width: 599px) {
  .sponsor-branch { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .sponsor-branch__art { place-items: start; height: 2.75rem; }
  .sponsor-branch__art .pillar__art { height: 2.5rem; justify-self: start; }
}
.sponsor-branch__body { display: grid; gap: var(--space-1); }
.sponsor-branch__body p { color: var(--text-2); }
.sponsor-branch__tag { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-lime-ink); }

.sponsor-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sponsor-pills li { padding: 0.45rem 1rem; border-radius: var(--r-pill); background: var(--c-lime-100); font-weight: 600; }

/* Ways to help: equal-height cards, the link sits at the bottom. */
.sponsor-ways { align-items: stretch; }
.sponsor-way { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 768px) {
  .sponsor-way { display: grid; grid-template-columns: 3rem minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--space-4); row-gap: var(--space-2); }
  .sponsor-way > :not(.sponsor-way__icon) { grid-column: 2; }
  .sponsor-way__icon { grid-row: 1 / span 3; }
  .sponsor-way__link { align-self: end; }
}
.sponsor-way__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-lime-200); }
.sponsor-way__icon .icon { width: 1.5rem; height: 1.5rem; }
.sponsor-way__text { color: var(--text-2); }
.sponsor-way__link { margin-top: auto; padding-top: var(--space-2); align-self: flex-start; justify-self: start; }

/* «Підтримати клуб»: intro left, form right on wide screens; stacked on phones (intro first, short). */
.sponsor-cta__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .sponsor-cta__grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
  .sponsor-cta__intro { position: sticky; top: calc(var(--header-h) + var(--header-gap) * 2); } }
.sponsor-cta__intro > .lead { max-width: none; }

/* === V-17/V-18 retreats === */
/* V-17. «Що таке ретрит» + «Як це буває» (retreats page): the intro gets a photo collage (sticky beside the
   stories on wide screens), each story a white card with a three-photo mosaic above the client's text. */
.retreat-collage { position: relative; padding-bottom: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); }
.retreat-collage__main { width: 86%; aspect-ratio: 4 / 3; box-shadow: var(--sh-2); }
.retreat-collage__inset {
  position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5;
  border: clamp(4px, 0.2rem + 0.3vw, 8px) solid var(--c-sand); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.retreat-story { padding: 0; overflow: hidden; }
.retreat-story__photos {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px; aspect-ratio: 16 / 10;
}
.retreat-story__photos > .media { border-radius: 0; min-height: 0; }
.retreat-story__photos > .media > img { position: absolute; inset: 0; }
.retreat-story__main { grid-row: 1 / span 2; }
.retreat-story__text { padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.retreat-story__text p { color: var(--text-2); }
.retreat-what__outro {
  font-family: var(--font-script); font-size: var(--fs-h4); line-height: 1.35; color: var(--c-blue-ink);
  padding-left: var(--space-4); border-left: 3px solid var(--c-lime);
}

/* V-18. «Найближчий ретрит»: the nearest retreat as a full-width showcase — wide photo on top, then the story
   (title, facts, summary) beside a cream price panel with the actions. Further retreats, if any, follow as cards. */
.retreat-spotlight .event-card__media { aspect-ratio: 16 / 10; }
.retreat-spotlight .event-card__media > img { position: absolute; inset: 0; }
@media (min-width: 768px) {
  .retreat-spotlight .event-card__media { aspect-ratio: 21 / 9; }
  .retreat-spotlight .event-card__media .date-chip { left: var(--space-6); top: var(--space-6); transform: scale(1.15); transform-origin: top left; }
}
.retreat-spotlight__body { display: grid; gap: var(--space-6); padding: clamp(1.5rem, 1rem + 2.2vw, 3.25rem); }
@media (min-width: 900px) {
  .retreat-spotlight__body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
}
.retreat-spotlight__title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
.retreat-spotlight__title a { color: inherit; text-decoration: none; }
.retreat-spotlight__title a:hover { text-decoration: underline; text-decoration-color: var(--c-lime); text-decoration-thickness: 4px; }
.retreat-spotlight__facts { font-size: var(--fs-base); }
.retreat-spotlight__text { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-2); max-width: 42rem; }
.retreat-spotlight__aside { --stack: var(--space-3); background: var(--c-cream); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.retreat-spotlight__aside > .event-card__actions { margin-top: var(--space-5); }
.retreat-spotlight__aside .event-card__actions .btn { flex: 1 1 100%; }

/* === V-22 Safari: hero text over video === */
/* Safari composites a playing <video> on its own GPU layer and can paint it above plain text siblings, so the
   title, lead and solid buttons flickered in and out while only blurred (already composited) chips stayed visible.
   Give the hero its own stacking context and lift the content onto its own layer above the media. */
.hero { isolation: isolate; }
.hero__inner, .fit-hero__inner { position: relative; z-index: 3; transform: translateZ(0); }

/* === V-23 (25.09, Walt): no "pause video" button on phones and tablets — hide on touch screens and up to iPad-landscape width === */
@media (max-width: 1180px), (hover: none) {
  .hero__pause { display: none !important; }
}

/* === V-24 (25.09, Walt): phone — header is a solid full-width bar glued to the top (no pill, no rounding),
   the video hero fills the whole screen edge to edge. Desktop and iPad keep the floating pill. === */
@media (max-width: 767px) {
  .site-header { padding: 0; }
  .site-header__bar {
    max-width: none; border-radius: 0;
    background: var(--c-white, #fff); backdrop-filter: none;
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.07);
    padding-inline: var(--gutter, 1rem);
  }
  .site-header__logo { margin-left: 0; }
  .hero, .hero.fit-hero {
    margin: calc(-1 * var(--header-h)) 0 0;
    min-height: 100vh; min-height: 100svh;
    padding-top: calc(var(--header-h) + var(--space-6));
  }
}

/* === V-25 event photo slider === */
/* Event with 2–5 photos: they lie in one frame and fade one into the next (site.js [data-slides], every 4 s).
   №1 stays in normal flow — it sizes the frame exactly as a single cover does, so nothing jumps with or without JS;
   №2–№5 are stacked on top of it. Only .is-active is visible; the photo it replaces keeps .is-prev (opaque, one
   layer lower) while the new one fades in, so the fade never shows a third photo through. No arrows, dots or
   swiping (Walt 25.09). */
.media--slides > .media__slide { display: block; position: relative; z-index: 0; opacity: 0; transition: opacity 1s ease; }
.media--slides > .media__slide:not(:first-child) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--slides > .media__slide.is-prev { z-index: 1; opacity: 1; transition: none; }
.media--slides > .media__slide.is-active { z-index: 2; opacity: 1; }
/* The date chip stays above every photo. */
.media--slides > .date-chip { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .media--slides > .media__slide { transition: none; }
}

/* === V-26 (25.09): tick circles centred on the first text line (1lh), whatever the list's font size === */
@supports (top: 1lh) {
  .check-list li::before, .check-list li::after { top: calc((1lh - 1.35rem) / 2); }
}

/* === V-27 trainer photo cards === */
/* Home fitness slider: a slot whose trainer has a card photo (admin → Фітнес → Персонал) shows it as the card
   background under a dark shade; day/time and class · name in white on top. Every slide has the same box (same
   min-height / aspect-ratio, the track stretches every slide to one height), so nothing jumps on a slide change.
   Contrast: the shade is ≥ 0.5 black from the middle down, where the text sits — white text stays ≥ 4.5:1 even
   over a white photo (plus a text shadow). */
.slider__slide--photo {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-ink); color: #fff;
}
.slide__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.slider__slide--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.32) 0%, rgb(0 0 0 / 0.5) 40%, rgb(0 0 0 / 0.62) 65%, rgb(0 0 0 / 0.78) 100%);
}
.slider__slide--photo .slide__when,
.slider__slide--photo .slide__class { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.slider__slide--photo .slide__when { font-size: 1.25rem; }
/* V-30: the round avatar stays in the centre. Her portrait fills it; without one — her initial. Over a photo it gets
   a light translucent disc with an ink letter, a thin white ring and a soft shadow, so it reads over any picture. */
.slide__photo { flex: none; }
.slide__photo img { display: block; }
.slider__slide--photo .slide__photo {
  background: rgb(255 255 255 / 0.9); color: var(--c-ink);
  box-shadow: 0 0 0 2px #fff, 0 6px 18px rgb(0 0 0 / 0.35);
}
.slide__photo:has(img) { box-shadow: 0 0 0 2px #fff, 0 4px 14px rgb(0 0 0 / 0.18); }
.slider__slide--photo .slide__photo:has(img) { box-shadow: 0 0 0 2px #fff, 0 6px 18px rgb(0 0 0 / 0.35); }
/* V-31: on a computer the card is no longer a wide, low strip beside the text — it grows taller with the screen.
   Phone keeps the V-3 size (min-height); from 768 px the card is 4:3, from 1100 px 8:9 (a touch taller than square) — card + dots then match the
   height of the text column beside it (checked at 1366 and 1920). All slides share it. */
@media (min-width: 768px) {
  .slider__slide { aspect-ratio: 4 / 3; }
  .slide__photo { width: 5.5rem; height: 5.5rem; font-size: 1.75rem; }
  .slider__slide--photo .slide__when { font-size: 1.4rem; }
}
@media (min-width: 1100px) {
  .slider__slide { aspect-ratio: 8 / 9; }
  .slide__photo { width: 6.5rem; height: 6.5rem; font-size: 2rem; }
}

/* === V-28 (25.09, Walt): home page on a phone ===
   1) the gallery strip has no "stop" button at any width (it still pauses on hover/focus and for reduced motion);
   2) much less empty space between the gallery and the next ("Підтримати нас") block;
   3) the "Про нас" collage shows all three photos on a phone too, in the same square 2fr/1fr layout as on desktop. */
.marquee__controls { display: none !important; }
#community { padding-bottom: calc(var(--section-y) * 0.35); }
@media (max-width: 599px) {
  .collage:not(.collage--pair) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1 / 1;
  }
  .collage:not(.collage--pair) > .media { display: block; aspect-ratio: auto; }
  .collage:not(.collage--pair) > .media:first-child { grid-row: 1 / span 2; }
}

/* === V-32 (25.09, Walt): home "Про нас" — no sand backdrop; collage + text in one white rounded card like the
   event cards. Дух · Душа · Тіло cards (/pro-nas): links aligned at the bottom; V-42 (the client 30.09) — the card head
   (illustration, title, script line) is centred, the longer text stays left-aligned for reading. === */
.about--card {
  padding: clamp(1rem, 0.6rem + 2vw, 3rem);
  border-radius: var(--r-2xl); background: var(--c-white); box-shadow: var(--sh-1);
}
.pillars > .pillar { display: flex; flex-direction: column; } /* keeps the pillar's own gap; lets the link sink to the bottom */
.pillars > .pillar .link-arrow { margin-top: auto; align-self: flex-start; }
.pillars > .pillar .pillar__art { align-self: center; }
.pillars > .pillar > .pillar__title, .pillars > .pillar > .pillar__sub { text-align: center; }
@media (max-width: 599px) {
  .about--card .about__content .btn { width: 100%; justify-content: center; }
}

/* === V-33 (25.09, Walt): home page — tighter rhythm between blocks. The default section padding (56 px on a
   phone, 120 px on a laptop, per side) gave 112–240 px of empty space between the fitness card, the "Про нас" card,
   the pillars, the gallery and "Підтримати нас". On the home page only (the page with #hero-title) each block gets
   20–40 px per side → 40–80 px between blocks; after the gallery strip about half of that. Other pages unchanged. === */
.site-main:has(#hero-title) > .section { padding-block: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); }
.site-main:has(#hero-title) > #community { padding-bottom: clamp(0.25rem, 0.1rem + 0.6vw, 0.75rem); }
.site-main:has(#hero-title) > #branches { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); } /* V-42: the block right after the hero */

/* === V-34 (25.09, Walt): home "Про нас" card — one photo running to the card edge, no frame, like the retreat
   card. Phone: photo on top (4:3), rounded by the card's top corners. ≥900 px: photo fills the left column to the
   card's full height, rounded by the card's left corners; the text keeps the card padding. === */
.about--card { padding: 0; gap: 0; overflow: hidden; align-items: stretch; }
.about__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.about__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.about--card .about__content { padding: clamp(1.25rem, 0.8rem + 2vw, 3rem); align-self: center; }
@media (min-width: 900px) {
  .about--card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .about__photo { aspect-ratio: auto; min-height: 30rem; }
  .about__photo img { object-position: 50% 50%; }
}

/* === V-42 (30.09, the client): home page.
   1) Дух · Душа · Тіло right under the hero as ONE row of three tiles at every width (phones too): the whole tile is
      the link (blocks.js pillarTiles), illustration · title · short line · destination word, all centred. On a phone
      (<600 px) the short line is hidden so the row stays compact; the title and destination word remain.
   2) "Про нас": «Більше енергії. / Більше спокою. / Більше себе.» — three bold lines as the accent of the card. === */
.pillar-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.5rem, 0.3rem + 1vw, 1.75rem); }
.pillar-tile { display: flex; }
.pillar-tile__inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-height: 44px;
  padding: clamp(0.85rem, 0.6rem + 1.2vw, 2rem) clamp(0.35rem, 0.2rem + 1vw, 1.5rem);
  border-radius: var(--r-lg); background: var(--c-white); box-shadow: var(--sh-1);
  color: var(--c-ink); text-align: center; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pillar-tile--soul .pillar-tile__inner { background: var(--c-blue-100); box-shadow: none; }
.pillar-tile--body .pillar-tile__inner { background: var(--c-lime-200); box-shadow: none; }
a.pillar-tile__inner:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.pillar-tile .pillar__art { height: clamp(3.25rem, 2.6rem + 2.8vw, 5.5rem); margin: 0 0 0.25rem; }
.pillar-tile__title { font-size: clamp(0.9375rem, 0.78rem + 0.8vw, 1.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; }
.pillar-tile__text { font-size: var(--fs-sm); line-height: 1.35; color: var(--text-2); text-wrap: balance; }
.pillar-tile__go {
  display: inline-flex; align-items: center; gap: 0.3em; margin-top: auto; padding-top: 0.2rem;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.2;
}
.pillar-tile__go .icon { width: 1em; height: 1em; flex: none; }
@media (max-width: 599px) { .pillar-tile__text { display: none; } }
@media (min-width: 900px) { .pillar-tile__go { font-size: var(--fs-sm); } }

.about__more { display: grid; gap: 0.15em; font-size: var(--fs-h4); font-weight: 800; line-height: 1.2; color: var(--c-ink); }

/* === V-35 (26.09, Walt): before the client review ===
   1) Retreats: photo hero with a dark shade like Фітнес/home (reuses .hero.fit-hero), two buttons → #retreats-list / #retreats-what;
   2) the featured retreat keeps price + buttons on the same white card (no beige inner box);
   3) sponsors page on a phone: one photo at the top, not two group photos in a row;
   4) donation form on a phone: compact choice cards, amounts as a 3-column row of chips. === */
.retreat-hero__poster { object-position: 50% 60%; }
#retreats-list, #retreats-what { scroll-margin-top: calc(var(--header-h) + 1rem); }
.retreat-spotlight__aside { background: none; padding: 0; border-radius: 0; }
@media (max-width: 899px) { .retreat-spotlight__aside { padding-top: var(--space-4); border-top: 1px solid var(--c-line); } }
@media (max-width: 899px) { [aria-labelledby="sponsors-about"] .sponsor-feature__media { display: none; } }
@media (max-width: 599px) {
  .pay-options__grid { gap: var(--space-2); }
  .pay-option__card { min-height: 0; padding: 0.7rem 0.9rem; gap: 0.25rem 0.75rem; border-radius: var(--r-md); }
  .pay-option__icon { width: 2.25rem; height: 2.25rem; }
  .pay-option__icon .icon { width: 1.2rem; height: 1.2rem; }
  .pay-option__title { font-size: 1rem; }
  .pay-option__text { font-size: 0.8125rem; }
  .pay-option__radio { width: 1.25rem; height: 1.25rem; }
  .pay-option__input:checked + .pay-option__card .pay-option__radio { box-shadow: inset 0 0 0 6px var(--c-ink); }
  .pay-options__grid--amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pay-options__grid--amounts .pay-option__card { grid-template-columns: 1fr; justify-items: center; padding: 0.65rem 0.25rem; }
  .pay-options__grid--amounts .pay-option__radio { display: none; }
  .pay-options__grid--amounts .pay-option__title { font-size: 1rem; white-space: nowrap; }
}

/* === V-36 (26.09): «Наші зустрічі» — page of the club's regular gatherings (events/views/meetings.js).
   Reuses .hero.fit-hero, .retreat-spotlight, .split, .card; only the pieces below are new. === */
.meet-hero__poster { object-position: 50% 40%; }
#meetings-list, #meetings-what { scroll-margin-top: calc(var(--header-h) + 1rem); }
.meet-faith { background: var(--c-white); }
.meet-faith__head { display: flex; align-items: center; gap: var(--space-3); }
.meet-faith__head .pillar__art { height: 3.25rem; margin: 0; }
.meet-faith__head .eyebrow { margin: 0; }
.meet-formats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.meet-format { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.meet-format__num {
  font-family: var(--font-script); font-size: 2.25rem; line-height: 1; color: var(--c-lime);
  min-width: 2.5rem;
}
.meet-photos { list-style: none; margin: 0; padding: 0; }
.meet-photos > .media { border-radius: var(--r-lg); overflow: hidden; }
.meet-more { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 768px) { .meet-more { grid-template-columns: minmax(0, 1fr) auto; } }

/* === V-40 (26.09, Walt): «Продукти» — one page with sections (certificates · masterclasses · recordings · guides),
   home teaser after FAQ, «Подаруй…» strips on Фітнес/Ретрити. Cards reuse .event-card; only the pieces below are new. === */
.shop-hero__poster { object-position: 50% 45%; }
.shop-section, #certificates, #masterclasses, #recordings, #guides, #merch, #box { scroll-margin-top: calc(var(--header-h) + 1rem); }
.shop-nav { margin-bottom: var(--space-2); }
/* Phone: one scrollable row of pills instead of four stacked lines (the page itself never scrolls sideways). */
@media (max-width: 599px) {
  .shop-nav__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0.25rem 0.25rem 0.5rem; margin-inline: -0.25rem; }
  .shop-nav__list::-webkit-scrollbar { display: none; }
  .shop-nav__link { white-space: nowrap; min-height: 2.5rem; padding: 0 0.9rem; font-size: 0.875rem; }
}
.shop-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.shop-nav__link {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border-radius: var(--r-pill);
  background: var(--c-white); box-shadow: var(--sh-1); color: var(--c-ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.shop-nav__link:hover { background: var(--c-lime-100); text-decoration: none; }

.shop-grid { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 2rem); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 600px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 3 → 3 in a row, 4 → 4 in a row (no orphan card), 5+ → rows of 3 */
@media (min-width: 1100px) {
  .shop-grid--3, .shop-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 599px) { .shop-grid--1 { max-width: 32rem; } }
.product-card { grid-template-rows: auto 1fr; }
.product-card .event-card__body { display: flex; flex-direction: column; }
.product-card .event-card__footer { margin-top: auto; }
.product-card .event-card__title { font-size: var(--fs-h4); }
@media (min-width: 768px) { .product-card .event-card__media { aspect-ratio: 16 / 10; } }
.shop-grid--4 .event-card__actions .btn { flex-basis: 100%; }

/* Certificate preview: the PDF design (A5 landscape) as a small card on a sand ground, never cropped. */
.event-card__media.product-cert, .product-cert { display: grid; place-items: center; background: var(--c-sand); }
.event-card__media.product-cert > img, .product-cert > img {
  width: 84%; height: auto; max-height: 86%; object-fit: contain; aspect-ratio: 800 / 564;
  border-radius: 6px; box-shadow: 0 10px 28px rgb(23 23 23 / 0.18);
}
.product-cert--page { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }

/* «Подаруй…» strip */
.gift-strip {
  display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); align-items: center;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); border-radius: var(--r-xl); background: var(--c-lime-100);
}
.gift-strip__art img { display: block; width: 100%; max-width: 22rem; height: auto; border-radius: 6px; box-shadow: 0 10px 28px rgb(23 23 23 / 0.18); transform: rotate(-2deg); }
.gift-strip__body .eyebrow { margin: 0; }
@media (min-width: 768px) { .gift-strip { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

/* === V-41 gift certificate code on the event registration form (fulfilment) === */
.cert-redeem { margin-top: var(--space-5); border-radius: var(--r-lg); border: 1.5px dashed var(--c-line, #d9d2c3); padding: var(--space-4) var(--space-5); }
.cert-redeem__summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: 600; list-style: none; }
.cert-redeem__summary::-webkit-details-marker { display: none; }
.cert-redeem__summary::after { content: '+'; margin-left: auto; font-size: 1.25em; line-height: 1; }
.cert-redeem[open] .cert-redeem__summary::after { content: '−'; }
.cert-redeem__body { margin-top: var(--space-4); }

/* === V-43 (30.09, Walt): «Наші тренерки» on /fitnes — the real trainers: photo, "ІМ’Я • вік", facts, quote ===
   Phone: one scroll-snap row inside its own viewport (cards ~78% wide, the next one peeks in — the page itself never
   scrolls sideways); from 600 px a grid of 2, from 1100 px 3 or 4 in a row. The photo stays as it is (the club's
   black-and-white shots) and is cropped to 4:5; faces sit high, so the crop keeps the upper part. */
#trainers { scroll-margin-top: calc(var(--header-h) + 1rem); }
.coaches .section__head { margin-bottom: var(--space-5); }
.coaches__viewport {
  width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto;
  padding-inline: var(--gutter); padding-block: var(--space-1) var(--space-3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.coaches__viewport::-webkit-scrollbar { display: none; }
.coaches__viewport:focus-visible { outline-offset: -3px; }
.coaches__list { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.coach {
  flex: 0 0 min(78%, 20rem); scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--sh-1);
}
.coach__media { aspect-ratio: 4 / 5; background: var(--c-sand); }
.coach__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.coach__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.coach__name {
  margin: 0; font-size: var(--fs-h4); font-weight: 800; line-height: var(--lh-snug);
  letter-spacing: 0.03em; text-transform: uppercase;
}
.coach__age { font-weight: 700; color: var(--c-lime-ink); white-space: nowrap; }
.coach__dot { margin-inline: 0.4em; }
.coach__facts { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-2); }
.coach__facts li { position: relative; padding-left: 1.15rem; }
.coach__facts li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-lime);
}
.coach__quote {
  margin: auto 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--c-line);
  font-family: var(--font-script); font-size: 1.3rem; line-height: 1.35; color: var(--c-blue-ink);
}
.coach__quote p { margin: 0; }
@media (min-width: 600px) {
  .coaches__viewport { overflow: visible; }
  .coaches__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .coaches__list--1 { grid-template-columns: minmax(0, 22rem); }
}
@media (min-width: 1100px) {
  .coaches__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coaches__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The trainer's own photo is usually vertical (V-43): as the V-27 card background it is cropped high, where the face is. */
.slide__bg { object-position: 50% 30%; }