@property --field { syntax: '<color>'; inherits: true; initial-value: #efb24a; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #ffe09a; }
@property --edge { syntax: '<color>'; inherits: true; initial-value: #d08d30; }
@property --deep { syntax: '<color>'; inherits: true; initial-value: #2a1606; }
@property --lit { syntax: '<color>'; inherits: true; initial-value: #ffd98a; }
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }

[data-room="reformer"] { --field: #efb24a; --glow: #ffe3a0; --edge: #d3902f; --deep: #2a1606; --lit: #ffd98a; }
[data-room="gati"] { --field: #ea9029; --glow: #ffc974; --edge: #cc7218; --deep: #2b1304; --lit: #ffbf6b; }
[data-room="heat"] { --field: #e2682c; --glow: #ffa468; --edge: #c8501c; --deep: #2c0e05; --lit: #ff9f68; }
[data-room="mat"] { --field: #e6a688; --glow: #ffd9c2; --edge: #cd8768; --deep: #2c1410; --lit: #ffc8ab; }
[data-room="yoga"] { --field: #f5e4bd; --glow: #fff7df; --edge: #e2c88f; --deep: #2a1a0c; --lit: #fbeac2; }

:root {
  --ink: #1e0f06;
  --cream: #fff1d6;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --melt: 3s;
  --pad: clamp(18px, 3.4vw, 52px);
  --soft: cubic-bezier(.45, .05, .35, 1);
}

html {
  scroll-behavior: smooth;
  background: var(--field);
  transition: --field var(--melt) var(--soft), --glow var(--melt) var(--soft), --edge var(--melt) var(--soft), --deep var(--melt) var(--soft), --lit var(--melt) var(--soft);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(15px, 1.12vw, 17px)/1.5 var(--sans);
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: italic; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; }
cite { font-style: normal; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.sky__layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(95% 85% at 34% 46%, var(--glow) 0%, var(--field) 52%, var(--edge) 100%);
}
.sky__layer--next {
  --mx: 50%;
  --my: 50%;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--r) - 46vmax), transparent var(--r));
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 calc(var(--r) - 46vmax), transparent var(--r));
  animation: bloom var(--melt) var(--soft) forwards;
}
@keyframes bloom { to { --r: 195vmax; } }
.sky__flame { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light; }
.sky__flame--a { width: 90vmax; height: 90vmax; left: -22vmax; top: -30vmax; background: radial-gradient(circle, rgba(255, 244, 214, .85), rgba(255, 244, 214, 0) 68%); }
.sky__flame--b { width: 70vmax; height: 70vmax; right: -14vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(255, 226, 170, .7), rgba(255, 226, 170, 0) 66%); }

.top {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: 16px var(--pad);
}
.top__name { font: 400 clamp(22px, 2vw, 30px)/1 var(--serif); text-decoration: none; margin-right: auto; }
.top__where { font-size: 14px; }
.top__tel { font-weight: 500; font-size: 14px; }

.btn {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 34px color-mix(in oklab, var(--glow) 60%, transparent);
  transition: box-shadow 1.6s var(--soft), background-color 1.6s var(--soft);
}
.btn:hover { background: #3a1f0d; box-shadow: 0 0 60px var(--glow); }
.btn--small { padding: 10px 18px; font-size: 14px; }

.print { box-shadow: 0 18px 60px rgba(40, 16, 4, .34), 0 0 0 1px rgba(255, 236, 196, .28); border-radius: 3px; }

.hero {
  position: relative;
  min-height: max(100svh, 700px);
  padding: 74px var(--pad) 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
}
.hero__team {
  position: absolute;
  right: -18vw;
  bottom: 0;
  height: 96%;
  width: auto;
  max-width: none;
  mix-blend-mode: multiply;
  filter: brightness(1.42) contrast(1.06) saturate(.85);
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 19%, #000 82%, transparent 96%), linear-gradient(180deg, transparent 0, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 4%, #000 19%, #000 82%, transparent 96%), linear-gradient(180deg, transparent 0, #000 16%);
  mask-composite: intersect;
}
.hero__title {
  position: relative;
  font-size: clamp(82px, min(13vw, 25vh), 240px);
  line-height: .86;
}
.hero__title span { display: block; }
.hero__offer {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 330px);
  align-items: end;
  column-gap: 26px;
  row-gap: 14px;
  max-width: 620px;
}
.hero__pack { grid-column: 1 / -1; font-weight: 600; }
.hero__price { font: 400 clamp(64px, 6.6vw, 104px)/.86 var(--serif); }
.hero__offer .btn { justify-self: start; }
.hero__stars { align-self: center; }
.hero__stars strong { font: 400 28px/1 var(--serif); }

.chooser {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  min-height: 100svh;
  padding: clamp(46px, 6vw, 84px) var(--pad);
  color: var(--lit);
  background:
    radial-gradient(62% 92% at 74% 50%, var(--field) 0%, color-mix(in oklab, var(--field) 62%, var(--deep)) 42%, transparent 82%),
    radial-gradient(60% 70% at 4% 100%, color-mix(in oklab, var(--edge) 46%, var(--deep)) 0%, transparent 72%),
    var(--deep);
}
.chooser__words { display: flex; flex-direction: column; justify-content: center; }
.chooser__ask { font-size: clamp(30px, 3vw, 46px); line-height: 1.04; margin-bottom: clamp(14px, 2vw, 28px); color: var(--cream); }
.phrase {
  display: block;
  padding: clamp(2px, .3vw, 5px) 0;
  text-decoration: none;
  color: var(--lit);
  opacity: .72;
  transition: opacity 2s var(--soft), text-shadow 2.6s var(--soft);
}
.phrase:hover, .phrase:focus-visible { opacity: .92; }
.phrase[aria-current="true"] { opacity: 1; text-shadow: 0 0 44px var(--field), 0 0 12px color-mix(in oklab, var(--field) 50%, transparent); }
.phrase__line { display: block; font: italic 400 clamp(46px, 6.5vw, 108px)/.96 var(--serif); letter-spacing: -.015em; }
.phrase__name { display: block; font-size: 14px; font-weight: 500; color: var(--cream); white-space: nowrap; }
.chooser__status { margin-top: clamp(16px, 2vw, 26px); font-size: 15px; color: var(--cream); }
.chooser__toggle { font: inherit; color: var(--lit); background: none; border: 0; padding: 8px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.stage { position: relative; min-height: 0; }
.stage__room { position: relative; margin-bottom: 24px; }
.stage__room figcaption { color: var(--cream); font: italic 400 22px/1.1 var(--serif); margin-top: 10px; }
.js .stage { min-height: 640px; }
.js .stage__room { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 3s var(--soft), visibility 0s linear 3s; }
.js .stage__room.is-on { opacity: 1; visibility: visible; transition: opacity 3s var(--soft), visibility 0s; }
.js .stage__big, .js .stage__small { position: absolute; object-fit: cover; }
.js .stage__room figcaption { position: absolute; left: 0; bottom: 0; margin: 0; font-size: clamp(24px, 2.2vw, 34px); }
.stage__big { box-shadow: 0 0 120px color-mix(in oklab, var(--field) 55%, transparent), 0 24px 70px rgba(10, 4, 0, .5); border-radius: 3px; }
.stage__small { box-shadow: 0 18px 50px rgba(10, 4, 0, .55), 0 0 0 1px rgba(255, 236, 196, .3); border-radius: 3px; }
.stage__room--reformer .stage__big { top: 8%; right: 0; width: 100%; aspect-ratio: 3 / 2; height: auto; }
.stage__room--reformer .stage__small { left: -6%; bottom: 8%; width: 24%; aspect-ratio: 3 / 4; height: auto; }
.stage__room--gati .stage__big { top: 0; right: 4%; height: 90%; width: auto; aspect-ratio: 754 / 974; max-width: 80%; box-shadow: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent), linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent), linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent); mask-composite: intersect; }
.stage__room--gati .stage__small { left: 0; bottom: 14%; width: 36%; aspect-ratio: 536 / 470; height: auto; }
.stage__room--heat .stage__big { top: 2%; right: 0; width: min(500px, 80%); aspect-ratio: 536 / 470; height: auto; }
.stage__room--heat .stage__small { left: 0; bottom: 10%; width: min(330px, 50%); aspect-ratio: 536 / 470; height: auto; }
.stage__room--mat .stage__big { top: 0; right: 6%; height: 92%; width: auto; aspect-ratio: 2 / 3; max-width: 78%; }
.stage__room--mat .stage__small { left: 0; bottom: 14%; width: 28%; aspect-ratio: 2 / 3; height: auto; }
.stage__room--yoga .stage__big { top: 2%; right: 0; width: 100%; aspect-ratio: 2000 / 1566; height: auto; }
.stage__room--yoga .stage__small { left: -5%; bottom: 13%; width: 54%; aspect-ratio: 1086 / 430; height: auto; }

.moves__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: end;
  gap: 24px;
  padding: clamp(40px, 5vw, 70px) var(--pad) clamp(24px, 3vw, 40px);
}
.moves__head h2 { font-size: clamp(50px, 7.6vw, 124px); line-height: .92; }
.moves__head em { display: block; }
.moves__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }

.card {
  position: relative;
  min-height: 500px;
  padding: clamp(24px, 3vw, 44px) var(--pad);
  background: radial-gradient(120% 110% at 26% 28%, var(--glow) 0%, var(--field) 54%, var(--edge) 100%);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 60% at 22% 26%, rgba(255, 246, 222, .55), rgba(255, 246, 222, 0) 72%);
  mix-blend-mode: soft-light;
}
.card > * { position: relative; z-index: 1; }
.card h3 { font-size: clamp(54px, 7vw, 116px); line-height: .92; margin-bottom: 14px; }
.card__text { max-width: 44ch; display: flex; flex-direction: column; gap: 10px; }
.card__say { font: italic 400 clamp(30px, 3vw, 44px)/1 var(--serif); }
.card__big { font: 400 clamp(32px, 3.5vw, 56px)/1.02 var(--serif); }
.card__classes { font-weight: 500; font-size: 14px; }
.card__link { align-self: flex-start; font-weight: 600; padding: 8px 0; text-underline-offset: 4px; }

.card--reformer { grid-column: span 7; }
.card--reformer h3 { white-space: nowrap; }
.card--reformer .card__text { max-width: 290px; }
.card__video { position: absolute !important; right: var(--pad); bottom: 40px; width: 50%; aspect-ratio: 3 / 2; overflow: hidden; }
.card__video video { width: 100%; height: 100%; object-fit: cover; transition: opacity 1.6s var(--soft); }
.card__video video.is-out { opacity: 0; }
.card__shot { position: absolute !important; object-fit: cover; }
.card__shot--class { right: 2.4%; bottom: -46px; width: 19%; aspect-ratio: 3 / 4; height: auto; z-index: 4 !important; object-position: 50% 30%; }

.card--gati { grid-column: span 5; }
.card--gati .card__text { max-width: 280px; }
.card__shot--bike { right: 0; top: 0; width: 50%; height: 100%; object-position: 62% 50%; mix-blend-mode: multiply; z-index: 0 !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }

.card--heat { grid-column: span 6; }
.card--heat .card__text { max-width: 240px; }
.card__shot--amber { right: 3%; top: 40px; width: min(390px, 53%); aspect-ratio: 536 / 470; height: auto; }
.card__shot--hot { right: 26%; bottom: 34px; width: min(260px, 34%); aspect-ratio: 536 / 470; height: auto; z-index: 2 !important; }

.card--mat { grid-column: span 6; }
.card--mat .card__text { max-width: 280px; }
.card__shot--balls { right: 5%; top: -44px; height: calc(100% + 8px); width: 46%; object-position: 62% 22%; z-index: 2 !important; }

.card--yoga { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px; min-height: 420px; }
.card--yoga .card__text { max-width: 560px; }
.card__shot--white { position: relative !important; width: 100%; height: 100%; max-height: 500px; margin-top: -70px; z-index: 3 !important; }

.said {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: clamp(20px, 2.4vw, 36px) clamp(26px, 4vw, 60px);
  padding: clamp(44px, 4.4vw, 70px) var(--pad);
  background: radial-gradient(90% 80% at 18% 8%, color-mix(in oklab, var(--field) 72%, #fff4dc) 0%, #fff0d2 72%);
}
.said__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.said h2 { font-size: clamp(52px, 6.8vw, 112px); line-height: .92; }
.said__score { text-align: right; }
.said__score strong { display: block; font: 400 clamp(62px, 7vw, 112px)/.86 var(--serif); }
.said__score span { font-size: 14px; }
.said__photo--duo { grid-row: 2; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.said__lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.said__lead p { font: 400 clamp(29px, 2.75vw, 44px)/1.1 var(--serif); }
.said__lead cite { display: block; margin-top: 14px; font-weight: 600; }
.said__rest { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.said__rest blockquote { background: color-mix(in oklab, var(--field) 38%, #fff6e2); padding: 20px 22px; border-radius: 3px; box-shadow: 0 10px 40px color-mix(in oklab, var(--edge) 30%, transparent); }
.said__rest cite { display: block; margin-top: 10px; font-weight: 600; }

.hosts { padding: clamp(40px, 5vw, 70px) var(--pad); }
.hosts h2 { font-size: clamp(30px, 3vw, 46px); margin-bottom: 14px; }
.hosts__run { font: italic 400 clamp(42px, 5.4vw, 88px)/1.06 var(--serif); }
.hosts__run span { white-space: nowrap; margin-right: .22em; }
.hosts__run small { font: 500 clamp(12px, .95vw, 14px)/1 var(--sans); white-space: normal; letter-spacing: 0; }

.visit {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  background: radial-gradient(70% 90% at 34% 40%, color-mix(in oklab, var(--field) 44%, var(--deep)) 0%, var(--deep) 76%);
  color: var(--cream);
}
.visit__candle { position: relative; overflow: hidden; min-height: 640px; }
.visit__candle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.visit__candle figcaption { position: absolute; left: var(--pad); right: var(--pad); bottom: 24px; font: italic 400 clamp(22px, 1.9vw, 30px)/1.14 var(--serif); color: var(--cream); text-shadow: 0 2px 16px #000; }
.visit__notes { position: relative; padding: clamp(46px, 5vw, 76px) var(--pad); }
.visit__notes h2 { font-size: clamp(50px, 6.2vw, 102px); line-height: .92; color: var(--lit); margin-bottom: clamp(18px, 2vw, 30px); }
.visit__notes ol { display: grid; gap: 14px; max-width: 54ch; }
.visit__notes strong { font: 400 clamp(23px, 1.9vw, 30px)/1.1 var(--serif); display: block; color: var(--lit); }
.visit__lounge { width: 62%; margin: 28px -3% 0 auto; aspect-ratio: 1086 / 430; }

.close {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(56px, 6vw, 90px) var(--pad) clamp(40px, 4vw, 60px);
}
.close h2 { font-size: clamp(76px, 10.4vw, 176px); line-height: .84; }
.close h2 em { display: block; }
.close__offer { display: grid; grid-template-columns: auto minmax(0, 300px); align-items: end; gap: 12px 24px; margin: 28px 0; }
.close__price { font: 400 clamp(60px, 6vw, 96px)/.86 var(--serif); }
.close__offer .btn { grid-column: 1 / -1; justify-self: start; }
.close__where { font-style: normal; display: grid; gap: 6px; }
.close__tel { font: 400 clamp(34px, 3.2vw, 50px)/1.05 var(--serif); }
.close__photos { position: relative; min-height: 460px; }
.close__room { position: absolute; top: 0; right: 0; width: 92%; aspect-ratio: 3 / 2; object-fit: cover; }
.close__face { position: absolute; left: 0; bottom: 0; width: 66%; aspect-ratio: 3 / 2; object-fit: cover; }

.dock { position: fixed; z-index: 20; right: 12px; top: 50%; transform: translateY(-50%); }
.dock__glows { display: flex; flex-direction: column; gap: 2px; }
.glow { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.glow span { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, var(--glow), var(--field) 58%, var(--edge)); box-shadow: 0 0 0 1px rgba(30, 15, 6, .45), 0 0 16px var(--field); transition: width 2s var(--soft), height 2s var(--soft), box-shadow 2s var(--soft); }
.glow[aria-pressed="true"] span { width: 28px; height: 28px; box-shadow: 0 0 0 2px var(--cream), 0 0 34px 8px var(--field); }
.glow b { position: absolute; right: 46px; padding: 3px 9px; border-radius: 99px; font: 500 13px/1.3 var(--sans); white-space: nowrap; background: var(--ink); color: var(--cream); opacity: 0; pointer-events: none; transition: opacity .9s var(--soft); }
.glow:hover b, .glow:focus-visible b { opacity: 1; }
.stickycta { display: none; }

.js-motion [data-reveal] { opacity: 0; transition: opacity 2.2s var(--soft); }
.js-motion [data-reveal].is-lit { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .sky__flame--a { animation: flicker-a 11s ease-in-out infinite; }
  .sky__flame--b { animation: flicker-b 17s ease-in-out infinite; }
  .card::after { animation: flicker-a 13s ease-in-out infinite; }
  .card--gati::after { animation-delay: -3s; animation-duration: 15s; }
  .card--heat::after { animation-delay: -6s; animation-duration: 11s; }
  .card--mat::after { animation-delay: -9s; animation-duration: 17s; }
  .card--yoga::after { animation-delay: -2s; animation-duration: 19s; }
  .hero__team, .slow { animation: breathe 34s ease-in-out infinite alternate; transform-origin: 62% 70%; }
  .stage__big { animation: breathe 28s ease-in-out infinite alternate; }
}
@keyframes flicker-a {
  0%, 100% { opacity: .8; }
  17% { opacity: 1; }
  23% { opacity: .86; }
  41% { opacity: .98; }
  58% { opacity: .74; }
  66% { opacity: .92; }
  83% { opacity: .82; }
}
@keyframes flicker-b {
  0%, 100% { opacity: .7; transform: translateY(0); }
  31% { opacity: 1; transform: translateY(-2vmax); }
  47% { opacity: .78; }
  72% { opacity: .96; transform: translateY(1vmax); }
}
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; transition: none; }
  .sky__layer--next { animation: none; mask-image: none; -webkit-mask-image: none; }
  .js .stage__room, .js .stage__room.is-on { transition: none; }
}

@media (max-width: 1000px) {
  .top__where { display: none; }
  .chooser { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .js .stage { min-height: 78vw; order: -1; }
  .moves__head { grid-template-columns: minmax(0, 1fr); }
  .card--reformer, .card--gati, .card--heat, .card--mat { grid-column: span 12; }
  .said { grid-template-columns: minmax(0, 1fr); }
  .said__photo--duo, .said__lead, .said__rest { grid-column: 1; grid-row: auto; }
  .visit { grid-template-columns: minmax(0, 1fr); }
  .close { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  body { padding-bottom: 68px; }
  .top { padding: 12px var(--pad); }
  .top__tel { margin-left: auto; }
  .top__name { margin-right: 0; }
  .top .btn--small { display: none; }

  .hero { min-height: calc(100svh - 68px); padding: 56px var(--pad) 16px; }
  .hero__title { font-size: 21vw; }
  .hero__team { right: -48vw; bottom: 16%; height: 54%; -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 34%); mask-image: linear-gradient(180deg, transparent 12%, #000 34%); }
  .hero__offer { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 8px; max-width: none; background: var(--deep); color: var(--cream); padding: 16px; border-radius: 4px; box-shadow: 0 0 50px color-mix(in oklab, var(--glow) 55%, transparent); }
  .hero__pack { color: var(--lit); }
  .hero__price { font-size: 58px; color: var(--lit); }
  .hero__terms { font-size: 14px; line-height: 1.32; }
  .hero__offer .btn { background: var(--lit); color: var(--ink); padding: 11px 18px; font-size: 15px; justify-self: start; text-align: center; }
  .hero__stars { font-size: 13px; line-height: 1.2; }
  .hero__stars strong { font-size: 24px; }

  .chooser { padding: 28px var(--pad) 22px; gap: 10px; }
  .js .stage { min-height: 86vw; }
  .chooser__ask { margin-bottom: 8px; }
  .phrase__line { font-size: 12.4vw; }
  .phrase__name { font-size: 13px; }
  .chooser__status { margin-top: 10px; font-size: 14px; }

  .moves__head { padding: 30px var(--pad) 16px; gap: 8px; }
  .moves__head h2 { font-size: 14vw; }
  .card, .card--gati, .card--heat, .card--mat { min-height: 0; padding: 20px var(--pad); }
  .card h3 { font-size: 16vw; margin-bottom: 4px; }
  .card--reformer h3 { white-space: normal; }
  .card__text { gap: 5px; }
  .card__classes { font-size: 13px; line-height: 1.3; }
  .card__text, .card--reformer .card__text, .card--gati .card__text, .card--heat .card__text, .card--mat .card__text { max-width: none; }
  .card__video { position: relative !important; right: auto; bottom: auto; width: 100%; aspect-ratio: 2 / 1; margin-top: 10px; }
  .card__shot { position: relative !important; right: auto; top: auto; bottom: auto; margin-top: 10px; }
  .card__shot--class { display: none; }
  .card__shot--bike { width: calc(100% + var(--pad) * 2); max-width: none; margin: 8px calc(var(--pad) * -1) -20px; height: 170px; object-position: 50% 62%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%); mask-image: linear-gradient(180deg, transparent 0, #000 34%); }
  .card--heat { display: grid; grid-template-columns: 58% 42%; align-items: end; }
  .card--heat .card__text { grid-column: 1 / -1; }
  .card__shot--amber { width: 100%; }
  .card__shot--hot { width: 118%; margin: 0 0 12px -18%; }
  .card__shot--balls { width: 100%; height: auto; aspect-ratio: 16 / 11; object-position: 60% 16%; }
  .card--yoga { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .card__shot--white { margin-top: 10px; height: auto; aspect-ratio: 16 / 10; }

  .said { padding: 32px var(--pad); gap: 14px; }
  .said__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .said h2 { font-size: 15vw; }
  .said__score { display: flex; align-items: baseline; gap: 10px; text-align: left; }
  .said__score strong { font-size: 15vw; }
  .said__photo--duo { aspect-ratio: 16 / 9; }
  .said__lead p { font-size: 24px; line-height: 1.12; }
  .said__rest { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad) 14px; }
  .said__rest blockquote { flex: 0 0 84%; scroll-snap-align: center; padding: 14px 16px; font-size: 14px; line-height: 1.38; }

  .hosts { padding: 28px var(--pad); }
  .hosts h2 { font-size: 26px; }
  .hosts__run { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 9.6vw; line-height: 1; }
  .hosts__run span { white-space: normal; margin: 0; }
  .hosts__run small { display: block; margin-top: 3px; line-height: 1.2; }

  .visit__candle { min-height: 0; }
  .visit__candle img { position: relative; height: 74vw; }
  .visit__candle figcaption { position: static; padding: 14px var(--pad) 0; font-size: 21px; text-shadow: none; }
  .visit__notes h2 { font-size: 15vw; }
  .visit__notes { padding: 26px var(--pad); }
  .visit__notes ol { gap: 8px; font-size: 14px; line-height: 1.36; }
  .visit__notes strong { font-size: 21px; }
  .visit__lounge { display: none; }

  .close { padding: 28px var(--pad) 26px; }
  .close h2 { font-size: 21vw; }
  .close__photos { min-height: 60vw; order: -1; }
  .close__offer { grid-template-columns: auto minmax(0, 1fr); }

  .dock { top: auto; bottom: 0; left: 0; right: auto; transform: none; height: 68px; display: flex; align-items: center; padding-left: 6px; }
  .dock__glows { flex-direction: row; gap: 0; }
  .glow { width: 36px; height: 48px; }
  .glow b { display: none; }
  .stickycta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 19;
    inset: auto 0 0 0;
    height: 68px;
    padding: 0 12px 0 196px;
    background: var(--ink);
    color: var(--cream);
    font-weight: 600;
    text-decoration: none;
  }
  .glow span { box-shadow: 0 0 0 1px rgba(255, 236, 196, .4), 0 0 14px var(--field); }
}
