/* Self-hosted variable fonts (Playfair Display, Montserrat) — cyrillic + latin only */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/montserrat-cyrillic.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: 300 700;
  font-display: swap;
  src: url(fonts/montserrat-latin.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/playfair-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/playfair-latin.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/playfair-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/playfair-italic-latin.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;
}

/* Maison LÉA Pilates — neutral brand (client-approved 2026-10-14)
   Palette: Ivory #FAF8F4 · Cream #EFE6DB · Light Beige #E3D5C7 · Beige #D0B9A7 · Taupe #A8947F · Cappuccino #776354
   Type: Playfair Display (display) + Montserrat (body), both with Cyrillic */

/* Metric-matched fallbacks: text keeps its width while the web fonts load, so nothing jumps */
@font-face { font-family: "Playfair Fallback"; src: local("Georgia"); size-adjust: 106%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 112%; }

:root {
  --shell: #FAF8F4;
  --blush: #EFE6DB;
  --rose: #D0B9A7;
  --mauve: #776354;
  --cocoa: #776354;
  --white: #FAF8F4;
  --muted: #776354;
  --line: #E3D5C7;
  --text: #1A1714; /* all body text: near-black, warm */

  --display: "Playfair Display", "Playfair Fallback", Georgia, serif;
  --body: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 18px;
  --radius-lg: 28px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --shadow: 0 18px 40px -24px rgba(119, 99, 84, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--shell);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* standard upright Cyrillic everywhere: with lang="bg" Montserrat switches to its handwriting-like Bulgarian
   "locl" letters (д, т, в, л), which read poorly. !important because every `font:` shorthand resets this. */
*, *::before, *::after { font-feature-settings: "locl" 0 !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; font-synthesis: none; line-height: 1.12; margin: 0; text-wrap: balance; }
/* keyword H1 shown as the small eyebrow line; the slogan under it is display text (p.h-xl) */
p.h-xl { font-family: var(--display); font-weight: 400; font-synthesis: none; line-height: 1.12; margin: 0; text-wrap: balance; }
:root h1.eyebrow { font-family: var(--body); font-weight: 600; line-height: 1.5; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 7vw, 88px); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.lead { font-size: 18px; color: var(--text); max-width: 56ch; }
.h-xl { font-size: clamp(38px, 6vw, 68px); }
.h-lg { font-size: clamp(32px, 4.4vw, 50px); }
.h-md { font-size: clamp(26px, 3vw, 36px); }
.italic { color: var(--text); }
.center { text-align: center; }
.stack { display: grid; gap: 18px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 15px/1 var(--body);
  padding: 15px 26px; border-radius: 999px;
  background: var(--mauve); color: var(--white);
  border: 1px solid var(--mauve); text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.btn:hover { background: var(--cocoa); border-color: var(--cocoa); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--cocoa); }
.btn--ghost:hover { background: var(--cocoa); color: var(--white); }
.btn--light { background: var(--white); color: var(--text); border-color: var(--white); }
.btn--light:hover { background: var(--blush); border-color: var(--blush); color: var(--text); }
.btn--sm { padding: 10px 18px; font-size: 14px; }

/* Photo placeholders — swap each <div class="ph"> for <img> when real photos arrive */
.ph {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(250, 248, 244,.65), transparent 55%),
    radial-gradient(90% 80% at 85% 90%, rgba(119, 99, 84,.35), transparent 60%),
    var(--blush);
  min-height: 160px;
}
.ph:nth-of-type(3n+2) { background-color: #E3D5C7; }
.ph:nth-of-type(3n) { background-color: #EFE6DB; }
.ph > span {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); opacity: .55;
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph:has(img) { background: var(--blush); }
.lightbox .ph { background: transparent; aspect-ratio: auto; height: min(86vh, 900px); }
.lightbox .ph img { object-fit: contain; }

/* ---------- Header (Frontify: floating pill groups) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 14px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  pointer-events: none;
  min-height: 94px; /* reserve space before main.js injects the nav */
}
.pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px;
  background: rgba(250, 248, 244, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 6px; box-shadow: var(--shadow);
}
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 6px 12px 6px 8px; font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: .02em;
}
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
}
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 9px 14px; border-radius: 10px; transition: background .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--blush); }
.pill .ig {
  position: relative; isolation: isolate; overflow: hidden;
  font-size: 14px; font-weight: 500; text-decoration: none; padding: 9px 12px; border-radius: 10px;
  transition: color .35s ease;
}
/* Instagram gradient fades in on hover (a gradient can't transition, so it lives on a layer) */
.pill .ig::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  opacity: 0; transition: opacity .35s ease;
}
.pill .ig:hover, .pill .ig:focus-visible { color: #FAF8F4; }
.pill .ig:hover::before, .pill .ig:focus-visible::before { opacity: 1; }
.pill .btn { padding: 11px 18px; font-size: 14px; border-radius: 11px; }
.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font: 600 14px var(--body); color: var(--text); padding: 9px 12px; border-radius: 10px;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .pill .ig { display: none; }
  .nav-open .nav-links {
    display: grid; position: absolute; left: var(--gutter); right: var(--gutter); top: 76px;
    background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: var(--shadow);
  }
  .nav-open .nav-links a { padding: 14px 16px; font-size: 16px; }
}

/* ---------- Hero (ClassPass split + collage) ---------- */
.hero { padding-block: clamp(24px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.hero .wrap { max-width: 1680px; padding-inline: clamp(16px, 4vw, 64px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 24px; }
.hero-copy .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--text); }
.hero-meta b { color: var(--text); font-weight: 600; }
.collage {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, clamp(48px, 7vw, 82px));
}
.collage .ph { min-height: 0; }
.collage .c1 { grid-column: 1; grid-row: 1 / 4; }
.collage .c2 { grid-column: 1; grid-row: 4 / 7; }
.collage .c3 { grid-column: 2; grid-row: 1 / 3; }
.collage .c4 { grid-column: 2; grid-row: 3 / 7; }
.collage .c5 { grid-column: 3; grid-row: 1 / 5; }
.collage .c6 { grid-column: 3; grid-row: 5 / 7; }
.next-class {
  grid-column: 2 / 4; grid-row: 5 / 7; align-self: end; justify-self: end;
  position: relative; z-index: 2; margin: 0 -10px -18px 0;
  background: var(--white); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; width: min(320px, 100%);
}
.next-class .time { grid-row: 1 / 3; font-family: var(--display); font-size: 30px; font-weight: 400; color: var(--text); line-height: 1; }
.next-class .t { font-weight: 600; font-size: 14px; }
.next-class .s { font-size: 12px; color: var(--text); }
.next-class .btn { grid-row: 1 / 3; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .next-class { grid-column: 1 / 4; justify-self: stretch; width: auto; margin: 0; }
}

/* ---------- About (Epidemic Sound alternating rows) ---------- */
.about-rows { display: grid; gap: clamp(48px, 7vw, 96px); }
.about-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-row .ph { aspect-ratio: 5 / 4; }
.about-row:nth-child(even) .about-text { order: 2; }
.about-text { display: grid; gap: 16px; }
.about-text p { color: var(--text); max-width: 52ch; }
.text-link { font-weight: 600; color: var(--text); text-decoration: none; border-bottom: 1px solid currentColor; justify-self: start; }
@media (max-width: 760px) {
  .about-row { grid-template-columns: 1fr; }
  .about-row:nth-child(even) .about-text { order: 0; }
  /* phones: the about copy is centred, link and motto included */
  .about-text { text-align: center; justify-items: center; }
  .about-text p { margin-inline: auto; }
  .about-text .text-link { justify-self: center; }
}

/* ---------- Classes (ClassPass image-card mosaic + side text) ---------- */
.classes { background: var(--white); }
.classes-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.class-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.class-card {
  display: block; text-decoration: none;
  background: var(--shell); border-radius: var(--radius); overflow: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.class-card .ph { border-radius: 0; aspect-ratio: 4 / 5 !important; }
.class-card .lbl { padding: 12px 14px; font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; }
.class-card .lbl small { font-weight: 500; color: var(--text); }
/* light lift on hover. The cards are also scroll-reveal items, and .motion .reveal sets its own
   transition, so the lift needs a rule at least as specific to keep its easing */
.class-card, .motion .class-card.reveal {
  transition: opacity .45s cubic-bezier(.2, .7, .2, 1), translate .6s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--delay, 0s), var(--delay, 0s), 0s;
}
@media (hover: hover) { .class-card:hover { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .class-card:hover { transform: none; } }
.class-card:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }
.class-side { display: grid; gap: 22px; }
.class-side dl { margin: 0; display: grid; gap: 16px; }
.class-side dt { font-weight: 700; }
.class-side dd { margin: 2px 0 0; color: var(--text); font-size: 15px; }
@media (max-width: 860px) { .classes-grid { grid-template-columns: 1fr; } }
/* phones: centred hero copy; it starts below the silk pause button (top right) so the eyebrow never runs into it */
@media (max-width: 760px) {
  .hero-copy { text-align: center; justify-items: center; }
  .hero-copy .actions { justify-content: center; width: 100%; }
  .hero--liquid .hero-copy { padding-top: 34px; }
}
/* phones: the blog title ("Съвети от залата" / "Notes from the studio") stays on one line, scaling with the width */
@media (max-width: 760px) {
  body[data-page="blog"] .page-intro .h-xl { white-space: nowrap; font-size: clamp(28px, 9.2vw, 48px); }
  html[lang="en"] body[data-page="blog"] .page-intro .h-xl { font-size: clamp(22px, 7.2vw, 48px); }
}
/* phones: the classes intro is centred like the about copy (the button has an inline justify-self) */
@media (max-width: 760px) {
  .class-side { text-align: center; justify-items: center; }
  .class-side > .btn { justify-self: center !important; }
}

/* ---------- Testimonials (photo + quote cards, swipeable rail with arrows) ---------- */
.testi-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.testi-head .arrows { display: flex; gap: 8px; }
.testi-head .arrows button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; display: grid; place-items: center; color: var(--text); }
.testi-head .arrows button:hover:not([disabled]) { border-color: var(--rose); }
.testi-head .arrows button[disabled] { opacity: .4; cursor: default; }
.testi-head .arrows svg { width: 16px; height: 16px; }
.testi-head .arrows button { transition: border-color .3s, background-color .3s, color .3s, transform .4s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .testi-head .arrows button:hover:not([disabled]) { background: var(--cocoa); border-color: var(--cocoa); color: var(--white); } }
.testi-head .arrows button:active:not([disabled]) { transform: scale(.92); }
#otzivi { overflow: hidden; }
/* the rail bleeds to the right edge of the screen; edges fade in/out as you scroll */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.testi-grid {
  --fade-l: 0px; --fade-r: 72px;
  position: relative; display: flex; gap: clamp(16px, 2.4vw, 28px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 28px;
  margin-left: calc(var(--gutter) * -1); margin-right: min(calc(var(--gutter) * -1), calc(50% - 50vw));
  padding: 22px max(var(--gutter), calc(50vw - 50%)) 14px var(--gutter); scroll-padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  transition: --fade-l .4s ease, --fade-r .4s ease;
}
.testi-grid.is-scrolled { --fade-l: 56px; }
.testi-grid.is-end { --fade-r: 0px; }
.testi-grid::-webkit-scrollbar { display: none; }
.testi-grid:focus-visible { outline: none; }
@media (pointer: fine) { .testi-grid { cursor: grab; } }
.testi-grid.is-drag { cursor: grabbing; user-select: none; }
.testi-grid.is-drag, .testi-grid.is-anim { scroll-snap-type: none; }
.testi-grid.is-drag .testi { pointer-events: none; }
.testi-grid img { -webkit-user-drag: none; user-select: none; }
.testi {
  flex: 0 0 320px; scroll-snap-align: start; display: grid; gap: 16px; align-content: start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 16px 22px;
}
.testi, .motion .testi.reveal {
  transition: opacity .45s cubic-bezier(.2, .7, .2, 1), translate .6s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: 0s;
}
.testi-photo { position: relative; }
.testi-photo .ph { aspect-ratio: 4 / 3; }
.testi-photo .ph img { transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) {
  .testi-grid:not(.is-drag) .testi:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  .testi-grid:not(.is-drag) .testi:hover .ph img { transform: scale(1.05); }
}
/* progress line + counter under the rail */
.testi-foot { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.testi-progress { position: relative; flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.testi-progress span { position: absolute; inset: 0 auto 0 0; width: 20%; background: var(--cocoa); border-radius: 2px; will-change: transform; }
.testi-count { font-family: var(--display); font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.testi-count b { font-weight: 400; color: var(--text); font-size: 20px; }
@media (prefers-reduced-motion: reduce) {
  .testi, .testi-photo .ph img, .testi-grid { transition: none; }
  .testi-grid:not(.is-drag) .testi:hover { transform: none; }
  .testi-grid:not(.is-drag) .testi:hover .ph img { transform: none; }
}
.testi-tag {
  position: absolute; top: -14px; right: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 10px 16px; font-family: var(--display); font-size: 20px; font-weight: 400; font-synthesis: none; color: var(--text);
}
.testi blockquote { margin: 0; font-size: 16px; }
.testi cite { font-style: normal; color: var(--text); font-size: 14px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--mauve); color: var(--white); border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.cta-band p { opacity: .85; margin-top: 10px; }
@media (max-width: 700px) { .cta-band { grid-template-columns: 1fr; } }

/* Liquid silk: WebGL canvas behind, dark wash on the text side, soft text shadow */
.cta-band:has(.liquid-bg) {
  position: relative; overflow: hidden; isolation: isolate;
  background: #776354;
  box-shadow: 0 30px 70px -34px rgba(119, 99, 84, .8);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 80% at 20% 50%, rgba(62, 48, 38, .45), rgba(62, 48, 38, 0) 100%),
    linear-gradient(to right, rgba(62, 48, 38, .72), rgba(62, 48, 38, .45) 45%, rgba(62, 48, 38, .18) 80%);
}
.cta-band > div:not(.liquid-bg) { text-shadow: 0 1px 2px rgba(40, 30, 22, .6), 0 2px 14px rgba(40, 30, 22, .35); }
.cta-band:has(.liquid-bg) h2 { color: #fff; text-shadow: 0 1px 2px rgba(40, 30, 22, .55), 0 2px 18px rgba(40, 30, 22, .4); }
.cta-band:has(.liquid-bg) p { opacity: 1; color: #fff; font-weight: 500; font-size: 16.5px; }
.cta-band:has(.liquid-bg) .btn--light { color: var(--text); box-shadow: 0 6px 20px -8px rgba(80, 64, 52, .7); }
.cta-band:has(.liquid-bg) .btn--light:hover { background: #fff; border-color: #fff; }
.liquid-bg {
  position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(60% 55% at 25% 30%, rgba(208, 185, 167, .28), transparent 70%),
    radial-gradient(55% 50% at 78% 60%, rgba(119, 99, 84, .8), transparent 70%),
    #776354;
}
.liquid-bg canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
/* the canvas is black until its first frame, and the shader starts after page load: fade it in over the still silk */
.liquid-bg.is-live canvas { opacity: 1; }
.liquid-bg.is-static canvas { display: none; }
@media (max-width: 700px) {
  .cta-band::before { background: radial-gradient(90% 70% at 50% 38%, rgba(52, 40, 32, .45), rgba(52, 40, 32, 0) 100%), linear-gradient(rgba(62, 48, 38, .72), rgba(62, 48, 38, .66) 60%, rgba(62, 48, 38, .6)); }
}

/* ---------- Page intro ---------- */
.page-intro { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px); display: grid; gap: 16px; justify-items: center; text-align: center; }
.page-intro .h-xl { line-height: 1.12; }

/* ---------- Schedule (MasterClass tabs + image cards) ---------- */
.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; justify-content: center; scrollbar-width: none; }
.day {
  flex: none; display: grid; justify-items: center; gap: 2px;
  min-width: 64px; padding: 10px 12px; border-radius: 14px; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); font: inherit; color: var(--text);
}
.day .dn { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text); }
.day .dd { font-family: var(--display); font-size: 26px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.day[aria-selected="true"] { background: var(--cocoa); border-color: var(--cocoa); color: var(--white); }
.day[aria-selected="true"] .dn { color: var(--blush); }
.tod { display: flex; justify-content: center; gap: clamp(18px, 4vw, 40px); margin-top: 28px; }
.tod button {
  background: none; border: 0; cursor: pointer; padding: 6px 2px;
  font-family: var(--display); font-size: clamp(22px, 3vw, 30px); font-weight: 400; color: var(--text);
  border-bottom: 2px solid transparent;
}
.tod button[aria-selected="true"] { color: var(--text); border-color: var(--rose); }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 36px; }

/* ---------- Schedule: softer switching between days and parts of the day ---------- */
.day { transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.day .dn { transition: color .35s ease; }
.day:active { transform: scale(.96); }
@media (hover: hover) { .day:not([aria-selected="true"]):hover { border-color: var(--rose); transform: translateY(-2px); } }
.days { scroll-behavior: smooth; }
/* phones: the strip fades at its edges, a hint that it scrolls */
@media (max-width: 640px) {
  .days { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); padding-inline: 6px; }
}
.tod { position: relative; }
.tod button { border-bottom-color: transparent !important; transition: color .35s ease; }
@media (hover: hover) { .tod button:hover { color: var(--text); } }
.tod-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: var(--rose);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), width .45s cubic-bezier(.2, .7, .2, 1);
}
#slots { transition: height .4s cubic-bezier(.2, .7, .2, 1); }
#slots[style*="height"] { overflow: clip; overflow-clip-margin: 24px; } /* while the height eases, new cards stay inside */
#slots.is-out > * { opacity: 0; translate: 0 -6px; transition: opacity .16s ease, translate .16s ease; }
#slots .slot, #slots .empty { animation: slot-in .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes slot-in { from { opacity: 0; translate: 0 14px; } }
@media (prefers-reduced-motion: reduce) {
  .day, .tod-bar, #slots { transition: none; }
  #slots .slot, #slots .empty { animation: none; }
}
.slot { display: grid; gap: 14px; }
.slot .ph { aspect-ratio: 16 / 9; }
/* slot card (ClassPass-style row): time column | class details | button */
.slot-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; }
.slot-time { display: grid; gap: 2px; padding-right: 18px; border-right: 1px solid var(--line); align-self: stretch; align-content: center; }
.slot-time b { font-family: var(--display); font-size: 26px; font-weight: 400; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.slot-time small { font-size: 13px; color: var(--text); }
.slot-main { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.slot h3 { font-size: 24px; line-height: 1.1; }
.slot .info { margin: 0; font-size: 14px; color: var(--text); display: flex; flex-wrap: wrap; gap: 2px 8px; }
.slot .info span + span::before { content: "·"; margin-right: 8px; }
.slot .spots { font-weight: 600; color: var(--text); }
.slot .spots.full { color: var(--text); }
.slot .slot-main .spots { justify-self: start; }
.slot .btn { grid-column: 3; grid-row: 1; }
.slot .btn[disabled] { background: var(--line); border-color: var(--line); color: var(--text); cursor: not-allowed; transform: none; }
/* finished class: a warm frosted veil over the photo and a link to the next free class */
.slot.is-past .ph::after { content: ""; position: absolute; inset: 0; background: rgba(239, 230, 219, .5); -webkit-backdrop-filter: blur(8px) saturate(.8); backdrop-filter: blur(8px) saturate(.8); }
.slot-veil { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px; text-align: center; }
.slot-veil i { font-family: var(--display); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; color: var(--text); }
.next-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(250, 248, 244, .85); color: var(--text); font: 600 13px/1.3 var(--body); cursor: pointer; transition: background .2s; }
.next-chip:hover { background: var(--white); }
.next-chip .pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8FA37E; animation: chip-pulse 2s infinite; }
@keyframes chip-pulse { 0% { box-shadow: 0 0 0 0 rgba(143, 163, 126, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(143, 163, 126, 0); } }
.slot.is-past :is(.slot-time b, h3) { color: #8B7B6E; }
@media (prefers-reduced-motion: reduce) { .next-chip .pulse { animation: none; } }
/* schedule: class type filter (in step with the booking card's type buttons) */
.sched-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.sched-type { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--text); font: 600 13px/1.2 var(--body); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.sched-type span { font-weight: 500; opacity: .75; }
.sched-type[aria-pressed="true"] { background: var(--cocoa); border-color: var(--cocoa); color: var(--white); }
@media (hover: hover) { .sched-type:not([aria-pressed="true"]):hover { border-color: var(--rose); } }
/* phones: an even 2 × 2 grid, the sub-label on its own line (same pattern as the booking card types) */
@media (max-width: 600px) {
  .sched-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin-inline: auto; }
  .sched-type { display: grid; place-content: center; justify-items: center; gap: 1px; min-height: 52px; padding: 8px 10px; border-radius: 16px; text-align: center; font-size: 14px; }
  .sched-type span { font-size: 12px; }
}
/* day pills: a green dot = free spots; nothing to book = faded */
.day .dot { width: 5px; height: 5px; margin-top: 2px; border-radius: 50%; background: transparent; }
.day.is-open .dot { background: #8FA37E; }
.day.is-open[aria-selected="true"] .dot { background: var(--blush); }
.day:is(.is-full, .is-none):not([aria-selected="true"]) { opacity: .5; }
.day--wk2 { margin-left: 14px; }
/* parts of the day: how many spots are free */
.tod button .cnt { position: relative; top: -3px; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: var(--blush); font: 600 11px/1 var(--body); vertical-align: middle; }
.tod button .cnt:empty { display: none; }
.tod button.is-none { opacity: .4; }
:is(.day, .tod button, .sched-type):focus-visible { outline: 2px solid var(--cocoa); outline-offset: 3px; }
/* earlier finished classes fold into one line */
.past-fold { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.past-fold summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; }
.past-fold summary::-webkit-details-marker { display: none; }
.past-fold .dots { display: flex; gap: 4px; }
.past-fold .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
.past-fold summary svg { width: 16px; height: 16px; margin-left: auto; transition: rotate .3s; }
.past-fold[open] summary svg { rotate: 180deg; }
.past-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; color: #8B7B6E; }
.past-row b { font-family: var(--display); font-size: 20px; font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1px; }
.past-row span:last-child { font-size: 12px; font-weight: 600; white-space: nowrap; }
.empty { display: grid; justify-items: center; gap: 14px; }
@media (max-width: 700px) { .past-row { grid-template-columns: 52px 1fr; } .past-row span:last-child { display: none; } }
.empty { text-align: center; color: var(--text); padding: 48px 0; grid-column: 1 / -1; }
@media (max-width: 700px) { .slots { grid-template-columns: 1fr; } }

/* ---------- Instructors (Podia rounded cards) ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.member { border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.member .ph { aspect-ratio: 1 / 1; border-radius: 0; }
.member-body { padding: 16px 18px 20px; display: grid; gap: 4px; }
.member-body b { font-size: 16px; }
.member-body span { font-size: 14px; color: var(--text); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Pricing (Framer: 3 cards, middle filled) ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; align-items: stretch; }
.price {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; display: grid; gap: 18px; align-content: start;
}
.price .name { font-weight: 700; }
.price .amount { font-family: var(--display); font-size: 48px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.price .amount small { font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--text); }
.price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.price li { display: flex; gap: 10px; }
.price li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--rose); }
.price .btn { justify-content: center; margin-top: auto; }
.price--feat { background: var(--mauve); border-color: var(--mauve); color: var(--white); }
.price--feat .amount small, .price--feat .note { color: #FAF8F4; }
.price--feat li::before { background: var(--blush); }
.price .note { font-size: 13px; color: var(--text); }
.badge { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--blush); color: var(--text); padding: 5px 10px; border-radius: 999px; }
.single-prices { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 15px; color: var(--text); }
.single-prices b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ (OpenPhone chevron rows) ---------- */
.faq { max-width: 860px; margin: 40px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; font-size: 17px;
  transition: color .25s;
}
.faq summary:hover, .faq details.is-open summary { color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
/* chevron in a soft circle; rotates without shifting */
.faq summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background:
    linear-gradient(var(--mauve), var(--mauve)) center / 12px 2px no-repeat,
    linear-gradient(var(--mauve), var(--mauve)) center / 2px 12px no-repeat,
    var(--white);
  border: 1px solid var(--line);
  transition: transform .45s cubic-bezier(.65, 0, .35, 1), background-color .25s, border-color .25s;
}
.faq summary:hover::after { border-color: var(--rose); }
.faq details.is-open summary::after {
  transform: rotate(135deg); border-color: var(--mauve);
  background:
    linear-gradient(var(--white), var(--white)) center / 12px 2px no-repeat,
    linear-gradient(var(--white), var(--white)) center / 2px 12px no-repeat,
    var(--mauve);
}
.faq .faq-body { overflow: hidden; }
.faq details p {
  padding: 0 52px 24px 4px; color: var(--text); max-width: 68ch;
  opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.faq details.is-open p { opacity: 1; transform: none; transition-delay: .08s; }

/* ---------- Gallery (Retool scattered strip + grid) ---------- */
.scatter { position: relative; display: flex; justify-content: center; align-items: center; padding-block: 30px 50px; overflow: hidden; }
.scatter .ph { flex: none; width: clamp(150px, 26vw, 320px); aspect-ratio: 4 / 3; box-shadow: var(--shadow); border: 4px solid var(--white); }
.scatter .ph:nth-child(1) { transform: translateY(-26px) rotate(-3deg); margin-right: -30px; }
.scatter .ph:nth-child(2) { transform: translateY(18px) rotate(1.5deg); z-index: 2; width: clamp(180px, 32vw, 400px); }
.scatter .ph:nth-child(3) { transform: translateY(-16px) rotate(3deg); margin-left: -30px; }
.scatter .ph:nth-child(4) { transform: translateY(30px) rotate(-2deg); margin-left: -20px; }
.gallery-grid { columns: 3 240px; column-gap: 14px; }
.gallery-grid button {
  all: unset; display: block; width: 100%; margin-bottom: 14px; cursor: zoom-in; break-inside: avoid; border-radius: var(--radius);
}
.gallery-grid button:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }
.gallery-grid .ph { transition: transform .3s; }
.gallery-grid button:hover .ph { transform: scale(.985); }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.filters button {
  font: 600 14px var(--body); color: var(--text); cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
}
.filters button[aria-pressed="true"] { background: var(--cocoa); color: var(--white); border-color: var(--cocoa); }

/* ---------- Contact: one tile system — 4 equal info cards on top, map | form below at equal height ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
/* left column matches the form height: the map takes whatever space the buttons leave */
.contact-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-grid > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.info-grid h2, .info-grid h3 { font-size: 21px; font-weight: 400; color: var(--text); margin-bottom: 4px; }
/* contact details must be easy to read: solid weight and the standard upright Cyrillic forms
   (Montserrat's Bulgarian "locl" forms make д/в/т look handwritten) */
.info-grid p, .info-grid a { font-size: 16px; line-height: 1.55; font-weight: 600; color: var(--text); font-feature-settings: "locl" 0; }
.info-grid a { text-decoration: none; border-bottom: 1.5px solid var(--rose); }
.info-grid a:hover { border-bottom-color: var(--cocoa); }
/* social links as the original brand marks (Instagram gradient tile, Facebook blue "f") */
.soc-row { display: flex; gap: 10px; margin-top: 12px; }
.info-grid a.soc {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 13px;
  box-shadow: 0 8px 18px -10px rgba(80, 64, 52, .55); transition: transform .2s, box-shadow .2s;
}
.info-grid a.soc:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -10px rgba(80, 64, 52, .6); }
.info-grid a.soc:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.soc svg { width: 24px; height: 24px; }
.soc--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.info-grid a.soc--fb { background: #fff; border-radius: 50%; }
.soc--fb svg { width: 44px; height: 44px; }
.soc--fb svg path { fill: #0866ff; }
.info-grid a.soc--tel { background: linear-gradient(180deg, #5BF675 0%, #0CBD2A 100%); }
.info-grid a.soc--mail { background: linear-gradient(180deg, #F0675B 0%, #D93025 100%); }
.soc--tel svg, .soc--mail svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .soc-row { justify-content: center; } }
.form-card { background: var(--cocoa); color: var(--white); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); display: grid; gap: 22px; }
.form-card h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 400; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fields .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.field input, .field select, .field textarea {
  font: 15px var(--body); color: inherit; width: 100%;
  background: rgba(250, 248, 244,.08); border: 1px solid rgba(250, 248, 244,.16); border-radius: 10px; padding: 12px 14px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field select option { color: var(--text); }

/* ---------- Pretty select (assets/select.js) ---------- */
.sel { position: relative; }
.sel-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.sel-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer;
  font: 15px var(--body); color: inherit;
  background: rgba(250, 248, 244,.08); border: 1px solid rgba(250, 248, 244,.16); border-radius: 10px; padding: 12px 14px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.sel-btn:hover { background: rgba(250, 248, 244,.12); }
.sel-btn:focus-visible, .sel.is-open .sel-btn { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(208, 185, 167, .25); }
.sel-btn svg { width: 18px; height: 18px; flex: none; opacity: .75; transition: rotate .3s cubic-bezier(.2, .7, .2, 1); }
.sel.is-open .sel-btn svg { rotate: 180deg; }
.sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  width: max(100%, min(270px, calc(100vw - 32px)));
  max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); color: var(--text); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 50px -18px rgba(119, 99, 84, .55), 0 2px 8px rgba(119, 99, 84, .08);
  opacity: 0; translate: 0 -6px; scale: .98; transform-origin: 50% 0;
  transition: opacity .18s ease, translate .25s cubic-bezier(.2, .7, .2, 1), scale .25s cubic-bezier(.2, .7, .2, 1);
}
.sel.is-up .sel-list { top: auto; bottom: calc(100% + 8px); transform-origin: 50% 100%; translate: 0 6px; }
.sel.is-open .sel-list { opacity: 1; translate: 0 0; scale: 1; }
.sel-list:focus { outline: none; }
.sel-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: 10px; font-size: 15px; cursor: pointer; transition: background .15s, color .15s;
}
.sel-list li + li { margin-top: 2px; }
.sel-list li svg { width: 17px; height: 17px; flex: none; color: var(--text); opacity: 0; scale: .6; transition: opacity .2s, scale .25s cubic-bezier(.34, 1.56, .64, 1); }
.sel-list li.is-active { background: var(--shell); }
.sel-list li[aria-selected="true"] { color: var(--text); font-weight: 600; background: rgba(239, 230, 219, .45); }
.sel-list li[aria-selected="true"] svg { opacity: 1; scale: 1; }
.sel-list li[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* light forms (booking card, modal) */
.bk-card .sel-btn, .modal .sel-btn { background: var(--white); border-color: var(--line); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .sel-list, .sel-btn svg { transition: none; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; opacity: .85; }
.check input { margin-top: 3px; accent-color: var(--rose); }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-msg { font-size: 14px; color: var(--blush); }
.map-card {
  position: relative; flex: 1; min-height: 280px; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--blush); border: 1px solid var(--line); box-shadow: var(--shadow);
}
/* full-colour Google map, slightly crisper */
.map-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(1.15) contrast(1.03); }
.map-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.map-actions .btn { justify-content: center; white-space: nowrap; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .fields, .info-grid, .map-actions { grid-template-columns: 1fr; } }

/* ---------- Booking modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(119, 99, 84, .55); }
.modal[hidden] { display: none; }
.modal-card {
  background: var(--shell); border-radius: var(--radius-lg); width: min(520px, 100%); max-height: 92vh; overflow: auto;
  padding: clamp(22px, 4vw, 34px); display: grid; gap: 20px; box-shadow: 0 30px 80px -30px rgba(119, 99, 84,.5);
}
.modal-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.modal-close { background: var(--white); border: 1px solid var(--line); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 18px; color: var(--text); flex: none; }
.booking-summary { background: var(--white); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; font-size: 14px; color: var(--text); }
.booking-summary b { color: var(--text); font-size: 16px; }
.modal .field input { background: var(--white); border-color: var(--line); color: var(--text); }
.modal .check { opacity: 1; color: var(--text); }
.modal .done { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 10px 0; }
.modal .done .mark { width: 56px; height: 56px; border-radius: 50%; background: var(--mauve); color: var(--white); display: grid; place-items: center; font-size: 26px; }

/* ---------- Booking card (date pills + time grid) ---------- */
.bk-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 6vw, 80px);
  align-items: start; padding-block: clamp(40px, 7vw, 88px) clamp(56px, 8vw, 104px);
}
.bk-intro { display: grid; gap: 18px; align-content: center; }
.bk-perks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.bk-perks li { display: flex; gap: 12px; align-items: center; }
.bk-perks li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); flex: none; }
@media (max-width: 900px) {
  .bk-split { grid-template-columns: 1fr; }
  /* stacked above the booking card: centre the intro */
  .bk-intro { justify-items: center; text-align: center; }
  .bk-intro .lead { margin-inline: auto; }
  .bk-perks { justify-items: center; }
}

.bk-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 3.4vw, 30px); display: grid; gap: 18px; box-shadow: var(--shadow);
}
.bk-title { font-size: clamp(26px, 3vw, 32px); font-weight: 400; }
.bk-sub { color: var(--text); font-size: 14px; margin-top: 6px; }

.bk-days {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: -4px; padding: 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.bk-days::-webkit-scrollbar { display: none; }
.bk-day {
  flex: 0 0 56px; scroll-snap-align: start; display: grid; gap: 2px; justify-items: center;
  padding: 10px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--shell);
  font-family: var(--body); color: var(--text); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.bk-day span { font-size: 11px; color: var(--text); }
.bk-day b { font-size: 17px; font-weight: 600; }
.bk-day:hover { border-color: var(--rose); }
.bk-day[aria-selected="true"] { background: var(--cocoa); border-color: var(--cocoa); color: var(--white); }
.bk-day[aria-selected="true"] span { color: var(--blush); }
.bk-day[disabled] { opacity: .32; cursor: not-allowed; border-style: dashed; }
.bk-day[disabled]:hover { border-color: var(--line); }

/* class type picker above the dates */
.bk-types { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; } /* the middle one says "индивидуална" */
/* phones: the two Reformer tabs side by side, Mat on its own row below (nothing gets cut) */
@media (max-width: 440px) {
  .bk-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-type:last-child { grid-column: 1 / -1; grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 8px; }
}
.bk-type {
  display: grid; gap: 2px; justify-items: center; text-align: center; padding: 10px 6px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--white);
  font-family: var(--body); color: var(--text); cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.bk-type b { font-size: 14px; font-weight: 700; }
.bk-type span { font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bk-type:hover { border-color: var(--rose); }
.bk-type[aria-pressed="true"] { background: var(--blush); border-color: var(--mauve); color: var(--text); }
.bk-type[aria-pressed="true"] span { color: var(--text); }

.bk-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; height: 300px; overflow-y: auto; padding: 2px; }
.bk-slot {
  display: grid; gap: 1px; justify-items: center; text-align: center;
  padding: 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--shell);
  font-family: var(--body); color: var(--text); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.bk-slot b { font-size: 16px; font-weight: 600; }
.bk-slot span { font-size: 12px; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-slot small { font-size: 11px; color: var(--text); font-weight: 600; }
.bk-slot:hover:not([disabled]) { border-color: var(--rose); transform: translateY(-1px); }
.bk-slot[aria-selected="true"] { background: var(--cocoa); border-color: var(--cocoa); color: var(--white); }
.bk-slot[aria-selected="true"] span, .bk-slot[aria-selected="true"] small { color: var(--blush); }
.bk-slot[disabled] { opacity: .45; cursor: not-allowed; }
.bk-slot[disabled] b { text-decoration: line-through; }
.bk-empty { display: grid; place-items: center; height: 300px; text-align: center; color: var(--text); font-size: 14px; }

.bk-progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bk-progress i { display: block; height: 100%; background: var(--mauve); border-radius: inherit; transition: width .3s; }
.bk-none {
  justify-self: center; font-size: 14px; font-weight: 500; text-decoration: none;
  padding: 10px 20px; border-radius: 999px; background: var(--shell); border: 1px solid var(--line);
}
.bk-none:hover { background: var(--blush); }

.bk-fields { display: grid; gap: 12px; }
.bk-card .booking-summary { background: var(--shell); border: 1px solid var(--line); }
.bk-card .field input { background: var(--shell); border-color: var(--line); color: var(--text); }
.bk-card .check { opacity: 1; color: var(--text); }
.bk-msg { font-size: 14px; color: var(--text); min-height: 1.2em; }

.bk-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.bk-back { background: none; border: 0; font: 500 15px var(--body); color: var(--text); cursor: pointer; padding: 10px 4px; }
.bk-back[hidden] { display: block; visibility: hidden; }
.bk-back:hover { color: var(--text); }
.bk-go {
  min-width: 0; display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 999px;
  background: var(--cocoa); color: var(--white); border: 1px solid var(--cocoa);
  font: 600 14px/1 var(--body); cursor: pointer; transition: background .2s, transform .2s;
}
.bk-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-go:hover:not([disabled]) { background: var(--mauve); border-color: var(--mauve); transform: translateY(-1px); }
.bk-go[disabled] { background: var(--line); border-color: var(--line); color: var(--text); cursor: not-allowed; }
.bk-done { text-align: center; justify-items: center; padding-block: 40px; }
.bk-done .mark { width: 56px; height: 56px; border-radius: 50%; background: var(--mauve); color: var(--white); display: grid; place-items: center; font-size: 26px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(119, 99, 84, .85); display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox .ph { width: min(900px, 100%); aspect-ratio: 4 / 3; }

/* ---------- Footer (Norma minimal) ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px 28px; margin-top: clamp(40px, 6vw, 80px); }
.footer-top { display: grid; grid-template-columns: 1.4fr auto auto; gap: 40px 64px; }
.footer-brand { display: grid; gap: 8px; align-content: start; }
/* big round logo on the left, name + text + newsletter stacked beside it */
.footer-logo {
  grid-column: 1; grid-row: 1 / span 4; align-self: start;
  width: clamp(104px, 11vw, 160px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow);
}
.footer-brand > :not(.footer-logo) { grid-column: 2; }
.footer-brand .name { font-family: var(--display); font-size: 30px; font-weight: 400; }
.footer-brand p { color: var(--text); font-size: 15px; }
.join { margin-top: 14px; display: flex; max-width: 340px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.join input { flex: 1; min-width: 0; border: 0; background: none; font: 14px var(--body); padding: 8px 14px; color: var(--text); }
.join input:focus { outline: none; }
.join:focus-within { border-color: var(--mauve); }
.join button { border: 0; border-radius: 999px; background: var(--cocoa); color: var(--white); font: 600 13px var(--body); padding: 9px 18px; cursor: pointer; }
.join-msg { font-size: 13px; color: var(--text); min-height: 1.4em; }
.footer-col h2 { font-family: var(--body); font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: var(--text); }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--text); }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- Page transitions ---------- */
/* Browsers with cross-document View Transitions: header stays put, content cross-fades and drifts up */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: page-out .28s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: page-in .5s cubic-bezier(.2, .7, .2, 1) .08s both; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes page-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }

/* Fallback (other browsers, file://): main.js adds .no-vt and .is-leaving */
.no-vt main, .no-vt .site-footer { animation: page-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.no-vt.is-leaving main, .no-vt.is-leaving .site-footer { animation: page-out .24s cubic-bezier(.4, 0, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .no-vt main, .no-vt .site-footer { animation: none !important; }
}

/* ---------- Motion: scroll reveal, word reveal, parallax ----------
   main.js adds .motion to <html> only when JS runs and motion is allowed,
   so without JS (or with reduced motion) everything is simply visible. */
.motion .reveal {
  opacity: 0; translate: 0 10px;
  transition: opacity .45s cubic-bezier(.2, .7, .2, 1), translate .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--delay, 0s);
}
.motion .reveal.is-visible { opacity: 1; translate: 0 0; }
/* hero collage photos: fade + settle from a slight zoom (their frames carry the depth parallax) */
.motion .reveal-zoom { opacity: 0; scale: 1.08; transition: opacity 1s ease, scale 1.4s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--delay, 0s); }
.motion .reveal-zoom.is-visible { opacity: 1; scale: 1; }

.motion .split .w {
  display: inline-block; opacity: 0; translate: 0 .5em; filter: blur(6px);
  transition: opacity .5s ease, translate .6s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
  transition-delay: calc(var(--i, 0) * 40ms);
}
.motion .split.is-visible .w { opacity: 1; translate: 0 0; filter: blur(0); }

/* parallax photos: the image is a bit larger than its frame and drifts inside it */
.motion [data-parallax] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; }

/* hero background "Horizon" (Mobbin ref: Superpower): warm glow behind the collage,
   and a curved horizon in the page colour that melts into the next section */
.hero { position: relative; isolation: isolate; overflow-x: clip; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero::before { inset: 0; background: radial-gradient(60% 70% at 70% 45%, #EFE6DB 0%, #EFE6DB 45%, var(--shell) 75%); }
.hero::after {
  left: -20%; right: -20%; bottom: -62%; height: 80%; border-radius: 50%;
  background: var(--shell); box-shadow: 0 -30px 80px rgba(208, 185, 167, .25);
}
@media (max-width: 860px) {
  .hero::before { background: radial-gradient(90% 55% at 50% 70%, #EFE6DB 0%, #EFE6DB 45%, var(--shell) 80%); }
  /* phones: the hero is very tall, so a %-based ellipse turned into a dome — use a wide, shallow arc instead */
  .hero::after { left: -28%; right: -28%; height: 250px; bottom: -158px; box-shadow: 0 -18px 50px rgba(208, 185, 167, .22); }
}
/* collage stays straight (no tilt) but each photo floats at its own depth:
   per-tile perspective scales it around its own centre, closer tiles get bigger/softer
   shadows and sit on top, a glossy edge catches the light */
.collage { position: relative; --k: 1; }
.collage > * { transform: perspective(900px) translateZ(calc(var(--z, 0px) * var(--k))); }
.collage .ph {
  box-shadow:
    0 2px 4px rgba(119, 99, 84, .08),
    0 calc(10px + var(--d, 0) * 26px) calc(24px + var(--d, 0) * 40px) calc(-8px - var(--d, 0) * 8px) rgba(119, 99, 84, calc(.22 + var(--d, 0) * .18)),
    0 calc(24px + var(--d, 0) * 50px) calc(60px + var(--d, 0) * 50px) -30px rgba(119, 99, 84, .35);
}
.collage .ph::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(250, 248, 244, .28) 0%, rgba(250, 248, 244, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(250, 248, 244, .45), inset 0 -18px 30px -18px rgba(119, 99, 84, .25);
}
.collage .c3 { --z: 0px;  --d: 0;   z-index: 1; }
.collage .c5 { --z: 6px;  --d: .2;  z-index: 2; }
.collage .c1 { --z: 12px; --d: .45; z-index: 3; }
.collage .c4 { --z: 18px; --d: .65; z-index: 4; }
.collage .c2 { --z: 24px; --d: .85; z-index: 5; }
.collage .c6 { --z: 30px; --d: 1;   z-index: 6; }
.collage .next-class {
  --z: 70px; z-index: 7;
  box-shadow: 0 2px 6px rgba(119, 99, 84, .08), 0 40px 70px -24px rgba(119, 99, 84, .45), 0 18px 30px -18px rgba(119, 99, 84, .35);
}
@media (max-width: 860px) { .collage { --k: .5; } }

/* CTA band opens as a widening circle while it scrolls in */
.motion .cta-band { clip-path: circle(var(--cta-r, 12%) at 50% 55%); }
.motion .cta-band > :not(.liquid-bg) { opacity: var(--cta-o, 0); translate: 0 calc((1 - var(--cta-o, 0)) * 12px); }


/* ==========================================================================
   Responsive polish — mobile/tablet refinements (Mobbin refs: Cash App menu,
   Lloyds/Bumble swipe cards, Shopify stacked plans, Fresha bottom sheet)
   ========================================================================== */

/* Global fixes */
figure { margin: 0; }
.next-class .time { grid-column: 1; grid-row: 1 / 3; }
.next-class .t, .next-class .s { grid-column: 2; min-width: 0; }
.next-class .btn { grid-column: 3; grid-row: 1 / 3; }
.price--feat .note { color: #FAF8F4; }
.brand, .pill .btn, .menu-toggle { white-space: nowrap; }

/* Day tabs: centred when they fit, scrollable from the first day when they don't */
.days { justify-content: flex-start; }
.days > :first-child { margin-left: auto; }
.days > :last-child { margin-right: auto; }

/* Hamburger icon */
.menu-toggle { align-items: center; gap: 8px; }
.menu-ico { position: relative; width: 18px; height: 12px; display: inline-block; }
.menu-ico::before, .menu-ico::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .3s cubic-bezier(.65, 0, .35, 1), top .3s cubic-bezier(.65, 0, .35, 1);
}
.menu-ico::before { top: 1px; }
.menu-ico::after { top: 9px; }
.nav-open .menu-ico::before { top: 5px; transform: rotate(45deg); }
.nav-open .menu-ico::after { top: 5px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .site-header { min-height: 80px; padding-block: 12px; }
  .menu-toggle { display: inline-flex; }

  /* Full-width menu sheet with large serif rows + chevrons */
  .nav-open .nav-links {
    position: fixed; top: 84px; left: var(--gutter); right: var(--gutter);
    max-height: calc(100dvh - 100px); overflow-y: auto;
    padding: 8px 8px 12px; gap: 0; border-radius: 22px;
    animation: menu-in .32s cubic-bezier(.2, .7, .2, 1) both;
  }
  .nav-open .nav-links li + li { border-top: 1px solid var(--line); }
  .nav-open .nav-links a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 14px; font-family: var(--display); font-size: 26px; font-weight: 400; border-radius: 14px;
  }
  .nav-open .nav-links a::after {
    content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px;
    border-top: 2px solid var(--rose); border-right: 2px solid var(--rose); transform: rotate(45deg);
  }
  .nav-open .nav-links a[aria-current="page"] { background: var(--shell); color: var(--text); }
  .nav-scrim { position: fixed; inset: 0; z-index: -1; background: rgba(119, 99, 84, .28); pointer-events: auto; animation: fade-in .25s both; }

  .bk-split, .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 901px) { .nav-scrim { display: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }

@media (max-width: 860px) {
  .hero-grid, .classes-grid { grid-template-columns: minmax(0, 1fr); }

  /* Collage: taller tiles, next-class card tucked under it */
  .collage { grid-template-rows: repeat(6, clamp(52px, 15vw, 96px)) auto; }
  .next-class { grid-column: 1 / -1; grid-row: 7; justify-self: center; width: calc(100% - 24px); margin: -44px 0 0; }

  /* Classes: copy first, cards as a swipeable rail */
  .class-side { order: -1; }
  .class-cards {
    columns: auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .class-cards::-webkit-scrollbar { display: none; }
  .class-card { flex: 0 0 min(64%, 260px); margin: 0; scroll-snap-align: start; }
  .class-card .ph { aspect-ratio: 4 / 5 !important; }

  /* Pricing: most popular plan first */
  .price--feat { order: -1; }
}

@media (max-width: 760px) {
  .about-row { grid-template-columns: minmax(0, 1fr); }

  /* Testimonials: narrower cards on phones */
  .testi-grid { gap: 14px; --fade-r: 28px; }
  .testi-grid.is-scrolled { --fade-l: 20px; }
  .testi-head .arrows { display: none; }
  .testi { flex-basis: min(84%, 340px); }
  .testi-tag { font-size: 17px; padding: 7px 13px; }
  .rail-hint { display: block; }

  .team-grid { gap: 12px; }
  .member-body { padding: 12px 14px 16px; }
}
.rail-hint { display: none; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-top: 10px; }

@media (max-width: 700px) {
  .cta-band { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; gap: 22px; padding: 44px 24px 36px; }
  .cta-band > div:not(.liquid-bg) { display: grid; gap: 10px; justify-items: center; }
  /* two lines whenever they fit: no ch cap, balanced wrap, size scales with the card */
  .cta-band h2 { font-size: clamp(23px, 7.4vw, 36px); line-height: 1.1; text-wrap: balance; max-width: none; }
  .cta-band p { margin-top: 0; max-width: 28ch; font-size: 15px; line-height: 1.55; }
  .cta-band .btn { justify-self: stretch; justify-content: center; }

  /* slot card on phones: time | details, then a full-width "Запази" under them */
  .slot { gap: 12px; }
  .slot .ph { aspect-ratio: 2 / 1; }
  .slot-body { grid-template-columns: auto minmax(0, 1fr); gap: 14px 14px; align-items: start; }
  .slot-time { padding-right: 14px; align-content: start; }
  .slot-time b { font-size: 24px; }
  .slot h3 { font-size: 21px; }
  .slot .info { font-size: 13.5px; }
  .slot .btn { grid-column: 1 / -1; grid-row: 2; justify-content: center; padding-block: 12px; }

  /* Gallery: two columns, filters as a scroll row */
  .gallery-grid { columns: 2; column-gap: 10px; }
  .gallery-grid button { margin-bottom: 10px; }
  .filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }
  .filters > :first-child { margin-left: auto; }
  .filters > :last-child { margin-right: auto; }

  /* Booking modal becomes a bottom sheet */
  .modal { place-items: end stretch; padding: 0; }
  .modal-card { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; padding-bottom: max(22px, env(safe-area-inset-bottom)); animation: sheet-up .38s cubic-bezier(.2, .7, .2, 1) both; }
  .modal-card::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -8px 0 -6px; }

  .page-intro { padding-block: 28px 40px; }
  .section { padding-block: 56px; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }

@media (max-width: 480px) {
  .brand { font-size: 19px; padding: 4px 8px 4px 4px; gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .pill { padding: 5px; border-radius: 14px; }
  .pill .btn { padding: 10px 14px; font-size: 13.5px; }
  .menu-toggle { padding: 9px 10px; }
  .menu-txt { display: none; }

  .hero-copy { gap: 20px; }
  .hero-copy .actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; line-height: 1.25; }
  .hero-meta { gap: 6px 16px; font-size: 13.5px; }
  .lead { font-size: 17px; }

  .bk-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-foot { flex-wrap: wrap; }
  .bk-go { flex: 1; justify-content: center; }

  .price { padding: 26px 22px; }
  .price .amount { font-size: 48px; }
  .faq summary { font-size: 16px; padding-block: 18px; }
  .faq details p { padding-right: 4px; }

  .footer-top { gap: 32px 20px; }
  .join { max-width: none; }
}

@media (max-width: 360px) {
  .brand-text { display: none; }
  .day { min-width: 56px; padding-inline: 8px; }
}
.nav-scrim { display: none; }
@media (max-width: 900px) { .nav-open .nav-scrim { display: block; } }
@media (max-width: 760px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-brand { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(18px, 2.4vw, 32px); }
/* phones: logo + name side by side, text and newsletter full width below */
@media (max-width: 480px) {
  .footer-logo { grid-row: 1; width: 84px; }
  .footer-brand > .name { align-self: center; }
  .footer-brand > :is(p, .join) { grid-column: 1 / -1; }
  .footer-brand .join { max-width: none; }
}
.join input { width: 100%; }
/* aspect-ratio + min-height would otherwise force a min-width wider than the column */
.ph:has(img) { min-height: 0; }
@media (max-width: 900px) { .menu-toggle { margin-left: 2px; } }
/* backdrop-filter makes the pill the containing block of the fixed menu — drop it while open */
@media (max-width: 900px) {
  .nav-open .pill { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--white); }
  .nav-open .nav-links { overflow-x: hidden; }
}
@media (min-width: 861px) { .next-class { width: min(360px, 100%); } .next-class .t { white-space: nowrap; } }
@media (max-width: 480px) { .next-class .time { font-size: 26px; } }

/* New pages (legal, blog, intro offer) — mobile */
@media (max-width: 600px) {
  body .legal-doc table, body .legal-doc tbody, body .legal-doc tr, body .legal-doc td { display: block; width: 100%; }
  body .legal-doc table { background: none; border-radius: 0; }
  body .legal-doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body .legal-doc tr { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 6px 14px; margin-bottom: 10px; }
  body .legal-doc td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
  body .legal-doc tr td:last-child { border-bottom: 0; }
  body .legal-doc td::before { content: attr(data-label); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text); }
  body .legal-doc td:first-child { font-weight: 700; }

  body .blog-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 20px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  body .blog-tabs::-webkit-scrollbar { display: none; }
  body .blog-tabs button { flex: none; }

  body .offer-card .btn { padding-inline: 22px; white-space: nowrap; }
}


/* Instructor bento: bigger headings, text that fills its tile, no holes on phones */
body .bento { grid-auto-rows: minmax(150px, auto); }
body .bento .tile { padding: clamp(20px, 2.4vw, 28px); gap: 12px; overflow: visible; }
body .bento .tile h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; }
body .bento .tile p, body .bento .tile li { font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.6; }
/* "За мен": the big text tile reads like an intro, first paragraph as a lead */
body .bento .tile.wide.tall { align-content: center; gap: 16px; }
body .bento .tile.wide.tall p { font-size: clamp(16px, 1.6vw, 18.5px); }
body .bento .tile.wide.tall p:first-of-type { color: var(--text); font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5; }
/* "Моите класове": rows spread over the full tile height */
body .bento .tile.tall:not(.wide) { grid-template-rows: auto 1fr; }
body .bento .coach-classes { align-content: space-evenly; gap: 4px; }
body .coach-classes li { font-size: 14.5px; padding-block: 6px; flex-wrap: wrap; gap: 2px 8px; }
body .coach-classes li span { font-weight: 700; white-space: nowrap; }
/* Сертификати / CTA / quote */
body .bento .tile.rose { align-content: center; }
body .bento .tile.rose ul { gap: 8px; }
body .bento .tile.dark { align-content: center; gap: 18px; }
body .bento .tile.dark p { font-family: var(--display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; color: var(--white); }
body .bento .tile.wide[style*="align-content"] h2 { font-size: clamp(26px, 2.8vw, 34px) !important; }

body .bento .tile.tall:not(.wide) .coach-classes li { flex-direction: column; align-items: flex-start; }
@media (max-width: 760px) { body .bento .tile.wide.tall { grid-row: auto; align-content: start; } }
/* Desktop bento on 6 columns: schedule + photo get more room, certificates / CTA stay compact */
@media (min-width: 761px) {
  body .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body .bento > .big, body .bento > .tile.wide.tall { grid-column: span 3; }
  body .bento > .tile.tall:not(.wide), body .bento > .tall:not(.tile) { grid-column: span 2; grid-row: span 2; }
  body .bento > .tile.rose.wide, body .bento > .tile.dark.wide { grid-column: span 2; }
  body .bento > .wide:not(.tile), body .bento > .tile.wide:not(.rose):not(.dark):not(.tall) { grid-column: span 3; }

  body .bento .tile.rose, body .bento .tile.dark { padding: 18px 20px; gap: 8px; }
  body .bento .tile.rose h2 { font-size: clamp(20px, 1.9vw, 24px); }
  body .bento .tile.rose li { font-size: 13.5px; line-height: 1.45; }
  body .bento .tile.rose ul { gap: 4px; }
  body .bento .tile.dark { gap: 12px; }
  body .bento .tile.dark p { font-size: clamp(20px, 1.9vw, 24px); }

  body .bento .tile.tall:not(.wide) .coach-classes li { flex-direction: row; align-items: baseline; justify-content: space-between; }
}
/* Phones: one column, every photo full width, tiles sized by their text */
@media (max-width: 600px) {
  body .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
  body .bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  body .bento > :not(.tile) { height: 240px; }
  body .bento > .big { height: 360px; }
  body .bento .tile.wide.tall { align-content: start; }
  body .bento .coach-classes { gap: 0; }
  body .bento .tile.tall:not(.wide) { text-align: center; justify-items: center; }
  body .bento .tile.tall:not(.wide) .coach-classes { width: 100%; }
  body .bento .tile.tall:not(.wide) .coach-classes li { align-items: center; text-align: center; }
}
body .v-steps { padding-left: 0; }

/* ---------- Design audit fixes (2026-10-08) ---------- */
/* Tap targets: inline text links keep their look but get a 44px-tall hit area */
.text-link, .hero-meta a, a.back { position: relative; }
.text-link::after, .hero-meta a::after, a.back::after { content: ""; position: absolute; inset: -12px -6px; }
.menu-toggle { min-height: 40px; }
/* Legal tables on phones: the visually hidden header row still widened the page */
@media (max-width: 600px) { body .legal-doc thead { display: none; } }

/* Google Maps button — Google brand colours */
.btn--gmaps { background: #FAF8F4; color: var(--text); border: 1px solid #EFE6DB; gap: 10px; }
.btn--gmaps:hover { background: #FAF8F4; color: var(--text); border-color: #776354; box-shadow: 0 6px 18px -8px rgba(119, 99, 84, .55); }
.btn--gmaps .gpin { width: 16px; height: 22px; flex: none; }
.btn--gmaps .gword b { font-weight: 700; }

/* ---------- Contact form v2 (guided: topic → reply channel → details) ---------- */
.cf { gap: 26px; }
.cf-head { display: grid; gap: 8px; }
.cf-sub { font-size: 14px; color: var(--blush); opacity: .9; }
.cf-sub a { color: var(--white); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rose); }
.cf-block { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.cf-legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font-size: 15px; font-weight: 700; }
.cf-step { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--rose); color: var(--text); flex: none; }

.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chip { position: relative; cursor: pointer; }
.cf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cf-chip span {
  display: block; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(250, 248, 244,.22); color: var(--blush); transition: background .2s, color .2s, border-color .2s;
}
.cf-chip:hover span { border-color: var(--rose); color: var(--white); }
.cf-chip input:checked + span { background: var(--blush); border-color: var(--blush); color: var(--text); }
.cf-chip input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.cf-hint { font-size: 13.5px; line-height: 1.55; color: var(--blush); background: rgba(250, 248, 244,.06); border-left: 2px solid var(--rose); padding: 10px 14px; border-radius: 0 10px 10px 0; }
.cf-hint a { color: var(--white); font-weight: 600; }

.cf-seg { display: inline-grid; grid-auto-flow: column; justify-self: start; background: rgba(250, 248, 244,.08); border-radius: 999px; padding: 4px; gap: 2px; }
.cf-seg label { position: relative; cursor: pointer; }
.cf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cf-seg span { display: block; padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--blush); transition: background .2s, color .2s; }
.cf-seg input:checked + span { background: var(--white); color: var(--text); }
.cf-seg input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }

.cf .field label { font-size: 13px; letter-spacing: .02em; }
.cf-opt { font-weight: 500; opacity: .6; }
.cf .field input, .cf .field textarea { transition: border-color .2s, background .2s, box-shadow .2s; }
.cf .field input::placeholder, .cf .field textarea::placeholder { color: rgba(250, 248, 244,.38); }
.cf .field input:focus, .cf .field textarea:focus { outline: none; border-color: var(--rose); background: rgba(250, 248, 244,.12); box-shadow: 0 0 0 3px rgba(208, 185, 167,.25); }
.cf .field.is-error input, .cf .field.is-error textarea { border-color: #D0B9A7; }
.cf .field.is-ok input { border-color: rgba(227, 213, 199,.7); }
.cf-err { font-size: 12.5px; color: #E3D5C7; min-height: 0; }
.cf-err:empty { display: none; }
.cf-under { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cf-count { margin-left: auto; font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }

.cf-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.55; cursor: pointer; color: var(--blush); }
.cf-consent input { position: absolute; opacity: 0; pointer-events: none; }
.cf-consent a { color: var(--white); }
.cf-box { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid rgba(250, 248, 244,.4); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.cf-box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--cocoa); border-bottom: 2px solid var(--cocoa); transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .15s; }
.cf-consent input:checked + .cf-box { background: var(--blush); border-color: var(--blush); }
.cf-consent input:checked + .cf-box::after { transform: rotate(-45deg) scale(1); }
.cf-consent input:focus-visible + .cf-box { outline: 2px solid var(--rose); outline-offset: 2px; }

.cf-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  font: 700 16px var(--body); padding: 17px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--blush); color: var(--text); transition: background .2s, transform .2s;
}
.cf-submit svg { width: 20px; height: 20px; transition: transform .25s; }
.cf-submit:hover { background: var(--white); }
.cf-submit:hover svg { transform: translateX(4px); }
.cf-submit:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.cf-submit.is-busy { opacity: .7; cursor: progress; }
.cf-note { font-size: 12px; opacity: .6; text-align: center; margin-top: -12px; }
.cf .form-msg:empty { display: none; }

.cf-done { display: grid; gap: 14px; justify-items: start; padding: 12px 0; outline: none; }
.cf-done .mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--blush); color: var(--text); }
.cf-done p { color: var(--blush); max-width: 44ch; }
.cf-done b { color: var(--white); }
.cf-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.cf-link { color: var(--white); font-weight: 600; font-size: 14px; }
@media (max-width: 480px) { .cf-seg { justify-self: stretch; } .cf-seg span { text-align: center; } }
.cf [hidden] { display: none !important; }
.cf .field { align-content: start; }

/* Contact form v3 — compact */
.cf { gap: 18px; }
.cf-head { gap: 4px; }
.cf .fields { gap: 12px; }
.cf .field textarea { min-height: 96px; }
.cf-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.cf-foot .cf-consent { flex: 1 1 220px; }
.cf-foot .cf-submit { width: auto; padding: 14px 28px; flex: none; }
#err-ok { margin-top: -8px; }
@media (max-width: 480px) { .cf-foot .cf-submit { width: 100%; } }
.cf .cf-chips { gap: 6px; } .cf .cf-chip span { padding: 8px 13px; font-size: 13px; }
/* the form sets the row height; the map column beside it stretches to match */
.contact-grid > .cf { align-self: stretch; align-content: start; gap: 18px; }
.cf .cf-chips { align-content: flex-start; }

/* Booking terms checkbox — text and link stay one block */
.check--terms { align-items: flex-start; gap: 12px; line-height: 1.5; cursor: pointer; }
.check--terms input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--mauve); cursor: pointer; }
.check--terms > span { flex: 1; min-width: 0; }
.check--terms a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.check--terms small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text); }

/* Contact info — centred on phones */
@media (max-width: 480px) {
  .info-grid { text-align: center; justify-items: center; gap: 30px; }
  .info-grid h2, .info-grid h3 { margin-bottom: 8px; }
  .info-grid a { display: inline-block; }
}
/* phones and small tablets: map button and the form intro (title, note, topics) centred; fields stay left for easy filling */
@media (max-width: 760px) {
  .map-actions { justify-content: center; }
  .cf-head { text-align: center; justify-items: center; }
  .cf .cf-chips { justify-content: center; }
}

/* ---------- Founder (home block + letter on ekip-masha.html) ---------- */
.about-motto { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--text); }
.founder-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.founder-photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); max-width: 100%; }
.founder-text { display: grid; gap: 18px; justify-items: start; }
.founder-text p { color: var(--text); max-width: 54ch; }
.founder-quote { margin: 0; font-family: var(--display); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; color: var(--text); text-wrap: balance; }
.founder-sign { display: grid; gap: 2px; padding-left: 16px; border-left: 2px solid var(--rose); }
.founder-sign b { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--text); }
.founder-sign span { font-size: 13px; color: var(--text); }
@media (max-width: 760px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-photo { aspect-ratio: 1 / 1; }
  /* phones: the founder block reads centred under the photo */
  .founder-text { justify-items: center; text-align: center; }
  .founder-text p { margin-inline: auto; }
  .founder-text .text-link { justify-self: center; }
  .founder-text .founder-sign { padding: 12px 0 0; border-left: 0; border-top: 2px solid var(--rose); justify-items: center; }
}
.founder-letter { max-width: 680px; margin: clamp(40px, 6vw, 72px) auto 0; display: grid; gap: 16px; scroll-margin-top: 96px; }
.founder-letter h2 { margin-bottom: 8px; }
.founder-letter p { color: var(--text); font-size: 17px; line-height: 1.75; }
.founder-letter .founder-sign { margin-top: 12px; }

/* ---------- Solo instructor card (grafik #ekip) — Masha leads every class ---------- */
.solo-coach {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: stretch;
  max-width: 880px; margin: 44px auto 0; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.solo-coach:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(119, 99, 84, .45); }
.solo-coach .ph { border-radius: 0; aspect-ratio: 4 / 5; min-height: 0; }
.solo-body { display: grid; gap: 14px; align-content: center; padding: clamp(24px, 4vw, 48px); }
.solo-body blockquote { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; text-wrap: balance; }
.solo-body b { font-size: 17px; }
.solo-body .text-link { justify-self: start; }
@media (max-width: 700px) {
  .solo-coach { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .solo-coach .ph { aspect-ratio: 4 / 3; }
  .solo-body { justify-items: center; }
  .solo-body .text-link { justify-self: center; }
}

/* Masha's photos (client, 2026-10-15): keep her face in frame when the box crops */
img[src*="masha-1"] { object-position: 50% 22%; }
img[src*="masha-2"] { object-position: 50% 22%; }

/* Hero on liquid silk: same WebGL shader as the CTA band, light text, wash on the copy side;
   the curved shell horizon (::after) still melts it into the next section */
.hero--liquid { color: var(--white); }
.hero--liquid .liquid-bg { z-index: -3; }
.hero--liquid::before {
  background:
    radial-gradient(50% 60% at 24% 50%, rgba(60, 47, 38, .5), rgba(60, 47, 38, .25) 60%, rgba(60, 47, 38, 0) 100%),
    linear-gradient(to right, rgba(62, 48, 39, .78), rgba(62, 48, 39, .66) 48%, rgba(62, 48, 39, .2) 78%, rgba(62, 48, 39, 0));
}
/* the wash keeps white text at 4.5:1 or more even over the lightest silk highlights */
.hero--liquid .hero-copy { text-shadow: 0 2px 18px rgba(50, 39, 31, .7), 0 1px 3px rgba(50, 39, 31, .6); }
.hero--liquid .eyebrow, .hero--liquid .lead, .hero--liquid .italic { color: var(--white); }
.hero--liquid .hero-copy p:not(.h-xl) { font-weight: 500; }
.hero--liquid .h-xl {
  color: #fff;
  text-shadow: 0 2px 28px rgba(80, 64, 52, .7), 0 1px 6px rgba(80, 64, 52, .55), 0 0 2px rgba(80, 64, 52, .4);
}
/* both hero buttons are light; hover keeps the colour, only a gentle lift and a slightly deeper shadow */
.hero--liquid .hero-copy .btn,
.hero--liquid .hero-copy .btn--ghost {
  background: var(--white); color: var(--text); border-color: var(--white); text-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 6px 20px -8px rgba(80, 64, 52, .7);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.hero--liquid .hero-copy .btn:hover,
.hero--liquid .hero-copy .btn--ghost:hover {
  background: var(--white); border-color: var(--white); color: var(--text);
  transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(80, 64, 52, .75);
}
/* second hero button: outline on the dark silk, so the pair reads primary + secondary */
.hero--liquid .hero-copy .btn--ghost {
  background: rgba(250, 248, 244, .08); color: var(--white); border-color: rgba(250, 248, 244, .75);
  box-shadow: none;
}
.hero--liquid .hero-copy .btn--ghost:hover {
  background: rgba(250, 248, 244, .18); color: var(--white); border-color: var(--white);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) { .hero--liquid .hero-copy .btn:hover { transform: none; } }
.hero--liquid .next-class { color: var(--text); text-shadow: none; }
.hero--liquid .next-class .btn { box-shadow: 0 6px 16px -8px rgba(80, 64, 52, .7); }
@media (max-width: 860px) {
  .hero--liquid::before {
    background:
      radial-gradient(80% 30% at 40% 20%, rgba(60, 47, 38, .4), rgba(60, 47, 38, 0) 100%),
      linear-gradient(rgba(62, 48, 39, .78), rgba(62, 48, 39, .72) 55%, rgba(62, 48, 39, .6));
  }
}

/* ---------- Pricing cards, refined: featured plan on liquid silk, priced rows with dotted leaders,
   perks with check marks, soft lift on hover ---------- */
.price-grid { gap: 22px; }
.price {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--white) 100%);
  border-color: rgba(227, 213, 199, .8);
  padding: 34px 30px 30px; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(119, 99, 84, .05), 0 26px 50px -34px rgba(119, 99, 84, .4);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s cubic-bezier(.2, .7, .2, 1), border-color .3s;
}
.price:hover { transform: translateY(-6px); border-color: var(--rose); box-shadow: 0 1px 2px rgba(119, 99, 84, .05), 0 40px 70px -36px rgba(119, 99, 84, .55); }
.price-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.price .name { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.price .amount { margin-top: 26px; font-size: 64px; letter-spacing: -.01em; }
.price .amount small { margin-left: 4px; letter-spacing: 0; }
.price .note { margin-top: 10px; font-size: 14px; }
.price ul { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); gap: 14px; }
.price li { align-items: baseline; }
/* pass rows: name ..... price */
.price li:has(b)::before { display: none; }
.price li:has(b) { justify-content: space-between; gap: 12px; }
.price li > span { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.price li > span::after { content: ""; flex: 1; min-width: 16px; border-bottom: 1px dotted currentColor; opacity: .35; translate: 0 -4px; }
.price li > b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* perks: check mark */
.price li:not(:has(b))::before {
  width: 18px; height: 18px; margin-top: 0; translate: 0 3px; border-radius: 50%;
  background: var(--blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23776354' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.price ul { margin-bottom: 30px; }
.price .btn { margin-top: auto; }
.price .btn--ghost:hover { box-shadow: 0 10px 24px -12px rgba(119, 99, 84, .6); }

.price--feat {
  background: #776354; border-color: transparent; color: #fff;
  box-shadow: 0 2px 6px rgba(119, 99, 84, .12), 0 40px 80px -36px rgba(80, 64, 52, .85);
}
.price--feat:hover { border-color: transparent; box-shadow: 0 2px 6px rgba(119, 99, 84, .12), 0 50px 90px -36px rgba(80, 64, 52, .95); }
.price--feat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(170deg, rgba(80, 64, 52, .55), rgba(119, 99, 84, .3) 45%, rgba(80, 64, 52, .5));
}
.price--feat > :not(.liquid-bg):not(.btn) { text-shadow: 0 2px 16px rgba(80, 64, 52, .55), 0 1px 3px rgba(80, 64, 52, .4); }
.price--feat .name { color: #fff; }
.price--feat .amount small, .price--feat .note { color: var(--shell); opacity: .92; }
.price--feat ul { border-color: rgba(250, 248, 244, .28); }
.price--feat li:not(:has(b))::before { background-color: rgba(250, 248, 244, .95); }
.price--feat .badge {
  background: rgba(250, 248, 244, .16); color: #fff; border: 1px solid rgba(250, 248, 244, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: none;
}
.price--feat .btn--light { color: var(--text); box-shadow: 0 8px 22px -10px rgba(40, 30, 24, .7); }
.price--feat .btn--light:hover { background: #fff; border-color: #fff; }
@media (min-width: 861px) {
  .price--feat { margin-block: -14px; padding-block: 48px 44px; }
}
@media (max-width: 760px) {
  .price { padding: 28px 22px 24px; }
  .price .amount { font-size: 54px; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .price, .price:hover { transition: none; transform: none; } }

/* ---------- Contact form on liquid silk (same treatment as the featured price card):
   wash for legibility, frosted-glass fields and chips ---------- */
.form-card:has(.liquid-bg) {
  position: relative; isolation: isolate; overflow: hidden; background: #776354;
  box-shadow: 0 2px 6px rgba(119, 99, 84, .12), 0 40px 80px -36px rgba(80, 64, 52, .85);
}
.form-card:has(.liquid-bg)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(170deg, rgba(74, 58, 47, .72), rgba(74, 58, 47, .55) 45%, rgba(74, 58, 47, .7));
}
.form-card:has(.liquid-bg) :is(.cf-head, .cf-done, .cf-consent) { text-shadow: 0 2px 16px rgba(80, 64, 52, .55), 0 1px 3px rgba(80, 64, 52, .4); }
.form-card:has(.liquid-bg) h2 { color: #fff; }
.form-card:has(.liquid-bg) :is(.cf-sub, .cf-consent, .cf-done p) { color: var(--shell); opacity: 1; }
.form-card:has(.liquid-bg) .field label { color: #fff; text-shadow: 0 1px 8px rgba(80, 64, 52, .6); }
.form-card:has(.liquid-bg) .field :is(input, textarea) {
  color: #fff; background: rgba(50, 40, 33, .55); border-color: rgba(250, 248, 244, .4);
}
.form-card:has(.liquid-bg) .field :is(input, textarea)::placeholder { color: rgba(250, 248, 244, .78); }
.form-card:has(.liquid-bg) .field :is(input, textarea):focus { background: rgba(50, 40, 33, .65); border-color: var(--blush); box-shadow: 0 0 0 3px rgba(239, 230, 219, .25); }
.form-card:has(.liquid-bg) .cf-chip span {
  color: #fff; background: rgba(50, 40, 33, .55); border-color: rgba(250, 248, 244, .45);
}
.form-card:has(.liquid-bg) .cf-chip:hover span { border-color: var(--blush); }
.form-card:has(.liquid-bg) .cf-chip input:checked + span { background: var(--shell); border-color: var(--shell); color: var(--text); }
.form-card:has(.liquid-bg) .cf-box { border-color: rgba(250, 248, 244, .75); background: rgba(80, 64, 52, .3); }
.form-card:has(.liquid-bg) .cf-consent input:checked + .cf-box { background: var(--shell); border-color: var(--shell); }
.form-card:has(.liquid-bg) .cf-err { color: #fff; font-weight: 600; text-shadow: 0 1px 6px rgba(80, 64, 52, .7); }
.form-card:has(.liquid-bg) .cf-submit { background: var(--shell); color: var(--text); box-shadow: 0 8px 22px -10px rgba(40, 30, 24, .7); }
.form-card:has(.liquid-bg) .cf-submit:hover { background: #fff; }

/* ---------- Pricing cards: calmer, richer hover ----------
   Slow spring lift, a soft light that follows the pointer (--mx/--my from extras.js),
   a hairline that draws across the top, the other cards step back a little,
   and the hovered card's button fills in so the next step is obvious. */
.price { --mx: 50%; --my: 0%; }
/* the cards are also scroll-reveal items (.motion .reveal sets its own transition), so match its specificity */
.price, .motion .price.reveal {
  transition:
    opacity .45s ease, translate .6s cubic-bezier(.2, .7, .2, 1),
    transform .7s cubic-bezier(.16, 1, .3, 1), box-shadow .7s cubic-bezier(.16, 1, .3, 1),
    border-color .4s ease, filter .5s ease;
  transition-delay: var(--delay, 0s), var(--delay, 0s), 0s, 0s, 0s, 0s;
}
.price::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(239, 230, 219, .9), rgba(239, 230, 219, 0) 70%);
  opacity: 0; transition: opacity .5s ease;
}
.price--feat::after { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%); mix-blend-mode: soft-light; }
.price .amount { transition: transform .7s cubic-bezier(.16, 1, .3, 1); transform-origin: 0 100%; }
.price li:not(:has(b))::before { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.price .btn--ghost { transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .price:hover { transform: translateY(-8px); border-color: rgba(208, 185, 167, .9); box-shadow: 0 2px 4px rgba(119, 99, 84, .05), 0 46px 80px -38px rgba(119, 99, 84, .6); }
  .price--feat:hover { box-shadow: 0 2px 6px rgba(119, 99, 84, .12), 0 56px 96px -36px rgba(80, 64, 52, 1); }
  .price:hover::after { opacity: 1; }
  .price:hover .amount { transform: scale(1.04); }
  .price:hover li:not(:has(b))::before { transform: scale(1.15); }
  .price:hover .btn--ghost { background: var(--mauve); border-color: var(--mauve); color: var(--white); box-shadow: 0 12px 26px -12px rgba(119, 99, 84, .7); }
  .price-grid:has(.price:hover) .price:not(:hover) { opacity: .72; filter: saturate(.85); }
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .price--feat:hover { transform: translateY(-8px); }
}

/* ---------- Page transitions, softer ----------
   The old page settles back and blurs out quickly; the new one rises in slowly from a light blur.
   The header stays put (its own view-transition-name), so only the content moves. */
/* the new page (and its hero) is there at once: only the old page fades away on top of it */
::view-transition-old(root) { animation: page-out .18s ease-out both; }
::view-transition-new(root) { animation: none; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }
.no-vt main, .no-vt .site-footer { animation: page-in .15s ease-out both; }
.no-vt.is-leaving main, .no-vt.is-leaving .site-footer { animation: page-out .15s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .price-grid:has(.price:hover) .price:not(:hover) { opacity: 1; filter: none; }
}

/* Next-class card: long class names get the whole top row, button sits next to the date */
.next-class { width: min(360px, 100%); column-gap: 14px; row-gap: 6px; }
.next-class .t { grid-column: 2 / 4; grid-row: 1; line-height: 1.3; }
.next-class .s { grid-column: 2; grid-row: 2; }
.next-class .btn { grid-column: 3; grid-row: 2; align-self: center; }

/* ---------- Schedule day strip: room for the hover lift, clearer type ----------
   The strip scrolls sideways (overflow-x), which also clips vertically: padding gives the lifted
   card and its shadow room, the negative margin keeps the layout where it was.
   Numbers move from Playfair to Montserrat — the display serif read poorly at this size. */
.days { padding: 8px 6px 14px; margin: -8px -6px -10px; }
.day .dn { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--text); opacity: .72; }
.day .dd { font-family: var(--body); font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.day[aria-selected="true"] .dn { color: var(--white); opacity: .85; }
@media (hover: hover) { .day:not([aria-selected="true"]):hover { box-shadow: 0 10px 20px -12px rgba(119, 99, 84, .55); } }

/* ---------- Silk instead of flat brown, site-wide ----------
   main.js renders one still frame of the hero's liquid-silk shader into --silk-img (cached).
   Every filled brown surface wears it, under a light cocoa veil so white text stays readable;
   on hover the silk drifts a little. Without WebGL it simply stays the flat brown. */
:root { --silk-layer: linear-gradient(rgba(74, 58, 47, .58), rgba(74, 58, 47, .58)), var(--silk-img, none); }
:root .btn:where(:not(.btn--ghost, .btn--light, .btn--gmaps)),
:root .btn--ghost:hover,
:root .price:hover .btn--ghost,
:root .testi-head .arrows button:hover:not([disabled]),
:root .day[aria-selected="true"],
:root .filters button[aria-pressed="true"],
:root .bk-day[aria-selected="true"],
:root .bk-slot[aria-selected="true"],
:root .bk-go,
:root .join button,
:root .modal .done .mark,
:root .bk-done .mark,
:root .reach-main,
:root .pili__bubble-cta,
:root .pili__opt:hover,
:root .pili__send,
:root .pili__badge,
:root .legal-nav a[aria-current="page"],
:root .bento .tile.dark {
  background-color: #776354;
  background-image: var(--silk-layer);
  background-size: 720px auto;
  background-position: 30% 45%;
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(40, 31, 25, .7), 0 0 12px rgba(40, 31, 25, .5);
  color: #fff;
  transition: background-position .9s cubic-bezier(.2, .7, .2, 1), transform .2s, color .2s, box-shadow .3s, padding .45s;
}
/* hover: the silk slides under the label instead of switching to a darker flat brown */
:root .btn:where(:not(.btn--ghost, .btn--light, .btn--gmaps)):hover,
:root .bk-go:hover:not([disabled]),
:root .reach-main:hover,
:root .pili__send:hover,
:root .join button:hover {
  background-color: #776354;
  background-image: var(--silk-layer);
  background-position: 62% 30%;
  border-color: transparent;
}
/* "Пиши ни" over a dark section: light pill, so it doesn't melt into the silk/photo */
:root .reach.on-dark:not(.open) .reach-main,
:root .reach.on-dark:not(.open) .reach-main:hover {
  background: #FAF8F4; color: #1A1714; text-shadow: none;
  box-shadow: 0 14px 30px -12px rgba(20, 14, 10, .6);
}
/* the bento tile is big: let the silk cover it */
:root .bento .tile.dark { background-size: cover; }

/* Desktop nav: hover and current page wear the same silk as the buttons (open mobile menu keeps its own look) */
:root .site-header:not(.nav-open) .nav-links a[aria-current="page"],
:root .site-header:not(.nav-open) .nav-links a:hover {
  color: #fff;
  background-color: #776354;
  background-image: var(--silk-layer);
  background-size: 720px auto;
  background-position: 30% 45%;
  text-shadow: 0 1px 2px rgba(40, 31, 25, .7), 0 0 12px rgba(40, 31, 25, .5);
  transition: background-position .9s cubic-bezier(.2, .7, .2, 1), color .2s;
}
:root .site-header:not(.nav-open) .nav-links a:hover { background-position: 62% 30%; }

/* Coach page: same silk hero as the home page, with one large portrait instead of the collage */
.coach-hero .hero-grid { grid-template-columns: 1.15fr .85fr; }
.coach-portrait { justify-self: end; width: min(440px, 100%); perspective: 900px; }
.coach-portrait .ph {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(80, 64, 52, .15), 0 50px 90px -40px rgba(40, 31, 25, .75), 0 24px 40px -24px rgba(40, 31, 25, .5);
}
.coach-portrait .ph::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(250, 248, 244, .26) 0%, rgba(250, 248, 244, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(250, 248, 244, .45);
}
.coach-hero + .coach { padding-top: clamp(8px, 2vw, 24px); }
@media (max-width: 860px) {
  .coach-hero .hero-grid { grid-template-columns: 1fr; }
  .coach-portrait { justify-self: center; width: min(360px, 100%); }
}

/* Footer credit: always the last item of the bottom row (extras.js appends legal links / open-now after it) */
.footer-bottom .made-by { order: 10; font-size: 13px; }
.footer-bottom .made-by a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rose); transition: border-color .2s; }
.footer-bottom .made-by a:hover { border-color: var(--cocoa); }

/* Contact form, symmetric: topic chips as an even 2×2 grid, equal rhythm between blocks,
   consent on its own row and a full-width send button */
#contact-form { gap: 22px; }
#contact-form .cf-head { gap: 8px; }
#contact-form .cf-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#contact-form .cf-chip span { text-align: center; padding: 11px 12px; font-size: 13.5px; }
#contact-form .fields { gap: 16px 14px; }
#contact-form .cf-foot { display: grid; grid-template-columns: 1fr; gap: 18px; }
#contact-form .cf-foot .cf-consent { flex: none; }
#contact-form .cf-foot .cf-submit { width: 100%; padding-inline: 28px; }
#contact-form .cf-chip { display: block; } #contact-form .cf-chip span { white-space: nowrap; }

/* Contact form, readable on phones: chips wrap onto two lines instead of being cut, equal heights;
   16px fields (no iOS zoom on tap); a steadier wash on the silk; no faded helper text */
#contact-form .cf-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* "Тема" label above the chips, same style as the field labels below */
#contact-form .cf-topic { display: grid; gap: 8px; }
#contact-form .cf-label { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 8px rgba(80, 64, 52, .6); }
/* pause control sits top-right, level with the title, so the bottom edge stays clean */
#contact-form .motion-toggle--sm { top: 16px; bottom: auto; right: 16px; }
#contact-form .cf-chip, #contact-form .cf-chip span { height: 100%; }
#contact-form .cf-chip span {
  white-space: normal; text-wrap: balance; display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 9px 12px; font-size: 14px; line-height: 1.25; border-radius: 10px;
}
.form-card:has(.liquid-bg)::before { background: linear-gradient(170deg, rgba(62, 48, 39, .78), rgba(62, 48, 39, .68) 45%, rgba(62, 48, 39, .76)); }
.cf .field label { font-size: 14px; }
.cf .field input, .cf .field textarea { font-size: 16px; }
.cf-sub { font-size: 15px; }
.form-card:has(.liquid-bg) :is(.cf-opt, .cf-count, .cf-note) { opacity: 1; color: var(--blush); }
.cf-count, .cf-note { font-size: 13px; }
.form-card:has(.liquid-bg) .cf-consent { font-size: 14px; }
@media (max-width: 480px) {
  #contact-form { gap: 20px; }
  #contact-form .fields { grid-template-columns: 1fr; }
  #contact-form .field textarea { min-height: 128px; }
}
#contact-form .cf-sub a { white-space: nowrap; }

/* ---------- Accessibility ---------- */
/* pause / play for the silk animation (WCAG 2.2.2) */
.motion-toggle {
  position: absolute; top: 12px; right: clamp(12px, 2vw, 24px); z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(50, 39, 31, .55); color: #fff; border: 1px solid rgba(250, 248, 244, .6);
  transition: background .2s;
}
.motion-toggle:hover { background: rgba(50, 39, 31, .8); }
.motion-toggle svg { width: 18px; height: 18px; }
/* keyboard focus must stay visible on the dark silk surfaces too */
:is(.hero--liquid, .cta-band, .price--feat, .form-card, .cookie-bar, .bento .tile.dark) :focus-visible,
.motion-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(50, 39, 31, .55); }
:root .btn:where(:not(.btn--ghost, .btn--light, .btn--gmaps)):focus-visible,
:root .reach-main:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 3px; }
/* testimonials scroller: it is focusable, so show where the focus is */
.testi-grid:focus-visible { outline: 2px solid var(--mauve); outline-offset: 6px; border-radius: 12px; }
/* newsletter field in the footer: a clear ring instead of a hairline colour change */
.join:focus-within { border-color: var(--cocoa); box-shadow: 0 0 0 3px rgba(119, 99, 84, .3); }
/* custom selects: stronger focus ring */
.sel-btn:focus-visible { border-color: var(--mauve); box-shadow: 0 0 0 3px rgba(119, 99, 84, .35); }
/* voucher form consent text was 3.9:1 — full opacity brings it above 4.5:1 */
.check { opacity: 1; color: var(--text); }
.motion-toggle--sm { top: auto; bottom: 10px; right: 10px; width: 28px; height: 28px; }
.motion-toggle--sm svg { width: 14px; height: 14px; }

/* ---------- Readability pass (WCAG AA, audited 2026-10-20) ----------
   Rule of the palette: Cappuccino text sits only on Ivory/white (5.35:1) or Cream (4.6:1), never on
   Light Beige (3.95:1) or Beige (3.0:1). Light text on brown uses solid or near-solid Cappuccino (5.35:1).
   Nothing below 12px. Disabled slots are exempt from AA but stay legible. */
:root .slot .spots.full, :root .bk-slot[disabled] small, :root .slot .btn[disabled] { background: var(--blush); border-color: var(--blush); color: var(--text); }
:root .bk-slot[disabled] { opacity: .62; }
:root .post-body .viz .viz-src { opacity: 1; }
:root .bento .cap { background: rgba(119, 99, 84, .94); color: #FAF8F4; }
:root .price--feat .badge, :root .price--feat li .save { background: rgba(250, 248, 244, .95); border-color: transparent; color: var(--text); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root .day .dn { opacity: 1; font-size: 12px; }
:root .day[aria-selected="true"] .dn { opacity: 1; }
:root .badge, :root .price li .save, :root .bk-day span, :root .bk-type span, :root .bk-slot small { font-size: 12px; }
@media (max-width: 760px) { :root .dock span { font-size: 12px; } }
/* voucher previews: light text always over Cappuccino, dark text only over Ivory/Cream */
:root .v-card.t-rose { background: linear-gradient(135deg, #776354 0%, #776354 45%, #A8947F 100%); }
:root .v-card.t-blush { background: linear-gradient(135deg, #FAF8F4, #EFE6DB); color: var(--text); }
:root .v-card.t-photo { background: linear-gradient(rgba(119, 99, 84, .62), rgba(119, 99, 84, .88)), url(../images/masha-reformer-800.webp) center 30% / cover; }
:root .v-card:not(.t-blush) { text-shadow: 0 1px 2px rgba(40, 30, 22, .35); }
:root .v-card small, :root .v-card .to { opacity: 1; }
/* second pass: labels people actually read (section eyebrows, dates, slot details, the phone dock) go up to 13px,
   regular-weight small text goes to 500 */
:root .eyebrow { font-size: 13px; letter-spacing: .14em; }
:root .post-card time, :root .post-meta time { font-size: 13px; }
:root .next-class .s { font-size: 13px; font-weight: 500; }
:root .bk-type span, :root .bk-day span { font-weight: 500; }
:root.has-dock .dock span { font-size: 12px; }
:root.has-dock .dock .dock-main span { font-size: 14px; }
@media (max-width: 360px) { :root.has-dock .dock span:not(.dock-main span) { font-size: 11px; } }
@media (max-width: 760px) { :root .footer-col h2 { font-size: 13px; } }
/* phones: the thin Playfair "Maison LÉA" in the header gets a touch more weight */
@media (max-width: 760px) { :root .brand { font-weight: 500; letter-spacing: .01em; } }
/* "done" ticks (booking, booking modal, contact form) are green: success reads at a glance (white on #4E7A47 is 5.1:1) */
:root .modal .done .mark, :root .bk-done .mark, :root .cf-done .mark {
  background: #4E7A47; background-image: none; color: #fff; text-shadow: none;
  box-shadow: 0 0 0 6px rgba(78, 122, 71, .18), 0 10px 22px -10px rgba(62, 99, 56, .7);
  animation: mark-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes mark-pop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :root .modal .done .mark, :root .bk-done .mark, :root .cf-done .mark { animation: none; } }

/* QA: both checkboxes in the booking form share one size */
.modal .check input, .bk-card .check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--mauve); cursor: pointer; }

/* QA: gallery filters — hidden items really disappear (a display rule was overriding [hidden]) */
.gallery-grid button[hidden], #gallery button[hidden] { display: none; }
/* QA: gallery lightbox controls */
.lightbox { cursor: default; }
.lb-fig { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: 100%; }
.lb-cap { color: #fff; font-size: 14px; text-align: center; text-shadow: 0 1px 6px rgba(40, 31, 25, .6); }
.lb-btn {
  position: fixed; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(250, 248, 244, .92); color: var(--text); border: 0; font: 400 30px/1 var(--display);
  box-shadow: 0 8px 24px -10px rgba(40, 31, 25, .6); transition: background .2s, transform .2s;
}
.lb-btn:hover { background: #fff; transform: scale(1.06); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb-next { right: 16px; top: 50%; translate: 0 -50%; }
.lightbox .lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) {
  .lb-prev, .lb-next { top: auto; bottom: 20px; translate: none; }
  .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); }
  .lightbox .ph { height: min(72vh, 900px); }
}
/* silk boxes paint the cached still frame (--silk-img) until the live WebGL silk takes over: no flat brown flash */
:root .liquid-bg { background-color: #776354; background-image: var(--silk-img, none); background-size: cover; background-position: center; }

/* ---------- Footer, phones and small tablets: no empty cells ----------
   Studio | More side by side (both short lists), Contact full width below in two columns,
   bottom row stacked and centred. "Open now" uses the palette instead of green. */
@media (max-width: 760px) {
  .site-footer { padding-block: 44px 24px; }
  :root .footer-top, :root .footer-top:has(.footer-col + .footer-col + .footer-col) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-top > .footer-col:has(a[href^="tel:"]) { order: 3; grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); }
  .footer-top > .footer-col:has(a[href^="tel:"]) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .footer-col h2 { margin-bottom: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
  .footer-col ul { gap: 11px; font-size: 15px; }
  .footer-col a { overflow-wrap: anywhere; }
  .footer-bottom { margin-top: 32px; padding-top: 22px; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .footer-bottom .footer-legal { justify-content: center; }
}
@media (max-width: 360px) {
  .footer-top > .footer-col:has(a[href^="tel:"]) ul { grid-template-columns: 1fr; }
}
/* contact on phones: phone and e-mail each get a full row (no mid-address wrap), the four links sit 2×2 */
@media (max-width: 760px) {
  .footer-top > .footer-col:has(a[href^="tel:"]) li:has(a[href^="tel:"], a[href^="mailto:"]) { grid-column: 1 / -1; }
  .footer-top > .footer-col:has(a[href^="tel:"]) a[href^="tel:"], .footer-top > .footer-col:has(a[href^="tel:"]) a[href^="mailto:"] { font-weight: 600; color: var(--text); }
}

/* Silk swatch for buttons & co: a pre-rendered frame of the hero shader (was rendered in the browser) */
:root { --silk-img: url("../images/silk-swatch.jpg"); }
/* contact block on phones: centred (heading, phone, e-mail and links) */
@media (max-width: 760px) {
  .footer-top > .footer-col:has(a[href^="tel:"]) { text-align: center; }
  .footer-top > .footer-col:has(a[href^="tel:"]) ul { justify-items: center; }
}
/* phones: Playfair's hairlines get thin at small sizes, so display headings go one step heavier (the font is variable 400–700) */
@media (max-width: 760px) {
  :root :is(h1, h2, h3, h4, .h-xl, .h-lg, .founder-quote) { font-weight: 500; }
}
/* "Време за себе си" band on phones: deeper wash behind the copy, crisper text edge */
@media (max-width: 700px) {
  .cta-band:has(.liquid-bg) h2, .cta-band:has(.liquid-bg) p { text-shadow: 0 1px 2px rgba(40, 30, 22, .7), 0 2px 12px rgba(40, 30, 22, .45); }
  .cta-band:has(.liquid-bg) p { font-size: 16px; font-weight: 600; }
}

/* ---------- Featured price card: readable on any part of the silk, tidy on phones ---------- */
:root .price--feat::before { background: linear-gradient(170deg, rgba(62, 48, 38, .72), rgba(62, 48, 38, .52) 45%, rgba(62, 48, 38, .68)); }
:root .price--feat > :not(.liquid-bg):not(.btn) { text-shadow: 0 1px 2px rgba(40, 30, 22, .6), 0 2px 12px rgba(40, 30, 22, .35); }
:root .price--feat .note, :root .price--feat .amount small { color: #fff; opacity: 1; font-weight: 500; }
:root .price--feat li { color: #fff; font-weight: 500; }
:root .price--feat .badge, :root .price--feat li .save { white-space: nowrap; text-shadow: none; }
:root .price-head { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
:root .price-head .badge { flex: none; }
@media (max-width: 760px) {
  :root .price--feat { padding: 30px 22px 26px; }
  :root .price-head .name { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
  :root .price-head .badge { font-size: 11.5px; padding: 6px 11px; letter-spacing: .1em; }
  :root .price .amount { margin-top: 22px; font-size: 52px; }
  :root .price li:has(.save) { row-gap: 4px; }
  :root .price li .save { font-size: 12px; padding: 3px 9px; }
}

/* ---------- Contact info cards: calmer, clearer ----------
   heading one step heavier (Playfair hairlines vanish at 21px), body at 500 instead of 600 so letters
   don't clump, more line height and padding, a hairline between the heading and the details */
:root .info-grid { gap: 16px; }
:root .info-grid > div { padding: 20px 22px; }
:root .info-grid h2, :root .info-grid h3 { font-size: 22px; font-weight: 600; letter-spacing: .005em; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
:root .info-grid p, :root .info-grid a { font-size: 16px; font-weight: 500; line-height: 1.7; letter-spacing: .01em; }
:root .info-grid a { font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 480px) {
  :root .info-grid { gap: 16px; }
  :root .info-grid > div { padding: 18px 18px 20px; }
  :root .info-grid h2, :root .info-grid h3 { display: inline-block; padding-inline: 6px; }
}
/* phones: every contact card spans the full width (centred text stays) */
@media (max-width: 480px) { :root .info-grid { justify-items: stretch; } }

/* Hero headline, variant H: "You." in italic with a hand-drawn swash that draws itself in */
.hero .h-xl .you { position: relative; display: inline-block; font-style: italic; }
.hero .h-xl .swash { position: absolute; left: -4%; bottom: -.16em; width: 108%; height: .3em; overflow: visible; pointer-events: none; }
.hero .h-xl .swash path {
  fill: none; stroke: #EFE6DB; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 260; stroke-dashoffset: 260; animation: hero-swash 1.4s .5s cubic-bezier(.65, 0, .35, 1) forwards;
  filter: drop-shadow(0 1px 4px rgba(50, 39, 31, .45));
}
@keyframes hero-swash { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero .h-xl .swash path { animation: none; stroke-dashoffset: 0; } }

/* Prices: savings tag in soft green (client request 2026-10-20), on light and on the featured silk card */
:root .price li .save, :root .price--feat li .save { background: #E2EFE2; color: #3E6B46; border-color: transparent; }
/* phones: the schedule and prices page titles stay on one line (sized to the viewport, like the blog title) */
@media (max-width: 760px) {
  body:is([data-page="grafik"], [data-page="ceni"]) .h-xl { white-space: nowrap; font-size: clamp(26px, 9.4vw, 48px); }
  html[lang="en"] body:is([data-page="grafik"], [data-page="ceni"]) .h-xl { font-size: clamp(24px, 9vw, 48px); }
}

/* ---------- Founder: broken-up layout ----------
   Arch photo with an offset gold outline, a second tilted photo, a slowly turning seal,
   and the text on a soft card that overlaps the arch, sitting lower than the photo. */
.founder-grid { gap: 0; align-items: end; }
.founder-media { position: relative; isolation: isolate; width: min(100%, 520px); justify-self: center; padding-bottom: 10%; }
.founder-media .founder-photo { aspect-ratio: 4 / 5.3; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); box-shadow: 0 40px 70px -40px rgba(80, 64, 52, .7); }
.founder-media .founder-photo img { object-position: 50% 12%; }
.founder-media::before {
  content: ""; position: absolute; z-index: -1; top: -18px; left: 18px; right: -18px; bottom: calc(10% + 18px);
  border: 1px solid #B99A72; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); opacity: .7;
}
.founder-mini {
  position: absolute; left: -12%; bottom: 0; width: 40%; aspect-ratio: 3 / 4; min-height: 0;
  border-radius: 20px; border: 6px solid var(--shell); rotate: -5deg;
  box-shadow: 0 26px 40px -22px rgba(80, 64, 52, .75);
}
.founder-mini img { width: 100%; height: 100%; object-fit: cover; }
.founder-badge { position: absolute; right: -9%; top: 9%; width: clamp(96px, 9vw, 128px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--shell); box-shadow: 0 16px 30px -18px rgba(80, 64, 52, .6); }
.founder-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: founder-spin 26s linear infinite; }
.founder-badge text { font: 600 9.5px var(--body); letter-spacing: .5px; fill: #9A7B5B; }
.founder-badge b { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); color: #776354; }
@keyframes founder-spin { to { rotate: 360deg; } }

.founder-text {
  position: relative; z-index: 2; margin: 0 0 14% calc(-1 * clamp(40px, 6vw, 110px));
  padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-lg);
  background: rgba(250, 248, 244, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -36px rgba(80, 64, 52, .55);
}
/* big rose quote mark hanging over the card's corner */
.founder-text::before {
  content: "“"; position: absolute; top: -.32em; right: .12em; pointer-events: none;
  font: italic 400 clamp(130px, 14vw, 210px)/1 var(--display); color: var(--rose); opacity: .55;
}

@media (max-width: 860px) {
  .founder-grid { gap: 0; }
  .founder-media { width: min(86%, 420px); }
  .founder-mini { left: auto; right: -10%; rotate: 5deg; width: 38%; }
  .founder-badge { right: auto; left: -8%; top: 6%; }
  .founder-media .founder-photo { aspect-ratio: 4 / 5; }
  .founder-text { margin: -56px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .founder-badge svg { animation: none; } }

/* Classes heading: always exactly two lines; each line keeps whole and the type shrinks to fit the column */
.h-lg.two-line { container-type: inline-size; width: 100%; justify-self: stretch; } /* full column width: a shrink-to-fit container would collapse to 0 */
.h-lg.two-line .ln { display: block; white-space: nowrap; font-size: min(50px, 10.2cqi); }

/* ---------- Site-wide consistency ----------
   One size for every button (48px, small 38px), one type style (15px / 600, sentence case),
   and one size for every form field (48px, 16px text — also stops iOS zooming in on tap). */
:root { --btn-h: 48px; --btn-h-sm: 38px; --field-h: 48px; }
:root :is(.btn, .cf-submit, .bk-go) {
  min-height: var(--btn-h); padding-block: 10px; justify-content: center;
  font: 600 15px/1.2 var(--body); letter-spacing: normal; text-transform: none;
}
:root .btn--sm { min-height: var(--btn-h-sm); padding-block: 8px; font-size: 14px; }
:root .btn--gmaps .gpin { height: 20px; }
:root .field :is(input, select) { min-height: var(--field-h); }
:root .field :is(input, select, textarea) { font-size: 16px; }

/* booking modal close: icon instead of the "×" glyph, so it sits exactly in the middle of the circle */
.modal-close:not(.btn) { display: grid; place-items: center; padding: 0; line-height: 0; transition: background .2s, border-color .2s, transform .2s; }
.modal-close:not(.btn) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.modal-close:not(.btn):hover { background: var(--blush); border-color: var(--rose); transform: rotate(90deg); }

/* ---------- Booking modal, split layout: class photo + details left, form right ---------- */
.modal { background: rgba(60, 47, 38, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-card--split { width: min(880px, 100%); padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(20, 14, 10, .8); }
.bk-photo {
  position: relative; display: grid; align-content: end; gap: 0; padding: 28px; min-height: 100%; color: #FAF8F4;
  background-color: #5E4C3F; background-size: cover; background-position: center 30%;
}
.bk-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 30, 24, .88), rgba(40, 30, 24, .1) 62%); }
.bk-photo > * { position: relative; }
.bk-photo .eyebrow { color: #E9D7B8; }
.bk-photo-title { font: 400 clamp(26px, 3vw, 34px)/1.1 var(--display); margin: 6px 0 14px; }
.bk-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.bk-facts li { display: flex; gap: 10px; align-items: center; }
.bk-facts svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bk-side { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 3.4vw, 34px); overflow: auto; max-height: 92vh; }
.modal-card--split .modal-close:not(.btn) { width: 44px; height: 44px; }
.modal-card--split .modal-head .eyebrow { color: #9A7B5B; }
@media (max-width: 760px) {
  .modal-card--split { grid-template-columns: 1fr; overflow: auto; }
  .modal-card--split::before { display: none; }
  .bk-photo { min-height: 210px; padding: 20px 22px; }
  .bk-photo-title { margin-bottom: 10px; }
  .bk-facts { grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; }
  .bk-side { max-height: none; overflow: visible; }
}

/* ---------- Phones: one centred axis for every section ----------
   Section heads, cards, steps and the footer brand sit on the centre line like the hero and the
   contact block. Forms, price rows with leaders and long letters stay left-aligned for reading. */
@media (max-width: 760px) {
  .testi-head { justify-content: center; text-align: center; }
  .testi-head > div { display: grid; justify-items: center; }

  .footer-brand { justify-items: center; text-align: center; }
  .footer-brand .join { width: 100%; }
  .footer-col { text-align: center; }
  .footer-col ul { justify-items: center; }

  .single-prices { text-align: center; }
  .price-head { justify-content: center; text-align: center; }
  .price > .amount, .price > .note { text-align: center; }

  .incl div, .v-steps li { justify-items: center; text-align: center; }

  body .bento .tile { text-align: center; justify-items: center; }
  body .bento .tile ul:not(.coach-classes) { justify-items: center; padding-left: 0; list-style-position: inside; }
  body .bento .tile .btn { justify-self: center !important; }
  .founder-letter > .eyebrow, .founder-letter > h2 { text-align: center; justify-self: center; }

  .post-card { text-align: center; justify-items: center; }
  .post-card .ph { justify-self: stretch; }
}
@media (max-width: 480px) {
  .footer-brand { grid-template-columns: minmax(0, 1fr); }
  .footer-brand > * { grid-column: 1 !important; }
  .footer-logo { justify-self: center; }
}

/* About rows: photos with softly wavy edges, echoing the studio's wavy mirrors (even rows mirrored) */
.about-row > .ph {
  border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath d='M6 1.5C24-.5 40 3.5 58 1.5S88-.5 94 1.5Q99.6 2 99.4 8C98 24 101 40 99 56S98.6 70 98.8 73Q98.6 79 92 79C76 81 58 77 42 79S14 80.4 7.5 78.6Q.8 78 .8 72C2 56-.5 40 1 24S.4 9 .6 7Q1 1.8 6 1.5Z'/%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 100 80' preserveAspectRatio='none'%3E%3Cpath d='M6 1.5C24-.5 40 3.5 58 1.5S88-.5 94 1.5Q99.6 2 99.4 8C98 24 101 40 99 56S98.6 70 98.8 73Q98.6 79 92 79C76 81 58 77 42 79S14 80.4 7.5 78.6Q.8 78 .8 72C2 56-.5 40 1 24S.4 9 .6 7Q1 1.8 6 1.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.about-row:nth-child(even) > .ph {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath transform='translate(100 80) scale(-1 -1)' d='M6 1.5C24-.5 40 3.5 58 1.5S88-.5 94 1.5Q99.6 2 99.4 8C98 24 101 40 99 56S98.6 70 98.8 73Q98.6 79 92 79C76 81 58 77 42 79S14 80.4 7.5 78.6Q.8 78 .8 72C2 56-.5 40 1 24S.4 9 .6 7Q1 1.8 6 1.5Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cpath transform='translate(100 80) scale(-1 -1)' d='M6 1.5C24-.5 40 3.5 58 1.5S88-.5 94 1.5Q99.6 2 99.4 8C98 24 101 40 99 56S98.6 70 98.8 73Q98.6 79 92 79C76 81 58 77 42 79S14 80.4 7.5 78.6Q.8 78 .8 72C2 56-.5 40 1 24S.4 9 .6 7Q1 1.8 6 1.5Z'/%3E%3C/svg%3E");
}
@media (max-width: 900px) {
  /* perks under the schedule title: one centred block, dots in a straight column */
  .bk-intro .bk-perks { justify-self: center; justify-items: start; text-align: left; width: max-content; max-width: 100%; }
}
@media (max-width: 600px) {
  /* blog categories: centred pills that wrap, instead of a row cut off at the edge */
  body .blog-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 8px; margin-inline: 0; padding-inline: 0; border-bottom: 0; }
  body .blog-tabs button { padding: 9px 16px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; margin-bottom: 0; background: var(--white); font-size: 14px; }
  body .blog-tabs button[aria-pressed="true"] { background: var(--cocoa); border-color: var(--cocoa); color: var(--white); }
}

/* hero headline: desktop "Movement. / Balance. You.", phones "Movement. Balance. / You." */
.hero .h-xl .hx-mob { display: none; }
@media (max-width: 760px) {
  .hero .h-xl .hx-desk { display: none; }
  .hero .h-xl .hx-mob { display: inline; }
  .hero .h-xl .hx-line { white-space: nowrap; }
  .hero .h-xl { font-size: clamp(26px, 9vw, 46px); }
}

/* contact topics on narrow phones: one long word ("Индивидуална") must fit inside its half-width chip */
@media (max-width: 480px) {
  #contact-form .cf-chip span { padding-inline: 6px; font-size: clamp(12.5px, 3.7vw, 14px); letter-spacing: -.01em; hyphens: auto; }
}

/* Weekly schedule on phones: exactly one week of equal day tiles on screen (no tile cut at the edge),
   the second week a swipe away — the same rhythm as the booking card */
@media (max-width: 600px) {
  .days { --gap: 6px; gap: var(--gap); margin-inline: 0; padding-inline: 0; scroll-snap-type: x mandatory; }
  .days > :first-child, .days > :last-child { margin-inline: 0; }
  .day { flex: 0 0 calc((100% - 6 * var(--gap)) / 7); min-width: 0; padding-inline: 0; scroll-snap-align: none; }
  .day:nth-child(7n + 1) { scroll-snap-align: start; }
  .day--wk2 { margin-left: 0; }
  .day .dn { font-size: 10px; letter-spacing: .04em; }
  .day .dd { font-size: 19px; }
  .days { -webkit-mask-image: none; mask-image: none; }
  .days.has-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); }
}

/* contact map: Google Maps | Waze side by side, "Как да стигнеш" full width under them */
.btn--waze .wz { width: 24px; height: 21px; flex: none; }
.map-actions .btn:last-child:nth-child(3) { grid-column: 1 / -1; }

/* Contact card "Обади се или пиши": the channel icons in the site's silk style (same as the brown buttons),
   one size and line weight for all four, centred in the card */
.info-grid > div:has(.soc-row) { display: flex; flex-direction: column; }
:root .soc-row { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
:root .info-grid a.soc, :root .info-grid a.soc--fb, :root .info-grid a.soc--tel, :root .info-grid a.soc--mail, :root .soc--ig {
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--cocoa); background-image: var(--silk-layer); background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 20px -12px rgba(60, 46, 36, .7);
}
:root .info-grid a.soc:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 14px 24px -12px rgba(60, 46, 36, .75); }
:root .soc svg, :root .soc--fb svg, :root .soc--tel svg, :root .soc--mail svg { width: 21px; height: 21px; }
:root .soc--fb svg path { fill: none; }
/* always one row: the circles shrink with the card instead of wrapping */
:root .soc-row { flex-wrap: nowrap; gap: 10px; }
:root .info-grid a.soc, :root .info-grid a.soc--fb, :root .info-grid a.soc--tel, :root .info-grid a.soc--mail, :root .soc--ig {
  width: min(48px, calc((100% - 30px) / 4)); height: auto; aspect-ratio: 1; flex: none;
}

/* Daily plan on grafik.html: the day's rhythm as one clear table (rows open the booking card on that class) */
.day-plan-sec { padding-top: clamp(56px, 8vw, 104px); }
.dp-card { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 30px); box-shadow: 0 30px 60px -40px rgba(80, 64, 52, .45); }
.dp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 0 12px 14px; border-bottom: 1px solid var(--line); }
.dp-title { font-family: var(--serif, "Playfair Display", serif); font-size: 24px; font-weight: 600; color: var(--text); }
.dp-when { font-size: 14px; font-weight: 600; color: var(--cocoa); letter-spacing: .02em; }
.dp-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.dp-row {
  width: 100%; display: grid; grid-template-columns: 128px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 13px 12px; border: 0; border-radius: 14px; background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  transition: background-color .2s;
}
button.dp-row:hover { background: var(--blush); }
button.dp-row:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 2px; }
.dp-time { font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.dp-name { position: relative; padding-left: 20px; font-size: 16px; font-weight: 600; }
.dp-name::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--cocoa); }
.dp--private .dp-name::before { background: #fff; box-shadow: inset 0 0 0 2px var(--cocoa); }
.dp--mat .dp-name::before { background: var(--rose); }
.dp-meta { font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.dp-go { font-size: 13.5px; font-weight: 700; color: var(--cocoa); white-space: nowrap; opacity: .55; transition: opacity .2s, translate .2s; }
button.dp-row:hover .dp-go, button.dp-row:focus-visible .dp-go { opacity: 1; translate: 3px 0; }
.dp-break { cursor: default; margin: 4px 0; background: repeating-linear-gradient(135deg, var(--blush) 0 8px, #F6F0E9 8px 16px); }
.dp-break .dp-name { padding-left: 0; font-style: italic; font-weight: 500; color: var(--cocoa); }
.dp-break .dp-name::before { display: none; }
@media (max-width: 600px) {
  .dp-head { justify-content: center; text-align: center; }
  .dp-row { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 10px; }
  .dp-time { grid-row: span 2; font-size: 14.5px; }
  .dp-name { font-size: 15px; padding-left: 16px; }
  .dp-meta { grid-column: 2; grid-row: 2; padding-left: 16px; font-size: 12.5px; }
  .dp-go { grid-column: 3; grid-row: 1 / span 2; opacity: .8; }
  .dp-break .dp-time { grid-row: auto; }
}
/* duration only shows on phones, where the end time is dropped */
.dp-mins { display: none; }
@media (max-width: 600px) {
  .dp-card { padding: 14px 8px; }
  .dp-row { grid-template-columns: 52px minmax(0, 1fr) 22px; gap: 2px 12px; padding: 11px 10px; }
  .dp-time { grid-row: span 2; align-self: center; font-size: 15px; }
  .dp-end { display: none; }
  .dp-mins { display: inline; }
  .dp-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dp-go { font-size: 17px; text-align: right; }
  .dp-go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dp-break { grid-template-columns: 1fr; text-align: center; gap: 2px; }
  .dp-break .dp-time { grid-row: auto; font-size: 13.5px; }
  .dp-break .dp-end { display: inline; }
}
@media (max-width: 600px) {
  .dp-row { grid-template-columns: 48px minmax(0, 1fr) 18px; column-gap: 10px; padding-inline: 8px; }
  .dp-time { font-size: clamp(14px, 3.9vw, 15px); }
  .dp-name { font-size: clamp(13.5px, 3.85vw, 15px); padding-left: 15px; }
  .dp-meta { padding-left: 15px; }
}
@media (max-width: 340px) { .dp-name { white-space: normal; } }
@media (max-width: 600px) { .dp-row.dp-break { grid-template-columns: 1fr; justify-items: center; padding-block: 10px; } }