/* ==========================================================================
   Well Labs+ Medspa — Coconut Creek
   Brand: Ivory #FAF8F3 · Sand #EADFCC · Champagne #DCC7A1
          Sage #9DB5A6 · Deep Teal #2E4A46 · Charcoal #333333
   Type:  Cormorant Garamond (headline) · Montserrat (body)
   ========================================================================== */

:root {
  /* --- Brand palette (exact, from the Well Labs+ brand card) --- */
  --ivory: #faf8f3;      /* IVORY     */
  --sand: #eadfcc;       /* SAND      */
  --champagne: #dcc7a1;  /* CHAMPAGNE */
  --sage: #9db5a6;       /* SAGE      */
  --teal: #2e4a46;       /* DEEP TEAL */
  --charcoal: #333333;   /* CHARCOAL  */

  /* --- Derived working tones ---------------------------------------
     Champagne and sage are too light to carry text on ivory, so text
     and controls use darker tones of the same hue. --gold is sampled
     from the logo wordmark; --gold-ink and --sage-ink clear WCAG AA. */
  --gold: #96744a;       /* logo gold — buttons, icons, rules          */
  --gold-ink: #8b6e3c;   /* small gold text — 4.5:1 on ivory           */
  --sage-ink: #4a6455;   /* small sage text — 6.4:1 on white           */
  --sage-wash: #e9ece5;  /* sage at 18% over ivory — section band      */

  --ink: var(--charcoal);
  --muted: #6b6a69;      /* charcoal at 72% over ivory                 */
  --line: #e6dcc9;       /* sand, lightened — hairlines and borders    */
  --white: #ffffff;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --narrow: 820px;
  --gut: clamp(20px, 5vw, 56px);
  --hdr-h: 92px;
  --sec: clamp(60px, 7vw, 112px);

  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E%3Cpath d='M0,124 C26,96 44,150 74,124 C104,98 122,150 152,124 C172,107 188,136 200,122 L200,400 L0,400 Z' fill='%23fff' filter='url(%23b)'/%3E%3C/svg%3E");

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 24px 60px -30px rgba(46, 74, 70, 0.35);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal); color: var(--ivory); padding: 12px 20px;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --------------------------------------------------------------- headings */

.h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.004em;
  color: var(--teal);
  margin: 0 0 0.5em;
}

.h1, h1 { font-size: clamp(2.15rem, 4.6vw, 3.55rem); }
.h2, h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); }
.h3, h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }

.lede {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.85;
}
.center { text-align: center; }
.center .lede, .section__head .lede { margin-left: auto; margin-right: auto; }
.quiet { color: var(--muted); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1.1em;
}

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-ink);
  font-weight: 500;
  margin-bottom: 1em;
}

.rule {
  display: block;
  width: 64px; height: 1px;
  background: var(--champagne);
  margin: 26px auto 44px;
}

.note, .fine {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.8;
}
.fine { margin-top: 32px; text-align: center; max-width: 70ch; margin-inline: auto; }
.note { margin-top: 28px; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: var(--narrow); }

.section { padding: var(--sec) 0; }
.section--tight { padding: clamp(48px, 6vw, 88px) 0; }
.band { background: var(--white); }
.band--sage { background: var(--sage-wash); }
.band--sand { background: var(--sand); }

.section__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 68px); }
.section__head--left { text-align: left; margin-left: 0; }

.grid { display: grid; gap: clamp(22px, 3vw, 40px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { align-items: center; gap: clamp(32px, 5vw, 80px); }
.grid--flip .split__copy { order: 2; }
.grid--flip .split__art { order: 1; }

.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.6em; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  border: 1px solid transparent;
  white-space: nowrap;
  border-radius: 2px;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--primary { background: var(--teal); color: var(--ivory); border-color: var(--teal); }
.btn--primary:hover { background: var(--gold-ink); border-color: var(--gold-ink); }
.btn--ghost { background: transparent; color: var(--teal); border-color: var(--champagne); }
.btn--ghost:hover { background: var(--sand); color: var(--teal); border-color: var(--champagne); }
.btn--sm { padding: 12px 22px; font-size: 0.65rem; letter-spacing: 0.16em; }
.btn--block { width: 100%; }
.only-xs { display: none; }

.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.btns--center { justify-content: center; }

/* ---------------------------------------------------------------- header */

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--teal);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.is-stuck { box-shadow: 0 14px 34px -24px rgba(46,74,70,.75); }
.hdr__inner {
  display: flex; align-items: center; gap: 28px; height: var(--hdr-h);
  max-width: none;              /* full bleed: logo to the left edge, actions to the right */
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.brand__mark { width: 34px; height: 46px; color: var(--champagne); }
.brand__text { display: block; line-height: 1; }
.brand__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.32rem;
  letter-spacing: 0.19em;
  color: var(--ivory);
  white-space: nowrap;
}
.brand__sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.52rem;
  letter-spacing: 0.42em;
  color: var(--champagne);
  margin-top: 5px;
  padding-left: 3px;
}
.ftr .brand__name { color: var(--ivory); }
.ftr .brand__mark { color: var(--champagne); }

.nav { margin-left: 4px; }   /* stays beside the logo; only the CTAs go right */
.nav > ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav a {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: rgba(250,248,243,.86);
  white-space: nowrap;
  padding: 34px 0;
  transition: color .3s var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--champagne); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 28px;
  height: 1px; background: var(--champagne); transition: right .35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current]::after { right: 0; }

.caret { width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }

.hdr__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }

/* mega menu */
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; padding: 44px var(--gut) 48px; }
.mega__title {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink);
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li + li { margin-top: 9px; }
.mega li a {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--teal);
  padding: 0; display: inline-block;
}
.mega li a::after { display: none; }
.mega li a:hover { color: var(--gold); }
.mega__col--cta { background: var(--ivory); padding: 26px; margin: -10px 0; }
.mega__copy { font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; }
.mega__col--cta .btn { width: 100%; padding-inline: 12px; font-size: 0.6rem; letter-spacing: 0.13em; }

/* burger + drawer */
.burger { display: none; width: 42px; height: 42px; border: 1px solid rgba(220,199,161,.5); background: transparent; border-radius: 2px; cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 1px; background: var(--champagne); margin: 4px auto; transition: transform .3s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--hdr-h) 0 0; z-index: 88;
  background: var(--ivory); overflow-y: auto;
  padding: 32px var(--gut) 64px;
  animation: slideIn .35s var(--ease);
}
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer > nav > ul > li { border-bottom: 1px solid var(--line); }
.drawer > nav > ul > li a { display: block; padding: 15px 0; font-family: var(--serif); font-size: 1.35rem; color: var(--teal); text-decoration: none; }
.drawer__title { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin: 30px 0 12px; }
.drawer__sub > li { margin-bottom: 18px; }
.drawer__sub > li > span { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.drawer__sub ul li a { display: block; padding: 6px 0; font-family: var(--serif); font-size: 1.05rem; color: var(--teal); text-decoration: none; }
.drawer__foot { margin-top: 32px; text-align: center; }
.drawer__foot a:last-child { display: inline-block; margin-top: 16px; color: var(--gold); text-decoration: none; letter-spacing: 0.1em; }

body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------------ media */

.media {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(145deg, var(--sand), var(--ivory) 45%, var(--champagne));
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 2px;
}
.media::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,.35) 0 2px, transparent 2px 26px),
    radial-gradient(80% 60% at 70% 80%, rgba(157,181,166,.28), transparent 70%);
  opacity: .55;
}
.media.has-photo::after { display: none; }
.media__mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: 0.1em; color: rgba(169,133,91,.2);
  z-index: 1; pointer-events: none;
}
.media.has-photo .media__mark { display: none; }
.phero .media__mark { display: none; }

/* --------------------------------------------------------- liquid reveal
   The large editorial images wipe in behind a soft, gently undulating edge
   that rises up the frame — a water line settling rather than a hard wipe.
   The mask is an inline SVG: a blurred wavy-topped shape, twice the height of
   the element, slid from below to fully covering.

   The class is added by JS, so with JS unavailable the images simply show. */

.media--wave {
  -webkit-mask-image: var(--wave-mask);
          mask-image: var(--wave-mask);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* 0% 0% shows only the wave-edged lower part; 100% is fully uncovered. */
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
}
.media--wave.is-in {
  /* A more even curve than --ease: the default easeOut crosses the frame in the
     first third, so the wave edge is gone before it reads. */
  animation: waveIn 1.9s cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}
@keyframes waveIn {
  from { -webkit-mask-position: 0% 0%;   mask-position: 0% 0%; }
  to   { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
}

/* the frame settles as the water line passes over it */
.wave-wrap { overflow: hidden; }
/* No transition on the resting state — the zoom must be applied instantly, or
   adding the class animates INTO the zoom and you see it drift in then back. */
.wave-wrap > .media--wave { transform: scale(1.05); }
.wave-wrap > .media--wave.is-in {
  transform: none;
  transition: transform 2.1s cubic-bezier(0.45, 0.05, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  .media--wave, .media--wave.is-in {
    -webkit-mask-image: none; mask-image: none;
    animation: none; transform: none;
  }
}

/* ------------------------------------------------------------------- intro
   Scroll-driven video opener (home only). The stage pins with position:sticky
   while the section scrolls past; JS writes progress into the custom props
   below, so all the motion is GPU-friendly transform/opacity. Same mechanic
   GSAP ScrollTrigger uses for a pinned scene — no library needed. */

.intro {
  position: relative;
  height: 360vh;
  background: var(--ivory);   /* what the stage dissolves into on the way out */
}
.intro__stage {
  position: sticky; top: 0;
  /* Layered by preference, weakest first. 100vh: works everywhere, but on
     mobile Safari is ambiguous about toolbar state — can be shorter than
     what's actually visible once the toolbar collapses, leaving a gap below
     the pinned hero. --vh (JS, window.innerHeight, frozen except on a real
     resize) fixes that specific gap and is also the only one of these that
     works right in some in-app WebViews (Messages, Instagram) that don't
     implement modern viewport units reliably at all — but it's frozen, so on
     a browser where scroll genuinely changes the visible area it can equally
     go stale and leave the same gap. 100dvh is what actually solves this
     properly: browser-native, continuously tracks the real visible area as
     the toolbar animates, no gap, no JS-triggered snap. It wins last, in any
     browser that understands it — which is most of them today; --vh only
     ends up mattering in the WebViews that don't. */
  height: 100vh; height: 100svh; height: calc(var(--vh, 1vh) * 100); height: 100dvh;
  overflow: hidden;
}

/* The section that follows lives INSIDE the pinned stage, behind the video, so
   it is already sitting in place when the front layer dissolves off it. Nothing
   scrolls up into view — the opener simply clears away from what was always
   there. */
.intro__behind {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--white);
  padding: clamp(40px, 6vh, 90px) 0;
  overflow: hidden;
}
.intro__behind .h2 {
  margin-bottom: 0;
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);   /* larger than a standard section head */
}
.intro__behind .eyebrow { margin-bottom: 0.9em; }
.intro__behind .rule { margin: 26px auto 60px; width: 84px; }

/* Each pillar gets a medallion echoing the oval of the WL monogram: a double
   hairline pill, a soft sand wash, a numeral riding the top edge, and a much
   larger icon than a plain line-icon row would carry. */
.pillars--lux { gap: clamp(24px, 3vw, 48px); }
.pillars--lux .pillar { padding-inline: clamp(4px, 1vw, 18px); }
.pillars--lux .pillar + .pillar { border-left: 1px solid var(--line); }

.pillar__medal {
  position: relative;
  display: grid; place-items: center;
  width: 104px; height: 132px;
  margin: 0 auto 30px;
  border: 1px solid var(--champagne);
  border-radius: 999px;
  background: linear-gradient(165deg, rgba(234,223,204,.55), rgba(250,248,243,0) 70%);
}
.pillar__medal::before {          /* inner hairline, like the logo's second oval */
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(220,199,161,.5);
  border-radius: 999px;
}
.pillar__medal .ico {
  width: 52px; height: 52px;
  color: var(--gold);
  stroke-width: 1.15;
  margin: 0;
}
.pillar__num {
  position: absolute; top: -9px; left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  padding: 0 9px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  color: var(--gold-ink);
}
.pillars--lux .pillar h3 {
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
}
.pillars--lux .pillar p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 28ch;
}

/* The revealed layer doesn't just sit there waiting — its elements zoom up and
   fade in as the opener clears off them, staggered heading → rule → each
   pillar. One var per element; opacity, lift and scale all derive from it. */
.intro__behind .eyebrow,
.intro__behind .h2,
.intro__behind .rule,
.intro__behind .pillar { will-change: transform, opacity; }

.intro__behind .eyebrow {
  opacity: var(--r0);
  transform: translateY(calc((1 - var(--r0)) * 14px));
}
.intro__behind .h2 {
  opacity: var(--r1);
  transform: translateY(calc((1 - var(--r1)) * 20px)) scale(calc(0.90 + 0.10 * var(--r1)));
}
.intro__behind .rule {
  opacity: var(--r2);
  transform: scaleX(calc(0.4 + 0.6 * var(--r2)));
}
.intro__behind .pillar:nth-child(1) {
  opacity: var(--r3);
  transform: translateY(calc((1 - var(--r3)) * 22px)) scale(calc(0.90 + 0.10 * var(--r3)));
}
.intro__behind .pillar:nth-child(2) {
  opacity: var(--r4);
  transform: translateY(calc((1 - var(--r4)) * 22px)) scale(calc(0.90 + 0.10 * var(--r4)));
}
.intro__behind .pillar:nth-child(3) {
  opacity: var(--r5);
  transform: translateY(calc((1 - var(--r5)) * 22px)) scale(calc(0.90 + 0.10 * var(--r5)));
}
.intro__behind .pillar:nth-child(4) {
  opacity: var(--r6);
  transform: translateY(calc((1 - var(--r6)) * 22px)) scale(calc(0.90 + 0.10 * var(--r6)));
}

/* Everything the opener is made of — video, copy, card, cue — fades as one. */
.intro__front {
  position: absolute; inset: 0;
  opacity: var(--eo);
}

.intro__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--ez));  /* pushes in as the scene exits */
  transform-origin: 50% 45%;
  will-change: transform;
}
/* Full lockup centred in the empty wall on the left of the frame — it holds
   the opening shot while the clip scrubs, then clears as the headline arrives.
   Anchored by percentage so it stays in that wall area at any width. */
.intro__mark {
  position: absolute;
  left: 31%; top: 39%;
  transform: translate(-50%, -50%) scale(var(--ms));
  width: clamp(220px, 24vw, 380px);
  color: var(--gold);
  opacity: var(--om);          /* scroll-driven: fades out as you begin scrolling */
  will-change: transform, opacity;
  pointer-events: none;
}
/* Inner layer carries the one-off entrance on page load, kept separate from the
   scroll-driven opacity above so the two never fight over the same property. */
.lock {
  display: flex; flex-direction: column; align-items: center;
  animation: lockIn 1.15s var(--ease) both;
}
@keyframes lockIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lock { animation: none; } }
.lock__mark { width: 27%; height: auto; margin-bottom: 8%; }
.lock__name {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.3vw, 3.05rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  line-height: 1;
  text-indent: 0.15em;      /* optical centring against the tracking */
}
.lock__sub {
  display: flex; align-items: center; gap: 0.9em;
  align-self: stretch;
  justify-content: center;
  margin-top: 0.85em;
  font-family: var(--sans);
  font-size: clamp(0.6rem, 0.86vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
}
.lock__sub::before,
.lock__sub::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .75;
}

.intro__inner {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-end;          /* anchor the copy to the bottom */
  justify-content: space-between;
  gap: clamp(24px, 4vw, 72px);
  max-width: none;                /* break out of .wrap centring, sit nearer the edge */
  padding: 0 var(--gut) clamp(48px, 8vh, 96px);
}
.intro__copy { max-width: min(620px, 50%); }
/* Narrower than the copy block itself so the supporting line wraps to three
   lines instead of two, matching the rest of the copy's more deliberate pace. */
.intro__copy .lede { max-width: 430px; }

/* Each element carries its own opacity / offset / scale, written by the loop.
   One set of vars covers both directions: they zoom UP into place on the way
   in, and zoom back DOWN on the way out, in reverse order. */
.intro__copy .eyebrow,
.intro__title,
.intro__copy .lede,
.intro__copy .btns,
.intro__meta,
.intro__card { will-change: transform, opacity; }

.intro__copy .eyebrow {
  opacity: var(--o1);
  transform: translateY(calc(var(--y1) * 1px)) scale(var(--s1));
  transform-origin: 0% 50%;
}
.intro__title {
  opacity: var(--o2);
  transform: translateY(calc(var(--y2) * 1px)) scale(var(--s2));
  transform-origin: 0% 50%;
}
.intro__copy .lede,
.intro__copy .btns,
.intro__meta {
  opacity: var(--o3);
  transform: translateY(calc(var(--y3) * 1px)) scale(var(--s3));
  transform-origin: 0% 50%;
}
.intro__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.7rem, 5.4vw, 4.7rem);
  line-height: 1.03; letter-spacing: -0.005em;
  color: var(--teal); margin: 0 0 24px;
}
.intro__title span { display: block; }
.intro__copy .lede { color: var(--charcoal); }
.intro__copy .btn--ghost { color: var(--teal); border-color: var(--gold); background: rgba(255,255,255,.35); }
.intro__copy .btn--ghost:hover { background: var(--teal); color: var(--ivory); border-color: var(--teal); }
.intro__meta { margin-top: 28px; font-size: 0.82rem; color: var(--charcoal); letter-spacing: 0.03em; }
.intro__meta a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--gold); }

/* The opener runs full-bleed from the very top of the page. Without this the
   header still reserves its height while sitting at opacity 0, leaving a strip
   of bare page background above the video on load. */
body.page-home main { margin-top: calc(var(--hdr-h) * -1); }

/* ...and while the header is still fading in, it must not be hoverable, or the
   Treatments mega menu opens under a cursor that happens to be resting there. */
body.page-home .hdr { pointer-events: none; }
body.page-home.nav-ready .hdr { pointer-events: auto; }

/* The nav arrives with the eyebrow but does NOT leave with it — once it is in,
   it stays, because it is the site header. */
body.page-home .hdr {
  opacity: var(--onav);
  transform: translateY(calc((var(--onav) - 1) * 14px));
}

/* Booking card, opposite the copy. Arrives last in the sequence. */
.intro__card {
  flex: 0 0 auto;
  width: min(360px, 32%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(22px, 2vw, 30px);
  box-shadow: var(--shadow);
  opacity: var(--o4);
  transform: translateY(calc(var(--y4) * 1px)) scale(var(--s4));
  transform-origin: 100% 100%;
}
.intro__card-title {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.7vw, 1.65rem);
  line-height: 1.15;
  color: var(--teal);
  margin: 0 0 10px;
}
.intro__card-copy {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0 0 20px;
}
.intro__card-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.intro__card-btns .btn { flex: 1 1 auto; padding-inline: 14px; }
.intro__card-btns .btn--primary { flex-basis: 100%; }

.intro__cue {
  position: absolute; left: 50%; bottom: clamp(24px, 4vh, 48px);
  width: 1px; height: 58px;
  transform: translateX(-50%);
  background: rgba(46,74,70,.18);
  opacity: var(--ic);
  overflow: hidden;
}
.intro__cue span {
  position: absolute; inset: 0;
  background: var(--teal);
  animation: cue 2.1s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* All three of these — copy zoom, cue, nav — are driven by the rAF loop in
   main.js, the same loop that scrubs the video. One driver, not two.

   The defaults on :root are the *visible* end state, so with JS unavailable the
   headline and nav simply show. `html.js` swaps in the hidden start state, and
   is set by an inline script in <head> so there is no flash before the loop
   takes over. */
:root {
  --ez: 1; --eo: 1; --onav: 1; --ic: 1; --om: 1; --ms: 1;
  --r0: 1; --r1: 1; --r2: 1; --r3: 1; --r4: 1; --r5: 1; --r6: 1;
  --o1: 1; --o2: 1; --o3: 1; --o4: 1;
  --y1: 0; --y2: 0; --y3: 0; --y4: 0;
  --s1: 1; --s2: 1; --s3: 1; --s4: 1;
}
html.js {
  --onav: 0;
  --r0: 0; --r1: 0; --r2: 0; --r3: 0; --r4: 0; --r5: 0; --r6: 0;
  --o1: 0; --o2: 0; --o3: 0; --o4: 0;
  --y1: 14; --y2: 22; --y3: 18; --y4: 22;
  --s1: .92; --s2: .92; --s3: .92; --s4: .92;
}

/* The opener is decoration — skip it entirely when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

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

/* page hero — sand band, photo shown clean beside the copy (never behind it) */
.phero { background: var(--sand); padding: clamp(48px, 6vw, 84px) 0; }
.phero__inner {
  display: grid; grid-template-columns: 1.1fr 1fr;
  align-items: center; gap: clamp(28px, 4vw, 64px);
}
.phero__copy > * { max-width: 640px; }
.phero .lede { margin-bottom: 0; }
.phero__media { aspect-ratio: 4 / 3; box-shadow: var(--shadow); }

.pills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 30px 0 0; padding: 0; }
.pills li {
  font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: var(--teal);
  border: 1px solid var(--champagne); border-radius: 100px;
  padding: 9px 18px; background: rgba(255,255,255,.55);
}

/* crumbs */
.crumbs { background: var(--white); border-bottom: 1px solid var(--line); font-size: 0.7rem; letter-spacing: 0.08em; }
.crumbs .wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 14px; padding-bottom: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs em { font-style: normal; color: var(--teal); }
.crumbs span { color: var(--champagne); }

/* ---------------------------------------------------------------- pillars */

.pillar { text-align: center; }
.pillar .ico { width: 46px; height: 46px; margin: 0 auto 22px; color: var(--gold); stroke-width: 1.2; }
.pillar h3 {
  font-family: var(--sans); font-size: 0.71rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 12px;
}
.pillar p { font-size: 0.9rem; color: var(--muted); max-width: 25ch; margin-inline: auto; }
.pillar--link { text-decoration: none; display: block; padding: 34px 20px; border: 1px solid transparent; background: var(--sage-wash); transition: border-color .35s var(--ease), transform .35s var(--ease); }
.pillar--link:hover { border-color: var(--sage); transform: translateY(-4px); }

/* ------------------------------------------------------------------ split */

.split__media { aspect-ratio: 5 / 4; }
.split__copy .btn { margin-top: 26px; }
.split__copy .ticks { margin-top: 24px; }

/* ------------------------------------------------------- treatment cards */

.tcard {
  display: block; text-decoration: none; background: var(--sand);
  border: 1px solid transparent; border-radius: 2px; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold); }
.tcard__media { aspect-ratio: 16 / 11; }
.tcard__body { padding: 26px 26px 30px; }
.tcard__body h3 { font-size: 1.35rem; margin-bottom: 8px; }
.tcard__body p { font-size: 0.88rem; color: var(--charcoal); margin-bottom: 18px; }
.tcard__link {
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-ink);
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.tcard__link i { transition: transform .35s var(--ease); font-style: normal; }
.tcard:hover .tcard__link i, .tcard__link:hover i { transform: translateX(5px); }

/* categories on home */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 34px); }
.cat { background: var(--sand); border: 1px solid transparent; overflow: hidden; border-radius: 2px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cat:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.cat__media .media { aspect-ratio: 4 / 3; }
.cat__body { padding: 26px 24px 30px; }
.cat__body h3 { font-size: 1.4rem; margin-bottom: 6px; }
.cat__body > p { font-size: 0.82rem; color: var(--charcoal); margin-bottom: 16px; }
.cat__body ul { list-style: none; margin: 0 0 18px; padding: 0; }
.cat__body li { border-top: 1px solid rgba(169,133,91,.28); }
.cat__body li a { display: block; padding: 8px 0; font-size: 0.86rem; text-decoration: none; color: var(--teal); transition: color .3s, padding-left .3s; }
.cat__body li a:hover { color: var(--gold); padding-left: 6px; }

/* ----------------------------------------------------------------- finder */

.finder__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 46px; }
.chip {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 12px 22px; border: 1px solid var(--line); background: var(--white);
  color: var(--muted); border-radius: 100px; cursor: pointer;
  transition: all .3s var(--ease);
}
.chip:hover { border-color: var(--champagne); color: var(--teal); }
.chip.is-active { background: var(--teal); border-color: var(--teal); color: var(--ivory); }
.finder__panel { display: none; }
.finder__panel.is-active { display: block; animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------------ lists */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 0.93rem; color: var(--charcoal); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 13px; height: 7px; border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: rotate(-45deg);
}
.ticks--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }
.list-title { font-weight: 500; color: var(--teal); margin-bottom: 10px; }

.notice {
  border-left: 2px solid var(--champagne);
  background: var(--white);
  padding: 16px 20px; font-size: 0.87rem; color: var(--muted);
}

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

.icard { background: var(--sage-wash); border: 1px solid transparent; padding: 32px 28px; border-radius: 2px; transition: transform .4s var(--ease), border-color .4s var(--ease); }
.band .icard { background: var(--sage-wash); }
.band--sage .icard,
.band--sage .quote,
.band--sage .tcard { background: var(--white); }
.icard:hover { transform: translateY(-4px); border-color: var(--sage); }
.icard h3 { font-size: 1.32rem; }
.icard p { font-size: 0.9rem; color: var(--charcoal); }
.icard__best { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.8rem; }
.icard__best strong { color: var(--teal); font-weight: 500; }

/* ------------------------------------------------------------------ steps */

.steps__list { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 40px); }
.steps__list li { position: relative; padding-top: 26px; border-top: 1px solid var(--champagne); }
.steps__num { display: block; font-family: var(--serif); font-size: 2.2rem; color: var(--champagne); line-height: 1; margin-bottom: 14px; }
.steps__list h3 { font-size: 1.15rem; margin-bottom: 8px; }
.steps__list p { font-size: 0.87rem; color: var(--muted); }

/* --------------------------------------------------------------- timeline */

.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--champagne); }
.tl li { position: relative; padding: 0 0 44px 48px; }
.tl li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--gold); }
.tl__year { display: block; font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; }
.tl__body h3 { font-size: 1.5rem; margin-bottom: 10px; }
.tl__body p { color: var(--muted); font-size: 0.94rem; }

/* --------------------------------------------------------- before / after */

.ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.ba__pair { margin: 0; }
.ba__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ba__img { position: relative; }
.ba__img .media { aspect-ratio: 3 / 4; border-radius: 0; }
.ba__img span {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  border-left: 2px solid var(--sage);
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  background: rgba(250,248,243,.9); color: var(--teal); padding: 5px 10px;
}
.ba figcaption { margin-top: 12px; font-size: 0.72rem; color: var(--muted); text-align: center; letter-spacing: 0.05em; }

/* ------------------------------------------------------------- quotes */

.quotes { display: flex; gap: clamp(20px, 3vw, 34px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.quotes::-webkit-scrollbar { display: none; }
.quote {
  flex: 0 0 clamp(280px, 32%, 400px);
  scroll-snap-align: start;
  background: var(--ivory); border: 1px solid var(--line); border-left: 3px solid var(--champagne);
  padding: 34px 30px; margin: 0; border-radius: 2px;
  display: flex; flex-direction: column;
}
.band .quote { background: var(--ivory); }
.band--sage .tier { background: var(--white); }
.stars { color: var(--champagne); letter-spacing: 0.24em; font-size: 0.85rem; margin-bottom: 16px; }
.quote__tag { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 14px; }
.quote blockquote { margin: 0 0 18px; font-family: var(--serif); font-size: 1.13rem; line-height: 1.62; color: var(--teal); }
.quote figcaption { margin-top: auto; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 34px; }
.cnav {
  width: 46px; height: 46px; border: 1px solid var(--champagne); background: transparent;
  color: var(--teal); cursor: pointer; border-radius: 50%; font-size: 0.95rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.cnav:hover { background: var(--teal); color: var(--ivory); border-color: var(--teal); }

/* -------------------------------------------------------------------- faq */

.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.2rem; color: var(--teal);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i {
  flex: 0 0 auto; position: relative; width: 14px; height: 14px;
}
.faq__item summary i::before, .faq__item summary i::after {
  content: ""; position: absolute; background: var(--gold); transition: transform .3s var(--ease);
}
.faq__item summary i::before { left: 0; top: 6px; width: 14px; height: 1px; }
.faq__item summary i::after { left: 6px; top: 0; width: 1px; height: 14px; }
.faq__item[open] summary i::after { transform: scaleY(0); }
.faq__body { padding: 0 0 26px; max-width: 76ch; }
.faq__body p { font-size: 0.94rem; color: var(--muted); }

/* ------------------------------------------------------------------ tiers */

.tiers { align-items: stretch; }
.tier { position: relative; background: var(--sand); border: 1px solid transparent; padding: clamp(32px, 4vw, 52px); border-radius: 2px; display: flex; flex-direction: column; }
.tier--featured { background: var(--teal); border-color: var(--teal); color: rgba(250,248,243,.86); }
.tier--featured h3, .tier--featured .tier__price { color: var(--ivory); }
.tier--featured .tier__annual { color: var(--champagne); }
.tier--featured .ticks li { color: rgba(250,248,243,.86); }
.tier--featured .ticks li::before { border-color: var(--champagne); }
.tier--featured .btn--primary { background: var(--champagne); border-color: var(--champagne); color: var(--teal); }
.tier--featured .btn--primary:hover { background: var(--ivory); border-color: var(--ivory); }
.tier__flag {
  position: absolute; top: 22px; right: 22px;
  font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--champagne); color: var(--teal); padding: 6px 12px; border-radius: 100px;
}
.tier h3 { font-size: 1.75rem; margin-bottom: 6px; }
.tier__price { font-family: var(--serif); font-size: 3.1rem; line-height: 1; color: var(--teal); margin: 12px 0 6px; }
.tier__price span { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--muted); }
.tier--featured .tier__price span { color: var(--champagne); }
.tier__annual { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 20px; }
.tier__copy { font-size: 0.92rem; margin-bottom: 24px; }
.tier .ticks { margin-bottom: 30px; }
.tier .btn { margin-top: auto; }

/* ----------------------------------------------------------------- offers */

.offer { display: grid; grid-template-columns: 1fr 1.15fr; background: var(--sand); border: 1px solid transparent; border-radius: 2px; overflow: hidden; }
.offer__media .media { height: 100%; aspect-ratio: auto; min-height: 240px; }
.offer__body { padding: clamp(26px, 3vw, 38px); }
.offer__body h3 { font-size: 1.5rem; }
.offer__price { font-family: var(--serif); font-size: 2.1rem; color: var(--gold-ink); line-height: 1; margin: 6px 0 16px; }
.offer__price span { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.offer__body p { font-size: 0.92rem; color: var(--charcoal); }
.offer__body .btn { margin-top: 22px; }

/* -------------------------------------------------------------------- bio */

.team { display: grid; gap: clamp(40px, 6vw, 90px); }
.bio { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.bio--flip .bio__art { order: 2; }
.bio__media { aspect-ratio: 4 / 5; }
.bio__copy h3 { font-size: 2rem; margin-bottom: 4px; }
.bio__role { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 22px; }
.bio__copy p { font-size: 0.93rem; color: var(--muted); }
.bio__meta { margin: 26px 0 0; display: grid; gap: 14px; }
.bio__meta dt { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.bio__meta dd { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* ------------------------------------------------------------------- form */

.cta-form { background: var(--teal); color: rgba(250,248,243,.86); }
.cta-form .h2, .cta-form .eyebrow { color: var(--ivory); }
.cta-form .eyebrow { color: var(--champagne); }
.cta-form .lede { color: rgba(250,248,243,.75); }
.cta-form .ticks li { color: rgba(250,248,243,.8); }
.cta-form .ticks li::before { border-color: var(--champagne); }
.grid--form { align-items: start; gap: clamp(36px, 5vw, 80px); }

.mini-contact { display: grid; gap: 12px; margin: 30px 0 0; }
.mini-contact dt { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne); }
.mini-contact dd { margin: 2px 0 0; }
.mini-contact a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid rgba(220,199,161,.4); }

.form { background: var(--ivory); padding: clamp(28px, 3.4vw, 44px); border-radius: 2px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: block; font-size: 0.63rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 16px; }
.form input, .form select, .form textarea {
  width: 100%; margin-top: 8px;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 300;
  letter-spacing: normal; text-transform: none; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 2px;
  padding: 13px 14px; transition: border-color .3s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--gold); outline: none; }
.form textarea { resize: vertical; }
.form .check { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0.01em; font-size: 0.72rem; font-weight: 300; color: var(--muted); line-height: 1.65; }
.form .check input { width: auto; margin-top: 4px; flex: 0 0 auto; }
.form .btn { margin-top: 10px; }
.form__status { margin: 14px 0 0; font-size: 0.82rem; color: var(--teal); min-height: 1.2em; }
.form__status.is-error { color: #9a3b2f; }

/* ---------------------------------------------------------------- details */

.details { display: grid; gap: 22px; margin: 30px 0 0; }
.details dt { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 6px; }
.details dd { margin: 0; font-size: 0.94rem; color: var(--charcoal); }
.details a { color: var(--charcoal); text-decoration: none; border-bottom: 1px solid var(--champagne); }
.details a:hover { color: var(--gold); }

.map { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); filter: grayscale(.35) sepia(.12); }
.map--tall { aspect-ratio: 3 / 3.2; }

/* ---------------------------------------------------------------- closing */

.closing { background: var(--sand); }
.closing .lede { margin-inline: auto; }

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

.ftr { background: var(--teal); color: rgba(250,248,243,.72); font-size: 0.88rem; }
.ftr__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 60px); padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(40px, 5vw, 64px); }
.ftr__tag { font-family: var(--serif); font-size: 1.2rem; color: var(--champagne); margin: 20px 0 10px; letter-spacing: 0.02em; }
.ftr__area { font-size: 0.82rem; max-width: 34ch; }
.ftr__title { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne); margin: 0 0 18px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 10px; }
.ftr a { color: rgba(250,248,243,.78); text-decoration: none; transition: color .3s var(--ease); }
.ftr a:hover { color: var(--champagne); }
.ftr address { font-style: normal; margin-bottom: 16px; }
.ftr__hours { margin-bottom: 16px; font-size: 0.82rem; }
.ftr__fin { margin-top: 16px; font-size: 0.76rem; color: var(--champagne); }

.ribbon { background: var(--sage); text-align: center; padding: 16px; }
.ribbon span { font-family: var(--sans); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--white); }

.ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; padding-bottom: 28px; font-size: 0.74rem; letter-spacing: 0.04em; }
.ftr__legal p { margin: 0; }
.ftr__credit { color: rgba(250,248,243,.55); letter-spacing: 0.06em; }

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

/* Card reveals. Gated on html.js so a JS failure can never leave content
   permanently invisible. */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* Section headings — eyebrow, headline, rule, supporting line — each rising in
   turn. The .rv class is added by JS, so without it nothing is hidden. */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  will-change: transform, opacity;
}
.rv.is-in { opacity: 1; transform: none; }
.rule.rv { transform: translateY(26px) scaleX(0.3); }
.rule.rv.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, .rv { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ responsive */

/* Full-bleed header needs the gutter and tracking pulled in before the nav and
   the CTAs collide — this band sits above the 1180px rules below. */
@media (max-width: 1400px) {
  .hdr__inner { gap: 18px; padding-inline: clamp(20px, 3vw, 40px); }
  .nav > ul { gap: 22px; }
  .nav a { font-size: 0.65rem; letter-spacing: 0.13em; }
  .hdr__actions .btn { padding-inline: 16px; }
}

@media (max-width: 1180px) {
  .nav > ul { gap: 20px; }
  .nav a { font-size: 0.64rem; letter-spacing: 0.12em; }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .mega__inner { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1000px) {
  :root { --hdr-h: 78px; }
  .nav, .hide-sm { display: none; }
  .burger { display: block; }

  .steps__list { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .ba { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 860px) {
}

@media (max-width: 860px) {
  /* The header-fades-in-with-scroll effect (and the copy fading in beneath
     it) only reads as cinematic when the video is full-bleed, hiding the
     reserved nav/copy space entirely until it's revealed — which is exactly
     what happens on desktop. On phones the video is a fixed 46vh strip, not
     full-bleed, so that same reserved space is plainly visible underneath it
     from the first paint: no header, no headline, just a blank ivory gap
     roughly half the screen tall. That reads as a broken page, not a reveal.
     Skip the fade on phones — header and copy are visible immediately, the
     video still scrubs exactly as before. */
  body.page-home .hdr { opacity: 1; transform: none; pointer-events: auto; }
  .intro__copy .eyebrow,
  .intro__title,
  .intro__copy .lede,
  .intro__copy .btns {
    opacity: 1; transform: none;
  }
  /* The negative margin above pulls the video up underneath the header —
     the right move when the header is invisible until scrolled to (desktop),
     wrong now that the header is always solid on phones: it was covering the
     top strip of the video behind an opaque bar. Cancel it so the video
     starts in normal flow, right below the header, top and bottom intact. */
  body.page-home main { margin-top: 0; }
  /* .intro__stage is itself position:sticky; top:0 — same anchor the header
     uses. Once scrolled, both would be pinned at the same viewport position,
     and the header (z-index 90) would paint over the top of the stage for
     the ENTIRE scroll-through, not just at load. Offset the stage below the
     header instead, and shrink it to match so nothing pushes below the fold.
     Everything inside switches from vh to % right after this, so it scales
     against the stage's own (now header-aware) height instead of ignoring
     it the way vh always does. */
  .intro__stage {
    top: var(--hdr-h);
    height: calc(100vh - var(--hdr-h)); height: calc(100svh - var(--hdr-h));
    height: calc(var(--vh, 1vh) * 100 - var(--hdr-h));
    height: calc(100dvh - var(--hdr-h));   /* wins last where supported — see the base rule */
  }

  /* shorter opener on phones — 260vh of scrolling is a long way on a small screen */
  .intro { height: 240vh; }
  /* a 16:9 clip cropped into a tall phone viewport loses the subject off the
     right edge, so bias the crop toward her instead of centring it */
  .intro__video { object-position: 68% 50%; }
  /* A phone viewport crops this clip to a face close-up, and copy laid over it
     is unreadable at any weight. So the pinned stage splits instead: video on
     top, copy below it on ivory. Still pinned, still scrubbed, still pops in —
     just never on top of skin. */
  .intro__stage {
    background: var(--ivory);
    /* overflow:hidden exists so the video's push-in scale (--ez, during the
       exit transition) doesn't visually spill past the pinned section — but
       it was collaterally clipping the copy below whenever real device
       chrome left slightly less room than assumed, hiding a button entirely
       rather than just tightening the margin. Two margin increases in a row
       weren't enough to outrun every device's actual chrome height, so stop
       relying on guessing it: let content past the ideal boundary just be
       visible instead of erased. The brief video-overflow this trades away
       only shows during a short scroll transition, not the steady state. */
    overflow: visible;
  }
  .intro__video { inset: 0 0 auto 0; height: 48%; }
  /* The phone crop puts her face centre-right, so centring the lockup lands it
     straight on her. Tuck it into the wall on the left instead. */
  .intro__mark { left: 31%; top: 20%; width: min(46vw, 176px); }
  .lock__name { font-size: 1.5rem; letter-spacing: 0.08em; text-indent: 0.08em; white-space: nowrap; }
  .lock__sub { letter-spacing: 0.34em; text-indent: 0.34em; gap: 0.6em; }
  .intro__inner {
    inset: 48% 0 0 0;
    align-items: center;
    padding: 20px var(--gut);
  }
  .intro__copy { max-width: none; transform-origin: 50% 50%; }
  /* Three lines on desktop reads fine against a full-bleed video; on a phone
     it eats vertical room the video could use instead. Merge the last two
     spans onto one line — content/markup stay shared with desktop (still
     three separate <span>s, .join('')-ed with no whitespace between them in
     the markup), this only changes how they flow on narrow screens. */
  .intro__title span:nth-child(2),
  .intro__title span:nth-child(3) { display: inline; }
  .intro__title span:nth-child(3)::before { content: " "; }
  .intro__title { font-size: clamp(2rem, 8.6vw, 2.7rem); margin-bottom: 18px; }
  .intro__copy .lede { font-size: 0.92rem; line-height: 1.6; max-width: none; }   /* the 430px desktop cap isn't meant for the mobile split layout */
  .intro__copy .btns { margin-top: 22px; gap: 10px; }
  .intro__meta { display: none; }   /* address + phone still in the footer */
  /* the split stage has no room for the card — the Book A Consultation button
     right above it covers the same job, and the full card returns further down
     the page in the consultation section */
  .intro__card { display: none; }
  .intro__cue { display: none; }
}

/* Short phones can't fit the supporting line under a 55vh video — give the
   headline and CTAs the room instead. */
@media (max-width: 860px) and (max-height: 720px) {
  .intro__video { height: 50%; }
  .intro__mark { top: 20%; }
  .intro__inner { inset: 50% 0 0 0; }
  .intro__copy .lede { display: none; }
  .phero__inner { grid-template-columns: 1fr; gap: 30px; }
  .phero__copy > * { max-width: none; }
  .phero__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .grid--2, .grid--3, .grid--4, .cats, .tiers { grid-template-columns: 1fr; }
  .grid--flip .split__copy { order: 0; }
  .grid--flip .split__art { order: 0; }
  .bio { grid-template-columns: 1fr; }
  .bio--flip .bio__art { order: 0; }
  .bio__media { aspect-ratio: 4 / 3; max-width: 460px; }
  .offer { grid-template-columns: 1fr; }
  .offer__media .media { min-height: 200px; aspect-ratio: 16 / 9; }
  .steps__list { grid-template-columns: 1fr; }
  .ticks--grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .quote { flex-basis: 84%; }
  .ftr__top { grid-template-columns: 1fr; }
  .ftr__legal { flex-direction: column; }
  .btns .btn { flex: 1 1 auto; }
  .brand__name { font-size: 1.08rem; letter-spacing: 0.14em; }
  .brand__sub { font-size: 0.46rem; letter-spacing: 0.34em; }
}

@media (max-width: 560px) {
  :root { --hdr-h: 68px; }
  .hdr__inner { gap: 10px; }
  .brand { gap: 9px; }
  .brand__mark { width: 26px; height: 36px; }
  .brand__name { font-size: 0.92rem; letter-spacing: 0.11em; }
  .brand__sub { font-size: 0.42rem; letter-spacing: 0.3em; margin-top: 4px; }
  .hdr__actions { gap: 8px; }
  .hdr__actions .btn { padding: 10px 14px; font-size: 0.58rem; letter-spacing: 0.1em; }
  .burger { width: 38px; height: 38px; }

  .hide-xs { display: none; }
  .only-xs { display: inline; }
  .pills li { font-size: 0.58rem; padding: 8px 14px; }
  .phero { padding-top: 54px; }
}

/* The revealed layer has to live inside one pinned viewport, so it goes 2x2 on
   phones rather than a single column of four. */
@media (max-width: 760px) {
  .intro__behind { padding: clamp(20px, 3vh, 40px) 0; }
  .intro__behind .grid--4 { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .pillars--lux .pillar + .pillar { border-left: 0; }
  .pillar__medal { width: 74px; height: 94px; margin-bottom: 18px; }
  .pillar__medal .ico { width: 36px; height: 36px; }
  .pillar__num { font-size: 0.5rem; top: -7px; }
  .intro__behind .rule { margin: 16px auto 30px; }
  .intro__behind .h2 { font-size: clamp(1.55rem, 6.5vw, 2rem); }
  .intro__behind .rule { margin: 16px auto 26px; }
  .intro__behind .ico { width: 34px; height: 34px; margin-bottom: 12px; }
  .intro__behind .pillar h3 { font-size: 0.62rem; letter-spacing: 0.14em; margin-bottom: 7px; }
  .intro__behind .pillar p { font-size: 0.78rem; line-height: 1.55; }
}

@media (max-width: 760px) and (max-height: 720px) {
  .intro__behind .pillar p { display: none; }
}

@media print {
  .hdr, .drawer, .ftr, .btns, .cta-form { display: none; }
  body { background: #fff; }
}


/* ---------------------------------------------- header + drawer on deep teal */

.hdr .btn--primary { background: var(--champagne); border-color: var(--champagne); color: var(--teal); }
.hdr .btn--primary:hover { background: var(--ivory); border-color: var(--ivory); color: var(--teal); }
.hdr .btn--ghost { color: var(--ivory); border-color: rgba(220,199,161,.55); }
.hdr .btn--ghost:hover { background: var(--champagne); border-color: var(--champagne); color: var(--teal); }

.drawer { background: var(--teal); }
.drawer > nav > ul > li { border-bottom-color: rgba(220,199,161,.22); }
.drawer > nav > ul > li a,
.drawer__sub ul li a { color: var(--ivory); }
.drawer__title { color: var(--champagne); }
.drawer__sub > li > span { color: rgba(250,248,243,.6); }
.drawer__foot a:last-child { color: var(--champagne); }
.drawer .btn--primary { background: var(--champagne); border-color: var(--champagne); color: var(--teal); }