/* =====================================================================
   Mayfair mobile massage — single stylesheet
   Tokens, reset, typography, layout primitives, components.
   ===================================================================== */

/* Self-hosted fonts (no third-party request, no visitor IP sent to
   Google before render). woff2, latin subset, in /assets/fonts/. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrument-serif.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/assets/fonts/manrope.woff2') format('woff2');
}

:root {
  --onyx: #101312;
  --moss: #223027;
  --linen: #F2EEE6;
  --stone: #C9C2B5;
  --copper: #B87A4B;
  --copper-light: #E0BE9C; /* warm accent for TEXT on dark grounds (>=4.5:1 on onyx/moss) */
  --copper-ink: #8F5C2F;   /* warm accent for TEXT on light grounds (4.85:1 on linen) */
  --muted: #63635C;        /* secondary text on linen (5.2:1); replaces translucent ink */
  --copper-hover: #C68855;
  --ink: #171A18;

  /* Structural hairlines are a neutral warm grey that reads on both the
     linen and onyx grounds. Copper is reserved for solid CTAs, the active
     jump-nav marker and eyebrows. (--line-copper* kept as aliases so the
     many rules that referenced them become neutral in one place.) */
  --hairline: rgba(150, 139, 124, 0.34);
  --hairline-strong: rgba(150, 139, 124, 0.52);
  --line-copper: var(--hairline);
  --line-copper-strong: var(--hairline-strong);
  --line-on-light: rgba(23, 26, 24, 0.12);
  --line-on-dark: rgba(201, 194, 181, 0.15);

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --wrap-narrow: 800px;
  --wrap-prose: 720px;
  --pad-x: clamp(20px, 5vw, 64px);
  --pad-y: clamp(64px, 9vw, 112px);
  --radius: 2px;
  /* fallback only — main.js measures the real header (about 56px, ~40px
     condensed) and overrides this on load, resize and the condense toggle */
  --header-h: 56px;
  --jumpnav-h: 0px;
}

/* ---- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* A component that sets its own `display` (e.g. .nav-overlay { display:flex })
   would otherwise beat the UA [hidden] rule and stay in the layout while
   the JS still thinks it is closed — an invisible fixed layer swallowing
   clicks and scroll. Keep [hidden] authoritative. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--linen);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> is only a wrapper for the WebP <source>; lay the <img> out
   as if it were a direct child of the media container. */
picture { display: contents; }
a { color: var(--copper-ink); text-decoration: none; }
.section--dark a:not(.btn), .section--moss a:not(.btn), .hero a:not(.btn),
.cta-band a:not(.btn), .pull-quote a:not(.btn) { color: var(--copper-light); }
a:hover { color: var(--copper-hover); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
/* Focus ring: ink on the linen ground (~15:1), linen on the dark
   grounds. Copper (2.9:1 on linen) is no longer used for focus. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 1px; }
.section--dark :focus-visible, .section--moss :focus-visible,
.site-header :focus-visible, .nav-overlay :focus-visible,
.hero :focus-visible, .cta-band :focus-visible, .pull-quote :focus-visible,
.footer-wave + .site-footer :focus-visible, .site-footer :focus-visible {
  outline-color: var(--linen);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--copper); color: var(--onyx);
  padding: 12px 20px; font-weight: 600; font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Typography helpers ----------------------------------------- */
.display { font-family: var(--font-display); }
/* Three heading sizes as tokens rather than a dozen inline clamps. */
:root {
  --h-2xl: clamp(33px, 4.6vw, 52px);
  --h-xl: clamp(28px, 3.6vw, 40px);
  --h-lg: clamp(24px, 3vw, 33px);
}
.h-2xl { font-size: var(--h-2xl); }
.h-xl { font-size: var(--h-xl); }
.h-lg { font-size: var(--h-lg); }
.eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--copper-ink); font-weight: 600;
}
/* On dark grounds the plain copper eyebrow drops below 4.5:1 at 11px;
   use the lighter warm accent there. */
.hero .eyebrow,
.section--dark .eyebrow,
.section--moss .eyebrow,
.cta-band .eyebrow,
.pull-quote .eyebrow { color: var(--copper-light); }
.lede { font-size: clamp(16px, 2vw, 18px); line-height: 1.6; }

.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  margin-top: 1.8em;
}
.prose h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 27px);
  margin-top: 1.6em;
}
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose strong { font-weight: 600; }

/* ---- Motif divider -------------------------------------------------- */
.motif { display: block; margin-bottom: 16px; }
.motif line, .motif rect { stroke: var(--copper); stroke-width: 1; fill: none; }

/* ---- Layout ------------------------------------------------------- */
/* A rhythm scale so consecutive sections do not all read the same:
   tight for connective bands, loose for the ones that carry weight. */
:root {
  --pad-y-tight: clamp(40px, 6vw, 72px);
  --pad-y-loose: clamp(80px, 11vw, 136px);
  --pad-y-feature: clamp(96px, 13vw, 160px);
}
.section { padding: var(--pad-y) var(--pad-x); position: relative; }
.section--tight { padding-block: var(--pad-y-tight); }
.section--loose { padding-block: var(--pad-y-loose); }
.section--feature { padding-block: var(--pad-y-feature); }
.section--dark { background: var(--onyx); color: var(--linen); }
.section--light { background: var(--linen); color: var(--ink); }
.section--moss { background: var(--moss); color: var(--linen); }
/* Two consecutive sections on the same background must not stack their
   paddings into one oversized band: the first keeps its bottom padding,
   the second drops its top. One gap, not two. */
.section--light + .section--light,
.section--dark + .section--dark,
.section--moss + .section--moss { padding-top: 0; }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--moss h1, .section--moss h2, .section--moss h3 { color: var(--linen); }
/* ---- Content rail --------------------------------------------------
   One rail per page. Every section shares the same left edge (the .wrap
   gutter). Sections MAY be wider or narrower than each other — image
   bands, tile grids and price rows can run full width — but the text
   left edge must line up straight down the page. So .wrap--prose and
   .wrap--narrow are the SAME outer box as .wrap; only their running text
   is capped, and it stays left-aligned. .wrap--head is the exception:
   a centred page-header block on a dark ground. */
.wrap { max-width: var(--wrap); margin-inline: auto; }
.wrap--narrow, .wrap--prose { max-width: var(--wrap); margin-inline: auto; min-width: 0; }
.wrap--prose > * { max-width: var(--wrap-prose); }
.wrap--narrow > * { max-width: var(--wrap-narrow); }
.wrap--head { max-width: var(--wrap-narrow); margin-inline: auto; text-align: center; }
.stack > * + * { margin-top: 1.25rem; }
.muted { color: var(--stone); }
.section--light .muted { color: var(--muted); }

/* ---- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 28px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  border-radius: var(--radius); border: 1px solid transparent;
  white-space: nowrap; cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn--solid { background: var(--copper); color: var(--onyx); }
.btn--solid:hover { background: var(--copper-hover); color: var(--onyx); }
.btn--ghost { border-color: rgba(242, 238, 230, 0.35); color: var(--linen); }
.btn--ghost:hover { border-color: var(--copper); color: var(--linen); }
.btn--outline { border-color: var(--line-copper-strong); color: var(--copper-ink); }
.btn--outline:hover { background: rgba(184, 122, 75, 0.12); color: var(--copper-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---- Icons (Lucide sprite) ----------------------------------- */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle;
}
.btn .icon { width: 20px; height: 20px; }

/* ---- Header ---------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(16, 19, 18, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-copper);
  transition: background-color 0.3s ease;
}
.site-header__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px var(--pad-x);
  transition: padding 0.25s ease;
}
.site-header.is-condensed { background: rgba(16, 19, 18, 0.92); }
.site-header.is-condensed .site-header__inner { padding-top: 9px; padding-bottom: 9px; }
.brand {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-weight: 700; font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--linen); white-space: nowrap;
}
.brand:hover { color: var(--linen); }
.brand__logo {
  display: block; width: auto; height: 24px;
}
.site-header.is-condensed .brand__logo { height: 21px; transition: height 0.25s ease; }
.brand--footer { display: inline-block; }
.brand--footer .brand__logo { height: auto; width: clamp(190px, 42vw, 230px); }
@media (max-width: 420px) { .brand__logo { height: 20px; } }

.nav { display: flex; align-items: center; gap: 30px; }
.nav__item--menu { position: relative; display: flex; align-items: center; gap: 4px; }
.nav__link {
  color: var(--linen); opacity: 0.85; font-size: 14px; padding-bottom: 2px;
  background-image: linear-gradient(var(--copper), var(--copper));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size 0.3s ease, opacity 0.3s ease;
}
.nav__link:hover, .nav__item--menu:hover .nav__link, .nav__link[aria-current="page"] {
  opacity: 1; color: var(--linen); background-size: 100% 1px;
}
.nav__link[aria-current="page"] { color: var(--copper-light); }
.nav__caret {
  background: none; border: 0; padding: 4px; color: var(--linen); opacity: 0.7;
  cursor: pointer; display: inline-flex; line-height: 0;
}
.nav__caret .icon { width: 15px; height: 15px; transition: transform 0.25s ease; }
.nav__item--menu.is-open .nav__caret { opacity: 1; }
.nav__item--menu.is-open .nav__caret .icon { transform: rotate(180deg); }
.nav__submenu {
  position: absolute; top: calc(100% + 10px); left: -14px;
  min-width: 250px; list-style: none;
  max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(16, 19, 18, 0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-copper);
  padding: 8px; border-radius: var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav__sublink--hub {
  margin-top: 4px; border-top: 1px solid var(--line-copper);
  padding-top: 13px; color: var(--linen);
}
.nav__item--menu.is-open .nav__submenu { opacity: 1; visibility: visible; transform: none; }
.nav__submenu::before {
  content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 12px;
}
.nav__sublink {
  display: block; padding: 11px 14px; font-size: 14px; color: var(--stone);
  border-radius: 1px;
}
.nav__sublink:hover, .nav__sublink:focus-visible { background: rgba(184, 122, 75, 0.14); color: var(--linen); }
.nav__cta {
  min-height: 40px; padding: 9px 16px 9px 14px; font-size: 13px; gap: 7px;
}
.nav__toggle {
  display: none; background: none; border: 1px solid var(--line-copper);
  border-radius: var(--radius); padding: 8px; color: var(--linen);
  cursor: pointer; line-height: 0;
}
.nav__toggle .icon { width: 22px; height: 22px; }

@media (max-width: 899px) {
  .nav > .nav__item--menu, .nav > .nav__link, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* Full-screen mobile overlay */
.nav-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--onyx);
  display: flex; opacity: 0; transition: opacity 0.28s ease;
  overflow-y: auto;
}
.nav-overlay.is-open { opacity: 1; }
.nav-overlay__inner {
  margin: auto; width: 100%; max-width: 520px;
  padding: 88px var(--pad-x) 48px;
  display: flex; flex-direction: column; gap: 6px;
}
.nav-overlay__close {
  position: absolute; top: 20px; right: var(--pad-x);
  background: none; border: 1px solid var(--line-copper); border-radius: var(--radius);
  color: var(--linen); padding: 9px; cursor: pointer; line-height: 0;
}
.nav-overlay__close .icon { width: 22px; height: 22px; }
.nav-overlay__nav { display: flex; flex-direction: column; }
.nav-overlay__link, .nav-overlay__row > a {
  font-family: var(--font-display); font-size: clamp(28px, 8vw, 40px);
  color: var(--linen); padding: 14px 0; border-bottom: 1px solid var(--line-on-dark);
  display: block;
}
.nav-overlay__link:hover { color: var(--copper); }
.nav-overlay__row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-on-dark); }
.nav-overlay__row > a { border-bottom: 0; flex: 1; }
.nav-overlay__caret {
  background: none; border: 0; color: var(--copper); padding: 12px; cursor: pointer; line-height: 0;
}
.nav-overlay__caret .icon { width: 26px; height: 26px; transition: transform 0.25s ease; }
.nav-overlay__caret[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-overlay__sub {
  list-style: none; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.nav-overlay__sub > li { overflow: hidden; }
.nav-overlay__sub.is-open { grid-template-rows: 1fr; }
.nav-overlay__sub li { min-height: 0; }
.nav-overlay__sub a {
  display: block; padding: 12px 0 12px 16px; font-size: 17px; color: var(--stone);
  border-bottom: 1px solid var(--line-on-dark);
}
.nav-overlay__sub a:hover { color: var(--linen); }
.nav-overlay__cta { margin-top: 28px; gap: 8px; align-self: flex-start; }
.nav-overlay__phone {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  color: var(--stone); font-weight: 600;
}
.nav-overlay__phone .icon { color: var(--copper); }
html.nav-locked { overflow: hidden; }

/* ---- In-page jump nav ---------------------------------------- */
.jumpnav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(16, 19, 18, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-copper);
}
.jumpnav__scroll {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; gap: 8px; align-items: center;
  padding: 6px var(--pad-x);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.jumpnav__scroll::-webkit-scrollbar { display: none; }
.jumpnav__link {
  position: relative; white-space: nowrap; flex-shrink: 0;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone); padding: 14px 14px; border-radius: 2px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
/* No negative end margins: the first and last links stay clear of the
   scroll-fade mask so they are always fully lit and tappable. */
.jumpnav__scroll { padding-inline: max(var(--pad-x), 18px); }
.jumpnav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  background: var(--copper); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.jumpnav__link:hover, .jumpnav__link:focus-visible {
  color: var(--linen); background: rgba(184, 122, 75, 0.10);
}
.jumpnav__link:focus-visible { outline: 2px solid var(--linen); outline-offset: 2px; }
.jumpnav__link.is-active { color: var(--linen); }
.jumpnav__link.is-active::after { transform: scaleX(1); }
.jumpnav__title {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper-light); margin-bottom: 10px; padding-left: 14px;
}

/* Two-column layout on treatment pages: a real grid, not a fixed overlay.
   Built by buildJumpNav() wrapping the nav + body sections in
   .treatment-layout.
   Principle: a container must not reserve a track for content that is not
   there. The content column is `minmax(0, 1fr)` so it fills the width the
   sticky nav is not using, rather than being pinned to a fixed measure
   with empty space beside it; running text is capped separately for
   readability. Below the grid breakpoint the layout is a single centred
   column. Run `npm run shots` after any change here. */
@media (min-width: 1160px) {
  /* Content column is capped at the prose measure so there is no dead
     gutter to the right; the whole grid is centred in the wrap.
     Full-bleed bands and pull quotes still escape via grid-column 1/-1. */
  .treatment-layout {
    display: grid; grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 64px; row-gap: 0;
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x);
    align-items: start;
  }
  .treatment-layout > .jumpnav--side {
    position: sticky; top: calc(var(--header-h) + 32px);
    align-self: start; z-index: 20;
    background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .treatment-layout > .jumpnav--side .jumpnav__scroll {
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 0; overflow: visible; mask-image: none; -webkit-mask-image: none;
  }
  .treatment-layout > .jumpnav--side .jumpnav__link {
    padding: 12px 14px; min-height: 0;
    color: var(--muted); /* the side rail sits on linen, not the dark bar */
  }
  .treatment-layout > .jumpnav--side .jumpnav__link:hover,
  .treatment-layout > .jumpnav--side .jumpnav__link:focus-visible { color: var(--ink); }
  .treatment-layout > .jumpnav--side .jumpnav__link:focus-visible { outline-color: var(--ink); }
  .treatment-layout > .jumpnav--side .jumpnav__link.is-active { color: var(--copper-ink); }
  .treatment-layout > .jumpnav--side .jumpnav__title { color: var(--copper-ink); }
  .treatment-layout > .jumpnav--side .jumpnav__link:first-child,
  .treatment-layout > .jumpnav--side .jumpnav__link:last-child { margin: 0; }
  .treatment-layout > .jumpnav--side .jumpnav__link::after {
    left: 0; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto;
    transform: scaleY(0); transform-origin: top;
  }
  .treatment-layout > .jumpnav--side .jumpnav__link.is-active::after { transform: scaleY(1); }

  /* Prose sits in the reading column; the running text keeps a readable
     measure. Anything that is not prose (FAQ, "compare or book nearby",
     image bands, pull quotes) spans both columns so there is no empty
     rail beside it below the sticky nav. */
  .treatment-layout > :not(.jumpnav--side) { grid-column: 2; }
  .treatment-layout > section { padding-inline: 0; }
  .treatment-layout > section:has(> .wrap--prose) > .wrap--prose { max-width: none; margin-inline: 0; }
  .treatment-layout .prose > p,
  .treatment-layout .prose > h2,
  .treatment-layout .prose > h3,
  .treatment-layout .prose > ul,
  .treatment-layout .prose > ol,
  .treatment-layout .prose > blockquote { max-width: 760px; }
  /* non-prose sections: span the whole grid and re-centre their inner wrap */
  .treatment-layout > section:has(> .wrap),
  .treatment-layout > section:has(> .wrap--narrow) { grid-column: 1 / -1; }
  .treatment-layout > section:has(> .wrap) > .wrap { max-width: var(--wrap); margin-inline: auto; }
  .treatment-layout > section:has(> .wrap--narrow) > .wrap--narrow { max-width: var(--wrap-narrow); margin-inline: auto; }
  /* a full-bleed band breaks out of both grid columns to the viewport */
  .treatment-layout > .image-band,
  .treatment-layout > .pull-quote {
    grid-column: 1 / -1;
    margin-inline: calc(50% - 50vw);
    width: auto; max-width: none;
  }
  /* the treatment-page pull-quote is a small mid-article aside, not a
     hero-scale statement */
  .treatment-layout > .pull-quote { padding-block: clamp(28px, 4vw, 44px); }
  .treatment-layout > .pull-quote blockquote {
    font-size: clamp(19px, 2.1vw, 24px); max-width: 760px;
  }
}

/* Sticky-header + jump-nav offset for in-page anchors. --jumpnav-h has a
   static fallback so anchors clear the horizontal jump bar even with
   JavaScript off; main.js overrides it with the measured height. */
main { scroll-margin-top: calc(var(--header-h) + 12px); }
[id] { scroll-margin-top: calc(var(--header-h) + var(--jumpnav-h, 0px) + 16px); }
:root { --jumpnav-h: 0px; }
html:has(.jumpnav:not(.jumpnav--side)) { --jumpnav-h: 56px; }

/* ---- Hero -------------------------------------------------------- */
.hero {
  position: relative; display: flex; align-items: center;
  overflow: hidden; background: var(--onyx); color: var(--linen);
  min-height: 88svh;
  padding: calc(var(--header-h) + clamp(48px, 9vw, 96px)) var(--pad-x) clamp(48px, 7vw, 72px);
}
.hero--short { min-height: 56svh; }
/* Secondary heroes (treatment + area pages): shorter, less top padding so
   the h1 lands on the first screen, and an even, darker scrim at every
   width so the heading and its eyebrow hold 4.5:1 over the photograph. */
.hero--mid {
  min-height: 54svh;
  padding-top: calc(var(--header-h) + clamp(20px, 3.5vw, 44px));
  padding-bottom: clamp(36px, 5vw, 56px);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) brightness(0.82) contrast(1.02);
}
.hero--mid .hero__media img { filter: saturate(0.82) brightness(0.80) contrast(1.03); }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(16, 19, 18, 0.82) 0%, rgba(16, 19, 18, 0.4) 55%, rgba(16, 19, 18, 0.12) 100%),
    linear-gradient(rgba(16, 19, 18, 0.28), rgba(16, 19, 18, 0.28));
}
.hero__scrim--center {
  background: linear-gradient(rgba(16, 19, 18, 0.66), rgba(16, 19, 18, 0.82));
}
.hero--mid .hero__scrim {
  background: linear-gradient(rgba(16, 19, 18, 0.52), rgba(16, 19, 18, 0.72));
}
/* A tighter local scrim behind the text block only, so the h1 and lede
   hold 4.5:1 without darkening the whole photograph. */
.hero--mid .hero__body { position: relative; isolation: isolate; }
.hero--mid .hero__body::before {
  content: ""; position: absolute; z-index: -1;
  inset: -28px -56px -28px -64px;
  background: linear-gradient(100deg,
    rgba(16, 19, 18, 0.66) 0%,
    rgba(16, 19, 18, 0.5) 42%,
    rgba(16, 19, 18, 0.16) 74%,
    rgba(16, 19, 18, 0) 96%);
  pointer-events: none;
}
/* On narrow screens .hero__body spans the full width, so the h1 sits over
   the thin end of the 100deg gradient and would not hold 4.5:1. Switch to
   an even vertical scrim below 820px. */
@media (max-width: 820px) {
  .hero__scrim {
    background: linear-gradient(rgba(16, 19, 18, 0.5), rgba(16, 19, 18, 0.8));
  }
}
.hero__inner { position: relative; z-index: 1; max-width: var(--wrap); margin-inline: auto; width: 100%; }
.hero__body { max-width: 640px; }
.hero__inner--center { text-align: center; }
.hero__inner--center .hero__body { max-width: 680px; margin-inline: auto; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.04; color: var(--linen); margin-top: 16px;
}
.hero--short h1, .hero--mid h1 { font-size: clamp(36px, 5.6vw, 60px); }
.hero p.lede { color: var(--linen); opacity: 0.88; margin-top: 18px; max-width: 52ch; }
.hero__inner--center p.lede { margin-inline: auto; }
.hero__note { margin-top: 20px; font-size: 15px; color: var(--stone); }
.hero .btn-row { margin-top: 28px; }
.hero__inner--center .btn-row { justify-content: center; }

/* zoom-in on the home hero image */
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero__media--zoom img { animation: heroZoom 12s ease-out forwards; }


/* ---- Section heading block ---------------------------------- */
.sec-head { max-width: var(--wrap-prose); }
.sec-head h2 { font-family: var(--font-display); font-size: clamp(28px, 3.8vw, 44px); margin-top: 12px; }
.sec-head p { margin-top: 16px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .motif { margin-inline: auto; }

/* ---- Breadcrumb --------------------------------------------- */
.breadcrumb { padding: calc(var(--header-h) + 20px) var(--pad-x) 0; background: var(--onyx); }
.breadcrumb ol {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  font-size: 13px; color: var(--stone);
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: rgba(201, 194, 181, 0.5); }
.breadcrumb a { color: var(--stone); }
.breadcrumb a:hover { color: var(--copper-ink); }
.breadcrumb [aria-current="page"] { color: var(--linen); }

/* ---- Price cards ----------------------------------------- */
.price-cards {
  display: grid; gap: 16px; margin-top: 24px;
  grid-template-columns: repeat(3, 1fr); align-items: stretch;
}
.price-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 30px 26px; border-radius: var(--radius);
  border: 1px solid var(--line-on-light);
}
.section--dark .price-card { border-color: var(--line-on-dark); }
.price-card--feature {
  background: var(--moss); color: var(--linen);
  border-color: var(--copper);
  padding-block: 40px;
}
.price-card__tag {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--copper-light); font-weight: 700; margin-bottom: 2px;
}
.price-card__dur {
  font-family: var(--font-display); font-size: clamp(38px, 4.4vw, 52px); line-height: 1;
}
.price-card__dur span { font-family: var(--font-body); font-size: 14px; color: var(--stone); margin-left: 6px; }
.section--light .price-card:not(.price-card--feature) .price-card__dur span { color: var(--muted); }
.price-card__price { font-size: 21px; font-weight: 600; color: var(--copper-ink); }
.section--dark .price-card__price, .price-card--feature .price-card__price { color: var(--copper-light); }
.price-card__studio { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); margin-top: -6px; }
.section--dark .price-card__studio, .price-card--feature .price-card__studio { color: var(--stone); }
.price-card__rates { display: flex; flex-direction: column; gap: 2px; }
.price-card__rate { font-size: 13px; color: var(--muted); }
.price-card__rate b { font-size: 20px; font-weight: 600; color: var(--copper-ink); margin-right: 5px; }
.section--dark .price-card__rate, .price-card--feature .price-card__rate { color: var(--stone); }
.section--dark .price-card__rate b, .price-card--feature .price-card__rate b { color: var(--copper-light); }
.price-card__desc { font-size: 14px; line-height: 1.55; color: var(--muted); }
.section--dark .price-card__desc, .price-card--feature .price-card__desc { color: var(--stone); }
.price-card .btn { margin-top: auto; min-height: 44px; padding: 11px 20px; font-size: 14px; gap: 7px; white-space: normal; }
@media (max-width: 980px) { .price-cards { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* Compact price strip — used under area-page heroes so a visitor sees the
   cost without clicking through. */
.price-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  list-style: none; border-top: 1px solid var(--line-on-light);
}
.price-strip > li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line-on-light);
}
.price-strip > li + li { border-left: 1px solid var(--line-on-light); padding-left: 20px; }
.price-strip__dur { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); line-height: 1; }
.price-strip__amt { font-size: 16px; font-weight: 600; color: var(--copper-ink); }
.price-strip__alt { font-size: 12px; font-weight: 600; color: var(--copper-ink); }
.price-strip__note { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .price-strip { grid-template-columns: 1fr; }
  .price-strip > li + li { border-left: 0; padding-left: 0; }
}

/* Condensed travel / block / equipment lines beneath the cards */
.price-meta { margin-top: 28px; border-top: 1px solid var(--line-copper); }
.price-meta > p {
  padding: 13px 0; border-bottom: 1px solid var(--line-copper);
  font-size: 14px; line-height: 1.5;
  display: flex; gap: 14px; align-items: baseline;
}
.price-meta b {
  flex-shrink: 0; min-width: 92px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--copper-ink); font-weight: 600;
}
.section--dark .price-meta > p { color: var(--stone); }
.section--dark .price-meta b { color: var(--copper-light); }

/* ---- Treatment cards + tabs ------------------------------ */
.tabs {
  position: relative;
  display: flex; gap: 28px;
  border-bottom: 1px solid var(--line-copper);
  margin-top: 28px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; background: none; border: 0;
  padding: 10px 2px 14px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color 0.2s ease;
}
.section--dark .tab { color: var(--stone); }
.tab:hover { color: var(--ink); }
.section--dark .tab:hover { color: var(--linen); }
.tab[aria-pressed="true"] { color: var(--ink); }
.section--dark .tab[aria-pressed="true"] { color: var(--linen); }
.tabs__indicator {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--copper);
  transition: transform 0.25s ease, width 0.25s ease;
}

.card-grid {
  display: grid; gap: 24px; margin-top: 32px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.t-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-copper); border-radius: var(--radius);
  overflow: hidden; background: var(--linen);
}
.section--dark .t-card { background: #161a19; border-color: rgba(184, 122, 75, 0.28); }
.t-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--onyx); }
.t-card__media img { width: 100%; height: 100%; object-fit: cover; }
.t-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.t-card__eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper-ink); font-weight: 700; }
.t-card__name { font-family: var(--font-display); font-size: 24px; }
.section--dark .t-card__name { color: var(--linen); }
.t-card__desc { font-size: 15px; color: var(--muted); flex: 1; }
.section--dark .t-card__desc { color: var(--stone); }
.t-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.t-card__price { font-weight: 600; font-size: 16px; }
.section--dark .t-card__price { color: var(--linen); }
.t-card__more { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.t-card__more .icon { width: 15px; height: 15px; }
.section--dark .t-card__eyebrow, .section--dark .t-card__more { color: var(--copper-light); }
[data-pressure].is-hidden { display: none; }

/* ---- Steps (how it works) ------------------------------- */
.steps { position: relative; margin-top: 44px; }
.steps__list {
  display: grid; gap: 32px; position: relative; z-index: 1;
  grid-template-columns: repeat(4, 1fr);
}
.step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.step__num {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-copper-strong);
  background: var(--linen); color: var(--copper-ink);
  font-family: var(--font-display); font-size: 22px; flex-shrink: 0;
}
.step__title { font-weight: 600; font-size: 16px; }
.step__text { font-size: 15px; color: var(--muted); }
.steps::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 30px;
  height: 1px; background: var(--line-copper); z-index: 0;
}
@media (max-width: 760px) {
  .steps__list { grid-template-columns: 1fr; gap: 24px; }
  .step { flex-direction: row; text-align: left; align-items: flex-start; gap: 18px; }
  .steps::before { left: 30px; top: 8px; bottom: 8px; right: auto; width: 1px; height: auto; }
}

/* ---- Coverage / radius map ----------------------------- */
.coverage-grid {
  display: grid; gap: 48px; align-items: center; margin-top: 20px;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
}
.radius-map { width: 100%; height: auto; }
.radius-map text { fill: var(--stone); }
.area-list {
  display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px 20px; margin-top: 8px; list-style: none;
}
.area-list a { color: var(--stone); font-size: 14px; }
.area-list a:hover { color: var(--copper-light); }
@media (max-width: 760px) { .coverage-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---- Editorial media rows --------------------------- */
.media-row {
  display: grid; gap: clamp(28px, 5vw, 56px); align-items: center;
  grid-template-columns: 1fr 1fr;
}
.media-row--flip { direction: rtl; }
.media-row--flip > * { direction: ltr; }
.media-row__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--onyx); }
.media-row__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .media-row, .media-row--flip { grid-template-columns: 1fr; direction: ltr; }
}

/* ---- Generic figure -------------------------------- */
.figure { margin: 2em 0; }
.figure__media { overflow: hidden; background: var(--onyx); aspect-ratio: 16 / 10; }
.figure__media img { width: 100%; height: 100%; object-fit: cover; }
.figure figcaption {
  font-size: 13px; color: var(--muted); margin-top: 10px;
  padding-left: 14px; border-left: 1px solid var(--line-copper);
}
.section--dark .figure figcaption { color: var(--stone); }

/* ---- Full-bleed image band -------------------------- */
/* Breaks the stack of centred columns: a band that spans the viewport.
   Height varies (tall / short) so the page has rhythm. */
.image-band {
  position: relative; overflow: hidden; background: var(--onyx);
  height: clamp(280px, 42vw, 520px);
}
.image-band--short { height: clamp(200px, 26vw, 300px); }

/* On phones a full-width inline photograph between text blocks costs a
   lot of scroll for little value. In-body images punctuate the text at
   ~220px; deliberate .image-band sections keep their full-bleed height
   (limit one per page on mobile by hand). */
@media (max-width: 700px) {
  .split__media, .figure__media, .media-row__media, .split__media--bleed {
    aspect-ratio: auto; height: 220px;
  }
  .split__media img, .figure__media img, .media-row__media img { height: 100%; }
  .image-band { height: clamp(200px, 40vw, 260px); }
  .image-band--short { height: 180px; }
  .studio-map iframe { height: 260px; }
  /* a decorative image sitting next to another image adds nothing on a
     phone; keep only the first */
  [data-hide-sm] { display: none; }
}

/* ---- Studio location map (single lazy iframe, no third-party script) --- */
.studio-map { margin: 0; }
.studio-map iframe {
  width: 100%; height: clamp(280px, 40vw, 420px);
  border: 1px solid var(--line-copper); border-radius: var(--radius);
  display: block; background: var(--linen);
}
.studio-map figcaption {
  margin-top: 10px; font-size: 13px; color: var(--muted);
}
.image-band img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) brightness(0.72) contrast(1.02);
}
.image-band__quote {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center;
  max-width: var(--wrap); margin-inline: auto; padding: 0 var(--pad-x);
}
.image-band__quote::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,19,18,0.85) 0%, rgba(16,19,18,0.45) 55%, rgba(16,19,18,0.15) 100%);
}
.image-band__quote p {
  position: relative; z-index: 1;
  font-family: var(--font-display); color: var(--linen);
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.25; max-width: 20ch;
  padding-left: 20px; border-left: 2px solid var(--copper);
}

/* ---- Asymmetric image / text split ----------------- */
/* 7/5 by default, .split--flip for 5/7 with the media on the right. The
   media can bleed to the near viewport edge with .split__media--bleed. */
.split {
  display: grid; align-items: center;
  grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px);
  max-width: var(--wrap); margin-inline: auto;
}
.split--flip { grid-template-columns: 5fr 7fr; }
.split--flip .split__text { order: 2; }
.split--flip .split__media { order: 1; }
.split__media { position: relative; overflow: hidden; background: var(--onyx); aspect-ratio: 4 / 3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* Distance from the centred .wrap edge to the viewport edge is
   max(pad-x, (100vw - wrap) / 2); pull the media out by that, less 2px
   so sub-pixel rounding never forces a scrollbar. */
.split__media--bleed { margin-right: calc(2px - max(var(--pad-x), (100vw - var(--wrap)) / 2)); }
.split--flip .split__media--bleed { margin-right: 0; margin-left: calc(2px - max(var(--pad-x), (100vw - var(--wrap)) / 2)); }
@media (max-width: 820px) {
  .split, .split--flip { grid-template-columns: 1fr; gap: 28px; }
  .split--flip .split__text, .split--flip .split__media { order: initial; }
  .split__media--bleed, .split--flip .split__media--bleed {
    margin-inline: calc(-1 * var(--pad-x));
  }
}

/* ---- Image overlapping a colour-band boundary ------ */
/* Wrap the image in .overlap inside the LOWER section; a negative top
   margin pulls it up over the boundary, the copper hairline behind it. */
.overlap { position: relative; margin-top: clamp(-80px, -6vw, -40px); z-index: 1; }
.overlap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--copper); opacity: 0.5; z-index: -1;
}
.overlap > .split__media, .overlap > .figure__media, .overlap > img { position: relative; }

/* ---- Pull quote ----------------------------------- */
.pull-quote {
  background: var(--moss); color: var(--linen);
  padding: clamp(48px, 7vw, 88px) var(--pad-x);
}
.pull-quote blockquote {
  max-width: 900px; margin-inline: auto;
  font-family: var(--font-display); font-size: clamp(26px, 3.8vw, 46px);
  line-height: 1.28; padding-left: clamp(20px, 3vw, 36px);
  border-left: 2px solid var(--copper);
}
.pull-quote cite {
  display: block; margin-top: 18px; font-family: var(--font-body);
  font-style: normal; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone);
}

/* ---- Organic curve divider ------------------------ */
/* Sits at the top of a section, in that section's own colour, curving up
   over the section above. Use two or three per page, never on every join. */
/* Absolutely placed at the top edge of its section and lifted fully above
   it, so it overlaps the section above without disturbing either flow.
   Give it the colour of the section it belongs to via a modifier. */
.divider-curve {
  position: absolute; left: 0; right: 0; top: 0;
  transform: translateY(-99%);
  display: block; width: 100%; height: clamp(40px, 6vw, 90px);
  z-index: 1; pointer-events: none;
}
.divider-curve path { fill: currentColor; }
.divider-curve--onyx path { fill: var(--onyx); }
.divider-curve--linen path { fill: var(--linen); }
.divider-curve--moss path { fill: var(--moss); }

/* ---- Line-drawn illustration marks ------------------ */
/* 1.5px copper stroke, no fill, flat and geometric. Every mark uses a
   0 0 64 64 (or 0 0 48 48) viewBox so the stroke scales predictably. */
.mark { display: block; color: var(--copper); }
.mark path, .mark line, .mark circle, .mark rect,
.mark polyline, .mark polygon, .mark ellipse {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Treatment tile grid (home) -------------------- */
/* Five tiles, hairline-separated, each a mark + name + line + link.
   Three across, two on tablet, one on mobile. */
.tile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
  border-top: 1px solid var(--line-copper);
  border-left: 1px solid var(--line-copper);
}
.tile {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 3vw, 34px);
  color: var(--ink); background: transparent;
  text-decoration: none; min-height: 44px;
  border-right: 1px solid var(--line-copper);
  border-bottom: 1px solid var(--line-copper);
  transition: background-color 0.2s ease;
}
.section--dark .tile { background: var(--onyx); color: var(--linen); }
.tile:hover, .tile:focus-visible { background: rgba(184, 122, 75, 0.07); }
.section--dark .tile:hover, .section--dark .tile:focus-visible { background: rgba(184, 122, 75, 0.13); }
.tile:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.tile__mark { width: clamp(60px, 8vw, 84px); height: auto; margin-bottom: 2px; }
.tile__name { font-family: var(--font-display); font-size: clamp(21px, 2.5vw, 27px); line-height: 1.15; }
.tile__line { font-size: 14px; line-height: 1.5; color: var(--muted); flex: 1; }
.section--dark .tile__line { color: var(--stone); }
.tile__more { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-ink); }
.section--dark .tile__more { color: var(--copper-light); }
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tile-grid { grid-template-columns: 1fr; } }

/* "All five, compared" — a full-width row under the grid, not a sixth
   look-alike tile */
.tile--wide {
  flex-direction: row; align-items: center; gap: 20px;
  border: 1px solid var(--line-copper); border-top: 0; margin-top: -1px;
}
.tile--wide .tile__mark { width: 46px; flex-shrink: 0; margin: 0; }
.tile--wide > span { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tile--wide .tile__more { flex-shrink: 0; }
@media (max-width: 560px) { .tile--wide { flex-direction: column; align-items: flex-start; } }

/* ---- "Why book" box row (home) -------------------- */
.why-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-top: 10px;
}
.why-box {
  display: flex; flex-direction: column; gap: 9px;
  padding: 22px 18px;
  background: var(--moss); color: var(--linen);
  border: 1px solid var(--line-on-dark); border-radius: 2px;
}
.why-box__mark { width: 38px; height: auto; }
.why-box__h { font-family: var(--font-display); font-size: 19px; line-height: 1.12; }
.why-box__t { font-size: 13px; line-height: 1.45; color: var(--stone); }
@media (max-width: 1000px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } }

/* ---- Promo tile row (above the footer) ------------ */
.promo-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(48px, 7vw, 88px) var(--pad-x);
}
@media (max-width: 1040px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } }
.promo {
  position: relative; overflow: hidden;
  min-height: clamp(210px, 26vw, 290px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px; text-decoration: none; color: var(--linen);
  background: var(--onyx); border: 1px solid var(--line-copper);
}
.promo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.8) brightness(0.58); z-index: 0;
}
.promo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(16, 19, 18, 0.92) 0%, rgba(16, 19, 18, 0.4) 58%, rgba(16, 19, 18, 0.2) 100%);
}
.promo__h { position: relative; z-index: 2; font-family: var(--font-display); font-size: clamp(21px, 2.6vw, 29px); }
.promo__more { position: relative; z-index: 2; margin-top: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); }
.promo:hover img, .promo:focus-visible img { filter: saturate(0.9) brightness(0.68); }
.promo:focus-visible { outline: 2px solid var(--linen); outline-offset: 2px; }
@media (max-width: 860px) { .promo-grid { grid-template-columns: 1fr; } }

/* ---- SVG panel (fills a .split__media slot in place of a photo) --- */
.svg-panel {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; background: var(--moss);
  border: 1px solid var(--line-copper); padding: clamp(28px, 6vw, 64px);
}
.svg-panel .mark { width: min(320px, 72%); height: auto; color: var(--copper); }
.split__media--bleed.svg-panel { aspect-ratio: 4 / 3; }

/* ---- Contour divider (topographic line separator) - */
.contour-divider {
  display: block; width: 100%; height: clamp(26px, 4vw, 46px);
  color: var(--copper); margin: 0; overflow: hidden;
}
.contour-divider svg { display: block; width: 100%; height: 100%; }
.contour-divider path { fill: none; stroke: var(--hairline-strong); stroke-width: 1; opacity: 0.8; }

/* ---- Coverage radius diagram ---------------------- */
.radius-map { width: 100%; height: auto; }
.radius-map .rm-ring { fill: none; stroke: var(--copper); stroke-width: 1; }
.radius-map .rm-ring--outer { stroke-dasharray: 3 4; opacity: 0.5; }
.radius-map .rm-ring--inner { opacity: 0.7; }
.radius-map .rm-dot { fill: var(--copper); }
.radius-map .rm-hub { fill: var(--copper); }
.radius-map .rm-label { fill: var(--stone); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; }
@media (max-width: 560px) { .radius-map .rm-label--outer { display: none; } }
.radius-map .rm-hub-label { fill: var(--copper); font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }

/* ---- Image fallback (copper -> onyx gradient) ------ */
.media { position: relative; }
/* These media wrappers must fill their section behind the content.
   Declared after .media so its position:relative does not win by order. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.media.is-broken::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(160deg, var(--copper) 0%, var(--onyx) 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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)' opacity='0.35'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
}

/* ---- Accordion ---------------------------------- */
/* Panels animate with grid-template-rows 0fr -> 1fr and always stay in
   the DOM. The whole row is the click target, minimum 56px. */
.accordion { border-top: 1px solid var(--line-on-dark); }
.section--light .accordion { border-top-color: var(--line-on-light); }
.accordion__item { border-bottom: 1px solid var(--line-on-dark); }
.section--light .accordion__item { border-bottom-color: var(--line-on-light); }
/* Each trigger sits inside an <h3>/<h4> for document structure; the
   heading carries no visual weight of its own. */
.faq-h { margin: 0; font: inherit; letter-spacing: normal; }
.accordion__trigger {
  width: 100%; min-height: 56px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; background: none; border: 0; padding: 18px 0;
  text-align: left; cursor: pointer; font-size: 16px; font-weight: 600;
  color: inherit;
}
.accordion__icon {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--copper);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease;
}
.accordion__icon .icon { width: 18px; height: 18px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .accordion__icon, .nav__caret .icon, .nav-overlay__caret .icon { transition: none; }
}

/* Panels collapse via grid-template-rows 0fr -> 1fr, toggled by
   [data-open] from main.js. Without JavaScript the @media block below
   forces every panel open, so all answers, the qualifications list and
   the first-appointment walkthrough stay readable and match the FAQPage
   schema. */
.accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.accordion__panel > div { overflow: hidden; min-height: 0; }
.accordion__panel[data-open] { grid-template-rows: 1fr; }
.accordion__panel-inner { padding-bottom: 22px; font-size: 15px; line-height: 1.6; max-width: 64ch; }
.section--dark .accordion__panel-inner { color: var(--stone); }

/* FAQ groups: a header trigger + a nested accordion, animated the same way. */
.faq-group { border-bottom: 1px solid var(--line-on-dark); }
.faq-group > .faq-h > .accordion__trigger { font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.faq-group__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.faq-group__panel > div { overflow: hidden; min-height: 0; }
.faq-group__panel[data-open] { grid-template-rows: 1fr; }
.faq-group__panel > div > .accordion { padding-bottom: 8px; }

@media (scripting: none), (scripting: initial-only) {
  .accordion__panel, .faq-group__panel { grid-template-rows: 1fr; }
}
.faq-group .accordion { border-top: 0; margin-left: 2px; }
.faq-group .accordion__trigger { font-size: 15px; padding: 14px 0; }

/* ---- Collapsible standalone panel --------------- */
.collapse__trigger {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 1px solid var(--line-copper-strong);
  color: var(--copper-ink); border-radius: var(--radius);
  padding: 11px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color 0.2s ease;
}
.collapse__trigger:hover { background: rgba(184, 122, 75, 0.12); }
.collapse__trigger .accordion__icon { width: 16px; height: 16px; }
.section--dark .collapse__trigger, .section--moss .collapse__trigger { color: var(--copper-light); }
.collapse__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.collapse__panel > div { overflow: hidden; min-height: 0; }
.collapse__panel[data-open] { grid-template-rows: 1fr; }
.collapse__panel-inner { padding-top: 24px; }
@media (scripting: none), (scripting: initial-only) {
  .collapse__panel { grid-template-rows: 1fr; }
}

/* ---- Definition rows (qualifications, provided) - */
.def-rows { max-width: var(--wrap-narrow); border-top: 1px solid var(--line-copper); margin-top: 8px; list-style: none; }
.def-rows li { padding: 18px 0; border-bottom: 1px solid var(--line-copper); font-size: 15px; }
.numbered {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 44px; margin-top: 40px; list-style: none;
}
.numbered li { display: flex; gap: 18px; }
.numbered b {
  font-family: var(--font-display); font-size: 30px; color: var(--copper);
  line-height: 1; font-weight: 400;
}
.numbered p { font-size: 15px; color: rgba(23, 26, 24, 0.8); padding-top: 4px; }
.section--dark .numbered p { color: var(--stone); }

/* ---- Contact routes + form ---------------------- */
/* Contact: WhatsApp and phone are the primary booking routes — large,
   high-contrast panels directly under the intro. The form is a secondary
   route below them. */
.contact-primary { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 620px) { .contact-primary { grid-template-columns: 1fr 1fr; } }
.contact-primary__act {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; min-height: 88px; padding: 20px 26px;
  border-radius: var(--radius); text-decoration: none;
  background: var(--onyx); color: var(--linen);
  border: 1px solid var(--onyx);
}
.contact-primary__act:hover { background: #1b201e; }
.contact-primary__act--ghost {
  background: transparent; color: var(--ink); border-color: rgba(23, 26, 24, 0.32);
}
.contact-primary__act--ghost:hover { background: rgba(23, 26, 24, 0.04); }
.contact-primary__icon { width: 22px; height: 22px; color: var(--copper-light); }
.contact-primary__act--ghost .contact-primary__icon { color: var(--copper); }
.contact-primary__label { font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.contact-primary__sub { font-size: 13px; opacity: 0.82; }
/* The form block is centred in the page rail; its heading and intro are
   centred too, but the fields inside stay left-aligned for scanning. */
.contact-secondary { max-width: 560px; margin: clamp(44px, 7vw, 72px) auto 0; text-align: center; }
.contact-secondary > .eyebrow { display: block; }
.contact-secondary form { text-align: left; }
.contact-secondary .form-note { font-size: 12.5px; margin-top: 14px; }

.field { display: block; }
.field + .field { margin-top: 16px; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 48px; margin-top: 8px; padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px;
  background: var(--linen); color: var(--ink);
  border: 1px solid rgba(23, 26, 24, 0.25); border-radius: var(--radius);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
/* Invalid state signalled by more than colour: a 2px border and a
   warning glyph before the message. */
.field--invalid input, .field--invalid textarea {
  border-color: var(--copper-ink); border-width: 2px;
}
.field__error {
  font-size: 12.5px; font-weight: 600; color: var(--copper-ink); margin-top: 6px;
}
.field__error::before { content: "\26A0\FE0E"; margin-right: 6px; }
.length-options, .place-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.length-options button, .place-options button {
  min-height: 48px; padding: 0 22px; border-radius: var(--radius);
  border: 1px solid rgba(23, 26, 24, 0.25); background: transparent;
  color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer;
}
.length-options button[aria-pressed="true"], .place-options button[aria-pressed="true"] { background: var(--copper); border-color: var(--copper); color: var(--onyx); }

/* ---- Info band (payment / cancellation) -------- */
.info-band { background: var(--moss); color: var(--linen); padding: 30px var(--pad-x); }
.info-band__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; gap: 40px; flex-wrap: wrap; justify-content: center;
}
.info-band b { display: block; font-size: 14px; color: var(--linen); }
.info-band span { font-size: 15px; color: var(--stone); }

/* ---- Callout box ------------------------------ */
/* ---- Related links grid --------------------- */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; list-style: none; }
.related a {
  display: block; border: 1px solid var(--line-copper); border-radius: var(--radius);
  padding: 18px 20px; color: inherit; font-weight: 600; font-size: 15px;
  transition: background-color 0.2s ease;
}
.section--dark .related a { color: var(--linen); }
.related a:hover { background: rgba(184, 122, 75, 0.1); color: inherit; }
.related a span { display: block; font-weight: 400; font-size: 13px; margin-top: 4px; color: var(--muted); }
.section--dark .related a span { color: var(--stone); }

/* ---- CTA section (no photo — onyx with copper structure) ---- */
.cta-band {
  position: relative; overflow: hidden; background: var(--onyx); color: var(--linen);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(72px, 11vw, 128px) var(--pad-x); text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; left: 50%; top: clamp(40px, 6vw, 64px);
  transform: translateX(-50%);
  width: min(560px, 76vw); height: 1px; background: var(--copper); opacity: 0.35;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 640px; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 58px); color: var(--linen); }
.cta-band .btn-row { justify-content: center; margin-top: 28px; }
.cta-band__alt { display: inline-block; margin-top: 20px; font-size: 14px; color: var(--stone); }

/* ---- Footer -------------------------------- */
.footer-wave { background: var(--onyx); overflow: hidden; }
.footer-wave svg path { stroke: var(--stone); stroke-width: 1; opacity: 0.14; }
.site-footer { background: var(--onyx); color: var(--stone); padding: 8px var(--pad-x) 32px; }
.site-footer__inner { max-width: var(--wrap); margin-inline: auto; }
.site-footer__grid {
  display: grid; gap: 40px; padding-bottom: 40px;
  grid-template-columns: 1.4fr repeat(4, 1fr);
}
.site-footer__brand p { font-size: 14px; margin-top: 14px; line-height: 1.6; }
.site-footer__h {
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--copper-light); font-weight: 600;
}
.site-footer__h a { color: inherit; }
.site-footer__h a:hover { color: var(--copper-hover); }
.site-footer__col ul { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a { color: var(--stone); font-size: 14px; }
.site-footer__col a:hover { color: var(--copper-light); }
/* "More areas": CSS-only disclosure; every link is in the static markup */
.footer-more { margin-top: 10px; }
.footer-more summary {
  list-style: none; cursor: pointer; font-size: 14px; color: var(--copper-light);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.footer-more summary::-webkit-details-marker { display: none; }
.footer-more summary::after { content: "+"; font-weight: 600; }
.footer-more[open] summary::after { content: "\2013"; }
.footer-more > ul { margin-top: 10px; }
.footer-more__all { display: inline-block; margin-top: 10px; color: var(--stone); font-size: 14px; }
.footer-more__all:hover { color: var(--copper-light); }
.site-footer__contact ul li {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--stone);
}
.site-footer__contact .icon { color: var(--copper); flex-shrink: 0; }
.site-footer__legal { border-top: 1px solid var(--line-on-dark); padding-top: 28px; }
.site-footer__legal p { font-size: 14px; line-height: 1.6; max-width: 820px; opacity: 0.8; }
.site-footer__copy { margin-top: 18px; font-size: 12px; opacity: 0.6; }
@media (max-width: 980px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Floating WhatsApp + mobile bar -------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 28px;
  background: var(--onyx); border: 1px solid var(--copper); color: var(--copper-light);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden; white-space: nowrap;
  opacity: 0; transform: scale(0.7); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease, padding 0.3s ease;
}
.wa-float.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.wa-float:hover { color: var(--copper); }
.wa-float__label { font-size: 14px; color: var(--linen); max-width: 0; opacity: 0; transition: max-width 0.3s ease, opacity 0.3s ease, margin 0.3s ease; }
@media (hover: hover) and (pointer: fine) {
  .wa-float.is-visible:hover { width: 232px; padding-inline: 18px; }
  .wa-float.is-visible:hover .wa-float__label { max-width: 180px; opacity: 1; margin-left: 10px; }
}
@media (max-width: 899px) {
  /* the mobile action bar covers this role below 900px; hide the
     floating circle so it does not double up or overlap the form */
  .wa-float { display: none; }
}

.mobile-bar { display: none; }
@media (max-width: 899px) {
  .mobile-bar {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 95;
    background: rgba(16, 19, 18, 0.95);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-copper-strong);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-bar__link {
    flex: 1; color: var(--linen);
    font-weight: 600; font-size: 14px; padding: 14px 0; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .mobile-bar__link .icon { width: 17px; height: 17px; }
  .mobile-bar__link--wa { color: var(--copper-light); }
  .mobile-bar__link + .mobile-bar__link { border-left: 1px solid var(--line-on-dark); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ---- Wave separator inside light sections -- */
.wave-sep { display: block; margin: 44px 0; opacity: 0.3; }
.wave-sep path { stroke: var(--copper); stroke-width: 1; fill: none; }

/* ---- Reduced motion ---------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .jumpnav__scroll { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__media--zoom img { animation: none; transform: none; }
}