/* ============================================================
   Katie Bees Beauty Salon — Main Stylesheet
   Design system: GL-003
   Fonts: Cormorant Garamond (headings), DM Sans (body), Parisienne (accent)
   Icons: Phosphor Icons (CDN)
   ============================================================ */

/* ── 1. CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  /* Colours */
  --color-primary:    #2D4829;
  --color-secondary:  #7A8C5E;
  --color-accent:     #C9A030;
  --color-neutral-0:  #FAF7F0;
  --color-neutral-1:  #F0EBE0;
  --color-neutral-2:  #DDD5C4;
  --color-neutral-3:  #9E9080;
  --color-neutral-4:  #4A3D35;
  --color-neutral-5:  #1E1611;
  --color-success:    #4A7C59;
  --color-error:      #B85450;

  /* Typography */
  --font-display:  'Parisienne', cursive;
  --font-heading:  'Cormorant Garamond', serif;
  /* Feminine, high-contrast couture display serif — used for the boutique-luxe
     brand headings (About "Beauty, considered." and the "Our Treatments" section
     heading). Chosen over Cormorant Garamond for those headlines because its
     elegant stroke contrast and softer terminals read more feminine and on-brand.
     FLAG FOR IRIS / GL-003 §3: add Playfair Display as the Heading Display face. */
  --font-heading-display: 'Playfair Display', 'Cormorant Garamond', serif;
  --font-body:     'DM Sans', sans-serif;

  --text-display: 3.5rem;
  --text-h1:      2.5rem;
  --text-h2:      1.875rem;
  --text-h3:      1.375rem;
  --text-body:    1rem;
  --text-caption: 0.875rem;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  64px;
  --space-2xl: 96px;

  /* Misc */
  --radius-btn: 4px;
  --transition: 0.25s ease;
  --nav-height: 68px;
  --max-width:  1160px;

  /* Luxury language tokens (shared, derived from the approved hero) */
  --gold-deep:      #9A7A1E;   /* the hairline "Cartier-box" inset line; also legible gold on cream */
  --frame-radius:   2px;       /* sharp, editorial corners site-wide */
  --sweep-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --hairline:       inset 0 0 0 1px var(--gold-deep);  /* signature gold inset frame */

  /* Treatment-card surface: a richer, honeyed warm parchment drawn from the hero
     field's warm cream. Elevated above neutral-1, still firmly a LIGHT card.
     Contrast on this surface: neutral-4 brown 8.50:1 (AA all sizes),
     gold-deep 3.30:1 (AA for large text only — see .card-header h3 / .t-price). */
  --card-parchment: #F2E7CC;
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-4);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ── 3. TYPOGRAPHY HELPERS ────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-neutral-5);
  line-height: 1.25;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

p {
  margin-bottom: var(--space-sm);
}

p:last-child {
  margin-bottom: 0;
}

.section-heading {
  text-align: center;
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-neutral-5);
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-lg);
}

.section-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--color-accent);
  margin: var(--space-xs) auto 0;
}

.section-heading-wrap {
  text-align: center;
}

/* ── 4. LAYOUT HELPERS ────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

section {
  padding-block: var(--space-2xl);
}

/* Section background alternation */
.bg-cream   { background-color: var(--color-neutral-0); }
.bg-warm    { background-color: var(--color-neutral-1); }

/* ── 5. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  border-radius: var(--radius-btn);
  padding: 12px 28px;
  cursor: pointer;
  border: none;
  transition: background-color var(--transition), color var(--transition);
  letter-spacing: 0.02em;
  text-align: center;
}

/* Primary button — forest green + cream text */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-neutral-0);
  position: relative;
}

.btn-primary::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  position: absolute;
  bottom: -6px;
  left: 0;
  border-radius: 1px;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-secondary);
  color: var(--color-neutral-0);
}

/* Ghost button */
.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: var(--color-neutral-1);
}

/* ── 5b. SHARED LUXURY PRIMITIVES ─────────────────────────────
   The design language distilled from the approved hero, reused site-wide so every
   section reads as one expensive composition:
     • .section-eyebrow — the UPPERCASE, wide-tracked label above every heading.
     • .section-heading  — Cormorant serif heading with a soft gold flourish under it.
     • .section-intro    — an optional refined lead beneath a heading.
     • .cta-plaque       — the maison booking control (forest plaque, gold hairline
       inset, cream serif uppercase label, slow gold fill-sweep). This is the hero
       CTA generalised for reuse; the hero's own .hero-cta is left untouched.
     • .section-botanical — a faint sage watercolour corner accent, used sparingly.
   ------------------------------------------------------------- */

/* Eyebrow / kicker label */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;            /* counter the trailing tracking gap */
  text-transform: uppercase;
  /* neutral-4 (warm brown) clears WCAG AA for small text on both cream fields
     (9.76:1 / 8.79:1); a subtle uppercase kicker subordinate to the serif heading.
     Sage/gold at this size measured ~3:1 and failed, so brown is used instead. */
  color: var(--color-neutral-4);
  margin-bottom: var(--space-sm);
}

/* Centred section headings get the eyebrow centred too */
.section-heading-wrap .section-eyebrow {
  text-align: center;
}

/* Refined gold flourish under centred headings — a hairline with a diamond node,
   more couture than the old flat 2px bar. */
.section-heading::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent) 20%, var(--gold-deep) 50%, var(--color-accent) 80%, transparent);
  margin: var(--space-sm) auto 0;
}

.section-intro {
  max-width: 46ch;
  margin: calc(-1 * var(--space-md)) auto var(--space-lg);
  text-align: center;
  color: var(--color-neutral-4);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* The "Our Treatments" section heading is reworked to the feminine couture display
   serif (Playfair Display) per Lee, so it feels unified with the About headline and
   reads more elegant/boutique-luxe than the previous Cormorant Garamond. Scoped to
   this heading by id so Booking ("Book Your Appointment") and Find Us keep the
   established Cormorant heading — only About + Treatments were flagged. */
#treatments-heading.section-heading {
  font-family: var(--font-heading-display);
  letter-spacing: 0.005em;
}

/* ── The reusable fashion-house CTA plaque ──
   Same anatomy as the approved hero CTA: solid forest fill, hairline gold inset,
   cream Cormorant uppercase label, slow left-to-right gold fill-sweep that inverts
   the label to forest green. Contrast cream on forest ≈ 9.4:1 (AA large + normal). */
.cta-plaque {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;               /* comfortable >=44px tap target */
  padding: 18px 44px;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--color-neutral-0);
  background: var(--color-primary);
  border: none;
  border-radius: var(--frame-radius);
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--hairline);
  transition: color var(--transition), box-shadow var(--transition);
}

.cta-plaque::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--sweep-ease);
}

.cta-plaque-label {
  position: relative;
  z-index: 1;
}

.cta-plaque:hover,
.cta-plaque:focus-visible {
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.cta-plaque:hover::before,
.cta-plaque:focus-visible::before {
  transform: scaleX(1);
}

/* On focus-visible the plaque fills gold, so a gold ring would vanish — use a
   forest-green ring which clears SC 1.4.11 on both cream and the gold fill. */
.cta-plaque:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cta-plaque::before { transition: none; }
}

/* ── Faint botanical corner accent ──
   Uses the transparent sage watercolour sprigs from assets/. Very low opacity so
   it warms a section without shouting. Decorative only; sits behind content and is
   pointer-inert. Default: bottom-left. Modifier adds a mirrored top-right sprig. */
.section-botanical {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section-botanical::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -12px;
  bottom: -12px;
  width: clamp(140px, 22vw, 300px);
  aspect-ratio: 1 / 1;
  background: url("assets/botanical-corner-left.png") no-repeat left bottom;
  background-size: contain;
  opacity: 0.16;
  pointer-events: none;
}

.section-botanical--right::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: -12px;
  top: -12px;
  width: clamp(140px, 22vw, 300px);
  aspect-ratio: 1 / 1;
  background: url("assets/botanical-corner-right.png") no-repeat right top;
  background-size: contain;
  opacity: 0.14;
  pointer-events: none;
}

/* Keep section content above the botanical wash */
.section-botanical > .container {
  position: relative;
  z-index: 1;
}

/* ── 6. NAVIGATION ────────────────────────────────────────── */
/* The fixed top bar (site-nav: text logo + Book Now button) was removed so the
   hero's first screen is clean and immersive with no chrome across the top.
   Booking is served by the single refined Book Now inside the hero and by the
   full #booking section. No sticky-nav styles remain. */

/* ── 7. HERO SECTION — real crest set into a generated luxury field ───
   Rebuilt direction (approved by Lee). The whole first screen is ONE expensive
   composition: a full-bleed generated luxury field with the REAL, unaltered
   crest composited on top. Two things Lee explicitly disliked are engineered
   out here:
     • NO RECTANGULAR BLOCK — the crest JPG is clipped to a CRISP circle (a
       radial-gradient mask with a HARD colour stop, landing just outside the
       crest's own gold ring). The square cream ground and the darker corner
       watercolour of the JPG are removed, so no rectangle and no corner block.
     • NO CHEAP FADE — the mask edge is crisp (hard stop, ~0.5% AA feather only,
       purely to anti-alias), NOT a wide soft vignette. The crest's OWN gold ring
       is the intentional boundary.
   The melt: an OPAQUE matched backing disc sits directly behind the crest inside
   the SAME crisp circle (a radial from the crest's own honeyed ground ≈ #E7D1AC
   at the centre out to the field tone ≈ #F6DC92 at the ring). This does two jobs:
   (a) it melts the crest's ground into the field so the disc edge disappears into
   the ring, and (b) it gives the wordmark a STABLE parchment ground so the gold
   "Bees" and green "Katie" stay fully legible everywhere on the field.
   NOTE — an earlier pass used mix-blend-mode: multiply for the melt, but over the
   field's bright top-centre glow the varying luminance bled THROUGH the wordmark
   and half-swallowed "Bees". The opaque matched backing (verified offline against
   the real field) keeps every letter crisp while still melting the edge.
   Field: assets/hero-field.png (chosen over hero-field-2.png — its bottom laurel
   cradle + top-centre glow purpose-frame a centred medallion).
   ------------------------------------------------------------- */
:root {
  /* Field fallback tone (behind the image while it loads / if it 404s), sampled
     from hero-field.png's honeyed centre so there is never a flash of raw cream.
     Hero-local so the richer gold doesn't leak into the rest of the page. */
  --hero-field-fallback: #F6DC92;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  /* No fixed top bar any more, so no nav offset — just breathing room. */
  padding: var(--space-xl) var(--space-md) var(--space-xl);
  text-align: center;
  /* FULL-BLEED LUXURY FIELD — the real generated art, cover + centred.
     background-color is the sampled fallback so the fold is never bare cream. */
  background-color: var(--hero-field-fallback);
  background-image: url("assets/hero-field.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Soft, expensive falloff into the corners so the lit field never feels flat.
   Sits above the field image, below the crest. Very restrained — the art already
   carries most of the lighting; this only deepens the extreme corners. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130% 105% at 50% 40%,
    transparent 60%,
    rgba(74, 61, 53, 0.05) 88%,
    rgba(60, 47, 30, 0.12) 100%);
}

/* ░░ OPTIONAL SLOW GOLD SHIMMER ░░ a single, very soft warm-gold radial that
   drifts across the top-centre glow of the field — a whisper of luxury light,
   NOT glitter. Static (invisible-resting) by default; only animates when motion
   is welcome. Gated by prefers-reduced-motion below. Decorative, aria-hidden. */
.hero-shimmer {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(38% 30% at 50% 22%,
    rgba(255, 240, 190, 0.55) 0%,
    rgba(230, 185, 62, 0.16) 45%,
    transparent 72%);
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-shimmer {
    animation: hero-shimmer 7s ease-in-out infinite;
  }
}

@keyframes hero-shimmer {
  0%, 100% { opacity: 0.28; transform: translateX(-3%) scale(1); }
  50%      { opacity: 0.6;  transform: translateX(3%)  scale(1.04); }
}

/* ── The crest — the REAL logo, composited live onto the field ──
   Square wrap, self-centred in the flex column. Large: the crest is the clear
   hero and fills the first page. */
.hero-crest-wrap {
  position: relative;
  z-index: 1;
  width: min(86vw, 620px);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  margin-inline: auto;      /* true horizontal centre */
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-crest {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  /* ░░ THE INTEGRATION ░░
     This crest is NOT a medallion on a plain ground — its laurel wreath and gold
     wordmark flourishes bleed corner-to-corner (measured: ink reaches r=0.707,
     the very corner). So a circular clip is impossible without cutting the
     wreath / the "Bees" tail. Instead the WHOLE square is melted into the field
     with mix-blend-mode: multiply:
       • The light honeyed cream GROUND multiplies against the field's matching
         honeyed gold and effectively disappears — no opaque rectangle, no block.
       • The crest's sage/gold LAUREL wreath lands over the field's OWN sage
         laurels (hero-field.png frames the same corners), so laurel-over-laurel
         multiplies into a single richer wreath — the crest frame and field frame
         become one continuous botanical border rather than a pasted square.
       • The dark bee, green "Katie", gold "Bees", ring, and all lettering stay
         rich and fully legible (multiply only darkens — it never washes the ink
         out, which was the failure of the earlier backing-disc/overlay attempts).
     The only edge treatment is a TIGHT perimeter dissolve (below) — the outer
     ~10% of the square eases out so the straight edge never shows. It is
     deliberately narrow and lands on the crest's own laurels/ground, which merge
     into the field's laurels, so it reads as botanicals dissolving together, NOT
     as a wide mushy vignette halo (the "cheap fade" Lee rejected). */
  mix-blend-mode: multiply;
  /* Lift the crest's cream GROUND toward the field's brighter honeyed tone before
     the multiply so the square region never sits darker than the surrounding
     paper. brightness+contrast keeps the dark ink (bee, "Katie", ring) rich while
     lifting only the light ground; the gold "Bees" stays saturated. */
  filter: brightness(1.13) contrast(1.04);

  /* ░░ FOUR-EDGE PERIMETER DISSOLVE (border-fade, not a circle) ░░
     WHY NOT A CIRCLE: the crest's ink genuinely fills the whole SQUARE — the
     laurel branches reach the corners (measured r≈1.28–1.41) and the ring +
     the "Bees" gold flourish reach every straight edge (measured r≈0.92–1.01
     at the four edge MIDPOINTS: 0°, 90°, 180°, 270°). A `closest-side` circle
     cannot satisfy both: any circle wide enough to keep the corner laurels
     (needs r>1.06) is still ~50% OPAQUE where it meets the square's straight
     edges at their midpoints (r≈1.0 sits inside a 0.94→1.06 band). That left a
     half-opaque strip of the crest's honeyed ground pasted right up to the
     image border — and because that ground tone differs slightly from the field
     behind it, it read as a hard VERTICAL SEAM. It showed worst on the RIGHT
     because that edge is lightest (measured L≈195, no dark laurel to disguise
     it), which is exactly the straight edge Lee flagged.

     THE FIX: fade the four STRAIGHT EDGES themselves, evenly, with a thin even
     band just inside each side — so the dissolve follows the square perimeter
     instead of a circle. Four linear-gradient masks (one per edge) are
     INTERSECTED: each is solid across the interior and eases to transparent over
     the outer ~8% of its side. Their intersection fades all four edges by the
     same fraction and lets the corners fade a touch more (which is welcome — the
     corner laurels merge straight into hero-field.png's own corner laurels). The
     interior stays fully crisp: the bee, ring, "Katie/Bees" wordmark and inner
     wreath all sit well inside the 92%-solid core, so the wordmark stays
     completely legible. No residual straight edge on ANY side; symmetric on all
     four. Verified at 375 / 768 / 1280. */
  --fade: 12%;  /* even dissolve band, measured inward from each straight edge */
  --mask-left:   linear-gradient(to right,  transparent 0, #000 var(--fade));
  --mask-right:  linear-gradient(to left,   transparent 0, #000 var(--fade));
  --mask-top:    linear-gradient(to bottom, transparent 0, #000 var(--fade));
  --mask-bottom: linear-gradient(to top,    transparent 0, #000 var(--fade));

  -webkit-mask-image: var(--mask-left), var(--mask-right), var(--mask-top), var(--mask-bottom);
          mask-image: var(--mask-left), var(--mask-right), var(--mask-top), var(--mask-bottom);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  /* Intersect all four edge fades so a pixel is only fully opaque when it is
     clear of EVERY edge band — this is what makes the dissolve follow the square
     perimeter evenly. `intersect` is the standard; `source-in` is the WebKit
     equivalent (chained left-to-right across the four layers). */
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* A soft warm ground-glow BEHIND the crest, in the field's own honeyed tone.
   This does the last 5%: it lifts the parchment right under the square a touch
   so the faint tonal edge of the multiplied square dissolves into the field —
   a lighting cue, not a masked edge, so it never reads as a rectangle or a
   feathered halo. Sits below the crest (z-index 0), wide and very soft. */
.hero-crest-wrap::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 132%;
  height: 132%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Brighter + wider than the field's own glow so the multiplied square's cream
     ground never sits darker than the paper immediately around it — the faint
     square edge dissolves into the light. Still very soft: a lighting cue only,
     it never draws its own boundary (no ring, no feathered halo). */
  background: radial-gradient(circle at 50% 46%,
    rgba(253, 243, 208, 0.95) 0%,
    rgba(250, 233, 176, 0.72) 38%,
    rgba(247, 224, 152, 0.32) 60%,
    rgba(246, 220, 146, 0) 74%);
}

/* ── Understated tagline + CTA ── */
.hero-content {
  position: relative;
  /* Above the scroll cue (z-index 2): on short viewports the absolutely-anchored
     "Explore" cue can sit under the CTA plaque; keeping content on top means the
     scroll line never bleeds through the solid green button. */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  /* The crest is a crisp disc now (no wide feather to tuck under), so the
     content sits just below it with a small, deliberate optical gap. */
  margin-top: var(--space-xs);
}

.hero-tagline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-h3);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-neutral-4);
  margin-bottom: 0;
  /* letter-spacing on uppercase adds a phantom trailing gap; nudge back */
  text-indent: 0.24em;
}

/* ░░ FASHION-HOUSE CTA ░░ a maison-grade booking control — restrained,
   editorial, expensive. Reads like a Rolex / Gucci plaque, NOT a web button.
     • Solid deep FOREST-GREEN fill (--color-primary): a couture monogram plaque
       that sits clear of the busy field (the earlier thin gold outline floated
       and clashed with the "Explore" cue behind it). No gradient, no gloss.
     • CREAM label in Cormorant Garamond — the site's own elegant serif — set
       UPPERCASE with wide 0.28em tracking: the watch-house / editorial signature.
     • A single hairline GOLD inset frame (box-shadow inset, deepened gold) draws
       the couture box-edge a few px inside the fill. One crisp line, no bloom.
     • Sharp 2px corners, generous padding. No drop-shadow, no big radius.
   Contrast: cream (#FAF7F0) on forest-green (#2D4829) ≈ 9.4:1 — well past AA. */
.hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 52px;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-neutral-0);
  background: var(--color-primary);
  border: none;
  border-radius: 2px;
  overflow: hidden;
  /* Hairline gold couture frame, inset just off the plaque edge. Deepened gold
     (#9A7A1E) so the line reads as a crisp detail, never a glow. */
  box-shadow: inset 0 0 0 1px #9A7A1E;
  transition: color var(--transition), box-shadow var(--transition);
}

/* Quiet, slow gold FILL SWEEP from the left on hover/focus — considered, not
   garish. Flat gold (no gradient sheen). The label inverts to deep green over it,
   so the control reads as a calm, expensive invert rather than a flashy glow. */
.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cta-label {
  position: relative;
  z-index: 1;
}

.hero-cta:hover,
.hero-cta:focus-visible {
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.hero-cta:hover::before,
.hero-cta:focus-visible::before {
  transform: scaleX(1);
}

/* Visible, on-brand focus ring for keyboard users — a deep forest-green halo just
   outside the plaque. Green (not gold) is chosen deliberately: on focus-visible the
   plaque itself fills GOLD, so a gold ring would vanish into it. Green clears WCAG
   2.2 SC 1.4.11 against BOTH the honeyed field (7.5:1) and the gold hover-fill
   (4.1:1), so the indicator stays visible in every state. */
.hero-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Reduced-motion: keep the invert, drop the sweep animation (instant fill). */
@media (prefers-reduced-motion: reduce) {
  .hero-cta::before {
    transition: none;
  }
}

/* ── Scroll cue ── */
.hero-scroll {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  /* neutral-4 (not neutral-3): clears WCAG AA on the honeyed cream for the
     small "Explore" label. neutral-3 measured ~2.2:1 and failed. */
  color: var(--color-neutral-4);
}

.hero-scroll-word {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-indent: 0.32em;
  transition: color var(--transition);
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-neutral-4), transparent);
  position: relative;
  overflow: hidden;
}

/* Travelling gold spark down the scroll line (only when motion is welcome) */
.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-line::after {
    animation: hero-scroll-spark 2.4s ease-in-out infinite;
  }
}

.hero-scroll:hover .hero-scroll-word,
.hero-scroll:focus-visible .hero-scroll-word {
  color: var(--color-primary);
}

@keyframes hero-scroll-spark {
  0%   { transform: translateY(-14px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(40px); opacity: 0; }
}

/* ── Entrance motion — slow, soft fade-and-rise (calm, never bouncy) ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-crest-wrap,
  .hero-content,
  .hero-scroll {
    opacity: 0;
    animation: hero-rise 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-crest-wrap { animation-delay: 0.15s; }
  .hero-content    { animation-delay: 0.55s; }
  .hero-scroll     { animation-delay: 1.1s; }
}

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

/* .hero-content keeps its negative margin after the rise settles */
@media (prefers-reduced-motion: no-preference) {
  .hero-content {
    /* translate handled by keyframe; margin-top negative preserved via wrapper */
  }
}

/* ── 8. TREATMENTS SECTION ────────────────────────────────────
   Each card is an elegant framed spa-menu piece: cream/parchment field, the
   signature hairline gold inset frame, a centred serif group heading with a small
   eyebrow, refined rows with a dotted leader running to a gold price, and a quiet
   lift-on-hover (no bounce, no heavy shadow). All six cards are consistent.
   ------------------------------------------------------------- */
.treatments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (min-width: 640px) {
  .treatments-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .treatments-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.treatment-card {
  position: relative;
  background-color: var(--card-parchment);
  border-radius: var(--frame-radius);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* Signature gold hairline "Cartier-box" frame + a whisper of depth */
  box-shadow: var(--hairline), 0 1px 2px rgba(45, 72, 41, 0.04);
  transition: box-shadow var(--transition), transform var(--transition);
}

@media (prefers-reduced-motion: no-preference) {
  .treatment-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px var(--color-accent), 0 14px 30px rgba(45, 72, 41, 0.10);
  }
}

@media (prefers-reduced-motion: reduce) {
  .treatment-card:hover {
    box-shadow: inset 0 0 0 1px var(--color-accent), 0 6px 14px rgba(45, 72, 41, 0.10);
  }
}

/* Card header — centred, editorial */
.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
}

.card-icon {
  color: var(--color-secondary);
  line-height: 1;
}

.card-icon i {
  font-size: 1.75rem;
}

.card-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  /* Small tracked caps must clear AA at 4.5:1, so this stays warm dark-brown,
     NOT gold. On --card-parchment: neutral-4 = 8.50:1 (pass); gold-deep would be
     3.30:1 (fail for small text). Echoes the logo's "EMPOWER · GLOW · SHINE" band. */
  color: var(--color-neutral-4);
}

/* Group name — set in the Parisienne calligraphy script to tie each card
   directly to the "Katie Bees" gold wordmark in the logo. Rendered in
   --gold-deep at a large display size (>=30px) so it qualifies as LARGE text
   under WCAG 2.2 AA (3:1); gold-deep on --card-parchment = 3.30:1 -> PASS. */
.card-header h3 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 2rem;              /* 32px — comfortably large-text; script needs the size */
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--gold-deep);
  line-height: 1.1;
}

/* Small gold hairline flourish under the group name */
.card-rule {
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.treatment-highlights,
.full-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Refined menu row: name | dotted leader | gold price.
   Rows are set in Cormorant Garamond — the same refined serif family as the
   logo's spaced "BEAUTY SALON" lettering — for brand-aligned type. */
.treatment-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  /* Nudged up to 18px and lightened to weight 500 (from 17px/400) so the menu reads
     more delicate and airy — refined per Lee's note that the previous rows felt too
     heavy/masculine. Cormorant Garamond is kept as the soft body serif; it sits
     beautifully beneath the Playfair "Our Treatments" display heading. */
  font-size: 1.125rem;          /* 18px */
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.55;
  /* Row is a flex container; allow it to shrink to its parent so nothing it holds
     can push past the card's inner edge. */
  min-width: 0;
}

/* Treatment names stay warm dark-brown for readability. Small serif body text
   in light gold would fail contrast, so names are NEVER gold.
   neutral-4 on --card-parchment = 8.50:1 -> AA at all sizes. */
.treatment-item .t-name {
  color: var(--color-neutral-4);
  /* Flex children default to min-width:auto and refuse to shrink below their
     longest word/content — that is what pushed the price off-screen on narrow
     phones. min-width:0 lets the name shrink; overflow-wrap lets a very long
     name (e.g. "Full Body Massage + Infrared & G-5 Gun") wrap to a second line
     gracefully rather than force the row wider than the card. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The couture dotted leader between name and price */
.treatment-item::after {
  content: '';
  /* Leader is the flexible filler: it grows to fill the gap between name and
     price, and is allowed to shrink all the way to nothing under pressure so it
     never forces the row wider than the card. The old 24px min-width was a hard
     floor that could push the price off-screen on the narrowest phones. */
  flex: 1 1 0;
  order: 1;
  align-self: flex-end;
  height: 0;
  margin-bottom: 0.34em;
  /* Deepened one step against the richer parchment so the leader still reads.
     Decorative hairline, not text — no contrast minimum applies. */
  border-bottom: 1px dotted var(--color-neutral-3);
  min-width: 0;
}

/* Prices in the deeper, legible gold. Set at 20px / weight 700 so they qualify
   as LARGE text under WCAG 2.2 AA (3:1); gold-deep on --card-parchment = 3.30:1 -> PASS. */
.treatment-item .t-price {
  order: 2;
  font-family: var(--font-heading);
  font-size: 1.25rem;           /* 20px */
  color: var(--gold-deep);
  font-weight: 700;
  white-space: nowrap;
  /* The price is the one element that must always stay fully on-screen: it holds
     its intrinsic size (never grows, never shrinks) while the name + leader flex
     around it. Because the name can now shrink/wrap, the price is never pushed
     past the card edge. */
  flex: none;
}

/* Expandable full list */
.view-all-toggle {
  align-self: center;
  margin-top: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  /* Interactive label at 0.75rem must clear AA (4.5:1): forest green = 9.48:1.
     Sage measured 3.42:1 and failed for small interactive text. */
  color: var(--color-primary);
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;               /* comfortable tap target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color var(--transition), opacity var(--transition);
}

.view-all-toggle i {
  font-size: 0.85rem;
  color: var(--color-accent);
}

.view-all-toggle:hover,
.view-all-toggle:focus-visible {
  color: var(--color-primary);
  opacity: 0.72;
}

.full-list {
  display: none;
  margin-top: calc(-1 * var(--space-xs));
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-neutral-2);
}

.full-list.open {
  display: flex;
}

/* Ghost button variant for dark backgrounds (retained for reuse) */
.btn-ghost-light {
  background: transparent;
  color: var(--color-neutral-0);
  border: 1.5px solid rgba(250,247,240,0.4);
  align-self: flex-start;
}

.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
  background-color: rgba(250,247,240,0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── 9. ABOUT SECTION ─────────────────────────────────────────
   A luxury brand-story: refined eyebrow, serif headline, generous editorial body
   with a comfortable measure, a signature closing line set off in serif, and the
   crest presented in a gold-hairline frame (portrait slot for when Katie provides
   a lifestyle image). Left-aligned story, framed mark to the side.
   ------------------------------------------------------------- */
.about-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .about-inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
  }
}

.about-heading {
  /* Feminine couture display serif (Playfair Display) — reworked from Cormorant
     Garamond per Lee: reads more elegant, soulful and boutique-luxe for this short
     brand headline. Kept as a serif (not the Parisienne script) so it does not
     compete with the "soulfully beautiful" script sitting directly beneath it. */
  font-family: var(--font-heading-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--color-neutral-5);
  margin-bottom: var(--space-sm);
  max-width: 16ch;
}

/* Ethos line under the About headline, in the brand script (echoes the logo /
   footer "soulfully beautiful"). gold-deep #9A7A1E clears AA as large text. */
.about-ethos-script {
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1;
  color: var(--gold-deep);
  margin-bottom: var(--space-md);
}

.about-ethos {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  /* Meaningful brand line, so it must clear AA at small size: forest green (9.48:1).
     Gold accent measured 2.29:1 and failed. A tiny gold node separates it below. */
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  position: relative;
  padding-bottom: var(--space-sm);
}

.about-ethos::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

.about-text p {
  max-width: 54ch;
  line-height: 1.8;
  color: var(--color-neutral-4);
}

.about-lead {
  font-size: 1.0625rem;
}

.about-text em {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.08em;
  color: var(--color-secondary);
}

/* Signature closing line — set in serif with a gold accent bar to the left */
.about-signature {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-primary);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-md);
  margin-top: var(--space-lg);
  max-width: 40ch;
}

.about-detail {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-caption);
  /* Meaningful address line: neutral-4 for AA (9.76:1); neutral-3 failed (2.91:1) */
  color: var(--color-neutral-4);
  margin-top: var(--space-lg);
}

.about-detail i {
  color: var(--color-secondary);
  font-size: 1.1rem;
}

/* The framed crest / portrait treatment */
.about-media {
  display: flex;
  justify-content: center;
}

.about-portrait {
  position: relative;
  margin: 0;
  width: min(100%, 380px);
  padding: var(--space-sm);
  background: var(--color-neutral-0);
  border-radius: var(--frame-radius);
  /* Signature gold hairline frame with soft depth */
  box-shadow: var(--hairline), 0 18px 40px rgba(45, 72, 41, 0.12);
}

.about-portrait-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--frame-radius);
}

.about-portrait-caption {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-deep); /* was --color-accent (2.29:1, failed AA); gold-deep clears 3:1 as large text (Vera BLOCKER-1) */
  text-align: center;
  padding: var(--space-sm) 0 var(--space-xs);
  line-height: 1;
}

/* ── 10. BOOKING SECTION ──────────────────────────────────── */
.booking-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 560px;
  margin-inline: auto;
}

.booking-lead {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--color-neutral-4);
  margin-bottom: var(--space-xs);
  max-width: 30ch;
}

.booking-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.booking-caption {
  font-size: var(--text-caption);
  /* neutral-4 for AA (8.79:1); neutral-3 measured 2.62:1 on this warm field */
  color: var(--color-neutral-4);
  text-align: center;
  max-width: 34ch;
}

/* Gold hairline "or" divider between online booking and phone */
.booking-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  width: min(100%, 320px);
  color: var(--color-neutral-4);
}

.booking-divider::before,
.booking-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-neutral-2), transparent);
}

.booking-divider-word {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
}

.booking-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  transition: color var(--transition);
}

.booking-phone i {
  font-size: 1.1rem;
  margin-right: 4px;
}

.booking-phone:hover,
.booking-phone:focus-visible {
  color: var(--color-secondary);
}

/* ── 11. FIND US SECTION ──────────────────────────────────── */
.find-us-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .find-us-inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.find-us-details {
  display: flex;
  flex-direction: column;
}

/* Each detail row divided by a soft gold hairline */
.detail-row {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-neutral-2);
}

.detail-row:first-child {
  border-top: none;
  padding-top: 0;
}

.detail-row i {
  color: var(--color-secondary);
  font-size: 1.35rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.detail-row address {
  font-style: normal;
  color: var(--color-neutral-4);
  line-height: 1.7;
}

.detail-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  /* Small uppercase label: neutral-4 clears AA (9.76:1); sage measured 3.42:1. */
  color: var(--color-neutral-4);
  margin-bottom: 6px;
}

.detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 1.0625rem;
  color: var(--color-primary);
  transition: color var(--transition);
}

.detail-link:hover,
.detail-link:focus-visible {
  color: var(--color-secondary);
}

/* Opening hours — a full-week definition list with gold-hairline detail rows,
   echoing the .detail-row language. Open days read primary; closed days muted. */
.detail-hours {
  width: 100%;
}

.hours-list {
  margin: var(--space-xs) 0 0;
  max-width: 24rem;
}

.hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 10px;
  border-top: 1px solid var(--color-neutral-2);
}

.hours-row:first-child {
  border-top: none;
  padding-top: 0;
}

.hours-list dt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-neutral-5);
  letter-spacing: 0.01em;
}

.hours-list dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-primary);
  white-space: nowrap;
  text-align: right;
}

/* Closed days: muted so open days read as primary, but a WCAG-AA-compliant mute.
   #726757 on cream is 5.17:1 (passes 1.4.3 for all text) while staying clearly
   lighter than the body brown, so it still reads as secondary. */
.hours-row.is-closed dt {
  color: #726757;
  font-weight: 400;
}

.hours-row.is-closed dd {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-style: italic;
  color: #726757;
  letter-spacing: 0.02em;
}

/* Live map — framed with the signature gold "Cartier-box" hairline */
.find-us-map {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.map-frame {
  border-radius: var(--frame-radius);
  box-shadow: var(--hairline);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-neutral-1);
}

.map-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Directions — a small gold-accent CTA in the section's luxury language */
.map-directions {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 10px var(--space-md);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--color-primary);
  border-radius: var(--frame-radius);
  box-shadow: inset 0 0 0 1px var(--color-neutral-2);
  transition: color var(--transition), box-shadow var(--transition);
}

.map-directions i {
  font-size: 1.125rem;
  color: var(--color-accent);
  text-indent: 0;
  transition: color var(--transition);
}

.map-directions:hover,
.map-directions:focus-visible {
  color: var(--color-secondary);
  box-shadow: inset 0 0 0 1px var(--gold-deep);
}

.map-directions:hover i,
.map-directions:focus-visible i {
  color: var(--gold-deep);
}

/* ── 12. FOOTER ───────────────────────────────────────────────
   A refined forest-green maison footer: a gold hairline top edge that echoes the
   Cartier-box line, the crest reversed to cream, the script tagline in gold, and
   elegant circular social affordances. Restrained and consistent with the hero.
   ------------------------------------------------------------- */
.site-footer {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-neutral-1);
  padding-block: var(--space-2xl) var(--space-lg);
  text-align: center;
}

/* Gold hairline crowning the footer */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--max-width));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent) 25%, var(--gold-deep) 50%, var(--color-accent) 75%, transparent);
  opacity: 0.7;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

/* The crest JPG has a busy parchment ground, so a hard invert produced a muddy
   block. Instead we present it as its true self inside a soft cream medallion with
   a gold hairline ring — it reads as an intentional maison seal on the green. */
.footer-logo {
  width: 96px;
  height: 96px;
  border-radius: var(--frame-radius);
  object-fit: contain;
  padding: 5px;
  background: var(--color-neutral-0);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 6px 18px rgba(0, 0, 0, 0.18);
}

.footer-brand {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-neutral-0);
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-accent);
  opacity: 0.92;
  margin-top: calc(-1 * var(--space-xs));
}

.footer-social {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(250, 247, 240, 0.3);
  border-radius: 50%;
  color: var(--color-neutral-1);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
  font-size: 1.35rem;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background-color: rgba(250, 247, 240, 0.1);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .footer-social a:hover,
  .footer-social a:focus-visible {
    transform: translateY(-2px);
  }
}

.footer-divider {
  width: min(100%, 320px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 247, 240, 0.18), transparent);
  border: none;
  margin-block: var(--space-md);
}

.footer-copy {
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: rgba(250, 247, 240, 0.6);
}

/* ── 13. ACCESSIBILITY UTILITIES ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link — visually hidden until focused */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  background-color: var(--color-primary);
  color: var(--color-neutral-0);
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  transform: translateY(-150%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Anchor offset — a little breathing room above a jumped-to heading. */
:target {
  scroll-margin-top: var(--space-lg);
}

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

/* ── 14. RESPONSIVE ADJUSTMENTS ───────────────────────────── */
@media (max-width: 639px) {
  :root {
    --text-h2: 1.625rem;
    --text-h3: 1.25rem;
    --space-2xl: 64px;
  }

  section {
    padding-block: var(--space-xl);
  }

  /* Hero — mobile (375px): crest fills more width, tagline tightens so the
     scene stays balanced and full-height without the CTA colliding with the
     scroll cue. No top bar, so the hero opens with a clean top pad. */
  .hero {
    /* Trim side padding on mobile: the field is a cover background so it still
       bleeds full-width, but the crest square gets the room it needs to show the
       WHOLE wordmark without the viewport edge clipping "Bees". */
    padding-top: var(--space-lg);
    padding-inline: var(--space-sm);
  }

  /* Mobile (375px): the crest is square and the wordmark is wide, so the whole
     square must fit inside the padded width or the sides clip "Katie"/"Bees".
     min(100% , 88vw) keeps it as large as possible while staying fully visible
     and centred. It still fills most of the first screen. */
  .hero-crest-wrap {
    width: min(100%, 88vw);
    max-width: 340px;
    margin-bottom: var(--space-xs);
  }

  .hero-tagline {
    font-size: var(--text-caption);
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    max-width: 88vw;
    line-height: 1.5;
  }

  .hero-content {
    gap: var(--space-sm);
    margin-top: var(--space-xs);
  }

  .hero-cta {
    padding: 13px 34px;
  }

  /* ── Below-hero sections on phones (375 / 390 / 414) ──
     Everything stacks to one comfortable column, type stays elegant, tap targets
     stay >=44px, and no element overflows the viewport. */

  /* Treatment cards: single column, a touch tighter padding, still framed */
  .treatments-grid {
    gap: var(--space-md);
    margin-top: var(--space-md);
  }

  .treatment-card {
    padding: var(--space-md) var(--space-sm);
  }

  /* Script group name: keep it a clear large-text size on phones (stays >=30px so
     gold on parchment still qualifies as AA large text at 3:1). */
  .card-header h3 {
    font-size: 1.875rem;          /* 30px */
  }

  /* Combined-price rows (e.g. "£50 / +Gel £60") are the widest labels. Let the
     price wrap to a second line before it ever crushes the treatment name, so
     rows stay legible and elegant at 375 / 390 / 414. */
  .treatment-item .t-price {
    white-space: normal;
    text-align: right;
  }

  .section-intro {
    font-size: 1rem;
    margin-top: calc(-1 * var(--space-sm));
  }

  /* About: story first, framed mark below; tighten the signature indent */
  .about-inner {
    gap: var(--space-lg);
  }

  .about-media {
    order: -1;                    /* mark leads on mobile, story follows */
  }

  .about-portrait {
    width: min(100%, 300px);
  }

  .about-signature {
    padding-left: var(--space-sm);
    margin-top: var(--space-md);
  }

  .about-text p {
    max-width: 100%;
  }

  /* Booking CTA: near full-width, easily tappable */
  .cta-plaque {
    width: 100%;
    max-width: 340px;
    padding-inline: var(--space-md);
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }

  /* Find Us: map sits below details, comfortable height */
  .map-frame {
    aspect-ratio: 3 / 2;
  }

  /* Footer breathing room */
  .footer-tagline {
    font-size: 1.35rem;
  }
}

/* Short + wide viewports (landscape phones): keep it from overflowing 100svh */
@media (max-height: 640px) and (min-width: 640px) {
  .hero-crest-wrap {
    width: min(46vh, 360px);
  }
  .hero-scroll {
    display: none; /* no vertical room for a scroll cue here */
  }
}

@media (min-width: 1024px) {
  :root {
    --text-h2: 2rem;
  }
}