/* Self-hosted fonts (standard P3): latin subset of Playfair Display, Poppins and Playwrite DK Loopet, downloaded from Google Fonts. Regenerate if site.brand.googleFonts changes. */
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/playfair-display-italic-400-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/playfair-display-normal-400-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playwrite DK Loopet'; font-style: normal; font-weight: 100 400; font-display: swap; src: url(/assets/fonts/playwrite-dk-loopet-normal-100-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-italic-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/poppins-normal-300.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-normal-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-normal-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-normal-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Vela Med Spa
   Stylesheet 2 of 10 in the collection. This brand only.

   Written against the Mellis Beauty and Spa kit, whose grammar is not the
   boxed-band grammar the first brand uses. The devices that define it:

     - a transparent masthead with a centred crest stacked over a centred menu
     - a full-height image slider with centred display type, then a solid
       accent ribbon of opening hours overlapping its bottom edge
     - circular imagery, with circular icon discs and badges overlapping it
     - tinted bands that stop part way down, so card rows straddle two grounds
     - botanical line art bleeding off the left and right page edges
     - asymmetric section heads: eyebrow and headline left, standfirst right
     - full-bleed testimonial and parallax bands, escaping the measure
     - white plates that lift over the band above them
     - sharp-cornered flat accent buttons, wide tracking, uppercase

   Naming is deliberately unlike the first brand's. There is no .section,
   .container, .grid--3 or .btn here. Bands are .zone, the measure is .wrap,
   columns are .duo and .trio, buttons are .act. Nothing is shared but data.

   Palette and type still come from the site data file, so a colour or a
   typeface remains a one-line change.
   ========================================================================== */

:root {
  /* ---- Palette, from the brand kit via the site data file ---- */
  --ink: #034A44;
  --rose: #B6C391;
  --sage: #738B31;
  --cream: #F8F6EF;
  --white: #ffffff;

  /* Lettering that sits on a rose fill. Dusty rose is light enough that white
     on it measures 2.13:1, so the foreground on the accent is ink, at 5.90:1.
     A brand with a darker accent flips this one line. */
  --on-rose: #034A44;

  /* Neutrals mix toward cream rather than white, which is what keeps a
     cream-forward page from going grey at the edges. */
  --ink-90: color-mix(in srgb, var(--ink) 90%, var(--cream));
  --ink-72: color-mix(in srgb, var(--ink) 72%, var(--cream));
  /* --ink-72 is the lightest step that clears 4.5:1 on cream, so it is the
     floor for anything a visitor has to read. The two steps below it are for
     rules, dotted leaders and borders, never for type. */
  --ink-58: color-mix(in srgb, var(--ink) 58%, var(--cream));
  --ink-38: color-mix(in srgb, var(--ink) 38%, var(--cream));
  --ink-16: color-mix(in srgb, var(--ink) 16%, var(--cream));
  --ink-08: color-mix(in srgb, var(--ink) 8%, var(--cream));

  /* Dusty rose is too light to carry text on cream, so the type token is a
     deepened mix. 30 percent rose against ink clears 5:1. */
  --rose-ink: color-mix(in srgb, var(--rose) 30%, var(--ink));
  --rose-pale: color-mix(in srgb, var(--rose) 34%, var(--cream));
  --rose-mist: color-mix(in srgb, var(--rose) 15%, var(--cream));
  --sage-ink: color-mix(in srgb, var(--sage) 40%, var(--ink));
  --sage-mist: color-mix(in srgb, var(--sage) 13%, var(--cream));

  --hair: color-mix(in srgb, var(--ink) 12%, transparent);
  --hair-soft: color-mix(in srgb, var(--ink) 7%, transparent);
  --hair-light: color-mix(in srgb, var(--white) 26%, transparent);

  /* ---- Type ---- */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --script: 'Playwrite DK Loopet', 'Playfair Display', Georgia, cursive;

  --type-xs: clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem);
  --type-s: clamp(0.84rem, 0.82rem + 0.1vw, 0.91rem);
  --type-m: clamp(0.98rem, 0.95rem + 0.14vw, 1.06rem);
  --type-l: clamp(1.1rem, 1.04rem + 0.28vw, 1.3rem);
  --type-xl: clamp(1.32rem, 1.2rem + 0.6vw, 1.75rem);
  --type-2xl: clamp(1.6rem, 1.35rem + 1.15vw, 2.5rem);
  --type-3xl: clamp(2rem, 1.6rem + 1.9vw, 3.4rem);
  --type-4xl: clamp(2.5rem, 1.8rem + 3.3vw, 4.6rem);
  --type-script: clamp(3.2rem, 2rem + 6vw, 7.5rem);

  --serif-weight: 500;
  --track-wide: 0.2em;

  /* ---- Rhythm. Named by rank rather than by t-shirt size, so nothing
         reads across from another brand's spacing scale. ---- */
  --gap-1: 0.4rem;
  --gap-2: 0.75rem;
  --gap-3: 1.25rem;
  --gap-4: 2rem;
  --gap-5: 3rem;
  --gap-6: clamp(3.5rem, 2.4rem + 4vw, 5.5rem);
  --gap-7: clamp(5rem, 3.2rem + 7vw, 8.5rem);
  --zone-y: clamp(4.5rem, 3rem + 6vw, 7.5rem);

  --measure: 1200px;
  --measure-tight: 740px;
  --measure-full: 1480px;
  --edge: clamp(1.15rem, 0.7rem + 2.4vw, 3.25rem);

  /* ---- Shape. Imagery is round, controls are sharp. ---- */
  --r-plate: 3px;
  --r-arch: 46% 46% 8% 8% / 34% 34% 4% 4%;

  /* ---- Depth ---- */
  --lift-1: 0 3px 14px -8px color-mix(in srgb, var(--ink) 30%, transparent);
  --lift-2: 0 26px 50px -34px color-mix(in srgb, var(--ink) 42%, transparent);
  --lift-3: 0 40px 80px -40px color-mix(in srgb, var(--ink) 34%, transparent);

  /* ---- Motion. Slower and softer than the first brand's, which is part of
         how the two feel different in the hand. ---- */
  --curve: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curve-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tap: 180ms;
  --glide: 420ms;
  --glide-slow: 820ms;

  /* Focus indicator. Needs 3:1 against the adjacent surface, so dark grounds
     override it below rather than inheriting a ring nobody can see. */
  --focus-ring: var(--rose-ink);

  --crest-h: 118px;
  --crest-h-stuck: 78px;
}

/* The masthead is three stacked rows on a wide screen and two on a narrow
   one, so the height every opener reserves for it is per breakpoint. */
@media (min-width: 62rem) {
  :root { --crest-h: 190px; --crest-h-stuck: 126px; }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--crest-h-stuck) + 1.5rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--type-m);
  line-height: 1.8;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; }
img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }

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

/* Dark grounds. The accent at full strength is 5.90:1 against ink. */
.zone--ink,
.basement,
.reel,
.opener:not(.opener--plain),
.showpiece,
.invite,
.promo,
.plate--ink,
.rail__card--ink,
.masthead[data-overlay]:not(.is-stuck) { --focus-ring: var(--rose); }

/* The action bar has an ink half and a rose half, and each ring is drawn over
   the other one. */
.taps a:first-child { --focus-ring: var(--cream); }
.taps a:last-child { --focus-ring: var(--ink); }

.a11y {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.jump {
  position: absolute; left: 50%; top: 0; z-index: 300;
  transform: translate(-50%, -130%);
  background: var(--ink); color: var(--cream);
  padding: 0.85rem 1.5rem;
  font-size: var(--type-s); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform var(--glide) var(--curve-out);
}
.jump:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, .display, .display-2, .display-3, .display-4 {
  font-family: var(--serif);
  font-weight: var(--serif-weight);
  line-height: 1.16;
  letter-spacing: -0.008em;
}
h1, .display { font-size: var(--type-4xl); line-height: 1.08; }
h2, .display-2 { font-size: var(--type-3xl); }
h3, .display-3 { font-size: var(--type-xl); line-height: 1.28; }
h4, .display-4 { font-size: var(--type-l); line-height: 1.35; }

/* The script is a display face only. It is never asked to carry more than a
   few words, and it always sits beside a sans or serif line that repeats the
   sense, so nothing depends on reading it. */
.flourish {
  font-family: var(--script);
  font-weight: 400;
  font-size: var(--type-script);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: none;
}
.flourish--sm { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1; }
.flourish--xs { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); line-height: 1; }

/* Kicker: the kit's eyebrow, accent coloured, with a rule to its left and
   right when centred and only to its right when it opens a left column. */
.kick {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: var(--sans);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--rose-ink);
  margin: 0;
}
.kick::before,
.kick::after {
  content: "";
  width: 2.2rem; height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}
.kick--lead::before { display: none; }

.stand {
  font-size: var(--type-l);
  line-height: 1.7;
  color: var(--ink-72);
  font-weight: 350;
}

.copy { display: grid; gap: var(--gap-3); color: var(--ink-72); max-width: 68ch; }
.copy strong, .copy b { color: var(--ink); font-weight: 600; }
.copy a {
  color: var(--rose-ink);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.copy a:hover { color: var(--ink); }
.copy h3, .copy h4 { color: var(--ink); margin-top: var(--gap-2); }
.copy ul, .copy ol { display: grid; gap: 0.7rem; }
.copy ul li { position: relative; padding-left: 1.9rem; }
.copy ul li::before {
  content: "";
  position: absolute; left: 0.25rem; top: 0.78em;
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px var(--rose-mist);
}
.copy ol { counter-reset: c; }
.copy ol li { position: relative; padding-left: 2.4rem; counter-increment: c; }
.copy ol li::before {
  content: counter(c, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--serif);
  font-size: 0.95em;
  color: var(--rose-ink);
}
.copy blockquote {
  margin: var(--gap-2) 0;
  padding: var(--gap-3) var(--gap-4);
  background: var(--rose-mist);
  border-left: 2px solid var(--rose);
  font-family: var(--serif);
  font-size: var(--type-l);
  line-height: 1.55;
  color: var(--ink);
}

.tint { color: var(--rose-ink); }
.hush { color: var(--ink-72); font-size: var(--type-s); line-height: 1.65; }

/* --------------------------------------------------------------------------
   Measure and bands
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--edge);
  position: relative;
}
.wrap--tight { max-width: var(--measure-tight); }
.wrap--full { max-width: var(--measure-full); }

.zone {
  position: relative;
  padding-block: var(--zone-y);
  isolation: isolate;
}
.zone--short { padding-block: var(--gap-5); }
.zone--open-top { padding-top: 0; }
.zone--blush { background: var(--rose-mist); }
.zone--sage { background: var(--sage-mist); }
.zone--white { background: var(--white); }
.zone--ink { background: var(--ink); color: var(--cream); }
.zone--ink .kick { color: var(--rose); }
.zone--ink .stand,
.zone--ink .copy { color: color-mix(in srgb, var(--cream) 76%, transparent); }
.zone--ink .hush { color: color-mix(in srgb, var(--cream) 60%, transparent); }

/* The kit's signature ground: a tinted band that stops part way down the
   section, so the card row sitting in it straddles tint and cream. The stop
   is a percentage of the zone, set per instance. */
.zone--half {
  background: linear-gradient(
    to bottom,
    var(--rose-mist) 0 var(--half, 58%),
    transparent var(--half, 58%) 100%
  );
}

/* Botanical line art, bleeding off the page edge. Decorative, aria-hidden in
   the markup, and the first thing to go on a narrow screen. */
.sprig {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  color: var(--rose);
  opacity: 0.5;
  width: clamp(150px, 16vw, 290px);
}
.sprig--left { left: calc(-1 * clamp(30px, 4vw, 70px)); top: 8%; }
.sprig--right { right: calc(-1 * clamp(30px, 4vw, 70px)); bottom: 6%; transform: scaleX(-1); }
.sprig--top-right { right: calc(-1 * clamp(20px, 3vw, 55px)); top: 4%; transform: scaleX(-1); }
.sprig--ink { color: var(--cream); opacity: 0.14; }
.zone--ink .sprig { color: var(--cream); opacity: 0.13; }
@media (max-width: 60rem) { .sprig { display: none; } }

/* Soft organic shape, from the brand kit. Sits behind circular imagery. */
.orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: var(--rose-pale);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Columns
   -------------------------------------------------------------------------- */

.duo { display: grid; gap: var(--gap-5); align-items: center; }
.trio, .pair { display: grid; gap: var(--gap-4); }

@media (min-width: 48rem) {
  .pair { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--gap-6); }
  .duo--wide-left { grid-template-columns: 1.16fr 0.84fr; }
  .duo--wide-right { grid-template-columns: 0.84fr 1.16fr; }
  .duo--aside { grid-template-columns: 1.55fr 1fr; align-items: start; gap: var(--gap-6); }
  .duo--top { align-items: start; }
  .trio { grid-template-columns: repeat(3, 1fr); gap: var(--gap-4); }
}
@media (max-width: 61.999rem) {
  .duo--flip > *:first-child { order: 2; }
}

/* Section heads. Three arrangements, and the split one is the kit's default:
   kicker and headline in the left column, standfirst in the right, baselines
   aligned at the bottom. Nothing about it is centred. */
.head { display: grid; gap: var(--gap-2); margin-bottom: var(--gap-5); }
.head__h { margin: 0; }
.head__note { color: var(--ink-72); font-size: var(--type-m); line-height: 1.75; max-width: 46ch; }

.head--split { gap: var(--gap-3); }
@media (min-width: 62rem) {
  .head--split {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: end;
    gap: var(--gap-6);
    margin-bottom: var(--gap-6);
  }
  .head--split .head__note { padding-bottom: 0.5rem; }
}
.head--mid { justify-items: center; text-align: center; max-width: 44rem; margin-inline: auto; }
.head--mid .head__note { margin-inline: auto; }

.hairline { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* --------------------------------------------------------------------------
   Controls. Sharp-cornered flat fills, wide tracking. The kit has no pills.
   -------------------------------------------------------------------------- */

.act {
  --act-bg: var(--rose);
  --act-fg: var(--on-rose);
  --act-bd: var(--rose);
  --act-hover-bg: var(--ink);
  --act-hover-fg: var(--cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.15em 2.35em;
  border: 1px solid var(--act-bd);
  border-radius: var(--r-plate);
  background: var(--act-bg);
  color: var(--act-fg);
  font-family: var(--sans);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--glide) var(--curve), border-color var(--glide) var(--curve),
    background-color var(--glide) var(--curve);
}
/* The wipe is horizontal here, left to right, rather than a fade. */
.act::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--act-hover-bg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--glide) var(--curve-out);
}
.act:hover::after, .act:focus-visible::after { transform: scaleX(1); }
.act:hover, .act:focus-visible {
  color: var(--act-hover-fg);
  border-color: var(--act-hover-bg);
}

.act--ink {
  --act-bg: var(--ink);
  --act-fg: var(--cream);
  --act-bd: var(--ink);
  --act-hover-bg: var(--rose);
  --act-hover-fg: var(--on-rose);
}
.act--pale {
  --act-bg: var(--white);
  --act-fg: var(--ink);
  --act-bd: var(--white);
  --act-hover-bg: var(--ink);
  --act-hover-fg: var(--cream);
}
.act--line {
  --act-bg: transparent;
  --act-fg: var(--ink);
  --act-bd: var(--ink-38);
  --act-hover-bg: var(--ink);
  --act-hover-fg: var(--cream);
}
.act--onink {
  --act-bg: transparent;
  --act-fg: var(--cream);
  --act-bd: var(--hair-light);
  --act-hover-bg: var(--cream);
  --act-hover-fg: var(--ink);
}
.act--sm { padding: 0.9em 1.5em; font-size: 0.7rem; letter-spacing: 0.13em; }
.act--wide { width: 100%; }

.acts { display: flex; flex-wrap: wrap; gap: var(--gap-2) var(--gap-3); align-items: center; }
.acts--mid { justify-content: center; }

/* Text link with a rule that draws itself from the left on hover. */
.pull {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 0.4em;
}
.pull::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rose);
  transform: scaleX(0.32);
  transform-origin: left center;
  transition: transform var(--glide) var(--curve-out), background-color var(--tap) linear;
}
.pull:hover { color: var(--rose-ink); }
.pull:hover::after { transform: scaleX(1); }
.pull svg { transition: transform var(--glide) var(--curve-out); }
.pull:hover svg { transform: translateX(4px); }
.pull--mid { justify-content: center; }

/* --------------------------------------------------------------------------
   Masthead. Crown line, centred crest, centred menu. Transparent over a
   hero, cream elsewhere, condensed once the page has scrolled.
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  background: var(--cream);
  border-bottom: 1px solid var(--hair-soft);
  transition: background-color var(--glide) var(--curve), border-color var(--glide) var(--curve),
    box-shadow var(--glide) var(--curve);
}
.masthead[data-overlay] {
  background: transparent;
  border-bottom-color: var(--hair-light);
  color: var(--white);
}
.masthead[data-overlay]::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 42%, transparent), transparent);
  transition: opacity var(--glide) var(--curve);
}
.masthead.is-stuck {
  background: var(--cream);
  color: var(--ink);
  border-bottom-color: var(--hair-soft);
  box-shadow: var(--lift-1);
}
.masthead.is-stuck::before { opacity: 0; }

.crown {
  border-bottom: 1px solid var(--hair-soft);
  transition: border-color var(--glide) var(--curve);
}
.masthead[data-overlay] .crown { border-bottom-color: var(--hair-light); }
.crown__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-3);
  min-height: 40px;
  font-size: var(--type-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.crown__claim {
  font-weight: 600;
  text-align: center;
}
.crown__aside { display: none; align-items: center; gap: var(--gap-3); }
.crown__link { display: inline-flex; align-items: center; gap: 0.5em; color: inherit; }
.crown__link:hover { color: var(--rose); }
.crown__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--rose); flex: none; }
@media (min-width: 62rem) {
  .crown__inner { justify-content: space-between; }
  .crown__aside { display: flex; }
  .crown__claim { text-align: left; }
}
.masthead.is-stuck .crown { display: none; }

.masthead__deck {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap-3);
  padding-block: var(--gap-3);
  transition: padding var(--glide) var(--curve);
}
.masthead.is-stuck .masthead__deck { padding-block: 0.65rem; }

.crest {
  grid-column: 2;
  justify-self: center;
  display: block;
  width: clamp(148px, 20vw, 210px);
  color: inherit;
  transition: width var(--glide) var(--curve);
}
.masthead.is-stuck .crest { width: clamp(128px, 15vw, 164px); }
.crest svg { width: 100%; height: auto; }

.masthead__util { display: flex; align-items: center; gap: var(--gap-2); }
.masthead__util--end { justify-self: end; }
.icon-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid transparent;
  border-radius: 50%;
  color: inherit;
  transition: border-color var(--tap) linear, color var(--tap) linear, background-color var(--tap) linear;
}
.icon-act:hover { border-color: currentColor; }
.masthead__call {
  display: none;
  align-items: center;
  gap: 0.55em;
  font-size: var(--type-s);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.masthead__call:hover { color: var(--rose); }
@media (min-width: 75rem) { .masthead__call { display: inline-flex; } }
.masthead__book { display: none; }
@media (min-width: 62rem) { .masthead__book { display: inline-flex; } }

/* The menu row. Centred, hairline above, hidden below the desktop break. */
.menubar { display: none; border-top: 1px solid var(--hair-soft); }
.masthead[data-overlay] .menubar { border-top-color: var(--hair-light); }
@media (min-width: 62rem) { .menubar { display: block; } }
.masthead.is-stuck .menubar { border-top-color: var(--hair-soft); }

.menu {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(0.5rem, 1.4vw, 1.9rem);
}
.menu__item { position: relative; display: flex; }
.menu__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 1.05rem 0.35rem;
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
  transition: color var(--tap) linear;
}
.menu__link svg { transition: transform var(--glide) var(--curve); opacity: 0.7; }
.menu__link::after {
  content: "";
  position: absolute; left: 0.35rem; right: 0.35rem; bottom: 0.7rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--glide) var(--curve-out);
}
.menu__item:hover > .menu__link,
.menu__link[aria-current="page"] { color: var(--rose); }
.menu__item:hover > .menu__link::after,
.menu__link[aria-current="page"]::after { transform: scaleX(1); }
.menu__item:hover > .menu__link svg { transform: rotate(180deg); }

/* Dropdown, not a mega panel: a compact card of treatment names with their
   starting prices ranged right. */
.drop {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 12px);
  min-width: 21rem;
  padding: var(--gap-3);
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--hair-soft);
  border-top: 2px solid var(--rose);
  box-shadow: var(--lift-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--glide) var(--curve), transform var(--glide) var(--curve),
    visibility var(--glide) step-end;
}
.menu__item:hover .drop,
.menu__item:focus-within .drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--glide) var(--curve), transform var(--glide) var(--curve),
    visibility 0s;
}
.drop--pair { min-width: 40rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap-4); }
.drop__group + .drop__group { margin-top: var(--gap-3); }
.drop--pair .drop__group + .drop__group { margin-top: 0; }
.drop__title {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--rose-ink);
  padding-bottom: 0.55rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--hair-soft);
}
.drop__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-2);
  padding: 0.42rem 0;
  font-size: var(--type-s);
  transition: color var(--tap) linear, padding-left var(--tap) linear;
}
.drop__link:hover { color: var(--rose-ink); padding-left: 0.3rem; }
.drop__from {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-72);
  white-space: nowrap;
}
.drop__all {
  display: block;
  margin-top: var(--gap-2);
  padding-top: var(--gap-2);
  border-top: 1px solid var(--hair-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-ink);
}

/* Burger, and the full-screen cream panel it opens. */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  color: inherit;
}
@media (min-width: 62rem) { .burger { display: none; } }
.burger span {
  display: block; height: 1.5px; width: 22px;
  margin-inline: auto;
  background: currentColor;
  transition: transform var(--glide) var(--curve-out), opacity var(--tap) linear;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.panel {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: grid;
  align-content: start;
  gap: var(--gap-3);
  padding: calc(var(--crest-h) + var(--gap-4)) var(--edge) var(--gap-6);
  background: var(--cream);
  color: var(--ink);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity var(--glide) var(--curve), transform var(--glide) var(--curve),
    visibility var(--glide) step-end;
}
.panel.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--glide) var(--curve), transform var(--glide) var(--curve), visibility 0s;
}
@media (min-width: 62rem) { .panel { display: none; } }
.panel__link {
  display: block;
  font-family: var(--serif);
  font-size: var(--type-xl);
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--hair-soft);
}
.panel__fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  font-family: var(--serif);
  font-size: var(--type-xl);
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--hair-soft);
  cursor: pointer;
  list-style: none;
}
.panel__fold > summary::-webkit-details-marker { display: none; }
.panel__fold[open] > summary { color: var(--rose-ink); }
.panel__fold > summary svg { transition: transform var(--glide) var(--curve); flex: none; }
.panel__fold[open] > summary svg { transform: rotate(180deg); }
.panel__sub { display: grid; gap: 0.1rem; padding: var(--gap-2) 0 var(--gap-3) var(--gap-2); }
.panel__sub a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-2);
  padding: 0.4rem 0;
  font-size: var(--type-s);
  color: var(--ink-72);
}
.panel__foot { display: grid; gap: var(--gap-2); margin-top: var(--gap-3); }

/* --------------------------------------------------------------------------
   Reel. The hero slider: full height, centred display type, slow zoom on the
   live frame, dots beneath, arrows at the edges.
   -------------------------------------------------------------------------- */

.reel {
  position: relative;
  min-height: min(100svh, 900px);
  display: grid;
  isolation: isolate;
  background: var(--ink);
}

.reel__pane {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: calc(var(--crest-h) + var(--gap-6)) var(--edge) calc(var(--gap-7) + 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--curve), visibility 900ms step-end;
}
.reel__pane.is-live {
  opacity: 1; visibility: visible;
  transition: opacity 900ms var(--curve), visibility 0s;
}
.reel__shot { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.reel__shot img { width: 100%; height: 100%; object-fit: cover; }
.reel__pane.is-live .reel__shot img { animation: creep 11s var(--curve) forwards; }
@keyframes creep {
  from { transform: scale(1.005); }
  to { transform: scale(1.09); }
}
.reel__shot::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 46%, transparent), color-mix(in srgb, var(--ink) 22%, transparent) 45%, color-mix(in srgb, var(--ink) 58%, transparent)),
    color-mix(in srgb, var(--ink) 10%, transparent);
}

.reel__say {
  position: relative;
  z-index: 1;
  max-width: 54rem;
  text-align: center;
  color: var(--white);
  display: grid;
  justify-items: center;
  gap: var(--gap-3);
}
.reel__say .kick { color: color-mix(in srgb, var(--white) 90%, var(--rose)); }
.reel__lead {
  font-family: var(--sans);
  font-size: var(--type-s);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin: 0;
}
.reel__h { margin: 0; color: var(--white); }
.reel__h .flourish { display: block; }
.reel__h .reel__plain {
  display: block;
  font-family: var(--serif);
  font-size: var(--type-xl);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.reel__note {
  max-width: 40rem;
  font-size: var(--type-m);
  line-height: 1.75;
  color: color-mix(in srgb, var(--white) 84%, transparent);
}
.reel__say .acts { margin-top: var(--gap-2); }

.reel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  transform: translateY(-50%);
  color: var(--white);
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  transition: background-color var(--glide) var(--curve), color var(--glide) var(--curve),
    border-color var(--glide) var(--curve);
}
.reel__arrow:hover { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }
.reel__arrow--back { left: clamp(0.75rem, 2vw, 2.5rem); }
.reel__arrow--on { right: clamp(0.75rem, 2vw, 2.5rem); }
@media (min-width: 62rem) { .reel__arrow { display: inline-flex; } }

.reel__dots {
  position: absolute;
  left: 50%; bottom: calc(var(--gap-6) + 1.5rem);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.7rem;
}
.reel__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 45%, transparent);
  transition: background-color var(--glide) var(--curve), transform var(--glide) var(--curve);
}
.reel__dot[aria-current="true"] { background: var(--rose); transform: scale(1.45); }

/* --------------------------------------------------------------------------
   Ribbon. Solid accent panel overlapping the bottom edge of the reel.
   -------------------------------------------------------------------------- */

.ribbon-hold { position: relative; z-index: 10; margin-top: clamp(-6.5rem, -5vw, -3.5rem); }
.ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-3) clamp(1rem, 2.5vw, 2.75rem);
  padding: var(--gap-4) clamp(1.25rem, 3vw, 3.25rem);
  background: var(--rose);
  color: var(--on-rose);
  box-shadow: var(--lift-2);
}
.ribbon__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--on-rose);
  margin: 0;
  flex: 0 0 auto;
}
.ribbon__cell { display: grid; gap: 0.15rem; flex: 1 1 auto; min-width: 8.5rem; }
.ribbon__when {
  font-size: var(--type-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-rose);
  opacity: 0.9;
}
.ribbon__hrs { font-family: var(--serif); font-size: var(--type-l); line-height: 1.3; }
@media (min-width: 55rem) {
  .ribbon__cell {
    border-left: 1px solid color-mix(in srgb, var(--on-rose) 26%, var(--rose));
    padding-left: clamp(1rem, 2.5vw, 2.75rem);
  }
}

/* --------------------------------------------------------------------------
   Press bar. MMW standard, in the kit's flat centred style.
   -------------------------------------------------------------------------- */

.press { padding-block: var(--gap-5); background: var(--white); }
.press__lead {
  text-align: center;
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-72);
  margin-bottom: var(--gap-3);
}
.press__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.press__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter var(--glide) var(--curve), opacity var(--glide) var(--curve);
}
/* Aspect ratios across these files run from 0.86 to 9.7. Each mark is sized
   by its own scale factor against the box height rather than being forced to
   one height, so the wide wordmarks do not swamp the round marks. Sizing it
   here rather than with a transform keeps the laid-out width honest, which is
   what the flex gap spaces off. */
.press__mark img, .press__mark svg {
  width: auto;
  height: auto;
  max-height: calc(30px * var(--logo-scale, 1));
  max-width: 100%;
  object-fit: contain;
}
.press__mark:hover { filter: none; opacity: 1; }
.press__word {
  font-family: var(--serif);
  font-size: var(--type-l);
  letter-spacing: 0.06em;
  color: var(--ink-72);
}
.press__note {
  margin-top: var(--gap-3);
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-72);
  max-width: 62ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Welcome. Circular portrait with an orb behind it, a signature under the
   copy, a tick list, and a small accent posy.
   -------------------------------------------------------------------------- */

.disc-set { position: relative; padding: clamp(1rem, 3vw, 2.5rem); }
.disc {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--lift-3);
}
.disc img { width: 100%; height: 100%; object-fit: cover; }
.disc-set__orb-a { width: 42%; aspect-ratio: 1; top: 0; left: 0; }
.disc-set__orb-b {
  width: 30%; aspect-ratio: 1; right: 2%; bottom: 4%;
  background: var(--rose);
  opacity: 0.85;
}
.disc-set__chip {
  position: absolute;
  z-index: 2;
  right: 0; bottom: 8%;
  display: grid;
  gap: 0.1rem;
  padding: 1rem 1.35rem;
  background: var(--white);
  box-shadow: var(--lift-2);
  text-align: center;
}
.disc-set__chip strong {
  font-family: var(--serif);
  font-size: var(--type-xl);
  font-weight: var(--serif-weight);
  color: var(--rose-ink);
  line-height: 1;
}
.disc-set__chip span {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-72);
}

.ticks { display: grid; gap: 0.85rem; margin-top: var(--gap-3); }
.ticks li { display: flex; align-items: flex-start; gap: 0.8rem; font-weight: 500; }
.ticks svg { flex: none; margin-top: 0.42em; color: var(--rose); }

.sign {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  margin-top: var(--gap-4);
  flex-wrap: wrap;
}
.sign__face {
  width: 74px; height: 74px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--rose);
  padding: 3px;
  flex: none;
}
.sign__face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sign__name { display: grid; gap: 0.1rem; }
.sign__name .flourish--sm { color: var(--ink); }
.sign__role {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.sign__tile {
  margin-left: auto;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1rem 1.4rem;
  background: var(--rose-mist);
  text-align: center;
  color: var(--rose-ink);
}
.sign__tile span {
  font-family: var(--serif);
  font-size: var(--type-m);
  line-height: 1.35;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Menu cards. White plate, circular image, icon disc overlapping it, centred
   text, hairline, then the read-on link.
   -------------------------------------------------------------------------- */

.posy {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-4) var(--gap-3) var(--gap-3);
  background: var(--white);
  text-align: center;
  box-shadow: var(--lift-1);
  transition: box-shadow var(--glide) var(--curve), transform var(--glide) var(--curve);
}
.posy::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--glide) var(--curve-out);
}
.posy:hover { box-shadow: var(--lift-2); transform: translateY(-5px); }
.posy:hover::before { transform: scaleX(1); }

.posy__disc {
  position: relative;
  width: clamp(140px, 42%, 178px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.posy__disc img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curve); }
.posy:hover .posy__disc img { transform: scale(1.07); }
.posy__badge {
  position: absolute;
  z-index: 2;
  right: calc(50% - clamp(70px, 21%, 89px) - 6px);
  bottom: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--on-rose);
  box-shadow: 0 0 0 5px var(--white);
  transition: background-color var(--glide) var(--curve), transform var(--glide) var(--curve);
}
.posy:hover .posy__badge { background: var(--ink); transform: rotate(-8deg); }
.posy__title { margin: 0; }
.posy__text { color: var(--ink-72); font-size: var(--type-s); line-height: 1.75; }
.posy__from {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rose-ink);
}
.posy__foot {
  margin-top: auto;
  padding-top: var(--gap-3);
  width: 100%;
  border-top: 1px solid var(--hair-soft);
}
.posy__link { position: absolute; inset: 0; }
.posy__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --------------------------------------------------------------------------
   Promo pair. Image banner, round percentage disc, flat white button.
   -------------------------------------------------------------------------- */

.promo {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--gap-3);
  min-height: 340px;
  padding: var(--gap-4);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}
.promo__shot { position: absolute; inset: 0; z-index: -2; }
.promo__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curve); }
.promo:hover .promo__shot img { transform: scale(1.06); }
.promo__shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ink) 62%, transparent), color-mix(in srgb, var(--ink) 18%, transparent));
}
.promo__h { margin: 0; color: var(--white); max-width: 18ch; }
.promo__note { font-size: var(--type-s); color: color-mix(in srgb, var(--white) 82%, transparent); max-width: 34ch; }
.promo__disc {
  position: absolute;
  top: var(--gap-4); right: var(--gap-4);
  z-index: 2;
  display: grid;
  place-content: center;
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--on-rose);
  text-align: center;
  line-height: 1.05;
  box-shadow: var(--lift-2);
}
.promo__disc strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: var(--serif-weight);
}
.promo__disc span { display: block; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; }
.promo .acts { margin-top: 0.35rem; }

/* --------------------------------------------------------------------------
   Tally. Counters on ink.
   -------------------------------------------------------------------------- */

.tally { display: grid; gap: var(--gap-4) var(--gap-3); text-align: center; }
@media (min-width: 40rem) { .tally { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .tally { grid-template-columns: repeat(4, 1fr); } }
.tally__cell { display: grid; gap: 0.3rem; justify-items: center; position: relative; }
@media (min-width: 62rem) {
  .tally__cell + .tally__cell::before {
    content: "";
    position: absolute; left: calc(-0.5 * var(--gap-3)); top: 12%; bottom: 12%;
    width: 1px;
    background: color-mix(in srgb, var(--cream) 22%, transparent);
  }
}
.tally__fig {
  font-family: var(--serif);
  font-size: var(--type-3xl);
  font-weight: var(--serif-weight);
  line-height: 1;
  color: var(--rose);
}
.tally__label {
  font-size: var(--type-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}

/* --------------------------------------------------------------------------
   Path. The numbered process, laid out as a horizontal run with a hairline
   through the numerals rather than as a card row.
   -------------------------------------------------------------------------- */

.path { display: grid; gap: var(--gap-4); position: relative; }
@media (min-width: 62rem) {
  .path { grid-template-columns: repeat(var(--steps, 3), 1fr); gap: var(--gap-4); }
  .path::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: 27px;
    height: 1px;
    background: var(--hair);
  }
}
.path__step { display: grid; gap: var(--gap-2); justify-items: start; position: relative; }
.path__num {
  display: inline-grid;
  place-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--rose);
  color: var(--rose-ink);
  font-family: var(--serif);
  font-size: var(--type-l);
  line-height: 1;
  transition: background-color var(--glide) var(--curve), color var(--glide) var(--curve);
}
.zone--white .path__num, .zone--blush .path__num { background: var(--white); }
.path__step:hover .path__num { background: var(--rose); color: var(--on-rose); }
.path__title { margin: 0; }
.path__text { color: var(--ink-72); font-size: var(--type-s); line-height: 1.75; }

/* --------------------------------------------------------------------------
   Voices. Full-bleed testimonial: large portrait disc with a quote badge, a
   row of small faces to switch between them, the quote set large in serif.
   -------------------------------------------------------------------------- */

.voices {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 12% 20%, color-mix(in srgb, var(--rose) 26%, transparent), transparent 70%),
    radial-gradient(50% 60% at 88% 80%, color-mix(in srgb, var(--sage) 24%, transparent), transparent 72%),
    var(--cream);
}
.voices__grid { display: grid; gap: var(--gap-4); align-items: center; }
@media (min-width: 62rem) { .voices__grid { grid-template-columns: 0.62fr 1.38fr; gap: var(--gap-6); } }

.voices__face { position: relative; width: min(280px, 74%); margin-inline: auto; }
.voices__face .disc { box-shadow: var(--lift-2); }
.voices__deck { display: grid; }
.voices__shot {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: opacity 540ms var(--curve), transform 540ms var(--curve), visibility 540ms step-end;
}
.voices__shot.is-live {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 540ms var(--curve), transform 540ms var(--curve), visibility 0s;
}
.voices__mark {
  position: absolute;
  right: -6px; top: 12%;
  z-index: 2;
  display: grid;
  place-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--on-rose);
  box-shadow: 0 0 0 6px var(--cream);
}
.voices__switch {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: var(--gap-3);
}
.voices__pick {
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid transparent;
  padding: 2px;
  opacity: 0.55;
  transition: opacity var(--glide) var(--curve), border-color var(--glide) var(--curve),
    transform var(--glide) var(--curve);
}
.voices__pick img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.voices__pick[aria-current="true"] { opacity: 1; border-color: var(--rose); transform: scale(1.12); }
.voices__pick:hover { opacity: 1; }

.voices__stack { position: relative; display: grid; }
.voices__say {
  grid-area: 1 / 1;
  display: grid;
  gap: var(--gap-3);
  justify-items: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 540ms var(--curve), transform 540ms var(--curve), visibility 540ms step-end;
}
.voices__say.is-live {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 540ms var(--curve), transform 540ms var(--curve), visibility 0s;
}
.voices__stars { display: inline-flex; gap: 0.2rem; color: var(--rose); }
.voices__quote {
  font-family: var(--serif);
  font-size: var(--type-2xl);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.005em;
  margin: 0;
}
.voices__who { display: grid; gap: 0.1rem; }
.voices__whoname { font-weight: 600; }
.voices__meta { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-72); }
.voices__dots { display: flex; gap: 0.6rem; margin-top: var(--gap-2); }
.voices__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-16);
  transition: background-color var(--glide) var(--curve), transform var(--glide) var(--curve);
}
.voices__dot[aria-current="true"] { background: var(--rose); transform: scale(1.4); }

/* Monogram disc. Stands in for a portrait wherever a person is fictional,
   which is every review in this build. */
.mono {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rose-pale);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--type-m);
  letter-spacing: 0.06em;
  line-height: 1;
}
.mono--lg { font-size: var(--type-3xl); background: var(--rose-mist); color: var(--rose-ink); }

.score {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1.2rem;
  background: var(--white);
  box-shadow: var(--lift-1);
}
.score__num {
  font-family: var(--serif);
  font-size: var(--type-xl);
  line-height: 1;
  color: var(--rose-ink);
}
.score__of { font-size: var(--type-xs); line-height: 1.4; color: var(--ink-72); }

/* --------------------------------------------------------------------------
   Showpiece. Full-bleed image band, outlined heading box, and a white plate
   of pillars lifted over its bottom edge.
   -------------------------------------------------------------------------- */

.showpiece {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(66svh, 560px);
  padding: var(--gap-7) var(--edge) calc(var(--gap-7) + 4rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--white);
}
.showpiece__shot { position: absolute; inset: 0; z-index: -2; }
.showpiece__shot img { width: 100%; height: 100%; object-fit: cover; }
.showpiece__shot::after {
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 48%, transparent);
}
.showpiece__box {
  display: grid;
  justify-items: center;
  gap: var(--gap-3);
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 5vw, 4.5rem);
  border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
}
.showpiece__h { margin: 0; color: var(--white); }

.plate {
  position: relative;
  z-index: 5;
  background: var(--white);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  box-shadow: var(--lift-2);
}
.plate--lift { margin-top: clamp(-5.5rem, -4vw, -3rem); }
.plate--ink { background: var(--ink); color: var(--cream); }

.pillars { display: grid; gap: var(--gap-4); }
@media (min-width: 55rem) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--gap-4); } }
.pillars__item { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--gap-2); align-items: start; }
.pillars__tick {
  display: grid; place-content: center;
  width: 34px; height: 34px;
  background: var(--rose-mist);
  color: var(--rose-ink);
  grid-row: span 2;
}
.pillars__title { margin: 0; font-family: var(--serif); font-size: var(--type-l); }
.pillars__text { color: var(--ink-72); font-size: var(--type-s); line-height: 1.7; grid-column: 2; }

/* --------------------------------------------------------------------------
   Dispatch. Journal cards, white body lifted over the image, accent date.
   -------------------------------------------------------------------------- */

.dispatch { position: relative; height: 100%; display: flex; flex-direction: column; }
.dispatch__shot { position: relative; overflow: hidden; }
.dispatch__shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1.2s var(--curve);
}
.dispatch:hover .dispatch__shot img { transform: scale(1.05); }
.dispatch__date {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 0.6rem 0.9rem;
  background: var(--rose);
  color: var(--on-rose);
  line-height: 1.15;
  text-align: center;
}
.dispatch__day { font-family: var(--serif); font-size: var(--type-l); }
.dispatch__mon { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.dispatch__body {
  position: relative;
  z-index: 3;
  margin: -2.75rem clamp(0.75rem, 2vw, 1.5rem) 0;
  padding: var(--gap-3);
  background: var(--white);
  box-shadow: var(--lift-1);
  display: grid;
  gap: 0.6rem;
  text-align: center;
  flex: 1;
  transition: box-shadow var(--glide) var(--curve);
}
.dispatch:hover .dispatch__body { box-shadow: var(--lift-2); }
.dispatch__meta {
  display: flex;
  justify-content: center;
  gap: var(--gap-2);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.dispatch__h { margin: 0; font-size: var(--type-l); }
.dispatch__text { color: var(--ink-72); font-size: var(--type-s); line-height: 1.7; }
.dispatch__foot { margin-top: auto; padding-top: 0.5rem; }
.dispatch__link { position: absolute; inset: 0; z-index: 4; }
.dispatch__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --------------------------------------------------------------------------
   Reach. Contact split: numerals beside a small image on the left, an
   elevated form plate on the right.
   -------------------------------------------------------------------------- */

.reach { display: grid; gap: var(--gap-5); align-items: start; }
@media (min-width: 62rem) { .reach { grid-template-columns: 1fr 1.05fr; gap: var(--gap-6); } }

.figures { display: grid; gap: var(--gap-3); margin-top: var(--gap-4); }
@media (min-width: 40rem) { .figures { grid-template-columns: auto 1fr; align-items: center; gap: var(--gap-4); } }
.figures__shot { overflow: hidden; }
.figures__shot img { width: 100%; max-width: 210px; aspect-ratio: 4 / 3; object-fit: cover; }
.figures__list { display: grid; gap: var(--gap-2); }
.figures__row { display: grid; gap: 0; padding-bottom: var(--gap-2); border-bottom: 1px solid var(--hair); }
.figures__row:last-child { border-bottom: 0; padding-bottom: 0; }
.figures__num {
  font-family: var(--serif);
  font-size: var(--type-3xl);
  font-weight: var(--serif-weight);
  line-height: 1;
  color: var(--rose);
}
.figures__label { font-size: var(--type-s); color: var(--ink-72); }

/* Fields. Flat tinted wells, no border until focus. */
.well { display: grid; gap: 0.45rem; }
.well > span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.well input, .well select, .well textarea {
  width: 100%;
  padding: 1rem 1.15rem;
  background: var(--rose-mist);
  border: 1px solid transparent;
  border-radius: var(--r-plate);
  font-size: var(--type-s);
  transition: background-color var(--tap) linear, border-color var(--tap) linear;
}
.well textarea { min-height: 8.5rem; resize: vertical; }
.well input:focus, .well select:focus, .well textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--rose);
}
.sheet { display: grid; gap: var(--gap-3); }
@media (min-width: 40rem) {
  .sheet--split { grid-template-columns: 1fr 1fr; }
  .sheet--split .well--wide { grid-column: 1 / -1; }
}
.sheet__note { font-size: 0.72rem; line-height: 1.6; color: var(--ink-72); }
.sheet__note a { color: var(--rose-ink); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Strip. Edge-to-edge image run with arrows, escaping the measure.
   -------------------------------------------------------------------------- */

.strip { position: relative; }
.strip__rail {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.strip__rail::-webkit-scrollbar { display: none; }
.strip__cell {
  flex: 0 0 min(84%, 33.3333%);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}
.strip__cell img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 1.3s var(--curve); }
.strip__cell:hover img { transform: scale(1.06); }
.strip__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 70%, transparent), transparent);
  color: var(--white);
  font-size: var(--type-s);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--glide) var(--curve), transform var(--glide) var(--curve);
}
.strip__cell:hover .strip__cap { opacity: 1; transform: none; }
.strip__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  transform: translateY(-50%);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--lift-1);
  transition: background-color var(--glide) var(--curve), color var(--glide) var(--curve);
}
.strip__arrow:hover { background: var(--rose); color: var(--on-rose); }
.strip__arrow--back { left: 0.5rem; }
.strip__arrow--on { right: 0.5rem; }

/* --------------------------------------------------------------------------
   Treatment menu list. A spa card with leader dots, used instead of a second
   card grid wherever a full list of treatments belongs.
   -------------------------------------------------------------------------- */

.listing { display: grid; gap: var(--gap-4); }
@media (min-width: 55rem) { .listing { grid-template-columns: repeat(2, 1fr); gap: var(--gap-4) var(--gap-6); } }
.listing__group { display: grid; gap: 0.35rem; align-content: start; }
.listing__title {
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--rose-ink);
  padding-bottom: 0.7rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--hair);
}
.listing__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.listing__row:hover .listing__name { color: var(--rose-ink); }
.listing__name { font-size: var(--type-s); transition: color var(--tap) linear; }
.listing__leader {
  border-bottom: 1px dotted var(--ink-38);
  transform: translateY(-0.28em);
}
.listing__price { font-size: var(--type-s); font-weight: 600; color: var(--ink-72); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Person cards, in the kit's circular idiom.
   -------------------------------------------------------------------------- */

.person { display: grid; gap: var(--gap-2); justify-items: center; text-align: center; position: relative; }
.person__disc {
  position: relative;
  width: min(240px, 82%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--lift-1);
}
.person__disc img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curve); }
.person:hover .person__disc img { transform: scale(1.06); }
.person__disc::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--rose);
  transform: scale(1.06);
  opacity: 0;
  transition: opacity var(--glide) var(--curve), transform var(--glide) var(--curve);
}
.person:hover .person__disc::after { opacity: 1; transform: scale(1.045); }
.person__name { margin: 0; font-size: var(--type-l); }
.person__role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-ink);
}
.person__creds { font-size: var(--type-s); color: var(--ink-72); }
.person__link { position: absolute; inset: 0; }
.person__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --------------------------------------------------------------------------
   Seals. Association strip.
   -------------------------------------------------------------------------- */

.seals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 3rem);
}
.seal {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  max-width: 12rem;
  color: var(--ink-72);
  transition: color var(--glide) var(--curve);
}
.seal:hover { color: var(--ink); }
.seal__mark {
  display: grid;
  place-content: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 1px solid var(--rose);
  color: var(--rose-ink);
  font-family: var(--serif);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: background-color var(--glide) var(--curve), color var(--glide) var(--curve);
}
.seal:hover .seal__mark { background: var(--rose); color: var(--on-rose); }

/* A supplied logo gets a card rather than the ring. These wordmarks run up to
   seven to one, which no 66px circle can carry, and two of the files are
   flattened onto white, so a white card is what makes them sit cleanly on the
   cream page instead of showing their own edges. */
.seal__mark--logo {
  width: 148px;
  height: 68px;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: var(--white);
  border-color: var(--hair);
}
.seal:hover .seal__mark--logo { background: var(--white); border-color: var(--rose); }
.seal__mark--logo img {
  width: auto;
  height: auto;
  max-height: calc(44px * var(--logo-scale, 1));
  max-width: 100%;
  object-fit: contain;
}
.seal__name { font-size: 0.72rem; line-height: 1.5; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   AEO furniture on treatment pages: the fact bar, the answer-first block,
   the candidacy split, the comparison table, the question list.
   -------------------------------------------------------------------------- */

.factbar {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
@media (min-width: 40rem) { .factbar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .factbar { grid-template-columns: repeat(4, 1fr); } }
.factbar__cell {
  display: grid;
  gap: 0.3rem;
  padding: var(--gap-3);
  background: var(--white);
}
.factbar__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-ink);
}
.factbar__value { font-family: var(--serif); font-size: var(--type-l); line-height: 1.3; }

.reply {
  position: relative;
  padding: var(--gap-4);
  background: var(--rose-mist);
  border-left: 3px solid var(--rose);
}
.reply__q { margin: 0 0 var(--gap-2); }
.reply__a { font-size: var(--type-l); line-height: 1.7; color: var(--ink); margin: 0; }

.fit { display: grid; gap: var(--gap-3); }
@media (min-width: 55rem) { .fit { grid-template-columns: repeat(2, 1fr); gap: var(--gap-4); } }
.fit__col { padding: var(--gap-3); background: var(--white); box-shadow: var(--lift-1); }
.fit__col--yes { border-top: 3px solid var(--sage); }
.fit__col--no { border-top: 3px solid var(--rose); }
.fit__h { margin: 0 0 var(--gap-2); font-size: var(--type-l); }
.fit__list { display: grid; gap: 0.7rem; }
.fit__list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--type-s); line-height: 1.7; }
.fit__list svg { flex: none; margin-top: 0.4em; }
.fit__col--yes svg { color: var(--sage-ink); }
.fit__col--no svg { color: var(--rose-ink); }

.slate {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--hair);
  background: var(--white);
}
.slate table { min-width: 34rem; }
.slate th, .slate td {
  padding: 0.95rem 1.15rem;
  text-align: left;
  font-size: var(--type-s);
  border-bottom: 1px solid var(--hair-soft);
}
.slate th {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rose-ink);
  background: var(--rose-mist);
}
.slate tbody tr:last-child td { border-bottom: 0; }
.slate td:first-child { font-weight: 600; }

.qa { display: grid; gap: 0.75rem; }
.qa__item { background: var(--white); border: 1px solid var(--hair-soft); }
.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  width: 100%;
  padding: 1.15rem var(--gap-3);
  text-align: left;
  font-family: var(--serif);
  font-size: var(--type-l);
  line-height: 1.4;
  transition: color var(--tap) linear;
}
.qa__q:hover { color: var(--rose-ink); }
.qa__sign {
  display: grid; place-content: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--rose-mist);
  color: var(--rose-ink);
  transition: background-color var(--glide) var(--curve), color var(--glide) var(--curve),
    transform var(--glide) var(--curve);
}
.qa__q[aria-expanded="true"] .qa__sign { background: var(--rose); color: var(--on-rose); transform: rotate(135deg); }
/* Answers are open by default and only collapsed once scripting is
   confirmed, so a script failure leaves every answer readable rather than
   sealing the FAQ shut. */
.qa__a { display: grid; grid-template-rows: 1fr; }
.js .qa__a {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--glide) var(--curve);
}
.js .qa__q[aria-expanded="true"] + .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p {
  padding: 0 var(--gap-3) var(--gap-3);
  color: var(--ink-72);
  font-size: var(--type-s);
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   Wipe. Before and after, pointer and keyboard operable.
   -------------------------------------------------------------------------- */

.wipe { display: grid; gap: 0.75rem; }
.wipe__frame {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  background: var(--ink-08);
}
.wipe__frame img { width: 100%; aspect-ratio: var(--wipe-ratio, 4 / 5); object-fit: cover; }
.wipe__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split, 50%)); }
.wipe__bar {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: var(--white);
  transform: translateX(-1px);
  pointer-events: none;
}
.wipe__bar::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--lift-1);
}
.wipe__tag {
  position: absolute;
  top: 0.75rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  color: var(--white);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wipe__tag--b { left: 0.75rem; }
.wipe__tag--a { right: 0.75rem; background: var(--rose); color: var(--on-rose); }
.wipe__cap { font-size: var(--type-s); color: var(--ink-72); }
.wipe__cap strong { display: block; color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Page opener for inner pages: a short image band with the crumb trail.
   -------------------------------------------------------------------------- */

.opener {
  position: relative;
  padding: calc(var(--crest-h) + var(--gap-6)) var(--edge) var(--gap-6);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  text-align: center;
  background: var(--ink);
}
.opener__shot { position: absolute; inset: 0; z-index: -2; }
.opener__shot img { width: 100%; height: 100%; object-fit: cover; }
.opener__shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 58%, transparent), color-mix(in srgb, var(--ink) 42%, transparent));
}
.opener__inner {
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  gap: var(--gap-2);
  justify-items: center;
}
.opener__h { margin: 0; color: var(--white); }
.opener__note { color: color-mix(in srgb, var(--white) 84%, transparent); max-width: 46ch; font-size: var(--type-m); }
.opener--plain { background: var(--rose-mist); color: var(--ink); text-align: left; }
.opener--plain .opener__inner { justify-items: start; margin-inline: 0; }
.opener--plain .opener__h { color: var(--ink); }
.opener--plain .opener__note { color: var(--ink-72); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 76%, transparent);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; opacity: 0.6; }
.opener--plain .crumbs { color: var(--ink-72); justify-content: flex-start; }

/* Sticky in-page rail on treatment pages. */
.rail { display: grid; gap: var(--gap-3); }
@media (min-width: 62rem) { .rail { position: sticky; top: calc(var(--crest-h-stuck) + var(--gap-3)); } }
.rail__card { padding: var(--gap-3); background: var(--white); box-shadow: var(--lift-1); display: grid; gap: var(--gap-2); }
.rail__card--ink { background: var(--ink); color: var(--cream); }
.rail__h { margin: 0; font-size: var(--type-l); }
.rail__list { display: grid; gap: 0.4rem; font-size: var(--type-s); }
.rail__list a, .rail__row { display: flex; justify-content: space-between; gap: var(--gap-2); padding: 0.3rem 0; color: var(--ink-72); }
.rail__list a:hover { color: var(--rose-ink); }

/* --------------------------------------------------------------------------
   Basement. Dark footer: contact lines set large, newsletter, three columns
   including Timing, map, then the legal rule.
   -------------------------------------------------------------------------- */

.basement {
  position: relative;
  background: var(--ink);
  color: color-mix(in srgb, var(--cream) 80%, transparent);
  overflow: hidden;
}
.basement a { color: inherit; }
.basement__signup {
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  padding-block: var(--gap-5);
}
.basement__signup-grid { display: grid; gap: var(--gap-3); align-items: center; }
@media (min-width: 55rem) { .basement__signup-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--gap-5); } }
.basement__signup-h { margin: 0; color: var(--cream); }
.signup { position: relative; display: flex; }
.signup input {
  flex: 1;
  padding: 1.1rem 3.6rem 1.1rem 1.25rem;
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  color: var(--cream);
  font-size: var(--type-s);
}
.signup input::placeholder { color: color-mix(in srgb, var(--cream) 45%, transparent); }
.signup input:focus { outline: none; border-color: var(--rose); background: color-mix(in srgb, var(--cream) 12%, transparent); }
.signup button {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 54px;
  display: grid;
  place-content: center;
  background: var(--rose);
  color: var(--on-rose);
  transition: background-color var(--glide) var(--curve);
}
.signup button:hover { background: var(--cream); color: var(--ink); }

.basement__main { padding-block: var(--gap-6); display: grid; gap: var(--gap-5); }
@media (min-width: 55rem) { .basement__main { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--gap-5); } }
@media (min-width: 75rem) { .basement__main { grid-template-columns: 1.35fr 0.8fr 0.9fr 1.1fr; } }

.basement__lines { display: grid; gap: var(--gap-2); align-content: start; }
.basement__mail, .basement__tel {
  font-family: var(--serif);
  font-size: var(--type-l);
  color: var(--rose);
  transition: color var(--tap) linear;
}
.basement__mail:hover, .basement__tel:hover { color: var(--cream); }
.basement__note { font-size: var(--type-s); line-height: 1.7; max-width: 34ch; }
.basement__crest { width: 175px; color: var(--cream); margin-bottom: var(--gap-2); }

.basement__col { display: grid; gap: 0.55rem; align-content: start; }
.basement__title {
  font-family: var(--serif);
  font-size: var(--type-l);
  color: var(--cream);
  margin-bottom: 0.4rem;
}
.basement__col a { font-size: var(--type-s); transition: color var(--tap) linear, padding-left var(--tap) linear; }
.basement__col a:hover { color: var(--rose); padding-left: 0.25rem; }
.basement__row {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-2);
  font-size: var(--type-s);
  padding-block: 0.15rem;
}
.basement__row span:last-child { color: color-mix(in srgb, var(--cream) 62%, transparent); white-space: nowrap; }
.basement__row--shut span:last-child { color: var(--rose); }

.basement__nap { display: grid; gap: var(--gap-2); align-content: start; font-size: var(--type-s); line-height: 1.7; }
.basement__socials { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.basement__socials a {
  display: grid; place-content: center;
  width: 38px; height: 38px;
  border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  border-radius: 50%;
  transition: background-color var(--glide) var(--curve), color var(--glide) var(--curve),
    border-color var(--glide) var(--curve);
}
.basement__socials a:hover { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }

.basement__map {
  border: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  overflow: hidden;
  line-height: 0;
}
.basement__map iframe { width: 100%; height: 190px; border: 0; filter: grayscale(0.25); }

.basement__legal {
  border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  padding-block: var(--gap-3);
  display: grid;
  gap: var(--gap-2);
  font-size: 0.74rem;
}
@media (min-width: 55rem) {
  .basement__legal { grid-template-columns: 1fr auto; align-items: center; }
}
.basement__legal-links { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.basement__legal-links a:hover { color: var(--rose); }
.basement__small {
  border-top: 1px solid color-mix(in srgb, var(--cream) 8%, transparent);
  padding-block: var(--gap-3) calc(var(--gap-3) + env(safe-area-inset-bottom));
  font-size: 0.68rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
  display: grid;
  gap: 0.6rem;
}
@media (max-width: 47.999rem) { .basement__small { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); } }

/* Two-tap mobile action bar. MMW standard. */
.taps {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 130;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 -8px 26px -18px color-mix(in srgb, var(--ink) 60%, transparent);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 48rem) { .taps { display: none; } }
.taps a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1.05rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.taps a:first-child { background: var(--ink); color: var(--cream); }
.taps a:last-child { background: var(--rose); color: var(--on-rose); }

/* --------------------------------------------------------------------------
   Invitation band, the closing CTA above the footer.
   -------------------------------------------------------------------------- */

.invite { position: relative; overflow: hidden; isolation: isolate; color: var(--white); }
.invite__shot { position: absolute; inset: 0; z-index: -2; }
.invite__shot img { width: 100%; height: 100%; object-fit: cover; }
.invite__shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--ink) 78%, transparent), color-mix(in srgb, var(--ink) 44%, transparent));
}
.invite__grid { display: grid; gap: var(--gap-4); align-items: center; padding-block: var(--gap-7); }
@media (min-width: 62rem) { .invite__grid { grid-template-columns: 1.25fr 0.75fr; gap: var(--gap-6); } }
.invite__h { margin: 0; color: var(--white); }
.invite__note { color: color-mix(in srgb, var(--white) 84%, transparent); max-width: 52ch; }
.invite__acts { display: grid; gap: var(--gap-2); }
@media (min-width: 40rem) and (max-width: 61.999rem) { .invite__acts { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Small shared pieces
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4rem 0.9rem;
  background: var(--rose-mist);
  color: var(--rose-ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.plaque { display: grid; gap: var(--gap-2); padding: var(--gap-3); background: var(--rose-mist); }
.plaque__h { margin: 0; font-size: var(--type-l); }

.hours-list { display: grid; gap: 0.25rem; }
.hours-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-2);
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  font-size: var(--type-s);
}
.hours-list__row:last-child { border-bottom: 0; }
.hours-list__row--shut { color: var(--rose); }
.plate .hours-list__row, .zone--white .hours-list__row { border-bottom-color: var(--hair-soft); }

.metaline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2) var(--gap-3);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.metaline span { display: inline-flex; align-items: center; gap: 0.45em; }

.gallery-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.gallery-nav a {
  padding: 0.7rem 1.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid var(--hair);
  transition: background-color var(--glide) var(--curve), color var(--glide) var(--curve),
    border-color var(--glide) var(--curve);
}
.gallery-nav a:hover { border-color: var(--rose); color: var(--rose-ink); }
.gallery-nav a[aria-current="page"] { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }

.figure { display: grid; gap: 0.6rem; }
.figure img { width: 100%; }
.figure figcaption { font-size: var(--type-s); color: var(--ink-72); }
.figure--arch img { border-radius: var(--r-arch); aspect-ratio: 3 / 4; object-fit: cover; }

.map-plate { border: 1px solid var(--hair); line-height: 0; }
.map-plate iframe { width: 100%; height: 340px; border: 0; }

/* --------------------------------------------------------------------------
   Motion. Directional entrances, per column and per child, which is the
   thing that makes this kit feel reactive as you scroll. Everything is
   scoped to .js so a script failure never hides content.
   -------------------------------------------------------------------------- */

.js [data-in] {
  opacity: 0;
  transition:
    opacity var(--glide-slow) var(--curve-out) var(--in-wait, 0ms),
    transform var(--glide-slow) var(--curve-out) var(--in-wait, 0ms),
    clip-path var(--glide-slow) var(--curve-out) var(--in-wait, 0ms);
}
.js [data-in="up"] { transform: translateY(38px); }
.js [data-in="down"] { transform: translateY(-30px); }
.js [data-in="left"] { transform: translateX(-52px); }
.js [data-in="right"] { transform: translateX(52px); }
.js [data-in="zoom"] { transform: scale(0.86); }
.js [data-in="spin"] { transform: scale(0.8) rotate(-6deg); }
.js [data-in="mask"] { opacity: 1; clip-path: inset(0 0 100% 0); }
.js [data-in="wipe"] { opacity: 1; clip-path: inset(0 100% 0 0); }
.js [data-in].is-shown {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-in] { opacity: 1; transform: none; clip-path: none; }
  .reel__pane.is-live .reel__shot img { animation: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .taps, .panel, .invite, .reel__arrow, .reel__dots, .strip__arrow { display: none !important; }
  body { background: #fff; color: #000; }
  .zone { padding-block: 1.5rem; }
}

/* ==========================================================================
   Beauty & Wellness on Olive additions to the Vela stylesheet.

   Kept in their own file so the Vela base stays diffable against the
   template collection. Colour and type come from site.json; this file only
   covers what the practice has that Vela did not: a raster logo with a
   white twin, single-frame before and after photographs, and an un-linked
   membership seal.
   ========================================================================== */

/* The logo is taller than Vela's wordmark (roughly 2:1 against 4:1), so the
   crest is narrower and the height the openers reserve for the header grows
   to match. */
:root { --crest-h: 150px; --crest-h-stuck: 98px; }
@media (min-width: 62rem) {
  :root { --crest-h: 228px; --crest-h-stuck: 146px; }
}
.crest { width: clamp(130px, 13vw, 168px); }
.masthead.is-stuck .crest { width: clamp(100px, 9vw, 116px); }
/* One logo at a time. The white file only shows over a hero photograph,
   before the header condenses; everywhere else, and always once stuck, it is
   the full-colour logo. (A bare ".crest img" display rule used to out-rank
   the hiding rule, so the stuck header showed both.) */
.crest img { width: 100%; height: auto; }
.crest .crest__logo--dark { display: block; }
.crest .crest__logo--light { display: none; }
.masthead[data-overlay]:not(.is-stuck) .crest__logo--dark { display: none; }
.masthead[data-overlay]:not(.is-stuck) .crest__logo--light { display: block; }

.basement__crest img { display: block; width: 100%; height: auto; }

.drop__title a { color: inherit; }
.drop__title a:hover { color: var(--rose-ink); }

/* Portrait photographs in a circle: keep the face, not the lab coat. */
.disc--portrait img { object-position: 50% 18%; }

/* Before and after in one frame, shown whole. */
.combo { margin: 0; }
.combo__frame {
  background: var(--white);
  border: 1px solid var(--hair-soft);
  padding: var(--gap-1);
}
.combo__frame img { display: block; width: 100%; height: auto; }
.combos {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  list-style: none;
  padding: 0;
}

/* A seal with no link still needs the card shape. */
div.seal { cursor: default; }

/* Price lists inside the treatment rail, not linked. */
.rail__row span:last-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Masthead. The claim stays on one line; the address and email sit to its
   right on a wide screen, the email dropping out first as the room runs
   short. The round phone icon is only for screens too narrow to show the
   written number beside it.
   -------------------------------------------------------------------------- */
@media (min-width: 62rem) {
  .crown__claim, .crown__link { white-space: nowrap; }
  .crown__inner { gap: var(--gap-4); }
}
@media (min-width: 62rem) and (max-width: 74.999rem) {
  .crown__aside .crown__dot, .crown__aside .crown__link--mail { display: none; }
}
@media (min-width: 75rem) { .masthead__tap { display: none; } }

/* --------------------------------------------------------------------------
   Opening hours ribbon. A two by two grid beside the title instead of a
   wrapping row, so the four cells always line up.
   -------------------------------------------------------------------------- */
.ribbon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-3) var(--gap-4);
  align-items: center;
}
.ribbon__title { grid-column: 1 / -1; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
.ribbon__cell { min-width: 0; }
@media (min-width: 55rem) {
  .ribbon {
    grid-template-columns: auto repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3.25rem);
  }
  .ribbon__title {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    padding-right: clamp(1.5rem, 3vw, 3.25rem);
    border-right: 1px solid color-mix(in srgb, var(--on-rose) 26%, var(--rose));
  }
  .ribbon__cell { border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Reviews. No patient photographs, so the left column is the Google rating
   and a link to the listing; quotes carry the Google mark by the name.
   -------------------------------------------------------------------------- */
.voices__grid--solo { grid-template-columns: 1fr; }
.voices__badge {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  width: min(300px, 100%);
  margin-inline: auto;
  padding: var(--gap-5) var(--gap-4);
  background: var(--white);
  border: 1px solid var(--hair-soft);
  border-radius: 50% / 38%;
  box-shadow: var(--lift-2);
  text-align: center;
  color: var(--ink);
}
.voices__badge:hover { border-color: var(--rose); }
.voices__g { display: inline-grid; place-content: center; }
.voices__g--sm {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--hair-soft);
  flex: none;
}
.voices__score { font-family: var(--serif); font-size: var(--type-4xl); line-height: 1; }
.voices__basis { font-size: var(--type-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-72); }
.voices__badge .pull { margin-top: 0.4rem; }
.voices__say .voices__mark {
  position: static;
  position: relative;
  width: 44px; height: 44px;
  box-shadow: none;
}
.voices__who { display: flex; align-items: center; gap: 0.75rem; }
.voices__who > span:last-child { display: grid; gap: 0.1rem; }

/* --------------------------------------------------------------------------
   Every treatment, grouped. Four category cards in place of the price menu.
   -------------------------------------------------------------------------- */
.catalog {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
.catalog__card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--white);
  border: 1px solid var(--hair-soft);
  box-shadow: var(--lift-1);
  transition: box-shadow var(--glide) var(--curve), transform var(--glide) var(--curve);
}
.catalog__card:hover { box-shadow: var(--lift-2); transform: translateY(-3px); }
.catalog__shot { position: relative; display: block; aspect-ratio: 16 / 10; }
.catalog__shot img { width: 100%; height: 100%; object-fit: cover; }
.catalog__badge {
  position: absolute;
  left: var(--gap-3); bottom: -26px;
  display: grid; place-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--on-rose);
  box-shadow: 0 0 0 5px var(--white);
}
.catalog__body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--gap-2);
  padding: calc(var(--gap-4) + 6px) var(--gap-3) var(--gap-3);
}
.catalog__title { margin: 0; }
.catalog__title a { color: inherit; }
.catalog__title a:hover { color: var(--rose-ink); }
.catalog__text { margin: 0; font-size: var(--type-s); color: var(--ink-72); line-height: 1.6; }
.catalog__list {
  list-style: none;
  margin: 0;
  padding: var(--gap-2) 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  align-content: start;
}
.catalog__list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.38rem 0;
  font-size: var(--type-s);
  color: var(--ink);
}
.catalog__list a::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  flex: none;
  transition: background-color var(--tap) linear;
}
.catalog__list a:hover { color: var(--rose-ink); }
.catalog__list a:hover::before { background: var(--sage); }
.catalog__foot { justify-self: start; margin-top: var(--gap-1); }
.catalog__card.is-here { border-color: var(--rose); }

/* --------------------------------------------------------------------------
   Explore further, at the foot of a treatment page. A quick index: one row
   per category, its treatments as small round-ended links.
   -------------------------------------------------------------------------- */
.explore { display: grid; gap: var(--gap-3); }
.explore__row {
  display: grid;
  gap: var(--gap-2);
  padding-bottom: var(--gap-3);
  border-bottom: 1px solid var(--hair);
}
.explore__row:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 55rem) {
  .explore__row { grid-template-columns: 15rem 1fr; align-items: center; gap: var(--gap-4); }
}
.explore__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--type-xl);
}
.explore__title a { color: var(--ink); }
.explore__title a:hover { color: var(--rose-ink); }
.explore__icon {
  display: grid; place-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--on-rose);
  flex: none;
}
.explore__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.explore__chips a {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--hair-soft);
  font-size: var(--type-s);
  color: var(--ink);
  transition: background-color var(--tap) linear, color var(--tap) linear, border-color var(--tap) linear;
}
.explore__chips a:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.rail__list a svg { flex: none; align-self: center; opacity: 0.6; }

/* --------------------------------------------------------------------------
   Before and after. Only the handle moves the line, so the cursor changes
   only near it, and nothing in the frame can be selected or dragged out.
   -------------------------------------------------------------------------- */
.wipe__frame { cursor: default; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.wipe__frame img { -webkit-user-drag: none; pointer-events: none; }
.wipe__frame.is-near, .wipe__frame.is-dragging { cursor: ew-resize; }
.wipe__bar::after { display: none; }
.wipe__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--lift-1);
  transition: transform var(--tap) linear, box-shadow var(--tap) linear;
}
.wipe__frame.is-near .wipe__grip,
.wipe__frame.is-dragging .wipe__grip { transform: translate(-50%, -50%) scale(1.08); box-shadow: var(--lift-2); }
.wipe__frame:focus-visible .wipe__grip { outline: 2px solid var(--rose); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   One membership, featured: the logo large beside the claim.
   -------------------------------------------------------------------------- */
.sealfeature {
  display: grid;
  gap: var(--gap-4);
  justify-items: center;
  text-align: center;
  max-width: 62rem;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .sealfeature { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; gap: var(--gap-5); }
}
.sealfeature__logo {
  display: grid;
  place-content: center;
  width: clamp(150px, 18vw, 210px);
  aspect-ratio: 1;
  padding: var(--gap-3);
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--rose);
  box-shadow: var(--lift-1);
}
.sealfeature__logo img { width: 100%; height: auto; object-fit: contain; }
.sealfeature__h { margin: var(--gap-2) 0 0; }
.sealfeature__note { margin: var(--gap-2) 0 0; color: var(--ink-72); max-width: 52ch; }

/* --------------------------------------------------------------------------
   The closing invitation sits on a dark photograph, so its eyebrow takes the
   light accent rather than the deep text accent it uses on cream.
   -------------------------------------------------------------------------- */
.invite .kick { color: var(--rose); }

/* Agency credit in the footer legal line, and the linked address. */
.basement__credit { display: block; margin-top: 0.3rem; color: color-mix(in srgb, var(--cream) 62%, transparent); }
/* Underlined like every link inside text (standard A2, link-in-text-block). */
.basement__credit a { color: var(--rose); text-decoration: underline; text-underline-offset: 0.15em; }
.basement address a { color: inherit; }
.basement address a:hover { color: var(--rose); }

/* ==========================================================================
   Accessibility, WCAG 2.1 AA.
   ========================================================================== */

/* Contrast (1.4.3). Vela's --ink-72 clears 4.5:1 on cream but not on the
   tinted bands (3.8:1 on rose-pale), so this brand deepens it to an 80 percent
   mix, which clears 4.6:1 on the darkest tint. The deep accent comes from
   roseInkMix in site.json for the same reason. */
:root { --ink-72: color-mix(in srgb, var(--ink) 80%, var(--cream)); }

/* The light accent (sage) is 1.7:1 on cream, so a hover or current-page
   colour in the cream header uses the deep accent instead. Over a hero
   photograph the light accent stays. */
.masthead:not([data-overlay]) .menu__item:hover > .menu__link,
.masthead:not([data-overlay]) .menu__link[aria-current="page"],
.masthead:not([data-overlay]) .crown__link:hover,
.masthead:not([data-overlay]) .masthead__call:hover,
.masthead.is-stuck .menu__item:hover > .menu__link,
.masthead.is-stuck .menu__link[aria-current="page"],
.masthead.is-stuck .masthead__call:hover { color: var(--rose-ink); }
.plate .hours-list__row--shut,
.zone--white .hours-list__row--shut { color: var(--rose-ink); }

/* Review dots are controls, so both states need 3:1 against cream (1.4.11). */
.voices__dot { background: var(--ink-58); }
.voices__dot[aria-current="true"] { background: var(--rose-ink); }

/* Escape hides an open dropdown until the pointer or focus leaves (1.4.13). */
.menu__item.is-dismissed .drop { opacity: 0 !important; visibility: hidden !important; }

/* Pause for the auto-advancing slideshow and reviews (2.2.2). site.js
   reveals it only while rotation is on. */
.reel__dots, .voices__dots { align-items: center; }
.reel__pause, .voices__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin-right: 0.3rem;
  border-radius: 50%;
}
.reel__pause { color: var(--white); border: 1px solid color-mix(in srgb, var(--white) 70%, transparent); }
.reel__pause:hover { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }
.voices__pause { color: var(--ink); border: 1px solid var(--ink-58); }
.voices__pause:hover { border-color: var(--ink); }
.reel__pause-bars {
  display: block;
  box-sizing: border-box;
  width: 8px; height: 10px;
  border-inline: 2.5px solid currentColor;
}
.is-paused .reel__pause-bars {
  width: 0; height: 0;
  margin-left: 2px;
  border-inline: 0;
  border-left: 8px solid currentColor;
  border-block: 5px solid transparent;
}
.reel__pause[hidden], .voices__pause[hidden], .ease[hidden], .ease__panel[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Ease. The display preferences button and panel (vela/parts/ease.njk).
   Kept small and in the lower left so it never covers the booking button,
   and lifted above the call and book bar on a phone.
   -------------------------------------------------------------------------- */
.ease {
  position: fixed;
  left: clamp(0.75rem, 1.5vw, 1.25rem);
  bottom: calc(4.1rem + env(safe-area-inset-bottom));
  z-index: 110;
  font-family: var(--sans);
}
@media (min-width: 48rem) { .ease { bottom: clamp(0.75rem, 1.5vw, 1.25rem); } }
.ease__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  border: 2px solid var(--cream);
  box-shadow: var(--lift-1);
  opacity: 0.86;
  transition: opacity var(--tap) linear, transform var(--tap) var(--curve);
  --focus-ring: var(--ink);
}
.ease__toggle:hover, .ease__toggle:focus-visible, .ease__toggle[aria-expanded="true"] { opacity: 1; }
.ease__toggle.is-set::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rose);
  border: 2px solid var(--ink);
}
.ease__panel {
  position: absolute;
  left: 0; bottom: calc(100% + 0.6rem);
  width: min(17.5rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  display: grid;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--hair);
  box-shadow: var(--lift-2);
  font-size: 0.9rem;
  line-height: 1.4;
}
.ease__title {
  margin: 0;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ease__set { display: grid; gap: 0.35rem; }
.ease__label { font-size: 0.82rem; color: var(--ink-72); }
.ease__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.ease__opts { display: grid; gap: 0.3rem; }
.ease__panel button {
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--ink-58);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ease__sizes button { text-align: center; padding-inline: 0.3rem; }
.ease__panel button:hover { border-color: var(--ink); }
.ease__panel button[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.ease__opt { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.ease__opt::after { content: "Off"; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ease__opt[aria-pressed="true"]::after { content: "On"; }
.ease__reset { justify-self: start; border-style: dashed !important; }
@media print { .ease { display: none !important; } }

/* Preferences the panel writes to <html>. */
html.ease-text-1 { font-size: 112.5%; }
html.ease-text-2 { font-size: 125%; }

html.ease-links main a:not(.act):not([class*="__shot"]),
html.ease-links .basement a:not(.act) { text-decoration: underline; text-underline-offset: 0.18em; }

html.ease-spacing main :is(p, li, dd, blockquote, figcaption) {
  line-height: 1.9 !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.16em !important;
}
html.ease-spacing main p { margin-bottom: 1.4em; }

html.ease-still { scroll-behavior: auto; }
html.ease-still *, html.ease-still *::before, html.ease-still *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html.ease-still [data-in] { opacity: 1 !important; transform: none !important; clip-path: none !important; }

html.ease-contrast {
  --ink-90: var(--ink);
  --ink-72: var(--ink);
  --ink-58: var(--ink);
  --rose-ink: var(--ink);
  --hair: color-mix(in srgb, var(--ink) 45%, transparent);
  --hair-soft: color-mix(in srgb, var(--ink) 30%, transparent);
}
html.ease-contrast :is(.reel__shot, .opener__shot, .promo__shot, .showpiece__shot, .invite__shot) img { filter: brightness(0.5); }
html.ease-contrast .basement { --rose: var(--white); }
html.ease-contrast .basement__credit { color: var(--cream); }

/* --------------------------------------------------------------------------
   Message form (contact page). The template's wells are tinted with no
   border, and its focus state is a sage border that measures under 3:1 on
   white, so here every field gets a visible edge (ink-58, over 3:1, 1.4.11)
   and keyboard focus gets the site's focus ring (2.4.7).
   -------------------------------------------------------------------------- */
.sheet .well input, .sheet .well select, .sheet .well textarea {
  border-color: var(--ink-58);
  min-height: 48px;
}
.sheet .well input:focus-visible, .sheet .well select:focus-visible, .sheet .well textarea:focus-visible {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.checks { display: grid; gap: var(--gap-2); }
.check { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: var(--type-xs); line-height: 1.6; color: var(--ink-72); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0.1rem 0 0; accent-color: var(--ink); }
.sheet .act { min-height: 48px; border: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   Slider and review dots. The template draws 8 to 9 px buttons, under the
   24 px target size (2.5.8, target-size). Each button is now a 24 px hit
   area with the same small dot drawn inside it.
   -------------------------------------------------------------------------- */
.reel__dots, .voices__dots { gap: 0.1rem; }
.reel__dot, .voices__dot {
  position: relative;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: none !important;
  transform: none !important;
}
.reel__dot::before, .voices__dot::before {
  content: "";
  position: absolute;
  inset: 0; margin: auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  transition: background-color var(--glide) var(--curve), transform var(--glide) var(--curve);
}
.reel__dot::before { background: color-mix(in srgb, var(--white) 45%, transparent); }
.reel__dot[aria-current="true"]::before { background: var(--rose); transform: scale(1.45); }
.voices__dot::before { width: 8px; height: 8px; background: var(--ink-58); }
.voices__dot[aria-current="true"]::before { background: var(--rose-ink); transform: scale(1.4); }

/* The template's slow "creep" zoom on the live hero image kept the first
   screen changing for 11 seconds, which Lighthouse counts against Speed
   Index (standard P4, P5). The slides still cross-fade; the photo holds still. */
.reel__pane.is-live .reel__shot img { animation: none; }

/* Entrances already on screen at load show at once (site.js adds
   .is-instant to the observer's first report), so the first screen is never
   faded in (standard P5). */
.js [data-in].is-instant { transition: none !important; }