/* ==========================================================================
   CURA Skin
   --------------------------------------------------------------------------
   The palette is LOCKED. The eight values in :root are the brand and must not
   be changed or added to. Everything else derives from them.
   Verified against the live Wix theme, 2026-09-03.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Locked brand palette — do not edit */
  --cream:        #F2EDE9;
  --warm:         #EAE4E0;
  --taupe:        #D1C9C4;
  --blush:        #E2C3B3;
  --blush-light:  #EDDCD2;
  --ink:          #1A1A1A;
  --ink-muted:    #4D4D4D;
  --sage:         #7B8A8B;

  /* Derived — tints of the locked set only, no new hues */
  --hairline:       rgba(26, 26, 26, .13);
  --hairline-soft:  rgba(26, 26, 26, .08);
  --hairline-dark:  rgba(242, 237, 233, .16);
  --ink-on-dark:    var(--cream);
  --muted-on-dark:  rgba(242, 237, 233, .82);
  --shadow-soft:    0 1px 2px rgba(26, 26, 26, .04), 0 8px 24px rgba(26, 26, 26, .05);

  /* Type */
  --display: "Jost", "Futura", "Avenir Next", "Century Gothic", sans-serif;
  --body:    "Mulish", "Avenir", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter:     clamp(20px, 5vw, 48px);
  --measure:    68ch;
  --page:       1220px;
  --section-y:  clamp(60px, 8vw, 112px);
  --radius:     3px;

  /* Sticky chrome. The nav and the pricing jump bar stack, so both heights
     live here — hard-coding either one leaves a strip of page showing through
     the gap between them. Each is padding plus a line-height:1 text box, so
     the sums below are exact as long as the rules they cite stay in step. */
  --nav-h:  49px;   /* .nav__link:  17 + 15 line box + 17 */
  --jump-h: 46px;   /* .jump a:     15 + 12.5 line box + 15 + 2 tab rule + 1 */
}

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 18px/1.75 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: inherit; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 12px 20px; font: 500 14px/1 var(--body);
}
.skip:focus { left: 0; }

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

/* --- Layout primitives ---------------------------------------------------- */

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 68px); }
.section--warm { background: var(--warm); }
.section--blush { background: var(--blush-light); }
.section--dark { background: var(--ink); color: var(--ink-on-dark); }
.section--dark .lede,
.section--dark .eyebrow { color: var(--muted-on-dark); }

.stack > * + * { margin-top: 1.1em; }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  letter-spacing: .01em;
}

.h-hero    { font-size: clamp(38px, 6.4vw, 72px); letter-spacing: .03em; }
.h-page    { font-size: clamp(31px, 4.6vw, 52px); }
.h-section { font-size: clamp(25px, 3.4vw, 38px); }
.h-block   { font-size: clamp(20px, 2.2vw, 25px); font-weight: 400; }

.eyebrow {
  display: block;
  font: 500 13.5px/1.3 var(--display);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 18px;
}

.lede {
  font-size: clamp(18.5px, 1.6vw, 21.5px);
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: var(--measure);
  margin: 22px 0 0;
}

p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(23px, 2.8vw, 31px); margin: 2em 0 .6em; }
.prose h3 { font-size: 20px; font-weight: 400; margin: 1.7em 0 .5em; }
.prose ul { margin: 0 0 1.2em; padding-left: 1.15em; }
.prose li { margin-bottom: .4em; }
.prose strong { font-weight: 700; }

.num { font-variant-numeric: tabular-nums; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 500 14px/1 var(--display);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 32px;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: var(--ink-muted); }
.btn--blush { background: var(--blush); color: var(--ink); }
.btn--blush:hover { background: var(--blush-light); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.section--dark .btn--ghost { border-color: var(--blush); color: var(--blush); }
.section--dark .btn--ghost:hover { background: var(--blush); color: var(--ink); }
.btn--sm { padding: 11px 20px; font-size: 12.5px; letter-spacing: .13em; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* --- Header --------------------------------------------------------------- */

/* The masthead's height is fractional — its logo is sized in vw — so the seam
   where its blush ends and the nav begins can land in the middle of a device
   pixel. Scrolled back up, the rounding on that row can fall on the blush side
   and leave a stray pink hairline sitting against the bar. Painting the
   masthead's own last three pixels in ink means the seam blends ink into ink
   whichever way it rounds; the logo is inset far enough not to touch them. */
.masthead {
  background: var(--blush);
  box-shadow: inset 0 -3px 0 var(--ink);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: center;
  padding-block: clamp(22px, 3.4vw, 40px);
  position: relative;
}
.masthead__logo { width: clamp(190px, 26vw, 310px); }
.masthead__logo img { width: 100%; }

.masthead__cart {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}

/* Both of the bar's edges land on fractions of a device pixel — the masthead
   above it resolves to a fractional height (its logo is sized in vw), and 49px
   of bar is itself fractional once Windows display scaling is in play — so the
   boundary row at each edge is blended with whatever sits behind it rather
   than painted cleanly. Above, that is the blush masthead; below, it is
   whatever has scrolled under the bar, which on the home page is the blush
   hero card. Either way the result is a stray pink hairline hugging the bar,
   and it only shows up once the page has been scrolled far enough for those
   things to be there — hence scroll down, come back up, and there it is.
   These two shadows (no blur, no spread) paint solid ink a few pixels past
   each edge, so the blend is ink into ink whichever way the rounding falls.
   Nothing moves: the pixels above land on the masthead's own bottom edge and
   the ones below simply read as a fractionally taller bar. */
.nav {
  background: var(--ink); position: sticky; top: 0; z-index: 90;
  box-shadow: 0 -3px 0 var(--ink), 0 2px 0 var(--ink);
}
/* The bar is one centred cluster — the links and the booking button together —
   so it sits under the centred masthead logo instead of splitting to the two
   edges. Centring only holds while the cluster fits: a flex row wider than its
   container spills past BOTH edges, and the left-hand items would be pushed
   off-screen where nothing can scroll them back. The tracking and padding
   below, and the drawer hand-off at 1220px, are what keep it fitting. */
.nav__inner {
  display: flex; align-items: center; justify-content: center; gap: 26px;
}

.nav__list {
  display: flex; align-items: stretch; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 17px 9px;
  font: 500 15px/1 var(--display); letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-on-dark); text-decoration: none;
  transition: color .16s ease;
  white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.nav__link:hover { color: var(--blush); }
.nav__link[aria-current="page"] { color: var(--cream); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 10px;
  height: 1px; background: var(--blush);
}
.nav__caret { width: 8px; height: 8px; flex: none; opacity: .7; }

.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: var(--ink); border-top: 1px solid var(--hairline-dark);
  list-style: none; margin: 0; padding: 6px 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  box-shadow: 0 14px 34px rgba(26, 26, 26, .3);
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a {
  display: block; padding: 12px 20px;
  font: 400 15.5px/1.35 var(--body); letter-spacing: 0; text-transform: none;
  color: var(--muted-on-dark); text-decoration: none;
}
.nav__sub a:hover { color: var(--blush); background: rgba(242, 237, 233, .05); }

.nav__book {
  font: 500 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--blush);
  padding: 11px 16px; border-radius: var(--radius); text-decoration: none;
  white-space: nowrap; transition: background-color .16s ease;
}
.nav__book:hover { background: var(--blush-light); }

/* Drawer chrome exists in the markup at every width; it is only ever shown
   inside the mobile media query below. Without these three rules the close
   button and scrim leak onto the desktop nav. */
.nav__toggle,
.nav__close,
.nav__scrim { display: none; }

.nav__toggle {
  background: none; border: 0; cursor: pointer;
  padding: 16px 0; color: var(--cream);
}
.nav__toggle svg { width: 22px; height: 22px; }

/* Hand over to the drawer while the bar still fits. Even tightened, the seven
   items plus the booking button need more width than .wrap allows below about
   1220px; left on the desktop layout they push the whole page sideways. */
@media (max-width: 1220px) {
  :root { --nav-h: 54px; }
  /* Drawer layout: the menu button and the booking button take an edge each,
     so there is nothing in the middle of the bar to centre. */
  .nav__inner { justify-content: space-between; gap: 16px; }
  .nav__toggle { display: block; }
  /* The scrim is a full-viewport fixed box that comes after the drawer in the
     markup, so without an explicit order it paints over the open drawer and
     swallows every tap and scroll gesture meant for the menu. These three
     z-indexes are what make the drawer usable: scrim, then panel, then the
     close button on top of both. */
  .nav__list {
    position: fixed; inset: 0 0 0 auto; z-index: 2; width: min(360px, 86vw);
    background: var(--ink); flex-direction: column; align-items: stretch;
    padding: 84px 0 calc(40px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .26s ease, box-shadow .26s ease;
  }
  /* The shadow belongs to the open drawer only. Parked off-canvas, the panel's
     left edge sits exactly on the viewport's right edge, so a shadow cast from
     there showed as a grey band down the right side of every page on phones. */
  .nav[data-open="true"] .nav__list {
    transform: none; box-shadow: -18px 0 44px rgba(26, 26, 26, .34);
  }
  /* Brighter than the desktop bar: the drawer is read at arm's length in
     daylight, and the two levels need to separate from each other as well as
     from the ink behind them. Top level goes to full cream, sub-items sit a
     step below it, and their panel is tinted enough to read as nested. */
  .nav__link {
    padding: 15px var(--gutter); font-size: 14.5px;
    color: var(--cream);
  }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--blush); }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: 0; padding: 0 0 8px;
    background: rgba(242, 237, 233, .08);
  }
  .nav__sub a {
    padding: 9px var(--gutter) 9px calc(var(--gutter) + 16px);
    color: rgba(242, 237, 233, .88);
  }
  .nav__caret { display: none; }
  .nav__scrim {
    display: block;
    position: fixed; inset: 0; z-index: 1; background: rgba(26, 26, 26, .5);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
  }
  .nav[data-open="true"] .nav__scrim { opacity: 1; visibility: visible; }
  .nav__close {
    position: fixed; top: 18px; right: 18px; z-index: 3;
    background: none; border: 0; color: var(--cream); cursor: pointer; padding: 8px;
  }
  .nav[data-open="true"] .nav__close { display: block; }
}

/* --- Hero ----------------------------------------------------------------- */

.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,.34) 0%, rgba(26,26,26,.15) 42%, rgba(26,26,26,.68) 100%);
}
.hero__inner {
  position: relative; z-index: 1;
  min-height: clamp(420px, 62vh, 640px);
  display: flex; align-items: flex-end;
  padding-block: clamp(50px, 8vw, 90px);
}
.hero__card {
  background: var(--blush);
  padding: clamp(26px, 3.4vw, 44px);
  max-width: 540px;
  border-radius: var(--radius);
}
.hero__card .h-hero { font-size: clamp(27px, 3.6vw, 42px); letter-spacing: .01em; }
.hero__card p { color: var(--ink-muted); margin-top: 14px; }

/* On a phone the card is the whole first screen and then some: every clamp in
   it is already pinned to its minimum, so the desktop sizes carry over intact
   and the headline alone runs to five lines. Tighten the type, the padding and
   the leading here only — none of this is reached above 700px. */
@media (max-width: 700px) {
  .hero__inner {
    min-height: clamp(340px, 52vh, 460px);
    padding-block: 32px;
  }
  .hero__card { padding: 22px 20px; }
  .hero__card .eyebrow {
    font-size: 11.5px; letter-spacing: .18em; margin-bottom: 10px;
  }
  .hero__card .h-hero { font-size: 22.5px; line-height: 1.2; }
  .hero__card p {
    font-size: 15px; line-height: 1.55; margin-top: 10px;
  }
  .hero__card .btn-row { gap: 10px; margin-top: 18px; }
  .hero__card .btn {
    padding: 13px 22px; font-size: 12px; letter-spacing: .12em;
  }
}

.hero--plain { background: var(--warm); color: var(--ink); }
.hero--plain .hero__inner { min-height: 0; display: block; padding-block: clamp(52px, 7vw, 92px); }

/* --- Page header (interior pages) ----------------------------------------- */

.pagehead { background: var(--warm); padding-block: clamp(48px, 6.5vw, 88px); }
.pagehead .lede { margin-top: 20px; }
.crumbs {
  font: 400 14px/1.4 var(--body); color: var(--ink-muted);
  margin: 0 0 20px; display: flex; gap: 8px; flex-wrap: wrap;
}
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--taupe); }
.crumbs a:hover { border-color: var(--ink); }

/* --- Pillars -------------------------------------------------------------- */

.pillars {
  display: grid; gap: 1px; background: var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  border: 1px solid var(--hairline);
}
.pillar { background: var(--cream); padding: 0 0 32px; display: flex; flex-direction: column; overflow: hidden; }
.section--warm .pillar { background: var(--warm); }
/* Full-width treatment photo in place of the old 62px icon. No dedicated
   per-treatment video files were supplied, so this uses the same still
   photos, sized to read as real photography rather than a small icon. */
.pillar__media { display: block; }
.pillar__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pillar__icon { width: 62px; margin-bottom: 20px; opacity: .92; }
.pillar h3 {
  font: 500 13.5px/1.35 var(--display); letter-spacing: .14em; text-transform: uppercase;
  margin: 24px 26px 12px;
}
.pillar p { font-size: 16px; line-height: 1.65; color: var(--ink-muted); margin: 0 26px; }
.pillar__link {
  margin: auto 26px 0; padding-top: 20px;
  font: 500 12.5px/1 var(--display); letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px;
}
.pillar__link:hover { color: var(--sage); }
.pillar__link::after { content: "→"; transition: transform .16s ease; }
.pillar__link:hover::after { transform: translateX(3px); }

/* --- Price ledger --------------------------------------------------------- */

.collection { border-top: 1px solid var(--hairline); padding-top: 34px; margin-top: 54px; }
.collection:first-of-type { margin-top: 0; }
.collection__head { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .collection__head { grid-template-columns: 1fr 1fr; gap: 46px; } }

/* Six collections carry no phase list, so their second column is an empty div.
   Give the row back to the intro rather than leaving half of it blank, but hold
   the text to a readable measure instead of letting it run the full width.
   Browsers without :has() keep the two-column layout, which is what they had. */
@media (min-width: 900px) {
  .collection__head:has(> div:last-child:empty) { grid-template-columns: minmax(0, 1fr); }
  .collection__head:has(> div:last-child:empty) > div:first-child { max-width: 76ch; }
}

.collection__title { font-size: clamp(23px, 2.7vw, 31px); }
.collection__sub {
  font: 500 12.5px/1.4 var(--display); letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage); margin: 0 0 12px;
}
.collection__blurb { color: var(--ink-muted); font-size: 17px; margin: 14px 0 0; }

.phases { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.phase {
  border-left: 2px solid var(--blush); padding: 2px 0 2px 16px;
}
.phase__label { font: 600 15px/1.45 var(--body); margin: 0 0 4px; }
.phase__spec {
  font: 400 13.5px/1.45 var(--body); color: var(--sage);
  font-variant-numeric: tabular-nums; margin: 0 0 5px;
}
.phase__targets { font-size: 15px; line-height: 1.6; color: var(--ink-muted); margin: 0; }

.ledger { margin-top: 32px; border-top: 1px solid var(--hairline); }
.ledger__group {
  font: 600 12.5px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage); margin: 0; padding: 20px 0 10px;
}
.ledger > .ledger__group:first-child { padding-top: 16px; }

/* Price/duration groups of single-area chips (used by the Bare Collection so
   areas that share a price sit together, instead of one row each). */
.ledger--chips { border-top: 1px solid var(--hairline); }
.chipgroup { padding: 26px 0; border-bottom: 1px solid var(--hairline-soft); }
.ledger--chips > .chipgroup:first-child { padding-top: 22px; }
.chipgroup__head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px;
}
.chipgroup__price {
  font: 600 21px/1 var(--body); font-variant-numeric: tabular-nums; color: var(--ink);
}
.chipgroup__dur {
  font: 400 14.5px/1 var(--body); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.chipgroup__items { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 11px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: 400 15px/1 var(--body);
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.chip:hover { background: var(--blush-light); border-color: var(--blush); }
/* Placeholder chip: price/time are final, the booking link isn't wired to a
   specific Setmore product yet, so it opens general booking instead. Remove
   this modifier once a product ID is supplied for the area. */
.chip--pending { border-style: dashed; }
.ledger__row {
  display: grid; align-items: center; gap: 12px 20px;
  grid-template-columns: 1fr auto;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
@media (min-width: 700px) {
  /* The duration and price tracks are fixed so the columns line up all the way
     down the page. Each track has to clear the longest string it carries, or
     that text runs out of its column and collides with the one beside it — at
     90px the duration did exactly that. Measured in Mulish: the durations top
     out at 162px on "1 hr 30 mins per session", the prices at 67px on
     "Custom". */
  .ledger__row { grid-template-columns: minmax(0, 1fr) 174px 88px auto; }
}
.ledger__name { font-size: 17px; line-height: 1.45; margin: 0; max-width: none; }
.ledger__detail { display: block; margin-top: 5px; font-size: 14.5px; color: var(--ink-muted); }
.ledger__price-label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 400; line-height: 1.35; }
@media (min-width: 700px) {
  .ledger__row--package .ledger__name { grid-column: 1; }
  .ledger__row--package .ledger__dur { grid-column: 2; }
  .ledger__row--package .ledger__book { grid-column: 4; }
}
/* No nowrap: if a duration ever outgrows its track it should wrap onto a second
   line rather than spill across the price. */
.ledger__dur {
  font: 400 14.5px/1.35 var(--body); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.ledger__price {
  font: 600 18.5px/1 var(--body); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 700px) { .ledger__price { text-align: right; } }
.ledger__price--free { color: var(--sage); font-weight: 500; }
.ledger__book {
  font: 500 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 18px; border: 1px solid var(--ink); border-radius: var(--radius);
  text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.ledger__book:hover { background: var(--ink); color: var(--cream); }

/* Narrow screens: name, duration and price stack down the first column and
   Book sits beside them, centred against the whole stack. (This replaces a
   rule for a .ledger__meta wrapper that no page actually contains, so Book
   was being pinned to the first two rows of a three-row stack.) */
@media (max-width: 699px) {
  .ledger__name  { grid-column: 1; grid-row: 1; }
  .ledger__dur   { grid-column: 1; grid-row: 2; }
  .ledger__price { grid-column: 1; grid-row: 3; }
  .ledger__book  { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

.notes { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.notes li {
  font-size: 15px; line-height: 1.6; color: var(--ink-muted);
  padding-left: 16px; position: relative;
}
.notes li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--blush);
}

/* --- Sticky collection index ---------------------------------------------- */


.jump {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 44px;
}
.jump__scroll {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  scroll-behavior: auto; touch-action: pan-y pinch-zoom;
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.jump__scroll::-webkit-scrollbar { display: none; }
.jump__group { display: flex; flex: none; }
.jump__scroll a { cursor: inherit; -webkit-user-drag: none; -webkit-touch-callout: none; }
.jump__scroll.is-scrubbing, .jump__scroll.is-scrubbing a { cursor: grabbing; }
.jump a {
  flex: none; padding: 15px 16px;
  font: 500 12.5px/1 var(--display); letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.jump a:hover { color: var(--ink); border-bottom-color: var(--blush); }

/* --- Concern index -------------------------------------------------------- */

.index { border-top: 1px solid var(--hairline); }
.index__row {
  display: grid; gap: 6px 32px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--hairline-soft);
}
/* The links column sizes itself to its tags, so a row with three of them
   widens it enough to crush the description beside it into a narrow strip.
   The cap goes on the links block itself, not the grid track: a capped track
   still stretches to fit a tag row it cannot wrap, a capped block wraps. It
   sits just above the widest pair on the page (Age-Defy + Regenerative, about
   473px), so no two-tag row wraps and anything more drops to a second line. */
@media (min-width: 800px) {
  .index__row { grid-template-columns: 250px 1fr auto; }
  .index__links { max-width: 500px; }
  /* Tags sit against the right edge, including any that wrap onto a second
     line, so every row's tags finish flush with the rows above and below. */
  .index__links,
  .index__own-line { justify-content: flex-end; }
}
.index__name { font: 400 21px/1.3 var(--display); margin: 0; }
.index__desc { font-size: 16px; line-height: 1.62; color: var(--ink-muted); margin: 0; }
.index__links { display: flex; flex-wrap: wrap; gap: 7px; }
/* A tag that always starts its own line, beneath the row's other tags. */
.index__own-line { flex-basis: 100%; display: flex; }
.index__links a {
  font: 500 12px/1 var(--display); letter-spacing: .11em; text-transform: uppercase;
  padding: 9px 14px; background: var(--warm); border-radius: var(--radius);
  text-decoration: none; white-space: nowrap; transition: background-color .16s ease;
}
.index__links a:hover { background: var(--blush); }
.section--warm .index__links a { background: var(--cream); }

/* --- Cards (memberships, articles) ---------------------------------------- */

.cards {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
/* Fixed 2-up layout — used where cards should stack two-over-two rather
   than reflow to as many columns as will fit (e.g. the Glogau stages). */
@media (min-width: 620px) { .cards--pair { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--cream); border: 1px solid var(--hairline);
  padding: 30px 28px 32px; display: flex; flex-direction: column;
  border-radius: var(--radius);
}
.section--warm .card { background: var(--warm); }
.card--feature { border-color: var(--blush); border-width: 2px; }
.card__eyebrow {
  font: 500 12px/1.35 var(--display); letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage); margin: 0 0 10px;
}
.card h3 { font-size: 25px; margin-bottom: 6px; }
.card__tagline { font-size: 16px; color: var(--ink-muted); margin: 0 0 20px; }
.card__price {
  font: 300 38px/1 var(--display); font-variant-numeric: tabular-nums;
  margin: 0 0 4px;
}
.card__period { font-size: 14.5px; color: var(--ink-muted); margin: 0 0 22px; }
.card__list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.card__list li {
  font-size: 15.8px; line-height: 1.55; padding-left: 19px; position: relative;
  color: var(--ink-muted);
}
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 1px; background: var(--blush);
}
.card .btn { margin-top: auto; }
.card__img { margin: -30px -28px 24px; }
.card__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* --- Split (image + text) ------------------------------------------------- */

.split { display: grid; gap: clamp(28px, 4.5vw, 60px); align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.split__media img { width: 100%; border-radius: var(--radius); }

/* --- Spec list (technology) ----------------------------------------------- */

.specs { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.spec h3 {
  font: 500 12.5px/1.35 var(--display); letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage); margin: 0 0 14px; padding-bottom: 11px;
  border-bottom: 1px solid var(--hairline);
}
.section--dark .spec h3 { color: var(--blush); border-color: var(--hairline-dark); }
.spec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.spec li { font-size: 15.8px; line-height: 1.6; color: var(--ink-muted); }
.section--dark .spec li { color: var(--muted-on-dark); }

/* --- Wavelengths ---------------------------------------------------------- */

.waves { display: grid; gap: 1px; background: var(--hairline-dark); border: 1px solid var(--hairline-dark); }
@media (min-width: 760px) { .waves { grid-template-columns: repeat(4, 1fr); } }
.wave { background: var(--ink); padding: 26px 22px 28px; }
.wave__nm {
  font: 300 30px/1 var(--display); font-variant-numeric: tabular-nums;
  color: var(--blush); margin: 0 0 8px;
}
.wave__name {
  font: 500 12.5px/1.35 var(--display); letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 10px; color: var(--cream);
}
.wave__targets { font-size: 15px; line-height: 1.6; color: var(--muted-on-dark); margin: 0; }

/* --- Accordion (FAQ) ------------------------------------------------------ */

.accordion { border-top: 1px solid var(--hairline); }
.accordion details { border-bottom: 1px solid var(--hairline-soft); }
.accordion summary {
  cursor: pointer; list-style: none; padding: 19px 40px 19px 0; position: relative;
  font: 400 19.5px/1.45 var(--display); color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: rotate(45deg); transition: transform .2s ease;
}
.accordion details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.accordion__body { padding: 0 40px 24px 0; color: var(--ink-muted); font-size: 17px; }
.accordion__body p { max-width: 62ch; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.tabs button {
  font: 500 12.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 20px; border: 1px solid var(--hairline); background: none;
  border-radius: var(--radius); cursor: pointer; color: var(--ink-muted);
  transition: all .16s ease;
}
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* --- Before / after slider ------------------------------------------------ */

/* min() keeps the 300px floor from outgrowing the gutters on a 320px phone,
   where a bare minmax(300px, 1fr) pushed the page 15px wide. */
.ba { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ba__item { }
.ba__frame {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 1 / 1; background: var(--warm); touch-action: none; cursor: ew-resize;
  border: 1px solid var(--hairline);
}
.ba__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--cream); transform: translateX(-1px); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(26,26,26,.18);
}
.ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: var(--cream);
  box-shadow: 0 2px 10px rgba(26,26,26,.28);
}
.ba__tag {
  position: absolute; bottom: 12px; z-index: 2;
  font: 500 10px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(26,26,26,.72); color: var(--cream); padding: 7px 11px;
  border-radius: 2px; pointer-events: none;
}
.ba__tag--before { left: 12px; }
.ba__tag--after { right: 12px; }
.ba__caption { margin-top: 14px; }
.ba__caption strong { display: block; font: 500 16px/1.4 var(--body); }
.ba__caption span { font-size: 15px; color: var(--ink-muted); }
.ba__range { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: ew-resize; margin: 0; }

/* --- Steps ---------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 20px; }
.steps li {
  counter-increment: s; padding-left: 48px; position: relative;
  font-size: 17px; line-height: 1.65;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font: 400 14.5px/1 var(--display); font-variant-numeric: tabular-nums;
  color: var(--sage); letter-spacing: .06em;
}

/* --- Downloads ------------------------------------------------------------ */

.downloads { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.download {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border: 1px solid var(--hairline);
  background: var(--cream); border-radius: var(--radius);
  text-decoration: none; transition: border-color .16s ease, background-color .16s ease;
}
.download:hover { border-color: var(--ink); background: var(--warm); }
.download__icon { flex: none; width: 20px; color: var(--sage); }
.download__label { font: 500 16px/1.35 var(--body); }
.download__meta { font-size: 13.5px; color: var(--ink-muted); }

/* --- CTA band ------------------------------------------------------------- */

.cta { background: var(--blush); }
.cta__inner {
  display: grid; gap: 26px; align-items: center;
  padding-block: clamp(44px, 6vw, 76px);
}
@media (min-width: 860px) { .cta__inner { grid-template-columns: 1fr auto; gap: 50px; } }
.cta h2 { font-size: clamp(24px, 3vw, 34px); }
.cta__heading { display: flex; align-items: center; gap: 16px; }
.cta__heading .heart { margin: 0; flex: none; }
.cta p { color: var(--ink-muted); margin: 12px 0 0; }

/* --- Notice --------------------------------------------------------------- */

.notice {
  border-left: 3px solid var(--blush); background: var(--blush-light);
  padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0;
}
.notice p { font-size: 16.5px; margin-bottom: .6em; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { font-weight: 700; }

/* --- Footer --------------------------------------------------------------- */

.footer { background: var(--ink); color: var(--muted-on-dark); padding-block: clamp(48px, 6vw, 76px) 34px; }
.footer__grid {
  display: grid; gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  padding-bottom: 38px; border-bottom: 1px solid var(--hairline-dark);
}
.footer h2 {
  font: 500 12.5px/1.35 var(--display); letter-spacing: .18em; text-transform: uppercase;
  color: var(--blush); margin: 0 0 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { text-decoration: none; font-size: 15.8px; }
.footer a:hover { color: var(--blush); }
.footer address { font-style: normal; font-size: 15.8px; line-height: 1.75; }
.footer__hours { display: grid; gap: 7px; font-size: 15.4px; }
.footer__hours div { display: flex; justify-content: space-between; gap: 18px; max-width: 300px; }
.footer__hours dt { color: var(--muted-on-dark); }
.footer__hours dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--cream); }
.footer__circle {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; max-width: 240px;
}
.footer__circle .heart { width: 32px; flex: none; }
.footer__circle span { font-size: 15.8px; line-height: 1.4; }
.footer__base {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding-top: 26px; font-size: 14px;
}
.footer__social { display: flex; gap: 16px; }

/* Social buttons. Blush on the near-black footer so they read as the one
   bright control down there, not another grey text link. */
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; min-height: 46px;
  background: var(--blush); color: var(--ink);
  border-radius: 999px; text-decoration: none;
  font: 500 13.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .16s ease, transform .16s ease;
}
.social__btn:hover { background: var(--blush-light); transform: translateY(-1px); }
.social__btn:focus-visible { outline-offset: 4px; }
.footer .social__btn { font-size: 13.5px; }
.social__icon { width: 20px; height: 20px; flex: none; }
.social__handle {
  margin: 14px 0 0; font-size: 14.6px; color: var(--muted-on-dark);
  font-variant-numeric: tabular-nums;
}

/* --- Back to top ------------------------------------------------------------ */

.to-top {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 110;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--cream);
  border: 0; border-radius: 50%;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background-color .16s ease;
}
.to-top[data-visible="true"] { opacity: 1; transform: none; }
.to-top:hover { background: var(--sage); }
.to-top[hidden] { display: none; }

@media (min-width: 700px) {
  .to-top { left: 26px; bottom: 26px; }
}

/* The introductory offer banner is a full-width sheet on phones, so give it
   the corner to itself while it is open rather than risk overlapping it. */
.promo[data-open="true"] ~ .to-top { opacity: 0; pointer-events: none; }

/* --- Introductory offer banner -------------------------------------------- */

/* A corner card, not a modal: it never covers the page, never locks scrolling
   and never traps focus. Bottom-right on desktop, a bottom sheet on phones
   where a floating corner card would either be too small to read or cover
   half the screen. Source photo is 275px wide, so it is never shown wider. */

.promo[hidden] { display: none; }

.promo {
  position: fixed;
  z-index: 120;
  inset: auto 0 0 0;                 /* mobile: pinned to the bottom edge */
  padding: 12px;
  pointer-events: none;              /* only the card itself is clickable */
}

@media (min-width: 700px) {
  .promo {
    inset: auto 0 0 auto;            /* desktop: bottom-right corner */
    padding: 26px;
    max-width: 408px;
  }
}

.promo__panel {
  position: relative;
  pointer-events: auto;
  background: var(--blush);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(26, 26, 26, .22), 0 2px 6px rgba(26, 26, 26, .1);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.2, .7, .3, 1);
}
.promo[data-open="true"] .promo__panel { opacity: 1; transform: none; }

/* Keep the full welcome offer readable at every screen size. */
.promo__media { display: block; background: var(--blush-light); }
.promo__media img { width: 100%; height: 100%; object-fit: cover; }

/* A shallow image strip leaves room for the complete copy and booking button. */

.promo__panel { display: block; }

@media (max-width: 699px) {
  .promo__media img { height: 80px; }
  .promo__body { padding: 14px 20px; }
  .promo__title { font-size: 18px; margin-bottom: 7px; }
  .promo__eyebrow { font-size: 10px; letter-spacing: .2em; margin-bottom: 6px; }
  .promo__lede { font-size: 14px; line-height: 1.5; margin-bottom: 9px; }
  .promo__foot { font-size: 13px; margin-bottom: 11px; }
  .promo__foot .heart { width: 19px; }
  .promo__cta { width: 100%; min-height: 44px; padding: 12px 16px; font-size: 12.5px; }
}

@media (min-width: 700px) {
  .promo__panel { display: block; }     /* image becomes a top strip */
  .promo__media img { height: 104px; }
  .promo__body { padding: 18px 22px 20px; }
  .promo__eyebrow { margin-bottom: 9px; }
  .promo__title { font-size: 21px; margin-bottom: 9px; }
  .promo__lede { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
  .promo__note { font-size: 13.5px; line-height: 1.45; margin-bottom: 12px; }
  .promo__foot { margin-bottom: 14px; }
  .promo__cta { padding: 13px 22px; font-size: 13px; }
}

.promo__eyebrow {
  font: 500 11px/1 var(--display); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 11px;
}
.promo__title {
  font: 300 23px/1.2 var(--display);
  margin: 0 0 12px; text-wrap: balance; color: var(--ink);
}
.promo__lede { font-size: 15.5px; line-height: 1.55; margin: 0 0 10px; max-width: none; }
.promo__note {
  font-size: 14px; line-height: 1.55; font-style: italic;
  color: var(--ink-muted); margin: 0 0 14px; max-width: none;
}
.promo__foot {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; margin: 0 0 18px;
}
.promo__foot .heart { width: 24px; }
.promo__cta { width: 100%; }

.promo__close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; padding: 6px;
  display: grid; place-items: center;
  background: var(--cream); color: var(--ink);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 1px 4px rgba(26, 26, 26, .18);
  transition: background-color .16s ease;
}
.promo__close:hover { background: #fff; }
/* The visible dot stays small, but the touch area meets the 44px minimum. */
.promo__close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.promo__close svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .promo__panel { transition: none; transform: none; }
}

/* --- Heart mark ----------------------------------------------------------- */

/* The clinic's hand-drawn heart, the same mark used as the site icon. Used
   sparingly, only where warmth is the actual message: the consultation
   invitation, the referral programme, gifting. It is a signature, not
   decoration - adding it to every section would spend it. */

.heart { display: block; width: 44px; height: auto; flex: none; }
.heart--lg { width: 76px; }
.heart--sm { width: 30px; }

.heart-head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
}
.heart-head .eyebrow { margin: 0; }

.notice--heart { display: flex; gap: 18px; align-items: flex-start; }
.notice--heart .heart { margin-top: 2px; }

/* --- Utilities ------------------------------------------------------------ */

.center { text-align: center; }
.center .lede, .center p { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-l { margin-top: clamp(30px, 4vw, 52px); }
/* Clear both sticky bars when jumping to an anchor. */
.anchor { scroll-margin-top: calc(var(--nav-h) + var(--jump-h) + 24px); }

/* --- Membership: choose-one block ----------------------------------------- */

.card__choose {
  font: 500 10.5px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 10px;
}
.card__list--pick { margin-bottom: 20px; }
.card__list--pick li { color: var(--ink); }
.card__list--pick li::before { background: var(--sage); width: 10px; }

/* --- Biomedika skincare ---------------------------------------------------- */

/* Body copy under a split's heading and lede. The lede carries no bottom
   margin and a bare paragraph no top margin, so without this they touch. */
.split__body { margin-top: 20px; }
.split__body p { color: var(--ink-muted); }

/* Two headed blocks side by side, each opened by a blush rule. */
.duo { display: grid; gap: 40px clamp(28px, 4.5vw, 60px); }
@media (min-width: 880px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo__item { border-top: 2px solid var(--blush); padding-top: 26px; }
.duo__item p { color: var(--ink-muted); margin-top: 14px; }

/* Home-care price list. Product groups sit in two columns from 760px. The
   last group spans both and runs its own list across two matching columns,
   so an odd number of groups never leaves a hole at the end of the grid.
   That inner list is multi-column rather than a grid so products added later
   rebalance on their own; its gap is the same clamp as the grid's, which is
   what keeps its two columns flush with the groups above. */
.range {
  display: grid; gap: 46px clamp(28px, 4.5vw, 60px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range__group--wide { grid-column: 1 / -1; }
  .range__group--wide .range__list { columns: 2; column-gap: clamp(28px, 4.5vw, 60px); }
}
.range__title {
  font-size: clamp(22px, 2.4vw, 27px);
  padding-bottom: 14px; border-bottom: 1px solid var(--hairline);
}
.range__list { list-style: none; margin: 0; padding: 0; }
.range__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--hairline-soft);
  break-inside: avoid;
}
.range__name { font-size: 17px; line-height: 1.45; margin: 0; max-width: none; }
.range__desc {
  display: block; margin-top: 2px;
  font-size: 14.5px; line-height: 1.45; color: var(--ink-muted);
}
.range__price {
  font: 600 18.5px/1.45 var(--body); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.range__note { margin: 28px 0 0; font-size: 14.5px; color: var(--ink-muted); }

/* In-page link target that clears the sticky nav (no jump bar on this page). */
.anchor--nav { scroll-margin-top: var(--nav-h); }

/* Compact dropdowns: show the same destinations on desktop and mobile. */
.nav__disclosure { text-align: left; }
.nav a, .nav button { -webkit-tap-highlight-color: rgba(226, 195, 179, .18); }
.nav--enhanced .nav__item > .nav__sub { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); }
.nav--enhanced .nav__item.is-expanded > .nav__sub { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.nav__disclosure[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__sub a[aria-current="page"] { color: var(--blush); }
@media (max-width: 1220px) {
  .nav--enhanced .nav__item > .nav__sub { display: none; }
  .nav--enhanced .nav__item.is-expanded > .nav__sub { display: block; }
  .nav__disclosure { width: 100%; justify-content: space-between; min-height: 48px; }
  .nav__disclosure .nav__caret { display: block; width: 10px; height: 10px; }
  .nav__sub a { min-height: 44px; display: flex; align-items: center; }
}