/* Dot On Massage Therapy & Spa
   Values are read from the Framer project (layout tree, text presets, colour tokens).
   Breakpoints match Framer's: desktop >= 1200, tablet 810-1199, phone < 810. */

:root {
  --gold: rgb(196, 167, 231);            /* lavender: accent on dark */
  --darker-gold: rgb(123, 79, 176);      /* mid purple: labels on light */
  --bg: rgb(58, 26, 94);
  --light-bg: rgb(240, 240, 240);        /* page ground, used wherever the design had white */
  --surface: rgb(228, 221, 238);         /* cards on the page ground */
  --lighter-bg: rgb(240, 240, 240);
  --darker-bg: rgb(20, 10, 34);
  --charcoal: rgb(56, 48, 66);
  --headline: rgb(91, 44, 145);
  --body-default: rgb(224, 216, 234);
  --white-60: rgba(255, 255, 255, .6);
  --white-20: rgba(255, 255, 255, .2);
  --line: rgba(58, 26, 94, .5);

  --serif: "Playfair Display", "Times New Roman", serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;

  --pad: 100px;
  --tween: cubic-bezier(.44, 0, .56, 1);
  /* Spring curves are generated in main.js as linear() easings; these are the fallbacks. */
  --spring-soft: cubic-bezier(.2, .9, .3, 1);   --spring-soft-ms: 1500ms;   /* 1.5s, bounce 0.2 */
  --spring-flat: cubic-bezier(.2, .8, .2, 1);   --spring-flat-ms: 1500ms;   /* 1.5s, bounce 0   */
  --spring-ui: cubic-bezier(.2, .9, .3, 1);     --spring-ui-ms: 400ms;      /* 0.4s, bounce 0.2 */
  --spring-btn: cubic-bezier(.2, .8, .2, 1);    --spring-btn-ms: 600ms;     /* 0.6s, bounce 0   */
  --spring-hero: cubic-bezier(.2, .8, .2, 1);   --spring-hero-ms: 2000ms;   /* 2s, bounce 0     */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--light-bg); color: #000; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Text presets ---------- */
.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6 { font-family: var(--serif); line-height: 1; color: var(--headline); }
.t-h1 { font-weight: 600; font-size: 134px; letter-spacing: -.02em; color: rgb(240, 240, 240); }
.t-h2 { font-weight: 600; font-size: 72px; letter-spacing: -.02em; text-align: center; }
.t-h3 { font-weight: 500; font-size: 64px; letter-spacing: -.02em; text-align: center; font-feature-settings: "lnum"; }
.t-h4 { font-weight: 500; font-size: 48px; }
.t-h5 { font-weight: 500; font-size: 36px; letter-spacing: .02em; font-feature-settings: "lnum", "case"; }
.t-h6 { font-weight: 500; font-size: 24px; font-feature-settings: "lnum"; }
.t-body { font-size: 18px; letter-spacing: .04em; line-height: 1.4; color: var(--body-default); }
.t-body p + p { margin-top: 5px; }
.t-small { font-size: 16px; letter-spacing: .01em; line-height: 1.4; color: var(--body-default); }
.t-large { font-size: 20px; letter-spacing: .05em; line-height: 1.5; color: rgba(13, 6, 0, .6); }
.t-label { font-size: 14px; letter-spacing: .01em; line-height: 1.4; text-transform: uppercase; }
.t-smalllabel { font-size: 13px; letter-spacing: -.02em; line-height: 1.6; color: var(--white-60); }
.t-xsmall { font-size: 12px; letter-spacing: -.02em; line-height: 1.6; text-transform: capitalize; color: var(--white-60); }
.t-eyebrow { font-weight: 700; font-size: 17px; letter-spacing: 27px; line-height: 1; text-transform: uppercase; text-align: center; color: var(--darker-gold); }
.t-biglabel { font-weight: 700; font-size: 17px; letter-spacing: 5px; line-height: 1; text-transform: uppercase; color: var(--darker-gold); }

/* ---------- Shared pieces ---------- */
.parallax { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.parallax img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% * var(--scale, 1.5)); max-width: none; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Label swap: two stacked copies, the pair slides up one row on hover. */
.swap { position: relative; display: block; height: 19.6px; overflow: clip; font-size: 14px; letter-spacing: .01em; line-height: 1.4; text-transform: uppercase; z-index: 2; }
.swap__track { display: flex; flex-direction: column; gap: 10px; transition: transform var(--spring-ui-ms) var(--spring-ui); }
.swap__track > span { display: block; height: 19.6px; white-space: nowrap; }

.btn { position: relative; display: flex; justify-content: center; align-items: center; width: 180px; padding: 16px 12px; border-radius: 1000px; background: rgb(240, 240, 240); overflow: clip; flex: none; }
.btn__fill { position: absolute; left: 0; right: 0; bottom: -500px; margin: auto; width: 180px; aspect-ratio: 1; border-radius: 1000px; background: var(--bg); z-index: 1; transition: bottom var(--spring-btn-ms) var(--spring-btn); }
.btn .swap__track > span:first-child { color: #000; }
.btn .swap__track > span:last-child { color: rgb(240, 240, 240); }
/* Longer labels need a wider pill; the fill circle grows with it. */
.btn--wide { width: 230px; }
.btn--wide .btn__fill { width: 230px; }
.btn--dark { background: var(--bg); }
.btn--dark .btn__fill { background: var(--gold); }
.btn--dark .swap__track > span:first-child { color: rgb(240, 240, 240); }
.btn--dark .swap__track > span:last-child { color: #000; }
.btn--ghost { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(255, 255, 255, .2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.btn--ghost .btn__fill { background: var(--gold); }
.btn--ghost .swap__track > span:first-child { color: rgb(240, 240, 240); }
.btn--ghost .swap__track > span:last-child { color: #000; }
@media (hover: hover) {
  .btn:hover .btn__fill { bottom: calc(50% - 90px); }
  .btn--wide:hover .btn__fill { bottom: calc(50% - 115px); }
  .btn:hover .swap__track, .menu-btn:hover .swap__track { transform: translateY(-29.6px); }
}

/* Rolling link (menu + footer): charcoal/cream copy rolls away to reveal the accent copy. */
.roll { position: relative; display: block; overflow: clip; font-family: var(--serif); font-weight: 500; font-size: 48px; line-height: 1; height: 1em; }
.roll__track { display: flex; flex-direction: column; transition: transform var(--spring-ui-ms) var(--spring-ui); }
.roll__track > span { display: block; height: 1em; white-space: nowrap; color: var(--lighter-bg); }
.roll__track > span:last-child { color: var(--gold); }
.roll--menu .roll__track > span { color: var(--charcoal); }
.roll--menu .roll__track > span:last-child { color: var(--headline); }
@media (hover: hover) { .roll:hover .roll__track { transform: translateY(-1em); } }

/* ---------- Appear effects (driven by main.js) ---------- */
.js [data-appear="rise"] { opacity: 0; transform: translateY(10px); transition: opacity var(--spring-soft-ms) var(--spring-soft), transform var(--spring-soft-ms) var(--spring-soft); }
.js [data-appear="lift"] { opacity: 0; transform: translateY(50px); transition: opacity .6s var(--tween), transform .6s var(--tween); }
.js [data-appear].is-in { opacity: 1; transform: none; }
.js .leaf[data-appear].is-in { opacity: .3; }
.js [data-words] .word { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity var(--spring-flat-ms) var(--spring-flat), transform var(--spring-flat-ms) var(--spring-flat); transition-delay: calc(var(--i) * 70ms); }
.js [data-words].is-in .word { opacity: 1; transform: none; }

/* ---------- Navbar ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 5; display: flex; flex-direction: column; padding: 16px 24px; height: 67px; overflow: clip; transition: background-color var(--spring-ui-ms) var(--spring-ui), height var(--spring-ui-ms) var(--spring-ui); }
.nav__bar { position: relative; display: flex; justify-content: center; align-items: center; height: 34px; flex: none; }
.nav__logo { display: flex; align-items: center; gap: 8px; height: 34px; font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1; letter-spacing: -.01em; color: rgb(240, 240, 240); }
.nav__logo b { font-weight: 500; color: var(--gold); }
.mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--gold); background: radial-gradient(circle, var(--gold) 0 30%, transparent 33%); }
.mark--lg { display: block; width: 40px; height: 40px; border-width: 2px; }
.menu-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 1000px; background: rgba(0, 0, 0, .2); overflow: clip; z-index: 3; }
/* 2px gold stroke drawn as an overlay, so it sits inside the pill and above the hover fill. */
.menu-btn::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--gold); border-radius: inherit; z-index: 3; pointer-events: none; }
.menu-btn__fill { position: absolute; left: 0; right: 0; bottom: -180px; width: 100%; aspect-ratio: 1; border-radius: 1000px; background: var(--gold); z-index: 1; transition: bottom var(--spring-btn-ms) var(--spring-btn); }
.menu-btn .swap__track > span:first-child { color: rgb(240, 240, 240); }
.menu-btn .swap__track > span:last-child { color: #000; }
.menu-btn__lines { position: relative; width: 28px; height: 10px; z-index: 2; }
.menu-btn__lines i { position: absolute; right: 0; height: 1px; border-radius: 99px; background: rgb(240, 240, 240); transition: transform var(--spring-ui-ms) var(--spring-ui), width var(--spring-ui-ms) var(--spring-ui), top var(--spring-ui-ms) var(--spring-ui), background-color var(--spring-ui-ms) var(--spring-ui); }
.menu-btn__lines i:first-child { top: 0; width: 28px; }
.menu-btn__lines i:last-child { top: 9px; width: 14px; }
@media (hover: hover) { .menu-btn:hover .menu-btn__fill { bottom: calc(50% - 61px); } .menu-btn:hover .menu-btn__lines i { background: var(--bg); } .menu-btn[aria-expanded="false"]:hover .menu-btn__lines i:last-child { width: 20px; } }

.nav__sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity var(--spring-ui-ms) var(--spring-ui), visibility 0s var(--spring-ui-ms); }
.nav__links { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding-bottom: 10px; }
.nav__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.nav__contact .t-h6 { color: var(--charcoal); }

.nav.is-open { height: 100vh; height: 100dvh; padding-bottom: 36px; background: var(--light-bg); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.nav.is-open .nav__sheet { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav.is-open .menu-btn__fill { bottom: calc(50% - 61px); }
.nav.is-open .menu-btn .swap__track { transform: translateY(-29.6px); }
.nav.is-open .menu-btn__lines i { background: var(--bg); top: 4.5px; width: 25px; }
.nav.is-open .menu-btn__lines i:first-child { transform: rotate(30deg); }
.nav.is-open .menu-btn__lines i:last-child { transform: rotate(-30deg); }

/* Over light sections the nav swaps to the purple set (class set by main.js). */
.nav.is-on-light:not(.is-open) .nav__logo { color: var(--bg); }
.nav.is-on-light:not(.is-open) .nav__logo b { color: var(--headline); }
.nav.is-on-light:not(.is-open) .mark { border-color: var(--headline); background: radial-gradient(circle, var(--headline) 0 30%, transparent 33%); }
.nav.is-on-light:not(.is-open) .menu-btn { background: rgba(58, 26, 94, .08); }
.nav.is-on-light:not(.is-open) .menu-btn::after { border-color: var(--headline); }
.nav.is-on-light:not(.is-open) .menu-btn .swap__track > span:first-child { color: var(--bg); }
.nav.is-on-light:not(.is-open) .menu-btn__lines i { background: var(--bg); }
.nav__logo, .nav__logo b, .mark { transition: color var(--spring-ui-ms) var(--spring-ui), border-color var(--spring-ui-ms) var(--spring-ui); }
/* The open sheet is light too. */
.nav.is-open .nav__logo { color: var(--bg); }
.nav.is-open .nav__logo b { color: var(--headline); }
.nav.is-open .mark { border-color: var(--headline); background: radial-gradient(circle, var(--headline) 0 30%, transparent 33%); }

/* ---------- Main ---------- */
.main { position: relative; display: flex; flex-direction: column; align-items: center; gap: 100px; padding-bottom: 100px; background: var(--light-bg); overflow: clip; }
.main > section { position: relative; width: 100%; }

/* ---------- Hero ---------- */
.hero { display: flex; justify-content: center; align-items: center; height: 100vh; padding: 0 var(--pad); background: var(--darker-bg); overflow: clip; }
.hero__bg, .cta__bg { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, #000 79%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, #000 79%); }
.js .hero__bg[data-mount-zoom] { transform: scale(1.05); transition: transform var(--spring-hero-ms) var(--spring-hero) .2s; }
.js .hero__bg[data-mount-zoom].is-in { transform: none; }
.hero__container { position: relative; z-index: 2; flex: 1; max-width: 1400px; display: flex; flex-direction: column; }
.hero__ratings-row { display: flex; justify-content: flex-end; }
.ratings { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 250px; }
.ratings__avatars { display: flex; width: 140px; flex: none; }
.ratings__avatars img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
.ratings__numbers { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.counter { font-family: var(--serif); font-weight: 500; font-size: 45px; letter-spacing: -.04em; line-height: 1; color: #000; font-feature-settings: "lnum"; font-variant-numeric: lining-nums tabular-nums; }
.counter--hero { font-weight: 400; font-size: 36px; color: var(--lighter-bg); }
.js .counter { display: inline-flex; height: 1em; overflow: hidden; }
.counter__col { display: flex; flex-direction: column; transition: transform 2s cubic-bezier(.16, 1, .3, 1); }
.counter__col span { display: block; height: 1em; }
.hero__content { display: flex; flex-direction: column; gap: 35px; height: 462px; }
.hero__headline { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 20px; overflow: clip; }
.hero__sub { color: var(--light-bg); text-shadow: 0 0 10px #000; }
.hero__buttons { display: flex; align-items: center; gap: 12px; }

/* ---------- About ---------- */
.about { z-index: 1; max-width: 1400px; display: flex; flex-direction: column; align-items: center; gap: 50px; padding: 0 var(--pad); }
.about__top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.about__top .t-eyebrow { width: 100%; max-width: 695px; }
.about__text { max-width: 695px; text-align: center; color: var(--charcoal); }
.about__media { display: flex; gap: 8px; width: 300px; height: 150px; }
.about__media img { flex: 1; min-width: 0; height: 100%; object-fit: cover; border-radius: 100px; }
.stats { width: 100%; display: flex; justify-content: center; align-items: center; }
.stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 30px; overflow: clip; }
.stat__group { width: 300px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stat__group--narrow { width: 208px; }
.stat__group .t-body { width: 100%; text-align: center; color: var(--charcoal); }
.stat__dots { display: flex; justify-content: center; gap: 8px; width: 208px; }
.stat__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--headline); }
.stat__dots i.is-dim { opacity: .28; }
.stats__divide { flex: none; width: 1px; height: 96px; background: var(--line); }

/* ---------- Process ---------- */
.process { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 0 var(--pad); }
.leaf { filter: grayscale(1) brightness(.6); position: absolute; z-index: 0; width: 379px; height: 545px; object-fit: cover; opacity: .3; pointer-events: none; }
.leaf--left { left: -28px; top: -188px; rotate: 60deg; }
.leaf--right { right: -28px; top: -250px; rotate: -60deg; }
.process__column { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.process__title { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.process__title-group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; overflow: clip; }
.process__title-group .t-eyebrow { width: 100%; max-width: 695px; }
.process__sub, .section-head .t-body { width: 100%; text-align: center; color: var(--charcoal); text-wrap: balance; }
.process__cards { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 100px; }
.process__slot { width: 100%; height: 540px; display: flex; justify-content: center; align-items: center; overflow: clip; }
.process__space { width: 100%; height: 350px; }
.pcard { position: relative; width: 400px; height: 400px; flex: none; transform: translate3d(var(--sx, 0px), 0, 0); will-change: transform; }
.pcard__frame { position: absolute; left: -10px; top: -10px; width: 100%; height: 100%; border: 2px solid var(--bg); border-radius: 16px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.pcard__body { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; padding: 24px 24px 36px; border-radius: 16px; background: var(--bg); overflow: clip; }
.pcard__img { -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, .25) 0%, #000 79%); mask-image: linear-gradient(0deg, rgba(0, 0, 0, .25) 0%, #000 79%); }
.pcard .t-h6 { position: relative; z-index: 1; flex: 1; text-align: left; color: rgb(240, 240, 240); }

.steps { width: 100%; max-width: 800px; display: flex; justify-content: center; align-items: flex-end; gap: 24px; overflow: clip; }
.step { flex: none; width: 180px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* The illustrations are single-colour line art, so each is used as a mask over the theme purple. */
.step__art { display: block; width: 180px; background: var(--bg); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.step__art--1 { aspect-ratio: 347 / 187; -webkit-mask-image: url("assets/step-1.svg"); mask-image: url("assets/step-1.svg"); }
.step__art--2 { aspect-ratio: 210 / 187; -webkit-mask-image: url("assets/step-2.svg"); mask-image: url("assets/step-2.svg"); }
.step__art--3 { aspect-ratio: 280 / 187; -webkit-mask-image: url("assets/step-3.svg"); mask-image: url("assets/step-3.svg"); }
.step .t-body { width: 100%; text-align: center; color: var(--bg); }
.steps__line { flex: 1; height: 50px; display: flex; align-items: center; }
.steps__line i { width: 100%; height: 1px; background: var(--line); }
.process__btn { width: 180px; }

/* ---------- Testimonials ---------- */
.testimonials { display: flex; flex-direction: column; align-items: flex-end; gap: 60px; padding: 0 var(--pad); }
.section-head { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tgrid { position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); gap: 12px; }
.tcard { height: 400px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border-radius: 16px; background: var(--surface); overflow: clip; }
.tcard .t-body { color: var(--charcoal); text-wrap: balance; }
.tcard__foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.tcard:nth-child(even) { flex-direction: column-reverse; }
.tcard:nth-child(even) .tcard__foot { flex-direction: row-reverse; justify-content: flex-end; }
.tcard__author { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stars { display: flex; gap: 3px; padding: 2px 0; }
.stars i { width: 15px; height: 15px; background: var(--gold); -webkit-mask: url("assets/icon-star.svg") center / contain no-repeat; mask: url("assets/icon-star.svg") center / contain no-repeat; }
.tcard__name { font-family: "Geist", var(--sans); font-weight: 500; font-size: 14px; letter-spacing: -.01em; line-height: 1.2; color: var(--charcoal); }
.tcard__foot > img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* "Why choose us" cards reuse the review card: copy on one end, number on the other. */
.wcard__text { display: flex; flex-direction: column; gap: 16px; }
.wcard__text .t-h5 { text-align: left; }
.wcard__num { font-family: var(--serif); font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -.02em; color: var(--gold); font-feature-settings: "lnum"; }
.wcard--cta { background: var(--bg); }
.wcard--cta .t-h5 { color: var(--lighter-bg); }
.wcard--cta .t-body { color: var(--light-bg); }

/* ---------- Services ---------- */
.services { overflow: clip; }
.services__grid { display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-auto-rows: 500px; }
.services__title { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px; overflow: clip; }
.services__title .t-h2 { width: 100%; text-align: left; }
.services__title .t-body { width: 100%; color: var(--charcoal); }
.services__art { position: absolute; right: 24px; bottom: 0; width: 120px; height: 178px; filter: brightness(0) saturate(100%) invert(19%) sepia(63%) saturate(2400%) hue-rotate(258deg) brightness(88%); opacity: .35; }
.scard { position: relative; display: flex; overflow: clip; background: var(--img) center / cover no-repeat; }
.scard__veil { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; padding: 24px 24px 36px; overflow: clip; background: linear-gradient(180deg, rgba(186, 221, 255, 0) 50.34%, rgba(30, 12, 52, .8) 100%); }
/* The hover veil sits on its own layer so the gradient-to-tint change can fade. */
.scard__veil::before { content: ""; position: absolute; inset: 0; background: rgba(58, 26, 94, .6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity var(--spring-ui-ms) var(--spring-ui); }
.scard .t-h4 { position: relative; z-index: 1; width: 100%; text-align: left; color: var(--lighter-bg); }
.scard__content { position: relative; z-index: 1; width: calc(100% + 48px); max-height: 0; margin-top: -10px; opacity: 0; overflow: hidden; transition: max-height var(--spring-ui-ms) var(--spring-ui), opacity var(--spring-ui-ms) var(--spring-ui), margin var(--spring-ui-ms) var(--spring-ui); }
.scard__content ul { display: flex; flex-direction: column; gap: 12px; padding: 24px 18px 0; }
.scard__content li { padding: 4px 0 4px 8px; box-shadow: inset 0 -1px 0 var(--white-20); font-size: 16px; letter-spacing: .01em; line-height: 1.4; color: rgb(240, 240, 240); }
.scard__total { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 36px 18px 4px 26px; }
.scard__total .t-h6, .scard__total .t-h3 { color: var(--gold); }
.scard__price { display: flex; align-items: flex-start; gap: 4px; }
.scard.is-open .scard__veil::before { opacity: 1; }
.scard.is-open .scard__content { max-height: 420px; margin-top: 0; opacity: 1; }
@media (hover: hover) {
  .scard:hover .scard__veil::before { opacity: 1; }
  .scard:hover .scard__content { max-height: 420px; margin-top: 0; opacity: 1; }
}

/* ---------- Price list ---------- */
.prices { display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 0 var(--pad); }
.prices .section-head .t-eyebrow { width: 100%; max-width: 695px; }
.prices__grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.prices__card { padding: 36px; border-radius: 16px; background: var(--surface); }
.prices__card .t-h5 { text-align: left; padding-bottom: 12px; }
.price { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.price:last-child { border-bottom: 0; padding-bottom: 0; }
.price__text { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.price__text .t-small { color: var(--charcoal); }
.price__amount { flex: none; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1; color: var(--darker-gold); font-feature-settings: "lnum"; white-space: nowrap; }

/* ---------- Team ---------- */
.team { display: flex; flex-direction: column; align-items: flex-end; gap: 80px; padding: 0 var(--pad); }
.team__head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.team__head .t-eyebrow { width: 100%; max-width: 695px; }
.tm { width: 100%; min-height: 680px; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.tm__row { width: 100%; display: flex; align-items: flex-end; gap: 126px; }
.tm__left { flex: 1; min-width: 0; max-width: 500px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 30px; }
.tm__info { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.tm__id { display: flex; flex-direction: column; }
.tm__id .t-biglabel { padding-left: 4px; }
.tm__id .t-h3 { text-align: left; }
.tm__social { display: flex; align-items: center; gap: 20px; padding: 12px 0 0 4px; }
.tm__bio { color: var(--charcoal); }
.tm__cred-title { text-align: left; }
.tm__creds { display: flex; flex-direction: column; gap: 24px; }
.tm__creds li { display: flex; align-items: center; gap: 10px; padding: 0 0 12px 12px; }
.tm__creds li::before { content: ""; flex: none; width: 10px; height: 21px; background: var(--darker-gold); -webkit-mask: url("assets/icon-bullet.svg") center / contain no-repeat; mask: url("assets/icon-bullet.svg") center / contain no-repeat; }
.js .tm__info.is-swapping > *, .js .tm__info.is-swapping .tm__id > * { opacity: 0; transform: translateY(10px); }
.tm__info > *, .tm__id > * { transition: opacity var(--spring-soft-ms) var(--spring-soft), transform var(--spring-soft-ms) var(--spring-soft); }
.tm__info.is-swapping > *, .tm__info.is-swapping .tm__id > * { transition: none; }
.tm__nav { display: flex; align-items: center; gap: 20px; }
.slide-btn { width: 80px; height: 80px; border-radius: 999px; background: var(--bg); display: flex; justify-content: center; align-items: center; }
.slide-btn__clip { width: 30px; height: 25px; overflow: clip; }
.slide-btn__track { display: flex; gap: 10px; width: 70px; transition: transform var(--spring-ui-ms) var(--spring-ui); }
.slide-btn__track img { width: 30px; height: 25px; flex: none; }
.slide-btn--right .slide-btn__track { transform: translateX(-40px); }
@media (hover: hover) {
  .slide-btn--left:hover .slide-btn__track { transform: translateX(-40px); }
  .slide-btn--right:hover .slide-btn__track { transform: translateX(0); }
}
.tm__showcase { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; }
.tm__images { position: relative; width: 100%; max-width: 473px; height: 649px; }
.tm__stack { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--bg); }
.tm__stack img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; transition: transform var(--spring-soft-ms) var(--spring-soft); }
.tm__stack img.is-away { transform: translateY(calc(100% + 151px)); }
.tm__frame { position: absolute; left: -15px; top: -15px; width: 100%; height: 100%; border: 3px solid var(--bg); border-radius: 30px; }
.tm__progress { display: flex; align-items: center; gap: 10px; }
.tm__progress i { width: 18px; height: 19px; border-radius: 99px; border: 1px solid var(--bg); transition: background-color var(--spring-ui-ms) var(--spring-ui); }
.tm__progress i.is-on { background: var(--bg); }

/* ---------- Mobile massage ----------
   One split block: copy and location tiles on the left, framed photo with a glass note on the right. */
.mobile { padding: 0 var(--pad); }
.mobile__row { display: flex; align-items: center; gap: 126px; }
.mobile__copy { flex: 1; min-width: 0; max-width: 580px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.mobile__title { text-align: left; }
.mobile__text { color: var(--charcoal); max-width: 480px; }
.mobile__places { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mobile__places li { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-radius: 16px; background: var(--surface); font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1; color: var(--headline); }
.mobile__places li::before { content: ""; flex: none; width: 10px; height: 21px; background: var(--darker-gold); -webkit-mask: url("assets/icon-bullet.svg") center / contain no-repeat; mask: url("assets/icon-bullet.svg") center / contain no-repeat; }
/* Five tiles in two columns leaves one alone; let it run the full width. */
.mobile__places li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mobile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 8px; }
.mobile__phone { display: flex; flex-direction: column; gap: 4px; }
.mobile__phone .t-smalllabel { color: var(--charcoal); text-transform: uppercase; letter-spacing: .08em; }
.mobile__media { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.mobile__note { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(142deg, rgb(30, 12, 52) 0%, rgba(48, 22, 80, .895) 36%, rgba(92, 52, 140, .66) 100%); }
.mobile__note .t-biglabel { font-size: 12px; letter-spacing: 3px; color: var(--gold); }
.mobile__note .t-body { color: var(--light-bg); }

/* ---------- Gallery ----------
   A native scroll-snap row, so touch swipe and trackpads work with no library; the buttons
   just scroll it. Tiles are 9:16 because almost every clip on the channel is a Short. */
.gallery { display: flex; flex-direction: column; gap: 40px; }
.gallery__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--pad); }
.gallery__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 640px; }
.gallery__intro .t-h2 { text-align: left; }
.gallery__intro .t-body { color: var(--charcoal); }
.gallery__nav { display: flex; gap: 16px; flex: none; }
.gallery__nav .slide-btn { width: 64px; height: 64px; transition: opacity .3s var(--tween); }
.gallery__nav .slide-btn:disabled { opacity: .35; cursor: default; }
.gallery__viewport { width: 100%; }
.gallery__track { display: flex; gap: 12px; padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gtile { flex: none; width: clamp(220px, 21vw, 300px); aspect-ratio: 9 / 16; scroll-snap-align: start; }
.gtile__btn { position: relative; display: block; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: var(--bg); }
.gtile__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--tween); pointer-events: none; }
/* Clip thumbnails come straight from YouTube, so they get the same purple veil the photos were graded with. */
.gtile--video .gtile__btn::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(58, 26, 94, .15) 0%, rgba(20, 10, 34, .75) 100%); mix-blend-mode: multiply; }
.gtile__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(240, 240, 240, .2); box-shadow: inset 0 0 0 2px var(--gold); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .4s var(--tween), background-color .4s var(--tween); }
.gtile__play::after { content: ""; position: absolute; left: 26px; top: 21px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--light-bg); }
.gtile__cap { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; text-align: left; color: var(--light-bg); }
@media (hover: hover) {
  .gtile__btn:hover img { transform: scale(1.05); }
  .gtile__btn:hover .gtile__play { transform: scale(1.08); background: rgba(196, 167, 231, .35); }
}
.gallery__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 var(--pad); }
.gallery__bar { position: relative; flex: 1; max-width: 420px; height: 2px; background: var(--line); overflow: hidden; }
.gallery__bar i { position: absolute; left: 0; top: 0; height: 100%; width: var(--w, 20%); transform: translateX(var(--x, 0)); background: var(--bg); transition: transform .3s var(--tween); }
.gallery__more { font-size: 14px; letter-spacing: .01em; text-transform: uppercase; color: var(--headline); white-space: nowrap; }
.gallery__more:hover { color: var(--bg); }

.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 10, 34, .92); }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: flex; justify-content: center; align-items: center; }
.lightbox__stage { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 64px 24px 24px; }
.lightbox__stage img { max-width: 100%; max-height: 100%; border-radius: 16px; object-fit: contain; }
.lightbox__stage iframe { border: 0; border-radius: 16px; background: #000; }
.lightbox__frame--short { height: min(86vh, 900px); aspect-ratio: 9 / 16; max-width: 100%; }
.lightbox__frame--wide { width: min(1100px, 100%); aspect-ratio: 16 / 9; }
.lightbox__close { position: absolute; top: 16px; right: 20px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; color: var(--light-bg); box-shadow: inset 0 0 0 2px var(--gold); }

/* ---------- CTA ---------- */
.cta { display: flex; align-items: center; gap: 80px; min-height: 110vh; padding: 24px 24px 24px var(--pad); background: var(--bg); z-index: 1; }
.cta__panel { position: relative; z-index: 1; flex: 1; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 36px; border-radius: 12px; overflow: clip; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(142deg, rgb(30, 12, 52) 0%, rgba(38, 16, 64, .955) 18.97%, rgba(48, 22, 80, .895) 36.21%, rgba(54, 25, 88, .87) 54.48%, rgba(60, 28, 98, .846) 71.72%, rgba(92, 52, 140, .66) 100%); }
.cta__head { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.cta__head .t-h2 { text-align: left; color: var(--lighter-bg); }
.cta__head .t-body { color: var(--light-bg); }
.form { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.field input, .field select { width: 100%; height: 40px; padding: 12px; border: 0; border-bottom: 1px solid var(--white-20); border-radius: 0; background: transparent; font-family: var(--sans); font-size: 14px; letter-spacing: .04em; line-height: 1.2; color: var(--light-bg); outline: none; appearance: none; -webkit-appearance: none; }
.field select { padding-block: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center no-repeat; }
.field select:invalid { color: rgb(153, 153, 153); }
.field option { color: #000; }
.field input::placeholder { color: rgb(153, 153, 153); }
.field input:focus, .field select:focus { border-bottom-color: var(--lighter-bg); }
.submit { position: relative; width: 100%; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 10px; background: var(--charcoal); font-family: "Inter", var(--sans); font-weight: 600; font-size: 14px; line-height: 1.2; color: rgb(240, 240, 240); transition: opacity .2s var(--tween), background-color .2s var(--tween); }
.submit:hover { opacity: .85; }
.submit__spinner { display: none; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 7deg, rgb(240, 240, 240) 342deg); -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px); animation: spin 1s linear infinite; }
.submit.is-loading .submit__label { display: none; }
.submit.is-loading .submit__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- FAQ ---------- */
.faq { display: flex; align-items: flex-end; gap: 80px; padding: 0 var(--pad); }
.faq__left { flex: 1; min-width: 0; max-width: 500px; display: flex; flex-direction: column; align-items: center; gap: 87px; }
.faq__head { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.faq__head .t-h2 { text-align: left; }
.faq__head .t-body { color: var(--charcoal); }
.faq__img { width: 100%; height: auto; aspect-ratio: 1.53; object-fit: cover; border-radius: 20px; }
.faq__right { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; }
.acc { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 5px; }
/* Inset shadow, not a border: the 2px rule sits inside the row's 88px height. */
.acc__item { padding: 16px 0; box-shadow: inset 0 -2px 0 var(--bg); transition: padding .4s var(--tween); }
.acc__q { width: 100%; display: flex; align-items: center; padding: 8px; text-align: left; }
.acc__q .t-h6 { flex: 1; }
.acc__mark { flex: none; width: 40px; height: 40px; background: var(--headline); -webkit-mask: url("assets/icon-24-a.svg") center / 24px no-repeat; mask: url("assets/icon-24-a.svg") center / 24px no-repeat; transform: rotate(90deg); transition: transform .4s var(--tween); }
.acc__a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--tween), opacity .4s var(--tween); }
.acc__a > div { min-height: 0; overflow: hidden; }
.acc__a .t-body { padding: 0 8px 0 48px; color: var(--charcoal); }
.acc__item.is-open { padding: 30px 0; }
.acc__item.is-open .acc__mark { transform: rotate(0deg); }
.acc__item.is-open .acc__a { grid-template-rows: 1fr; opacity: 1; }

/* ---------- Footer ---------- */
.footer { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--darker-bg); overflow: clip; }
.footer__bg img { left: -5%; width: 110%; }
.footer__bg { -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .4) 89%); mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .4) 89%); }
.footer__content { position: relative; z-index: 1; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; gap: 60px; padding: 50px var(--pad); }
/* The wordmark takes the height it needs at full width; the info block gets whatever is left. */
.footer__info { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.footer__row { display: flex; justify-content: center; align-items: stretch; gap: 40px; }
.footer__left { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 100px; }
.footer__about { width: 350px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__about .t-small { color: var(--light-bg); }
.footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__contact .t-small { color: var(--lighter-bg); overflow-wrap: anywhere; }
.footer__contact { max-width: 100%; }
.footer__left { gap: 40px; }
.footer__divider { flex: none; width: 1px; background: rgba(240, 240, 240, .5); }
.footer__navcol { flex: 1; display: flex; justify-content: center; }
.footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer__social { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 10px; }
.sm-link { display: block; font-size: 14px; letter-spacing: .01em; line-height: 1.4; text-transform: uppercase; color: var(--lighter-bg); transition: color var(--spring-ui-ms) var(--spring-ui), padding var(--spring-ui-ms) var(--spring-ui); }
@media (hover: hover) { .sm-link:hover { color: var(--gold); padding-right: 15px; } }
/* Font size is set by main.js so the word spans the container edge to edge. */
.footer__wordmark { flex: none; width: 100%; font-family: var(--serif); font-weight: 500; font-size: var(--wordmark-size, 33vw); line-height: .9; letter-spacing: -.02em; color: rgb(240, 240, 240); white-space: nowrap; }
.footer__wordmark span { display: inline-block; }
.footer__wordmark b { font-weight: 500; color: var(--gold); }

/* ================= Tablet: 810 - 1199 ================= */
@media (max-width: 1199.98px) {
  :root { --pad: 40px; }
  .t-h1 { font-size: 107px; } .t-h2 { font-size: 58px; } .t-h3 { font-size: 52px; } .t-h4 { font-size: 38px; } .t-h5 { font-size: 28px; } .t-h6 { font-size: 22px; }
  .t-body { font-size: 16px; } .t-small { font-size: 14px; } .t-large { font-size: 16px; } .t-smalllabel { font-size: 12px; } .t-xsmall { font-size: 10px; }
  .t-eyebrow { font-size: 14px; letter-spacing: 22px; } .t-biglabel { font-size: 15px; letter-spacing: 2px; }
  .roll { font-size: 38px; }
  .main { padding-bottom: 60px; }
  .about { gap: 40px; }
  .stat { padding: 24px; }
  .leaf { width: 200px; height: 288px; }
  .process__title .t-h2, .team__head .t-h2 { max-width: 680px; }
  .steps { gap: 12px; }
  .stats { min-height: 192px; }
  .tm__images { height: auto; aspect-ratio: .73; }
  .footer__row { gap: 24px; }
  .footer__left { flex: 1; min-width: 0; }
  .testimonials { gap: 40px; }
  .tgrid { grid-template-columns: repeat(2, minmax(50px, 1fr)); }
  .services__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); }
  .prices { gap: 40px; }
  .prices__card { padding: 24px; }
  .price__amount { font-size: 22px; }
  .team { gap: 60px; }
  .tm { min-height: 600px; }
  .tm__row { gap: 40px; }
  .mobile__row { gap: 40px; }
  .mobile__places li { font-size: 20px; padding: 16px 18px; }
  .gallery { gap: 32px; }
  .gtile { width: clamp(200px, 30vw, 280px); }
  .cta { min-height: 100vh; padding: 24px; }
  .cta__panel { padding: 32px; }
  .faq { flex-direction: column; align-items: flex-start; gap: 30px; padding: 0 24px; }
  .faq__left { flex: none; width: 100%; max-width: none; }
  .faq__right { flex: none; width: 100%; }
  .acc { max-width: none; }
}

/* Narrow tablet: the price list and mobile massage tiles need more room than two columns give. */
@media (max-width: 999.98px) {
  .prices__grid { grid-template-columns: minmax(0, 1fr); }
  .mobile__places li { font-size: 17px; padding: 14px 14px; gap: 8px; white-space: nowrap; }
}

/* ================= Phone: < 810 ================= */
@media (max-width: 809.98px) {
  :root { --pad: 24px; }
  .t-h1 { font-size: 54px; } .t-h2 { font-size: 38px; } .t-h3 { font-size: 32px; } .t-h4 { font-size: 32px; } .t-h5 { font-size: 22px; } .t-h6 { font-size: 16px; }
  .t-body { font-size: 12px; } .t-small { font-size: 12px; } .t-large { font-size: 14px; } .t-label, .swap, .sm-link { font-size: 12px; } .t-smalllabel { font-size: 10px; } .t-xsmall { font-size: 8px; }
  .t-eyebrow { font-size: 12px; letter-spacing: 12px; } .t-biglabel { font-size: 12px; }
  .swap, .swap__track > span { height: 16.8px; }
  .roll { font-size: 32px; }
  .main { gap: 30px; padding-bottom: 36px; }
  .nav__bar { justify-content: flex-start; }
  .hero { padding-top: 80px; }
  .hero__container { gap: 24px; }
  .ratings { max-width: none; }
  .ratings__avatars { width: auto; }
  .ratings__avatars img { width: 50px; height: 50px; }
  .hero__buttons { flex-direction: column; align-items: flex-start; }
  .hero__buttons .btn { width: 100%; }
  .hero__buttons .btn__fill { width: 100%; }
  .about { gap: 20px; }
  .stats { flex-direction: column; }
  .stat { width: 100%; gap: 24px; padding: 16px; }
  .stats__divide, .leaf, .process__space, .steps__line, .services__art { display: none; }
  .process__column { gap: 20px; }
  .process__title { gap: 20px; }
  .process__cards { gap: 40px; }
  .process__slot { height: auto; overflow: visible; }
  .pcard { width: 100%; height: 300px; transform: none; }
  .steps { flex-direction: column; align-items: center; gap: 20px; }
  .step { width: 160px; }
  .step__art { width: 160px; }
  .testimonials { gap: 20px; }
  .tgrid { grid-template-columns: minmax(0, 1fr); }
  .tcard { height: 250px; }
  .wcard__text { gap: 10px; }
  .wcard__num { font-size: 40px; }
  .btn--wide, .btn--wide .btn__fill { width: 200px; }
  .hero__buttons .btn--wide { width: 100%; }
  .services__grid { display: flex; flex-direction: column; }
  .scard { height: 400px; }
  .prices { gap: 20px; }
  .prices__grid { grid-template-columns: minmax(0, 1fr); }
  .prices__card { padding: 20px; }
  .price { gap: 16px; padding: 14px 0; }
  .price__amount { font-size: 16px; }
  .team { gap: 30px; }
  .tm { min-height: 0; }
  .tm__row { flex-direction: column; align-items: center; gap: 40px; }
  .tm__left { max-width: none; width: 100%; }
  .tm__showcase { width: 100%; justify-content: center; }
  .tm__images { height: auto; aspect-ratio: .73; }
  .mobile__row { flex-direction: column; align-items: stretch; gap: 40px; }
  .mobile__copy { max-width: none; gap: 16px; }
  .mobile__places { gap: 8px; }
  .mobile__places li { font-size: 16px; padding: 14px 16px; border-radius: 12px; white-space: normal; }
  .mobile__media { justify-content: center; }
  .mobile__note { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; }
  .gallery { gap: 24px; }
  .gallery__head { align-items: flex-start; flex-direction: column; }
  .gallery__nav { display: none; }
  .gtile { width: 64vw; }
  .gtile__cap { font-size: 18px; left: 16px; right: 16px; bottom: 16px; }
  .gtile__play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .gtile__play::after { left: 21px; top: 16px; border-width: 10px 0 10px 15px; }
  .gallery__foot { flex-direction: column; align-items: flex-start; }
  .gallery__bar { width: 100%; max-width: none; flex: none; }
  .cta { padding: 12px; }
  .cta__panel { max-width: none; gap: 20px; padding: 24px; }
  .faq { gap: 40px; }
  .faq__left { gap: 20px; }
  .acc__a .t-body { padding-left: 48px; }
  .footer__content { padding: 50px 24px; gap: 30px; }
  .footer__row { flex-direction: column; gap: 12px; }
  .footer__left { flex: none; gap: 12px; align-items: stretch; }
  .footer__divider { display: none; }
  .footer__contact { align-items: flex-end; gap: 6px; }
  .footer__navcol { justify-content: flex-start; }
  .footer__nav { gap: 24px; }
  .footer__social { align-items: flex-end; }
  .footer__copy { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-appear], .js [data-words] .word, .js .hero__bg[data-mount-zoom] { opacity: 1; transform: none; transition: none; }
  .js .leaf[data-appear] { opacity: .3; }
  .pcard { transform: none; }
  .parallax img { height: 100%; transform: none; }
}