/* ============================================================
   Liveo Beauty — concept redesign
   Palette + type derived from the live brand:
   pine #254C3C (logo green) · ivory paper · blush #FEE5D9
   celery #E2F2C9 · gold foil #C8A96A (gift card)
   Display: Domaine Display Narrow (Liveo's own licensed face)
   ============================================================ */

@font-face {
  font-family: 'Domaine Display Narrow';
  src: url('../assets/fonts/domaine-display-narrow.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --pine: #254C3C;
  --pine-deep: #17332A;
  --pine-soft: #35604D;
  --ivory: #FAF6EF;
  --ivory-soft: #F3EDE2;
  --blush: #FEE5D9;
  --celery: #E2F2C9;
  --gold: #C8A96A;
  --gold-soft: rgba(200, 169, 106, 0.45);
  --ink: #1D2B24;
  --ink-soft: rgba(29, 43, 36, 0.66);

  --font-display: 'Domaine Display Narrow', Georgia, serif;
  --font-serif-accent: 'Instrument Serif', Georgia, serif;
  --font-body: 'Instrument Sans', -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id], [id] { scroll-margin-top: 4.5rem; }
body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-family: var(--font-serif-accent); font-style: italic; font-weight: 400; }

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

::selection { background: var(--celery); color: var(--pine-deep); }

/* ---------- Shared atoms ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pine);
}
.eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
/* Gold eyebrow text, contrast-safe (#L61): bronze on the light bands (4.63–5.18:1), a lighter gold on pine
   (4.52:1). The brand --gold #C8A96A measured 1.90–4.29:1 as text on these bands. */
.eyebrow--gold { color: #7F642F; }
.philosophy .eyebrow--gold, .pass-card .eyebrow--gold { color: #CBAE73; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2rem;
  border-radius: 99px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.35s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--pine {
  background: var(--pine);
  color: var(--ivory);
  box-shadow: 0 1px 0 rgba(23, 51, 42, 0.2);
}
.btn--pine:hover { background: var(--pine-deep); box-shadow: 0 10px 24px -10px rgba(23, 51, 42, 0.55); }
.btn--gold {
  background: var(--gold);
  color: var(--pine-deep);
}
.btn--gold:hover { background: #D6BA7E; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45); }

.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pine);
  padding-bottom: 3px;
}
.link-arrow::after {
  content: '→';
  transition: transform 0.3s var(--ease-out);
}
.link-arrow::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(5px); }
.link-arrow:hover::before { transform: scaleX(0.25); }
.link-arrow--light { color: var(--celery); }

/* Sunburst — the gold radial mark from Liveo's gift card */
.sunburst { overflow: visible; }
.sunburst line {
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Arched image frame — recurring motif */
.arch {
  position: relative;
  overflow: hidden;
  border-radius: 100vmax 100vmax 18px 18px;
  background: var(--ivory-soft);
}
.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  background: var(--pine);
}
.preloader-mark {
  position: relative;
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
}
.sunburst--loader { position: absolute; inset: 0; width: 100%; height: 100%; }
.preloader-letter {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: 3.4rem;
  color: var(--gold);
  transform: translateY(-4px);
}
.preloader-tag {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--ivory);
  opacity: 0.85;
}
.preloader.is-done { display: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  transition: background-color 0.4s, box-shadow 0.4s, padding 0.4s;
}
.nav.is-scrolled {
  background: rgba(250, 246, 239, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(37, 76, 60, 0.1);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.nav-logo img {
  width: auto;
  height: 30px;
  transition: height 0.4s;
}
.nav.is-scrolled .nav-logo img { height: 25px; }
.nav-links {
  display: flex;
  gap: 2.2rem;
}
.nav-links a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--pine-deep);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--pine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { padding: 0.7rem 1.5rem; font-size: 0.88rem; }

/* ---------- Hero: the studio clip on pine + golden-hour light ----------
   Layers, back to front: pine → clip (poster image under the video) → gold glow → light sweep →
   pine shade for the text (phones/portrait only) → copy. Only opacity/transform are animated (main.js). */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(6.5rem, 12vh, 9rem) var(--gutter) 0;
  background: var(--pine-deep);
  color: var(--ivory);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-clip { position: absolute; inset: 0; overflow: hidden; }
.hero-poster, .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Landscape screens: the portrait clip can't fill a wide hero without a soft 2x crop, so it stands as a tall
   9:16 arch on the right (like the white arch in the studio), from under the nav to the hero's bottom edge.
   Copy and the meta row stop short of it. */
@media (min-width: 701px) and (min-aspect-ratio: 1/1) {
  .hero {
    --clip-top: clamp(5.5rem, 11vh, 7rem);
    --clip-w: min(38vw, calc((100svh - var(--clip-top)) * 0.5625));
    --clip-room: calc(var(--clip-w) + clamp(2rem, 5vw, 5rem));
  }
  .hero-clip {
    inset: var(--clip-top) max(var(--gutter), calc((100% - 1360px) / 2)) 0 auto;
    z-index: 2;
    width: var(--clip-w);
    border-radius: 999px 999px 0 0;
    box-shadow: 0 30px 70px rgba(10, 24, 19, 0.45);
    /* the arch melts into the glow at the seam instead of ending on a hard line */
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
  .hero-shade { display: none; }
  /* .hero--clip prefix: these must beat the base .hero-meta rule further down */
  .hero--clip .hero-inner, .hero--clip .hero-meta { padding-right: var(--clip-room); }
  .hero--clip .hero-meta { flex-wrap: wrap; border-top: 0; }
  .hero--clip .hero-meta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: var(--clip-room);
    border-top: 1px solid rgba(250, 246, 239, 0.22);
  }
}
/* svh, not %: .hero + .philosophy::before repeats this exact ellipse below the seam, so the glow carries
   into the next section instead of being cut at the hero's bottom edge. Keep the two in step. */
.hero-glow, .hero + .philosophy::before {
  position: absolute;
  left: -10%; right: -10%;
  height: 95svh;
  background: radial-gradient(ellipse at 50% 100%, rgba(240, 186, 98, 0.5) 0%, rgba(200, 169, 106, 0.22) 42%, rgba(200, 169, 106, 0) 70%);
  pointer-events: none;
}
.hero-glow { bottom: -35svh; }
.hero-sweep {
  position: absolute;
  top: -25%; bottom: -25%; left: 0;
  width: 38%;
  background: linear-gradient(100deg, rgba(255, 228, 170, 0) 0%, rgba(255, 228, 170, 0.3) 50%, rgba(255, 228, 170, 0) 100%);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 51, 42, 0.62) 0%, rgba(23, 51, 42, 0) 24%),
    linear-gradient(0deg, rgba(23, 51, 42, 0.86) 0%, rgba(23, 51, 42, 0.5) 12%, rgba(23, 51, 42, 0) 28%),
    linear-gradient(90deg, rgba(23, 51, 42, 0.92) 0%, rgba(23, 51, 42, 0.78) 32%, rgba(23, 51, 42, 0.3) 60%, rgba(23, 51, 42, 0) 80%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}
.hero-copy { position: relative; max-width: 44rem; }
.hero-eyebrow { margin-bottom: 1.6rem; color: var(--celery); }
.hero-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 9.5vw, 8.2rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin-bottom: 1.8rem;
}
.hero-title em { color: var(--gold); }
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line-inner { display: inline-block; will-change: transform; }
.hero-lede {
  max-width: 30rem;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: rgba(250, 246, 239, 0.88);
  margin-bottom: 2.4rem;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
/* sits in .hero-title: top is measured from the title (the eyebrow + its margin above = ~3.1rem) */
.sunburst--hero {
  position: absolute;
  top: -1.9rem;
  left: -4.2rem;
  width: 190px;
  height: 190px;
  z-index: -1;
  opacity: 0.75;
}
.hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1360px;
  width: 100%;
  margin: 2.5rem auto 0;
  padding: 1.1rem 0 1.3rem;
  border-top: 1px solid rgba(250, 246, 239, 0.22);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, 0.82);
}
.hero-meta a:hover { color: var(--gold); }
.hero-meta-reviews { white-space: nowrap; text-underline-offset: 3px; }
.hero-meta-reviews:hover { text-decoration: underline; }
.hero-meta-star { color: var(--gold); margin-right: 0.15em; }
.hero-meta-src { color: rgba(250, 246, 239, 0.8); }
/* Pause button for the hero clip: main.js adds it to .hero-cta (beside "Book an appointment") only when
   .hero-video exists; on phones it's a small round icon button */
.hero-vpause {
  min-height: 44px;
  padding: 0 1.1rem;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(23, 51, 42, 0.55);
  border: 1px solid rgba(250, 246, 239, 0.5);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.hero-vpause:hover { background: var(--ivory); color: var(--pine-deep); }
.hero-vpause:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-sweep { display: none; } }

/* Home nav sits on the photo until it turns solid on scroll (main.js adds .is-scrolled) */
.nav--over-photo:not(.is-scrolled) .nav-logo img { filter: brightness(0) invert(1); }
.nav--over-photo:not(.is-scrolled) .nav-links a { color: var(--ivory); }
.nav--over-photo:not(.is-scrolled) .nav-links a::after { background: var(--gold); }
.nav--over-photo:not(.is-scrolled) .nav-toggle span { background: var(--ivory); }

/* ---------- Philosophy ---------- */
.philosophy {
  position: relative;
  background: var(--pine);
  color: var(--ivory);
  padding: clamp(6rem, 14vh, 10rem) var(--gutter);
}
.philosophy::after {
  /* fine grain so the green reads as material, not flat fill */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
}
/* Home only. Top: the hero's pine-deep eases into pine and the hero glow carries on (its box starts 60svh
   above this section's top: 95svh tall, bottom 35svh below the seam), clipped to this section. */
.hero + .philosophy {
  overflow: hidden;
  background: linear-gradient(180deg, var(--pine-deep) 0, var(--pine) min(60svh, 34rem));
}
/* The mask starts at full strength on the seam (5% on phones/portrait, where the hero's own glow sits under
   the 0.95 copy shade) and eases to nothing well above this box's bottom edge (35svh below the seam, where
   the radial is brightest), so the glow spills over the seam and fades out with no edge, and the eyebrow
   and quote sit on plain pine (contrast). The radial (shared rule above) must match .hero-glow's. */
.hero + .philosophy .eyebrow--gold { color: #E2CC97; }
.hero + .philosophy::before {
  content: '';
  top: -60svh;
  --seam-a: calc(1 - var(--seam-veil, 0));
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, var(--seam-a)) 60svh, rgba(0, 0, 0, calc(var(--seam-a) * 0.8)) calc(60svh + min(3.5rem, 8svh)),
    rgba(0, 0, 0, calc(var(--seam-a) * 0.42)) calc(60svh + min(8rem, 17svh)), rgba(0, 0, 0, calc(var(--seam-a) * 0.12)) calc(60svh + min(12rem, 25svh)),
    transparent calc(60svh + min(16rem, 32svh)));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, var(--seam-a)) 60svh, rgba(0, 0, 0, calc(var(--seam-a) * 0.8)) calc(60svh + min(3.5rem, 8svh)),
    rgba(0, 0, 0, calc(var(--seam-a) * 0.42)) calc(60svh + min(8rem, 17svh)), rgba(0, 0, 0, calc(var(--seam-a) * 0.12)) calc(60svh + min(12rem, 25svh)),
    transparent calc(60svh + min(16rem, 32svh)));
}
/* Bottom (.philosophy--to-light): the ivory services band rises into the pine as a wide arch (the hero
   clip's arch, laid flat). Two clean colours, no blend: pine-to-ivory blends turn grey or muddy. The extra
   bottom padding keeps the text clear of the 7rem arch. */
.hero + .philosophy--to-light {
  padding-bottom: calc(clamp(6rem, 14vh, 10rem) + 5rem);
  background:
    radial-gradient(ellipse 62% 7rem at 50% 100%, var(--ivory) 99.4%, rgba(250, 246, 239, 0) 100%) bottom / 100% 7rem no-repeat,
    linear-gradient(180deg, var(--pine-deep) 0, var(--pine) min(60svh, 34rem));
}
/* The hero has no grain, so the grain fades in under the seam instead of switching on there (that read as
   a line). It fades out again above the ivory arch, which the plain ivory services band continues. */
.hero + .philosophy::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12rem);
  mask-image: linear-gradient(180deg, transparent 0, #000 12rem);
}
.hero + .philosophy--to-light::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12rem, #000 calc(100% - 13rem), transparent calc(100% - 7rem));
  mask-image: linear-gradient(180deg, transparent 0, #000 12rem, #000 calc(100% - 13rem), transparent calc(100% - 7rem));
}
.philosophy-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.philosophy .eyebrow { margin-bottom: 2.2rem; }
.philosophy-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  margin-bottom: 2.2rem;
}
.philosophy-quote .w { opacity: 0.18; transition: opacity 0.35s linear; }
.philosophy-quote .w.is-lit { opacity: 1; }
.philosophy-body {
  max-width: 620px;
  margin: 0 auto 4.5rem;
  color: rgba(250, 246, 239, 0.78);
  font-size: 1.02rem;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: left;
  border-top: 1px solid rgba(200, 169, 106, 0.35);
  padding-top: 2.2rem;
}
.pillars li { padding-right: 1rem; }
.pillar-num {
  display: block;
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.pillars p { font-size: 0.92rem; color: rgba(250, 246, 239, 0.72); }

/* ---------- Services ---------- */
.services {
  padding: clamp(6rem, 13vh, 9rem) var(--gutter) clamp(4rem, 9vh, 7rem);
  max-width: 1360px;
  margin: 0 auto;
}
.services-head { margin-bottom: clamp(3rem, 7vh, 5rem); }
.services-head .eyebrow { margin-bottom: 1.2rem; }
.services-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.02;
  color: var(--pine-deep);
}
.atelier {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.atelier-media {
  position: sticky;
  top: clamp(5.5rem, 12vh, 8rem);
}
.arch--atelier {
  aspect-ratio: 4 / 5;
  max-height: 76vh;
  width: 100%;
}
.atelier-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.65s var(--ease-out), transform 1.2s var(--ease-out);
}
.atelier-img.is-active { opacity: 1; transform: scale(1); }
.atelier-list { display: flex; flex-direction: column; }
.service {
  padding: clamp(2rem, 4.5vh, 3.2rem) 0;
  border-bottom: 1px solid rgba(37, 76, 60, 0.14);
  opacity: 0.42;
  transition: opacity 0.5s;
}
.service:first-child { padding-top: 0.5rem; }
.service.is-active { opacity: 1; }
.service-thumb { display: none; }
.service-row {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-bottom: 0.7rem;
}
.service-index {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold);
  transform: translateY(-0.5em);
}
.service h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1;
  color: var(--pine-deep);
}
.service p {
  max-width: 30rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin-bottom: 1.1rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.32rem 0.85rem;
  border: 1px solid rgba(37, 76, 60, 0.28);
  border-radius: 99px;
  color: var(--pine);
}

/* ---------- Ticker ---------- */
.ticker {
  background: var(--celery);
  padding: 1.35rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-block;
  animation: ticker 36s linear infinite;
}
.ticker-track span {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  color: var(--pine);
  letter-spacing: 0.02em;
}
.ticker-track i {
  font-style: normal;
  color: var(--gold);
  padding: 0 1.1rem;
  font-size: 0.8em;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Visit ---------- */
.visit {
  position: relative;
  background: var(--pine-deep);
  color: var(--ivory);
  text-align: center;
  padding: clamp(6rem, 14vh, 10rem) var(--gutter) clamp(1.75rem, 4vh, 2.75rem);
  overflow: hidden;
}
.sunburst--visit {
  position: absolute;
  top: clamp(2rem, 6vh, 4rem);
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  opacity: 0.55;
}
/* home: the same arch as the end of .philosophy, reversed (pine-deep rises into the ivory FAQ), with
   the gold glow behind "Book your glow". The arch layer is transparent inside, so the glow shows through. */
.visit--from-light {
  padding-top: calc(clamp(6rem, 14vh, 10rem) + 5rem);
  background:
    radial-gradient(ellipse 62% 7rem at 50% 100%, rgba(250, 246, 239, 0) 99.4%, var(--ivory) 100%) top / 100% 7rem no-repeat,
    radial-gradient(ellipse 60% 26rem at 50% 12rem, rgba(200, 169, 106, 0.16), rgba(200, 169, 106, 0)),
    var(--pine-deep);
}
.visit--from-light .sunburst--visit { top: calc(clamp(2rem, 6vh, 4rem) + 5rem); }
.visit-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 10vw, 8.5rem);
  line-height: 0.98;
  margin-bottom: 2.4rem;
}
.visit-title em { color: var(--gold); }
.visit-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
}
.visit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: clamp(4rem, 9vh, 6.5rem) auto 0;
  padding-top: 2.6rem;
  border-top: 1px solid rgba(200, 169, 106, 0.3);
  text-align: left;
}
.visit-grid h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.visit-grid p {
  font-size: 0.95rem;
  color: rgba(250, 246, 239, 0.8);
  margin-bottom: 0.6rem;
}
.visit-grid a:hover { color: var(--gold); }
.visit-wordmark {
  font-family: var(--font-display);
  font-size: clamp(7rem, 25vw, 24rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 169, 106, 0.4);
  user-select: none;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  margin-bottom: clamp(0.5rem, 2.5vh, 1.75rem);
}
.footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1360px;
  margin: 0 auto;
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid rgba(250, 246, 239, 0.14);
  font-size: 0.8rem;
  color: rgba(250, 246, 239, 0.55);
}
.footer-note { color: rgba(200, 169, 106, 0.75); }
.footer-note a { transition: color 0.2s; }
.footer-note a:hover { color: rgba(200, 169, 106, 1); }

/* ---------- Reveal defaults (JS enhances) ---------- */
[data-reveal] { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { padding-top: 6.5rem; }
  .sunburst--hero { left: auto; right: -0.5rem; top: -7.6rem; width: 120px; height: 120px; }
  .hero-meta { flex-direction: column; gap: 0.4rem; }
  .pillars { grid-template-columns: 1fr; gap: 1.6rem; }
  .atelier { grid-template-columns: 1fr; }
  .atelier-media { display: none; }
  .service { opacity: 1; }
  .service-thumb {
    display: block;
    overflow: hidden;
    border-radius: 100vmax 100vmax 14px 14px;
    aspect-ratio: 16 / 10;
    margin-bottom: 1.4rem;
  }
  .service-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .visit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px), (max-aspect-ratio: 1/1) {
  /* phones + portrait tablets (clip full-bleed): the clip shows clear above the copy; the copy sits low on a
     shade anchored to the copy block itself (fades in over 7rem above the eyebrow, solid behind the text and
     meta row), so it fits every screen height. Stops checked for >= 4.5:1 over the brightest clip frames. */
  .hero-inner { align-items: flex-end; }
  .hero-shade { background: linear-gradient(180deg, rgba(23, 51, 42, 0.5) 0%, rgba(23, 51, 42, 0) 15%); }
  /* a long, soft fade (13rem) so the clip dissolves into the pine instead of meeting a band (Phat 10-23) */
  .hero-copy::before {
    content: '';
    position: absolute;
    z-index: -2;
    top: -13rem;
    bottom: -60vh;
    left: calc(-1 * var(--gutter));
    width: 100vw;
    background: linear-gradient(180deg, rgba(23, 51, 42, 0) 0, rgba(23, 51, 42, 0.35) 4rem, rgba(23, 51, 42, 0.7) 8.5rem, rgba(23, 51, 42, 0.9) 13rem, rgba(23, 51, 42, 0.95) 100%);
    pointer-events: none;
  }
  /* the hero's glow sits under that 0.95 shade here, so the carried-over glow starts under it too */
  .hero + .philosophy { --seam-veil: 0.95; }
}
@media (max-width: 700px) {
  /* compact copy block so the shade can stay low and the clip shows more (one CTA + a round pause) */
  /* the sun rings the "B" of "Bask" (em = the title's size) */
  .sunburst--hero { top: -0.5em; left: -0.5em; right: auto; width: 1.95em; height: 1.95em; opacity: 0.85; }
  .hero-eyebrow { margin-bottom: 0.85rem; }
  .hero-title { font-size: clamp(2.3rem, 10vw, 2.7rem); margin-bottom: 0.85rem; }
  .hero-lede { font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.15rem; }
  .hero-cta { gap: 0.8rem 1.4rem; }
  /* small frosted round button at the right end of the Book row; icon only (the label is in aria-label) */
  .hero-cta > .hero-vpause {
    position: relative;
    width: 44px;
    height: 44px;
    min-height: 0;
    margin-left: auto;
    padding: 0;
    font-size: 0;
    background: rgba(250, 246, 239, 0.14);
    border: 1px solid rgba(250, 246, 239, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .hero-cta > .hero-vpause::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 12px;
    background: linear-gradient(90deg, var(--ivory) 0 3.5px, transparent 3.5px 6.5px, var(--ivory) 6.5px 10px);
  }
  .hero-cta > .hero-vpause.is-paused::before {
    left: 3px;
    background: var(--ivory);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .hero-cta > .hero-vpause:hover { background: rgba(250, 246, 239, 0.28); color: var(--ivory); }
  /* address + Instagram are in the Visit section below; the meta row = hours + review count */
  .hero-meta { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 1.4rem; padding: 0.8rem 0 1rem; }
  .hero-meta > span:not(.hero-meta-hours) { display: none; }
  .hero-meta-reviews { text-align: right; line-height: 1.5; }
  .hero-meta-src { display: block; font-size: 0.68rem; }
  .hero-meta-dot { display: none; }
  .hero-vpause { min-height: 40px; padding: 0 1rem; font-size: 0.72rem; }
}
@media (max-width: 520px) {
  .visit-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .btn { padding: 0.85rem 1.6rem; }
}

/* ---------- Pricing / Menu page ---------- */
.page-hero {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(8rem, 17vh, 11rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
}
.page-hero .eyebrow { margin-bottom: 1.5rem; }
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--pine-deep);
  margin-bottom: 1.4rem;
}
.page-title em { color: var(--pine); }
.page-lede {
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  margin-bottom: 2rem;
}
.page-note {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1.8rem;
}
/* Dated offer notice (Menu & Pricing). Hidden in the HTML; main.js shows it inside its date window. */
.offer-note {
  max-width: 40rem;
  margin: -0.6rem 0 2rem;
  padding: 1rem 1.2rem;
  background: var(--celery);
  border-left: 3px solid var(--pine);
  border-radius: 4px;
  color: var(--pine-deep);
}
.offer-note[hidden] { display: none; }
.offer-note-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #7F642F; margin-bottom: 0.35rem; }
.offer-note-text { font-size: 1rem; line-height: 1.5; }
.offer-note-terms { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.45rem; }
/* Menu & Pricing: copy left, the glow portrait in a tall arch right; phones = the arch under the copy */
.page-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.page-hero-arch {
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  border-radius: 999px 999px 18px 18px;
  overflow: hidden;
}
.page-hero-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
@media (max-width: 820px) {
  .page-hero--split { grid-template-columns: 1fr; }
  .page-hero-arch { aspect-ratio: 4 / 3.4; max-height: none; }
}

/* Printed-menu layout: categories flow down newspaper-style columns
   (3 wide, 2 mid, 1 on phones); a category never splits across columns */
.menu {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 7vh, 5rem);
  columns: 3;
  column-gap: clamp(2.5rem, 4vw, 4rem);
  column-rule: 1px solid rgba(37, 76, 60, 0.1);
}
.menu-cat {
  break-inside: avoid;
  padding: clamp(1.6rem, 4vh, 2.4rem) 0 clamp(1.8rem, 4vh, 2.6rem);
  border-top: 1px solid rgba(37, 76, 60, 0.16);
}
.menu-cat-head { margin-bottom: 1.4rem; }
.menu-cat-index {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.menu-cat-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: var(--pine-deep);
  margin: 0.45rem 0 0.4rem;
}
.menu-cat-note {
  font-family: var(--font-serif-accent);
  font-style: italic;
  color: var(--pine);
  font-size: 1.15rem;
}
.menu-cat-sub { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.7rem; max-width: 22rem; }

.menu-group + .menu-group { margin-top: 1.6rem; }
.menu-group-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 1rem;
}
.menu-list { display: flex; flex-direction: column; gap: 0.8rem; }
.menu-row { display: flex; align-items: baseline; gap: 0.4rem; }
.menu-name { font-weight: 500; color: var(--ink); }
.menu-name small {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 3px;
  max-width: 28rem;
}
.menu-lead {
  flex: 1;
  border-bottom: 1px dotted rgba(37, 76, 60, 0.4);
  transform: translateY(-0.3em);
  min-width: 1.5rem;
}
.menu-price {
  font-weight: 600;
  color: var(--pine-deep);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.menu-price span { font-weight: 400; color: var(--ink-soft); font-size: 0.9em; }

/* Each row deep-links to that service on Fresha */
.menu-link {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.menu-link::after {
  content: "\2192";
  color: var(--gold);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-0.3rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.menu-link:hover .menu-name,
.menu-link:focus-visible .menu-name { color: var(--pine); text-decoration: underline; text-underline-offset: 0.2em; }
.menu-link:hover::after,
.menu-link:focus-visible::after { opacity: 1; transform: none; }
.page-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 1180px) {
  .menu { columns: 2; }
}
/* Phone category tiles (added by main.js); hidden on wider screens */
.menu-tiles,
.menu-tiles-back,
.menu-details-toggle { display: none; }
.menu-tile {
  padding: 0.95rem 0.6rem;
  border: 1px solid rgba(37, 76, 60, 0.22);
  border-radius: 2px;
  background: transparent;
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--pine-deep);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.menu-tile[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: var(--ivory, #FAF6EF); }
.menu-tile:focus-visible,
.menu-tiles-back:focus-visible,
.menu-details-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.menu-tiles-back,
.menu-details-toggle {
  margin-top: 1.8rem;
  padding: 0.4rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pine);
  cursor: pointer;
}

@media (max-width: 720px) {
  .menu { columns: 1; }
  .menu-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0 var(--gutter) 0.4rem;
  }
  .menu.has-tiles .menu-cat { display: none; border-top: 0; }
  .menu.has-tiles .menu-cat.is-picked { display: block; }
  .menu.has-tiles .menu-cat-index { display: none; }
  .menu.has-tiles .menu-tiles-back { display: inline-block; }
  .menu.has-tiles .menu-details-toggle { display: inline-block; margin: 0 0 1.2rem; }
  .menu.has-tiles .menu-cat:not(.show-details) .menu-name small { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .preloader { display: none; }
  .ticker-track { animation: none; }
  .philosophy-quote .w { opacity: 1; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.15s !important;
  }
}

/* ============================================================
   Multi-page additions
   nav (active + mobile), split sections, service preview,
   FAQ accordion, policy band, contact
   ============================================================ */

/* ---------- Nav: active state ---------- */
.nav-links a.is-active { color: var(--pine); }
.nav-links a.is-active::after { transform: scaleX(1); }

/* ---------- Nav: hamburger + mobile drawer ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 11px 10px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 60;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.6px;
  background: var(--pine-deep);
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out), opacity 0.25s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
.nav-cta--mobile { display: none; }
body.no-scroll { overflow: hidden; }

@media (max-width: 1024px) {
  .nav-links { gap: 1.6rem; }
}
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav > .nav-cta { display: none; }
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    padding: 2rem var(--gutter);
    background: var(--pine);
    transform: translateX(100%);
    transition: transform 0.55s var(--ease-out);
    z-index: 55;
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 8vw, 3rem);
    color: var(--ivory);
    padding: 0.3rem 0;
  }
  .nav-links a::after { display: none; }
  .nav-links a.is-active { color: var(--gold); }
  .nav-toggle.is-open span { background: var(--ivory); }
  /* .nav-links a.nav-cta--mobile, not .nav-cta--mobile: the plain class lost to `.nav-links a`
     above, so the button took the 2–3rem display font and the label spilled out of the pill */
  .nav-links a.nav-cta--mobile,
  .nav--over-photo:not(.is-scrolled) .nav-links a.nav-cta--mobile {
    display: inline-flex;
    margin-top: 1.6rem;
    padding: 0.85rem 1.7rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    background: var(--gold);
    color: var(--pine-deep);
  }
}

/* ---------- Inner page hero: optional lede image row ---------- */
.page-hero--tight { padding-bottom: clamp(1.5rem, 4vh, 3rem); }

/* ---------- Split (image + text) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6.5rem) var(--gutter);
}
.split--reverse .split-media { order: 2; }
.split-media {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-height: 82vh;
}
.split-media.wide { aspect-ratio: 4 / 3.3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-sunburst {
  position: absolute;
  top: -2.2rem; right: -2.2rem;
  width: 110px; height: 110px;
  opacity: 0.85;
  z-index: 1;
}
.split-body .eyebrow { margin-bottom: 1.2rem; }
.split-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.03;
  color: var(--pine-deep);
  margin-bottom: 1.4rem;
}
.split-title em { color: var(--pine); }
.split-body p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin-bottom: 1.1rem;
  max-width: 34rem;
}
.split-body p:last-of-type { margin-bottom: 1.8rem; }
.split-body .split-cta { margin-top: 0.4rem; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 2.2rem; padding-top: clamp(2.5rem,6vh,4rem); }
  .split--reverse .split-media { order: 0; }
  .split-media { max-height: 64vh; aspect-ratio: 4 / 4.2; }
  .split-sunburst { right: -0.5rem; top: -1.5rem; width: 90px; height: 90px; }
}

/* ---------- Signature stat row (About) ---------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.stat-label {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, 0.78);
}
@media (max-width: 640px) {
  .stat-band { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ---------- Service preview grid (home) ---------- */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2rem);
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.preview-card { display: flex; flex-direction: column; }
.preview-media {
  overflow: hidden;
  border-radius: 100vmax 100vmax 14px 14px;
  aspect-ratio: 3 / 4;
  margin-bottom: 1rem;
  background: var(--ivory-soft);
}
.preview-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.85s var(--ease-out);
}
.preview-card:hover .preview-media img { transform: scale(1.05); }
.preview-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  color: var(--pine-deep);
  margin-bottom: 0.3rem;
}
.preview-card p { font-size: 0.9rem; color: var(--ink-soft); }
@media (max-width: 820px) { .preview-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .preview-grid { grid-template-columns: 1fr; } }

.center-cta { text-align: center; padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) 0; }

/* ---------- Home FAQ (five questions from faqs.html) ---------- */
.home-faq { padding: clamp(4rem, 10vh, 7rem) 0 clamp(3rem, 7vh, 4.5rem); }
.home-faq-head { max-width: 860px; margin: 0 auto 2rem; padding: 0 var(--gutter); }
.home-faq-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
  color: var(--pine-deep);
  margin-top: 1rem;
}
.home-faq-head h2 em { color: var(--pine); }
.home-faq .faq { padding-bottom: 0; }
.home-faq-cta { max-width: 860px; margin: 1.8rem auto 0; padding: 0 var(--gutter); }

/* ---------- FAQ (native details/summary) ---------- */
.faq {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 7vh, 5rem);
}
.faq-item { border-top: 1px solid rgba(37, 76, 60, 0.18); }
.faq-item:last-child { border-bottom: 1px solid rgba(37, 76, 60, 0.18); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 2vw, 1.28rem);
  font-weight: 500;
  color: var(--pine-deep);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; flex: none; width: 20px; height: 20px; }
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--gold);
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out);
}
.faq-icon::before { top: 50%; left: 0; width: 100%; height: 1.6px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; width: 1.6px; height: 100%; transform: translateX(-50%); }
.faq-item[open] .faq-icon::after { transform: translateX(-50%) scaleY(0); }
.faq-a {
  padding: 0 0 1.7rem;
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 62ch;
}
.faq-a a { color: var(--pine); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Policy band (good to know) ---------- */
.policy {
  background: var(--celery);
  padding: clamp(3.5rem, 9vh, 6rem) var(--gutter);
}
.policy-inner { max-width: 1100px; margin: 0 auto; }
.policy-head { margin-bottom: 2.6rem; }
.policy-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--pine-deep);
  margin-top: 0.7rem;
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
}
.policy-item {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(37, 76, 60, 0.24);
}
.policy-item h3 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 0.7rem;
}
.policy-item p { font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 640px) { .policy-grid { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 9vh, 6rem);
}
.contact-block + .contact-block { margin-top: 2.4rem; }
.contact-block h3 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.contact-block p { font-size: 1.05rem; color: var(--ink); margin-bottom: 0.5rem; }
.contact-block a:hover { color: var(--pine); }
.contact-actions { margin-top: 2.4rem; display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.contact-map {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--ivory-soft);
  box-shadow: 0 20px 50px -30px rgba(23, 51, 42, 0.5);
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } .contact-map { aspect-ratio: 4 / 3.4; } }

/* ---------- Memberships (teaser + waitlist, no prices) ---------- */
.passes {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3.5rem, 8vh, 5.5rem);
}
.pass-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.pass-card {
  background: var(--pine);
  color: var(--ivory);
  border-radius: 999px 999px 18px 18px;
  padding: clamp(3.2rem, 7vw, 5rem) clamp(1.6rem, 4vw, 3rem) clamp(2rem, 4vw, 2.8rem);
  text-align: center;
}
.pass-card .eyebrow { justify-content: center; margin-bottom: 1rem; }
.pass-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  margin-bottom: 1.1rem;
}
.pass-name em { color: var(--gold); }
.pass-card p:last-child { color: rgba(250, 246, 239, 0.82); max-width: 24rem; margin: 0 auto; }
.pass-perks {
  max-width: 640px;
  margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
  text-align: center;
}
.pass-perks h3 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 1.2rem;
}
.pass-perks ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.pass-perks li {
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(37, 76, 60, 0.24);
  border-radius: 99px;
  font-size: 0.92rem;
  color: var(--pine-deep);
}
.waitlist {
  background: var(--celery);
  padding: clamp(3.5rem, 9vh, 6rem) var(--gutter);
}
.waitlist-inner { max-width: 560px; margin: 0 auto; }
.waitlist-eyebrow { display: flex; justify-content: center; }
.waitlist h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  color: var(--pine-deep);
  text-align: center;
  margin: 0.8rem 0 0.9rem;
}
.waitlist h2 em { color: var(--pine); }
.waitlist-lede { color: var(--ink-soft); text-align: center; margin-bottom: 2rem; }
.waitlist-form { display: grid; gap: 1.1rem; }
.waitlist-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.waitlist-field { display: grid; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; color: var(--pine-deep); }
.waitlist-field i { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.waitlist-field input {
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(37, 76, 60, 0.3);
  border-radius: 12px;
  background: var(--ivory);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.waitlist-field input:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.waitlist-choice { border: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.waitlist-choice legend { font-size: 0.85rem; font-weight: 500; color: var(--pine-deep); margin-bottom: 0.5rem; }
.waitlist-choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(37, 76, 60, 0.3);
  border-radius: 99px;
  background: var(--ivory);
  font-size: 0.92rem;
  cursor: pointer;
}
.waitlist-choice input, .waitlist-consent input { accent-color: var(--pine); }
.waitlist-choice label:has(input:checked) { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.waitlist-consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; }
.waitlist-consent input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; flex: none; }
.waitlist-form .btn { justify-self: start; }
.waitlist-form .btn:disabled { opacity: 0.6; cursor: wait; }
.waitlist-note { margin-top: 1.1rem; font-size: 0.95rem; color: var(--pine); min-height: 1.2em; }
.waitlist-call { margin-top: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); }
.waitlist-call a { color: var(--pine); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .pass-grid, .waitlist-row { grid-template-columns: 1fr; }
  .waitlist-form .btn { justify-self: stretch; }
}

/* ===== Motion enhancements — sticky Book pill + gold shimmer wordmark ===== */
.sticky-book {
  position: fixed; z-index: 90; right: 1.4rem; bottom: 1.4rem;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.4rem; border-radius: 100px;
  background: var(--gold); color: var(--pine);
  font-family: var(--font-body, 'Instrument Sans', sans-serif);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 32px -8px rgba(37, 76, 60, .45);
  opacity: 0; transform: translateY(160%); pointer-events: none;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1), filter .2s ease;
}
.sticky-book.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sticky-book:hover { filter: brightness(1.05); }
.sticky-book-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--pine); animation: stickyPulse 1.8s ease-in-out infinite;
}
@keyframes stickyPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
/* keep the pill out of the way while the mobile menu drawer is open */
body.no-scroll .sticky-book { opacity: 0; transform: translateY(160%); pointer-events: none; }
@media (max-width: 600px) {
  .sticky-book { right: 50%; bottom: 1rem; transform: translate(50%, 160%); font-size: .9rem; }
  .sticky-book.is-shown { transform: translate(50%, 0); }
  body.no-scroll .sticky-book { transform: translate(50%, 160%); }
}

/* Gold shimmer sweep on the big outlined "Liveo" wordmark */
.visit-wordmark.shimmer-gold {
  color: transparent;
  background-image: linear-gradient(100deg,
    rgba(200, 169, 106, .35) 0%, rgba(200, 169, 106, .35) 42%,
    #E6D2A0 48%, #FBF3D8 50%, #E6D2A0 52%,
    rgba(200, 169, 106, .35) 58%, rgba(200, 169, 106, .35) 100%);
  background-size: 240% 100%; background-position: 150% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wordmarkShimmer 6.5s ease-in-out infinite;
}
@keyframes wordmarkShimmer { 0% { background-position: 150% 0; } 100% { background-position: -60% 0; } }

/* ===== Mobile menu drawer fix =====
   .nav.is-scrolled uses backdrop-filter, and the GSAP intro can leave a transform
   on .nav — either one makes .nav a containing block for its position:fixed child,
   which shrank the full-screen drawer down to the nav bar's height (menu items cut
   off / overflowing onto the page). Neutralise both while the drawer is open so the
   drawer resolves against the viewport again. */
body.no-scroll .nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
}
.nav-links.is-open { overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
  .sticky-book { transition: none; }
  .sticky-book-dot { animation: none; }
  .visit-wordmark.shimmer-gold { animation: none; background-position: 50% 0; }
}

/* ---------- Footer legal / utility links ---------- */
.footer-links { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.footer-links a { color: rgba(250, 246, 239, 0.55); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: rgba(250, 246, 239, 0.92); }

/* ---------- Legal / long-form pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(0.5rem, 2vh, 1.5rem) var(--gutter) clamp(3.5rem, 8vh, 5.5rem); }
.legal-updated { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(37, 76, 60, 0.5); margin: 0 0 2rem; }
.legal h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--pine-deep); margin: 2.4rem 0 0.7rem; }
.legal p { color: var(--ink-soft); line-height: 1.75; margin: 0 0 1.1rem; }
.legal ul { margin: 0 0 1.3rem; padding-left: 1.2rem; color: var(--ink-soft); line-height: 1.7; }
.legal li { margin-bottom: 0.55rem; }
.legal strong { color: var(--pine-deep); font-weight: 600; }
.legal a { color: var(--pine); text-decoration: underline; text-underline-offset: 0.2em; }
.legal-note { font-size: 0.85rem; color: rgba(37, 76, 60, 0.55); font-style: italic; }

/* ---------- Reviews / testimonials ---------- */
.reviews { background: var(--ivory); padding: clamp(3.5rem, 9vh, 6rem) var(--gutter); }
.reviews--tint { background: var(--celery); }
/* home: a warm sand band that arches up out of the celery ticker above it (celery shoulders, so the ticker
   curves into the arch) and back down into the ivory FAQ (the same 62%-wide arch as the pine seams, flatter).
   Each arch layer is transparent inside; the extra padding keeps the text clear of the 5rem arches. */
.reviews--band {
  padding-top: calc(clamp(3.5rem, 9vh, 6rem) + 5rem);
  padding-bottom: calc(clamp(3.5rem, 9vh, 6rem) + 5rem);
  background:
    radial-gradient(ellipse 62% 5rem at 50% 100%, rgba(226, 242, 201, 0) 99.4%, var(--celery) 100%) top / 100% 5rem no-repeat,
    radial-gradient(ellipse 62% 5rem at 50% 100%, var(--ivory) 99.4%, rgba(250, 246, 239, 0) 100%) bottom / 100% 5rem no-repeat,
    #EFE5D1;
}
/* the sand is darker than ivory: these two small lines need a touch more ink to stay >= 4.5:1 */
.reviews--band .eyebrow--gold { color: #6E5526; }
.reviews--band .rating-badge .count { color: rgba(29, 43, 36, 0.8); }
.reviews-inner { max-width: 1120px; margin: 0 auto; }
.reviews-head { text-align: center; margin-bottom: 2.8rem; }
.reviews-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--pine-deep); margin: 0.6rem 0 1.3rem; }
.rating-badge { display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.rating-badge .score { font-family: var(--font-display); font-size: 1.7rem; color: var(--pine); line-height: 1; }
.stars { color: var(--gold); letter-spacing: 0.12em; font-size: 1.05rem; white-space: nowrap; }
.rating-badge .count { font-size: 0.9rem; color: var(--ink-soft); }
.rating-badge .count a { color: inherit; text-underline-offset: 3px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.review-card { background: #fff; border: 1px solid rgba(37, 76, 60, 0.12); border-radius: 14px; padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.review-card .stars { font-size: 0.92rem; }
.review-quote { font-family: var(--font-display); font-weight: 400; font-size: 1.16rem; line-height: 1.45; color: var(--pine-deep); }
.review-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.review-name { font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.review-src { color: rgba(37, 76, 60, 0.5); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; }
.reviews-cta { text-align: center; margin-top: 2.6rem; }
@media (max-width: 820px) { .review-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .review-grid { grid-template-columns: 1fr; } }

/* the hero sunburst ran 4px past the right edge at 390px, giving the home page a sideways scroll */
.hero { overflow-x: clip; }

/* ---------- Service landing pages (generated by menu-src/build_seo.py) ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(37, 76, 60, 0.55); margin-bottom: 1.4rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--pine); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--pine-deep); }
.svc-figure { max-width: 1360px; margin: 0 auto clamp(1rem, 3vh, 2rem); padding: 0 var(--gutter); }
.svc-figure img { display: block; width: 100%; height: auto; max-height: 34rem; object-fit: cover; border-radius: 18px; }
.svc-body { padding-top: 0; }
.svc-body h2:first-child { margin-top: 0; }
.svc-faq-head { padding-bottom: 0.4rem; }
.svc-related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.svc-related li { margin: 0; }
.svc-related a { display: inline-block; padding: 0.7rem 1.1rem; border: 1px solid rgba(37, 76, 60, 0.22); border-radius: 999px; text-decoration: none; color: var(--pine-deep); }
.svc-related a:hover { border-color: var(--pine); background: rgba(226, 242, 201, 0.5); }
.service-more { display: inline-block; margin-top: 0.9rem; color: var(--pine); font-size: 0.9rem; text-underline-offset: 3px; }