/* =========================================================
   Sunshine Fitness — סאנשיין פיטנס · v3 "Golden hour, layered"
   Mobile-first · breakpoints 40em / 60em / 75em · RTL with logical properties
   ========================================================= */

@property --p {            /* scroll progress of an element through the viewport, 0 → 1 */
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

:root {
  --paper: #FFF8EF;
  --peach: #FCE8D2;
  --sand: #FBDDBA;
  --apricot: #F8CD9C;
  --sun: #FEAA00;
  --rose: #E8967A;
  --maroon: #6A1A14;
  --maroon-2: #8C2C20;
  --plum: #341217;
  --plum-2: #4A1A20;
  --plum-deep: #380E13;          /* the ground in the sunset art */
  --ink: #2E1A16;
  --ink-2: #6B4A40;
  --line: #EFD9C0;
  --white: #FFFFFF;
  --bubble: #FFF1DE;

  --f-display: "Suez One", "Frank Ruhl Libre", Georgia, serif;
  --f-body: "Fredoka", "Rubik", "Arial Hebrew", Arial, sans-serif;
  --f-hand: "Gveret Levin", "Fredoka", cursive;

  --gutter: 1.25rem;
  --content: 72rem;
  --radius-s: 1rem;
  --radius: 1.75rem;
  --radius-l: 2.25rem;
  --radius-xl: 2.75rem;
  --pill: 999px;
  --shadow: 0 18px 40px -18px rgb(52 18 23 / 0.28);
  --shadow-soft: 0 10px 30px -14px rgb(52 18 23 / 0.22);
  --shadow-lift: 0 40px 80px -30px rgb(20 4 6 / 0.55);
  --header-space: 5rem;
  --fab-space: 5.5rem;
  --overlap: 2.5rem;

  /* paper grain — a tiny SVG noise tile, rendered once */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .12 0 0 0 0 .08 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-space) + 0.75rem);
  scroll-padding-block-end: var(--fab-space);
}
body {
  background: var(--plum);       /* only behind the hero while it loads */
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.125rem;
  line-height: 1.7;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-inline-size: 100%; }
img {
  block-size: auto;
  -webkit-user-drag: none;        /* images can't be dragged off the page */
  user-select: none;
  -webkit-touch-callout: none;
}
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
address { font-style: normal; }
table { border-collapse: collapse; }
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

/* ---------- Type ---------- */
h1, h2 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--maroon);
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.55rem + 4.3vw, 4.75rem); line-height: 1.06; }
h2 { font-size: clamp(2.125rem, 1.45rem + 2.9vw, 3.75rem); line-height: 1.08; }
h3 { font-family: var(--f-body); font-weight: 600; font-size: 1.3125rem; line-height: 1.35; color: var(--maroon); }
p { max-inline-size: 60ch; text-wrap: pretty; }
strong { font-weight: 600; }
.nowrap { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.visually-hidden {
  position: absolute !important; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lead { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.6; }
.note, .handnote { font-family: var(--f-hand); font-size: 1.625rem; line-height: 1.3; color: var(--maroon-2); }
.note--light { color: var(--apricot); }
.text-link, main p a, address a {
  color: var(--maroon);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.24em;
}
.text-link:hover, main p a:hover { color: var(--maroon-2); text-decoration-thickness: 2.5px; }
.on-dark .text-link, .on-dark p a, .on-dark address a { color: var(--white); }
.on-light .text-link, .on-light p a { color: var(--maroon); }
.text-button {
  background: none; border: 0; padding: 0; min-block-size: 2.75rem;
  color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 0.24em;
}

/* ---------- Focus ---------- */
:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--sun); }
.on-light :focus-visible { outline-color: var(--maroon); }
.sheet:focus, main:focus { outline: none; }

/* ---------- Layout ---------- */
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: 5rem; position: relative; }
.section-head { margin-block-end: 2rem; }
.section-head h2 { max-inline-size: 20ch; }
.section-lead { margin-block-start: 0.75rem; color: var(--ink-2); font-size: 1.1875rem; }

/* Grids may shrink below min-content so long words wrap at large text sizes */
.intro__grid, .foryou__grid, .programs__cards, .program, .program__body, .stack, .stack__card, .about__grid,
.booking__grid, .booking-form, .field, .faq__grid, .findus__grid, .studio__grid, .site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Tones, layered sheets and textures ---------- */
.tone {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--tone-bg, var(--paper));
  background-image: var(--grain);
}
.tone--paper { --tone-bg: var(--paper); --ring: rgb(140 44 32 / 0.055); --glow: rgb(254 170 0 / 0.14); }
.tone--peach { --tone-bg: var(--peach); --ring: rgb(140 44 32 / 0.065); --glow: rgb(255 255 255 / 0.55); }
.tone--sand  { --tone-bg: var(--sand);  --ring: rgb(140 44 32 / 0.075); --glow: rgb(255 248 239 / 0.6); }
.tone--plum  { --tone-bg: var(--plum);  --ring: rgb(254 170 0 / 0.08);  --glow: rgb(254 170 0 / 0.22); background-image: var(--grain-light); color: var(--white); }

/* each section slides over the one before it, like sheets of paper */
.layer {
  margin-block-start: calc(-1 * var(--overlap));
  padding-block-start: calc(5rem + 0.5rem);
  border-start-start-radius: var(--radius-xl);
  border-start-end-radius: var(--radius-xl);
  box-shadow: 0 -26px 50px -34px rgb(52 18 23 / 0.5);
}

/* sun rings: concentric lines around an off-screen sun, drifting with the scroll */
.textured::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -12% -12%;
  inset-inline: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at var(--ring-x, 92%) var(--ring-y, 18%), transparent 0 46px, var(--ring) 46px 47.5px);
  -webkit-mask-image: radial-gradient(circle at var(--ring-x, 92%) var(--ring-y, 18%), #000 0, #000 28%, transparent 62%);
  mask-image: radial-gradient(circle at var(--ring-x, 92%) var(--ring-y, 18%), #000 0, #000 28%, transparent 62%);
}
/* a soft patch of sunlight that slides the other way */
.textured::after {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: 70vmax;
  aspect-ratio: 1;
  inset-block-start: 20%;
  inset-inline-end: -30vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.programs { --ring-x: 6%; --ring-y: 8%; }
.about    { --ring-x: 90%; --ring-y: 85%; }
.studio   { --ring-x: 8%; --ring-y: 70%; }
.booking  { --ring-x: 95%; --ring-y: 10%; }
.findus   { --ring-x: 12%; --ring-y: 25%; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-block-size: 3.25rem;
  max-inline-size: 100%;
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--pill);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out), translate 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.btn .icon { inline-size: 1.375rem; block-size: 1.375rem; flex: none; }
.btn--lg { min-block-size: 3.5rem; padding-inline: 2rem; font-size: 1.125rem; }
.btn--sm { min-block-size: 2.75rem; padding: 0.5rem 1.125rem; font-size: 1rem; }
.btn--block { inline-size: 100%; }
.btn--primary { background: var(--maroon); color: var(--white); box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--maroon-2); }
.btn--sun { background: var(--sun); color: var(--ink); }
.btn--sun:hover { background: var(--apricot); }
.btn--outline { border-color: var(--maroon); color: var(--maroon); background: transparent; }
.btn--outline:hover { background: var(--maroon); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.icon { inline-size: 1.5rem; block-size: 1.5rem; }
.icon--flip { transform: scaleX(-1); }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 1.5px solid currentColor;
  border-radius: var(--pill);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms, color 200ms;
}
.pill-link .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.pill-link:hover { background: var(--white); color: var(--plum); }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }

/* ---------- Skip links ---------- */
.skip-links { position: absolute; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 100; }
.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: max-content;
  max-inline-size: calc(100vw - 1.5rem);
  padding: 0.75rem 1.25rem;
  background: var(--maroon);
  color: var(--white);
  border: 0;
  border-radius: var(--pill);
  font-weight: 600;
  text-decoration: none;
  translate: 0 -250%;
}
.skip-link:focus-visible, .skip-link:focus { translate: 0 0; outline-color: var(--sun); }

/* ---------- Capsule header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 50;
  padding: 0.625rem var(--gutter) 0;
  pointer-events: none;
  transition: transform 450ms var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-130%); }
.capsule {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-inline-size: var(--content);
  min-block-size: 3.75rem;
  margin-inline: auto;
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  background: var(--paper);
  border-radius: var(--pill);
  box-shadow: 0 10px 30px -12px rgb(52 18 23 / 0.35);
}
.brand { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.25rem; }
.brand img { block-size: 2.75rem; inline-size: auto; }
.header-cta { margin-inline-start: auto; transition: opacity 250ms; }
.menu-open .header-cta { opacity: 0; visibility: hidden; }
.capsule__progress {
  position: absolute;
  inset-inline: 1.5rem;
  inset-block-end: 0;
  block-size: 3px;
  border-radius: 3px;
  background: var(--sun);
  transform-origin: 100% 50%;
  transform: scaleX(var(--scroll, 0));
}
.nav-toggle {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 2px solid var(--maroon);
  border-radius: 50%;
  background: transparent;
  color: var(--maroon);
  transition: background-color 250ms, color 250ms;
}
.nav-toggle[aria-expanded="true"] { background: var(--maroon); color: var(--white); }
.nav-toggle__bars { display: grid; gap: 4px; inline-size: 1.125rem; }
.nav-toggle__bars span { block-size: 2px; border-radius: 2px; background: currentColor; transition: transform 350ms var(--ease-out), opacity 250ms; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* desktop links live inside the capsule */
.site-nav { display: none; }
.site-nav__list a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--pill);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms, color 200ms;
}
.site-nav__list a:hover { background: var(--peach); color: var(--maroon); }

/* ---------- Mobile menu: full-screen panel that opens out of the menu button ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--plum);
  background-image: var(--grain-light), radial-gradient(circle at 50% 115%, rgb(254 170 0 / 0.45) 0, rgb(254 170 0 / 0.12) 35%, transparent 60%);
  color: var(--white);
  visibility: hidden;
  clip-path: circle(0 at var(--ox, 2.5rem) var(--oy, 2.5rem));
  transition: clip-path 600ms var(--ease-in-out), visibility 0s linear 600ms;
}
.menu.is-open {
  visibility: visible;
  clip-path: circle(150vmax at var(--ox, 2.5rem) var(--oy, 2.5rem));
  transition: clip-path 750ms var(--ease-out), visibility 0s;
}
.menu__inner {
  min-block-size: 100%;
  display: grid;
  align-content: start;
  gap: 2rem;
  padding: 6.25rem var(--gutter) 2.5rem;
  max-inline-size: 36rem;
  margin-inline: auto;
}
.menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 3.25rem;
  padding-block: 0.375rem;
  border-block-end: 1px solid rgb(255 255 255 / 0.14);
  font-family: var(--f-display);
  font-size: clamp(1.875rem, 1.4rem + 2.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--white);
  text-decoration: none;
}
.menu__list a::after {
  content: "";
  flex: none;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 50%;
  background: var(--sun);
  scale: 0.6;
  transition: scale 300ms var(--spring);
}
.menu__list a:hover::after, .menu__list a:focus-visible::after { scale: 1.4; }
.menu__cta { display: grid; gap: 1rem; }
.menu__quick { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.menu__meta { display: grid; gap: 0.5rem; justify-items: start; color: var(--peach); font-size: 1rem; }
.menu.is-open .menu__list li, .menu.is-open .menu__cta, .menu.is-open .menu__meta {
  animation: menu-item-in 650ms var(--ease-out) both;
  animation-delay: calc(180ms + var(--i, 0) * 55ms);
}
@keyframes menu-item-in { from { opacity: 0; translate: 0 1.25rem; } }
html.menu-open, html.menu-open body { overflow: hidden; }
.no-js .menu { display: none; }

/* Without JS on a phone: links shown as a simple row */
.no-js .nav-toggle { display: none; }
.no-js .site-header { position: absolute; }
.no-js .capsule { flex-wrap: wrap; border-radius: var(--radius); }
.no-js .site-nav { display: block; order: 3; inline-size: 100%; }
.no-js .site-nav__list { display: flex; flex-wrap: wrap; column-gap: 0.25rem; }

/* ---------- Hero: the image ---------- */
.hero {
  position: relative;
  block-size: 100vh;
  block-size: 100svh;
  min-block-size: 30rem;
  overflow: hidden;
  background: var(--plum);
}
.hero__media { position: absolute; inset: 0; }
.hero__media picture, .hero__img { inline-size: 100%; block-size: 100%; }
.hero__img { object-fit: cover; object-position: 50% 50%; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--plum);
  opacity: var(--hero-dim, 0);
  pointer-events: none;
}
.hero__cue {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-end: 3.75rem;
  margin-inline: auto;
  inline-size: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 3rem;
  padding: 0.5rem 1.25rem 0.5rem 1rem;
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--maroon);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.hero__cue svg { inline-size: 1.375rem; block-size: 1.375rem; }

/* ---------- The sheet that rises over the hero ---------- */
.sheet {
  position: relative;
  z-index: 1;
  margin-block-start: -2.25rem;
  overflow-x: clip;
  border-start-start-radius: var(--radius-l);
  border-start-end-radius: var(--radius-l);
  box-shadow: 0 -24px 48px -20px rgb(52 18 23 / 0.45);
}
.sheet > .tone:first-child { border-start-start-radius: var(--radius-l); border-start-end-radius: var(--radius-l); }
.sheet > .tone:first-child > .intro::before {      /* the little "drawer" handle */
  content: "";
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 3rem;
  block-size: 5px;
  border-radius: 5px;
  background: var(--line);
}

/* ---------- Illustrations ---------- */
.ill { position: relative; display: grid; place-items: center; isolation: isolate; }
.ill__sun {
  position: absolute;
  z-index: -1;
  inline-size: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #FFD98A 0%, var(--sun) 55%, #F79A1E 100%);
  box-shadow: 0 0 0 1.25rem rgb(254 170 0 / 0.12), 0 0 0 2.75rem rgb(254 170 0 / 0.06);
}
.ill__img { position: relative; inline-size: 100%; block-size: auto; transform-origin: 50% 100%; }

/* ---------- Intro ---------- */
.intro { position: relative; padding-block: 4rem 3rem; }
.intro__grid { gap: 3rem; align-items: center; }
.intro__text .note { margin-block-end: 0.75rem; }
.intro h1 { margin-block-end: 1.5rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-block-start: 2rem; }
.cta-row .text-link { display: inline-block; min-block-size: 2.75rem; padding-block: 0.5rem; }
.rating-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-block-start: 1.5rem;
  min-block-size: 2.75rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--pill);
  background: var(--peach);
  color: var(--ink);
  font-size: 0.9375rem;
  text-decoration: none;
}
.rating-chip:hover { background: var(--apricot); }
.stars { display: inline-flex; gap: 2px; }
.stars svg { inline-size: 1.125rem; block-size: 1.125rem; fill: var(--sun); stroke: var(--maroon); stroke-width: 1.3; stroke-linejoin: round; }
.ill--intro { inline-size: min(100%, 22rem); justify-self: center; }
.ill--intro .ill__img { inline-size: 74%; }

/* ---------- For you ---------- */
.foryou { padding-block-start: 3rem; }
.foryou__grid { gap: 2.5rem; }
.foryou__head { display: grid; gap: 1.5rem; }
.ill--mind { inline-size: min(100%, 22rem); }
.ill--mind .ill__sun { inline-size: 62%; }
.checks { display: grid; gap: 0.75rem; }
.checks li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--peach);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: inset 0 0 0 1px rgb(140 44 32 / 0.06);
}
.check { inline-size: 2.5rem; block-size: 2.5rem; }
.check circle { fill: var(--maroon); transform-origin: 50% 50%; }
.check path { fill: none; stroke: var(--white); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.family-card {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: var(--radius-l) var(--radius-s) var(--radius-l) var(--radius-s);
  border: 2px dashed var(--apricot);
}
.family-card p { font-size: 1.1875rem; }
.ill--kids { inline-size: min(100%, 18rem); }

/* ---------- Programs ---------- */
.switcher {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-block-end: 2rem;
  padding: 0.375rem;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.no-js .switcher { display: none; }
.switcher button {
  position: relative;
  z-index: 1;
  min-block-size: 3rem;
  padding-inline: 1.125rem;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--maroon);
  font-weight: 600;
  font-size: 1rem;
  transition: color 300ms var(--ease-out);
}
.switcher button[aria-pressed="true"] { background: var(--maroon); color: var(--white); }
.switcher.has-pill button[aria-pressed="true"] { background: transparent; }
.switcher__pill {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 0;
  border-radius: var(--pill);
  background: var(--maroon);
  opacity: 0;
  inline-size: var(--w, 0);
  block-size: var(--h, 0);
  transform: translate(var(--x, 0), var(--y, 0));
}
.switcher.has-pill .switcher__pill { opacity: 1; }
.switcher.is-ready .switcher__pill { transition: transform 500ms var(--spring), inline-size 500ms var(--ease-out); }

.programs__cards { gap: 2rem; }
.js .program:not(.is-active) { display: none; }
.program {
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.program.is-entering { animation: card-in 600ms var(--ease-out); }
@keyframes card-in { from { opacity: 0; translate: 0 1.5rem; } }
.program__media { position: relative; display: grid; overflow: hidden; }
.program__media picture { block-size: 100%; }
.program__media img { inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-tag {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.125rem 0.75rem;
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
}
.program__body { gap: 1rem; align-content: start; justify-items: start; padding: 1.75rem 1.5rem 2rem; }
.program__body h3 { font-family: var(--f-display); font-weight: 400; font-size: 2rem; }
.program__lead { font-size: 1.1875rem; font-weight: 500; line-height: 1.55; }
.program__label { font-weight: 600; color: var(--maroon); margin-block-end: -0.5rem; }
.dots li { position: relative; padding-inline-start: 1.5rem; padding-block: 0.25rem; }
.dots li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.25rem;
  inset-block-start: 0.95em;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 2px var(--maroon);
}
.program__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.meta-chip { display: inline-block; padding: 0.25rem 0.875rem; border-radius: var(--pill); background: var(--peach); color: var(--ink); font-weight: 500; }
.chip { display: inline-block; padding: 0.25rem 0.875rem; border-radius: var(--pill); background: var(--sun); color: var(--plum); font-weight: 600; }

/* ---------- Steps: stacking cards ---------- */
.stack { gap: 1.25rem; }
.stack__card {
  position: sticky;
  inset-block-start: calc(var(--header-space) + 0.5rem + var(--i) * 1.1rem);
  grid-template-columns: minmax(0, 1fr) 7rem;
  gap: 1rem;
  align-items: start;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius-l);
  background-color: var(--peach);
  background-image: var(--grain);
  box-shadow: 0 -10px 30px -18px rgb(52 18 23 / 0.35);
}
.stack__card:nth-child(2) { background-color: #FBDDBA; }
.stack__card:nth-child(3) { background-color: var(--apricot); }
.stack__num { display: block; font-family: var(--f-display); font-size: 4rem; line-height: 1; color: var(--maroon); margin-block-end: 0.5rem; }
.stack__card h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; margin-block-end: 0.375rem; }
.stack__card .handnote { margin-block-start: 0.5rem; }
.ill--step { inline-size: 100%; justify-self: center; align-self: center; }
.offer {
  margin-block-start: 2.5rem;
  padding: 1.5rem 1.75rem;
  border: 2px dashed var(--maroon-2);
  border-radius: var(--radius);
  max-inline-size: 48rem;
  font-size: 1.125rem;
}

/* ---------- About ---------- */
.about__grid { gap: 2.5rem; align-items: center; }
.ill--about { inline-size: min(100%, 24rem); justify-self: center; }
.ill--about .ill__sun { inline-size: 90%; }
.ill--about .ill__img { inline-size: 70%; }
.about__text h2 { margin-block-end: 1.25rem; }
.about__text > p + p { margin-block-start: 0.75rem; }
.signature { font-family: var(--f-hand); font-size: 3.5rem; line-height: 1; color: var(--maroon-2); margin-block-start: 1rem; inline-size: fit-content; }
.creds { margin-block-start: 1rem; font-size: 0.9375rem; color: var(--ink-2); }
.pullquote {
  position: relative;
  margin-block-start: 2rem;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: var(--radius-l) var(--radius-l) var(--radius-l) var(--radius-s);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.pullquote::before {
  content: "”";
  position: absolute;
  inset-block-start: -1.25rem;
  inset-inline-start: 1.25rem;
  font-family: var(--f-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--sun);
}
.pullquote blockquote p { font-family: var(--f-display); font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); line-height: 1.3; color: var(--maroon); }
.pullquote figcaption { margin-block-start: 0.75rem; font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- Reviews carousel ---------- */
.reviews { padding-block-end: 4.5rem; }
.reviews__head { display: grid; gap: 0.75rem; margin-block-end: 2rem; }
.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; color: var(--ink-2); }
.reviews__summary strong { color: var(--ink); }
.reviews__more { margin-block-start: 1.5rem; text-align: center; max-inline-size: none; }
.reviews__more .text-link { display: inline-block; min-block-size: 2.75rem; padding-block: 0.5rem; }
.reviews__attribution { text-align: center; max-inline-size: none; font-size: 0.875rem; color: var(--ink-2); }

.carousel { --slide-w: min(70vw, 36rem); --gap: 0.75rem; --fade: calc(50% - var(--slide-w) / 2); }
.carousel__controls { display: none; }
.carousel__dots { display: none; }
.carousel__track { display: grid; gap: 1rem; padding-inline: var(--gutter); }
.slide {
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-l);
  background-color: var(--peach);
  background-image: var(--grain);
  box-shadow: var(--shadow-soft);
}
.slide__title { font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; }
.slide__meta { font-size: 0.875rem; color: var(--ink-2); }
.slide blockquote p { font-size: 1.125rem; line-height: 1.65; }
.slide__text--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.slide__author { display: flex; align-items: center; gap: 0.75rem; margin-block-start: 0.25rem; }
.slide__author img { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; object-fit: cover; background: var(--apricot); }
.slide__author a, .slide__author span { font-weight: 600; color: var(--maroon); }
.slide__time { display: block; font-size: 0.875rem; font-weight: 400; color: var(--ink-2); }
.slide__more { font-size: 0.9375rem; }

.js .carousel.is-ready .carousel__controls { display: flex; justify-content: center; gap: 1rem; margin-block-end: 1.25rem; }
.carousel__btn {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border: 2px solid var(--maroon);
  border-radius: 50%;
  background: var(--paper);
  color: var(--maroon);
  transition: background-color 200ms, color 200ms, scale 200ms var(--spring);
}
.carousel__btn:hover { background: var(--maroon); color: var(--white); }
.carousel__btn:active { scale: 0.92; }
.carousel__btn .icon { inline-size: 1.25rem; block-size: 1.25rem; }
/* progress ring: exactly concentric with the button (the svg is wider than its box, so no max-size cap) */
.carousel__ring {
  position: absolute;
  inset: -7px;
  inline-size: calc(100% + 14px);
  block-size: calc(100% + 14px);
  max-inline-size: none;
  rotate: -90deg;
  pointer-events: none;
  overflow: visible;
}
.carousel__ring circle { fill: none; stroke-width: 2.25; }
.carousel__ring-track { stroke: rgb(140 44 32 / 0.14); }
.carousel__ring-bar { stroke: var(--sun); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.carousel.is-playing .carousel__ring-bar { animation: ring var(--interval, 7000ms) linear forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.carousel__play .icon--play { display: none; }
.carousel.is-paused .carousel__play .icon--play { display: block; }
.carousel.is-paused .carousel__play .icon--pause { display: none; }

.js .carousel.is-ready .carousel__viewport {
  overflow: clip;
  padding-block: 1rem 1.5rem;
  touch-action: pan-y;
  cursor: grab;
  /* the neighbours fade from half-visible next to the review in focus to fully transparent at the screen edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.js .carousel.is-ready .carousel__viewport.is-dragging { cursor: grabbing; }
.js .carousel.is-ready .carousel__track { display: grid; justify-items: center; align-items: center; padding: 0; gap: 0; }
.js .carousel.is-ready .slide {
  grid-area: 1 / 1;
  inline-size: var(--slide-w);
  --x: calc(var(--pos, 0) * -1 * (96% + var(--gap)));
  transform: translateX(calc(var(--x) + var(--drag, 0px))) scale(var(--s, 1));
  opacity: var(--o, 1);
  transition: transform 750ms var(--ease-out), opacity 750ms var(--ease-out), box-shadow 750ms;
  user-select: none;
}
.js .carousel.is-ready .slide[data-pos="0"] { --s: 1; --o: 1; box-shadow: var(--shadow); }
.js .carousel.is-ready .slide[data-pos="1"], .js .carousel.is-ready .slide[data-pos="-1"] { --s: 0.92; --o: 0.6; }
.js .carousel.is-ready .slide[data-far] { --s: 0.8; --o: 0; }
.js .carousel.is-ready .slide.no-anim, .carousel__viewport.is-dragging .slide { transition: none; }
.js .carousel.is-ready .carousel__dots { display: flex; justify-content: center; flex-wrap: wrap; }
.carousel__dot { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 0; background: none; padding: 0; }
.carousel__dot::before {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--pill);
  border: 2px solid var(--maroon);
  transition: inline-size 400ms var(--ease-out), background-color 300ms;
}
.carousel__dot[aria-current="true"]::before { inline-size: 1.75rem; background: var(--maroon); }

/* ---------- Studio ---------- */
.studio__grid { gap: 2.5rem; align-items: center; }
.studio__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; align-items: start; }
.photo { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.photo picture { display: block; }
.photo img { inline-size: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.photo--b { margin-block-start: 3rem; }
.studio__text h2 { margin-block-end: 1.5rem; }
.facts { display: grid; gap: 1.25rem; }
.facts li { padding-block-start: 1rem; border-block-start: 2px solid var(--apricot); }
.facts h3 { margin-block-end: 0.25rem; }
.facts p { color: var(--ink-2); }

/* ---------- Booking (dark section, bright form card) ---------- */
.booking { padding-block-end: 6rem; }
.booking__grid { gap: 2.5rem; align-items: start; }
.booking h2 { color: var(--white); margin-block-end: 1rem; }
.booking .note { margin-block-end: 0.5rem; }
.booking__lead { color: var(--peach); font-size: 1.1875rem; }
.promises { display: grid; gap: 0.625rem; margin-block-start: 1.5rem; }
.promises li { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; }
.promises .icon {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--plum);
}
.ill--booking { inline-size: min(100%, 16rem); margin-block: 2rem 1rem; }
.ill--booking .ill__sun { inline-size: 80%; }
.ill--booking .ill__img { inline-size: 82%; }
.booking__alt { display: grid; gap: 0.75rem; justify-items: start; color: var(--peach); }
.booking__alt p { font-weight: 500; }

.booking__card {
  position: relative;
  isolation: isolate;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-l);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
.booking__card::before {       /* the card surface, layered above the sun */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--paper);
  background-image: var(--grain);
}
.booking__card-sun {           /* a sun rising behind the form card */
  position: absolute;
  z-index: -2;
  inset-block-start: -3.5rem;
  inset-inline-end: 1.5rem;
  inline-size: 7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FFD98A, var(--sun) 60%, #F79A1E);
  box-shadow: 0 0 0 1rem rgb(254 170 0 / 0.12), 0 0 0 2.25rem rgb(254 170 0 / 0.06);
}
.js .booking-fallback { display: none; }
.no-js .booking-form { display: none; }
.booking-fallback { display: grid; gap: 1rem; justify-items: start; }
.booking-form { gap: 1.75rem; }
.form-note { font-size: 0.9375rem; color: var(--ink-2); }

.step { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; gap: 1rem; }
.step + .step { padding-block-start: 1.75rem; border-block-start: 2px dashed var(--line); }
.step__title {
  /* floated so it sits inside the step instead of on the fieldset border */
  float: right;
  float: inline-start;
  inline-size: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 0;
  margin-block-end: 0.25rem;
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--maroon);
}
.step__title .req, .step__title .opt { font-family: var(--f-body); font-size: 1rem; }
.step__num {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--white);
  font-size: 1.125rem;
}
.step__fields { display: grid; gap: 1rem; }
.step > :not(legend) { clear: both; }

.field { gap: 0.5rem; min-inline-size: 0; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-weight: 600; font-size: 1.0625rem; color: var(--ink); padding: 0; }
.field legend { margin-block-end: 0.5rem; }
.req, .opt { font-weight: 400; color: var(--ink-2); }
.field__hint { font-size: 0.9375rem; color: var(--ink-2); }
.field input[type="text"], .field input[type="tel"], .field textarea {
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--ink-2);
  border-radius: var(--radius-s);
  background: var(--white);
  font-size: 1.125rem;
  line-height: 1.5;
  transition: border-color 200ms, box-shadow 200ms;
}
.field input[type="tel"] { text-align: end; }
.field textarea { resize: vertical; min-block-size: 6rem; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--maroon); box-shadow: 0 0 0 4px var(--peach); }
.field [aria-invalid="true"] { border-color: var(--maroon); border-width: 3px; }

/* program choice cards */
.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.pick {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 2px solid var(--ink-2);
  border-radius: 1.25rem;
  background: var(--white);
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms, translate 250ms var(--spring), box-shadow 250ms;
}
.pick input { position: absolute; inset: 0; z-index: 2; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pick__name { padding: 0.5rem 0.5rem 0.625rem; font-weight: 600; text-align: center; line-height: 1.25; }
.pick__mark {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  display: grid;
  place-items: center;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--white);
  box-shadow: 0 0 0 3px var(--white);
  scale: 0;
  transition: scale 350ms var(--spring);
}
.pick__mark svg { inline-size: 1.125rem; block-size: 1.125rem; }
.pick:hover { box-shadow: var(--shadow-soft); }
.pick:has(input:checked) { border-color: var(--maroon); border-width: 3px; background: var(--peach); }
.pick:has(input:checked) .pick__mark { scale: 1; }
.pick:has(input:focus-visible) { outline: 3px solid var(--maroon); outline-offset: 3px; }
.picks:has([aria-invalid="true"]) .pick { border-color: var(--maroon); }

/* goal idea chips */
.goal-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.goal-chip {
  min-block-size: 2.75rem;
  padding: 0.375rem 1rem;
  border: 1.5px solid var(--ink-2);
  border-radius: var(--pill);
  background: var(--white);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color 200ms, color 200ms, border-color 200ms, scale 200ms var(--spring);
}
.goal-chip:hover { border-color: var(--maroon); }
.goal-chip:active { scale: 0.95; }
.goal-chip[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: var(--white); }
.goal-chip[aria-pressed="true"]::before { content: "✓ "; }

/* days of the week */
.days-field { margin-block-start: 1rem; }
.days { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.day {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 2px solid var(--ink-2);
  border-radius: 50%;
  background: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms, scale 250ms var(--spring);
}
.day input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.day:active { scale: 0.92; }
.day:has(input:checked) { background: var(--maroon); border-color: var(--maroon); color: var(--white); }
.day:has(input:focus-visible) { outline: 3px solid var(--maroon); outline-offset: 3px; }

/* live WhatsApp preview */
.preview { display: grid; gap: 0.5rem; }
.preview__label { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.preview__chat {
  padding: 1rem;
  border-radius: var(--radius);
  background-color: var(--peach);
  background-image: var(--grain), radial-gradient(circle at 20% 20%, rgb(255 255 255 / 0.5), transparent 60%);
}
.preview__bubble {
  position: relative;
  inline-size: fit-content;
  max-inline-size: 92%;
  margin-inline-start: auto;
  padding: 0.75rem 1rem;
  border-radius: 1.25rem 1.25rem 0.375rem 1.25rem;
  background: var(--bubble);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-line;
  box-shadow: 0 2px 0 rgb(52 18 23 / 0.08);
}
.preview__bubble.is-bump { animation: bump 400ms var(--spring); }
@keyframes bump { 40% { scale: 1.02; } }

.field__error { display: flex; gap: 0.5rem; align-items: start; color: var(--maroon); font-weight: 600; font-size: 1rem; }
.field__error svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.2em; }
.form-status:empty { display: none; }
.form-status { font-weight: 500; }

/* ---------- FAQ ---------- */
.faq__grid { gap: 2rem; }
.faq__head .handnote { margin-block-start: 1rem; }
.ill--faq { inline-size: min(100%, 20rem); margin-block-start: 1.5rem; }
.ill--faq .ill__sun { inline-size: 64%; }
.faq { display: grid; gap: 0.75rem; }
.faq details { border-radius: var(--radius); background: var(--paper); transition: box-shadow 300ms var(--ease-out); }
.faq details[open] { box-shadow: var(--shadow-soft); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 3.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--maroon); }
.faq__chev {
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0.3rem;
  border-radius: 50%;
  background: var(--peach);
  color: var(--maroon);
  transition: rotate 450ms var(--ease-out), background-color 300ms;
}
.faq details.is-open .faq__chev, .no-js .faq details[open] .faq__chev { rotate: 180deg; background: var(--apricot); }
.faq__body { overflow: hidden; }
.faq__body p { padding: 0 1.25rem 1.25rem; }

/* ---------- Find us ---------- */
.findus { padding-block-end: 3rem; }
.findus__grid { gap: 2.5rem; align-items: center; }
.address { display: flex; gap: 0.75rem; align-items: start; margin-block: 1rem 1.5rem; font-size: 1.1875rem; line-height: 1.8; }
.address .icon { flex: none; color: var(--maroon); margin-block-start: 0.35em; }
.address a { display: inline-block; min-block-size: 2.75rem; padding-block: 0.375rem; }
.towns { margin-block-start: 1.5rem; color: var(--ink-2); }
.hours-card {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow);
}
.hours { inline-size: 100%; font-size: 1.125rem; }
.hours caption { text-align: start; font-family: var(--f-display); font-size: 1.5rem; color: var(--maroon); padding-block-end: 0.5rem; }
.hours th, .hours td { text-align: start; padding-block: 0.625rem; border-block-end: 1px solid var(--ink-2); }
.hours thead th { font-size: 0.9375rem; color: var(--ink-2); font-weight: 500; }
.hours tbody th { font-weight: 600; }
.hours td { font-variant-numeric: tabular-nums; }
.ill--map { inline-size: min(70%, 14rem); justify-self: center; }
.ribbon { margin-block-start: 3.5rem; overflow: hidden; white-space: nowrap; }
.ribbon__track {
  display: inline-flex;
  gap: 2.5rem;
  padding-inline: 2rem;
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  line-height: 1.2;
  color: var(--apricot);
  transform: translateX(calc((var(--p) - 0.5) * -28%));
}
.ribbon__track span { display: inline-flex; align-items: center; gap: 2.5rem; }
.ribbon__track span:nth-child(even) { color: transparent; -webkit-text-stroke: 2px var(--rose); }
.ribbon__track span::after { content: ""; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--sun); }

/* ---------- Sunset (final call to action, with the sunset art) ---------- */
.sunset {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--plum-deep);
  color: var(--white);
  text-align: center;
  padding-block-end: 5rem;
  --overlap-art: 25vw;               /* the dark ground at the bottom of the portrait crop */
}
.sunset__media { position: relative; overflow: hidden; }
.sunset__media img { inline-size: 100%; block-size: auto; transform-origin: 50% 77%; }
.sunset__media::before {             /* blends the top of the art into the section above */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 18%;
  z-index: 1;
  background: linear-gradient(var(--paper), transparent);
}
.sunset__media::after {              /* dusk settles in as you scroll */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 30%, var(--plum-deep));
  opacity: calc(var(--p) * 0.6);
}
.sunset__content { position: relative; z-index: 2; display: grid; justify-items: center; margin-block-start: calc(-1 * var(--overlap-art)); }
.sunset h2 { color: var(--white); max-inline-size: 20ch; }
.sunset h2 + p { margin-block: 1rem 2rem; color: var(--peach); font-size: 1.25rem; }
.sunset__call { margin-block-start: 1rem; }
.sunset__call .text-link { display: inline-block; min-block-size: 2.75rem; padding-block: 0.5rem; }

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--plum);
  background-image: var(--grain-light);
  color: var(--white);
  padding-block: 4rem 1.5rem;
  font-size: 1rem;
}
.site-footer a, .site-footer .text-button { color: var(--white); text-decoration: underline; text-underline-offset: 0.24em; font-weight: 500; }
.site-footer .pill-link { text-decoration: none; }
.site-footer__grid { gap: 2rem; }
.site-footer__brand { display: grid; gap: 1rem; justify-items: start; }
.badge-wrap { display: inline-block; padding: 0.375rem; border-radius: 50%; background: var(--paper); }
.badge-wrap img { inline-size: 7rem; block-size: 7rem; object-fit: contain; }
.footer-title { font-family: var(--f-body); font-size: 0.9375rem; font-weight: 600; color: var(--peach); margin-block-end: 0.375rem; }
.site-footer address a, .footer-links a { display: inline-block; min-block-size: 2.75rem; padding-block: 0.5rem; }
.site-footer__bottom {
  margin-block-start: 2.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--plum-2);
  font-size: 0.9375rem;
  color: var(--peach);
}

/* ---------- Floating WhatsApp (mobile) ---------- */
.fab {
  position: fixed;
  z-index: 40;
  inset-inline-start: 1rem;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--white);
  border: 2px solid var(--paper);
  box-shadow: var(--shadow);
  transition: opacity 300ms var(--ease-out), scale 400ms var(--spring), visibility 0s linear 0s;
}
.fab svg { inline-size: 1.75rem; block-size: 1.75rem; }
.fab:hover { background: var(--maroon-2); }
.fab.is-hidden { opacity: 0; scale: 0.4; visibility: hidden; transition: opacity 250ms, scale 250ms, visibility 0s linear 250ms; }

/* ---------- Simple pages (accessibility statement, credits) ---------- */
.page-simple { background-color: var(--paper); background-image: var(--grain); }
.page-simple .site-header { position: sticky; }
.page-head { padding-block: 3rem 2rem; }
.page-head h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); }
.page-head p { margin-block-start: 1rem; color: var(--ink-2); }
.prose { padding-block-end: 5rem; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); margin-block: 3rem 0.75rem; }
.prose h3 { margin-block: 1.5rem 0.5rem; }
.prose p + p, .prose p + ul, .prose ul + p { margin-block-start: 0.75rem; }
.prose ul { padding-inline-start: 1.5rem; max-inline-size: 64ch; }
.prose li + li { margin-block-start: 0.5rem; }
.prose li::marker { color: var(--maroon); }
.prose a { color: var(--maroon); font-weight: 500; text-decoration: underline; text-underline-offset: 0.24em; }
.page-simple .site-footer { padding-block-end: 2rem; }
.header-back { margin-inline-start: auto; display: inline-block; min-block-size: 2.75rem; padding: 0.5rem 0.75rem; }

/* Very large text on a narrow phone: the compact header CTA steps aside */
@media (max-width: 19.9em) {
  .js .header-cta { display: none; }
  .js .nav-toggle { margin-inline-start: auto; }
}

/* =========================================================
   ≥ 640px
   ========================================================= */
@media (min-width: 40em) {
  :root { --gutter: 2rem; --overlap: 3rem; }
  .section { padding-block: 6rem; }
  .layer { padding-block-start: 6.5rem; }
  .program__body { padding: 2rem; }
  .stack__card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; min-block-size: 20rem; padding: 2.5rem; }
  .ill--step { inline-size: min(100%, 16rem); }
  .booking__card { padding: 2.25rem 2rem; }
  .step__fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .booking-form .btn--block { font-size: 1.1875rem; }
  .family-card { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours-card { grid-template-columns: minmax(0, 1fr) 9rem; align-items: center; }
  .ill--map { inline-size: 100%; }
  .sunset { --overlap-art: 10.5vw; }
}

/* =========================================================
   ≥ 960px
   ========================================================= */
@media (min-width: 60em) {
  :root { --gutter: 2.5rem; --fab-space: 0rem; --overlap: 3.5rem; }
  .fab, .menu { display: none; }
  .section { padding-block: 8rem; }
  .layer { padding-block-start: 8.5rem; }

  .capsule { padding-inline: 1rem 0.5rem; gap: 1rem; }
  .brand img { block-size: 3rem; }
  .nav-toggle, .no-js .nav-toggle { display: none; }
  .site-nav, .no-js .site-nav { display: block; order: 0; inline-size: auto; margin-inline-start: auto; }
  .site-nav__list, .no-js .site-nav__list { display: flex; gap: 0.25rem; }
  .header-cta { margin-inline-start: 0.5rem; }
  .no-js .site-header { position: fixed; }
  .no-js .capsule { border-radius: var(--pill); }

  .intro { padding-block: 6rem 3rem; }
  .intro__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .ill--intro { inline-size: min(100%, 28rem); }

  .foryou { padding-block: 4rem 9rem; }
  .foryou__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; row-gap: 2rem; align-items: start; }
  .foryou__head { grid-row: span 2; position: sticky; inset-block-start: 7rem; }
  .ill--mind { inline-size: 100%; }
  .family-card { grid-column: 2; }

  .program { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .program__media { order: 2; }
  .program__media img { aspect-ratio: auto; block-size: 100%; min-block-size: 34rem; }
  .program__body { padding: 3rem; align-content: center; }

  .stack__card { min-block-size: 22rem; padding: 3rem 3.5rem; }
  .ill--step { inline-size: min(100%, 20rem); }

  .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; }
  .ill--about { inline-size: 100%; }

  .reviews__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .carousel { --slide-w: 38rem; --gap: 2rem; }

  .studio__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5rem; }
  .studio__photos { gap: 1.25rem; }
  .photo--b { margin-block-start: 5rem; }

  .booking { padding-block-end: 9rem; }
  .booking__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 4rem; row-gap: 1.5rem; }
  .booking__intro { grid-column: 1; grid-row: 1; }
  .booking__alt { grid-column: 1; grid-row: 2; align-self: start; }
  .booking__card { grid-column: 2; grid-row: 1 / span 2; }
  .booking__card { padding: 3rem; }
  .booking__card-sun { inline-size: 9rem; inset-block-start: -4.5rem; }

  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .faq__head { position: sticky; inset-block-start: 7rem; }
  .ill--faq { inline-size: min(100%, 24rem); }

  .findus__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; }

  .sunset { padding-block-end: 8rem; }

  .site-footer__grid { grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 3rem; }
}

@media (min-width: 75em) {
  .section { padding-block: 9rem; }
  .layer { padding-block-start: 9.5rem; }
}

/* =========================================================
   Content copied by the accessibility widget (reader mode etc.) is always shown plainly
   ========================================================= */
[data-a11yw] [data-anim], [data-a11yw] .check *, [data-a11yw] .photo img, [data-a11yw] .program__media img {
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  translate: none !important;
  transform: none !important;
  scale: none !important;
  clip-path: none !important;
  animation: none !important;
  stroke-dashoffset: 0 !important;
}
[data-a11yw] .program, [data-a11yw] .booking-fallback { display: block !important; }
[data-a11yw] .carousel__track { display: block !important; }
[data-a11yw] .slide { transform: none !important; opacity: 1 !important; inline-size: auto !important; margin-block: 1rem; }
/* the widget's colour modes strip backgrounds; our decorative layers step aside with them */
html.a11y-plain .textured::before, html.a11y-plain .textured::after,
html.a11y-plain .sunset__media::before, html.a11y-plain .sunset__media::after,
html.a11y-plain .btn::after, html.a11y-plain .ill__sun, html.a11y-plain .booking__card-sun { display: none !important; }
[data-a11yw] .hero, [data-a11yw] .ill, [data-a11yw] .ribbon, [data-a11yw] .sunset__media,
[data-a11yw] .carousel__controls, [data-a11yw] .carousel__dots, [data-a11yw] .fab { display: none !important; }

/* =========================================================
   MOTION — everything below is skipped when the visitor asks for less
   (OS "reduce motion", the on-page "עצירת אנימציות" button → html.motion-off, or the accessibility widget)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) { scroll-behavior: smooth; }

  /* Hero: Ken Burns on load + parallax (the image rises slower than the page) */
  html:not(.motion-off) .hero__img { animation: hero-in 1800ms var(--ease-out) both; }
  @keyframes hero-in { from { scale: 1.08; opacity: 0.6; } }
  html:not(.motion-off) .hero__media { transform: translate3d(0, var(--hero-shift, 0px), 0); }
  html:not(.motion-off) .hero__cue { animation: cue-in 900ms var(--ease-out) 700ms backwards; }
  html:not(.motion-off) .hero__cue svg { animation: cue-bounce 1600ms var(--ease-in-out) 1600ms 3; }
  @keyframes cue-in { from { opacity: 0; translate: 0 1rem; } }
  @keyframes cue-bounce { 50% { translate: 0 5px; } }

  /* Header capsule drops in (backwards fill only, so it never keeps a transform afterwards) */
  html:not(.motion-off) .capsule { animation: capsule-in 900ms var(--ease-out) 200ms backwards; }
  @keyframes capsule-in { from { opacity: 0; translate: 0 -1.5rem; } }

  /* One-time entrances — the text itself stays plain text in the DOM */
  html.js:not(.motion-off) [data-anim] {
    transition: opacity 800ms var(--ease-out), translate 800ms var(--ease-out), clip-path 1100ms var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  html.js:not(.motion-off) [data-anim]:not(.is-in) { opacity: 0; }
  html.js:not(.motion-off) [data-anim="rise"]:not(.is-in) { translate: 0 1.75rem; }
  html.js:not(.motion-off) [data-anim="slide"]:not(.is-in) { translate: 2.5rem 0; }
  /* Headings and the signature reveal through a moving soft mask. A mask (unlike clip-path) never
     changes the element's on-screen box, so visibility detection and assistive tools always see it. */
  html.js:not(.motion-off) [data-anim="heading"]:not(.is-done) {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 55%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 55%);
    -webkit-mask-size: 100% 230%;
    mask-size: 100% 230%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transition: opacity 700ms var(--ease-out), translate 900ms var(--ease-out), -webkit-mask-position 1100ms var(--ease-out), mask-position 1100ms var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  html.js:not(.motion-off) [data-anim="heading"]:not(.is-in) { translate: 0 0.4em; }
  html.js:not(.motion-off) [data-anim="heading"].is-in { -webkit-mask-position: 0 0; mask-position: 0 0; }
  html.js:not(.motion-off) [data-anim="write"]:not(.is-done) {
    -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 55%);
    mask-image: linear-gradient(to left, #000 45%, transparent 55%);
    -webkit-mask-size: 230% 100%;
    mask-size: 230% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transition: opacity 400ms, -webkit-mask-position 1500ms var(--ease-in-out) 200ms, mask-position 1500ms var(--ease-in-out) 200ms;
  }
  html.js:not(.motion-off) [data-anim="write"].is-in { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  html.js:not(.motion-off) [data-anim="clip"] img { clip-path: inset(14% 10% round var(--radius)); scale: 1.15; transition: clip-path 1200ms var(--ease-out), scale 1600ms var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
  html.js:not(.motion-off) [data-anim="clip"].is-in img { clip-path: inset(0 round var(--radius)); scale: 1; }

  /* Check marks draw themselves */
  html.js:not(.motion-off) .checks li .check circle { scale: 0; transition: scale 600ms var(--spring); transition-delay: calc(var(--d, 0) * 90ms + 150ms); }
  html.js:not(.motion-off) .checks li .check path { stroke-dashoffset: 1; transition: stroke-dashoffset 500ms var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms + 450ms); }
  html.js:not(.motion-off) .checks li.is-in .check circle { scale: 1; }
  html.js:not(.motion-off) .checks li.is-in .check path { stroke-dashoffset: 0; }

  /* Illustrations: entrance + their own gentle movement + drift with the scroll */
  html.js:not(.motion-off) .ill .ill__sun { scale: 0.6; opacity: 0; transition: scale 1100ms var(--spring), opacity 600ms; }
  html.js:not(.motion-off) .ill .ill__img { opacity: 0; translate: 0 2rem; transition: opacity 800ms var(--ease-out) 150ms, translate 1000ms var(--spring) 150ms; }
  html.js:not(.motion-off) .ill.is-in .ill__sun { scale: 1; opacity: 1; }
  html.js:not(.motion-off) .ill.is-in .ill__img { opacity: 1; translate: 0 0; }
  html:not(.motion-off) .ill[data-scroll] { transform: translateY(calc((0.5 - var(--p)) * 3rem)); }
  html:not(.motion-off) .ill[data-scroll] .ill__sun { transform: scale(calc(0.92 + var(--p) * 0.16)); }

  html:not(.motion-off) .ill__img--dance   { animation: dance 3.2s var(--ease-in-out) infinite; }
  html:not(.motion-off) .ill__img--breathe { animation: breathe 4.8s var(--ease-in-out) infinite alternate; }
  html:not(.motion-off) .ill__img--hop     { animation: hop 1.1s var(--ease-in-out) infinite alternate; }
  html:not(.motion-off) .ill__img--wobble  { animation: wobble 3.6s var(--ease-in-out) infinite alternate; }
  html:not(.motion-off) .ill__img--bob     { animation: bob 3s var(--ease-in-out) infinite alternate; }
  html:not(.motion-off) .ill__img--lunge   { animation: lunge 2.6s var(--ease-in-out) infinite alternate; }
  html:not(.motion-off) .ill__img--lift    { animation: lift 2.4s var(--ease-in-out) infinite alternate; }
  html:not(.motion-off) .ill__img--sway    { animation: sway 4s var(--ease-in-out) infinite alternate; }
  html:not(.motion-off) .ill__img--ponder  { animation: ponder 5s var(--ease-in-out) infinite; }
  html:not(.motion-off) .ill:not(.is-live) .ill__img { animation-play-state: paused; }

  @keyframes dance {
    0%, 50%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-14px) rotate(-2.5deg); }
    75% { transform: translateY(-8px) rotate(2deg); }
  }
  @keyframes breathe { to { transform: translateY(-8px) scale(1.025); } }
  @keyframes hop { to { transform: translateY(-7px); } }
  @keyframes wobble { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
  @keyframes bob { to { transform: translateY(-8px); } }
  @keyframes lunge { to { transform: scaleY(0.965) translateY(2px); } }
  @keyframes lift { to { transform: translateY(-6px) scaleY(1.015); } }
  @keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
  @keyframes ponder {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-6px) rotate(-1.5deg); }
    65% { transform: translateY(-3px) rotate(1.2deg); }
  }

  /* Textures drift with the scroll: rings one way, sunlight the other */
  html:not(.motion-off) .textured::before { transform: translate3d(0, calc((0.5 - var(--p)) * 14%), 0); }
  html:not(.motion-off) .textured::after { transform: translate3d(0, calc((var(--p) - 0.5) * 60%), 0); }

  /* Photos: gentle zoom and drift */
  html:not(.motion-off) .program__media[data-scroll] img { transform: scale(calc(1.1 - var(--p) * 0.1)); }
  html:not(.motion-off) .photo--a[data-scroll] picture { transform: translateY(calc((0.5 - var(--p)) * 2.5rem)); }
  html:not(.motion-off) .photo--b[data-scroll] picture { transform: translateY(calc((var(--p) - 0.5) * 2.5rem)); }
  html:not(.motion-off) .sunset[data-scroll] .sunset__media img { transform: scale(calc(1.14 - var(--p) * 0.14)); }
  html:not(.motion-off) .booking__card-sun { transform: translateY(calc((0.5 - var(--p)) * 2.5rem)); }

  /* Buttons: a sun-warm sheen on hover */
  html:not(.motion-off) .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.22) 50%, transparent 70%);
    translate: 120% 0;
    transition: translate 700ms var(--ease-out);
  }
  html:not(.motion-off) .btn:hover::after { translate: -120% 0; }
  html:not(.motion-off) .btn:hover { translate: 0 -2px; }
  html:not(.motion-off) .btn:active { translate: 0 1px; }
  html:not(.motion-off) .pick:hover { translate: 0 -3px; }

  /* Floating button pops in */
  html:not(.motion-off) .fab:not(.is-hidden) { animation: fab-pulse 1.6s var(--ease-out) 600ms 2; }
  @keyframes fab-pulse { 0% { box-shadow: 0 0 0 0 rgb(106 26 20 / 0.45), var(--shadow); } 100% { box-shadow: 0 0 0 1.25rem rgb(106 26 20 / 0), var(--shadow); } }

  /* Scroll-driven animations where the browser supports them (Chrome, Edge, Safari 26+).
     Elsewhere main.js sets the same --p / --scroll values from the scroll position. */
  @supports (animation-timeline: view()) {
    html:not(.motion-off) [data-scroll] { animation: p-track linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    html:not(.motion-off) .capsule__progress { animation: progress-track linear both; animation-timeline: scroll(root block); }
    html:not(.motion-off) .hero__media { animation: hero-parallax linear both; animation-timeline: scroll(root block); animation-range: 0 100svh; }
    html:not(.motion-off) .hero::after { animation: hero-dim linear both; animation-timeline: scroll(root block); animation-range: 0 100svh; }
  }
  @keyframes p-track { from { --p: 0; } to { --p: 1; } }
  @keyframes progress-track { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes hero-parallax { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 50svh, 0); } }
  @keyframes hero-dim { from { opacity: 0; } to { opacity: 0.35; } }
}

/* Motion off: settle every scroll-linked value at a calm resting point */
html.motion-off [data-scroll] { --p: 0.5; }
html.motion-off .slide, html.motion-off .menu { transition: none !important; }
html.motion-off .menu.is-open .menu__list li, html.motion-off .menu.is-open .menu__cta, html.motion-off .menu.is-open .menu__meta { animation: none; }
@media (prefers-reduced-motion: reduce) {
  [data-scroll] { --p: 0.5; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
  .site-header, .menu, .fab, .hero, .ill, .ribbon, .sunset__media, .carousel__controls, .skip-links { display: none !important; }
  .sheet, .layer { margin: 0; box-shadow: none; }
  .js .program:not(.is-active) { display: grid; }
  body { background: #fff; }
}