/* ==========================================================================
   Lunaya Studios — design system
   Earthy, calm, glassy. Rounded and friendly.
   ========================================================================== */

:root {
  /* palette */
  --sand: #ede6da;
  --sand-deep: #e3d9c8;
  --cream: #f7f3ea;
  --clay: #a97c5b;
  --clay-soft: #c9a384;
  --brown: #4f4234;
  --ink: #332b22;
  --sage: #8a9b7c;
  --olive: #5f6f52;
  --moss: #3e4a36;
  --moss-deep: #2e3828;
  --white-40: rgba(255, 255, 255, 0.4);
  --white-55: rgba(255, 255, 255, 0.55);

  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Outfit", -apple-system, "Helvetica Neue", sans-serif;

  /* shape */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 30px;
  --r-arch: 999px 999px 30px 30px;
  /* the big top-corner sweep shared by the footer and the full-bleed CTA that
     tucks under it — they must match, so both read it from here */
  --r-block: clamp(28px, 4vw, 56px);

  --nav-h: 76px;
  /* height of the dismissible promo banner, set by JS (js/main.js buildPromoBanner)
     when it's shown, 0 when hidden/absent — kept separate from --nav-h so it
     never distorts the nav pill's own height, only the offsets that use it */
  --promo-h: 0px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--sage); color: var(--cream); }

/* macOS-style floating overlay scrollbar — OverlayScrollbars, loaded site-wide
   by js/scrollbar.js. Theme: slim, black-with-opacity, auto-hiding, floats over
   the content (no gutter). Native scrollbars stay as the no-JS fallback.
   Cannot reach inside cross-origin iframes (the Rezerv widgets keep their own). */
.os-theme-dark {
  /* !important so these win over the library's own .os-theme-dark, which is
     injected after style.css at runtime and would otherwise take precedence. */
  --os-size: 11px !important;
  --os-padding-perpendicular: 2px !important;
  --os-padding-axis: 2px !important;
  --os-handle-border-radius: 999px !important;
  --os-handle-bg: rgba(0, 0, 0, 0.38) !important;
  --os-handle-bg-hover: rgba(0, 0, 0, 0.52) !important;
  --os-handle-bg-active: rgba(0, 0, 0, 0.6) !important;
}

/* Rezerv embed: small left inset */
.rezerv-embed {
  padding-left: 10px;
  width: 100%;
  max-width: 1200px;
  margin: 64px auto 0;
  height: 800px;
  overflow: hidden;
}
#rezerv-timetable iframe {
  display: block;
  border: none;
  width: 100%;
  height: calc(100% + 17px);
  overflow: auto;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 480;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--brown);
}

.display-xl { font-size: clamp(2.9rem, 7.4vw, 6.2rem); }
.display-lg { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
.display-md { font-size: clamp(1.6rem, 3vw, 2.4rem); }

em, .accent-italic {
  font-style: italic;
  font-weight: 380;
  color: var(--olive);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--clay);
}

.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(51, 43, 34, 0.78); }
.muted { color: rgba(51, 43, 34, 0.62); }

/* ---------- layout ---------- */

.container {
  width: 100%;
  max-width: 1200px;
  padding-inline: 32px;
  margin-inline: auto;
}

.section { padding: clamp(72px, 10vw, 140px) 0; }
/* No cap below 600px: the old 640px ceiling was already a no-op there (mobile
   containers rarely reach it), so a percentage cap at that width would be a
   new, unwanted constraint rather than a like-for-like swap. */
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head p { margin-top: 16px; }
@media (min-width: 601px) {
  .section-head { max-width: 90%; }
}

/* ---------- buttons (glassy) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), background 0.35s, box-shadow 0.35s, border-color 0.35s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-glass {
  background: var(--white-40);
  border-color: rgba(255, 255, 255, 0.65);
  color: var(--brown);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(79, 66, 52, 0.1);
}
.btn-glass:hover {
  background: var(--white-55);
  box-shadow: 0 14px 34px rgba(79, 66, 52, 0.16);
}

.btn-glass-dark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--cream);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn-glass-dark:hover { background: rgba(255, 255, 255, 0.2); }

.btn-solid {
  background: var(--moss);
  color: var(--cream);
  border-color: var(--moss);
  box-shadow: 0 10px 26px rgba(62, 74, 54, 0.28);
}
.btn-solid:hover { background: var(--moss-deep); box-shadow: 0 16px 34px rgba(62, 74, 54, 0.34); }

.btn-danger-solid {
  background: #b8643f; color: var(--cream); border-color: #b8643f;
  box-shadow: 0 10px 26px rgba(184, 100, 63, 0.26);
}
.btn-danger-solid:hover { background: #a4552f; box-shadow: 0 16px 34px rgba(184, 100, 63, 0.32); }

.btn-sm { padding: 11px 22px; font-size: 0.88rem; }
.btn-lg { padding: 18px 38px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- promo banner ----------
   Dismissible ribbon above the nav. `--promo-h` is measured and set by
   buildPromoBanner() in js/main.js — every other fixed/top-padding rule
   that references the header height reads that variable too, so the whole
   page reflows correctly whether the banner is showing or dismissed. No
   dismissal is persisted: a page refresh always shows it again. */
.promo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--moss);
  color: var(--cream);
}
.promo-banner-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 52px;
  text-align: center;
}
.promo-banner-text {
  font-size: 0.95rem; line-height: 1.45;
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.promo-banner-text strong { font-weight: 560; }
/* mid-rotation state when the banner cycles between two live promos */
.promo-banner-text.promo-swap-out { opacity: 0; transform: translateY(-7px); }
.promo-code {
  display: inline-block;
  padding: 2px 10px;
  margin: 0 2px;
  border-radius: 999px;
  background: rgba(247, 243, 234, 0.16);
  border: 1px solid rgba(247, 243, 234, 0.4);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* right-side controls: pagination dots (when 2 promos rotate) + dismiss */
.promo-controls {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}
.promo-dots { display: flex; align-items: center; gap: 7px; }
.promo-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(247, 243, 234, 0.4);
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.promo-dot:hover { background: rgba(247, 243, 234, 0.7); }
.promo-dot[aria-current="true"] { background: var(--cream); transform: scale(1.25); }
.promo-banner-close {
  position: static;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  border-radius: 999px;
  opacity: 0.8;
  transition: opacity 0.25s, background 0.25s;
}
.promo-banner-close svg { width: 16px; height: 16px; }
.promo-banner-close:hover { opacity: 1; background: rgba(247, 243, 234, 0.16); }
/* widen the ribbon's side padding so the centred text clears the controls */
.promo-banner.has-dots .promo-banner-inner { padding-left: 100px; padding-right: 100px; }
@media (max-width: 600px) {
  .promo-banner-inner { padding: 12px 40px; }
  .promo-banner-text { font-size: 0.92rem; }
  .promo-controls { right: 12px; gap: 9px; }
  .promo-banner.has-dots .promo-banner-inner { padding-left: 76px; padding-right: 76px; }
}

/* ---------- navigation ---------- */

.nav-wrap {
  position: fixed;
  top: calc(18px + var(--promo-h, 0px));
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
  transition: top 0.3s var(--ease);
}
.nav {
  pointer-events: auto;
  width: min(1240px, calc(100% - 32px));
  margin-inline: auto;
  height: var(--nav-h);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 28px;
  border-radius: 999px;
  background: rgba(247, 243, 234, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(79, 66, 52, 0.12);
  transition: box-shadow 0.4s;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 520;
  color: var(--brown);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-logo .logo-mark {
  width: 34px;
  height: 34px;
  flex: none;
}
.nav-logo .logo-mark-img { object-fit: contain; display: block; }
.nav-logo .nav-logo-img { height: 38px; width: auto; display: block; }

.nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.nav-links a {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 450;
  color: rgba(51, 43, 34, 0.78);
  transition: background 0.3s, color 0.3s;
}
.nav-links a:hover { background: rgba(138, 155, 124, 0.16); color: var(--moss); }
.nav-links a.active { background: rgba(138, 155, 124, 0.22); color: var(--moss); font-weight: 540; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-burger {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(79, 66, 52, 0.2);
  background: var(--white-40);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-burger span {
  width: 18px;
  height: 1.6px;
  background: var(--brown);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.3s;
}

/* mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(237, 230, 218, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  padding: calc(100px + var(--promo-h, 0px)) 32px 48px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu .mm-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: auto 0;
}
.mobile-menu a.mm-link {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--brown);
  padding: 10px 0;
  border-bottom: 1px solid rgba(79, 66, 52, 0.12);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s;
}
.mobile-menu.open a.mm-link { transform: translateY(0); opacity: 1; }
.mobile-menu.open a.mm-link:nth-child(2) { transition-delay: 0.05s; }
.mobile-menu.open a.mm-link:nth-child(3) { transition-delay: 0.1s; }
.mobile-menu.open a.mm-link:nth-child(4) { transition-delay: 0.15s; }
.mobile-menu.open a.mm-link:nth-child(5) { transition-delay: 0.2s; }
.mobile-menu .mm-actions { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }

body.menu-locked { overflow: hidden; }
body.menu-locked .nav-burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
body.menu-locked .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-locked .nav-burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + var(--promo-h, 0px) + 60px) 0 60px;
  overflow: hidden;
}

/* faded cover photo behind the hero — kept very subtle (low opacity) and
   soft-faded at the edges, so the text and the wireframe rings stay visible. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/assets/images/photos/studio-reformer-room-1920.webp") center / cover no-repeat;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}

.hero-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}
.hero-bg-blob.b1 { width: 540px; height: 540px; background: var(--clay-soft); top: -140px; right: -120px; }
.hero-bg-blob.b2 { width: 460px; height: 460px; background: var(--sage); bottom: -160px; left: -140px; opacity: 0.4; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-copy .eyebrow { margin-bottom: 26px; }
.hero-copy h1 { margin-bottom: 28px; }
.hero-copy .lead { max-width: 480px; margin-bottom: 40px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-stats {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(44px, 6vh, 72px);
}
.hero-stats .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 480;
  color: var(--brown);
}
.hero-stats .stat span { font-size: 0.86rem; color: rgba(51, 43, 34, 0.6); }

/* hero visual — arch with moon motif */
.hero-visual { position: relative; }
.hero-arch {
  position: relative;
  border-radius: var(--r-arch);
  aspect-ratio: 4 / 5.1;
  background: linear-gradient(168deg, #d9c6ad 0%, var(--clay-soft) 38%, #8f9b7e 100%);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(79, 66, 52, 0.22);
}
.hero-arch .moon-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-arch .hero-scene {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.hero-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  border-radius: 999px;
  background: rgba(247, 243, 234, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(79, 66, 52, 0.18);
}
.hero-float-card .ic {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  background: var(--moss);
  display: grid;
  place-items: center;
}
.hero-float-card .ic svg { width: 20px; height: 20px; stroke: var(--cream); }
.hero-float-card strong { display: block; font-size: 0.92rem; color: var(--brown); line-height: 1.3; }
.hero-float-card span { font-size: 0.78rem; color: rgba(51, 43, 34, 0.6); }
/* rotating class-type messages around the arch window */
.float-msgs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.hero-float-card.fm {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
  animation: fmBob 7s ease-in-out infinite alternate;
}
.hero-float-card.fm.on { opacity: 1; visibility: visible; }
.hero-float-card .fm-text {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--brown);
  font-weight: 540;
  padding-right: 8px;
  white-space: nowrap;
}
.fm-1 { top: 34px; left: -13%; }
.fm-2 { top: 13%; right: -11%; animation-delay: -1.6s; }
.fm-3 { top: 44%; left: -17%; animation-delay: -3.1s; }
.fm-4 { top: 57%; right: -14%; animation-delay: -4.4s; }
.fm-5 { bottom: 3%; left: -9%; animation-delay: -5.8s; }
@keyframes fmBob {
  from { transform: translateY(-6px); }
  to { transform: translateY(8px); }
}

/* breathing controls under the window, bottom right */
.breathe-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  position: relative;
  z-index: 5;
}
.btn-icon {
  width: 54px;
  height: 54px;
  padding: 0;
  justify-content: center;
}
.btn-icon svg { width: 20px; height: 20px; }
.btn-icon:hover svg { transform: none; }

/* ---------- marquee ---------- */

.marquee {
  background: var(--moss);
  color: var(--cream);
  padding: 22px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  will-change: transform;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 420;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 48px;
}
.marquee-track span::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
}

/* ---------- philosophy ---------- */

.philosophy { background: var(--cream); border-radius: clamp(28px, 4vw, 56px); }
.philo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.philo-statement {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 440;
  line-height: 1.28;
  color: var(--brown);
}
.philo-statement .hl {
  font-style: italic;
  color: var(--olive);
}
.philo-body {
  margin-top: 22px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(51, 43, 34, 0.72);
  max-width: 38ch;
}
.philo-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.philo-imgs .pi {
  border-radius: var(--r-arch);
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}
.philo-imgs .pi:nth-child(2) { margin-top: 44px; }
.pi-1 { background: linear-gradient(165deg, #cdb89a, var(--clay)); }
.pi-2 { background: linear-gradient(165deg, #a9b598, var(--olive)); }
.pi svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pi img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- the studio carousel ---------- */

/* Full-bleed strip whose focused slide lands exactly on the page's 1200px
   measure, with its neighbours running out past the container on both sides.
   The track is centred by js/studio-slider.js — the maths needs the measured
   slide width, which only the browser knows once --ss-w resolves. */
.studio-slider {
  /* The slide no longer has to fill the 1200px measure — narrower keeps the
     16:9 frame short and lets more of the neighbours peek in on each side.
     ~495px tall at the widest, versus ~640px when this matched .container. */
  --ss-w: min(880px, calc(100vw - 64px));
  --ss-gap: clamp(8px, 1vw, 16px);
  position: relative;
}
.ss-viewport {
  overflow: hidden;
  padding: 30px 0 16px;
  margin: -30px 0 -16px;
}
.ss-track {
  display: flex;
  gap: var(--ss-gap);
  will-change: transform;
  transition: transform 0.9s var(--ease);
}
.ss-slide {
  flex: 0 0 var(--ss-w);
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(165deg, #d9c6ad, var(--clay-soft));
  /* the off-centre slides sit back so the eye lands on the focused one */
  opacity: 0.38;
  transform: scale(0.94);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  cursor: pointer;
}
.ss-slide.is-active { opacity: 1; transform: scale(1); cursor: default; }
.ss-slide img {
  width: 100%;
  /* the width/height attributes are a presentational hint that outranks
     aspect-ratio, so height must be cleared for the frame below to apply */
  height: auto;
  /* 16:9 exactly — the carousel sources are the client's own re-crops at that
     ratio, so any other frame here would crop their framing a second time */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.ss-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(46, 40, 32, 0.46) 0%, rgba(46, 40, 32, 0) 40%);
}
.ss-slide figcaption {
  position: absolute;
  left: clamp(20px, 3vw, 34px);
  bottom: clamp(16px, 2.4vw, 26px);
  z-index: 1;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  text-shadow: 0 1px 16px rgba(46, 56, 40, 0.6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.ss-slide.is-active figcaption { opacity: 1; transform: none; }

/* dots left, arrows right, both on the same 1200px measure as the slide */
.ss-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(22px, 3vw, 34px);
}
.ss-dots { display: flex; align-items: center; gap: 10px; }
.ss-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(79, 66, 52, 0.22);
  cursor: pointer;
  transition: width 0.5s var(--ease), background 0.5s var(--ease);
}
.ss-dot.is-active { width: 30px; background: var(--clay); }

.ss-arrows { display: flex; gap: 10px; }
.ss-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(79, 66, 52, 0.18);
  background: rgba(247, 243, 234, 0.6);
  color: var(--brown);
  cursor: pointer;
  transition: background 0.4s, border-color 0.4s, transform 0.4s var(--ease);
}
.ss-btn svg { width: 19px; height: 19px; }
.ss-btn:hover { background: var(--cream); border-color: rgba(79, 66, 52, 0.34); }
.ss-btn:active { transform: scale(0.94); }

/* The instant a clone is swapped for its identical real slide, everything has
   to move without animating — otherwise the seam shows as a flicker. */
.ss-jumping .ss-track,
.ss-jumping .ss-slide,
.ss-jumping .ss-slide figcaption { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ss-track, .ss-slide, .ss-slide figcaption { transition-duration: 0.001s; }
}

/* ---------- reusable photo strip ---------- */
/* An even row of photographs with quiet captions underneath. Used on the
   contact page to show what arriving actually looks like. */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.photo-strip figure { margin: 0; }
/* A gentle stagger rather than three matching blocks — medium, short, long.
   Captions sit above, so the tops stay on one line and only the bottom edge
   steps. Keep the spread small; much more and it reads as a mistake. */
.photo-strip figure:nth-child(1) img { aspect-ratio: 4 / 4.6; }
.photo-strip figure:nth-child(2) img { aspect-ratio: 4 / 4.1; }
.photo-strip figure:nth-child(3) img { aspect-ratio: 4 / 5.1; }
.photo-strip img {
  width: 100%;
  /* the width/height attributes are kept on the tags to reserve layout space,
     but their presentational hint outranks aspect-ratio — so clear it here or
     every tile renders at its intrinsic pixel height */
  height: auto;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  display: block;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, #d9c6ad, var(--clay-soft));
  box-shadow: 0 26px 52px rgba(79, 66, 52, 0.14);
}
.photo-strip figcaption {
  margin-bottom: 14px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(51, 43, 34, 0.55);
}

/* studio feature points */
.studio-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}
.sf-item .sf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(169, 124, 91, 0.12);
  color: var(--clay);
  margin-bottom: 18px;
}
.sf-item .sf-icon svg { width: 24px; height: 24px; }
.sf-item h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 480;
  color: var(--brown);
  margin-bottom: 8px;
}
.sf-item p { font-size: 0.95rem; color: rgba(51, 43, 34, 0.68); line-height: 1.65; }

.philo-points { margin-top: 40px; display: grid; gap: 0; }
.philo-point {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid rgba(79, 66, 52, 0.12);
  align-items: flex-start;
}
.philo-point .num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--clay);
  font-size: 1.1rem;
  flex: none;
  width: 40px;
}
.philo-point strong { display: block; color: var(--brown); font-weight: 540; margin-bottom: 2px; }
.philo-point p { font-size: 0.94rem; color: rgba(51, 43, 34, 0.66); }

/* ---------- class cards ---------- */

.classes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.class-card {
  border-radius: var(--r-lg);
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
  display: flex;
  flex-direction: column;
}
.class-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(79, 66, 52, 0.16);
}
.class-card .cc-visual {
  margin: 14px 14px 0;
  border-radius: var(--r-arch);
  aspect-ratio: 16 / 10.5;
  position: relative;
  overflow: hidden;
  /* contain the photo's blend mode to this tile, not the page behind it */
  isolation: isolate;
}
/* A ghost of the real class, layered between the gradient and the line art.
   It sits well back at rest so the card still reads as the drawn mark, then
   surfaces and drifts in a little on hover. Category cards stack several and
   cross-fade between them — only `.is-on` is ever visible, and the long fade
   means the two overlap rather than cutting. */
.class-card .cc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  /* borrow the gradient's hue so the photo never fights the colour family */
  mix-blend-mode: luminosity;
  transition: opacity 1.8s var(--ease), transform 1s var(--ease);
}
.class-card .cc-photo.is-on { opacity: 0.18; }
.class-card:hover .cc-photo.is-on {
  opacity: 0.5;
  transform: scale(1.09);
}
@media (prefers-reduced-motion: reduce) {
  .class-card:hover .cc-photo.is-on { transform: scale(1.04); }
}
.class-card .cc-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-grad-1 { background: linear-gradient(160deg, #d9c6ad, var(--clay)); }
.cc-grad-2 { background: linear-gradient(160deg, #b9c4a8, var(--olive)); }
.cc-grad-3 { background: linear-gradient(160deg, #cbb9a4, #8a7a64); }
.cc-grad-4 { background: linear-gradient(160deg, #d8cdbd, var(--sage)); }
.cc-grad-5 { background: linear-gradient(160deg, #c5b49b, var(--moss)); }
.cc-grad-6 { background: linear-gradient(160deg, #ddd2bf, var(--clay-soft)); }

/* category colour families — one hue per category, a shade per class */
/* Flow — clay / terracotta */
.cc-flow-1 { background: linear-gradient(160deg, #e4d2bb, #c9a384); }
.cc-flow-2 { background: linear-gradient(160deg, #cca788, #a97c5b); }
.cc-flow-3 { background: linear-gradient(160deg, #a97c5b, #7c5638); }
.cc-flow-4 { background: linear-gradient(160deg, #dcc0a0, #b88a63); }
.cc-flow-5 { background: linear-gradient(160deg, #c0956d, #925f3d); }
/* Themed — olive / moss */
.cc-themed-1 { background: linear-gradient(160deg, #c2cdb1, #8a9b7c); }
.cc-themed-2 { background: linear-gradient(160deg, #9caa86, #6f8060); }
.cc-themed-3 { background: linear-gradient(160deg, #7b8d66, #5f6f52); }
.cc-themed-4 { background: linear-gradient(160deg, #56654a, #2e3828); }
/* Women's Wellness — warm honey / wheat */
.cc-womens-1 { background: linear-gradient(160deg, #e6d8b8, #d0bd8e); }
.cc-womens-2 { background: linear-gradient(160deg, #d2bd86, #b69e63); }
.cc-womens-3 { background: linear-gradient(160deg, #ad9255, #836b3c); }

.class-card .cc-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.class-card .cc-tags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tag {
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(138, 155, 124, 0.18);
  color: var(--olive);
}
.tag.tag-clay { background: rgba(169, 124, 91, 0.16); color: var(--clay); }
.class-card h3 { font-size: 1.45rem; margin-bottom: 10px; }
.class-card .cc-desc { font-size: 0.95rem; color: rgba(51, 43, 34, 0.68); flex: 1; }
.class-card .cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(79, 66, 52, 0.1);
}
.cc-foot .meta { font-size: 0.85rem; color: rgba(51, 43, 34, 0.6); }

.intensity { display: flex; gap: 4px; align-items: center; }
.intensity i {
  width: 16px;
  height: 5px;
  border-radius: 3px;
  background: rgba(79, 66, 52, 0.14);
}
.intensity i.on { background: var(--clay); }

.class-card .cc-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--clay);
  margin-bottom: 12px;
}
.class-card h3 + .cc-tagline { margin-top: -4px; }
.cc-foot .cc-focus {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--olive);
  text-align: right;
}
.cat-note {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--clay);
  margin-top: 14px;
}

/* sticky section tabs on the classes page.
   Plain `position: sticky` doesn't stick here: OverlayScrollbars (see
   js/scrollbar.js) restructures body/html so the real scrolling element is
   <html>, but it also leaves <body> with its own non-visible overflow — and
   body sits between this bar and <html> in the DOM. Per spec, sticky locks
   onto the *nearest* ancestor with non-visible overflow, which is body here,
   and body's own scroll offset never moves (the actual scroll happens one
   level up, on <html>) — so from the bar's point of view it never scrolls
   and never stickies. main.js therefore drives this with a scroll listener
   that toggles `.is-stuck` (position: fixed) instead. */
.classes-tabs-bar {
  padding: 12px 0;
  margin-bottom: 8px;
}
.classes-tabs-bar.is-stuck {
  position: fixed;
  top: calc(var(--nav-h) + var(--promo-h, 0px) + 20px);
  left: 0;
  right: 0;
  z-index: 500;
}
.classes-tabs-bar.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
}
.classes-tabs-spacer { height: 0; }

/* schedule page: pin the Rezerv timetable under the nav while its section is
   in view. Plain CSS `position: sticky` doesn't stick here — see the note
   above .classes-tabs-bar — so main.js drives a `top` offset on this
   position:relative box directly (clamped to how much room its own section
   has), growing `.rezerv-spacer` by the same amount so nothing overlaps and
   no stale gap is ever left behind once it releases. */
#rezerv-timetable { position: relative; }
.rezerv-spacer { height: 0; }
.classes-tabs { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }

/* schedule page, mobile only: the small 800px "peephole" above (see the
   base .rezerv-embed rule) forces a lot of internal scrolling inside the
   widget before a swipe ever reaches the rest of the page, and the
   page-hero above it adds a further dead zone of body scroll before the
   widget is even reached — together those read as two disconnected
   scrollers. Below the breakpoint we drop the hero and the top margin so
   the widget starts at essentially the first scroll, and size its peephole
   to most of the viewport instead of a fixed 800px, so a touch anywhere on
   screen already lands on the live widget. The widget's cross-origin
   content spans roughly two weeks and swings from a quiet day to a fully
   booked one (checked live: single days ranged from 0 to 7 classes), so
   flattening it to one static height with no internal scroll would need an
   unworkably wide guess — keeping its native internal scroll and just
   enlarging the window it's viewed through is what actually holds up
   across that range. main.js's initScheduleSticky() skips its pin-under-nav
   logic at this width so it doesn't fight this fixed margin. */
@media (max-width: 600px) {
  body[data-page="schedule"] .page-hero { display: none; }
  body[data-page="schedule"] #rezerv-timetable {
    max-width: none;
    margin-top: calc(var(--nav-h) + var(--promo-h, 0px) + 24px);
    height: calc(100vh - var(--nav-h) - var(--promo-h, 0px) - 24px);
  }
  /* mobile schedule is meant to be used as a standalone booking tool, not a
     full page — drop the site footer below it (nav stays, for navigating
     elsewhere) */
  body[data-page="schedule"] footer { display: none; }
}

/* gradient fade behind the nav + tabs so scrolling content dissolves into the
   background instead of peeking through the floating nav. Shown only while the
   tabs are stuck (see main.js). Sits below the tabs (500) and nav (1000). */
.classes-scroll-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 400;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--sand), var(--sand) 50%, rgba(237, 230, 218, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.classes-scroll-mask.on { opacity: 1; }
.ct-tab {
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid var(--sand-deep);
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 460;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ct-tab:hover { border-color: var(--olive); }
.ct-tab.active { background: var(--moss); color: var(--cream); border-color: var(--moss); }
/* tab clicks scroll to .cat-head (after the block's top padding) so every
   section's heading lands the same distance below the sticky tabs */
body[data-page="classes"] .cat-block,
body[data-page="classes"] .cat-head { scroll-margin-top: calc(160px + var(--promo-h, 0px)); }
/* mobile: keep the tabs on one row (horizontal scroll) so the bar height — and
   the scroll offset above — stay consistent */
@media (max-width: 600px) {
  .classes-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .classes-tabs::-webkit-scrollbar { display: none; }
}

/* category cards (home page classes preview) */
.cat-card { text-decoration: none; color: inherit; }
.cat-card .cc-desc { flex: none; margin-bottom: 18px; }
.cat-list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.cat-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.95rem;
  color: var(--brown);
}
.cat-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--clay);
}
.cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 540;
  color: var(--olive);
}
.cat-link svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.cat-card:hover .cat-link svg { transform: translateX(4px); }

/* ---------- steps (how it works) ---------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.step-card {
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  position: relative;
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}
.step-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(79, 66, 52, 0.13); }
.step-card .step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  color: rgba(169, 124, 91, 0.4);
  line-height: 1;
  margin-bottom: 18px;
}
.step-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step-card p { font-size: 0.92rem; color: rgba(51, 43, 34, 0.66); }

/* ---------- dark band (schedule teaser) ---------- */

.dark-band {
  background: var(--moss);
  border-radius: clamp(28px, 4vw, 56px);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.dark-band h2, .dark-band h3 { color: var(--cream); }
.dark-band .eyebrow { color: var(--sage); }
.dark-band .eyebrow::before { background: var(--sage); }
.dark-band .lead { color: rgba(247, 243, 234, 0.72); }
.dark-band .band-inner {
  padding: clamp(64px, 8vw, 110px) clamp(28px, 6vw, 90px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.dark-band .band-moon {
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(201, 163, 132, 0.35), transparent 70%);
  pointer-events: none;
}

.mini-week {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  padding: 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mini-week .mw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.92rem;
}
.mini-week .mw-row:last-child { border-bottom: none; }
.mini-week .mw-row .t { color: rgba(247, 243, 234, 0.6); font-size: 0.82rem; width: 64px; }
.mini-week .mw-row strong { font-weight: 500; flex: 1; }
.mini-week .mw-row .pill {
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(201, 163, 132, 0.22);
  color: #e3cdb8;
}

/* ---------- testimonials ---------- */

.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-card {
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.testi-card .quote-mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--clay-soft);
}
.testi-card p { font-size: 1rem; color: rgba(51, 43, 34, 0.78); flex: 1; }
.testi-card .who { display: flex; align-items: center; gap: 13px; }
.testi-card .who .av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream);
  font-size: 1.05rem;
}
.av-1 { background: var(--clay); }
.av-2 { background: var(--olive); }
.av-3 { background: var(--sage); }
.testi-card .who strong { display: block; font-size: 0.95rem; color: var(--brown); }
.testi-card .who span { font-size: 0.82rem; color: rgba(51, 43, 34, 0.55); }

/* ---------- CTA banner ---------- */

.cta-banner {
  background: linear-gradient(160deg, var(--clay-soft), var(--clay));
  border-radius: clamp(28px, 4vw, 56px);
  padding: clamp(64px, 9vw, 120px) clamp(28px, 6vw, 90px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(247, 243, 234, 0.25);
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
}
/* Full-bleed variant (home): runs edge to edge and sits flush on the footer,
   so only the top corners are rounded — same radius the footer uses, so the
   two stack into one closing block. The photograph sits behind everything at
   a whisper, just enough to warm the gradient. */
.cta-banner.cta-full {
  border-radius: var(--r-block) var(--r-block) 0 0;
  padding-inline: 0;
  /* Run on for one corner-radius past the footer's top edge and pull the same
     amount back off the layout. The footer paints over the overrun, so its
     rounded corners bite into clay instead of leaving two pale notches. */
  padding-bottom: calc(clamp(64px, 9vw, 120px) + var(--r-block));
  margin-bottom: calc(var(--r-block) * -1);
}
.cta-full .cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0.1;
  pointer-events: none;
}
.cta-full > .container { position: relative; z-index: 1; }

.cta-banner h2 { color: var(--cream); margin-bottom: 18px; position: relative; }
.cta-banner p { color: rgba(247, 243, 234, 0.85); max-width: 480px; margin: 0 auto 36px; position: relative; }
.cta-banner .btn { position: relative; }

/* ---------- footer ---------- */

footer {
  background: var(--moss-deep);
  color: rgba(247, 243, 234, 0.75);
  border-radius: var(--r-block) var(--r-block) 0 0;
  overflow: hidden;
  /* paint above the full-bleed CTA, which runs on underneath so the corner
     sweep cuts into clay rather than the page background */
  position: relative;
  z-index: 1;
}
.footer-inner { padding-top: clamp(56px, 7vw, 90px); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 60px);
  padding-bottom: 32px;
}
.footer-grid h4 {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 18px;
  font-weight: 540;
}
.footer-grid ul { list-style: none; display: grid; gap: 10px; }
.footer-grid a { font-size: 0.95rem; transition: color 0.3s; }
.footer-grid a:hover { color: var(--cream); }
.footer-brand p { font-size: 0.95rem; max-width: 280px; }
.footer-brand .nav-logo { color: var(--cream); }
/* Updated wordmark on the dark footer: invert the dark SVG to read as cream. */
.footer-logo { display: inline-block; width: 150px; }
.footer-logo img { width: 100%; height: auto; display: block; filter: brightness(0) invert(1); opacity: 0.9; }

.footer-word {
  width: 100%;
  max-width: 590px;
  aspect-ratio: 607 / 240;
  margin: 0 auto -5.12em;
  background-color: rgba(247, 243, 234, 0.1);
  -webkit-mask: url(/assets/images/lunaya-text-logo.svg) no-repeat center / contain;
  mask: url(/assets/images/lunaya-text-logo.svg) no-repeat center / contain;
  user-select: none;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0 28px;
  border-top: 1px solid rgba(247, 243, 234, 0.12);
  font-size: 0.82rem;
  color: rgba(247, 243, 234, 0.5);
}

/* ---------- page hero (inner pages) ---------- */

.page-hero {
  padding: calc(140px + var(--promo-h, 0px)) 0 clamp(40px, 6vw, 70px);
  position: relative;
  overflow: visible;
}
.page-hero .eyebrow { display: none; }
.page-hero h1 { max-width: 100%; }
.page-hero .lead { max-width: none; margin-top: 20px; }
body[data-page="schedule"] .page-hero { padding-bottom: max(0px, calc(clamp(40px, 6vw, 70px) - 64px)); }

.footer-legal { display: flex; flex-direction: column; gap: 10px; flex-wrap: wrap; }
.footer-legal a { color: rgba(247, 243, 234, 0.5); font-size: 0.95rem; }
.footer-legal a:hover { color: var(--cream); }
.footer-brand .footer-legal { margin-top: 18px; }

/* ---------- contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.contact-cards { display: grid; gap: 18px; }
.contact-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px 28px;
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(79, 66, 52, 0.12); }
.contact-card .cc-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(169, 124, 91, 0.12);
  color: var(--clay);
}
.contact-card .cc-ic svg { width: 22px; height: 22px; }
.contact-card h3 {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 600;
  margin-bottom: 6px;
}
.contact-card p, .contact-card a { color: var(--brown); font-size: 1rem; line-height: 1.55; }
.contact-card a:hover { color: var(--clay); }

.hours-panel {
  background: var(--moss);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 48px);
}
.hours-panel h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 460; margin-bottom: 22px; color: var(--cream); }
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(247, 243, 234, 0.14);
}
.hours-row:first-of-type { border-top: none; }
.hours-row .day { color: rgba(247, 243, 234, 0.85); }
.hours-row .time { color: var(--cream); font-weight: 500; }
.hours-panel .hp-note { margin-top: 24px; font-size: 0.9rem; color: rgba(247, 243, 234, 0.6); }
.hours-panel .hp-note a { color: #c9a384; }

/* ---------- legal / policy pages ---------- */

.legal-doc { max-width: 760px; }
.legal-section { padding: clamp(26px, 3.5vw, 40px) 0; border-top: 1px solid rgba(79, 66, 52, 0.12); }
.legal-section:first-of-type { border-top: none; padding-top: 0; }
.legal-section h2 {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  margin-bottom: 14px;
}
.legal-section p { color: rgba(51, 43, 34, 0.78); margin-bottom: 12px; line-height: 1.75; }
.legal-section ul { margin: 0 0 12px; padding-left: 22px; color: rgba(51, 43, 34, 0.78); line-height: 1.7; }
.legal-section ul li { margin-bottom: 7px; }
.legal-section a { color: var(--olive); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- schedule / calendar ---------- */

.sched-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.week-nav { display: flex; align-items: center; gap: 14px; }
.week-nav .wk-btn {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(79, 66, 52, 0.18);
  background: var(--white-40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  transition: background 0.3s, transform 0.3s;
}
.week-nav .wk-btn:hover { background: var(--white-55); transform: translateY(-2px); }
.week-nav .wk-btn svg { width: 16px; height: 16px; stroke: var(--brown); }
.week-label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--brown);
  min-width: 210px;
  text-align: center;
}

.sched-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.sched-filter button {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(79, 66, 52, 0.16);
  background: transparent;
  font-size: 0.85rem;
  font-weight: 480;
  color: rgba(51, 43, 34, 0.7);
  transition: all 0.3s;
}
.sched-filter button:hover { border-color: var(--olive); color: var(--olive); }
.sched-filter button.active { background: var(--moss); border-color: var(--moss); color: var(--cream); }

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
.cal-day { min-width: 0; }
.cal-day-head {
  text-align: center;
  padding: 14px 8px;
  border-radius: var(--r-md);
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}
.cal-day-head .dow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(51, 43, 34, 0.55);
  font-weight: 540;
}
.cal-day-head .dom {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brown);
  line-height: 1.2;
}
.cal-day.today .cal-day-head { background: var(--moss); border-color: var(--moss); }
.cal-day.today .cal-day-head .dow { color: rgba(247, 243, 234, 0.7); }
.cal-day.today .cal-day-head .dom { color: var(--cream); }

.cal-slots { display: grid; gap: 10px; }
.cal-slot {
  width: 100%;
  text-align: left;
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
  position: relative;
}
.cal-slot:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(79, 66, 52, 0.14);
  border-color: var(--sage);
}
.cal-slot .cs-time { font-size: 0.76rem; font-weight: 560; color: var(--clay); letter-spacing: 0.04em; }
.cal-slot .cs-name { display: block; font-weight: 540; font-size: 0.9rem; color: var(--brown); margin: 3px 0 4px; line-height: 1.3; }
.cal-slot .cs-meta { font-size: 0.76rem; color: rgba(51, 43, 34, 0.55); }
.cal-slot .cs-spots {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 540;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(138, 155, 124, 0.16);
  color: var(--olive);
}
.cal-slot .cs-spots.low { background: rgba(169, 124, 91, 0.16); color: var(--clay); }
.cal-slot:disabled { opacity: 0.45; cursor: default; }
.cal-slot.booked { border-color: var(--olive); background: rgba(138, 155, 124, 0.12); }
.cal-slot.booked .cs-spots { background: var(--moss); color: var(--cream); }
.cal-empty {
  font-size: 0.8rem;
  color: rgba(51, 43, 34, 0.4);
  text-align: center;
  padding: 18px 6px;
  border: 1px dashed rgba(79, 66, 52, 0.18);
  border-radius: var(--r-sm);
}

.powered-by {
  margin-top: 30px;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(51, 43, 34, 0.5);
}
.powered-by a { text-decoration: underline; text-underline-offset: 3px; }
.powered-by.packages-note { font-size: 1.05rem; color: rgba(51, 43, 34, 0.7); text-align: left; }

/* ---------- pricing ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.price-card {
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  padding: 36px 30px;
  min-width: 0; /* let the 1fr columns shrink to fit; without this, the no-wrap CTA forces overflow */
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}
.price-card:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(79, 66, 52, 0.15); }
.price-card.featured {
  background: var(--moss);
  color: rgba(247, 243, 234, 0.8);
}
.price-card.featured h3, .price-card.featured .price { color: var(--cream); }
.price-card .pc-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--clay);
  color: var(--cream);
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card h3 { font-size: 1.3rem; margin-bottom: 6px; }
.price-card .pc-sub { font-size: 0.86rem; opacity: 0.65; margin-bottom: 22px; }
.price-card .price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 480;
  color: var(--brown);
  line-height: 1;
  margin-bottom: 4px;
}
.price-card .price .per { font-size: 0.95rem; font-family: var(--font-body); opacity: 0.6; }
.price-card .pc-per-class { font-size: 0.82rem; opacity: 0.6; margin-bottom: 24px; }
.price-card ul { list-style: none; display: grid; gap: 11px; margin-bottom: 30px; flex: 1; }
.price-card ul li { display: flex; gap: 10px; font-size: 0.92rem; align-items: flex-start; }
.price-card ul li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; stroke: var(--olive); }
.price-card.featured ul li svg { stroke: var(--sage); }

/* ---------- packages (price-list groups + filter tabs) ---------- */

.pkg-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 34px;
}
.pkg-tab {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--sand-deep);
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 460;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pkg-tab:hover { border-color: var(--olive); transform: translateY(-2px); }
.pkg-tab.active {
  background: var(--moss);
  color: var(--cream);
  border-color: var(--moss);
}
/* link-out pill (e.g. BASI rates) — pushed to the far right of the tabs row
   so it reads as a separate destination, not another filter */
.pkg-tab-link {
  margin-left: auto;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-right: 18px;
  text-decoration: none;
  color: var(--cream);
  border-color: transparent;
  /* clay, not moss — the green pills are all filters, so the one link out of
     the page gets the warm accent instead of reading as a selected tab */
  /* ramps dark quickly so the cream label clears 4.5:1 across the text run —
     --clay alone is only ~2.9:1 against cream */
  background: linear-gradient(120deg, var(--clay), #7d5539 45%);
  box-shadow: 0 6px 18px rgba(169, 124, 91, 0.28);
}
.pkg-tab-link-icon { width: 16px; height: 16px; flex: none; color: rgba(247, 243, 234, 0.8); }
.pkg-tab-link-arrow { transition: transform 0.35s var(--ease); }
.pkg-tab-link:hover {
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(169, 124, 91, 0.36);
}
.pkg-tab-link:hover .pkg-tab-link-arrow { transform: translateX(4px); }
/* slow sheen sweeping across the pill, so it reads as the one "special" chip */
.pkg-tab-link::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(247, 243, 234, 0.28), transparent);
  transform: skewX(-18deg);
  animation: pkgLinkSheen 4.5s var(--ease) infinite;
}
@keyframes pkgLinkSheen {
  0%, 62% { left: -60%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .pkg-tab-link::after { animation: none; }
}
@media (max-width: 620px) {
  .pkg-tab-link { margin-left: 0; }
}

.pkg-grid { display: flex; flex-direction: column; gap: 52px; }
.pkg-section.pkg-hidden { display: none; }
.pkg-section-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: -12px 0 28px;
}
.pkg-section-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(51, 43, 34, 0.7);
}
/* same treatment as .section-head: no cap below 600px, 90% above it. This one
   shares a flex row with the subfilter buttons, so it also needs min-width:0
   — without it a flex item won't shrink past its text's intrinsic width, and
   long descriptions would push the buttons out rather than wrap. */
@media (min-width: 601px) {
  .pkg-section-desc { max-width: 90%; min-width: 0; }
}
.pkg-subfilter { display: flex; gap: 8px; flex: none; }
.pkg-subfilter button {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--sand-deep);
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pkg-subfilter button:hover { border-color: var(--clay); }
.pkg-subfilter button.active { background: var(--clay); color: var(--cream); border-color: var(--clay); }

.pkg-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch; /* cards in a row share the row's height */
}

/* coloured 32px header band above each category, with a line motif */
.pkg-cat-head {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 32px;
  margin-bottom: 24px;
}
.pkg-cat-head .pch-line { width: 34px; height: 3px; border-radius: 999px; flex: none; }
.pkg-cat-head .pch-label {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.pkg-cat-head .pch-lines { flex: 1; height: 2px; border-radius: 999px; }
/* group — olive green */
.pkg-cat-head.cat-group .pch-line,
.pkg-cat-head.cat-group .pch-lines { background: var(--olive); }
.pkg-cat-head.cat-group .pch-label { color: var(--olive); }
/* private — clay */
.pkg-cat-head.cat-private .pch-line,
.pkg-cat-head.cat-private .pch-lines { background: var(--clay); }
.pkg-cat-head.cat-private .pch-label { color: var(--clay); }
/* specialist — brown */
.pkg-cat-head.cat-specialist .pch-line,
.pkg-cat-head.cat-specialist .pch-lines { background: var(--brown); }
.pkg-cat-head.cat-specialist .pch-label { color: var(--brown); }
.pkg-card {
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}
.pkg-card { position: relative; }
.pkg-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(79, 66, 52, 0.14); }
.pkg-card.pkg-hidden { display: none; }
.pkg-icon {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 24px;
  height: 24px;
  opacity: 0.7;
}
.pkg-icon svg { width: 100%; height: 100%; display: block; }
.pkg-card[data-cat="group"] .pkg-icon { color: var(--olive); }
.pkg-card[data-cat="private"] .pkg-icon { color: var(--clay); }
.pkg-card[data-cat="specialist"] .pkg-icon { color: var(--brown); }
.pkg-card.pkg-in { animation: pkgFade 0.5s var(--ease) both; }
@keyframes pkgFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* premium card: a soft light that travels around the border (Unlimited) */
@property --pkg-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.pkg-card--glow {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    conic-gradient(from var(--pkg-glow-angle),
      rgba(138, 155, 124, 0) 0deg,
      var(--sage) 55deg,
      var(--olive) 95deg,
      rgba(138, 155, 124, 0) 150deg,
      rgba(138, 155, 124, 0) 360deg) border-box;
  box-shadow: 0 0 24px rgba(138, 155, 124, 0.22);
  animation: pkgGlowSpin 5s linear infinite;
}
.pkg-card--glow:hover {
  box-shadow: 0 22px 46px rgba(79, 66, 52, 0.14), 0 0 26px rgba(138, 155, 124, 0.3);
}
@keyframes pkgGlowSpin { to { --pkg-glow-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .pkg-card--glow { animation: none; }
}

/* full-width card with a 2-column (info | price + button) layout.
   Desktop/tablet only — on mobile it falls back to the normal stacked card. */
@media (min-width: 601px) {
  .pkg-card--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr minmax(230px, 300px);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 48px;
    row-gap: 16px;
  }
  .pkg-card--wide .pkg-card-head {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    margin-bottom: 0;
    padding-right: 0;
  }
  .pkg-card--wide .pkg-from {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding-top: 34px;
    border-top: none;
  }
  .pkg-card--wide .btn { grid-column: 2; grid-row: 2; }
}
.pkg-card-head { margin-bottom: 8px; padding-right: 34px; }
.pkg-cat-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 560;
  color: var(--clay);
}
.pkg-card[data-cat="group"] .pkg-cat-tag { color: var(--olive); }
.pkg-card[data-cat="private"] .pkg-cat-tag { color: var(--clay); }
.pkg-card[data-cat="specialist"] .pkg-cat-tag { color: var(--brown); }
.pkg-card h3 { font-size: 1.22rem; margin: 8px 0 6px; }
.pkg-card .pkg-desc { font-size: 0.9rem; line-height: 1.45; color: rgba(51, 43, 34, 0.7); }

.pkg-from {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 22px;
  margin-top: auto; /* drop the divider + price to the bottom, above the button */
  padding-top: 20px;
  border-top: 1px solid var(--sand-deep);
}
.pkg-from .pf-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(51, 43, 34, 0.5);
}
.pkg-from .pf-price {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 480;
  color: var(--brown);
  line-height: 1.05;
}
.pf-price .cur, .pmr-price .cur { font-size: 0.68rem; opacity: 0.6; margin-right: 1px; }

/* plans modal */
.modal .pkg-cat-tag { margin-bottom: 8px; }
.pkg-modal-icon {
  position: absolute;
  top: 34px;
  right: 34px;
  width: 26px;
  height: 26px;
  opacity: 0.7;
  color: var(--olive);
}
.pkg-modal-icon svg { width: 100%; height: 100%; display: block; }
.pkg-modal-icon[data-cat="private"] { color: var(--clay); }
.pkg-modal-icon[data-cat="specialist"] { color: var(--brown); }
.modal:has(.pkg-modal-icon) .pkg-cat-tag,
.modal:has(.pkg-modal-icon) h3 { padding-right: 42px; }
.pkg-modal-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 22px;
  background: rgba(79, 66, 52, 0.06);
  border: 1px solid rgba(79, 66, 52, 0.16);
  border-radius: var(--r-sm);
}
.pkg-modal-info svg { width: 20px; height: 20px; flex: none; color: var(--brown); margin-top: 1px; }
.pkg-modal-info p { font-size: 0.85rem; line-height: 1.55; color: var(--brown); margin: 0; }
.pkg-modal-info a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.pkg-modal-rows { display: flex; flex-direction: column; margin: 6px 0 20px; }
.pkg-mrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(79, 66, 52, 0.12);
}
.pkg-mrow:last-child { border-bottom: 1px solid rgba(79, 66, 52, 0.12); }
.pkg-mrow .pmr-label { display: block; font-size: 0.96rem; color: var(--ink); }
.pkg-mrow .pmr-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  background: var(--clay);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pkg-mrow .pmr-sub { display: block; font-size: 0.76rem; color: rgba(51, 43, 34, 0.55); margin-top: 2px; }
.pkg-mrow .pmr-price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 480;
  color: var(--brown);
  white-space: nowrap;
}
.pkg-mrow .btn { white-space: nowrap; }
.pkg-modal-remark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--olive);
  margin: 0 0 12px;
}
.pkg-modal-remark svg { width: 17px; height: 17px; flex: none; }
.pkg-modal-note { font-size: 0.8rem; color: rgba(51, 43, 34, 0.55); line-height: 1.5; margin: 0; }

/* BASI: entry callout on the packages page */
.basi-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--cream);
  border: 1px solid rgba(138, 155, 124, 0.4);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
}
.basi-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(79, 66, 52, 0.12); border-color: var(--sage); }
.basi-cta > svg { width: 26px; height: 26px; flex: none; color: var(--sage); }
.basi-cta-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.basi-cta-body strong { font-weight: 560; }
.basi-cta-body span { font-size: 0.88rem; color: rgba(51, 43, 34, 0.66); }
.basi-cta-arrow { font-size: 1.3rem; color: var(--olive); flex: none; transition: transform 0.35s var(--ease); }
.basi-cta:hover .basi-cta-arrow { transform: translateX(5px); }

/* BASI: members-only notice at the top of the /basi page */
/* deliberately quiet — it's a booking caveat, not a headline. The hero above
   already sells the offer, so this sits back until you need it. */
.basi-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  padding: 12px 18px;
  background: rgba(138, 155, 124, 0.07);
  border: 1px solid rgba(138, 155, 124, 0.22);
  /* --r-md, not 999px: on one line it's ~half the height so it reads as a pill
     anyway, and it degrades cleanly when the line wraps at narrow widths */
  border-radius: var(--r-md);
}
.basi-notice > svg { width: 18px; height: 18px; flex: none; color: var(--olive); }
.basi-notice-body { flex: 1; min-width: 0; }
.basi-notice-body p { font-size: 0.86rem; line-height: 1.5; color: rgba(51, 43, 34, 0.68); margin: 0; }

/* fine print under the grid */
.pkg-fineprint {
  max-width: 760px;
  margin: 42px 0 0;
  text-align: left;
}
.pkg-fineprint p { font-size: 0.9rem; line-height: 1.6; color: rgba(51, 43, 34, 0.62); margin: 0 0 8px; }
.pkg-fineprint p:last-child { margin-bottom: 0; }
.pkg-fineprint strong { color: var(--brown); font-weight: 560; }
.pkg-fineprint a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- journal / blog ---------- */

.blog-state { text-align: center; color: rgba(51, 43, 34, 0.55); padding: 40px 0; font-size: 1.05rem; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 16px 36px rgba(79, 66, 52, 0.08);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(79, 66, 52, 0.15); }
.blog-card-cover { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand-deep); }
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.blog-card:hover .blog-card-cover img { transform: scale(1.04); }
.blog-card-cover--empty {
  background: linear-gradient(135deg, var(--sand) 0%, var(--clay-soft) 100%);
}
.blog-card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clay); margin-bottom: 12px; }
.blog-card-body h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 460; line-height: 1.2; margin-bottom: 10px; }
.blog-card-body p { font-size: 0.95rem; color: rgba(51, 43, 34, 0.72); line-height: 1.55; margin-bottom: 18px; }
.blog-card-more { margin-top: auto; font-size: 0.9rem; font-weight: 500; color: var(--olive); }
.blog-card:hover .blog-card-more { text-decoration: underline; text-underline-offset: 3px; }
.blog-card-cat {
  align-self: flex-start; margin-bottom: 12px; padding: 3px 11px;
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--olive); background: rgba(62, 74, 54, 0.1); border-radius: 999px;
}

/* category filter bar on the journal list */
.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.blog-filter-btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.85rem;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid rgba(79, 66, 52, 0.18); background: var(--cream); color: var(--brown);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.blog-filter-btn:hover { border-color: var(--olive); color: var(--olive); }
.blog-filter-btn.active { background: var(--moss); border-color: var(--moss); color: var(--cream); }

/* ---------- single post ---------- */

.post { padding: calc(var(--nav-h) + var(--promo-h, 0px) + 60px) 0 90px; }
.post-narrow { max-width: 760px; }
.post-back { display: inline-block; font-size: 0.9rem; color: var(--olive); text-decoration: none; margin-bottom: 28px; }
.post-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-meta { display: block; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clay); }
.post-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px;
}
.post-share { display: inline-flex; align-items: center; gap: 8px; }
.share-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 999px; border: 1px solid rgba(79, 66, 52, 0.16);
  background: var(--cream); color: var(--brown); cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.share-btn:hover { color: var(--olive); border-color: var(--olive); transform: translateY(-1px); }
.share-btn svg { width: 17px; height: 17px; display: block; }
.share-btn.copied { color: var(--olive); border-color: var(--olive); }
@media (max-width: 540px) {
  .post-head { gap: 12px; }
  .post-share { width: 100%; }
}
.post-title { font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 420; line-height: 1.08; margin: 14px 0 18px; }
.post-lead { font-size: 1.2rem; line-height: 1.6; color: rgba(51, 43, 34, 0.78); margin-bottom: 34px; }
.post-cover { border-radius: var(--r-md); overflow: hidden; margin-bottom: 38px; background: var(--sand-deep); aspect-ratio: 16 / 9; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-body { font-size: 1.08rem; line-height: 1.75; color: var(--ink); }
.post-body > * + * { margin-top: 1.1em; }
.post-body h1, .post-body h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 460; margin-top: 1.8em; }
.post-body h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 460; margin-top: 1.6em; }
.post-body a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 1.4em 0; }
.post-body blockquote {
  border-left: 3px solid var(--clay-soft);
  padding-left: 22px;
  font-style: italic;
  color: var(--brown);
}
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: 0.4em; }
.post-body code {
  background: var(--sand);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.92em;
}
.post-foot { margin-top: 50px; padding-top: 30px; border-top: 1px solid rgba(79, 66, 52, 0.12); }

/* prev / next entry navigation */
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 44px; padding-top: 30px;
  border-top: 1px solid rgba(79, 66, 52, 0.12);
}
.post-nav-link {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--cream); border: 1px solid rgba(79, 66, 52, 0.14);
  text-decoration: none; color: var(--ink);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.post-nav-link:hover { border-color: var(--olive); transform: translateY(-2px); }
.post-nav-link.next { text-align: right; }
.post-nav-dir { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clay); }
.post-nav-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 460; line-height: 1.25; }
.post-nav-link.disabled {
  opacity: 0.4; pointer-events: none; cursor: default;
  background: transparent;
}
@media (max-width: 540px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link.next { text-align: left; }
}

/* admin topbar logo tag + section tabs */
.admin-tag {
  display: inline-block; margin-left: 10px; padding: 2px 9px;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--olive); background: rgba(62, 74, 54, 0.1);
  border-radius: 999px; vertical-align: middle;
}
.admin-tabs {
  display: flex; gap: 6px; margin-bottom: 30px;
  border-bottom: 1px solid rgba(79, 66, 52, 0.12);
}
.admin-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--clay);
  padding: 10px 4px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.admin-tab + .admin-tab { margin-left: 18px; }
.admin-tab:hover { color: var(--brown); }
.admin-tab.active { color: var(--ink); border-bottom-color: var(--olive); }
.admin-settings-card {
  background: var(--cream); border: 1px solid rgba(79, 66, 52, 0.14);
  border-radius: var(--r-md); padding: 30px 26px;
  color: rgba(51, 43, 34, 0.7); font-size: 0.98rem; line-height: 1.6;
}

/* ---------- promo codes admin ---------- */
.promo-admin-intro {
  max-width: 660px; margin-bottom: 24px;
  color: rgba(51, 43, 34, 0.7); font-size: 0.95rem; line-height: 1.6;
}
.promo-admin-intro strong { color: var(--brown); font-weight: 560; }
.promo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.promo-load-warn { grid-column: 1 / -1; }
.promo-card {
  background: var(--cream); border: 1px solid rgba(79, 66, 52, 0.14);
  border-radius: var(--r-md); padding: 24px 22px;
  box-shadow: 0 10px 26px rgba(79, 66, 52, 0.06);
  display: grid; gap: 18px;
}
.promo-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promo-card-head h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 460; }

/* on/off switch */
.promo-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.promo-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.promo-switch-track {
  position: relative; flex: none; width: 44px; height: 24px; border-radius: 999px;
  background: var(--sand-deep); transition: background 0.25s var(--ease);
}
.promo-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--cream); box-shadow: 0 1px 3px rgba(79, 66, 52, 0.3);
  transition: transform 0.25s var(--ease);
}
.promo-switch input:checked + .promo-switch-track { background: var(--olive); }
.promo-switch input:checked + .promo-switch-track::after { transform: translateX(20px); }
.promo-switch input:focus-visible + .promo-switch-track { outline: 2px solid var(--olive); outline-offset: 2px; }
.promo-switch input:disabled + .promo-switch-track { opacity: 0.45; cursor: default; }
.promo-switch:has(input:disabled) { cursor: default; }
.promo-switch-label { font-size: 0.82rem; font-weight: 500; color: var(--brown); min-width: 18px; }

.promo-tz-note {
  font-weight: 400; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--olive);
  background: rgba(138, 155, 124, 0.16); padding: 3px 9px; border-radius: 999px; margin-left: 8px;
  white-space: nowrap;
}
.promo-section-label { font-size: 0.95rem; font-weight: 560; color: var(--brown); }
.promo-dates { gap: 6px; }
.promo-dates .hint { margin-bottom: 8px; }
.promo-dt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.promo-dt-col { display: grid; gap: 6px; }
.promo-sublabel { font-size: 0.78rem; font-weight: 500; color: var(--clay); }
.promo-dates .promo-dt-col select {
  font: inherit; font-size: 0.9rem; color: var(--ink);
  padding: 9px 34px 9px 11px; border: 1px solid rgba(79, 66, 52, 0.2);
  border-radius: var(--r-sm); background-color: var(--sand); width: 100%;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4234' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.promo-dates .promo-dt-col select:focus { outline: none; border-color: var(--olive); }

/* date trigger button — replaces the unstyleable native <input type=date>;
   opens the custom calendar modal instead of the OS picker */
.promo-date-btn {
  font: inherit; font-size: 0.9rem; color: var(--ink); text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border: 1px solid rgba(79, 66, 52, 0.2);
  border-radius: var(--r-sm); background: var(--sand); width: 100%;
  cursor: pointer; transition: border-color 0.2s;
}
.promo-date-btn:hover, .promo-date-btn:focus-visible { outline: none; border-color: var(--olive); }
.promo-date-btn svg { width: 17px; height: 17px; flex: none; color: var(--clay); }

/* shared calendar modal */
.calendar-dialog .modal-card { padding: 20px 22px 22px; width: min(320px, 92vw); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; }
.cal-nav {
  appearance: none; background: none; border: 1px solid rgba(79, 66, 52, 0.16); cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--brown); transition: background 0.2s, border-color 0.2s;
}
.cal-nav:hover { background: var(--sand); border-color: var(--olive); }
.cal-nav svg { width: 16px; height: 16px; }
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  margin-bottom: 4px; text-align: center;
  font-size: 0.72rem; font-weight: 600; color: var(--clay);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  aspect-ratio: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 0.86rem; color: var(--ink);
  transition: background 0.15s, color 0.15s;
}
.cal-day:not(.cal-day-blank):hover { background: rgba(138, 155, 124, 0.18); }
.cal-day-blank { cursor: default; }
.cal-day.is-today { font-weight: 600; color: var(--olive); }
.cal-day.is-selected { background: var(--olive); color: var(--cream); font-weight: 600; }
.cal-day.is-selected:hover { background: var(--olive); }
.promo-endtoggle {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 0.85rem; font-weight: 500; color: var(--brown); margin: 10px 0 2px;
}
.promo-endtoggle input { width: 17px; height: 17px; accent-color: var(--olive); cursor: pointer; }
.promo-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.promo-save-note { font-size: 0.8rem; color: rgba(51, 43, 34, 0.55); }

@media (max-width: 760px) {
  .promo-slots { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- admin CMS ---------- */

.admin-body { background: var(--sand); min-height: 100svh; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 30px; background: var(--cream);
  border-bottom: 1px solid rgba(79, 66, 52, 0.1);
  position: sticky; top: 0; z-index: 20;
}
.admin-topbar .nav-logo { font-size: 1.05rem; }
.admin-topbar-brand { display: flex; align-items: center; gap: 14px; }
.admin-topbar-logo { display: inline-block; width: 112px; }
.admin-topbar-logo img { width: 100%; height: auto; display: block; }
.admin-topbar-actions { display: flex; gap: 12px; align-items: center; }
.admin-wrap { max-width: 920px; margin: 0 auto; padding: 40px 30px 80px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.admin-head h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 440; }
.admin-back {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 0.9rem; color: var(--olive); padding: 0; margin-bottom: 18px;
}
.admin-back:hover { text-decoration: underline; text-underline-offset: 3px; }

.admin-login { display: grid; place-items: center; min-height: 100svh; padding: 30px; position: relative; overflow: hidden; }
.admin-login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px; background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg); padding: 40px 36px;
  box-shadow: 0 24px 60px rgba(79, 66, 52, 0.14);
}
.admin-login-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.admin-login-logo { display: inline-block; width: 128px; flex: none; }
.admin-login-logo img { width: 100%; height: auto; display: block; }
.admin-login-tag {
  flex: none;
  font-size: 0.7rem; font-weight: 540; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--olive); background: rgba(138, 155, 124, 0.18);
  padding: 7px 15px; border-radius: 999px; white-space: nowrap;
}
.admin-login-card .sub { color: rgba(51, 43, 34, 0.6); font-size: 0.92rem; margin-bottom: 26px; }

.admin-list { display: grid; gap: 12px; }
.admin-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--cream); border-radius: var(--r-md);
  padding: 18px 22px; box-shadow: 0 10px 26px rgba(79, 66, 52, 0.06);
}
.admin-row-main { flex: 1; min-width: 0; }
.admin-row-main h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 460; margin-bottom: 4px; }
.admin-row-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 0.82rem; color: rgba(51, 43, 34, 0.55);
}
.admin-row-sep { color: rgba(51, 43, 34, 0.3); }
.admin-row-actions { display: flex; gap: 8px; flex: none; }

/* compact icon-only buttons (journal row actions + editor delete) */
.btn-icon-sm { width: 40px; height: 40px; padding: 0; justify-content: center; }
.btn-icon-sm svg { width: 17px; height: 17px; }
.btn-icon-sm:hover svg { transform: none; }
.btn-danger:hover { color: #b8643f; border-color: rgba(184, 100, 63, 0.45); }
.status-pill {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; font-weight: 500;
}
.status-pill.published { background: rgba(138, 155, 124, 0.25); color: var(--olive); }
.status-pill.draft { background: rgba(169, 124, 91, 0.2); color: var(--clay); }

.admin-form { display: grid; gap: 22px; }
.admin-field { display: grid; gap: 8px; }
.admin-field label { font-size: 0.85rem; font-weight: 500; color: var(--brown); }
.admin-field input[type="text"],
.admin-field input[type="email"],
.admin-field input[type="password"],
.admin-field input[type="datetime-local"],
.admin-field textarea,
.admin-field select {
  width: 100%; padding: 12px 15px; font: inherit; font-size: 0.95rem;
  background: var(--cream); border: 1px solid rgba(79, 66, 52, 0.18);
  border-radius: var(--r-sm); color: var(--ink);
}
.admin-field textarea { resize: vertical; min-height: 80px; }
.admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus {
  outline: none; border-color: var(--olive);
}
.admin-field .hint { font-size: 0.8rem; color: rgba(51, 43, 34, 0.5); }

/* character counter sitting inside the field, bottom-right */
.field-control { position: relative; }
.field-control textarea { padding-bottom: 24px; resize: none; }
.field-control .char-count {
  position: absolute; right: 12px; bottom: 9px;
  font-size: 0.72rem; color: rgba(51, 43, 34, 0.42);
  background: var(--cream); padding: 1px 5px; border-radius: 5px;
  pointer-events: none; font-variant-numeric: tabular-nums;
}

/* styled category combobox */
.combo { position: relative; }
.combo > input { padding-right: 42px; }
.combo-caret {
  position: absolute; top: 0; right: 0; height: 100%; width: 42px;
  display: grid; place-items: center; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--brown);
}
.combo-caret svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.combo > input[aria-expanded="true"] + .combo-caret svg { transform: rotate(180deg); }
.combo-list {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--cream); border: 1px solid rgba(79, 66, 52, 0.18);
  border-radius: var(--r-sm); box-shadow: 0 16px 36px rgba(79, 66, 52, 0.16);
  max-height: 240px; overflow-y: auto;
}
.combo-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  font-size: 0.92rem; color: var(--ink);
}
.combo-option:hover { background: var(--sand); }
.combo-option.is-selected { background: rgba(62, 74, 54, 0.12); color: var(--olive); font-weight: 500; }
.combo-count { font-size: 0.8rem; color: rgba(51, 43, 34, 0.4); font-variant-numeric: tabular-nums; }
.combo-option.is-selected .combo-count { color: rgba(62, 74, 54, 0.55); }
.combo-empty { padding: 9px 12px; font-size: 0.88rem; color: rgba(51, 43, 34, 0.5); }
.combo-sep { height: 1px; margin: 0 -6px; background: rgba(79, 66, 52, 0.14); }
.combo-add {
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  font-size: 0.9rem; color: var(--olive); font-weight: 500;
}
.combo-add:hover { background: rgba(62, 74, 54, 0.1); }

/* kebab menu next to the editor heading */
.entry-menu-wrap { position: relative; }
.entry-menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
  min-width: 210px; padding: 6px; list-style: none;
  background: var(--cream); border: 1px solid rgba(79, 66, 52, 0.16);
  border-radius: var(--r-sm); box-shadow: 0 16px 36px rgba(79, 66, 52, 0.16);
}
.entry-menu-item {
  display: block; width: 100%; text-align: left; appearance: none; border: 0;
  background: none; font: inherit; font-size: 0.92rem; color: var(--ink);
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
}
.entry-menu-item:hover { background: var(--sand); }

/* small admin modal dialog (centered, slides down on open) */
.modal-dialog {
  border: 0; padding: 0; background: transparent;
  max-width: 92vw; width: 440px;
  margin: auto; /* centre within the showModal viewport */
}
.modal-dialog[open] { animation: modal-drop 0.28s var(--ease); }
.modal-dialog::backdrop { background: rgba(33, 28, 22, 0.45); animation: modal-fade 0.28s ease; }
@keyframes modal-drop {
  from { opacity: 0; transform: translateY(-26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--cream); border-radius: var(--r-md); padding: 26px 26px 22px;
  box-shadow: 0 30px 70px rgba(33, 28, 22, 0.3);
}
.modal-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 460; margin-bottom: 18px; }
.modal-text { font-size: 0.95rem; line-height: 1.55; color: rgba(51, 43, 34, 0.75); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.modal-actions-spread { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.modal-actions-right { display: flex; gap: 10px; }
#unsaved-dialog { width: min(520px, 92vw); }
#crop-dialog { width: min(680px, 94vw); }
.crop-stage {
  margin-top: 14px; max-height: 56vh; overflow: hidden;
  background: rgba(33, 28, 22, 0.06); border-radius: var(--r-sm);
}
.crop-stage img { display: block; max-width: 100%; }

/* media library */
#library-dialog { width: min(960px, 95vw); }
.lib-modal { display: flex; flex-direction: column; max-height: 88vh; }
.lib-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lib-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid rgba(51, 43, 34, 0.12);
}
.lib-search {
  flex: 1 1 180px; min-width: 140px; padding: 9px 13px;
  border: 1px solid rgba(51, 43, 34, 0.2); border-radius: var(--r-sm);
  background: #fff; font: inherit; font-size: 0.9rem;
}
.lib-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: rgba(51, 43, 34, 0.8); white-space: nowrap; }
.lib-storage { font-size: 0.84rem; color: rgba(51, 43, 34, 0.6); white-space: nowrap; }
.lib-spacer { flex: 1; }
.lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px; overflow-y: auto; padding: 2px;
}
.lib-card {
  position: relative; margin: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(51, 43, 34, 0.12);
  border-radius: var(--r-sm); overflow: hidden;
}
.lib-pick {
  position: relative; display: block; border: 0; padding: 0; cursor: pointer;
  background: rgba(33, 28, 22, 0.05); aspect-ratio: 4 / 3; width: 100%;
}
.lib-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-pick:hover { outline: 2px solid var(--clay); outline-offset: -2px; }
.lib-badge {
  position: absolute; top: 6px; left: 6px; font-size: 0.66rem; letter-spacing: 0.03em;
  padding: 2px 7px; border-radius: 999px; background: rgba(33, 28, 22, 0.62); color: #fff;
}
.lib-card figcaption { padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-name { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-meta { font-size: 0.72rem; color: rgba(51, 43, 34, 0.55); }
.lib-del {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(33, 28, 22, 0.62); color: #fff; opacity: 0; transition: opacity 0.15s ease;
}
.lib-card:hover .lib-del, .lib-del:focus-visible { opacity: 1; }
.lib-del svg { width: 15px; height: 15px; }
.lib-empty { text-align: center; color: rgba(51, 43, 34, 0.55); padding: 40px 0; }
.img-usage-list { margin: 12px 0 0; padding-left: 20px; font-size: 0.9rem; line-height: 1.7; }
.cover-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.admin-cover-preview { margin-top: 10px; }
.admin-cover-preview img { max-width: 280px; width: 100%; border-radius: var(--r-sm); display: block; }
.admin-form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.admin-form-actions .spacer { flex: 1; }

/* EasyMDE editor tuned to the studio palette. Toolbar and editor share one
   continuous border: the toolbar rounds the top, the editor rounds the bottom,
   and the toolbar's bottom edge is the divider between them (so the editor has
   no top border — otherwise the corners don't meet and the box looks cut off). */
.EasyMDEContainer .editor-toolbar {
  border: 1px solid rgba(79, 66, 52, 0.18);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.EasyMDEContainer .CodeMirror {
  border: 1px solid rgba(79, 66, 52, 0.18);
  border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--cream); color: var(--ink); font-family: var(--font-body);
}
.editor-preview, .editor-preview-side { background: var(--sand); }

@media (max-width: 640px) {
  .admin-row-2 { grid-template-columns: 1fr; }
  .admin-wrap { padding: 28px 18px 60px; }
}

/* ---------- auth & forms ---------- */

.auth-wrap {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.auth-visual {
  position: relative;
  background: linear-gradient(170deg, #d9c6ad 0%, var(--clay-soft) 40%, var(--olive) 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 56px;
}
.auth-visual .av-quote {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--cream);
  line-height: 1.3;
  max-width: 420px;
}
.auth-visual .av-quote span { display: block; font-family: var(--font-body); font-size: 0.9rem; margin-top: 16px; opacity: 0.8; }
.auth-visual svg.av-art { position: absolute; inset: 0; width: 100%; height: 100%; }

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(90px, 12vh, 130px) clamp(24px, 5vw, 80px) 60px;
}
.auth-card { width: min(440px, 100%); }
.auth-card h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); margin-bottom: 10px; }
.auth-card .lead { margin-bottom: 36px; font-size: 1rem; }
.auth-card form { display: grid; gap: 18px; }

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 540;
  color: var(--brown);
  margin-bottom: 8px;
}
.field input, .field select {
  width: 100%;
  padding: 15px 20px;
  border-radius: 999px;
  border: 1px solid rgba(79, 66, 52, 0.18);
  background: var(--white-40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.field input::placeholder { color: rgba(51, 43, 34, 0.4); }
.field input:focus, .field select:focus {
  border-color: var(--olive);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(138, 155, 124, 0.18);
}
.field .err { color: #a4502f; font-size: 0.8rem; margin-top: 6px; display: none; }
.field.invalid input { border-color: #b8643f; }
.field.invalid .err { display: block; }

.auth-alt { text-align: center; margin-top: 26px; font-size: 0.92rem; color: rgba(51, 43, 34, 0.65); }
.auth-alt a { color: var(--olive); font-weight: 540; text-decoration: underline; text-underline-offset: 3px; }
.auth-back {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 5;
}

/* ---------- account ---------- */

.account-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.55fr;
  gap: 28px;
  align-items: start;
}
.panel {
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  padding: 32px;
}
.panel h3 { font-size: 1.3rem; margin-bottom: 20px; }

.credit-hero {
  background: var(--moss);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: 34px 32px;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.credit-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(247, 243, 234, 0.2);
  right: -70px;
  bottom: -90px;
}
.credit-hero .ch-label { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); font-weight: 540; }
.credit-hero .ch-value {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1.1;
  margin: 8px 0 2px;
}
.credit-hero .ch-sub { font-size: 0.9rem; color: rgba(247, 243, 234, 0.65); }
.credit-hero .btn { margin-top: 22px; }

.booking-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(79, 66, 52, 0.1);
}
.booking-row:last-child { border-bottom: none; }
.booking-row .br-date {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  background: rgba(138, 155, 124, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.booking-row .br-date .d { font-family: var(--font-display); font-size: 1.4rem; color: var(--moss); line-height: 1; }
.booking-row .br-date .m { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive); font-weight: 560; }
.booking-row .br-info { flex: 1; min-width: 0; }
.booking-row .br-info strong { display: block; color: var(--brown); font-weight: 540; }
.booking-row .br-info span { font-size: 0.84rem; color: rgba(51, 43, 34, 0.6); }
.booking-row .br-cancel {
  flex: none;
  background: transparent;
  border: 1px solid rgba(79, 66, 52, 0.18);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.82rem;
  color: rgba(51, 43, 34, 0.7);
  transition: all 0.3s;
}
.booking-row .br-cancel:hover { border-color: #b8643f; color: #a4502f; }

.empty-state {
  text-align: center;
  padding: 44px 20px;
  color: rgba(51, 43, 34, 0.55);
}
.empty-state .btn { margin-top: 18px; }

/* ---------- modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(51, 43, 34, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  width: min(600px, 100%);
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 38px 36px;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.4s var(--ease);
  max-height: 86svh;
  overflow-y: auto;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal h3 { font-size: 1.55rem; margin-bottom: 6px; }
.modal .m-sub { color: rgba(51, 43, 34, 0.65); font-size: 0.95rem; margin-bottom: 24px; }
.modal .m-rows { display: grid; gap: 0; margin-bottom: 26px; }
.modal .m-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(79, 66, 52, 0.1);
  font-size: 0.94rem;
}
.modal .m-row span { color: rgba(51, 43, 34, 0.6); }
.modal .m-row strong { font-weight: 540; color: var(--brown); text-align: right; }
.modal .m-actions { display: flex; gap: 12px; }
.modal .m-actions .btn { flex: 1; }

/* ---------- toast ---------- */

.toast-zone {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1800;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100% - 40px));
}
.toast {
  display: flex;
  align-items: center;
  gap: 13px;
  background: rgba(46, 56, 40, 0.92);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 15px 24px;
  font-size: 0.92rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
  animation: toastIn 0.45s var(--ease);
}
.toast.warn { background: rgba(140, 84, 50, 0.94); }
.toast svg { width: 18px; height: 18px; flex: none; stroke: var(--sage); }
.toast.warn svg { stroke: #ecd1bb; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast.out { animation: toastOut 0.4s var(--ease) forwards; }
@keyframes toastOut {
  to { opacity: 0; transform: translateY(12px); }
}

/* ---------- classes page detail rows ---------- */

.cat-block { padding-top: clamp(40px, 6vw, 84px); scroll-margin-top: 90px; }
.cat-block:first-child { padding-top: 0; }
/* same treatment as .section-head: no cap below 600px (the old 640px ceiling
   was already a no-op there), 90% of the container above it */
.cat-head { margin-bottom: 32px; }
@media (min-width: 601px) {
  .cat-head { max-width: 90%; }
}
.cat-head h2 { margin: 14px 0 16px; }
.cat-head .lead { font-size: 1.05rem; }

.class-detail {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
  padding: clamp(40px, 6vw, 70px) 0;
  border-top: 1px solid rgba(79, 66, 52, 0.12);
}
.class-detail:first-of-type { border-top: none; }
.class-detail:nth-child(even) .cd-visual { order: 2; }
.cd-visual {
  border-radius: var(--r-arch);
  aspect-ratio: 4 / 4.4;
  position: relative;
  overflow: hidden;
}
.cd-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cd-body .cc-tags { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cd-body h2 { margin-bottom: 16px; }
.cd-body .lead { margin-bottom: 22px; font-size: 1.05rem; }
.cd-facts { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.cd-facts .fact strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--brown); font-weight: 480; }
.cd-facts .fact span { font-size: 0.8rem; color: rgba(51, 43, 34, 0.55); }

/* ---------- guided breathing ---------- */

:root { --breath: 0; }

.breathe-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sage);
  flex: none;
  animation: breatheDot 10s ease-in-out infinite;
}
@keyframes breatheDot {
  0%, 100% { transform: scale(0.7); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
}

/* page-wide wireframe rings, centered on the hero arch */
.rings-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
}

/* breathing cues, projected over the arch window */
.arch-cue {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s;
}
.arch-cue.show { opacity: 1; }
.arch-cue .ac-cue {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--cream);
  text-shadow: 0 2px 28px rgba(46, 56, 40, 0.45);
  line-height: 1.25;
}
.arch-cue .ac-count {
  margin-top: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, 0.8);
  text-shadow: 0 1px 16px rgba(46, 56, 40, 0.45);
  max-width: 300px;
  line-height: 1.7;
}

/* the page itself breathes while a session runs */
body.breathing .nav,
body.breathing .hero-float-card {
  box-shadow: 0 12px 40px rgba(79, 66, 52, calc(0.12 + var(--breath) * 0.22));
}
body.breathing .hero-arch {
  box-shadow: 0 40px 80px rgba(79, 66, 52, 0.22),
    0 0 calc(30px + var(--breath) * 70px) rgba(201, 163, 132, calc(var(--breath) * 0.55));
}

/* ---------- reveal helpers ---------- */

[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
[data-split] .wi { display: inline-block; transform: translateY(118%); }
#hero-word { display: inline-block; }

/* Animated elements start hidden ONLY when JS has flagged itself as present
   (the inline classList.add("js") snippet server.js injects into every page's
   <head>, applied before first paint — see JS_FLAG_SNIPPET). This kills the
   flash where content painted visible, snapped to hidden once main.js arrived,
   then re-animated in. If GSAP never loads, initMotion() removes the class
   again and everything shows statically. */
.js [data-reveal] { opacity: 0; }
.js [data-hero-fade] { opacity: 0; }
.js [data-split] { visibility: hidden; } /* main.js restores it after word-wrapping */
.reveal-done[data-reveal] { opacity: 1; }

/* JS-rendered grids ship as empty containers, so before main.js fills them
   the static content below (fineprint, closing CTA) sat right under the hero
   for a flash, then got shoved down thousands of pixels. Reserve a viewport
   of space while a grid is still empty — :empty stops matching the moment JS
   renders into it, so the placeholder height vanishes with no cleanup code.
   Gated on .js so a no-JS visitor isn't left staring at a giant void. */
.js #class-details:empty,
.js #pkg-grid:empty,
.js #basi-grid:empty { min-height: 100vh; }

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .classes-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pkg-cards { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .calendar {
    grid-template-columns: repeat(7, minmax(225px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
  }
  .cal-day { scroll-snap-align: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-burger { display: flex; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .fm-1, .fm-3, .fm-5 { left: -6px; }
  .fm-2, .fm-4 { right: -6px; }

  .hero-copy { text-align: center; }
  .hero-copy .lead { margin-inline: auto; }
  .hero-ctas { justify-content: center; }

  .philo-grid { grid-template-columns: 1fr; }
  /* narrow screens: give the focused slide more of the width, and drop the
     scale-back so the neighbours don't shrink to slivers */
  .studio-slider { --ss-w: 82vw; }
  .ss-slide { transform: none; }
  .studio-features { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .dark-band .band-inner { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: 1fr; }

  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { display: none; }

  .class-detail { grid-template-columns: 1fr; }
  .class-detail:nth-child(even) .cd-visual { order: 0; }
  .cd-visual { max-width: 420px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .classes-grid, .steps-grid, .pricing-grid, .pkg-cards, .testi-grid { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: 1fr; }
  .pkg-mrow { grid-template-columns: 1fr auto; row-gap: 12px; }
  .pkg-section-lead { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* wraps to several lines here, so top-align the icon with the first one */
  .basi-notice { align-items: flex-start; padding: 14px 16px; }
  .basi-notice > svg { margin-top: 2px; }
  .pkg-mrow .btn { grid-column: 1 / -1; }
  .hero { padding-top: calc(var(--nav-h) + var(--promo-h, 0px) + 40px); }
  .hero-stats { flex-wrap: wrap; gap: 22px 32px; }
  .hero-ctas .btn { flex: 1; justify-content: center; }
  .hero-copy { text-align: left; }
  .hero-copy .lead { margin-inline: 0; }
  .hero-ctas { justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .modal { padding: 30px 24px; }
  .week-label { min-width: 0; font-size: 1.05rem; }
  .sched-bar { justify-content: center; }
  .booking-row { flex-wrap: wrap; }
  .booking-row .br-cancel { margin-left: 82px; }
}

/* Rezerv widget iframe heights (classes2.html demo).
   Rezerv's own class-card grid breaks to 2 columns at 960px and 1 column at
   640px (read from their CSS) — these match those breakpoints so the fixed
   iframe height grows in step with however many rows their stacked cards
   need. The widget is cross-origin, so its real content height can't be
   measured from here; these are estimated from a manual measurement at
   mobile width and should be spot-checked once a live (non-transitional)
   business is wired in. */
#rezerv-flow, #rezerv-womens { height: 690px; }
#rezerv-themed { height: 1250px; }

/* classes3: tighten the gap below the hero (its own padding-bottom), so the
   single full-width widget sits closer to the heading. Scoped to this page. */
body[data-page="classes3"] .page-hero { padding-bottom: 0; }

/* classes3: one widget showing ALL 10 classes + the tab bar. Heights step up
   as Rezerv's grid reflows: 3 cols (4 rows) on desktop, 2 cols (5 rows) at
   ≤960px, 1 col (10 rows) at ≤640px. Estimated — spot-check on a live account. */
#rezerv-all { height: 2700px; }

/* classes2 stacks each category as its own full section, so the inter-block
   padding is handled by section spacing — zero out .cat-block's own top
   padding here (scoped to this page only; classes.html keeps the clamp). */
body[data-page="classes2"] .cat-block { padding-top: 0; }

@media (max-width: 960px) {
  #rezerv-flow, #rezerv-womens { height: 1500px; }
  #rezerv-themed { height: 1900px; }
  #rezerv-all { height: 3400px; }
}

@media (max-width: 640px) {
  #rezerv-flow, #rezerv-womens { height: 2700px; }
  #rezerv-themed { height: 3500px; }
  #rezerv-all { height: 8800px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-hero-fade] { opacity: 1 !important; transform: none !important; }
  [data-split] { visibility: visible !important; }
  [data-split] .wi { transform: none !important; }
}