/* ────── Lumière (Femme-style) — bespoke stylesheet ────── */

/* Brand palette sampled from danielelaserandaesthetics.com:
   #826409 bronze (buttons, accents) · #E0AA3E gold · #E7E3E0 warm sand · #8A8574 olive-grey (logo field) */
:root {
  --bg: #E7E3E0;
  --bg-2: #8A8574;
  --ink: #36322D;
  --ink-soft: #5d564e;
  --accent: #826409;
  --accent-light: #E0AA3E;
  --btn-brown: #5C4706;
  --line: rgba(54, 50, 45, 0.14);
  --line-strong: rgba(54, 50, 45, 0.28);
  --paper: #FFFFFF;
  --shadow: 0 30px 60px -30px rgba(54, 50, 45, 0.22);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-price: 'Montserrat', var(--font-body);

  --r-sm: 6px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --page-x: 56px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* clip (not hidden) kills phantom horizontal scroll from 100vw full-bleed rails
   without creating a scroll container that would break the sticky nav. */
html, body { overflow-x: clip; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: inline-block; vertical-align: -2px; flex-shrink: 0; }
/* Zero the UA margins on headings + text blocks. All spacing is controlled by
   explicit gap/margin in each component — UA margins scale with font-size and
   leak oversized gaps (e.g. an h2 at 96px inherits ~80px margin-block). */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; }

/* ─────── Display headings ─────── */
.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.018em;
  margin: 0;
}
.h-display .i { font-style: italic; font-weight: 400; }
.h-display .ny { font-style: normal; }
/* Script overline, sampled from danielelaserandaesthetics.com: handwritten line sitting
   low and indented so it overlaps the top of the display heading beneath it. */
.eyebrow {
  font-family: 'Oooh Baby', cursive;
  /* roughly a third of the display size, as on their own headings — it annotates the
     heading rather than competing with it */
  font-size: clamp(19px, 1.8vw, 29px);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1;
  color: rgba(54, 50, 45, 0.34);
  /* block-level flex: an inline box would swallow the negative margin below */
  display: flex; align-items: center;
  width: fit-content;
  white-space: nowrap;
  margin-left: 0.18em;
  margin-bottom: -0.28em;
  /* their handwritten lines sit slightly off-level; origin left so the tilt does not
     drag the line away from the heading's left edge */
  transform: rotate(-2.6deg);
  transform-origin: left center;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* ─────── Sections ─────── */
section { padding: 156px var(--page-x); position: relative; }
.container { max-width: 1320px; margin: 0 auto; }

/* ─────── Scroll progress ─────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 100;
  background: rgba(0, 0, 0, 0.04);
  pointer-events: none;
}
.scroll-progress__bar { height: 100%; background: var(--ink); width: 0%; transition: width .12s linear; }

/* ─────── Nav (Femme-style) ─────── */
/* Gift card bar — mirrors the bronze top strip on danielelaserandaesthetics.com */
.giftbar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 18px;
  padding: 5px 16px;
  background: var(--accent);
  text-align: center;
}
.giftbar-text {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 18px);
  color: #fff;
}
.giftbar-cta {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--r-pill);
  padding: 5px 16px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.giftbar-cta:hover, .giftbar-cta:focus-visible {
  background: #fff; color: var(--accent); border-color: #fff;
}
@media (max-width: 640px) {
  .giftbar { gap: 10px; padding: 9px 14px; }
}

.nav {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 16px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), padding .3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }
/* Client wordmark (bronze on transparent) — nav sits on --bg, so the bronze file is the right one */
.nav .logo {
  display: inline-flex; align-items: center;
  line-height: 0;
}
.nav .logo img {
  height: 40px; width: auto; display: block;
  transition: opacity .25s var(--ease);
}
.nav .logo:hover img { opacity: 0.75; }
@media (max-width: 640px) {
  .nav .logo img { height: 32px; }
}

.nav-menu {
  display: flex;
  gap: 30px;
  list-style: none; margin: 0; padding: 0;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-item { position: relative; }
.nav-item > a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 12px 0;
  color: var(--ink);
  transition: color .25s var(--ease);
  white-space: nowrap;
}
.nav-item > a:hover { color: var(--accent); }
/* Active page — subtle gold label + underline so visitors know where they are. */
.nav-item > a.active { color: var(--accent); position: relative; }
.nav-item > a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1.5px; background: currentColor; opacity: 0.9;
}
.nav-plus {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  display: inline-block;
  margin-left: 2px;
  transform: translateY(-1px);
}
.nav-dropdown {
  position: absolute; top: 100%; left: -16px;
  min-width: 220px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display: flex; flex-direction: column;
  gap: 2px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 10;
}
.nav-item--dd:hover .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a {
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 10px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-dropdown a:hover { background: var(--bg-2); color: var(--accent); }

.nav-right {
  display: flex; align-items: center; gap: 24px;
}
.nav-cart {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 8px;
  transition: color .25s var(--ease);
}
.nav-cart:hover { color: var(--accent); }
.nav-cart-count {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 13px;
}
.nav-cta {
  background: var(--btn-brown);
  color: var(--bg);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: 'Noto Sans', var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  transition: transform .25s var(--ease);
  white-space: nowrap;
}
.nav-cta:hover { transform: scale(1.03); }
.nav-burger {
  display: none;
  width: 42px; height: 42px; border: 0; background: transparent;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  cursor: pointer; padding: 0;
}
.nav-burger span { width: 24px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-burger.on span:nth-child(1) { transform: translateY(3.8px) rotate(45deg); }
.nav-burger.on span:nth-child(2) { transform: translateY(-3.8px) rotate(-45deg); }
/* Collapse to the burger before the long labels ("Laser Hair Removal",
   "Aesthetic Treatments") crowd the row — the horizontal nav needs ~1180px.
   Placed AFTER the base .nav-burger{display:none} so it wins by source order. */
@media (max-width: 1180px) {
  .nav-menu { display: none; }
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
  .nav { grid-template-columns: 1fr auto; }
}
.nav-drawer {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(20,16,13,0.4);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.nav-drawer.on { opacity: 1; pointer-events: auto; }
.nav-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(82vw, 360px);
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 100px 32px 40px;
  box-shadow: -20px 0 60px -20px rgba(20,16,13,0.4);
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-drawer.on .nav-drawer-panel { transform: none; }
.nav-drawer-close {
  position: absolute; top: 22px; right: 24px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
  font-size: 26px; line-height: 1; color: var(--ink);
  cursor: pointer; display: grid; place-items: center;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-drawer-close:active { background: var(--ink); color: var(--bg); }
.nav-drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-drawer ul a { font-family: var(--font-display); font-size: clamp(25px, 6vw, 31px); font-weight: 500; color: var(--ink); display: block; padding: 8px 0; letter-spacing: -0.01em; }
.nav-drawer ul a:active { color: var(--accent); }
.nav-drawer ul a.active { color: var(--accent); }
.nav-drawer-cta { margin-top: 32px; width: 100%; }

/* ─────── Buttons ─────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 28px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--btn-brown);
  color: var(--bg);
  font-family: 'Noto Sans', var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: transform .25s var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform: scale(1.03); }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { transform: scale(1.03); }
.btn.lg { padding: 22px 34px; font-size: 13px; }

/* Rotating-circle button (Femme signature) */
.btn-rotate {
  display: inline-flex; align-items: center; gap: 18px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; font-family: inherit;
  color: var(--ink);
  font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn-rotate .ring {
  width: 60px; height: 60px;
  position: relative;
  border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  transition: transform .5s var(--ease), background .35s var(--ease);
}
.btn-rotate:hover .ring { transform: rotate(45deg) scale(1.05); }
.btn-rotate .rotating-text {
  position: absolute; inset: 0;
  animation: ring-spin 14s linear infinite;
}
.btn-rotate .rotating-text text {
  font-family: var(--font-body);
  font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase;
  fill: var(--bg);
}
@keyframes ring-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ─────── HERO (Femme-style: full-bleed photo + marquee top + welcome + pills) ─────── */
.hero {
  /* offset = giftbar 40 + nav ~82 + top margin 8 + bottom margin 16 = 146,
     so the bottom gap matches the 16px side gap */
  height: calc(100dvh - 146px);
  min-height: 660px;
  padding: 0;
  position: relative;
  overflow: hidden;
  margin: 8px 16px 16px;
  border-radius: 18px;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-slider { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.92);
  transform-origin: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}
/* slide 1 = the face/resting shot (anchor center so her face stays centred in
   the tall hero crop rather than being trimmed off to one side),
   slide 2 = legs (feet sit bottom-right, anchor there to keep them in frame) */
.hero-slide:first-child { object-position: center 38%; }
.hero-slide:nth-child(2) { object-position: 24% 42%; }
.hero-slide.on {
  opacity: 1;
  animation: hero-breathe 8s ease-out forwards;
}
@keyframes hero-breathe {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.1) 40%, rgba(26,26,26,0.55) 100%);
}

/* Hero marquee inside rounded banner */
.hero-marquee {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  padding-top: 32px;
  padding-bottom: 12px;
}
.hero-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: hero-marquee-scroll 30s linear infinite;
  width: max-content;
}
/* Client hero photo is near-white at the top (avg luma ~204), so the marquee runs dark
   instead of the template's light-on-dark. */
.hero-marquee-item {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(120px, 16vw, 240px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-right: 40px;
  display: inline-flex;
  align-items: center;
  gap: 40px;
  text-shadow: 0 4px 30px rgba(255,255,255,0.25);
}
.hero-marquee-item .dot { color: var(--accent); opacity: 0.9; }
@keyframes hero-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * (16vw + 40px) * 12)); }
}

/* Bottom row: welcome (left) + pill grid (right) */
.hero-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 0 44px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}
.hero-welcome {
  color: var(--bg);
  max-width: 520px;
}
.hero-welcome-eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bg);
  margin-bottom: 16px;
  opacity: 0.92;
}
.hero-welcome-body {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  text-wrap: balance;
}

.hero-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: var(--bg);
  border-radius: var(--r-pill);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all .3s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.hero-pill:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
  transform: translateY(-2px);
}

/* Centered scroll-down button with notch cutout */
.hero-scroll-btn {
  position: absolute;
  left: 50%; bottom: -36px;
  transform: translateX(-50%);
  z-index: 5;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.25);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  animation: hero-scroll-bob 2.4s ease-in-out infinite;
}
.hero-scroll-btn::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 60px;
  background: var(--bg);
  z-index: -1;
  border-radius: 60px 60px 0 0;
}
.hero-scroll-btn:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateX(-50%) translateY(-4px);
}
.hero-scroll-btn svg { position: relative; z-index: 1; }
@keyframes hero-scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ─────── Statement — big sticky heading + chaotic floating cards ─────── */
.statement {
  padding: 0 var(--page-x);
  position: relative;
  min-height: 220vh;
}
.statement-middle {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.statement-sticky {
  display: flex;
  flex-direction: column;
  gap: 36px;
  text-align: center;
  align-items: center;
  max-width: 1080px;
  pointer-events: auto;
  padding: 0 12px;
}
.statement-sticky .eyebrow { justify-content: center; }
.statement-sticky h2 {
  font-family: var(--font-display);
  font-size: clamp(46px, 5.6vw, 88px);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  font-style: italic;
  max-width: 28ch;
}
.statement-sticky h2 .ny {
  font-style: normal;
  position: relative;
  display: inline-block;
}
.statement-sticky h2 .ny::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 4%;
  height: 2px;
  background: var(--ink);
  opacity: 0.5;
}
.statement-thumbs {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}
.statement-thumb-fan {
  display: inline-flex;
  align-items: center;
  padding-left: 26px;
}
.statement-thumb {
  width: 140px; height: 158px;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid var(--bg);
  box-shadow: var(--shadow);
  margin-left: -30px;
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .45s var(--ease);
}
.statement-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.statement-thumb:nth-child(1) { transform: rotate(-15deg) translateX(8px) translateY(6px); z-index: 1; }
.statement-thumb:nth-child(2) { transform: rotate(0deg) translateY(-10px); z-index: 3; }
.statement-thumb:nth-child(3) { transform: rotate(15deg) translateX(-8px) translateY(6px); z-index: 2; }
.statement-thumb:first-child { margin-left: 0; }
/* "Open the fan" on hover — all three move */
.statement-thumb-fan:hover .statement-thumb:nth-child(1) { transform: rotate(-22deg) translateX(-22px) translateY(2px); box-shadow: 0 30px 50px -20px rgba(54,50,45,0.4); }
.statement-thumb-fan:hover .statement-thumb:nth-child(2) { transform: rotate(0deg) translateY(-26px) scale(1.06); box-shadow: 0 36px 56px -22px rgba(54,50,45,0.45); }
.statement-thumb-fan:hover .statement-thumb:nth-child(3) { transform: rotate(22deg) translateX(22px) translateY(2px); box-shadow: 0 30px 50px -20px rgba(54,50,45,0.4); }
.statement-thumb-fan:hover .statement-thumb img { transform: scale(1.08); }
.statement-thumb img { width: 100%; height: 100%; object-fit: cover; }
.statement-thumb-count {
  font-family: 'Noto Sans', var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: center;
}
.statement-thumb-count strong { color: var(--ink); font-weight: 600; }

.statement-cards-fall {
  position: absolute;
  inset: 16vh clamp(16px, 3vw, 56px) 18vh;
  pointer-events: none;
  z-index: 3;
}
.benefit-wrap {
  position: absolute;
  width: clamp(240px, 22vw, 320px);
  transform: translateY(var(--parallax, 0));
  will-change: transform;
  pointer-events: auto;
}
.benefit {
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px;
  display: flex;
  box-shadow: 0 14px 38px -20px rgba(26,26,26,0.22);
  opacity: 0;
  transform: translate(var(--enter-x, 0), var(--enter-y, 80px)) rotate(var(--enter-rot, 0deg));
  transition: opacity 1s var(--ease), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.benefit.in {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}
.benefit-inner {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 11px;
  max-width: 22ch;
}
/* Matches the client's own "Why Choose" discs: pale stone circle, bronze glyph (4.4:1). */
.benefit-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #E5E2DE;
  color: var(--accent);
  display: grid;
  place-items: center;
}
.benefit-n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.benefit-t {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 34px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.benefit-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.benefit-meta {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  margin-top: 2px;
  white-space: nowrap;
}

/* Tablets KEEP the desktop floating-parallax scene (client wants the cards to
   drift over the pinned copy, not sit in a rigid grid). Only phones ≤760, where
   the scatter overlaps into an unreadable pile, collapse to a stacked column. */
@media (max-width: 760px) {
  .statement { min-height: 0; padding: 80px var(--page-x); overflow-x: clip; }
  .statement-middle { position: static; height: auto; pointer-events: auto; }
  .statement-sticky { text-align: center; align-items: center; max-width: none; padding: 0; }
  .statement-sticky .eyebrow { justify-content: center; }
  .statement-sticky h2 { font-size: clamp(34px, 8.5vw, 60px); text-align: center; max-width: 28ch; margin-left: auto; margin-right: auto; line-height: 1.1; }
  .statement-cards-fall {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 44px;
    margin-bottom: 56px;
  }
  .benefit-wrap { position: static; width: auto; transform: none; }
  .benefit { aspect-ratio: auto; }
  .benefit-inner { padding: 30px 24px; max-width: none; }
  .benefit-t { font-size: clamp(20px, 6vw, 26px); }
}

/* ─────── Tabbed services ─────── */
.services {
  background: var(--paper);
  padding-block: 160px;
}
.services-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 56px; align-items: end;
  margin-bottom: 64px;
}
.services-head h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.4vw, 80px);
  line-height: 0.96;
  margin: 14px 0 0;
  font-weight: 500;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 18ch;
}
.services-head h6 { margin: 0; }
.services-row {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px;
  align-items: stretch;
}
.services-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}
.tab {
  display: grid; grid-template-columns: 64px 1fr 40px;
  align-items: baseline; gap: 24px;
  padding: 30px 4px 30px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  transition: padding-left .4s var(--ease);
}
.tab:hover .tab-title { color: var(--accent); }
.tab.on { padding-left: 22px; }
.tab-n {
  font-family: var(--font-display); font-style: italic;
  font-size: 28px; color: var(--ink-soft);
  line-height: 1;
  transition: color .35s var(--ease);
}
.tab.on .tab-n { color: var(--accent); }
.tab-main { display: flex; flex-direction: column; gap: 8px; }
.tab-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.tab.on .tab-title { font-style: italic; }
.tab-body {
  max-height: 0; overflow: hidden;
  color: var(--ink-soft); font-size: 14.5px;
  transition: max-height .55s var(--ease), opacity .5s var(--ease), padding .5s var(--ease);
  opacity: 0;
  max-width: 56ch;
}
.tab.on .tab-body { max-height: 220px; padding-top: 10px; opacity: 1; }
/* circled arrow, same treatment as the FAQ toggle */
.tab-arrow {
  width: 42px; height: 42px;
  background: var(--paper);
  color: var(--accent);
  border: 1px solid var(--line);  border-radius: 50%;
  display: grid; place-items: center;
  justify-self: end;
  flex-shrink: 0;
  font-size: 16px;
  opacity: 1;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.tab.on .tab-arrow { background: var(--accent); color: #fff; border-color: var(--accent); }
.tab:hover .tab-arrow { border-color: var(--accent); }
.tab.on:hover .tab-arrow { color: #fff; }

.services-img {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 540px;
  background: var(--bg-2);
}
.services-img-card {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.services-img-card.on { opacity: 1; }
.services-img-card img { width: 100%; height: 100%; object-fit: cover; }
.services-img-card .price-tag {
  position: absolute; left: 24px; bottom: 24px;
  background: var(--bg); color: var(--ink);
  padding: 12px 20px;
  border-radius: 4px;
  font-family: var(--font-display); font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.services-img-card .price-tag small {
  font-family: var(--font-body); font-style: normal;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* Per-tab inline image — hidden on desktop (the side preview column is used there);
   shown inside the active tab once the row stacks (≤1180). */
.tab-img {
  display: none;
  grid-column: 1 / -1;
  position: relative;
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 9 / 4;
  max-height: 260px;
  background: var(--bg-2);
}
.tab-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tab-img .price-tag {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--bg); color: var(--ink);
  padding: 10px 16px; border-radius: 4px;
  font-family: var(--font-display); font-style: italic; font-size: 20px;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline; gap: 7px;
}
.tab-img .price-tag small {
  font-family: var(--font-body); font-style: normal;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
}

/* ─────── Word marquee ─────── */
.word-marquee {
  background: var(--bg);
  padding: 32px 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
}
.word-marquee-track {
  display: flex; gap: 40px;
  white-space: nowrap;
  animation: word-scroll 36s linear infinite;
  width: max-content;
}
.word-marquee-item {
  display: inline-flex; align-items: center; gap: 40px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
}
.word-marquee-item::after {
  content: "✦";
  font-style: normal;
  font-size: 40%;
  color: var(--accent);
  vertical-align: middle;
}
@keyframes word-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Bronze variant — used on the About page. */
.word-marquee--bronze {
  background: linear-gradient(90deg, #7A5E27 0%, #9A7B34 50%, #7A5E27 100%);
  border-block-color: rgba(255, 255, 255, 0.16);
}
.word-marquee--bronze .word-marquee-item { color: #FBF6EC; }
.word-marquee--bronze .word-marquee-item::after { color: rgba(255, 255, 255, 0.75); }

/* ─────── Build your course (calculator) ─────── */
.calc {
  background: var(--bg);
  padding-top: 112px;
  padding-bottom: 76px;
}
.calc-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 64px;
}
.calc-head h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.4vw, 80px);
  line-height: 0.96;
  margin: 14px 0 0;
  font-weight: 500;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 21ch;
}
.calc-blurb {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 46ch;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.calc-section-l {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 18px;
}
.calc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.calc-section-head .calc-section-l { margin-bottom: 0; }
/* price note sitting top-right, opposite the tier label */
.calc-section-note {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.calc-clear {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font: inherit;
  font-family: 'Noto Sans', var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.calc-clear:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* selection block header: display heading left, small Clear all top-right */
.calc-breakdown-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 12px;
}
.calc-breakdown-l {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1; color: var(--ink);
}
.calc-clear--sm {
  padding: 3px 9px; font-size: 9px; letter-spacing: 0.1em;
  border-color: var(--line);
}

/* Area selector grid */
.calc-areas {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 14px;
}
.calc-area-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.calc-area {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.calc-area:hover { background: var(--bg); }
.calc-area:hover .calc-area-name { color: var(--accent); }
.calc-area.on { background: var(--bg); border-color: var(--accent); }
.calc-area.on .calc-area-name { font-style: italic; }
.calc-area.on .calc-area-price { color: var(--accent); }
.calc-area-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.calc-area.on .calc-area-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.calc-area-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.1;
  transition: color .3s var(--ease);
}
.calc-area-zone {
  display: none;
}
.calc-area-price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color .3s var(--ease);
}
.calc-area:hover .calc-area-price { color: var(--accent); }

/* Area pills */
.calc-pill-groups { display: flex; flex-direction: column; gap: 22px; }
.calc-pill-group { display: flex; flex-direction: column; gap: 12px; }
.calc-pill-group-l {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
/* Shown when mix + match beats stacked packages — turns "why is 2 areas dearer than 6?"
   into a discount the visitor can see. */
.calc-saving {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(130, 100, 9, 0.08);
  color: var(--accent);
  font-size: 13px;
  line-height: 1.45;
}

/* Mix + match offer — the client asked for "something that says want to mix + match",
   so this states the rates rather than being a second area picker. */
.mixnote {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 28px;
  margin-top: 34px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.mixnote-copy { max-width: 42ch; }
.mixnote-l {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 6px;
}
.mixnote-p {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-soft);
}
.mixnote-tiers { display: flex; flex-wrap: wrap; gap: 10px; }
.mixnote-tier {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  transition: border-color .25s var(--ease);
}
.mixnote-tier:hover { border-color: var(--accent); }
.mixnote-tier-n {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap;
}
.mixnote-tier-p {
  font-family: var(--font-display); font-size: 26px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
@media (max-width: 720px) {
  .mixnote { padding: 24px; gap: 20px; }
  .mixnote-tier { padding: 12px 16px; flex: 1; }
}

/* ── Pricing variant labels (temporary, remove the losing option + its label) ── */
.opt-label {
  max-width: 1320px; margin: 0 auto 18px;
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 var(--page-x);
}
.opt-label-tag {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bg); background: var(--accent);
  padding: 5px 12px; border-radius: var(--r-pill);
}
.opt-label-name { font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; }

/* ── OPTION B — package cards, four in a row with checkboxes inside ── */
.pcards { background: var(--paper); padding-block: 120px; }
.pcards-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 8px; align-items: start;
}
/* same tier cards reused as the selector inside Option A's panel */
.calc-tiercards { margin: 4px 0 36px; }
.calc-tiercards .pcard.active { border-color: var(--accent); box-shadow: var(--shadow); }
/* the four cards are a tier SELECTOR row; areas live in one clean list below */
.pcard {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 20px 24px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #FFFFFF; cursor: pointer; font: inherit; text-align: left;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.pcard:hover { transform: translateY(-2px); border-color: rgba(130, 100, 9, 0.4); }
.pcard.active { border-color: var(--accent); box-shadow: var(--shadow); }
.pcard-head-l { display: flex; flex-direction: column; gap: 5px; }
.pcard-size {
  font-family: var(--font-display); font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1; color: var(--ink);
}
.pcard-sessions {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.pcard-price {
  font-family: var(--font-display); font-size: clamp(24px, 2vw, 31px); line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pcard-count {
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--bg); background: var(--accent); border-radius: var(--r-pill);
}

/* Areas as a full-width list of rows (client preferred rows over checkbox columns) */
.pcards-list {
  margin-top: 20px; padding: 26px 30px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #FFFFFF;
}
.pcards-list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.pcards-list-title {
  font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); color: var(--ink);
}
.pcards-list-price {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.pcards-rows {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px;
}
.pcards-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer; font: inherit; text-align: left;
  color: var(--ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.pcards-row:hover { border-color: var(--accent); }
.pcards-row.on { border-color: var(--accent); background: #FFFFFF; color: var(--ink); }
.pcards-row-name { font-size: 14.5px; }
.pcards-row-mark {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 14px; line-height: 1;
  color: var(--ink-soft); border: 1px solid var(--line-strong);
  transition: all .2s var(--ease);
}
.pcards-row.on .pcards-row-mark {
  color: var(--bg); background: var(--accent); border-color: var(--accent);
}
/* selected areas itemised (client liked this from Option A) */
.pcards-selected {
  margin-top: 20px; padding: 22px 30px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #FFFFFF;
}
.pcards-selected-l {
  display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 12px;
}
.pcards-selected-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pcards-selected-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink);
}
.pcards-selected-list li:last-child { border-bottom: none; }
.pcards-selected-tier { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pcards-mix {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 18px; padding: 12px 22px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
.pcards-mix .mixnote-l { margin: 0; margin-right: auto; font-size: clamp(17px, 1.5vw, 21px); }
.pcards-mix-tier {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #FFFFFF;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.pcards-mix-tier strong {
  font-family: var(--font-display); font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--accent);
}
@media (max-width: 560px) {
  /* Centered label; price tiers stacked in a column, each full width so
     "N areas $price" stays on one line. */
  .pcards-mix { flex-direction: column; align-items: stretch; gap: 10px; }
  .pcards-mix .mixnote-l { text-align: center; margin: 0 0 4px; }
  .pcards-mix-tier { justify-content: center; padding: 10px 14px; }
}
.pcards-bar {
  position: sticky; bottom: 16px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 24px; padding: 18px 28px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--bg);
  box-shadow: 0 20px 44px -20px rgba(0,0,0,0.5);
}
.pcards-bar-l { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pcards-bar-sub { font-size: 13px; letter-spacing: 0.06em; color: rgba(245,239,230,0.7); }
.pcards-bar-n {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pcards-bar-save {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--accent-light); padding: 3px 10px; border-radius: var(--r-pill);
}
.pcards-bar .btn { background: var(--accent-light); color: var(--ink); flex-shrink: 0; }
.pcards-bar .btn:hover { background: #fff; }
.pcards-bar .btn.disabled { opacity: 0.5; pointer-events: none; }
@media (max-width: 980px) {
  .pcards-grid { grid-template-columns: repeat(2, 1fr); }
  .pcards-rows { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* Tier cards as a 2×2 grid on phones; stack each card's label over its price
     so the four prices read at a glance without crowding the narrow column. */
  .pcards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pcards-grid .pcard { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .pcards-grid .pcard-sessions { font-size: 9px; letter-spacing: 0.04em; white-space: nowrap; }
  .pcards-rows { grid-template-columns: 1fr; }
  .pcards-bar { flex-direction: column; align-items: stretch; border-radius: var(--r-lg); }
}

.calc-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.calc-pill {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
}
.calc-pill:hover { border-color: var(--accent); transform: translateY(-2px); }
.calc-pill:active { transform: scale(0.96); }
.calc-pill.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.calc-pill.locked { opacity: 0.38; cursor: not-allowed; }
.calc-pill.locked:hover { border-color: var(--line); transform: none; }
.calc-pill-name { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.calc-pill-price { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: color .25s var(--ease); }
.calc-pill.on .calc-pill-price { color: rgba(245,239,230,0.85); }

/* Session range slider */
.calc-zonetabs { display: flex; flex-wrap: wrap; gap: 30px; border-bottom: 1px solid var(--line); }
.calc-zonetab {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; cursor: pointer;
  font-family: 'Noto Sans', var(--font-body);
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-soft);
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 0 0 14px;
  margin-bottom: -1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.calc-zonetab:hover:not(.on) { color: var(--accent); }
.calc-zonetab.on { color: var(--ink); border-bottom-color: var(--accent); }
.calc-zonetab-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; font-size: 11px; letter-spacing: 0;
  background: var(--accent); color: var(--bg);
}

.calc-range-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.calc-range-head .calc-section-sub { margin-bottom: 0; }
.calc-range-meta { display: flex; align-items: baseline; gap: 10px; }
.calc-range-n { font-family: var(--font-body); font-size: 38px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.calc-range-tier { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.9vw, 22px); color: var(--accent); white-space: nowrap; }
.calc-range-wrap { position: relative; }
.calc-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 11px; border-radius: 999px; margin: 0;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct, 50%), var(--line-strong) var(--pct, 50%), var(--line-strong) 100%);
  cursor: pointer; outline: none;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 2px 9px rgba(54,50,45,0.3); cursor: grab;
  transition: transform .15s var(--ease);
}
.calc-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.calc-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 2px 9px rgba(54,50,45,0.3); cursor: grab;
}
.calc-range::-moz-range-track { height: 11px; border-radius: 999px; background: transparent; }
.calc-range-scale { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding: 0 8px; }

/* Single continuous panel */
.calc-panel {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.calc-panel .calc-section-head { margin-bottom: 0; }
.calc-panel .calc-sessions {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.calc-footer {
  background: linear-gradient(165deg, rgba(196,147,107,0.12) 0%, rgba(196,147,107,0.05) 100%);
  border: 1px solid rgba(196,147,107,0.28);
  border-radius: 20px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}
.calc-footer .calc-breakdown { border-top: 0; padding-top: 0; }
.calc-checkout {
  display: flex; flex-direction: column; gap: 16px;
  border-left: 1px solid rgba(196,147,107,0.3);
  padding-left: 40px;
}
.calc-total-n { color: var(--accent); }
@media (max-width: 880px) {
  .calc-panel { padding: 28px; gap: 22px; }
  .calc-panel .calc-sessions { padding: 24px; }
  .calc-footer { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
  .calc-checkout { border-left: 0; padding-left: 0; border-top: 1px solid rgba(196,147,107,0.3); padding-top: 22px; }
}

/* Summary panel */
.calc-summary {
  position: sticky;
  top: 100px;
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.calc-summary .calc-section-l {
  color: var(--ink-soft);
}
.calc-summary-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.calc-section-sub {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.calc-sessions-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.calc-session {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.calc-session:hover { background: rgba(196,147,107,0.08); border-color: var(--line-strong); }
.calc-session.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.calc-session-n {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.calc-session-l {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.calc-session.on .calc-session-l { color: rgba(245,239,230,0.9); }
.calc-session-tag {
  position: absolute;
  top: -8px;
  right: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.calc-session-note {
  margin: 14px 0 0;
  font-size: 20px;
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--font-display);
}

.calc-breakdown {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-empty {
  margin: 0;
  max-width: 46ch;
  font-family: 'Montserrat', var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.calc-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 15px;
}
/* each area on its own line with a hairline divider between */
.calc-items li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.calc-items li:last-child { border-bottom: none; }
.calc-items li > span:first-child { min-width: 0; font-weight: 500; }
.calc-items li > span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
/* price text + its own remove button share the right side of each row */
.calc-item-meta { display: inline-flex; align-items: center; gap: 12px; }
.calc-item-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.calc-item-del:hover, .calc-item-del:focus-visible {
  color: #b23b3b; border-color: #b23b3b; background: rgba(178, 59, 59, 0.06);
}
@media (max-width: 560px) {
  /* Stack each selection: area name over its "tier · sessions · price" line. */
  .calc-items li { flex-direction: column; align-items: flex-start; gap: 3px; }
  /* Price stays left, the remove button pins to the right edge of the row. */
  .calc-item-meta { width: 100%; }
  .calc-item-del { margin-left: auto; }
}
.calc-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-soft);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.calc-row > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.calc-row > span:first-child { min-width: 0; }
.calc-row--discount { color: var(--accent); }

.calc-total {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}
.calc-total-l {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink);
}
.calc-total-sub {
  display: block;
  font-size: 17px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-top: 6px;
  font-style: italic;
  font-family: var(--font-display);
}
.calc-total-n {
  font-family: var(--font-body);
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.calc-cta {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.calc-cta.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.calc-fineprint {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: pretty;
}

/* ─────── Warm calculator palette ─────── */
.calc-panel {
  background: #FFFFFF;
  border-color: rgba(74,51,37,0.14);
}
.calc-footer {
  background: #FFFFFF;
  border-color: rgba(74,51,37,0.16);
  border-top: 1px solid rgba(74,51,37,0.16);
}
.calc-checkout { border-left-color: rgba(74,51,37,0.18); }
.calc-total-n { color: var(--btn-brown); }
/* selected pill: soft beige fill, bronze text + border (matches the client's swatch) */
.calc-pill.on { background: #E9E5E0; border-color: var(--accent); color: var(--accent); }
.calc-pill.on .calc-pill-price { color: var(--accent); }
.calc-pill:hover { border-color: var(--btn-brown); }
.calc-zonetab.on { color: var(--ink); border-bottom-color: var(--btn-brown); }
.calc-zonetab:hover:not(.on) { color: var(--btn-brown); }
.calc-zonetab-count { background: var(--btn-brown); }
.calc-session-note { color: var(--ink); }
.calc-pill { background: #fffdf9; border-color: rgba(74,51,37,0.14); }

@media (max-width: 1080px) {
  .calc-head { grid-template-columns: 1fr; gap: 20px; }
  .calc-grid { grid-template-columns: 1fr; gap: 16px; }
  .calc-summary { position: static; }
}
@media (max-width: 600px) {
  .calc-area-grid { grid-template-columns: 1fr; }
  .calc-sessions-row { grid-template-columns: 1fr; }
}

/* ─────── Service cards row ─────── */
.cards {
  padding-block: 160px;
}
.cards-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 56px;
  gap: 40px;
}
.cards-head h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.4vw, 80px);
  line-height: 0.96;
  margin: 18px 0 0;
  max-width: 18ch;
  letter-spacing: -0.02em;
  font-weight: 500;
  text-wrap: balance;
}
.cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.card-svc {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display: flex; flex-direction: column;
}
.card-svc:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card-svc-img {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
}
.card-svc-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.card-svc:hover .card-svc-img img { transform: scale(1.06); }
.card-svc-cat {
  position: absolute; top: 18px; left: 18px;
  background: var(--bg); color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
}
.card-svc-cat.dark { background: var(--ink); color: var(--bg); }
.card-svc-bottom {
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.card-svc-name {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.card-svc-price {
  font-style: italic; color: var(--ink-soft);
  font-size: 22px;
  white-space: nowrap;
}
.card-svc-price small {
  font-family: var(--font-body); font-style: normal;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: 4px;
}
.card-svc-body { color: var(--ink-soft); font-size: 13.5px; margin: 0; text-wrap: pretty; }
.card-svc-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* ─────── Why us / mission ─────── */
.why {
  background: var(--ink);
  color: var(--bg);
  padding-block: 108px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* On the Aesthetic page the Why block sits directly above the booking form —
   trim its bottom padding so the dark section doesn't leave a large void. */
.why:has(+ .cta) { padding-bottom: 32px; }
/* Blurred studio photo behind the section. POSITIVE z-index (0) is deliberate: a
   negative z-index sat behind .why's own opaque var(--ink) background, which fully
   occluded it — the browser never even painted or loaded the image. Content is lifted
   to z-index:2 (.why > .container) so it stays above the photo + overlay. */
.why::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('images/treatment-care-2.jpeg');
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  /* Bound the raw --parallax (which can be large on a tall section) to a subtle drift,
     and keep extra scale as margin so the translate never reveals an edge. */
  transform: scale(1.14) translateY(calc(var(--parallax, 0px) * 0.12));
  z-index: 0;
  will-change: transform;
}
.why::after {
  content: "";
  position: absolute; inset: 0;
  /* Even overlay: dark enough for the cream copy, light enough that the photo reads. */
  background: linear-gradient(180deg, rgba(20,16,13,0.72) 0%, rgba(20,16,13,0.84) 100%);
  z-index: 1;
}
.why > .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .why::before { transform: scale(1.14); }
}
.why-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 52px;
  max-width: 1100px;
}
.why-h {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.4vw, 80px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--bg);
  text-wrap: balance;
}
.why-h .i { font-style: italic; }
.why .eyebrow { color: rgba(245, 239, 230, 0.7); }
.why .eyebrow::before { background: var(--accent); }

/* Stats row with vertical dividers (at the very bottom) */
.why-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 40px 0;
  border-top: 1px solid rgba(245, 239, 230, 0.18);
  border-bottom: 1px solid rgba(245, 239, 230, 0.18);
}
.why-stat {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 0 32px;
  border-right: 1px solid rgba(245, 239, 230, 0.14);
}
.why-stat-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* beige disc, bronze glyph — the brand badge, beside the figure */
.why-stat-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #E5E2DE;
  color: var(--accent);
  display: grid; place-items: center;
  margin-top: 4px;
}
.why-stat:first-child { padding-left: 0; }
.why-stat:last-child { border-right: none; padding-right: 0; }
.why-stat-n {
  font-family: var(--font-body);
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--bg);
}
.why-stat-l {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(245, 239, 230, 0.65);
  margin-top: 6px;
}

/* Bottom: image pair + manifesto side by side */
.why-bottom {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 60px;
}
.why-mission {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: rgba(245, 239, 230, 0.72);
  font-size: 15.5px;
  line-height: 1.7;
  text-wrap: pretty;
  max-width: 50ch;
}
/* kill default paragraph margins so the flex gap is the only spacing that counts */
.why-mission > p, .why-mission > .why-lead { margin: 0; }
/* Two paragraphs at one size gave the eye nothing to land on. The first now leads at
   display size; the second stays quiet support beneath it. */
.why-lead {
  font-family: var(--font-display);
  font-size: clamp(27px, 2.3vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--bg);
  max-width: 30ch;
}
.why-lead .i {
  font-style: italic;
  /* muted bronze, not bright gold — stays in the brand's bronze/beige/dark family
     while keeping enough lift to read on the dark section */
  color: #B9975B;
}
.why-mission strong {
  font-weight: 500;
  color: #B9975B;
}
/* three quiet proof points with a small gold node each — reads faster than a block */
.why-points {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.why-points li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 239, 230, 0.72);
}
.why-point-dot {
  position: absolute;
  left: 0; top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid #B9975B;
}
.why-mission .btn { margin-top: 20px; align-self: flex-start; background: var(--btn-brown); color: var(--bg); }
.why-mission .btn:hover { background: var(--accent); color: var(--bg); }
/* Taped polaroids, echoing the client's own site. The frame must not clip, or the
   tape gets cut off — so the rounding lives on the photo inside, not on the frame. */
.why-images {
  display: grid;
  /* two prints of near-equal size, video only slightly larger than the still */
  grid-template-columns: 0.6fr 0.64fr;
  align-items: start;
  gap: 8px;
  justify-content: end;
  /* pull the pair back from the right edge so the video card doesn't crowd it,
     and scale the pair up a touch so the prints read a little larger */
  transform: translateX(-56px) scale(1.09);
  transform-origin: center right;
  padding-top: 14px; /* room for the tape to sit above the top frame */
  /* rides up over the heading — z-index because the negative margin alone would let
     the heading's own stacking order win */
  margin-top: -110px;
  position: relative;
  z-index: 3;
}
.why-images .img--still {
  order: 1;
  margin-top: 150px; /* dropped below the video so the pair reads as a stack */
  margin-right: -34px; /* tuck under the video card so the two overlap */
}
/* video laps over the still, like one print dropped on another */
.why-images .img--video {
  order: 2;
  margin-left: -18px;
  z-index: 2;
}
.why-images .img--still { z-index: 1; }
.why-images .img {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 4/5;
  background: #F7F5F1;
  padding: 12px 12px 92px; /* deep bottom edge — the polaroid chin, holds the caption */
  border-radius: 3px;
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.55);
  overflow: visible;
}
.why-images .img > img,
.why-images .img > video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1px;
  background: #151310;
}
/* Handwritten caption in the polaroid chin, same script as the section overlines. */
.why-images .img-caption {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  height: 78px;
  display: grid; place-items: center;
  font-family: 'Oooh Baby', cursive;
  font-size: 27px;
  line-height: 1.25;
  text-align: center;
  color: rgba(54, 50, 45, 0.72);
  transform: rotate(-0.8deg);
  pointer-events: none;
}

/* Clean strip of washi tape across the top edge. */
.why-images .img::before {
  content: "";
  position: absolute;
  top: -15px; left: 50%;
  width: 40%; height: 34px;
  transform: translateX(-50%) rotate(-3.5deg);
  background: linear-gradient(180deg, rgba(233, 218, 189, 0.86), rgba(214, 196, 163, 0.8));
  border-radius: 1px;
  z-index: 2;
  pointer-events: none;
}
.why-images .img--video { transform: rotate(-5deg); }
.why-images .img--still { transform: rotate(5.5deg) scale(0.94); transform-origin: top center; }
.why-images .img--still::before {
  transform: translateX(-50%) rotate(4.5deg);
  width: 46%;
}

/* ─────── Video promo banner ─────── */
.video-banner {
  padding-block: 160px;
}
.video-banner { padding: 100px 16px 0; }
.video-card {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/8;
  background: var(--bg-2);
}
.video-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 72%; filter: brightness(0.7); }
.video-card-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px;
  color: var(--bg);
}
.video-card-top {
  display: flex; justify-content: space-between; align-items: start;
  gap: 24px;
}
.video-card .eyebrow { color: rgba(255,255,255,0.85); }
.video-card .eyebrow::before { background: var(--bg); }
.video-card-play {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--bg);
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all .35s var(--ease);
  animation: pulse-soft 3s var(--ease) infinite;
}
.video-card-play:hover { background: var(--bg); color: var(--ink); transform: scale(1.08); }
@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
  50% { box-shadow: 0 0 0 22px rgba(255,255,255,0); }
}
.video-card-h {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 72px);
  font-weight: 300;
  font-style: normal;
  line-height: 1.05;
  margin: 0;
  max-width: 18ch;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.video-card-bottom { display: flex; flex-direction: column; gap: 28px; }
.video-card-form { display: flex; gap: 12px; max-width: 500px; flex-wrap: wrap; }
.video-card-form input {
  flex: 1; min-width: 220px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: var(--r-pill);
  padding: 17px 24px;
  font-family: var(--font-body); font-size: 15px;
  color: var(--bg);
  outline: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.video-card-form input::placeholder { color: rgba(255,255,255,0.65); }
.video-card-form input:focus { border-color: var(--bg); background: rgba(255,255,255,0.2); }
.video-card-form .btn { background: var(--bg); color: var(--ink); border: 0; white-space: nowrap; }
.video-card-form .btn:hover { background: var(--btn-brown); color: var(--bg); }
.video-card-sent {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(18px, 2vw, 26px); color: var(--bg);
  margin: 0; max-width: 28ch;
}
.video-card-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 44ch; margin: -10px 0 0;
}
.video-card-cta { align-self: flex-start; background: var(--bg); color: var(--ink); border: 0; }
.video-card-cta:hover { background: var(--btn-brown); color: var(--bg); }
.journal { padding-block: 160px; background: var(--bg-2); }
.journal-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 40px; margin-bottom: 56px;
}
.journal-head h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.4vw, 80px);
  line-height: 0.96; margin: 18px 0 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-wrap: balance;
}
.journal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.journal-card {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 22px;
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.journal-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.journal-img { aspect-ratio: 4/5; position: relative; overflow: hidden; }
.journal-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.journal-card:hover .journal-img img { transform: scale(1.06); }
.journal-body {
  padding: 32px 32px 32px 0;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 18px;
}
.journal-cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-soft);
}
.journal-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.journal-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink-soft); letter-spacing: 0.04em;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.journal-read {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; color: var(--ink); letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 8px;
}

/* ─────── Testimonials slider (3-up) ─────── */
.testimonials {
  background: var(--bg);
  padding: 92px var(--page-x) 72px;
}
.test-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  margin-bottom: 44px;
}
.test-head h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.4vw, 80px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 14px 0 0;
  color: var(--ink);
  text-wrap: balance;
  max-width: none;
  white-space: nowrap;
}
.test-head-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.test-counter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.test-counter-now { font-size: 36px; line-height: 1; }
.test-counter-sep { opacity: 0.4; }
.test-counter-total { opacity: 0.5; }
.test-nav { display: inline-flex; gap: 10px; }
.test-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.test-arrow:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.test-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

.test-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 32px 0 56px;
  padding-left: max(var(--page-x), calc((100vw - 1320px) / 2));
  padding-right: max(var(--page-x), calc((100vw - 1320px) / 2));
  scroll-padding-left: max(var(--page-x), calc((100vw - 1320px) / 2));
  scrollbar-width: none;
  -ms-overflow-style: none;
  --tcw: min(calc(100vw - 2 * var(--page-x)), 1320px);
}
.test-track::-webkit-scrollbar { display: none; }

.test-card {
  flex: 0 0 calc((var(--tcw) - 44px) / 3);
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  min-height: 320px;
}
.test-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.test-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 80px;
  line-height: 0.4;
  color: var(--bg-2);
  height: 24px;
}
.test-cardtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.test-cardtop .test-stars { color: var(--accent); }
.test-q {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  flex: 1;
}
.test-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
/* Studio wordmark tile, the same way the reviews appear in their own booking system.
   contain, not cover: the logo is 3:1 and cover would crop it to an unreadable middle. */
.test-avatar {
  width: 48px; height: 48px;
  border-radius: 8px; overflow: hidden;
  background: #E5E2DE;
  flex-shrink: 0;
  display: grid; place-items: center;
  padding: 7px;
}
.test-avatar img { width: 100%; height: 100%; object-fit: contain; }
.test-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.test-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.test-role {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.test-stars {
  display: flex; gap: 2px;
  color: var(--ink);
  margin-left: auto;
}

.test-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}
.test-dot {
  width: 24px; height: 3px;
  background: var(--line-strong);
  border: none;
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  transition: background .3s var(--ease), width .35s var(--ease);
}
.test-dot.on { background: var(--ink); width: 44px; }
.test-dot:hover:not(.on) { background: var(--ink-soft); }

@media (max-width: 1180px) {
  .test-card { flex: 0 0 calc((var(--tcw) - 22px) / 2); }
}
@media (max-width: 760px) {
  .test-head { grid-template-columns: 1fr; gap: 20px; }
  .test-head-right { justify-content: space-between; }
}
@media (max-width: 600px) {
  .test-card { flex: 0 0 var(--tcw); min-height: 0; }
}

/* ─────── Social / Follow us ─────── */
.social {
  padding: 0;
  background: var(--bg);
}
.social-top {
  background: var(--bg);
  padding: 88px var(--page-x) 56px;
}
.social-top-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}
.social-eyebrow {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.social-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  flex-wrap: wrap;
}
.social-links a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-block;
  position: relative;
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.social-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.social-links a:hover { transform: translateY(-4px); }
.social-links a:hover::after { transform: scaleX(1); }

/* The strip where photos straddle the cream / image-bg boundary */
.social-strip {
  position: relative;
  padding: 0 var(--page-x);
  background: transparent;
  margin-bottom: clamp(-130px, -9vw, -90px);
  z-index: 2;
}
.social-tiles {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: end;
}
.social-tile {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-2);
  transform: translateY(0);
  transition: transform .5s var(--ease);
}
.social-tile img { width: 100%; height: 100%; object-fit: cover; }
.social-tile::after {
  content: "";
  position: absolute; inset: 0;
  /* Gentle warm veil (not dark) so the raw treatment clips read softer and match
     the studio banners below. */
  background: linear-gradient(180deg, rgba(32,28,22,0.08) 0%, rgba(32,28,22,0.12) 55%, rgba(32,28,22,0.26) 100%);
  pointer-events: none;
  z-index: 1;
}
.social-tile--rounded { border-radius: 28px; }
.social-tile--arch { border-radius: 50% 50% 28px 28px / 38% 38% 8% 8%; }
.social-tile:hover { transform: translateY(-8px); }
.social-tile:nth-child(odd)  { margin-top: 24px; }
.social-tile:nth-child(even) { margin-top: 0; }

/* Two shots of the client's own studio — reception wordmark left, their
   "Unveil Your Smoothest Self" wall right. Both photos carry their own lettering, which
   fought the headline, so the layer is blurred: the studio still reads, the words don't. */
.social-bottom {
  background-color: var(--ink);
  color: var(--bg);
  /* Their walls carry lettering from ~54% downward (measured: row gradient energy
     jumps 0.6 -> 3.9 -> 28). So our type lives at the very top and the very bottom,
     leaving their sign a clear middle band. min-height holds the section's scale. */
  padding: 96px var(--page-x) 104px;
  min-height: 820px;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Two photos side by side. object-fit keeps them undistorted (they are portrait, the halves
   are wide); object-position crops to the upper wall so their gold lettering falls into the
   gap between our headline and the footer line instead of colliding with the type. */
.social-bottom-bg {
  position: absolute; inset: 0;
  /* z-index 0, not negative: a negative child paints *behind* .social-bottom's own
     background-color and the photos vanish. Content is lifted above instead. */
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* overflow keeps each photo inside its own half, so the seam stays a straight
   vertical line even though the left photo is rotated. */
.social-bottom-half { overflow: hidden; position: relative; }
.social-bottom-half img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
/* The wall quote sits lower in its frame than the reception sign does in its own
   (56.6% vs 46.6% of the rendered box at ~1500px). Crop further down the source so
   the two lines of gold read on one level. */
.social-bottom-half:last-child img {
  object-position: center 64%;
}
/* The reception shot is taken from below and to the left, so the wall sign leans:
   its baseline climbs ~3.7deg to the right (measured on the "daniéle" and
   "LASER + AESTHETICS" baselines). Rotating back levels it against our own type.
   scale covers the corners the rotation would otherwise expose. */
.social-bottom-half:first-child img {
  transform: rotate(3.6deg) scale(1.12);
  transform-origin: center 40%;
}
.social-bottom::after {
  content: "";
  position: absolute; inset: 0;
  /* Alpha is set from measured photo luma (reception 206, wall 132), not by eye:
     0.88 crushed the bright reception shot to flat dark. At these values the headline
     still clears AA on the lighter photo (4.1:1 top, 4.7:1 at the headline band) while
     the studio stays legible. Do not raise past ~0.66 or the photos disappear again. */
  background: linear-gradient(180deg,
    rgba(32,28,22,0.12) 0%,
    rgba(32,28,22,0.16) 48%,
    rgba(28,24,19,0.52) 100%);
  z-index: 1;
}
@media (max-width: 1200px) {
  /* Tablet & down: one photo only — the two lettered walls become unreadable
     slivers side by side. Keep the right-hand "Unveil your smoothest self" wall
     (client preference), drop the reception wall. */
  .social-bottom-bg { grid-template-columns: 1fr; }
  .social-bottom-half:first-child { display: none; }
}
.social-bottom-inner {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* contact row sits at the foot; the studio's own walls fill everything above it */
  justify-content: flex-end;
  gap: 96px;
}
.social-headline {
  font-size: clamp(48px, 5.4vw, 84px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--bg);
  margin: 0;
  max-width: 34ch;
  text-wrap: balance;
}
.social-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid rgba(245, 239, 230, 0.18);
}
.social-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 239, 230, 0.7);
  max-width: 48ch;
  text-wrap: pretty;
}
.social-phones {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
}
.social-phone {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.01em;
  color: var(--bg);
  transition: color .25s var(--ease);
}
.social-phone:hover { color: var(--accent); }
.social-phone-sep {
  width: 1px; height: 22px;
  background: rgba(245, 239, 230, 0.3);
}

@media (max-width: 1180px) {
  .social-tiles { grid-template-columns: repeat(4, 1fr); }
  .social-tile:nth-child(n+5) { display: none; }
  .social-top-inner { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .social-foot { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}
@media (max-width: 760px) {
  .social-tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .social-tile:nth-child(n+4) { display: none; }
  .social-strip { margin-bottom: -60px; }
  .social-top { padding: 64px var(--page-x) 32px; }
  .social-bottom { padding: 72px var(--page-x) 56px; min-height: 520px; }
  .why-images { grid-template-columns: 1fr; }
  .why-images .img:nth-child(1) { margin-top: 0; }
  .social-phones { flex-wrap: wrap; gap: 12px; }
  .social-phone-sep { display: none; }
}

/* ─────── Final CTA ─────── */
/* ─────── Before / After comparison ─────── */
.results {
  background: var(--bg);
  padding-top: 64px;
  padding-bottom: 118px;
}
.results-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}
.results-head h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.4vw, 80px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 14px 0 0;
  color: var(--ink);
  text-wrap: balance;
  max-width: 14ch;
}
.results-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 42ch;
  margin-left: auto;
  padding-bottom: 18px;
}

.ba {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-after-wrap {
  position: absolute; inset: 0;
  pointer-events: none;
  transition: clip-path 0.05s linear;
}
.ba-label {
  position: absolute;
  top: 28px;
  padding: 8px 18px 9px;
  background: rgba(54, 50, 45, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--bg);
  border: 1px solid rgba(245,239,230,0.18);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 500;
  font-family: 'Noto Sans', var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity .25s var(--ease);
}
.ba-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.ba-label--before { left: 28px; }
.ba-label--after { right: 28px; }
.ba-label--after::before { background: var(--bg); }
.ba-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--bg);
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}
.ba-divider::before,
.ba-divider::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
}
.ba-divider::before { top: 0; }
.ba-divider::after { bottom: 0; }
.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--bg);
  cursor: ew-resize;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  pointer-events: auto;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.ba-handle:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); }

.results-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.results-stat { display: flex; flex-direction: column; gap: 6px; }
.results-stat-n {
  font-family: var(--font-body);
  font-size: clamp(42px, 4vw, 64px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.results-stat-n sup {
  font-size: 0.45em;
  font-style: italic;
  font-weight: 400;
  vertical-align: super;
  margin-left: 2px;
  color: var(--ink-soft);
}
.results-stat-l {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .results-head { grid-template-columns: 1fr; gap: 16px; }
  .results-head h2 { max-width: none; }
  .results-blurb { margin-left: 0; max-width: 52ch; }
  /* Height only — width still fills the column. 4/5 made it a ~850px tall slab.
     Kept shorter than the tablet-landscape band (client wants it smaller here). */
  .ba { aspect-ratio: auto; height: clamp(210px, 34vw, 290px); }
  .ba-label { font-size: 11px; letter-spacing: 0.12em; padding: 6px 11px; top: 16px; gap: 6px; }
  .ba-label--before { left: 14px; }
  .ba-label--after { right: 14px; }
  .results-stats { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .results-stat-n { font-size: clamp(30px, 8vw, 42px); }
}
/* iPad-landscape gap (881–1200): stack the before/after header like phones do
   (title + description were a broken two-column split here), and cap the
   comparison image so it isn't a ~550px tall slab (it kept the 16/9 desktop
   ratio at these widths). Phones ≤880 keep their own portrait 4/5 treatment. */
@media (min-width: 881px) and (max-width: 1200px) {
  .results-head { grid-template-columns: 1fr; gap: 16px; }
  /* stacked header: title + blurb both align left (blurb had margin-left:auto for
     the desktop two-column split, which shoved it right and broke the alignment) */
  .results-head h2 { max-width: none; }
  .results-blurb { margin-left: 0; max-width: 56ch; }
  .ba { aspect-ratio: auto; height: clamp(300px, 36vw, 420px); }
}

/* ─────── FAQ ─────── */
.faq {
  background: var(--paper);
  padding-block: 160px;
}
.faq-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
.faq-head h2 {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.4vw, 80px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 14px 0 0;
  color: var(--ink);
  text-wrap: balance;
  max-width: 27ch;
}
.faq-list {
  list-style: none;
  margin: 0; padding: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.faq-item {
  border-bottom: 1px solid var(--line-strong);
  position: relative;
  transition: background .35s var(--ease);
}
.faq-item:hover { background: rgba(189,162,139,0.06); }
.faq-item:last-child { border-bottom: none; }
.faq-item.on { background: rgba(189,162,139,0.1); }
.faq-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width .4s var(--ease);
  display: none;
}
.faq-item.on::before { width: 0; }
.faq-q {
  display: grid;
  grid-template-columns: 52px 1fr 40px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 22px 28px 22px 26px;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--ink);
}
.faq-n {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  opacity: 0.5;
  transition: opacity .35s var(--ease), color .35s var(--ease);
}
.faq-item.on .faq-n { opacity: 1; color: var(--ink); }
.faq-qt {
  font-family: var(--font-display);
  font-size: clamp(25px, 2.7vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
.faq-item.on .faq-qt { font-style: italic; }
.faq-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.faq-item:hover .faq-toggle { border-color: var(--accent); }
.faq-item.on .faq-toggle {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.on .faq-a-wrap {
  grid-template-rows: 1fr;
}
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-a {
  margin: 0;
  padding: 0 80px 36px 102px;
  font-family: var(--font-price);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 78ch;
}

@media (max-width: 880px) {
  .faq-head { grid-template-columns: 1fr; gap: 24px; }
  .faq-q { grid-template-columns: 48px 1fr 38px; gap: 18px; padding: 26px 16px 26px 18px; }
  .faq-a { padding: 0 16px 28px 80px; font-size: 16px; }
  .faq-n { font-size: 22px; }
  .faq-toggle { width: 38px; height: 38px; }
}

/* ─────── Booking form (replaces Final CTA) ─────── */
.cta {
  background: var(--paper);
  padding: 0;
  --cta-gutter: max(var(--page-x), calc((100vw - 1320px) / 2));
}
.cta-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: stretch;
  min-height: 720px;
}
/* Google map of the client's Friendswood studio, replacing the template's stock photo.
   Fills the full column height; the address panel sits over the bottom of it. */
.cta-map {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  min-height: 520px;
  display: flex;
}
.cta-map iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  display: block;
  filter: grayscale(0.35) contrast(1.02);
}
.cta-map-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: 22px 32px;
  padding: 22px 26px;
  background: rgba(21, 19, 16, 0.9);
  backdrop-filter: blur(6px);
}
.cta-map-loc, .cta-map-hours { display: flex; flex-direction: column; gap: 5px; }
.cta-map-loc-n {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-light);
}
.cta-map-soon {
  font-style: normal; font-size: 9px; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(224, 170, 62, 0.16);
  color: var(--accent-light);
  white-space: nowrap;
}
.cta-map-addr, .cta-map-hours-v {
  font-size: 15px; line-height: 1.5;
  color: rgba(245, 239, 230, 0.82);
  max-width: 32ch;
  text-decoration: none;
}
.cta-map-addr:hover { color: #fff; text-decoration: underline; }
@media (max-width: 900px) {
  /* Stack map over a full-width address panel. Flex column with a fixed-height
     iframe so the panel is a real flow sibling (height:100% + overflow:hidden was
     letting the iframe eat the whole box and clip the panel). */
  .cta-map { display: flex; flex-direction: column; min-height: 0; overflow: visible; }
  .cta-map iframe { height: 340px; min-height: 0; flex: 0 0 auto; }
  .cta-map-panel { position: static; background: rgba(21, 19, 16, 0.96); width: 100%; box-sizing: border-box; }
}

.cta-img {
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
}
.cta-img img { width: 100%; height: 100%; object-fit: cover; }
.cta-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.0) 30%, rgba(26,26,26,0.65) 100%);
}
.cta-img-overlay {
  position: absolute;
  left: var(--cta-gutter); right: 48px; bottom: 48px;
  z-index: 1;
  color: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cta-img-overlay .eyebrow {
  color: rgba(255,255,255,0.85);
}
.cta-img-h {
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-weight: 500;
  color: var(--bg);
  margin: 0;
  text-wrap: balance;
  max-width: 14ch;
}
.cta-img-h .i { font-style: italic; }
.cta-img-meta {
  display: flex;
  gap: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.25);
  margin-top: 10px;
}
.cta-img-meta > div { display: flex; flex-direction: column; gap: 4px; }
.cta-img-meta-l {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.cta-img-meta-v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.cta-form {
  padding: clamp(56px, 6vw, 96px) clamp(40px, 5vw, 88px);
  padding-right: max(clamp(40px, 5vw, 88px), var(--cta-gutter));
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: var(--paper);
}
.cta-form-head { display: flex; flex-direction: column; gap: 14px; }
.cta-form-head h2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 74px);
  line-height: 1;
  letter-spacing: -0.022em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  max-width: 14ch;
}
.cta-form-head h2 .i { font-style: italic; }
.cta-form-blurb {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  max-width: 50ch;
}

.cta-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 22px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > span {
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.field > span em {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.7;
  margin-left: 6px;
}
.field input,
.field textarea,
.field-select select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 11px 0 13px;
  font: inherit;
  font-size: 19px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  transition: border-color .25s var(--ease);
  font-family: inherit;
}
.field textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder,
.modal-field input::placeholder,
.modal-field textarea::placeholder {
  color: var(--ink-soft);
  opacity: 0.5;
  /* placeholder just a hair smaller than the typed value, at every breakpoint */
  font-size: 0.95em;
}
.field input:focus,
.field textarea:focus,
.field-select select:focus {
  border-color: var(--ink);
}
.field-select {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color .25s var(--ease);
}
.field-select:focus-within { border-color: var(--ink); }
.field-select select {
  appearance: none;
  -webkit-appearance: none;
  border-bottom: none;
  padding-right: 24px;
  cursor: pointer;
}
.field-select svg {
  position: absolute;
  right: 4px;
  pointer-events: none;
  color: var(--ink-soft);
}
.field input[type="date"] {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
}

.cta-form-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding-top: 16px;
}
.cta-form-sent {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(130, 100, 9, 0.06);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.cta-form-error {
  background: rgba(150, 45, 30, 0.07);
  border-color: rgba(150, 45, 30, 0.32);
  color: #7a2c1e;
}
.modal-error {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #7a2c1e;
}
.cta-form-consent {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  cursor: pointer;
  max-width: 38ch;
}
.cta-form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.cta-form-consent input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.cta-form-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: solid var(--bg);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.cta-form-submit { /* identical to .btn (uses shared rules) */ }

@media (max-width: 1180px) {
  .cta-inner { grid-template-columns: 1fr; min-height: 0; }
  .cta-img { min-height: 360px; }
  .cta-img-overlay { left: 32px; right: 32px; bottom: 32px; }
  .cta-form { padding: 64px 40px; }
}
@media (max-width: 760px) {
  .cta-form { padding: 48px 24px; }
  .cta-form-grid { grid-template-columns: 1fr; }
  .cta-form-foot { grid-template-columns: 1fr; gap: 20px; }
  .cta-img-meta { gap: 24px; flex-wrap: wrap; }
}

/* ─────── Footer ─────── */
footer {
  background: #151310;
  color: var(--bg);
  padding: 0 var(--page-x) 32px;
  position: relative;
  overflow: hidden;
}

/* Top CTA strip */
.footer-cta {
  border-bottom: 1px solid rgba(245, 239, 230, 0.12);
  padding: 96px 0 96px;
}
.footer-cta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: end;
}
.footer-eyebrow {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.55);
  font-weight: 500;
}
.footer-h {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.024em;
  font-weight: 500;
  color: var(--bg);
  margin: 16px 0 0;
  max-width: none;
  text-wrap: balance;
}
.footer-h .i { font-style: italic; }

.footer-cta-btn { background: var(--bg); color: var(--ink); border: 1.5px solid var(--bg); }
.footer-cta-btn:hover { background: transparent; color: var(--bg); border-color: var(--bg); }

/* Mid columns — spread edge-to-edge so the four blocks use the full width
   (brand flush left, sitemap flush right) instead of clustering on the left. */
.footer-mid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  align-items: start;
  gap: 56px clamp(48px, 5vw, 88px);
  padding: 88px 0 80px;
}
.footer-col { display: flex; flex-direction: column; gap: 24px; }
.footer-col--brand { flex: 0 1 340px; }
.footer-mid > .footer-col:not(.footer-col--brand) { flex: 0 1 auto; }
/* Footer sits on near-black (#151310). The client's white logo file is only 188x84 — too small
   to stay crisp at 2x — so the 376x128 bronze wordmark is inverted to white instead. */
.footer-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.footer-logo img {
  height: 62px; width: auto; display: block;
  filter: brightness(0) invert(1);
}
@media (max-width: 640px) {
  .footer-logo img { height: 46px; }
}
.footer-brand-blurb {
  margin: 0;
  color: rgba(245, 239, 230, 0.65);
  font-size: 16px;
  line-height: 1.6;
  max-width: 38ch;
}
/* Phone rendered as a heading-scale display link, sitting under the brand blurb. */
.footer-phone {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(30px, 3.2vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--bg);
  transition: color 0.3s var(--ease);
}
.footer-phone:hover { color: var(--accent-light); }

.footer-news { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.footer-news-l {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.55);
}
.footer-news-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(245, 239, 230, 0.28);
  padding-bottom: 12px;
  transition: border-color .3s var(--ease);
}
.footer-news-row:focus-within { border-color: var(--bg); }
.footer-news input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--bg);
  font: inherit;
  font-size: 16px;
  padding: 6px 0;
}
.footer-news input::placeholder { color: rgba(245, 239, 230, 0.4); }
.footer-news button {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .3s var(--ease), transform .4s var(--ease);
  flex-shrink: 0;
}
.footer-news button:hover { background: var(--accent); transform: rotate(45deg); }

footer h5 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: none;
  color: var(--bg);
  margin: 0;
  font-weight: 500;
}

.footer-loc { display: flex; flex-direction: column; gap: 28px; }
.footer-loc-item { display: flex; flex-direction: column; gap: 8px; }
.footer-loc-soon {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(224, 170, 62, 0.16);
  color: var(--accent-light);
  white-space: nowrap;
}
.footer-hours { margin-top: 26px; }
/* Light-background "opening soon" badge — contact page cards + meta headings (accent on light). */
.soon-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  vertical-align: middle;
  border-radius: 999px;
  background: rgba(130, 100, 9, 0.12);
  color: var(--accent);
  white-space: nowrap;
}
.footer-loc-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 27px;
  letter-spacing: -0.01em;
  color: var(--bg);
  line-height: 1.1;
}
.footer-loc-addr {
  font-size: 16px;
  color: rgba(245, 239, 230, 0.6);
  line-height: 1.55;
}
.footer-loc-link {
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  border-bottom: 1px solid rgba(245, 239, 230, 0.3);
  padding-bottom: 4px;
  width: fit-content;
  transition: border-color .3s var(--ease);
}
.footer-loc-link:hover { border-color: var(--bg); }
.footer-loc-link svg { color: var(--accent-light); transition: transform .35s var(--ease); }
.footer-loc-link:hover svg { transform: translate(3px, -3px); }
.footer-loc-mail {
  font-size: 16px;
  color: rgba(245, 239, 230, 0.6);
  letter-spacing: 0.01em;
  width: fit-content;
  transition: color .25s var(--ease);
}
.footer-loc-mail:hover { color: var(--bg); }
.footer-visit { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.footer-visit .footer-loc-name { font-size: 22px; }

footer ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 14px;
  font-size: 16px;
}
footer ul a {
  color: rgba(245, 239, 230, 0.78);
  transition: color .25s var(--ease);
  display: inline-block;
}
footer ul a:hover { color: var(--bg); }

.footer-contact { gap: 18px; }
.footer-contact li a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.footer-contact span {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.7);
}
.footer-contact em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--bg);
  letter-spacing: -0.005em;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.footer-social a {
  width: auto; height: auto;
  border: 1px solid rgba(245, 239, 230, 0.22);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(245, 239, 230, 0.85);
  display: inline-block;
  font-family: var(--font-body);
  font-style: normal;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.footer-social a:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
  transform: none;
}

/* Studio wordmark block — refined layout */
.footer-wordmark {
  margin: 24px 0 24px;
  display: flex;
  flex-direction: column;
  user-select: none;
  pointer-events: none;
}
.footer-wordmark-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(245, 239, 230, 0.15);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.55);
  font-family: 'Noto Sans', var(--font-body);
}
.footer-meta-r {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--accent);
}
.footer-wordmark-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(140px, 26vw, 420px);
  letter-spacing: -0.045em;
  line-height: 0.78;
  color: var(--bg);
  text-align: center;
  margin: 24px 0 8px;
  white-space: nowrap;
}
.footer-wordmark-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(245, 239, 230, 0.15);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 20px);
  color: rgba(245, 239, 230, 0.85);
  letter-spacing: -0.005em;
}
.footer-wordmark-tag .dot {
  color: var(--accent);
  font-style: normal;
  font-size: 13px;
}

@media (max-width: 760px) {
  .footer-wordmark-meta { flex-direction: column; gap: 8px; align-items: flex-start; }
  .footer-wordmark-tag { flex-wrap: wrap; gap: 8px 14px; }
  .footer-wordmark-tag .dot { display: none; }
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(245, 239, 230, 0.12);
  color: rgba(245, 239, 230, 0.62);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.footer-legal {
  display: inline-flex;
  gap: 22px;
  justify-content: center;
}
.footer-legal a {
  color: rgba(245, 239, 230, 0.55);
  transition: color .25s var(--ease);
}
.footer-legal a:hover { color: var(--bg); }
.footer-made { text-align: right; font-style: italic; font-family: var(--font-display); font-size: 14px; }

/* Services: keep the desktop tabs|preview split down to tablet-landscape; only
   below 900px stack the row and move each image inside its open tab. */
@media (max-width: 900px) {
  .services-row { grid-template-columns: 1fr; gap: 40px; }
  .services-img { display: none; }
  .tab.on .tab-img { display: block; }
  /* Full-bleed banner: drop the fixed 9/4 aspect + max-height so a 100%-width
     image isn't re-shrunk by the browser to preserve the ratio (that was the
     right-edge gap); use a responsive fixed height instead. */
  .tab-img { aspect-ratio: auto; max-height: none; height: clamp(200px, 44vw, 300px); margin-top: 16px; }
  .tab.on { padding-left: 0; }
  /* Stats: 4-across holds down to tablet-landscape; 2×2 only below 900. */
  .why-stats { grid-template-columns: 1fr 1fr; row-gap: 34px; column-gap: 20px; }
  .why-stat { border-right: none; padding: 0 8px; }
  .why-stat:nth-child(odd) { padding-left: 0; }
}

/* ─────── Responsive ─────── */
@media (max-width: 1200px) {
  :root { --page-x: 40px; }
  /* Give the polaroid column more room and tighten the gap to the copy so the
     prints read larger (client preference). */
  .why-bottom { grid-template-columns: 1fr 1.28fr; gap: 20px; }
  /* Tablet: the polaroid pair stacks below the copy — drop the desktop offset/scale,
     neutralise the overlap margins and soften the tilt so neither print bleeds
     off-screen or crops. Centred within a capped width. */
  /* Both prints, larger, with a slight overlap (client preference).
     Portrait 3/4 frame so the photo area stays tall — 4/5 at these widths made
     the photo read near-square ("squished"). */
  .why-images { transform: none; margin: 0 auto; max-width: none; grid-template-columns: 1fr 1fr; gap: 0; padding-top: 26px; overflow: visible; justify-content: center; }
  .why-images .img { aspect-ratio: 3 / 4; }
  .why-images .img--still { margin: 44px -20px 0 0; transform: rotate(3deg); z-index: 1; }
  .why-images .img--video { margin-left: -20px; transform: rotate(-3deg); z-index: 2; }
  /* Footer CTA stacks; keep the button hugging its label (not stretched) — full-width
     is only wanted on phones (≤760). */
  .footer-cta-row { grid-template-columns: 1fr; gap: 32px; justify-items: start; }
  .footer-bottom { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .footer-made, .footer-legal { text-align: center; justify-content: center; }
  .journal-grid, .cards-grid { grid-template-columns: 1fr 1fr; }
  .why-images .img:nth-child(1) { margin-top: 0; }
  .cta-img { order: 2; }
  .cta-form { order: 1; }
  .hero-bottom { grid-template-columns: 1fr; gap: 18px; }
  /* Tablet: keep the quick-nav pills on one row (they wrap only on phones ≤760). */
  .hero-pills { order: -1; justify-content: flex-start; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .hero-pills::-webkit-scrollbar { display: none; }
  .hero-pill { padding: 10px 15px; font-size: 12.5px; letter-spacing: 0.06em; white-space: nowrap; }
  .hero-welcome { max-width: none; }
  .nav-menu { gap: 22px; }
  .nav-menu .nav-item > a { font-size: 13px; }
}
/* Tablet footer: brand spans the top, the three info columns sit in a row below. */
@media (max-width: 1080px) {
  .footer-mid { grid-template-columns: repeat(3, 1fr); gap: 48px clamp(32px, 4vw, 56px); }
  .footer-col--brand { grid-column: 1 / -1; }
  /* Brand spans full width on tablet — let the blurb use it instead of staying narrow. */
  .footer-brand-blurb { max-width: 72ch; }
}
@media (max-width: 760px) {
  :root { --page-x: 20px; }
  section { padding-block: 104px; }
  .hero { margin: 8px 12px 12px; border-radius: 14px; }
  .hero-bottom { padding: 0 24px 32px; }
  .nav { grid-template-columns: 1fr auto; }
  .footer-cta { padding: 64px 0; }
  .footer-mid { padding: 56px 0; }
  footer { padding-inline: 28px; padding-bottom: 28px; }
  .footer-cta-btn { width: 100%; justify-content: center; text-align: center; }
  .services-head { grid-template-columns: 1fr; gap: 22px; }
  .why-head { margin-bottom: 36px; }
  .nav-menu { display: none; }
  .nav-cart { display: none; }
  .cards-grid, .journal-grid { grid-template-columns: 1fr; }
  .hero-bottom { grid-template-columns: 1fr; gap: 18px; }
  /* Quick-nav pills cleared from the hero on phones (kept on tablet+). */
  .hero-pills { display: none; }
  .footer-mid { grid-template-columns: 1fr; gap: 44px; }
  .footer-col--brand { flex: 0 1 auto; }
  .why-stats { grid-template-columns: 1fr 1fr; row-gap: 30px; column-gap: 14px; }
  .why-stat { border-right: none; padding: 0; flex-direction: column; gap: 10px; align-items: flex-start; }
  .why-stat-n { font-size: clamp(30px, 8vw, 42px); }
  .services, .calc, .cards, .why, .journal, .testimonials, .results, .faq { padding-block: 76px; }
  .video-banner { padding: 56px 12px; }
  .services-head, .calc-head, .test-head, .results-head, .faq-head, .cards-head { margin-bottom: 36px; }
  .test-head h2 { white-space: normal; font-size: clamp(40px, 9vw, 56px); }
  .why-head { margin-bottom: 32px; }
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
  .hero-marquee-item { font-size: clamp(44px, 16vw, 78px); }
  .word-marquee-item { font-size: clamp(26px, 6.2vw, 38px); gap: 26px; }
  .cta-map-panel { flex-direction: column; gap: 16px; }
  .cta-map-addr, .cta-map-hours-v { max-width: none; }
  .hero-pill { padding: 9px 14px; font-size: 12px; letter-spacing: 0.08em; }
  .hero { height: 72svh; min-height: 510px; }
  .hero-slide { filter: brightness(0.99); }
  .hero-slide:first-child { object-position: center 26%; }
  .hero-slide:nth-child(2) { object-position: 24% 42%; }
  /* Smaller, iOS-safe (≥16px, no zoom-on-focus) form text on phones. */
  .field input, .field textarea, .field-select select,
  .modal-field input, .modal-field select, .modal-field textarea { font-size: 16px; }
  .field input[type="date"], .modal-field .date-input { font-size: 16px; }
  /* Placeholder can be smaller than the 16px input without triggering iOS zoom
     (zoom keys off the input's own font-size, which stays 16px). */
  .field input::placeholder, .field textarea::placeholder,
  .modal-field input::placeholder, .modal-field textarea::placeholder { font-size: 15px; }
  .statement { padding-top: 8px; }
  .why { padding-inline: 14px; }
  .why-bottom { grid-template-columns: 1fr; gap: 40px; }
  .word-marquee { padding: 28px 0; }
  /* section h2 titles −2px on phone (they bottom out at the 50px clamp min here) */
  .why-h, .calc-head h2, .faq-head h2, .results-head h2,
  .aesthetic-head .h-display, .experience-head .h-display { font-size: 48px; }
  .why-images {
    grid-template-columns: 1fr 1fr; gap: 10px;
    transform: none; margin: 28px auto 0; max-width: 460px;
    padding-top: 18px;
  }
  .why-images .img { max-width: none; width: 100%; }
  .why-images .img--video { transform: rotate(-2.5deg); margin-left: 0; }
  .why-images .img--still { transform: rotate(2.5deg) scale(1); margin: 24px 0 0 0; }
  .why-images .img-caption { font-size: 18px; height: 54px; }
  .why-images .img { padding: 8px 8px 60px; }
  .benefit-t { font-size: clamp(24px, 6vw, 30px); }
  .calc-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .calc-panel { padding: 26px 14px; }
  .calc-footer { padding: 24px 14px; }
}

/* ─────── Immersive cinematic interlude (signature moment) ─────── */
.immersive {
  position: relative;
  /* a full viewport for one line of copy read as dead air on the way down */
  height: 82vh;
  min-height: 560px;
  overflow: hidden;
  background: #161310;
  display: grid;
  place-items: center;
}
.immersive-media {
  position: absolute;
  left: 0;
  right: 0;
  /* overscan must exceed the parallax drift (±17%) or the drift reveals bare edges */
  top: -22%;
  bottom: -22%;
  will-change: transform;
}
.immersive-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.immersive-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,13,0.84) 0%, rgba(20,16,13,0.9) 100%);
}
.immersive::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.immersive-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--bg);
  padding: 0 24px;
  max-width: 1180px;
}
.immersive-eyebrow {
  display: block;
  font-family: 'Noto Sans', var(--font-body);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245,239,230,0.82);
  margin-bottom: 36px;
}
.immersive-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(52px, 8.4vw, 140px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}
.immersive-line { display: block; }
.immersive-h .i { font-style: italic; font-weight: 400; }
.immersive-caption {
  margin: 44px auto 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.4;
  color: rgba(245,239,230,0.9);
  text-wrap: balance;
}
.immersive-cta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-top: 40px;
  padding: 18px 38px;
  border-radius: var(--r-pill);
  background: var(--btn-brown);
  color: var(--bg);
  font-family: 'Noto Sans', var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.immersive-cta:hover { background: var(--accent); color: var(--bg); transform: translateY(-2px); }
/* elegant soft reveal (opacity + rise, no clipping) */
.immersive-eyebrow,
.immersive-h,
.immersive-caption,
.immersive-cta {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1.15s var(--ease);
}
.immersive.in .immersive-eyebrow { transition-delay: 0.05s; }
.immersive.in .immersive-h { transition-delay: 0.2s; }
.immersive.in .immersive-caption { transition-delay: 0.55s; }
.immersive.in .immersive-cta { transition-delay: 0.72s; }
.immersive.in .immersive-eyebrow,
.immersive.in .immersive-h,
.immersive.in .immersive-caption,
.immersive.in .immersive-cta {
  opacity: 1;
  transform: none;
}
@media (max-width: 760px) {
  .immersive { min-height: 560px; }
}

/* ─────── Site-wide elegant scroll reveals ─────── */
html.reveal-on .rv {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
html.reveal-on .rv.in {
  opacity: 1;
  transform: none;
}

/* ─────── Booking modal ─────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(21,19,16,0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center;
  padding: 24px;
  animation: modal-fade .3s var(--ease);
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative;
  background: var(--paper);
  border-radius: 24px;
  padding: 48px;
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow);
  animation: modal-rise .4s var(--ease);
}
@keyframes modal-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(250, 247, 242, 0.94);
  box-shadow: 0 1px 3px rgba(41, 38, 27, 0.08);
  display: grid; place-items: center;
  font-size: 22px; line-height: 1; color: var(--ink-soft);
  cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease);
}
.modal-close:hover { background: var(--ink); color: var(--bg); }
.modal-h { font-family: var(--font-display); font-size: clamp(30px,4vw,46px); font-weight: 500; margin: 12px 0 24px; letter-spacing: -0.02em; line-height: 1.04; }
.modal-h .i { font-style: italic; }
.modal-summary { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 11px; }
.modal-summary-row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--ink-soft); }
.modal-summary-row > span:last-child { color: var(--ink); text-align: right; }
.modal-summary-total { border-top: 1px solid var(--line); padding-top: 11px; font-family: var(--font-display); }
.modal-summary-total > span:first-child { font-size: 17px; color: var(--ink); }
.modal-summary-total > span:last-child { color: var(--accent); font-size: 24px; font-style: italic; }
.modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modal-field { display: flex; flex-direction: column; gap: 7px; }
.modal-field > span { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.modal-field--full { grid-column: 1 / -1; }
.modal-field input, .modal-field textarea, .modal-field select {
  font: inherit; font-family: var(--font-body); font-size: 15px;
  padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fff; color: var(--ink); outline: none; width: 100%;
  transition: border-color .2s var(--ease);
}
.modal-field input:focus, .modal-field textarea:focus, .modal-field select:focus { border-color: var(--accent); }
.modal-field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b5b4d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
  padding-right: 42px;
}

/* Date input — full-field clickable + accent picker */
.date-input {
  accent-color: var(--accent);
  color-scheme: light;
  cursor: pointer;
  position: relative;
  font-variant-numeric: tabular-nums;
  /* iOS Safari renders type=date at its own (shorter) native height unless the
     appearance is reset — that was the "squished" field. Reset it and pin the
     height to match the sibling text inputs. */
  -webkit-appearance: none;
  appearance: none;
  min-height: 49px;
  display: flex;
  align-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236F6862' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
/* Stretch the native picker trigger across the whole field so a click anywhere opens it */
.date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto; height: auto;
  margin: 0; padding: 0;
  cursor: pointer;
  opacity: 0;
}
.date-input::-webkit-datetime-edit { padding: 0; line-height: normal; }
/* The value text lives in this pseudo on iOS; default margins clip/squish it. */
.date-input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.2em; }
.modal-submit { grid-column: 1 / -1; justify-content: center; margin-top: 4px; }
.modal-done { text-align: center; padding: 12px 0; }
.modal-done-p { color: var(--ink-soft); margin: 14px 0 28px; line-height: 1.6; }
@media (max-width: 600px) {
  .modal { padding: 32px 22px; }
  .modal-form { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .video-banner { padding: 64px 12px; }
  .video-card { aspect-ratio: auto; min-height: 520px; border-radius: 14px; }
  .video-card-content { padding: 36px 28px; }
  .video-card-form { max-width: none; }
}

/* ─────── Premium "wow" layer ─────── */
/* Hero entrance — staggered rise on load */
@keyframes wow-rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wow-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-welcome { animation: wow-rise 1.1s var(--ease) both 0.15s; }
.hero-pills .hero-pill { animation: wow-rise 0.9s var(--ease) both; }
.hero-pills .hero-pill:nth-child(1) { animation-delay: 0.40s; }
.hero-pills .hero-pill:nth-child(2) { animation-delay: 0.48s; }
.hero-pills .hero-pill:nth-child(3) { animation-delay: 0.56s; }
.hero-pills .hero-pill:nth-child(4) { animation-delay: 0.64s; }
.hero-pills .hero-pill:nth-child(5) { animation-delay: 0.72s; }
.hero-pills .hero-pill:nth-child(6) { animation-delay: 0.80s; }
.hero-marquee { animation: wow-fade 1.4s var(--ease) both 0.5s; }
.hero-scroll-btn { animation: hero-scroll-bob 2.4s ease-in-out infinite, wow-fade 1.2s var(--ease) both 0.9s; }

/* Slow ken-burns on the active service image */
.services-img-card.on img {
  animation: svc-kenburns 9s ease-out both;
}
@keyframes svc-kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}

/* Shine sweep on primary buttons */
.btn, .nav-cta, .calc-cta, .immersive-cta { position: relative; overflow: hidden; }
.btn::after, .nav-cta::after, .calc-cta::after, .immersive-cta::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn:hover::after, .nav-cta:hover::after, .calc-cta:hover::after, .immersive-cta:hover::after {
  animation: btn-shine 0.85s var(--ease);
}
@keyframes btn-shine {
  to { left: 130%; }
}

/* Hero pill fill grows from center on hover */
.hero-pill { position: relative; z-index: 0; overflow: hidden; }

/* prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .immersive-eyebrow,
  .immersive-h,
  .immersive-caption,
  .immersive-cta { opacity: 1 !important; transform: none !important; }
  html.reveal-on .rv { opacity: 1 !important; transform: none !important; }
}

/* ─────────────── Multi-page sub-pages (pages.jsx) ─────────────── */
/* Page hero: a bordered photo card that sits below the sticky nav, dark-scrimmed
   so the cream nav and the hero's own cream type both read. */
.page-hero {
  position: relative;
  min-height: 66vh;
  display: flex;
  align-items: flex-end;
  padding: clamp(56px, 8vw, 104px) var(--page-x) clamp(40px, 5vw, 64px);
  margin: 8px 16px 0;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  /* Brightness only, like the studio-note banner — no tint/gradient overlay. */
  filter: brightness(0.72);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: none;
}
.page-hero-inner { width: 100%; }
.page-hero-eyebrow { color: rgba(245, 239, 230, 0.85); }
.page-hero-title {
  font-family: var(--font-display);
  color: var(--bg);
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 16px 0 0;
  max-width: 17ch;
  text-wrap: balance;
}
.page-hero-title .i { font-style: italic; }
.page-hero-sub {
  color: rgba(245, 239, 230, 0.92);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  max-width: 54ch;
  margin: 22px 0 0;
}

/* ─────────── Legal / policy pages (Privacy, Cancellation, Customer care) ─────────── */
.page-hero--short { min-height: 40vh; }
.legal {
  padding: clamp(56px, 7vw, 96px) var(--page-x) clamp(72px, 9vw, 128px);
  background: var(--bg);
}
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal-eff {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-soft);
  padding-bottom: 22px; margin: 0 0 30px;
  border-bottom: 1px solid rgba(41, 38, 27, 0.12);
}
.legal-h {
  font-size: clamp(23px, 2.5vw, 31px);
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink);
  margin: 48px 0 16px;
}
.legal-h:first-child { margin-top: 0; }
.legal-sub {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent);
  margin: 30px 0 12px;
}
.legal-p {
  color: var(--ink-soft);
  font-size: 17px; line-height: 1.72;
  margin: 0 0 18px;
}
.legal-list {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.legal-list li {
  position: relative;
  color: var(--ink-soft);
  font-size: 17px; line-height: 1.6;
  padding-left: 26px;
}
.legal-list li::before {
  content: "";
  position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* Shared section intros for the multi-page heads. The home app sizes its heads
   via per-section classes; these three only share .section-head, so give the
   display heading its size here (otherwise it falls back to the 24px UA h2). */
.aesthetic-head .h-display,
.zones-head .h-display,
.experience-head .h-display {
  font-size: clamp(50px, 5.4vw, 80px);
  color: var(--ink);
  margin: 14px 0 0;
  text-wrap: balance;
}
.aesthetic-head .h-display,
.zones-head .h-display { max-width: 20ch; }
.experience-head .h-display { max-width: 26ch; }

/* Aesthetic treatments listing */
.aesthetic { padding: 120px var(--page-x); }
.aesthetic-head { margin-bottom: 56px; }
.aesthetic-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.aesthetic-card {
  border: 1px solid rgba(41, 38, 27, 0.07);
  border-radius: var(--r-md);
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(41, 38, 27, 0.04), 0 16px 40px rgba(41, 38, 27, 0.05);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.aesthetic-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.aesthetic-n {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 500;
}
.aesthetic-title {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.aesthetic-title .i { font-style: italic; }
.aesthetic-body {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  max-width: 46ch;
}
.aesthetic-cta { margin-top: 8px; }

@media (max-width: 860px) {
  .page-hero { min-height: 46vh; margin: 8px 10px 0; }
  .aesthetic { padding: 88px var(--page-x); }
  .aesthetic-grid { grid-template-columns: 1fr; }
}

/* ─────────── The daniéle experience (aesthetic page) ─────────── */
/* Four numbered steps as soft cream cards — same card language as .zones /
   .aesthetic. Oversized outlined serif numeral leads each card. */
.experience { padding: 120px var(--page-x); }
/* When the experience steps follow the services block (Aesthetic page order),
   the services' bottom padding already carries the gap — drop the doubled top
   padding so the two sections don't leave a 240px void between them. */
.aesthetic + .experience { padding-top: 0; }
.experience-head { margin-bottom: 64px; }
/* Numbered stepper — circles ride a connecting rail so the four read as a
   sequence (step 1 → 4), not four detached cards. */
.experience-steps {
  position: relative;
  max-width: 1320px; margin: 0 auto;
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.6vw, 48px);
  counter-reset: step;
}
/* the rail behind the number circles */
.experience-steps::before {
  content: "";
  position: absolute; top: 31px; left: 7%; right: 7%;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 15px);
  opacity: 0.45;
  z-index: 0;
}
.exp-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: stretch;
}
.exp-step-num {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(54, 50, 45, 0.06);
  color: var(--accent);
  font-weight: 500; font-size: 22px; letter-spacing: -0.01em;
  display: grid; place-items: center;
  margin-bottom: 24px;
  align-self: flex-start;
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.exp-step:hover .exp-step-num {
  background: var(--accent); color: var(--bg);
  box-shadow: 0 14px 30px -14px rgba(130, 100, 9, 0.55);
}
.exp-step-card {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(41, 38, 27, 0.07);
  border-radius: var(--r-md);
  padding: clamp(24px, 1.9vw, 32px);
  box-shadow: 0 1px 2px rgba(41, 38, 27, 0.04), 0 16px 40px rgba(41, 38, 27, 0.05);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.exp-step:hover .exp-step-card {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -34px rgba(54, 50, 45, 0.26);
}
.exp-step-t {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.16; letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.exp-step-t .i { font-style: italic; }
.exp-step-b {
  color: var(--ink-soft);
  font-size: 15px; line-height: 1.62;
}

@media (max-width: 1150px) {
  .experience-steps { grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 48px); }
  .experience-steps::before { display: none; }
}
@media (max-width: 900px) {
  .experience { padding: 88px var(--page-x); }
}
@media (max-width: 620px) {
  /* vertical timeline on mobile — rail runs down the left through each circle */
  .experience-steps { grid-template-columns: 1fr; gap: 0; }
  .exp-step {
    display: grid;
    grid-template-columns: 62px 1fr;
    column-gap: 20px;
    padding-bottom: 30px;
    align-items: start;
  }
  .exp-step-num { margin-bottom: 0; }
  .exp-step:not(:last-child)::before {
    content: ""; position: absolute; top: 62px; bottom: 0;
    left: 30px; width: 1.5px;
    background: repeating-linear-gradient(180deg, var(--accent) 0 7px, transparent 7px 15px);
    opacity: 0.45;
  }
}

/* ─────────── About intro (Who We Are) ─────────── */
.about-intro { padding: 120px var(--page-x); }
.about-intro-head { max-width: 1320px; margin: 0 auto clamp(40px, 4vw, 60px); }
.about-intro-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.about-intro-h {
  font-size: clamp(50px, 5.4vw, 80px);
  line-height: 1.02; letter-spacing: -0.018em;
  color: var(--ink); margin: 16px 0 0; max-width: 18ch;
}
.about-intro-h .i { font-style: italic; }
.about-intro-r { display: flex; flex-direction: column; gap: 20px; }
.about-intro-r p { color: var(--ink-soft); font-size: 17px; line-height: 1.65; max-width: 62ch; }
.about-intro-media {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
}
.about-intro-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.about-intro-btn { align-self: flex-start; margin-top: 26px; }
.about-feats {
  max-width: 1320px;
  margin: clamp(52px, 5.5vw, 84px) auto 0;
}
.about-feats-label {
  display: block; margin: 0 0 20px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.about-intro-feats {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) {
  .about-intro-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .about-intro-feats { grid-template-columns: 1fr; }
}
.about-intro-feats li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 24px 22px 26px;
  background: #fff;
  border: 1px solid rgba(41, 38, 27, 0.07);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(41, 38, 27, 0.04), 0 10px 26px rgba(41, 38, 27, 0.045);
}
.about-feat-icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(54, 50, 45, 0.05);
  border: 1px solid var(--line);
  color: var(--accent);
}
.about-feat-text { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.about-feat-text strong { font-family: var(--font-display); font-size: 23px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); display: block; margin-bottom: 5px; }

/* ─────────── Zones & packages (laser page) ─────────── */
.zones { padding: 120px var(--page-x) 104px; background: rgba(41, 38, 27, 0.025); }
.zones-cta {
  margin: 0 var(--page-x);
  padding: clamp(44px, 5vw, 66px) clamp(30px, 4.5vw, 68px);
  background: var(--ink);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(28px, 4vw, 56px); flex-wrap: wrap;
  color: var(--bg);
}
.zones-cta-text { flex: 1 1 420px; }
.zones-cta .eyebrow { color: var(--accent-light); }
.zones-cta-h {
  color: var(--bg);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.03; letter-spacing: -0.015em; font-weight: 500;
  margin: 12px 0 14px;
}
.zones-cta-h .i { font-style: italic; }
.zones-cta-sub {
  color: rgba(245, 239, 230, 0.8);
  font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; max-width: 54ch;
}
.zones-cta-btn {
  flex: 0 0 auto; white-space: nowrap;
  background: var(--bg); color: var(--ink); border: 0;
}
.zones-cta-btn:hover { background: var(--accent-light); color: var(--ink); }
@media (max-width: 720px) {
  .zones-cta { flex-direction: column; align-items: flex-start; text-align: left; gap: 28px; }
  .zones-cta-text { flex: 0 1 auto; }
  .zones-cta-btn { width: 100%; text-align: center; justify-content: center; }
}
.zones-head {
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1fr minmax(0, 440px);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.zones-head .eyebrow { grid-column: 1; grid-row: 1; }
.zones-head .h-display { grid-column: 1; grid-row: 2; }
.zones-intro { grid-column: 2; grid-row: 2; color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0; align-self: end; }
/* Tiers as a vertical list of section rows — price block on the left, the areas
   that belong to that tier as pills on the right. These are reference, not
   selectable, so the rows and pills carry no hover/interactive affordance. */
.zones-list {
  max-width: 1320px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.zone-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  background: #fff;
  border: 1px solid rgba(41, 38, 27, 0.07);
  border-radius: var(--r-md);
  padding: clamp(26px, 2.4vw, 38px) clamp(28px, 2.8vw, 44px);
  box-shadow: 0 1px 2px rgba(41, 38, 27, 0.04), 0 14px 36px rgba(41, 38, 27, 0.05);
}
.zone-row-head { display: flex; flex-direction: column; gap: 7px; }
.zone-row-label { font-family: var(--font-display); font-size: clamp(30px, 3vw, 42px); color: var(--ink); line-height: 0.95; }
.zone-row-price {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 8px;
  padding: 8px 16px;
  background: rgba(130, 100, 9, 0.07);
  border: 1px solid rgba(130, 100, 9, 0.2);
  border-radius: 13px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.1vw, 34px);
  color: var(--accent);
  line-height: 1;
}
.zone-row-price small { font-family: var(--font-body); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); align-self: center; }
.zone-row-count { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.zone-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-left: clamp(24px, 3vw, 52px);
  border-left: 1px solid rgba(41, 38, 27, 0.09);
}
.zone-pill {
  font-size: 13.5px; color: var(--ink);
  background: rgba(41, 38, 27, 0.035);
  border: 1px solid rgba(41, 38, 27, 0.07);
  border-radius: 999px;
  padding: 7px 15px; line-height: 1.2;
}
/* Mix & match — the bespoke, flexible route. A warm gold-washed panel sets it
   apart from the plain white tier rows: this is the signature of the section. */
.zones-mix {
  max-width: 1320px; margin: 22px auto 0;
  border: 1px solid rgba(130, 100, 9, 0.26);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(130, 100, 9, 0.075), rgba(224, 170, 62, 0.05));
  padding: clamp(34px, 3.6vw, 50px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 3vw, 56px); align-items: center;
}
.zones-mix-head { max-width: 46ch; }
.zones-mix-h { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 44px); color: var(--ink); line-height: 1; }
.zones-mix-h .i { font-style: italic; }
.zones-mix-note { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 12px 0 0; }
.zones-mix-row { display: flex; gap: 12px; }
.zones-mix-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 20px 24px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(130, 100, 9, 0.15);
  box-shadow: 0 12px 26px -18px rgba(130, 100, 9, 0.45);
  min-width: 104px;
}
.zones-mix-count { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.zones-mix-price { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); color: var(--accent); }

/* ─────────── Contact details (contact page) ─────────── */
.contact-details { padding: 110px var(--page-x); background: rgba(41, 38, 27, 0.025); }
.contact-details-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
.contact-block {
  display: flex; flex-direction: column; gap: 16px;
  background: #fff;
  border: 1px solid rgba(41, 38, 27, 0.08);
  border-radius: var(--r-md);
  padding: clamp(30px, 3vw, 44px);
  box-shadow: 0 1px 2px rgba(41, 38, 27, 0.04), 0 22px 46px -22px rgba(41, 38, 27, 0.18);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.contact-block:hover {
  transform: translateY(-4px);
  border-color: rgba(130, 100, 9, 0.32);
  box-shadow: 0 1px 2px rgba(41, 38, 27, 0.05), 0 32px 58px -26px rgba(41, 38, 27, 0.24);
}
.contact-block-h {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1; color: var(--ink);
  margin: 0 0 6px; padding-bottom: 22px;
  border-bottom: 1px solid rgba(41, 38, 27, 0.1);
}
.contact-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);  color: var(--accent); flex: none;
}
.contact-block-h svg { color: var(--accent); flex: none; }
.contact-block p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; }
.contact-block a { color: var(--ink); border-bottom: 1px solid rgba(41, 38, 27, 0.22); transition: color .25s var(--ease), border-color .25s var(--ease); }
.contact-block a:hover { color: var(--accent); border-color: var(--accent); }
.contact-block strong { color: var(--ink); font-weight: 500; }
.contact-loc { display: flex; flex-direction: column; gap: 4px; }
.contact-loc-name { color: var(--ink); font-weight: 500; }
.contact-soon { color: var(--accent); font-style: italic; font-size: 13px; }
.contact-map {
  /* full-bleed without 100vw (which would add the scrollbar's width and cause a
     horizontal scroll): just cancel the section's own horizontal padding. */
  margin: 72px calc(-1 * var(--page-x)) 0;
  overflow: hidden;
  border-top: 1px solid rgba(41, 38, 27, 0.1);
  line-height: 0;
}
.contact-map iframe { width: 100%; height: 480px; border: 0; display: block; filter: grayscale(0.15) contrast(1.02); }

@media (max-width: 980px) {
  .about-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Text before photo on stacked view (media is first in the DOM). */
  .about-intro-r { order: 1; }
  /* Stacked full-width, the 4/5 ratio made a ~800px tall slab — cap the height
     (width still fills). */
  .about-intro-media { order: 2; aspect-ratio: auto; height: clamp(260px, 52vw, 400px); }
  .zones-mix { grid-template-columns: 1fr; }
  .contact-details-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 620px) {
  .zone-row { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .zone-row-head { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  /* Smaller price chip so label + price fit one line; areas-count drops below. */
  .zone-row-price { font-size: 22px; padding: 6px 13px; margin-top: 0; }
  .zone-row-count { flex-basis: 100%; margin-top: 2px; }
  /* Stack the section head — the 2-col grid crushed the title into a sliver. */
  .zones-head { grid-template-columns: 1fr; }
  .zones-head .eyebrow { grid-column: 1; grid-row: 1; }
  .zones-head .h-display { grid-column: 1; grid-row: 2; }
  .zones-intro { grid-column: 1; grid-row: 3; margin-top: 6px; }
  /* Drop the vertical divider + its indent on phone (was pushing pills off-screen). */
  .zone-pills { border-left: none; padding-left: 0; }
  .zones-mix-row { flex-wrap: wrap; }
}

/* ─────────── Laser Hair Removal intro (laser page) ─────────── */
.laser-intro { padding: 120px var(--page-x); }
.laser-intro-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 5vw, 84px); align-items: center;
}
.laser-intro-media { order: 1; }
.laser-intro-l { order: 2; }
.laser-intro-head { position: relative; margin-bottom: 34px; padding-top: 18px; }
.laser-intro-script {
  position: absolute; top: -6px; left: -4px;
  font-family: 'Oooh Baby', cursive;
  font-size: clamp(30px, 3.2vw, 44px);
  color: var(--accent); line-height: 1;
}
.laser-intro-title {
  font-size: clamp(50px, 5.4vw, 80px); line-height: 1.02;
  letter-spacing: -0.02em; color: var(--ink);
}
.laser-intro-body { display: flex; flex-direction: column; gap: 20px; }
.laser-intro-body p { color: var(--ink-soft); font-size: 17px; line-height: 1.7; max-width: 58ch; }
.laser-intro-features {
  list-style: none; margin: 30px 0 0; padding: 28px 0 0;
  border-top: 1px solid rgba(41, 38, 27, 0.12);
  display: flex; flex-wrap: wrap; gap: 10px;
}
.laser-intro-features li {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 17px 9px 13px;
  font-size: 13.5px; color: var(--ink); line-height: 1;
  background: rgba(130, 100, 9, 0.07);
  border: 1px solid rgba(130, 100, 9, 0.2);
  border-radius: 999px;
}
.laser-intro-features li::before {
  content: ""; flex: 0 0 auto;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px no-repeat;
}
.laser-intro-cta { margin-top: 32px; }
.laser-intro-media {
  position: relative;
  border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--bg-2);
  box-shadow: 0 30px 60px -30px rgba(41, 38, 27, 0.3);
}
.laser-intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.laser-intro-media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21,19,16,0) 44%, rgba(21,19,16,0.44) 100%);
}
.laser-intro-badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  background: rgba(21, 19, 16, 0.6); backdrop-filter: blur(6px);
  color: var(--bg); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px;
}

@media (max-width: 900px) {
  .laser-intro { padding: 88px var(--page-x); }
  .laser-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Text before photo on phone (was media-first). */
  .laser-intro-l { order: 1; }
  .laser-intro-media { aspect-ratio: 4 / 3; order: 2; }
}

/* ─────────── FAQ two-column with post image (home) ─────────── */
.faq-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: clamp(40px, 5vw, 84px);
  align-items: start;
}
.faq-media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  line-height: 0;
  aspect-ratio: 4 / 5;
  align-self: start;
}
.faq-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faq-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,19,16,0.04) 0%, rgba(21,19,16,0.12) 58%, rgba(21,19,16,0.3) 100%);
  pointer-events: none;
}

/* Raised to 1200 so iPad-landscape (~1024–1194) also gets the stacked banner,
   not the narrow desktop side-column. */
@media (max-width: 1200px) {
  .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Full-width banner above the questions. aspect-ratio + max-height together made
     the browser SHRINK the width to keep the ratio (image sat at ~569px, not full
     width) — use an explicit height so it always fills the column edge to edge. */
  .faq-media { order: -1; aspect-ratio: auto; max-width: none; height: clamp(220px, 40vw, 360px); margin: 0; }
}

/* ─────────── Contact 2-panel layout (form+hours+phone | map+locations) ─────────── */
.contact-two {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-items: stretch;
}
.contact-panel {
  background: #fff;
  border: 1px solid rgba(41, 38, 27, 0.07);
  border-radius: var(--r-md);
  padding: clamp(28px, 3vw, 44px);
  box-shadow: 0 1px 2px rgba(41, 38, 27, 0.04), 0 16px 40px rgba(41, 38, 27, 0.05);
}
.contact-panel-h { font-size: clamp(34px, 3.6vw, 48px); color: var(--ink); margin: 0 0 22px; }
.contact-panel-h .i { font-style: italic; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-form-submit { align-self: flex-start; margin-top: 4px; }
.contact-meta {
  display: flex; gap: 40px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(41, 38, 27, 0.1);
}
.contact-meta-block { display: flex; flex-direction: column; gap: 8px; }
.contact-meta-h { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 26px; color: var(--ink); }
.contact-meta-block p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin: 0; }
.contact-meta-block a { color: var(--ink); border-bottom: 1px solid rgba(41, 38, 27, 0.22); }
.contact-meta-block a:hover { color: var(--accent); border-color: var(--accent); }

.contact-panel--map { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.contact-panel-map { line-height: 0; flex: 1 1 auto; min-height: 360px; }
.contact-panel-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; filter: grayscale(0.15) contrast(1.02); }
.contact-locs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: clamp(24px, 2.4vw, 36px); }
.contact-loc-card { display: flex; flex-direction: column; gap: 6px; }
.contact-loc-card .contact-loc-name { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; font-family: var(--font-display); font-size: 27px; }
.contact-loc-addr { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.contact-loc-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; width: fit-content;
  color: var(--ink); font-size: 13px; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(41, 38, 27, 0.22); padding-bottom: 3px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.contact-loc-link svg { color: var(--accent); }
.contact-loc-link:hover { color: var(--accent); border-color: var(--accent); }
/* shrink the circular icon badge when used inline in these headings */
.contact-meta-h .contact-ico, .contact-loc-card .contact-loc-name .contact-ico { width: 30px; height: 30px; }

@media (max-width: 900px) {
  .contact-two { grid-template-columns: 1fr; }
  .contact-locs { grid-template-columns: 1fr; }
}

/* Booking modal — image-left, form-right 2-column */
.modal--split { display: flex; padding: 0; max-width: 900px; overflow: hidden; }
.modal--split .modal-media { flex: 0 0 40%; position: relative; align-self: stretch; }
.modal--split .modal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.modal--split .modal-inner { flex: 1 1 60%; padding: 48px; overflow-y: auto; max-height: 90vh; }
.modal--split .modal-close { z-index: 3; }
.modal-service { grid-column: 1 / -1; margin-bottom: 24px; }
@media (max-width: 720px) {
  .modal--split { display: block; }
  .modal--split .modal-media { display: none; }
  .modal--split .modal-inner { padding: 40px 26px; max-height: 90vh; }
}

/* Price figures set in Montserrat (client preference) — kept tabular for alignment */
.zone-row-price,
.zones-mix-price,
.pcard-price,
.pcards-list-price,
.calc-area-price,
.calc-pill-price,
.card-svc-price,
.price-tag,
.calc-total .calc-total-n,
.calc-total-n,
.modal-summary-total > span:last-child {
  font-family: var(--font-price);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}