/* =========================================================
   The Pilates Studio — Casablanca
   Type mirrors the pilates-mobile design tokens; palette is the studio's pink,
   softened into a dusty rose that can carry text.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Sand — warm blush neutrals. Biased toward the accent so the ground and the
     pink read as one family rather than a pink sitting on top of grey. */
  --sand-50:  #FFFCFB;
  --sand-100: #FBF6F4;
  --sand-200: #F5EEEC;
  --sand-300: #EBE0DE;

  /* Rose — the working accent. Soft and dusty, dark enough at 600+ to carry text. */
  --rose-50:  #FDF6F8;
  --rose-100: #FAECF0;
  --rose-200: #F4DAE2;
  --rose-300: #E9BECC;
  --rose-400: #D998AE;
  --rose-500: #C77592;
  --rose-600: #ff75a7;
  --rose-700: #e73c7ec5;
  --rose-800: #c02b64;
  --rose-900: #5C2F40;
  /* Text-only pink. --rose-700 is a bright display pink and only reaches
     3.7:1 as body text; this is the same hue dark enough to read at 5.9:1. */
  --rose-ink: #B02A5F;

  /* The studio's bright pink. Used only in small doses — a pulse, a flag, a
     progress bar — so the page stays soft while still reading as their pink. */
  --pink-vivid: #f33a7e;
  --pink-lift:  #FF9BC1;

  /* Oat — warm secondary for gradients and the one non-pink tag. */
  --oat-100: #F6EFE6;
  --oat-200: #EADFD0;
  --oat-500: #C0A183;
  --oat-700: #7A5C38;

  /* The dark ground. Rose rather than plum-brown, so the dark sections read as
     a deep version of the brand pink instead of near-black. The hero keeps its
     own vivid gradient and scrim and is untouched by these. */
  --plum-800: #a1486a;
  --plum-900: #a04668;

  /* Ink — warm, very slightly plum-tinted */
  --ink:      #2E2429;
  --ink-soft: #57474E;
  --muted:    #7C6A71;
  --subtle:   #A99AA0;

  --line:      #EEE2E4;
  --line-soft: #F5EBED;
  --white:     #FFFFFF;

  /* Semantic — deliberately outside the brand family so availability reads as
     status, not decoration. All three pass 4.5:1 on white. */
  --status-open:    #5A7A5E;
  --status-filling: #A0662E;
  --status-low:     #C0432B;

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Shape */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 2px 10px rgba(46, 36, 41, .05);
  --shadow-md: 0 10px 32px -12px rgba(46, 36, 41, .16);
  --shadow-lg: 0 28px 70px -30px rgba(46, 36, 41, .3);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);

  --header-h: 76px;
  --shell: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--sand-100);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--rose-300); color: var(--rose-900); }

:focus-visible {
  outline: 2px solid var(--rose-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 8px;
  transform: translate(-50%, -160%);
  background: var(--rose-700); color: var(--white);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 500; z-index: 200;
  transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

h1, .display {
  font-size: clamp(2.85rem, 6.6vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.028em;
  font-weight: 500;
}

h2 {
  font-size: clamp(2.05rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  font-weight: 500;
}

h3 { font-size: 1.3125rem; letter-spacing: -.01em; }
h4 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose-ink);
  margin-bottom: 20px;
}

.dot-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pink-vivid);
  box-shadow: 0 0 0 0 rgba(242, 86, 143, .45);
  animation: pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 0, 93, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(242, 86, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 86, 143, 0); }
}

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section { padding-block: clamp(84px, 11vw, 148px); }

/* Grid children default to min-width:auto, which lets long words push
   a column wider than the viewport. Opt the text columns out. */
.hero-copy, .split-copy, .exp-steps, .footer-news, .sched-main { min-width: 0; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head-center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.section-note { color: var(--muted); max-width: 46ch; }
.section-note-center { margin-inline: auto; margin-top: 20px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out),
              border-color .35s var(--ease-out), transform .35s var(--ease-out),
              box-shadow .35s var(--ease-out);
}
.btn svg { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

/* A softer pink than the old dark mauve. White fails on this tone (3.29:1), so
   the label is ink at 4.56:1 — and hover LIGHTENS, which raises it to 6.46. */
.btn-solid {
  background: var(--rose-500); color: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(199, 117, 146, .8);
}
.btn-solid:hover { background: var(--rose-400); box-shadow: 0 16px 34px -14px rgba(199, 117, 146, .9); }

/* The header keeps the original treatment, as asked. */
.site-header .btn-solid { background: var(--rose-ink); color: var(--white); }
.site-header .btn-solid:hover { background: var(--rose-800); }

.btn-outline { border-color: var(--rose-300); color: var(--rose-ink); background: transparent; }
.btn-outline:hover { border-color: var(--rose-600); background: var(--rose-100); }

.btn-ghost { color: var(--ink); background: transparent; padding-inline: 8px; }
.btn-ghost:hover { color: var(--rose-700); }

.btn-sm { padding: 11px 20px; font-size: .875rem; }
.btn-lg { padding: 17px 34px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .5s var(--ease-out), box-shadow .5s var(--ease-out),
              border-color .5s var(--ease-out), height .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  height: 66px;
  background: rgba(251, 246, 244, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
}

.scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 100%; transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--pink-vivid), var(--rose-700));
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.site-header.is-stuck .scroll-progress { opacity: 1; }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 30px; height: 30px; color: var(--rose-700); }
.brand-mark svg { width: 100%; height: 100%; }
/* "The Pilates Studio" is a long wordmark — it has to hold its line against
   the nav without wrapping, so it scales rather than sitting at a fixed size. */
.brand-word {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  font-weight: 600; letter-spacing: -.015em;
  white-space: nowrap;
}
.footer-brand .brand-word { font-size: 1.5rem; }

.nav { display: flex; gap: 6px; }
.nav a {
  position: relative;
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500; color: var(--ink-soft);
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 1.5px; background: var(--rose-600); border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--rose-800); }
.nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
  display: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .3s var(--ease-out);
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--sand-100);
  padding: calc(var(--header-h) + 32px) clamp(20px, 6vw, 48px) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.875rem; font-weight: 500;
  letter-spacing: -.02em;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.mobile-menu.is-open nav a { opacity: 1; transform: none; transition-delay: calc(90ms + var(--i, 0) * 55ms); }
.mobile-menu nav a:hover { color: var(--rose-700); }
.mobile-menu-foot { color: var(--muted); font-size: .9375rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(168deg,
    var(--rose-100) 0%,
    var(--rose-200) 52%,
    var(--oat-200) 100%);
  /* Tied to viewport HEIGHT, not width: this padding decides whether the
     hero still fits one screen, which is what the scroll pin depends on. */
  padding-top: calc(var(--header-h) + clamp(28px, 5vh, 96px));
  padding-bottom: clamp(40px, 6vh, 112px);
  overflow: hidden;
}

.hero-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(64px); }
.blob-a {
  width: min(58vw, 640px); aspect-ratio: 1;
  top: -14%; right: -12%;
  background: radial-gradient(circle at 35% 35%, rgba(217, 152, 174, .5), rgba(217, 152, 174, 0) 68%);
}
.blob-b {
  width: min(46vw, 520px); aspect-ratio: 1;
  bottom: -22%; left: -14%;
  background: radial-gradient(circle at 60% 40%, rgba(234, 223, 208, .62), rgba(234, 223, 208, 0) 68%);
}
.grain {
  position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .82fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}

.hero .lead { margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: .875rem; color: var(--muted);
}
.hero-meta li { display: flex; align-items: center; gap: 9px; }
.hero-meta li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--rose-400); flex: none;
}

.hero-visual { position: relative; }

.frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--rose-100);
  box-shadow: var(--shadow-lg);
}
.frame .art { width: 100%; height: 100%; object-fit: cover; }
.frame-hero { aspect-ratio: 4 / 5; }
.frame-tall { aspect-ratio: 4 / 5; }
.frame-portrait { aspect-ratio: 3 / 4; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }

.float-card {
  position: absolute; left: -6%; bottom: 8%;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 20px 15px 17px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.float-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--pink-vivid);
  box-shadow: 0 0 0 4px rgba(242, 86, 143, .18);
}
/* The card is white but sits inside the hero, which sets a cream text colour
   for the dark backdrop. Anchor the colour here so it never inherits it. */
.float-card { color: var(--ink); }
.float-card strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.float-card small { display: block; font-size: .8125rem; color: var(--muted); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--subtle);
  z-index: 2;
}
.scroll-cue-line {
  width: 1px; height: 46px; background: var(--rose-300); position: relative; overflow: hidden;
}
.scroll-cue-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--rose-700);
  animation: cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  padding-block: 22px;
  border-block: 1px solid var(--line);
  background: var(--sand-50);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 30px; width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic; font-weight: 500; color: var(--rose-800); white-space: nowrap;
}
.marquee-track i { color: var(--rose-400); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats { padding-block: clamp(56px, 7vw, 88px); }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.stat { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 26px); }
.stat b {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1; letter-spacing: -.03em; color: var(--rose-800);
  font-variant-numeric: tabular-nums;
}
/* Direct child only — the counting number is a <span class="count"> nested
   inside the <b>, and an unscoped `.stat span` shrinks it to label size. */
.stat > span { display: block; margin-top: 10px; font-size: .875rem; color: var(--muted); }

/* ---------- Split (studio) ---------- */
.studio { background: var(--sand-50); border-block: 1px solid var(--line-soft); }
.split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.split-media { position: relative; }
.media-badge {
  position: absolute; right: -14px; top: 28px;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--white); box-shadow: var(--shadow-md);
  font-size: .75rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rose-700);
}
.media-badge b {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.125rem; letter-spacing: -.02em;
  color: var(--rose-800); text-transform: none;
}
.media-badge span { color: var(--pink-vivid); letter-spacing: 0; }
.split-copy p { color: var(--ink-soft); margin-top: 22px; max-width: 52ch; }
.split-copy h2 + p { margin-top: 26px; }

.ticks { margin-top: 36px; display: grid; gap: 14px; }
.ticks li {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: .9375rem; color: var(--ink-soft);
}
.ticks svg {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  padding: 3px; border-radius: 50%;
  background: var(--rose-200); color: var(--rose-700);
}

/* ---------- Classes ---------- */
.class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }

.class-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 30px 30px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
              border-color .5s var(--ease-out);
}
.class-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--rose-100), var(--sand-50) 62%);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.class-card:hover {
  transform: translateY(-6px);
  border-color: var(--rose-300);
  box-shadow: var(--shadow-md);
}
.class-card:hover::before { opacity: 1; }

.class-kit {
  align-self: flex-start;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--rose-300);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--rose-ink);
}
.class-art {
  margin: 20px 0 26px; color: var(--rose-700);
  opacity: .82; transition: transform .6s var(--ease-out), opacity .5s;
}
.class-art svg { width: 108px; height: auto; }
.class-card:hover .class-art { transform: translateX(4px); opacity: 1; }

.class-card h3 { margin-bottom: 10px; }
.class-card > p { color: var(--muted); font-size: .9375rem; flex: 1; }
.class-card footer {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.class-card footer span {
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--rose-100); color: var(--rose-800);
  font-size: .75rem; font-weight: 500;
}
.class-card footer .tag { background: var(--oat-100); color: var(--oat-700); }
.class-card-wide { grid-column: span 2; }
.class-card-wide .class-art svg { width: 132px; }

/* ---------- Experience (sticky scroll) ---------- */
.experience { background: var(--plum-900); color: var(--sand-100); }
.experience h2, .experience h3 { color: var(--sand-50); }
.experience .eyebrow { color: var(--rose-100); }

.exp-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.exp-sticky { position: sticky; top: calc(var(--header-h) + 48px); }
.exp-stage {
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(199, 117, 146, .3), transparent 62%),
    rgba(251, 246, 244, .045);
  border: 1px solid rgba(233, 190, 204, .18);
  display: grid; place-items: center;
}
.exp-stage-inner { position: relative; width: 74%; display: grid; place-items: center; }

.exp-step-num {
  position: absolute; inset: auto auto -6% -2%;
  font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 500; line-height: 1; letter-spacing: -.04em;
  color: rgba(233, 190, 204, .16);
  transition: opacity .4s var(--ease-out);
}

.exp-art { width: 100%; height: auto; color: var(--rose-300); }
.exp-ring {
  stroke: var(--rose-400);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--ring, 0));
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .25s linear;
}
.exp-glyph {
  opacity: 0; transform: scale(.94);
  transform-origin: 50% 50%;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.exp-glyph.is-active { opacity: 1; transform: none; }

.exp-steps { padding-block: clamp(8px, 3vw, 40px); }
.exp-step {
  position: relative;
  padding: clamp(32px, 4vw, 48px) 0 clamp(32px, 4vw, 48px) 0;
  border-top: 1px solid rgba(233, 190, 204, .16);
  opacity: .38;
  transition: opacity .55s var(--ease-out);
}
.exp-step:first-of-type { border-top: 0; }
.exp-step.is-active { opacity: 1; }
.exp-step-index {
  display: block; margin-bottom: 14px;
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; color: var(--rose-400);
}
.exp-step h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; }
.exp-step p { color: var(--sand-50); max-width: 48ch; }
.exp-steps h2 { margin-bottom: clamp(24px, 4vw, 40px); }

/* ---------- Teachers ---------- */
.teacher-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.teacher figure { margin-bottom: 20px; overflow: hidden; border-radius: var(--r-lg); }
.teacher .art { transition: transform .8s var(--ease-out); }
.teacher:hover .art { transform: scale(1.045); }
.teacher h3 { margin-bottom: 4px; }
.teacher-role {
  font-size: .8125rem; font-weight: 500; color: var(--rose-ink);
  margin-bottom: 12px;
}
.teacher-bio { font-size: .9375rem; color: var(--muted); }

/* ---------- Pricing ---------- */
.pricing { background: var(--sand-50); border-block: 1px solid var(--line-soft); }
.price-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px); align-items: center;
}

.price-card {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 38px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.price-card-featured {
  position: relative;
  padding-block: clamp(38px, 4vw, 52px);
  background: linear-gradient(168deg, var(--plum-800), var(--plum-900));
  border-color: var(--plum-800);
  color: var(--sand-100);
  box-shadow: var(--shadow-lg);
}
.price-card-featured h3 { color: var(--sand-50); }
.price-card-featured .price-desc { color: var(--rose-100); }
.price-card-featured .price-num { color: var(--sand-50); }
.price-card-featured .price-unit { color: var(--rose-100); }
/* Full white, not the muted cream: these are the plan's selling points and
   they were reading as secondary text on the card. 8.0:1 on the lighter end
   of the card gradient, 11.1:1 on the darker. */
.price-card.price-card-featured ul li { color: var(--white); }
.price-card.price-card-featured ul li::before { background: var(--rose-300); color: var(--ink); }
.price-card-featured .btn-solid { background: var(--sand-100); color: var(--rose-900); box-shadow: none; }
.price-card-featured .btn-solid:hover { background: var(--white); }

.price-flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--pink-lift); color: var(--ink);
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}

.price-card h3 { margin-bottom: 10px; }
.price-desc { font-size: .9375rem; color: var(--muted); min-height: 3.2em; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.price-num {
  font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--rose-800);
}
.price-unit { font-size: .875rem; color: var(--muted); }

.price-card ul { display: grid; gap: 12px; margin-bottom: 30px; flex: 1; }
.price-card ul li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .9375rem; color: var(--ink-soft);
}
.price-card ul li::before {
  content: "✓"; flex: none;
  width: 18px; height: 18px; margin-top: 3px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--rose-200); color: var(--rose-800);
  font-size: .625rem; font-weight: 700;
}

.price-foot {
  margin-top: 36px; text-align: center;
  font-size: .875rem; color: var(--muted);
}

/* ---------- Schedule ---------- */
.sched {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sched-days {
  display: flex; gap: 4px; padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--sand-50);
  overflow-x: auto;
  scrollbar-width: none;
}
.sched-days::-webkit-scrollbar { display: none; }
.sched-days button {
  flex: 1; min-width: 76px;
  padding: 11px 14px; border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 600; color: var(--muted);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out);
}
.sched-days button:hover { color: var(--ink); background: var(--rose-100); }
.sched-days button[aria-selected="true"] { background: var(--rose-700); color: var(--white); }

.sched-rows { min-height: 260px; }
.sched-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 132px 116px;
  align-items: center; gap: 16px;
  padding: 20px clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(10px);
  animation: rowIn .5s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: background-color .3s var(--ease-out);
}
.sched-row:first-child { border-top: 0; }
.sched-row:hover { background: var(--rose-100); }
@keyframes rowIn { to { opacity: 1; transform: none; } }

.sched-time {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 500;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.sched-name { font-weight: 600; font-size: .9375rem; }
.sched-teacher { font-size: .875rem; color: var(--muted); }
.sched-avail { font-size: .8125rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.sched-avail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sched-avail.open::before { background: var(--status-open); }
.sched-avail.filling::before { background: var(--status-filling); }
.sched-avail.low::before { background: var(--status-low); }
.sched-avail.full::before { background: var(--subtle); }
.sched-avail.open { color: var(--status-open); }
.sched-avail.filling { color: var(--status-filling); }
.sched-avail.low { color: var(--status-low); }
.sched-avail.full { color: var(--muted); }
.sched-row .btn { width: 100%; }
.sched-row .btn[disabled] {
  background: var(--sand-200); color: var(--subtle);
  border-color: transparent; cursor: not-allowed; box-shadow: none;
}
.sched-empty { padding: 60px 28px; text-align: center; color: var(--muted); }

/* ---------- Quotes ---------- */
.quotes { padding-top: 0; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.quote {
  position: relative;
  padding: clamp(30px, 3vw, 40px);
  background: var(--rose-100);
  border-radius: var(--r-lg);
  border: 1px solid var(--rose-200);
}
.quote-mark {
  display: block;
  font-family: var(--font-display); font-size: 4rem; line-height: .6;
  color: var(--rose-400); margin-bottom: 18px;
}
.quote blockquote {
  font-family: var(--font-display); font-size: 1.1875rem;
  font-style: italic; line-height: 1.55; color: var(--rose-900);
  letter-spacing: -.005em;
}
.quote figcaption { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rose-300); }
.quote figcaption strong { display: block; font-size: .9375rem; font-weight: 600; }
.quote figcaption span { font-size: .8125rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { background: var(--sand-50); border-block: 1px solid var(--line-soft); }
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.faq-intro { position: sticky; top: calc(var(--header-h) + 48px); }
.faq-intro p { color: var(--muted); margin: 22px 0 28px; max-width: 34ch; }

.faq-list { display: grid; }
.faq-list details {
  border-top: 1px solid var(--line);
  padding: 6px 0;
}
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  position: relative;
  list-style: none; cursor: pointer;
  padding: 22px 44px 22px 0;
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500;
  letter-spacing: -.01em;
  transition: color .3s var(--ease-out);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--rose-700); }
.faq-list summary::after,
.faq-list summary::before {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 14px; height: 1.5px; background: var(--rose-700); border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .3s;
}
.faq-list summary::before { transform: translateY(-50%) rotate(90deg); }
.faq-list summary::after { transform: translateY(-50%); }
.faq-list details[open] summary::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq-list details p {
  padding: 0 12% 26px 0;
  color: var(--muted); font-size: .9375rem;
  animation: faqIn .45s var(--ease-out);
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- CTA ---------- */
.cta { padding-block: clamp(72px, 9vw, 120px); }
.cta-inner {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 940px; margin-inline: auto;
  padding: clamp(48px, 7vw, 90px) clamp(28px, 6vw, 72px);
  text-align: center;
  border-radius: var(--r-xl);
  background: linear-gradient(158deg, var(--rose-200), var(--oat-100));
  border: 1px solid var(--rose-300);
}
.cta-inner::before {
  content: ""; position: absolute; z-index: -1;
  width: 62%; aspect-ratio: 1; top: -34%; right: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), transparent 66%);
}
.cta-inner .eyebrow { color: var(--rose-800); }
.cta-inner > p { color: var(--rose-900); opacity: .78; max-width: 44ch; margin: 22px auto 0; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 38px; }
.cta-actions .btn-ghost { color: var(--rose-900); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--plum-900); color: var(--sand-50);
  padding-top: clamp(56px, 7vw, 88px);
  font-size: .9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(44px, 5vw, 64px);
}
.footer-brand .brand { color: var(--sand-50); margin-bottom: 18px; }
.footer-brand .brand-mark { color: var(--rose-400); }
.footer-brand .brand-word i { color: var(--rose-400); }
.footer-brand > p { max-width: 30ch; }

.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(233, 190, 204, .22); border-radius: 50%;
  color: var(--rose-300);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out),
              border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.socials a svg { width: 18px; height: 18px; }
.socials a:hover {
  background: var(--rose-400); color: var(--ink);
  border-color: var(--rose-400); transform: translateY(-2px);
}

.footer-col h4 { color: var(--sand-50); margin-bottom: 16px; }
.footer-col p + p { margin-top: 14px; }
.footer-col a { transition: color .3s var(--ease-out); }
.footer-col a:hover { color: var(--rose-300); }

.hours { display: grid; gap: 9px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; }
.hours dt { color: var(--rose-100); }
.hours dd { color: var(--sand-50); font-variant-numeric: tabular-nums; }

.news-form {
  display: flex; gap: 8px; margin-top: 18px;
  padding: 6px; border-radius: var(--r-pill);
  background: rgba(251, 246, 244, .07);
  border: 1px solid rgba(233, 190, 204, .2);
  transition: border-color .35s var(--ease-out);
}
.news-form:focus-within { border-color: var(--rose-400); }
.news-form input {
  flex: 1; min-width: 0; border: 0; background: none;
  padding: 10px 14px; font-size: .9375rem; color: var(--sand-50);
}
.news-form input::placeholder { color: var(--rose-200); }
.news-form input:focus { outline: none; }
.news-form button {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--rose-400); color: var(--ink);
  transition: background-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.news-form button:hover { background: var(--sand-50); transform: translateX(2px); }
.news-form button svg { width: 16px; height: 16px; }
.news-msg { min-height: 1.4em; margin-top: 10px; font-size: .8125rem; color: var(--rose-300); }

.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding-block: 24px;
  border-top: 1px solid rgba(233, 190, 204, .14);
  font-size: .8125rem; color: var(--rose-100);
}
.footer-base nav { display: flex; gap: 22px; }
.footer-base a:hover { color: var(--rose-300); }

/* =========================================================
   Scroll reveal
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity .95s var(--ease-out) var(--reveal-delay, 0ms),
    transform .95s var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
[data-reveal="right"] { transform: translate3d(26px, 0, 0); }
[data-reveal="scale"] { transform: scale(.955); }

/* Image reveal.
   This deliberately does NOT use clip-path on the element itself:
   clip-path: inset(0 0 100%) collapses the element's visible area to zero,
   IntersectionObserver then reports 0% intersection, and the class that would
   un-clip it never gets added — the image stays invisible forever. A curtain
   on ::after wipes away instead, leaving the observed box its full size. */
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  position: relative;
}
[data-reveal="clip"]::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: var(--rose-100);
  transform: scaleY(1);
  transform-origin: 50% 100%;
  transition: transform 1.15s var(--ease-in-out) var(--reveal-delay, 0ms);
}
[data-reveal="clip"].is-in::after { transform: scaleY(0); }

[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal].is-in { will-change: auto; }

/* Split-text headline */
[data-split] .word {
  display: inline-block; overflow: hidden;
  padding-bottom: .14em; margin-bottom: -.14em;
  vertical-align: bottom;
}
[data-split] .word > span {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 62ms);
}
[data-split].is-in .word > span { transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
  .class-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sched-row { grid-template-columns: 84px minmax(0, 1fr) 118px 108px; gap: 12px; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { max-width: 520px; }
  .lead { max-width: none; }
  .scroll-cue { display: none; }
  .split { grid-template-columns: 1fr; }
  .split-media { max-width: 520px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .exp-grid { grid-template-columns: 1fr; }
  .exp-step { opacity: 1; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .price-card-featured { order: -1; }
}

@media (max-width: 720px) {
  :root { --header-h: 66px; }
  .header-actions .btn-solid { display: none; }
  .class-grid { grid-template-columns: 1fr; }
  .class-card-wide { grid-column: span 1; }
  .teacher-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .media-badge { right: 8px; }
  .sched-row {
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-areas:
      "time  name"
      "avail book";
    align-items: center;
    row-gap: 14px;
  }
  .sched-row .sched-time { grid-area: time; align-self: start; }
  .sched-row .sched-main { grid-area: name; }
  .sched-row .sched-avail { grid-area: avail; }
  .sched-row .btn { grid-area: book; }
}

@media (max-width: 460px) {
  .teacher-grid { grid-template-columns: 1fr; max-width: 340px; }
}

/* =========================================================
   Reduced motion — show everything, animate nothing
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="clip"]::after { transform: scaleY(0) !important; }
  [data-split] .word > span { transform: none !important; }
  .exp-glyph { opacity: 1; transform: none; }
  .exp-step { opacity: 1; }
  .marquee-track { animation: none; }
  .sched-row { opacity: 1; transform: none; }
}


/* ---------- Placeholder marker ----------
   Marks content that is invented and must be replaced with the studio's real
   copy before launch. Deliberately visible: a real business must never ship
   invented quotes or invented staff. Delete the element when filling it in. */
.placeholder-chip {
  display: inline-flex; align-items: center;
  padding: 4px 11px; margin-bottom: 12px;
  border: 1px dashed var(--rose-400);
  border-radius: var(--r-pill);
  background: var(--rose-50);
  color: var(--rose-ink);
  font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.quote figcaption .placeholder-chip { margin-bottom: 0; }

/* ---------- Google rating panel ---------- */
.rating-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(26px, 3.4vw, 40px) clamp(26px, 3.4vw, 44px);
  margin-bottom: clamp(20px, 2.6vw, 30px);
  background: var(--white);
  border: 1px solid var(--rose-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.rating-score { display: flex; align-items: center; gap: 16px; }
.rating-score b {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1;
  letter-spacing: -.03em; color: var(--rose-800);
  font-variant-numeric: tabular-nums;
}
.rating-score .stars {
  display: block; color: var(--pink-vivid);
  font-size: 1rem; letter-spacing: .16em;
}
.rating-count {
  display: block; margin-top: 4px;
  font-size: .8125rem; color: var(--muted); white-space: nowrap;
}
.rating-panel > p {
  color: var(--ink-soft); font-size: .9375rem;
  max-width: 44ch;
  padding-inline: clamp(0px, 2vw, 24px);
  border-inline: 1px solid var(--line);
  border-block: 0;
}
.rating-panel .btn { white-space: nowrap; }

@media (max-width: 900px) {
  .rating-panel { grid-template-columns: 1fr; text-align: left; }
  .rating-panel > p { border-inline: 0; padding-inline: 0; max-width: none; }
  .rating-panel .btn { justify-self: start; }
}


/* =========================================================
   Scroll overlap
   The hero pins to the viewport and the rest of the page rides up over it
   on its own rounded sheet. The hero recedes as it is covered.

   The pin only runs when the hero actually fits the viewport — a sticky
   element taller than the screen would freeze with its lower half
   unreachable. main.js measures the hero and puts .no-pin on <html> when
   it does not fit, which drops back to ordinary scrolling. That is also
   the reduced-motion path.
   ========================================================= */

.page-flow {
  position: relative;
  z-index: 1;
  background: var(--sand-100);
  box-shadow: 0 -20px 44px -26px rgba(46, 36, 41, .26);
}

/* The sheet's own edge is the boundary — no hairline on top of it. */
.page-flow > .marquee:first-child { border-top-color: transparent; }

html:not(.no-pin) .hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The hero deliberately does NOT fade or scale while it is covered. Fading it
   reads as "the hero disappears"; holding it at full strength reads as "the next
   section slides over it", which is the effect being asked for.
   --hero-p (0 -> 1, set in main.js) is only used to retire the scroll cue. */
html:not(.no-pin) .scroll-cue { opacity: calc(1 - var(--hero-p, 0) * 2.6); }

/* Once it is fully covered, stop painting it — the blurred blobs are
   expensive to keep compositing behind an opaque sheet. */
html:not(.no-pin) .hero.is-covered { visibility: hidden; }


/* =========================================================
   Mobile
   ========================================================= */

/* Phones and portrait tablets: the hero stacks to one column from 900px
   down, which makes it far too tall to pin. Compact it enough to fit one
   screen so the overlap runs here too, not just on desktop. */
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 18px); padding-bottom: 26px; }
  .hero-inner { gap: 22px; }
  .hero h1, .hero .display { font-size: clamp(2.05rem, 8.8vw, 3.4rem); }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero .lead { font-size: 1rem; line-height: 1.55; margin-top: 14px; }
  .hero-cta { margin-top: 20px; gap: 10px; }
  .hero-cta .btn { padding: 13px 20px; font-size: .875rem; }
  .hero-meta { margin-top: 20px; padding-top: 15px; gap: 5px 16px; font-size: .75rem; }
  .frame-hero { aspect-ratio: 16 / 10; }
  .hero-visual { max-width: none; }
  .float-card { left: 0; bottom: -16px; padding: 11px 16px 11px 14px; }
  .float-card strong { font-size: .875rem; }
}

/* The buttons were stacking full-width here, which cost a whole row of
   height the hero cannot spare. Keep them side by side. */
@media (max-width: 460px) {
  .hero-cta { flex-direction: row; flex-wrap: wrap; }
  .hero-cta .btn { width: auto; }
  .hero-cta .btn-ghost { padding-inline: 4px; }
}

/* Experience: the tall sticky illustration does not fit a phone, but
   dropping it entirely loses the sense of progress through the steps.
   Reuse the same markup as a compact sticky pill instead. */
@media (max-width: 900px) {
  /* The tall ring does not fit a phone. It used to reappear here as a bar
     pinned to the bottom of the viewport; the progress pill below now does
     that job for the whole page, so this simply stands down. */
  .exp-sticky { display: none; }
  .exp-step { opacity: 1; }
}


/* ---------- Language switch ----------
   Two words, not a dropdown: there are only ever two, and a dropdown would
   hide which one you are reading. It sits before the booking button because
   choosing a language comes before deciding anything else. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
}
.lang-btn {
  appearance: none;
  border: 0;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.is-on { background: var(--ink); color: var(--sand-50); }
.lang-btn:focus-visible { outline: 2px solid var(--rose-ink, var(--teal-ink)); outline-offset: 2px; }

/* Over the hero the header type is light, so the switch has to be too. Once
   the sheet has met the header it goes back to the light-ground treatment. */
.site-header:not(.is-stuck):not(.menu-open) .lang-switch {
  border-color: rgba(255, 252, 251, .34);
  background: rgba(255, 252, 251, .1);
}
.site-header:not(.is-stuck):not(.menu-open) .lang-btn { color: rgba(255, 252, 251, .82); }
.site-header:not(.is-stuck):not(.menu-open) .lang-btn:hover { color: var(--white); }
.site-header:not(.is-stuck):not(.menu-open) .lang-btn.is-on {
  background: var(--white); color: var(--ink);
}

.lang-switch--menu { width: max-content; margin: 0 0 18px; }

/* The header is tight on a phone; the switch lives in the menu there instead. */
@media (max-width: 900px) {
  .site-header .lang-switch { display: none; }
}
@media (min-width: 901px) {
  .lang-switch--menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-btn { transition: none; }
}


/* ---------- Scroll progress pill ----------
   The bar that used to live only inside Experience on a phone, promoted to
   the length of the page. The ring is genuine document progress; the counter
   is which of the marked stops you are at, and the four Experience steps are
   still counted individually so nothing the old bar said is lost.
   Fixed to the bottom, so it never sits over what is being read. */
.progress-pill {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 3vh, 26px);
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--r-pill);
  /* Deliberately a literal rather than --rose-900: this is glass over
     whatever section happens to be behind it, and it has to stay dark
     enough to carry light text over the pale sections as well as the dark. */
  background: rgba(92, 47, 64, .93);
  border: 1px solid rgba(233, 190, 204, .34);
  box-shadow: 0 12px 30px -12px rgba(31, 20, 26, .6);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.progress-pill.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

.progress-pill__art { width: 32px; height: 32px; flex: none; display: block; }
.progress-pill__track { color: rgba(240, 228, 226, .26); }
.progress-pill__ring {
  color: var(--rose-300);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--ring, 0));
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .18s linear;
}
.progress-pill__num {
  font-family: var(--font-display);
  font-size: .9375rem; font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.progress-pill__num i { font-style: normal; color: var(--rose-200); }
.progress-pill__sep { width: 1px; height: 13px; flex: none; background: rgba(240, 228, 226, .3); }
.progress-pill__label {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--rose-200);
  white-space: nowrap;
}
/* On the narrowest phones the label is the first thing to go, not the count. */
@media (max-width: 400px) {
  .progress-pill__sep, .progress-pill__label { display: none; }
  .progress-pill { padding-right: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The ring is scroll-linked state, not an animation, so it keeps tracking.
     Only the easing on it and on the pill entrance is dropped. */
  .progress-pill, .progress-pill__ring { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* The overlap itself still runs here — see measureHeroPin() in main.js.
     Only the scroll cue fade is suppressed. */
  .scroll-cue { transition: none; }
}


/* Per-step glyph — mobile only. The sticky stage covers desktop; here the
   artwork rides with its own step instead of floating over the column. */
.exp-step-glyph { display: none; }

@media (max-width: 900px) {
  .exp-step-glyph {
    display: block;
    width: 62px; height: 62px;
    margin: 14px 0 18px;
    color: var(--rose-300);
  }
  .exp-step-glyph * { stroke-width: 3.2; }
  .exp-step-index { margin-bottom: 0; }
}


/* =========================================================
   Hero — full bleed, exactly one screen

   Rebuilt so the scroll overlap actually reads. Two reasons the previous
   split-column hero fought it:
     1. It was ~890px of content, so on a short window it did not fit the
        viewport and the pin silently fell back to normal scrolling.
     2. Pale pink hero + near-white sheet meant the covering was invisible
        even when it did run.
   A dark full-bleed hero at 100svh fixes both: it always fits, and a
   near-white sheet climbing over it is unmistakable.
   ========================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(24px, 4vh, 72px));
  padding-bottom: clamp(72px, 9vh, 132px);
  background: var(--plum-900);
  color: var(--sand-50);
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-art { width: 100%; height: 100%; object-fit: cover; }

/* Keeps the left column dark enough to carry text whatever the photo is */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(40, 25, 32, .93) 0%,
      rgba(40, 25, 32, .82) 30%,
      rgba(40, 25, 32, .34) 56%,
      rgba(40, 25, 32, 0) 78%),
    linear-gradient(to top, rgba(40, 25, 32, .5), rgba(40, 25, 32, 0) 45%);
}
.hero-media .grain { opacity: .3; mix-blend-mode: overlay; }

/* One column now — the visual is the background, not a sibling */
.hero-inner {
  position: relative; z-index: 1;
  display: block;
}
.hero-copy { max-width: 40rem; }

.hero .eyebrow { color: var(--rose-300); }
.hero h1, .hero .display { color: var(--sand-50); }
.hero .lead { color: rgba(255, 252, 251, .82); }

.hero .btn-solid {
  background: var(--sand-100); color: var(--plum-900);
  box-shadow: 0 12px 30px -14px rgba(20, 10, 15, .8);
}
.hero .btn-solid:hover { background: var(--white); }
.hero .btn-ghost { color: var(--sand-50); }
.hero .btn-ghost:hover { color: var(--rose-300); }

.hero-meta {
  border-top-color: rgba(255, 252, 251, .22);
  color: rgba(255, 252, 251, .74);
}
.hero-meta li::before { background: var(--rose-400); }

.hero .float-card {
  position: absolute;
  right: clamp(20px, 5vw, 48px);
  bottom: clamp(84px, 11vh, 132px);
  left: auto;
  z-index: 1;
}

.hero .scroll-cue { color: rgba(255, 252, 251, .66); }
.hero .scroll-cue-line { background: rgba(255, 252, 251, .3); }
.hero .scroll-cue-line::after { background: var(--rose-300); }

/* The header sits on the dark hero until it picks up its own background */
.site-header:not(.is-stuck):not(.menu-open) { color: var(--sand-50); }
.site-header:not(.is-stuck):not(.menu-open) .brand-mark { color: var(--rose-300); }
.site-header:not(.is-stuck):not(.menu-open) .nav a { color: rgba(255, 252, 251, .82); }
.site-header:not(.is-stuck):not(.menu-open) .nav a:hover,
.site-header:not(.is-stuck):not(.menu-open) .nav a.is-active { color: var(--sand-50); }
.site-header:not(.is-stuck):not(.menu-open) .nav a::after { background: var(--rose-300); }
.site-header:not(.is-stuck):not(.menu-open) .btn-solid {
  background: var(--sand-100); color: var(--plum-900); box-shadow: none;
}
.site-header:not(.is-stuck):not(.menu-open) .btn-solid:hover { background: var(--white); }
.site-header:not(.is-stuck):not(.menu-open) .menu-toggle { border-color: rgba(255, 252, 251, .34); }
.site-header:not(.is-stuck):not(.menu-open) .menu-toggle span { background: var(--sand-50); }

@media (max-width: 900px) {
  .hero {
    padding-top: calc(var(--header-h) + 20px);
    padding-bottom: clamp(76px, 12vh, 120px);
  }
  .hero-copy { max-width: none; }
  .hero-scrim {
    background:
      linear-gradient(165deg,
        rgba(40, 25, 32, .9) 0%,
        rgba(40, 25, 32, .74) 45%,
        rgba(40, 25, 32, .42) 100%),
      linear-gradient(to top, rgba(40, 25, 32, .6), rgba(40, 25, 32, 0) 50%);
  }
  .hero .float-card {
    right: auto;
    left: clamp(20px, 5vw, 48px);
    bottom: clamp(72px, 10vh, 110px);
  }
}

/* Headline keyed to viewport HEIGHT as well as width, so a short window
   shrinks it rather than pushing the hero past one screen and losing the pin. */
.hero h1, .hero .display { font-size: clamp(2.05rem, min(6.6vw, 10vh), 5.4rem); }


/* Header swaps treatment when the sheet reaches it — ease the colours across
   so it reads as a transition rather than a snap. */
.brand-word, .brand-mark, .menu-toggle { transition: color .45s var(--ease-out), border-color .45s var(--ease-out); }
.menu-toggle span { transition: background-color .45s var(--ease-out), transform .4s var(--ease-out), opacity .3s var(--ease-out); }

/* =========================================================
   Hero booking panel
   Sits in the hero's right column. Its height is deliberately capped —
   the hero has to stay inside one screen or the scroll pin drops out,
   and a 13" laptop is the tight case.
   ========================================================= */

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .68fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}
.hero-copy { max-width: none; }

.hero-book {
  width: 100%;
  max-width: 24rem;
  margin-left: auto;
  padding: clamp(16px, 1.5vw, 22px);
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-lg);
  box-shadow: 0 34px 74px -32px rgba(20, 10, 15, .85);
}

.hero-book-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.hero-book-eyebrow {
  font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose-700);
}
.hero-book-day {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -.01em; margin-top: 3px; color: var(--ink);
}
.hero-book-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

.hero-slot {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center; gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hero-slot:last-child { border-bottom: 0; }
.hero-slot-main { min-width: 0; }
.hero-slot-time {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.hero-slot-name {
  font-size: .875rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-slot-avail {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px; font-size: .75rem; font-weight: 500;
}
.hero-slot-avail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.hero-slot-avail.open    { color: var(--status-open); }
.hero-slot-avail.filling { color: var(--status-filling); }
.hero-slot-avail.low     { color: var(--status-low); }
.hero-slot-avail.full    { color: var(--muted); }
.hero-slot-avail.open::before    { background: var(--status-open); }
.hero-slot-avail.filling::before { background: var(--status-filling); }
.hero-slot-avail.low::before     { background: var(--status-low); }
.hero-slot-avail.full::before    { background: var(--subtle); }

.hero-slot-book {
  padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--rose-700); color: var(--white);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  transition: background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.hero-slot-book:hover { background: var(--rose-800); transform: translateY(-1px); }
.hero-slot-book.is-full {
  background: var(--sand-200); color: var(--subtle);
  pointer-events: none;
}

.hero-book-all {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: .8125rem; font-weight: 600; color: var(--rose-700);
}
.hero-book-all svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.hero-book-all:hover { color: var(--rose-800); }
.hero-book-all:hover svg { transform: translateX(4px); }

/* Keep the right side from going fully transparent, so the white panel has
   something to sit against rather than dissolving into the cream curve. */
.hero-scrim {
  background:
    linear-gradient(100deg,
      rgba(40, 25, 32, .93) 0%,
      rgba(40, 25, 32, .82) 30%,
      rgba(40, 25, 32, .46) 58%,
      rgba(40, 25, 32, .3) 100%),
    linear-gradient(to top, rgba(40, 25, 32, .5), rgba(40, 25, 32, 0) 45%);
}

/* 13" laptops: narrower gap and a slightly tighter panel so the hero still
   resolves inside one screen. */
@media (max-width: 1200px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(296px, .72fr); gap: clamp(24px, 3vw, 40px); }
  .hero-book { max-width: 22rem; padding: 16px; }
  .hero-slot { padding: 9px 0; gap: 9px; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 20px; }
  .hero-book { max-width: none; margin-left: 0; }
  /* Two rows is enough on a phone — a third pushes the hero past one screen */
  .hero-slot:nth-child(n + 3) { display: none; }
  .hero-book-all { margin-top: 10px; padding-top: 10px; }
  .hero-scrim {
    background:
      linear-gradient(165deg,
        rgba(40, 25, 32, .9) 0%,
        rgba(40, 25, 32, .76) 45%,
        rgba(40, 25, 32, .5) 100%),
      linear-gradient(to top, rgba(40, 25, 32, .6), rgba(40, 25, 32, 0) 50%);
  }
}


/* Phones: the panel costs ~270px, which pushed the hero past one screen and
   cost the pin. Reclaim it from the bottom padding (the scroll cue is hidden
   here anyway) and from the panel's own spacing, rather than dropping a row. */
@media (max-width: 900px) {
  .hero { padding-bottom: clamp(44px, 7vh, 88px); }
  .hero-book { padding: 14px; }
  .hero-book-head { padding-bottom: 10px; }
  .hero-book-day { font-size: 1rem; }
  .hero-slot { padding: 8px 0; }
  .hero-book-all { margin-top: 9px; padding-top: 9px; }
}

/* Still ~8px over on a 390x780 viewport. Reclaim it from the copy's vertical
   rhythm so the fit has real headroom instead of landing on the boundary. */
@media (max-width: 900px) {
  .hero-inner { gap: 16px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero-cta { margin-top: 16px; }
  .hero-meta { margin-top: 16px; padding-top: 12px; }
}

/* Under ~800px of viewport the two rows will not fit alongside the copy.
   One "next class" row still reads as a booking panel. */
@media (max-width: 900px) and (max-height: 800px) {
  .hero-slot:nth-child(n + 2) { display: none; }
}


/* ---------- The studio section: four stark lines ----------
   Set as one <h2> so the section keeps a real heading in the outline, with the
   lines as blocks inside it. Sized to match the Stillness build now that they
   own the full width rather than half of a split. The accent var differs per
   palette, so the turn line uses a CSS variable fallback. */
.stark {
  display: grid;
  gap: clamp(8px, 1.2vh, 16px);
  margin: 0;
  max-width: 22ch;
}
.stark span {
  display: block;
  font-size: clamp(1.9rem, 5.5vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.stark__turn {
  color: var(--rose-ink, var(--teal-700));
  font-style: italic;
}


/* Phones: a condensed booking panel so the hero still offers a booking path on
   small screens. One row, no footer link, no Live chip, tighter everything.
   Dropping the hero lead paragraph is what freed the room for this. */
@media (max-width: 900px) and (max-height: 800px) {
  .hero-book { padding: 12px 14px; }
  .hero-book-head { padding-bottom: 8px; }
  .hero-book-day { font-size: .9375rem; }
  .hero-book-eyebrow { font-size: .5625rem; }
  .hero-book-live { display: none; }
  .hero-slot { padding: 7px 0; gap: 9px; grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .hero-slot-time { font-size: .9375rem; }
  .hero-slot-name { font-size: .8125rem; }
  .hero-slot-book { padding: 6px 12px; font-size: .6875rem; }
  .hero-book-all { display: none; }
  .hero-slot:nth-child(n + 2) { display: none; }
}

/* Below this there is genuinely no room for both the headline and a panel. */
@media (max-width: 900px) and (max-height: 560px) {
  .hero-book { display: none; }
}


/* ---------- The turn: the answer to the stark lines above ----------
   Sits on the page ground rather than the studio section's raised sand, so the
   two read as statement then response instead of one long block. */
.turn__head {
  font-size: clamp(2.05rem, 5vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  max-width: 18ch;
}


/* ---------- The room plan ----------
   Ten beds seen from above, and you can count them: that is the argument. On a
   wide screen the whole rack fills together, as one class arriving at once. */
.turn__grid { margin-top: clamp(32px, 4.5vw, 56px); }

/* The plan answers the stark lines above it and Classes answers the plan. Two
   full section gaps pushed the three apart into unrelated pages; these close
   the joins on either side of the plan without touching the global rhythm. */
.turn { padding-bottom: clamp(48px, 5.5vw, 76px); }
.classes { padding-top: clamp(48px, 5.5vw, 76px); }

.roomplan { margin: 0; }
.roomplan__floor {
  display: grid;
  /* Ten across the full shell: it reads as a studio floor seen from above,
     and ten in a line is easier to count than a 5x2 block. */
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(8px, 0.9vw, 14px);
  padding: clamp(16px, 1.6vw, 24px);
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.bed {
  position: relative;
  overflow: hidden;                       /* clips the level to the capsule */
  aspect-ratio: 1 / 2.35;
  border-radius: var(--r-pill);
  border: 1.25px solid var(--rose-300, var(--teal-300));
  color: var(--rose-400, var(--teal-400));
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
/* --f is this bed's own 0-1 fill, set per bed in main.js. No easing on the
   height: it tracks the wheel directly, and a transition here would lag it. */
.bed__fill {
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  height: calc(var(--f, 0) * 100%);
  background: var(--rose-600, var(--teal-600));
  border-radius: inherit;
  will-change: height;
}
/* the carriage, so it reads as a reformer rather than a pill */
/* The carriage sits above the level so it stays readable either side of it. */
.bed::after {
  content: "";
  position: absolute; left: 24%; right: 24%; top: 32%;
  height: 1.25px; border-radius: 2px; z-index: 2;
  background: currentColor; opacity: .75;
}
.bed.is-lit {
  border-color: var(--rose-600, var(--teal-600));
  transform: translateY(-3px);
}

.roomplan__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sc-4, 16px); flex-wrap: wrap;
  margin-top: 18px;
}
.roomplan__count { font-size: .875rem; color: var(--muted); margin: 0; }
.roomplan__count b {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 500;
  letter-spacing: -.02em; color: var(--rose-800, var(--teal-800));
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.roomplan__full {
  margin: 0; font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--rose-700, var(--teal-700));
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.roomplan.is-full .roomplan__full { opacity: 1; transform: none; }

.ticks--stack { margin-top: 0; gap: clamp(14px, 2vw, 20px); }

/* The phone keeps the five-bed rack it already had: ten capsules across a
   360px screen are hairlines, and the one-at-a-time fill below needs a bed
   wide enough to watch. */
@media (max-width: 760px) {
  .roomplan__floor { grid-template-columns: repeat(5, 1fr); }
  .bed--wide { display: none; }
}
@media (max-width: 460px) {
  .roomplan__floor { gap: 7px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The fill still tracks the scroll: that is scroll-linked state, not an
     animation, so it stays. Only the easing and the lift are motion, and the
     global reduced-motion rule already collapses the transition duration. */
  .bed { transition: none; }
  .bed.is-lit { transform: none; }
}


/* The hero CTA sits tighter than the page default: it is the first thing under
   a very large headline, and the full-size button read as heavy there. */
.hero .btn { padding: 10px 19px; font-size: .8125rem; letter-spacing: 0; }
.hero .btn-ghost { padding-inline: 4px; }
.hero .btn svg { width: 13px; height: 13px; }
@media (max-width: 900px) {
  .hero .btn { padding: 9px 16px; font-size: .78125rem; }
}