/* ============================================================
   Dr Natalie Aesthetics — homepage
   Loaded after main.css, on index (and /edit) only.

   Brown and cream strictly alternate section by section (see THE
   BANDS below), so the page never runs two of the same colour.

   The hero: her clinic photography laid over the approved tagline, on
   cream (client call follow-up, 2026-09-14). The headline is chocolate
   on the cream and turns cream where it crosses a photograph; pure
   white was dropped because it fought the warm palette. The supporting
   copy and the buttons sit on a frosted cream pane below the headline.
   ============================================================ */

/* ---------- shared refinements ---------- */

.h-title {
  font-size: clamp(2rem, 3.6vw, 2.5rem);
  margin-bottom: 1.25rem;
}

.h-title-s { font-size: clamp(1.5rem, 2.4vw, 1.75rem); }
.h-title-xl { font-size: clamp(2.4rem, 5vw, 3.25rem); }

/* ============================================================
   HERO
   ============================================================ */

.hh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.5rem, 6svh, 4.5rem) 1.25rem 0;
  /* The wall of the room, not a flat fill: cream at head height, warming
     toward the floor, with the two pools of gold light and the warm strip
     that runs along her skirting. Everything here is a tint of --cream,
     --gold and --deep-gold; no new hues. */
  background:
    radial-gradient(ellipse 70% 60% at 10% -8%, rgba(214, 182, 122, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 64% 56% at 92% 104%, rgba(198, 166, 107, 0.24) 0%, transparent 62%),
    linear-gradient(to top, rgba(214, 182, 122, 0.26) 0%, rgba(214, 182, 122, 0.07) 10%, transparent 24%),
    linear-gradient(180deg, #FBF6EC 0%, #F6EFE3 36%, #F0E6D5 100%);
  color: var(--ink-warm);
}

/* grain, so the field reads as paper rather than a flat fill */
.hh::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--grain);
  background-size: var(--grain-size);
  mix-blend-mode: multiply;
  opacity: 0.12;
  pointer-events: none;
}

.hh-field {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.hh-card {
  position: absolute;
  width: var(--w);
  aspect-ratio: var(--ar, 3 / 4);
  perspective: 1400px;
}

/* Fills its card by absolute inset, never by height: 100%. Safari resolves
   a percentage height against the card's aspect-ratio height and ignores the
   card's max-height, so on iPhones the photo overflowed its own box by 172px
   while the knockout (sized from the box) cut the cream letters at the box's
   edge. Inset resolves against the real box in every engine. */
.hh-tilt {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}

/* The plane the entrance animation moves. The photograph, its scrim and the
   1px corner probes home.js reads all sit inside it, so one transform carries
   the lot and the probes report the photograph's CURRENT quad rather than its
   resting one. That is what lets the knockout clip follow a photo that is
   still flying in, instead of having to wait for it to land. */
.hh-plane {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  animation: hh-card-in 1.5s var(--ease-out-expo) var(--d, 1s) both;
}

/* raw edges, no frame, no rounding — the photograph is used as
   supplied, per section six. The gold rim is light on the plane,
   not a drop shadow under a card. */
.hh-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 1px rgba(198, 166, 107, 0.5), 0 34px 60px -30px rgba(74, 52, 40, 0.45);
  /* the clinic is lit warm; the raw phone photos are not. This puts the
     room's own light back rather than leaving them grey under the scrim. */
  filter: saturate(1.12) brightness(1.08) contrast(0.98);
}

@keyframes hh-card-in {
  from { opacity: 0; transform: translate3d(0, 34vh, -220px) scale(0.72); }
  to { opacity: 1; transform: none; }
}

/* The knockout layer built by home.js: a copy of the headline clipped to
   each photograph's bounds. The headline is chocolate on the cream; where
   it crosses a photo the letters turn cream. No outline and no pure white.
   The photos carry a brown scrim (below) so cream stays legible on the
   bright clinic walls. */
.hh-kbox {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  /* home.js holds this at exactly the photograph's own opacity while it flies
     in, then pins it to 1. No transition: the letters invert precisely as much
     as there is photograph over them, which is not a fade of its own. */
  opacity: 0;
  /* The polygon is the only clip now. overflow: hidden would crop the
     photograph's travel (it starts 34vh low) back to the resting card box and
     hide the mask for the whole intro. Nothing shows until the first quad is
     measured. */
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

.hh-ktitle {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  text-align: center;
}

.hh-ktitle * { animation: none !important; }

.hh-ktitle .hh-l1,
.hh-ktitle .hh-l2 {
  color: var(--cream);
  background: none;
  text-shadow: none;
}

/* The scrim section six prescribes for type over photography. It sits on the
   animated plane, so it tilts and floats with the photograph and arrives with
   it: until the JPEG has decoded the scrim IS the card, and leaving it off the
   plane meant a flat gradient rectangle sat there already in place while the
   photo flew in behind it. */
.hh-plane::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(58, 38, 24, 0.42) 0%, rgba(58, 38, 24, 0) 56%),
    linear-gradient(155deg, rgba(150, 104, 56, 0.3) 0%, rgba(74, 52, 40, 0.44) 100%);
  pointer-events: none;
}

/* Anchored to the centre, not the viewport edge, so they always cross
   the max-width-capped headline. They run low enough to tuck behind the
   glass pane's top corners, which is what gives it something worth
   refracting. */
.hh-c1 { --w: clamp(190px, 21vw, 300px); left: calc(50% - clamp(390px, 39vw, 555px)); top: 6%; --d: 0.95s; }
.hh-c4 { --w: clamp(175px, 19.5vw, 280px); right: calc(50% - clamp(360px, 36vw, 515px)); top: 11%; --d: 1.2s; --ar: 4 / 5; }


/* The stage deliberately does NOT open a stacking context. Only the
   headline goes under the photo plane; the eyebrow and the glass pane
   sit above it, so a card can never swallow running text. */
.hh-stage {
  position: relative;
  margin-block: auto;               /* centred in the space above the credentials */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 64rem;
}

.hh-stage > * { max-width: 100%; }

.hh-title,
.hh-ktitle {
  /* The knockout copy home.js builds is a <div>, not an <h1>, so it never
     inherited the heading line-height and sat 11.4px below the real text.
     Both copies take their metrics from here now, never from the tag. */
  line-height: 1.14;
  text-wrap: balance;
}

/* The headline sits IN FRONT of the photographs (z 4, same as the knockout
   boxes, which are later in the DOM so still paint over it) until home.js
   has faded the cream copy in, then drops behind them (z 2, under
   .hh-field's 3). Starting behind them is what left only the bottom half of
   the headline visible during the intro on phones. In the editor there is no
   knockout, so it simply stays in front. */
.hh-title {
  position: relative;
  z-index: 4;
  width: 100%;
  margin: 0;
}

.hh.is-knocked .hh-stage .hh-title { z-index: 2; }

.hh-eyebrow {
  position: relative;
  z-index: 4;
  max-width: 30rem;
  color: var(--bronze);
  margin-bottom: clamp(1.5rem, 3.5svh, 2.4rem);
  animation: hh-rise 0.9s 0.1s var(--ease) both;
}

.hh-eyebrow::before,
.hh-eyebrow::after { background: linear-gradient(90deg, var(--deep-gold), rgba(168, 128, 68, 0.1)); }
.hh-eyebrow::before { background: linear-gradient(270deg, var(--deep-gold), rgba(168, 128, 68, 0.1)); }

/* line one of the approved tagline: small, formally tracked, chocolate */
.hh-l1 {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  letter-spacing: 0.38em;
  text-indent: 0.38em;              /* optically recentre the tracked caps */
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: clamp(0.5rem, 1.5svh, 1rem);
  animation: hh-rise 0.9s 0.3s var(--ease) both;
}

/* line two: the wall-size italic the photographs cut across. Chocolate on
   the cream; cream only where it crosses a photo */
.hh-l2 {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.9rem, 11vw, 8rem);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--brown);
  padding: 0 0.06em 0.08em;         /* room for the italic overhangs */
  animation: hh-unveil 1.15s 0.45s var(--ease) both;
}

/* the frosted pane: supporting copy and the ask */
.hh-panel {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3svh, 2rem);
  width: min(42rem, 100%);
  margin-top: clamp(1.6rem, 4svh, 2.8rem);
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.8rem);
  animation: hh-rise 1s 0.85s var(--ease) both;
}

.hh-sub {
  max-width: 32rem;
  font-size: 1.0625rem;
  color: var(--ink-warm);
  margin: 0;
}

.hh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
  margin: 0;
}

.hh-link {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bronze);
  border-bottom: 1px solid var(--rule-gold);
  padding-bottom: 0.4rem;
  transition: color 0.28s var(--ease), border-color 0.28s var(--ease);
}
.hh-link:hover { color: var(--brown); border-color: var(--brown); }

/* the pane is cream glass on the cream field, frosting the photo corners
   that tuck behind it */
.hh .hh-panel.glass,
.liquid-glass .hh .hh-panel.glass {
  background: rgba(250, 244, 233, 0.72);
  border-color: rgba(198, 166, 107, 0.5);
  box-shadow: 0 24px 50px -36px rgba(74, 52, 40, 0.38);
}

.hh .hh-panel.glass::after {
  box-shadow:
    inset 2px 2px 0.5px -2.5px rgba(255, 252, 246, 0.9),
    inset -2px -2px 0.5px -2.5px rgba(255, 252, 246, 0.6),
    inset 1px 1px 1px -0.5px rgba(198, 166, 107, 0.45),
    inset -1px -1px 1px -0.5px rgba(198, 166, 107, 0.3),
    inset 0 0 10px 10px rgba(198, 166, 107, 0.08);
}

/* the credentials wire along the foot of the hero */
.hh .hcred {
  position: relative;
  z-index: 5;
  align-self: stretch;
  margin: clamp(2rem, 5svh, 3.5rem) -1.25rem 0;
  background: linear-gradient(to top, rgba(240, 233, 223, 0.55), rgba(240, 233, 223, 0));
  border-top: 1px solid var(--rule-gold);
  border-bottom: 0;
  animation: hh-rise 1s 1.2s var(--ease) both;
}

@keyframes hh-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hh-unveil {
  from { opacity: 0; clip-path: inset(0 -8% 100% -8%); transform: translateY(0.18em); }
  to { opacity: 1; clip-path: inset(-24% -8% -18% -8%); transform: translateY(0); }
}

/* ============================================================
   HERO ON PHONES — two tilted photos crossing a two-line headline

   History: shrinking the desktop cards gave two slivers at the screen
   edges; one full-width photo under the headline gave a dead-straight
   horizontal cut through every letter, which (per the client call)
   looked like a rendering bug. What makes the desktop version read as
   designed is that the photos are tilted and float, so the cuts are
   angled and only catch some letters. This brings that language to a
   tall screen instead of porting the layout.

   "Naturally" / "Refined." sit on two big lines. Photo one hangs top-left
   and its bottom edge cuts the left of line one; photo two sits lower
   right and its top edge cuts the right of line two. They are rotated in
   opposite directions, so both cuts are angled.

   Geometry, all from custom properties so every phone agrees:
     card height ch, line height L (l2 line-height is 1), l1 block l1H
     line one's box starts at ch - 0.62L, so photo one's bottom edge
     crosses it 62% of the way down (most of each letter goes gold)
     photo two starts at ch + 0.78L, so its top edge crosses line two
     40% of the way down (the lower 60% goes gold)
     field height FH = 2ch + 0.78L
   .hh-stage uses display: contents so eyebrow, headline and copy join
   the hero's column and can be ordered around the photo field.
   ============================================================ */

@media (max-width: 720px) {
  .hh {
    --l1: 0.9rem;
    --l1-gap: 0.5rem;
    --l2: clamp(3.2rem, 18.5vw, 5.6rem);
    --card-w: min(46vw, 17rem);
    --card-h: calc(var(--card-w) * 1.22);
    justify-content: flex-start;
    padding: 1.6rem 1.25rem 0;
  }

  .hh-stage { display: contents; }

  .hh-field {
    position: relative;
    inset: auto;
    order: 1;
    width: 100%;
    height: calc(var(--card-h) * 2 + var(--l2) * 0.78);
  }

  /* explicit width and height, never aspect-ratio + max-height: Safari
     resolves the inner plane against the aspect-ratio height otherwise */
  .hh-card {
    width: var(--card-w);
    height: var(--card-h);
    aspect-ratio: auto;
  }

  .hh-c1 {
    --d: 0.2s;
    top: 0;
    left: 2%;
    right: auto;
    rotate: -5deg;
  }

  .hh-c4 {
    --d: 0.45s;
    top: calc(var(--card-h) + var(--l2) * 0.78);
    left: auto;
    right: 2%;
    rotate: 4deg;
  }

  .hh-plane { animation: hh-card-in-phone 1.1s var(--ease-out-expo) var(--d) both; }

  .hh-l1 {
    font-size: var(--l1);
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    margin-bottom: var(--l1-gap);
  }

  /* max-width in em forces "Naturally" / "Refined." onto two lines at every
     phone width; it applies to the knockout copy too, so both wrap alike */
  .hh-l2 {
    font-size: var(--l2);
    max-width: 5.2em;
    margin-inline: auto;
  }

  /* Pull the headline up into the photo field (geometry above) and push what
     follows back down to the bottom of the field. Scoped through .hh-stage
     so the knockout copy, which also carries .hh-title, never moves. */
  .hh-stage .hh-title {
    order: 2;
    margin-top: calc(-1 * (var(--card-h) + var(--l2) * 1.4 + var(--l1) * 1.14 + var(--l1-gap)));
    margin-bottom: calc(var(--card-h) - var(--l2) * 0.6);
  }

  .hh .hcred { order: 5; margin-top: auto; }
  .hh .hh-panel.glass { margin-bottom: clamp(2.5rem, 6svh, 3.5rem); }

  .hh-eyebrow {
    order: 3;
    max-width: none;
    margin: 1.6rem 0 0;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-wrap: balance;
  }

  .hh-eyebrow::before,
  .hh-eyebrow::after { content: none; }

  /* no glass box on phones: at this size it read as a form */
  .hh .hh-panel.glass,
  .liquid-glass .hh .hh-panel.glass {
    order: 4;
    box-shadow: none;
    width: 100%;
    margin-top: 1rem;
    padding: 0;
    gap: 1.5rem;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hh .hh-panel.glass::before,
  .hh .hh-panel.glass::after,
  .liquid-glass .hh .hh-panel.glass::before { content: none; }

  .hh-sub { max-width: 22rem; font-size: 1rem; }

  .hh-actions { flex-direction: column; gap: 1rem; }
}

@keyframes hh-card-in-phone {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: none; }
}

/* in the editor there is no knockout, so the headline must sit above
   the photographs or it cannot be double-clicked */
body.is-edit .hh-title { z-index: 4; }

/* ============================================================
   THE BANDS
   From the hero down, brown and cream strictly alternate, so no two
   neighbouring sections share a colour (client call, 2026-09-14):
   hero + credentials C · intro B · philosophy C · menu B · steps C ·
   about B · Instagram C · reviews B · booking C · enquiry B ·
   where to find me C · footer B.
   Cream sections sit on the page's own grained cream; brown ones carry
   .on-brown in the markup.
   ============================================================ */

/* the repeated "Book a consultation" at the foot of each section */
.h-book { margin-top: clamp(2rem, 4.5vw, 2.8rem); }
.hjour > .h-book,
.hrev > .h-book,
.hfind > .h-book { text-align: center; }

/* ============================================================
   CREDENTIALS — a slow wire of qualifications along the hero's foot
   ============================================================ */

.hcred {
  border-bottom: 1px solid var(--rule-gold);
  padding: 1.35rem var(--gutter);
  overflow: hidden;
}

.hcred-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 3.2rem;
  row-gap: 0.7rem;
  max-width: 80rem;
  margin: 0 auto;
}

/* bronze, not gold: gold on cream is 2.1:1 and fails for text */
.hcred-list li {
  position: relative;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
}

.hcred-list li + li::before,
.hcred-list.is-marquee li::before {
  content: '\00B7';
  position: absolute;
  left: -1.75rem;
  color: var(--deep-gold);
}

.hcred-list.is-marquee {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  max-width: none;
  margin: 0;
  animation: hcred-scroll var(--marq-t, 42s) linear infinite;
}

.hcred-list.is-marquee li { white-space: nowrap; }

.hcred:hover .is-marquee { animation-play-state: paused; }

@keyframes hcred-scroll {
  to { transform: translateX(calc(-1 * var(--setw, 800px))); }
}

@media (max-width: 720px) {
  .hcred-list:not(.is-marquee) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.5rem;
    text-align: center;
  }
  .hcred-list:not(.is-marquee) li + li::before { content: none; }
}

/* ============================================================
   INTRO — brown, editorial split
   ============================================================ */

.hintro {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--sp-lg) var(--gutter);
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hintro-copy { max-width: var(--measure); }
.hintro-copy p + p { margin-top: 1.1rem; }
.hintro-copy > p:not(.eyebrow):not(.h-book) { color: var(--on-brown-soft); }

.hintro-media {
  position: relative;
  max-width: 27rem;
  padding: 0 clamp(2rem, 18%, 4.5rem) clamp(2.2rem, 16%, 3.6rem) 0;
  justify-self: center;
}

/* Square now. She likes the arch on a few photos, not on all of them, so
   it survives only on her portrait. The frame stays so the photo is
   still presented rather than just placed. */
.hintro-main {
  aspect-ratio: 4 / 5;
  display: flex;
  padding: clamp(0.4rem, 1vw, 0.65rem);
  border: 1px solid var(--rule-on-brown);
}

.hintro-main img { width: 100%; height: 100%; object-fit: cover; }

/* a cream mat, like a print laid on the dark */
.hintro-side {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(8.5rem, 46%, 11.5rem);
  aspect-ratio: 3 / 4;
  border: 6px solid var(--cream);
  overflow: hidden;
  transform: rotate(1.6deg);
  transition: transform 0.5s var(--ease-out-expo);
}
.hintro-media:hover .hintro-side { transform: rotate(0deg) scale(1.02); }

.hintro-side img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .hintro { grid-template-columns: 1.05fr 0.95fr; }
  .hintro-media { justify-self: end; }
}

/* ============================================================
   PHILOSOPHY — cream. The core promise, lit word by word.
   ============================================================ */

.hphil {
  padding: var(--sp-lg) var(--gutter);
  text-align: center;
}

/* the light gold gradient washes out on cream, so this one runs from
   deep gold down into chocolate */
.hphil-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.25;
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
  color: transparent;
  background: linear-gradient(120deg, var(--deep-gold) 0%, var(--bronze) 48%, var(--brown) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* split words are inline-blocks, so each needs the fill of its own */
.hphil-quote.is-split .w {
  display: inline-block;
  opacity: 0.14;
  transform: translateY(0.22em);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease-out-expo);
}

.hphil.is-visible .hphil-quote.is-split .w { opacity: 1; transform: none; }

/* ============================================================
   TREATMENTS — brown. Display rows that flood gold on hover.
   ============================================================ */

.hmenu { padding: var(--sp-lg) var(--gutter); }

.hmenu-head { max-width: 46rem; margin: 0 auto clamp(2.4rem, 5vw, 3.5rem); }
.hmenu-intro { max-width: var(--measure); color: var(--on-brown-soft); }

.hmenu-board {
  max-width: 76rem;
  margin: 0 auto;
  border-top: 1px solid var(--rule-on-brown);
  border-bottom: 1px solid var(--rule-on-brown);
  padding: clamp(2rem, 4vw, 3rem) 0;
  display: grid;
  gap: 2.2rem;
}

.hmenu-board .menu-group { padding: 0 clamp(0rem, 2vw, 2.2rem); }

.hmenu-board .menu-list li {
  position: relative;
  overflow: hidden;
  padding: 0.95rem 3.6rem 0.95rem 0.8rem;
  gap: 0;
  cursor: pointer;
}
.hmenu-board .menu-list li + li { border-top: 1px solid rgba(198, 166, 107, 0.16); }

/* the gold flood */
.hmenu-board .menu-list li::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
}

/* the treatment's line-art mark, rolling in from the right */
.hmenu-board .menu-list li::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  background: var(--brown);
  -webkit-mask: var(--mi) center / contain no-repeat;
  mask: var(--mi) center / contain no-repeat;
  opacity: 0;
  transform: translateX(24px) rotate(-18deg);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease-out-expo);
}

/* --mi is set per row by home.js, from the treatment the row links to, and
   .has-mark is added with it. It used to be assigned here by group and row
   number, which silently mismatched every mark once the menu was reordered
   in the editor: the stored groups keep their original data-menu keys while
   their titles and rows move. A row we cannot identify simply shows no mark,
   which is why the hover rule below is scoped to .has-mark — the mark is a
   masked block, so an unset --mi would paint a solid brown square. */

@media (hover: hover) {
  .hmenu-board .menu-list li:hover::before { transform: scaleX(1); }
  .hmenu-board .menu-list li.has-mark:hover::after { opacity: 1; transform: translateX(0) rotate(0deg); }
  .hmenu-board .menu-list li:hover .menu-item { color: var(--brown); }
  .hmenu-board .menu-list li:hover .menu-item small,
  .hmenu-board .menu-list li:hover .dna-mi-sub { color: rgba(74, 52, 40, 0.78); }
}

.hmenu-board .menu-item {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--on-brown);
  transition: color 0.35s var(--ease);
}

.hmenu-board .menu-item small,
.hmenu-board .menu-item .dna-mi-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--on-brown-soft);
  transition: color 0.35s var(--ease);
}

/* prices live on /treatments; restored in the editor so she can edit them */
.hmenu-board .menu-dots,
.hmenu-board .menu-price { display: none; }

body.is-edit .hmenu-board .menu-dots,
body.is-edit .hmenu-board .menu-price { display: inline-block; position: relative; }
body.is-edit .hmenu-board .menu-list li { cursor: auto; }

.hmenu-board.is-visible .menu-list li { animation: row-in 0.6s var(--ease-out-expo) both; }
.hmenu-board.is-visible .menu-list li:nth-child(1) { animation-delay: 0.05s; }
.hmenu-board.is-visible .menu-list li:nth-child(2) { animation-delay: 0.14s; }
.hmenu-board.is-visible .menu-list li:nth-child(3) { animation-delay: 0.23s; }

@keyframes row-in {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (min-width: 900px) {
  .hmenu-board { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .hmenu-board .menu-group + .menu-group { border-left: 1px solid rgba(198, 166, 107, 0.16); }
}

.hmenu-more {
  max-width: 76rem;
  margin: clamp(2.2rem, 5vw, 3rem) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2.4rem;
}

/* ============================================================
   THE STEPS — cream. A real sequence, so it earns numbering.
   ============================================================ */

.hjour { padding: var(--sp-lg) var(--gutter); }

.hjour-top {
  max-width: 76rem;
  margin: 0 auto clamp(2.6rem, 6vw, 4rem);
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.hjour-head { max-width: 44rem; }
.hjour-lead { max-width: var(--measure); }

.hjour-photo {
  aspect-ratio: 16 / 10;
  padding: clamp(0.4rem, 1vw, 0.65rem);
  border: 1px solid var(--rule-gold);
  display: flex;
}
.hjour-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .hjour-top { grid-template-columns: 1fr 1fr; }
  .hjour-photo { transform: rotate(-1.2deg); }
}

.hjour-grid {
  display: grid;
  gap: 2.6rem;
  max-width: 76rem;
  margin: 0 auto;
}

.hjour-step { padding: 0 clamp(0rem, 2.5vw, 2.6rem); }

.hjour-num {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.hjour-roman {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.4rem, 6.5vw, 5rem);
  line-height: 0.8;
  color: transparent;
  background: var(--gold-grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
}

.hjour-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
}

.hjour-step h3 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); margin-bottom: 0.6rem; }
.hjour-step p { max-width: 30rem; }

@media (min-width: 900px) {
  .hjour-grid { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .hjour-step + .hjour-step { border-left: 1px solid var(--rule-brown); }
}

/* ============================================================
   ABOUT — brown. Her moment.
   ============================================================ */

.habout { padding: var(--sp-lg) var(--gutter); }

.habout-inner {
  display: grid;
  gap: clamp(2.6rem, 6vw, 5.5rem);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
}

.habout-portrait { max-width: 330px; margin: 0 auto; }
.habout-copy { max-width: var(--measure); }
.habout-copy p + p { margin-top: 1.1rem; }

.habout-signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2rem;
  margin-top: 1.6rem !important;
  color: transparent;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (min-width: 900px) {
  .habout-inner { grid-template-columns: minmax(240px, 330px) 1fr; }
  .habout-portrait { margin: 0; }
}

/* ============================================================
   INSTAGRAM — cream, where the gallery used to be. Always shown:
   instagram.js fills it from the archived feed.
   ============================================================ */

.hig { padding: var(--sp-lg) var(--gutter); }
.hig-head { max-width: 62rem; margin: 0 auto clamp(2rem, 4vw, 2.8rem); }
.hig-lead { max-width: var(--measure); }
.hig-follow { margin-top: 2.4rem; text-align: center; }

.hig .ig-grid:empty { display: none; }
@media (max-width: 720px) { .hig .ig-post:nth-child(n+7) { display: none; } }

.hig .ig-post { background: var(--cream-sink); }
.hig .ig-post:hover { box-shadow: 0 14px 34px -18px rgba(46, 32, 23, 0.55); }

/* ============================================================
   REVIEWS — brown. The deep chocolate passage.
   ============================================================ */

.hrev {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
}

.hrev-head { max-width: 46rem; margin: 0 auto clamp(3rem, 7vh, 4.5rem); }
.hrev-head .eyebrow { justify-content: center; }
.hrev-intro { color: var(--on-brown-soft); max-width: 34rem; margin: 0 auto; }

.hrev-carousel {
  position: relative;
  width: 100%;
  max-width: 54rem;
  margin: 0 auto;
}

/* a single vast quotemark, ghosted behind the words */
.hrev-carousel::before {
  content: '\201C';
  position: absolute;
  top: clamp(-3.2rem, -5vh, -2.2rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(7rem, 16vw, 11rem);
  line-height: 1;
  color: rgba(198, 166, 107, 0.16);
  pointer-events: none;
}

.rv-view { overflow: hidden; }

.rv-track {
  display: flex;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.rv-track:active { cursor: grabbing; }

.rv-slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  backface-visibility: hidden;
}

.rv-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.45;
  color: var(--on-brown);
  max-width: 40rem;
  margin: 0 auto;
  text-wrap: pretty;
}

.rv-cite {
  margin-top: 1.8rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.rv-cite::before {
  content: '';
  display: block;
  width: 1px;
  height: 2rem;
  margin: 0 auto 1rem;
  background: linear-gradient(transparent, var(--gold));
}

.rv-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}

.rv-dash {
  width: 24px;
  height: 44px;
  padding: 0;
  border: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.rv-dash::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(198, 166, 107, 0.32);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.rv-dash.active::after {
  background: var(--gold);
  transform: scaleY(2);
  box-shadow: 0 0 12px rgba(198, 166, 107, 0.8);
}

.hrev-source { margin-top: clamp(2rem, 5vh, 2.8rem); }

/* ============================================================
   BOOKING — cream. The ask, beside a photo of her at work.
   ============================================================ */

.hbook { padding: var(--sp-vast) var(--gutter); }

.hbook-grid {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(2.4rem, 6vw, 5rem);
  align-items: center;
}

.hbook-photo {
  max-width: 26rem;
  width: 100%;
  justify-self: center;
  aspect-ratio: 4 / 5;
  padding: clamp(0.4rem, 1vw, 0.65rem);
  border: 1px solid var(--rule-gold);
  display: flex;
}
.hbook-photo img { width: 100%; height: 100%; object-fit: cover; }

.hbook-inner { max-width: 36rem; }

.hbook .h-title {
  color: transparent;
  background: linear-gradient(120deg, var(--deep-gold) 0%, var(--bronze) 45%, var(--brown) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hbook-intro { color: var(--charcoal); }

.hbook-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--brown);
  margin: 1.2rem 0 2.2rem;
}

.hbook-hint { font-size: 0.9375rem; color: var(--charcoal-soft); margin-top: 1.4rem; }
.hbook-alt { font-size: 0.9375rem; color: var(--charcoal-soft); margin-top: 0.8rem; }
.hbook-alt a { color: var(--bronze); text-decoration: none; border-bottom: 1px solid var(--rule-gold); }
.hbook-alt a:hover { color: var(--brown); border-color: var(--brown); }

@media (min-width: 900px) {
  .hbook-grid { grid-template-columns: 0.85fr 1.15fr; }
  .hbook-photo { justify-self: start; transform: rotate(1.2deg); }
}

@media (max-width: 899px) {
  .hbook-inner { margin: 0 auto; text-align: center; }
  .hbook-inner .eyebrow { justify-content: center; }
  .hbook-inner .eyebrow::before { content: ''; flex: 1; height: 1px; background: var(--rule-gold); }
  .hbook-photo { max-width: 20rem; }
}

/* ============================================================
   ENQUIRY — brown, quiet and functional. The form itself is unchanged.
   ============================================================ */

.henq { padding: var(--sp-lg) var(--gutter); }

.henq-panel {
  max-width: 46rem;
  margin: 0 auto;
}

.henq-copy { margin-bottom: 1.8rem; max-width: var(--measure); }
.henq-copy > p:not(.eyebrow):not(.henq-note) { color: var(--on-brown-soft); }

.henq-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem !important;
  color: var(--gold) !important;
  margin-top: 0.8rem;
}

/* ============================================================
   WHERE TO FIND ME — cream. Both clinics side by side, replacing the
   old Clinics page, the dental aside and the contact block. No map
   windows, a Get directions button on each.
   ============================================================ */

.hfind { padding: var(--sp-lg) var(--gutter); }

.hfind-top {
  max-width: 72rem;
  margin: 0 auto clamp(2.4rem, 5vw, 3.6rem);
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hfind-head { max-width: var(--measure); }

.hfind-photo {
  aspect-ratio: 16 / 9;
  padding: clamp(0.4rem, 1vw, 0.65rem);
  border: 1px solid var(--rule-gold);
  display: flex;
}
.hfind-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .hfind-top { grid-template-columns: 0.9fr 1.1fr; }
}

.hfind-cols {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

@media (min-width: 820px) { .hfind-cols { grid-template-columns: 1fr 1fr; } }

.hfind-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border: 1px solid var(--rule-gold);
  background: rgba(240, 233, 223, 0.55);
}

.hfind-name { font-size: clamp(1.7rem, 3vw, 2.1rem); margin-bottom: 0.7rem; }
.hfind-what { margin-bottom: 1.6rem; }

.hfind-facts {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-gold);
  margin-bottom: 1.8rem;
}

.hfind-facts dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-top: 0.3em;
}

.hfind-facts dd { color: var(--charcoal); }
.hfind-facts a { color: var(--brown); text-decoration: none; border-bottom: 1px solid var(--rule-gold); }
.hfind-facts a:hover { border-color: var(--brown); }

.hfind-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

@media (max-width: 480px) {
  .hfind-facts { grid-template-columns: 1fr; gap: 0.2rem; }
  .hfind-facts dd + dt { margin-top: 0.7rem; }
  .hfind-actions .btn { width: 100%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hh-plane { animation: none; }
  .hcred-list.is-marquee { animation: none; }
  .hphil-quote.is-split .w { transition: none; opacity: 1; transform: none; }
  .hmenu-board .menu-list li::before,
  .hmenu-board .menu-list li::after { transition: none; }
  .rv-dash::after { transition: none; }
  .rv-track { cursor: default; }
  .hintro-side { transition: none; }
}

/* ---------- wide screens ---------- */
@media (min-width: 1700px) {
  .hintro { max-width: 86rem; }
  .hmenu-board { max-width: 86rem; }
  .hjour-grid { max-width: 86rem; }
  .habout-inner { max-width: 82rem; }
  .ig-grid { max-width: 72rem; }
  .hrev-carousel { max-width: 60rem; }
  .hrev-head { max-width: 52rem; }
  .hfind-top, .hfind-cols, .hbook-grid { max-width: 82rem; }

  .hh-c1 { --w: clamp(190px, 21vw, 370px); left: calc(50% - clamp(390px, 39vw, 680px)); }
  .hh-c4 { --w: clamp(175px, 19.5vw, 345px); right: calc(50% - clamp(360px, 36vw, 630px)); }
}