@font-face {
    font-family: 'Quiche Sans';
    src: url('/fonts/QuicheSans-Medium.otf') format('opentype');
    font-weight: 500; font-display: block;
  }
  @font-face {
    font-family: 'Muli';
    src: url('/fonts/Muli-Regular.ttf') format('truetype');
    font-weight: 400; font-display: block;
  }
  @font-face {
    font-family: 'Muli';
    src: url('/fonts/Muli-Bold.ttf') format('truetype');
    font-weight: 700; font-display: block;
  }

  /* Tokens — sourced from colors_and_type.css (canonical Secret Spa system) */
  :root {
    --black: #000000;
    --stone: #D8CEC7;
    --stone-050: #F3EEEA;
    --stone-200: #E6DED7;
    --stone-500: #D8CEC7;
    --stone-700: #A8A099;
    --stone-2: #EFEAE5;  /* legacy alias used in this page */
    --white: #FFFFFF;
    /* Warm tonal accents — only for photographic moods, never flat UI */
    --warm-terracotta: #C35A33;
    --warm-saffron:    #E4A84A;
    --warm-rust:       #8A2E1A;
    --warm-teal:       #2E5E5C;
    --warm-oxblood:    #5C1E1A;
    --warm: #b56a3e;
    --warm-deep: #5a2612;
    --warm-soft: #e2b393;
    --rule: 1px;        /* All hairlines/borders: 1px. Hard rule. */
    --radius: 0px;      /* Squared edges only. Hard rule. */
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Muli', system-ui, sans-serif;
    color: var(--black);
    background: var(--white);
    font-size: 16px;      /* Body baseline — design system (16px) */
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* No italics anywhere. Hard rule. */
  em, i, cite, dfn, address { font-style: normal; }
  img { display: block; max-width: 100%; }

  /* ---------- Primitives ---------- */
  .h-quiche { font-family: 'Quiche Sans', serif; font-weight: 500; letter-spacing: -0.015em; line-height: 0.98; }
  /* .pre + .pre::before + .pre.no-rule — moved to blocks.css (§3) */
  .btn {
    display: inline-block;
    font-family: 'Muli', sans-serif; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.22em;
    font-size: 14px;
    padding: 20px 36px;
    border: 1px solid var(--black);
    border-radius: 0;
    background: transparent; color: var(--black);
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  }
  .btn.solid { background: var(--black); color: #1a1a1a; }
  .btn.solid:hover { background: #222; }
  .btn:hover { background: var(--black); color: var(--white); }
  .btn.light { border-color: var(--white); color: var(--white); }
  .btn.light:hover { background: var(--white); color: var(--black); }
  .btn.light.solid { background: var(--white); color: var(--black); }
  .btn.light.solid:hover { background: #e5e5e5; }

  /* ---------- PRIMARY CTA ----------
     .btn-cta / .btn-cta-light / .cta-row — moved to blocks.css (§5 + §2). */
  /* .container + gutter scale (160/112/36) — moved to blocks.css (§1) */

  /* ---------- Header + hamburger ---------- */
  /* header.site / nav.primary / .book / .hamburger — moved to blocks.css (§6) */

  /* ---------- (breadcrumb removed) ---------- */

  /* ---------- Hero ----------
     DESIGN RULE: Hero sits flush against the header (no top padding).
     DESIGN RULE: Hero height is driven by the copy column — the image
     stretches to match the bottom of the copy, never the other way round. */
  .hero {
    background: var(--white);
    padding: 0;
    display: flex;
    overflow: hidden;
  }
  /* Desktop floor: hero never shorter than 600px (grid is align-items:stretch,
     so the image column grows to match). Desktop-only so it never fights the
     mobile stack's own 260px image min. */
  @media (min-width: 981px) { .hero { min-height: 600px; } }
  .hero > .container { display: flex; width: 100%; }
  /* Hero copy column's left padding becomes the hero gutter (80px desktop
     / 56px tablet / 22px mobile). The container itself is full-bleed so
     the 50/50 grid runs from viewport edge to edge — the image is always
     exactly half the viewport. */
  .hero > .container { padding: 0; max-width: none; margin: 0; }
  .hero .grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 0;
    align-items: stretch;
    width: 100%;
  }
  .hero .copy {
    padding: 20px 80px 20px 80px;
    display: flex; flex-direction: column; justify-content: flex-start;
    min-height: 0;
  }
  @media (max-width: 1100px) { .hero .copy { padding-left: 56px; padding-right: 56px; } }
  @media (max-width: 720px)  { .hero .copy { padding-left: 22px; padding-right: 22px; } }
  .hero .copy .pre { color: var(--black); margin: 22px 0 18px; }
  .hero h1 {
    margin: 0 0 16px;
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(38px, 3.6vw, 52px);
    line-height: 1.02; letter-spacing: -0.02em;
    text-wrap: pretty; max-width: 100%; overflow-wrap: break-word;
  }
  .hero .lede {
    max-width: 520px;
    font-size: 16px; line-height: 1.55;
    margin: 0 0 16px;
  }
  .hero ul.ticks {
    list-style: none; padding: 0; margin: 0 0 20px;
    display: flex; flex-direction: column; gap: 8px;
    font-size: 16px; color: #333;
  }
  .hero ul.ticks li {
    display: flex; align-items: center; gap: 12px;
  }
  .hero ul.ticks li span.num {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #333;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 16px; line-height: 1;
  }
  .hero ul.ticks li span.num::before { content: "✓"; }
  .hero .cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
  .hero .cta-meta {
    font-family: 'Muli', sans-serif; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--black);
    margin-top: 22px;
  }
  .hero .cta-meta b { font-weight: 700; color: var(--black); }

  /* Hero image stack — layered mood-board feel, squared.
     Stack breaks out of the container's right padding so the imagery
     runs flush to the viewport right edge. */
  .hero .stack {
    position: relative;
    height: auto;
    margin-right: 0;
    margin-left: 0;
  }
  @media (max-width: 1100px) {
    .hero .stack { margin-right: -80px; }
  }
  @media (max-width: 720px) {
    .hero .stack { margin-right: -22px; }
  }
  .hero .img-main {
    position: absolute; inset: 0;
    background: url('/assets/imagery/tan-chair-seated.jpg') center/cover no-repeat #4b1d10;
    overflow: hidden;
  }
  /* Image overlay details — Nº index + vertical credit
     (corner markers removed per design direction). */

  /* Spine: vertical caption on the LEFT edge of the hero image, mirroring
     the right-edge caption. Reads top-to-bottom along the left margin.
     DESIGN RULE: the top of this caption must align with the top of the
     hero pre-headline ("AT-HOME SPRAY TAN") on the copy side — i.e. at
     56px from the hero top (= copy padding-top 24px + pre margin-top 32px).
     Update both values together if you change the hero copy padding. */
  .hero .index-label {
    position: absolute; left: 32px; top: 42px;
    z-index: 3;
    color: var(--white);
    writing-mode: vertical-rl;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; line-height: 1; letter-spacing: 0.34em; text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  }
  .hero .index-label::after {
    content: none;
  }

  .hero .caption {
    position: absolute;
    right: 32px; bottom: 32px;
    color: var(--white);
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; line-height: 1; letter-spacing: 0.32em; text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    z-index: 3;
    text-align: right;
  }
  /* Trustpilot widget (official, ported from Landing variant-b) — black text on white surface */
  .hero .b-trust {
    display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 10px;
    color: var(--black); text-decoration: none;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 15px; letter-spacing: 0.02em; text-transform: none;
    margin-top: 20px;
  }
  .hero .b-trust .tp-label { color: var(--black); }
  .hero .b-trust .tp-stars { display: inline-flex; gap: 2px; }
  .hero .b-trust .tp-box {
    width: 18px; height: 18px;
    background: #00B67A;
    position: relative;
    display: inline-block;
  }
  .hero .b-trust .tp-box::before {
    content: "★";
    position: absolute; inset: 0;
    color: var(--white);
    font-size: 13px; line-height: 18px; text-align: center;
  }
  .hero .b-trust .tp-box-half::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
    background: rgba(255,255,255,0.55);
  }
  /* Stars derive from AGGREGATE_RATING.value (tpStars in src/data/site.ts); an empty
     box shows if the score ever drops below x.5. */
  .hero .b-trust .tp-box-empty { background: rgba(255,255,255,0.55); }
  .hero .b-trust .tp-text { color: var(--black); margin-left: 4px; text-decoration: none; white-space: nowrap; }
  .hero .b-trust .tp-logo { display: inline-flex; align-items: center; gap: 6px; color: var(--black); }
  .hero .b-trust .tp-star {
    display: inline-block;
    width: 15px; height: 15px;
    background: #00B67A;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  @media (max-width: 720px) {
    .hero .b-trust { flex-wrap: wrap; gap: 8px; font-size: 14px; }
  }

  @media (max-width: 980px) {
    .hero > .container { padding: 0; }
    .hero .grid { grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
    /* Image stacks on top, copy below on mobile */
    .hero .stack {
      order: -1;
      height: 56vw;
      min-height: 260px;
      max-height: 480px;
      margin-right: 0;
      width: 100%;
    }
    .hero .copy { padding: 28px 22px 36px; order: 0; }
    .hero .cta-row .btn-cta { width: 100%; text-align: center; padding: 18px; }
    /* Centre the Trustpilot badge under the (full-width) CTA on mobile/tablet. */
    .hero .b-trust { display: flex; justify-content: center; }
  }

  /* Pro-page reel: the therapist video is portrait 4:5 with baked-in subtitles.
     On mobile the default 16:9 reel frame crops the sides/bottom and hides the
     subtitles, so give this reel a 4:5 frame (taller) to show the full video.
     Scoped to .reel-pro so the home + spray-tan reels are unaffected. */
  @media (max-width: 720px) {
    .reel.reel-pro .frame { aspect-ratio: 4 / 5; }
  }
  /* The video carries its own subtitles, so hide the reel's overlay caption
     (it clashed with the on-video text). */
  .reel.reel-pro .copy-bottom { display: none; }
  /* Tap-to-unmute volume icon (autoplay-with-sound is blocked, so the video
     autoplays muted and this turns sound on with a tap). */
  .reel.reel-pro .reel-unmute {
    position: absolute; z-index: 4; right: 32px; bottom: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 0;
    color: var(--white); background: none; border: 0; border-radius: 0;
    cursor: pointer; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.85)) drop-shadow(0 0 2px rgba(0,0,0,0.6));
  }
  .reel.reel-pro .reel-unmute .ico { display: block; width: 30px; height: 30px; }
  @media (max-width: 720px) {
    .reel.reel-pro .reel-unmute { right: 20px; bottom: 30px; }
  }
  .reel.reel-pro .reel-unmute .ico-on,
  .reel.reel-pro .reel-unmute.is-on .ico-muted { display: none; }
  .reel.reel-pro .reel-unmute.is-on .ico-on { display: block; }

  /* ---------- BRANDS (marquee, ported from Landing Page) ---------- */
  .brands { background: var(--white); padding: 24px 0 0; margin-top: 0; overflow: hidden; }
  /* RULE — Hero → Brands order: when the brands marquee directly follows the
     editorial hero, drop the brands' own top spacing on mobile/tablet. The hero
     already provides the bottom gap, so this avoids a doubled-up gap. Scoped via
     adjacency so it stays consistent anywhere this block order is used (and does
     not affect brands elsewhere, e.g. the home page). */
  @media (max-width: 980px) {
    .hero + .brands { padding-top: 0; }
    .hero + .brands .head { margin-top: 0; }
  }
  .brands .container { max-width: 1360px; margin: 0 auto; }
  .brands .head {
    text-align: center;
    margin: 16px auto 0;
    max-width: 760px;
    padding: 0 24px;
  }
  .brands .head .pre {
    color: var(--black);
    display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
    margin: 0;
  }
  .brands .head .pre::before { display: none; }
  .brands .head .pre::after {
    content: ""; display: block;
    width: 48px; height: 1px; background: var(--black);
  }
  .brands .marquee {
    position: relative;
    overflow: hidden;
    padding: 28px 0 32px;
  }
  .brands .track {
    display: flex; align-items: center; gap: 75px;
    width: max-content;
    animation: brandsScroll 77s linear infinite;
  }
  .brands .marquee:hover .track { animation-play-state: paused; }
  .brands .track span { display: inline-block; flex: 0 0 auto; color: var(--black); }
  /* Every logo fills the full 34px and centres in its box — no width clamp:
     max-width used to shrink wide wordmarks vertically (OPI tall, Bio
     Sculpture tiny). Library logos are pre-trimmed to their artwork. */
  .brands .track img { display: block; flex: 0 0 auto; height: 34px; width: auto; object-fit: contain; object-position: center; }
  @keyframes brandsScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .brands .track { animation: none; }
  }
  .brands .siennax { font-family: 'Muli', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.32em; text-transform: uppercase; }
  .brands .tint    { font-family: 'Quiche Sans', serif; font-size: 34px; letter-spacing: 0.02em; }
  .brands .bondi   { font-family: 'Quiche Sans', serif; font-size: 26px; letter-spacing: 0.04em; }
  .brands .bare    { font-family: 'Quiche Sans', serif; font-size: 28px; letter-spacing: 0.04em; }

  /* ---------- VIDEO REEL (ported from Landing Page) ---------- */
  .reel {
    background: var(--black);
    padding: 0;
    position: relative;
  }
  .reel .frame {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    background: #1a1612;
    overflow: hidden;
  }
  .reel video,
  .reel wistia-player.wistia {
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .reel .marker-tl, .reel .marker-tr, .reel .marker-bl, .reel .marker-br,
  .reel .label-top, .reel .copy-bottom { pointer-events: none; }
  .reel .marker-tl, .reel .marker-tr, .reel .marker-bl, .reel .marker-br {
    position: absolute; width: 22px; height: 22px;
    border: 1px solid var(--white); z-index: 3;
  }
  .reel .marker-tl { top: 32px; left: 32px; border-right: 0; border-bottom: 0; }
  .reel .marker-tr { top: 32px; right: 32px; border-left: 0; border-bottom: 0; }
  .reel .marker-bl { bottom: 32px; left: 32px; border-right: 0; border-top: 0; }
  .reel .marker-br { bottom: 32px; right: 32px; border-left: 0; border-top: 0; }
  .reel .copy-bottom {
    position: absolute; left: 64px; bottom: 56px; right: 64px;
    z-index: 3; color: var(--white);
    display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end;
  }
  .reel .copy-bottom .pre {
    color: var(--white); margin-bottom: 0; white-space: nowrap;
  }
  .reel .copy-bottom .pre::before { background: var(--white); }
  .reel .copy-bottom h2 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -0.015em;
    margin: 0; max-width: 720px;
  }
  @media (max-width: 720px) {
    /* Mobile: taller 4:5 portrait reel ONLY when a dedicated 4:5 mobile cut is
       available. Without one (or if it fails to load), the reel keeps the
       desktop 2:1 sizing and plays the desktop video. */
    .reel.has-mobile-cut .frame { aspect-ratio: 4 / 5; }
    .reel .copy-bottom { grid-template-columns: 1fr; left: 52px; right: 24px; bottom: 32px; gap: 18px; }
    .reel .copy-bottom .pre { letter-spacing: 0.16em; gap: 12px; }
    /* Crop-marks frame the label on mobile — drop the redundant pre divider so
       it no longer collides with the bottom-left corner mark, and inset the
       label clear of that mark. */
    .reel .copy-bottom .pre::before { display: none; }
    .reel .marker-tl, .reel .marker-tr { top: 20px; }
    .reel .marker-bl, .reel .marker-br { bottom: 20px; }
    .reel .marker-tl, .reel .marker-bl { left: 20px; }
    .reel .marker-tr, .reel .marker-br { right: 20px; }
  }

  /* ---------- Section base + .sec-head ---------- */
  /* section{56px 0} + .sec-head (asymmetric head) — moved to blocks.css (§2, §4b) */

  /* ---------- MENU (redesigned service list) ---------- */
  /* DESIGN RULE — Section-head pattern: "all-centred head".
     The pre-headline, headline and lede are all horizontally centred.
     Lock-in for any section using this layout.
     Mechanics (do not change):
       1. Head is `text-align: center` so all three lines centre.
       2. Head has `margin: 0 auto 36px; max-width: 760px` so it sits
          centred on the page with a comfortable reading width.
       3. Pre-headline keeps its inline-flex column + centred 48×1px
          divider underneath (the standard primitive).
       4. Headline (h2) is its natural width — centred via text-align.
       5. Lede has `max-width: 640px; margin: 24px auto 0` so it sits
          centred under the headline with a tighter reading column. */
  .menu-wrap { background: var(--stone); padding: 56px 0; }
  /* Menu list aligns to the header gutter (48px) so its left edge lines up with the
     SS logo, rather than the wider global .container (160px). max-width:none keeps the
     left edge at 48px on any width, matching the full-bleed header. Mobile (≤720px)
     falls back to the 36px content gutter via the !important .container rule below. */
  .menu-wrap .container { max-width: none; padding-left: 48px; padding-right: 48px; }
  .menu-wrap .head {
    text-align: center;
    margin: 0 auto 36px;
    max-width: 760px;
  }
  .menu-wrap .head .pre {
    color: var(--black);
    display: inline-flex; flex-direction: column; align-items: center; gap: 16px;
    margin-bottom: 28px;
  }
  .menu-wrap .head .pre::before { display: none; }
  .menu-wrap .head .pre::after {
    content: ""; display: block;
    width: 48px; height: 1px; background: var(--black);
  }
  .menu-wrap .head h2 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }
  .menu-wrap .head .head-lede {
    margin: 24px auto 0;
    max-width: 640px;
    color: #333;
    font-size: 16px; line-height: 1.55;
    text-align: center;
  }
  /* .menu service list (rows, cells, foot, mobile) — moved to components.css (§1) */

  /* ---------- SHADE SELECTOR (new) ---------- */
  .shades { background: var(--stone-2); padding: 56px 0; }
  .shade-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
  .shade-row .s {
    aspect-ratio: 3/4;
    position: relative;
    padding: 24px;
    display: flex; flex-direction: column; justify-content: space-between;
    color: var(--black);
  }
  .shade-row .s:last-child { /* no frame; intentionally empty */ }
  .shade-row .s.s1 { background: #d4ad88; }
  .shade-row .s.s2 { background: #c08964; }
  .shade-row .s.s3 { background: #ab7250; }
  .shade-row .s.s4 { background: #955d3c; }
  .shade-row .s.s5 { background: #7a4a2a; }
  .shade-row .s .label {
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase;
  }
  .shade-row .s .name {
    font-family: 'Quiche Sans', serif; font-size: 28px; line-height: 1; letter-spacing: -0.01em;
  }
  .shade-row .s .name small {
    display: block; font-family: 'Muli', sans-serif; font-weight: 400;
    font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 8px;
    opacity: 0.85;
  }
  .shade-key {
    display: flex; justify-content: space-between; margin-top: 24px;
    font-family: 'Muli', sans-serif; font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase;
  }
  /* Mobile/tablet: the head stacks, so tighten the space above and below the
     lede (flex gap + the section-head bottom margin). */
  @media (max-width: 980px) {
    .shades .sec-head { gap: 18px; margin-bottom: 28px; }
    /* Topic-links (e.g. "Other at-home massages"): drop the dash separators so a
       stray "–" never hangs at the end of a line on mobile/tablet. */
    .topic-links .sep { display: none; }
  }
  /* Mobile: the 3-up key collides; keep Subtle ← / → Bold as the spectrum
     endpoints on one line and drop "BESPOKE OPTIONS" centred beneath. */
  @media (max-width: 720px) {
    /* Mobile: tighter section rhythm (moderate reduction). */
    .menu-wrap, .shades, .how, .loved, .mag, .faq, .areas { padding: 40px 0; }
    .city-areas-sec { padding: 44px 0; }
    .final .inner { padding: 40px 22px; }
    .shade-key { flex-wrap: wrap; row-gap: 14px; }
    .shade-key span:nth-child(2) { order: 3; flex-basis: 100%; text-align: center; }
    /* Topic-links stack one per line on mobile (no dash separators). */
    .topic-links { flex-direction: column; align-items: center; gap: 14px; }
  }
  /* Tablet band (721–980px): keep the 5-swatch spectrum but shrink padding +
     type so columns fit the container without overflowing the page. */
  @media (min-width: 721px) and (max-width: 980px) {
    .shade-row .s { padding: 16px; }
    .shade-row .s .name { font-size: 22px; }
    .shade-row .s .name small { font-size: 12px; letter-spacing: 0.08em; }
    .shade-row .s .label { letter-spacing: 0.18em; }
  }
  @media (max-width: 720px) {
    /* Spectrum strip — 5 shades is an odd count for a 2-col grid (orphaned tile).
       On mobile present them as a swipeable, edge-to-edge spectrum that preserves
       the subtle→bold left-to-right reading, with the next shade peeking in. */
    .shade-row {
      display: flex;
      grid-template-columns: none;
      gap: 0;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin: 0 -36px;            /* cancel container padding → full-bleed */
      padding-left: 36px;         /* first swatch aligns to the content edge */
      scroll-padding-left: 36px;
    }
    .shade-row::-webkit-scrollbar { display: none; }
    .shade-row .s {
      flex: 0 0 62%;
      scroll-snap-align: start;
      padding: 22px;
    }
    .shade-row .s .name { font-size: 26px; }
    .shade-row .s .name small { font-size: 13px; letter-spacing: 0.1em; }
  }

  /* ---------- HOW IT WORKS (3-up photo cards, ported from Landing) ----------
     DESIGN RULE — matches Landing's how-it-works pattern:
       • 3 columns, never 4
       • Photo aspect 715:501 (landscape)
       • Body sits on stone-050 surface with 40px 36px 44px padding
       • Headline clamp(28px, 2.4vw, 36px), line-height 1.05
       • Photo background-colors per step are reference fallbacks. */
  .benefits { background: var(--stone-050); padding: 56px 0; }
  .how { background: var(--white); padding: 56px 0; }
  .how .sec-head {
    display: block; text-align: center;
    margin: 0 auto 36px; max-width: 760px;
  }
  .how .sec-head .left,
  .how .sec-head .right { max-width: none; }
  .how .sec-head .pre {
    color: var(--black);
    display: inline-flex; flex-direction: column; align-items: center; gap: 16px;
    margin-bottom: 28px;
  }
  .how .sec-head .pre::before { display: none; }
  .how .sec-head .pre::after {
    content: ""; display: block;
    width: 48px; height: 1px; background: var(--black);
  }
  .how .sec-head h2 { margin: 0; }
  .how .steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  }
  .how .step {
    display: flex; flex-direction: column;
  }
  .how .step .pic { position: relative; aspect-ratio: 715 / 501; overflow: hidden;
    background-size: cover; background-position: center; background-color: #4b2a1a; }
  .how .step .pic .num-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #E6FF00;
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(120px, 14vw, 200px);
    line-height: 1; letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.18);
    pointer-events: none;
    z-index: 2;
  }
  .how .step .pic .num-overlay::after { content: none; }
  .how .step.s1 .pic { background-image: url('/assets/imagery/HIW-1-booking.jpg'); background-color: #1a1714; }
  .how .step.s2 .pic { background-image: url('/assets/imagery/HIW-2-therapist.jpg'); background-color: #1a1a1a; background-position: center top; }
  .how .step.s3 .pic { background-image: url('/assets/imagery/HIW-3-dressing-gown.jpg'); background-color: #1a1714; background-position: center top; }
  /* OSKIA ingredient cards: no product photo yet (CMS-editable slot). Override the
     generic HIW-1/2/3 stock defaults above so an empty slot shows a neutral
     placeholder instead of an unrelated booking/therapist/dressing-gown photo. */
  .how .step .pic[data-slot^="oskia.ingredient."] { background-image: none; background-color: var(--stone-050); }
  .how .step .pic .num { display: none; }
  .how .step .body {
    background: var(--stone-050);
    padding: 40px 36px 44px;
    display: flex; flex-direction: column; gap: 16px;
    flex: 1;
  }
  .how .step .body h3 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(28px, 2.4vw, 36px); line-height: 1.05; margin: 0;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .how .step .body p { font-size: 16px; color: #333; margin: 0; line-height: 1.55; max-width: 320px; }
  @media (max-width: 900px) { .how .steps { grid-template-columns: 1fr; gap: 24px; } .how .step .pic { aspect-ratio: 4 / 3; } }

  /* ---------- AS LOVED BY (celebrity carousel, ported from Landing) ---------- */
  .loved { background: var(--white); padding: 56px 0; overflow: hidden; }
  .loved.is-stone { background: var(--stone-050); }
  .loved .container { max-width: 1360px; margin: 0 auto; }
  .loved .head { text-align: center; margin: 0 auto 36px; max-width: 760px; }
  .loved .head .pre {
    color: var(--black);
    display: inline-flex; flex-direction: column; align-items: center; gap: 16px;
    margin-bottom: 28px;
  }
  .loved .head .pre::before { display: none; }
  .loved .head .pre::after {
    content: ""; display: block;
    width: 48px; height: 1px; background: var(--black);
  }
  .loved .head h2 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }
  .loved .carousel {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }
  .loved .track {
    display: flex;
    width: max-content;
    animation: lovedScroll 90s linear infinite;
  }
  .loved .carousel:hover .track { animation-play-state: paused; }
  @keyframes lovedScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) { .loved .track { animation: none; } }
  .loved .card {
    flex: 0 0 320px; width: 320px; max-width: 320px; min-width: 0;
    margin-right: 32px;
    display: flex; flex-direction: column;
    background: var(--stone-050);
  }
  .loved .card .photo {
    aspect-ratio: 1 / 1;
    background-size: cover; background-position: center top;
    background-color: #4a2a1a;
    position: relative;
  }
  .loved .card .year {
    position: absolute; top: 14px; right: 14px;
    background: rgba(0,0,0,0.55); color: var(--white);
    padding: 6px 10px;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  }
  .loved .card .body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
  .loved .card .name {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: 24px; line-height: 1; letter-spacing: -0.005em;
    margin: 0;
  }
  .loved .card .role {
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: #444; margin: 0;
  }
  .loved .card .stars {
    font-size: 14px; letter-spacing: 0.18em; color: var(--black); margin: 4px 0 4px;
  }
  .loved .card .quote {
    font-family: 'Muli', sans-serif; font-size: 16px; line-height: 1.55;
    color: #1a1a1a; margin: 0;
  }
  .loved .card.c1 .photo { background-color: #b9865e; }
  .loved .card.c2 .photo { background-color: #97633e; }
  .loved .card.c3 .photo { background-color: #6e3a26; }
  .loved .card.c4 .photo { background-color: #C35A33; }
  .loved .card.c5 .photo { background-color: #5C1E1A; }
  .loved .card.c6 .photo { background-color: #2E5E5C; }

  /* Editorial variant (facial pages) — restyle the testimonial cards to match the
     Magazine block: an "open" card with a portrait image and text on the section
     background, no filled card box. Keeps the name/role/stars/quote content. */
  .loved.is-editorial .card { background: transparent; flex: 0 0 360px; width: 360px; max-width: 360px; }
  .loved.is-editorial .card .photo { aspect-ratio: 4 / 5; background-position: center; margin-bottom: 22px; }
  .loved.is-editorial .card .body { padding: 0; gap: 12px; }
  .loved.is-editorial .card .name { line-height: 1.15; }
  @media (max-width: 720px) {
    .loved.is-editorial .card { flex: 0 0 280px; width: 280px; max-width: 280px; }
  }

  /* ---------- BIG QUOTE ---------- */
  .pullquote { background: var(--black); color: var(--black); padding: 56px 0; }
  .pullquote .inner { max-width: 1100px; margin: 0 auto; text-align: center; padding: 0 48px; }
  .pullquote .pre { color: var(--stone); margin-bottom: 32px; justify-content: center; display: inline-flex; }
  .pullquote blockquote {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(26px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -0.01em;
    margin: 0 0 32px;
    text-wrap: balance;
    color: var(--white);
  }
  .pullquote .by {
    font-family: 'Muli', sans-serif; font-size: 14px;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--stone);
  }
  .pullquote .by .dash { display: inline-block; width: 32px; height: 2px; background: var(--stone); vertical-align: middle; margin-right: 16px; }



  /* ---------- TESTIMONIALS (horizontal carousel, ported from Landing .loved) ---------- */
  .tstm { padding: 56px 0; background: var(--white); overflow: hidden; }
  .tstm.is-stone { background: var(--stone-050); }
  .tstm .container { max-width: 1360px; margin: 0 auto; }
  .tstm .head { text-align: center; margin: 0 auto 36px; max-width: 760px; }
  .tstm .head .pre {
    color: var(--black);
    display: inline-flex; flex-direction: column; align-items: center; gap: 16px;
    margin-bottom: 28px;
  }
  .tstm .head .pre::before { display: none; }
  .tstm .head .pre::after {
    content: ""; display: block;
    width: 48px; height: 1px; background: var(--black);
  }
  .tstm .head h2 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
    color: var(--black);
  }
  .tstm .carousel {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }
  .tstm .track {
    display: flex;
    width: max-content;
    animation: tstmScroll 120s linear infinite;
  }
  .tstm .carousel:hover .track { animation-play-state: paused; }
  @keyframes tstmScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tstm .track { animation: none; }
  }
  .tstm .card {
    flex: 0 0 340px; width: 340px;
    margin-right: 32px;
    background: var(--stone-050);
    color: var(--black);
    padding: 32px 30px 30px;
    display: flex; flex-direction: column; gap: 18px;
  }
  .tstm .card .lab {
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--black); margin: 0;
    text-align: left;
    line-height: 1.2;
  }
  .tstm .card .stars {
    font-size: 20px; letter-spacing: 0.18em; color: var(--black);
    line-height: 1;
    text-align: left;
    margin-bottom: 4px;
    
  }
  .tstm .card .quote {
    font-family: 'Muli', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 1.6; letter-spacing: 0;
    color: var(--black); margin: 0;
    flex: 1;
    text-wrap: pretty;
    text-align: left;
    max-width: 100%;
    padding: 0;
    /* Hard cap: quotes never exceed 7 lines (data is also trimmed in toCard). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
  }

  .tstm .card .who {
    display: block;
    padding-top: 8px;
    border-top: 0;
    text-align: left;
  }
  .tstm .card .attr-name {
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--black); margin: 0;
  }
  .tstm .card .attr-loc {
    font-family: 'Muli', sans-serif; font-weight: 400;
    font-size: 13px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase;
    color: #666; margin: 4px 0 0;
  }
  .tstm .cta-row { text-align: center; margin-top: 56px; }

  /* ---------- MAGAZINE (carousel, ported from Landing) ---------- */
  .mag { padding: 56px 0; background: var(--white); overflow: hidden; }
  .mag .container { max-width: 1360px; margin: 0 auto; }
  .mag .head { text-align: center; margin: 0 auto 36px; max-width: 760px; }
  .mag .head .pre {
    color: var(--black);
    display: inline-flex; flex-direction: column; align-items: center; gap: 16px;
    margin-bottom: 28px;
  }
  .mag .head .pre::before { display: none; }
  .mag .head .pre::after {
    content: ""; display: block;
    width: 48px; height: 1px; background: var(--black);
  }
  .mag .head h2 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }
  .mag .cta-row { text-align: center; margin-top: 56px; }
  .mag .carousel {
    position: relative; overflow: hidden;
    width: 100vw; margin-left: calc(50% - 50vw);
  }
  .mag .track {
    display: flex;
    width: max-content;
    animation: magScroll 80s linear infinite;
  }
  .mag .carousel:hover .track { animation-play-state: paused; }
  @keyframes magScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) { .mag .track { animation: none; } }
  .mag .card {
    flex: 0 0 360px; width: 360px;
    margin-right: 32px;
    display: flex; flex-direction: column;
    text-decoration: none; color: var(--black);
  }
  .mag .card .img {
    aspect-ratio: 4/5; margin-bottom: 22px;
    overflow: hidden; position: relative;
    background-color: #4b1d10;
    background-size: cover; background-position: center;
  }
  .mag .card.c1 .img { background-image: url('/assets/imagery/updo-earring.jpg'); }
  .mag .card.c2 .img { background-image: url('/assets/imagery/phone-lockscreen.jpg'); }
  .mag .card.c3 .img { background-image: url('/assets/imagery/phone-passcode.jpg'); }
  .mag .card.c4 .img { background-image: url('/assets/imagery/tan-chair-seated.jpg'); }
  .mag .card.c5 .img { background-image: url('/assets/imagery/tan-chair-portrait.jpg'); }
  .mag .card .img .tag {
    position: absolute; left: 20px; top: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.92), rgba(0,0,0,0.65));
    color: var(--white);
    padding: 10px 14px;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase;
  }
  .mag .card h3 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: 24px; line-height: 1.15; margin: 0 0 18px; letter-spacing: -0.005em;
    text-wrap: balance;
  }
  .mag .card .read {
    margin-top: auto;
    font-family: 'Muli', sans-serif; font-weight: 700; font-size: 14px;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--black);
    padding-top: 4px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    align-self: flex-start;
  }
  .mag .card .read::after { content: "→"; transition: transform 200ms ease; }
  .mag .card:hover .read::after,
  .mag .card .read:hover::after { transform: translateX(6px); }
  @media (max-width: 720px) {
    .mag .card { flex: 0 0 280px; width: 280px; margin-right: 20px; }
  }

  /* ---------- FAQ (centred head + Nº accordion, +/− toggle) ---------- */
  .faq { padding: 56px 0; background: var(--white); }
  .faq .head { text-align: center; margin: 0 auto 36px; max-width: 760px; }
  .faq .head .pre {
    color: var(--black);
    display: inline-flex; flex-direction: column; align-items: center; gap: 16px;
    margin-bottom: 28px;
  }
  .faq .head .pre::before { display: none; }
  .faq .head .pre::after {
    content: ""; display: block;
    width: 48px; height: 1px; background: var(--black);
  }
  .faq .head h2 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }
  /* .faq accordion (.list, details, summary, +/− toggle, .body, mobile) — moved to components.css (§3).
     .faq{} section bg + .faq .head stay below; .faq .cta-row uses blocks.css .cta-row. */

  /* ---------- AREAS (inline hyphen list, ported from Landing) ---------- */
  .areas { padding: 56px 0; background: var(--stone); }
  .areas .head { text-align: center; margin: 0 auto 40px; max-width: 760px; }
  .areas .head .pre {
    color: var(--black);
    display: inline-flex; flex-direction: column; align-items: center; gap: 16px;
    margin-bottom: 24px;
  }
  .areas .head .pre::before { display: none; }
  .areas .head .pre::after {
    content: ""; display: block;
    width: 48px; height: 1px; background: var(--black);
  }
  .areas .head h2 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }
  .areas .city-tabs-wrap { text-align: center; }
  .areas .city-tabs {
    display: inline-flex; gap: 0;
    border: 1px solid var(--black);
    margin: 0 auto 48px;
    padding: 0;
  }
  .areas .city-tabs button {
    background: transparent; border: 0;
    padding: 14px 28px;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
    border-right: 1px solid var(--black);
    transition: background 200ms ease, color 200ms ease;
  }
  .areas .city-tabs button:last-child { border-right: 0; }
  .areas .city-tabs button.is-active { background: var(--black); color: var(--white); }
  .areas .city { display: none; }
  .areas[data-city="london"]     .city.london     { display: block; }
  .areas[data-city="manchester"] .city.manchester { display: block; }
  .areas[data-city="brighton"]   .city.brighton   { display: block; }
  .areas .inline-areas {
    display: flex; flex-direction: column; align-items: center;
    row-gap: 8px;
    max-width: 1080px; margin: 0 auto;
    line-height: 2.4;
  }
  .areas .inline-areas .row {
    display: flex; flex-wrap: wrap; justify-content: center;
    column-gap: 0;
  }
  .areas .inline-areas a {
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--black); text-decoration: none;
    padding: 0 6px;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms ease;
    white-space: nowrap;
  }
  .areas .inline-areas a:hover { border-bottom-color: var(--black); }
  /* Areas without a dedicated page YET: render in the normal (black) area style so
     they don't look disabled — these become live links automatically once each
     area page exists. Not clickable yet (no href), so no broken links/404s. */
  .areas .inline-areas a.area-plain { color: var(--black); cursor: default; }
  .areas .inline-areas a.area-plain:hover { border-bottom-color: transparent; }
  .areas .inline-areas .sep {
    color: var(--black);
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.22em;
    margin: 0 6px;
    user-select: none;
  }
  @media (max-width: 1240px) {
    /* On tablet/narrow widths the area list wraps, leaving trailing dashes at
       line-ends. Lay BOTH rows of each city into ONE shared 2-column grid (via
       display:contents) so every "Area - Area" pair aligns and the dashes line
       up down the centre — no trailing dashes, no per-row misalignment. */
    .areas .inline-areas {
      display: grid;
      grid-template-columns: auto auto;
      justify-content: center;
      align-items: baseline;
      column-gap: 8px;
      row-gap: 14px;
      line-height: 1.4;
    }
    .areas .inline-areas .row { display: contents; }
    .areas .inline-areas .sep { display: none; }
    .areas .inline-areas a { padding: 0; }
    .areas .inline-areas .row a:nth-child(4n+1) { justify-self: end; }
    .areas .inline-areas .row a:nth-child(4n+1)::after {
      content: "-"; margin-left: 8px; color: var(--black); font-weight: 700;
    }
  }
  /* Phones: the city tab group is a fixed inline-flex (~499px) that overflows
     narrow viewports — stretch it full-width with equal buttons + tighter type. */
  @media (max-width: 720px) {
    .areas .city-tabs { display: flex; width: 100%; margin-bottom: 40px; }
    .areas .city-tabs button { flex: 1 1 0; padding: 14px 6px; font-size: 12px; letter-spacing: 0.1em; }
  }

  /* ---------- FINAL CTA (split, ported from Landing) ---------- */
  .final { background: var(--black); color: var(--white); padding: 0; }
  .final .frame {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
  }
  .final .photo {
    background: url('/assets/imagery/final-cta.jpg') center/cover no-repeat;
    background-color: #1a1714;
    position: relative;
    overflow: hidden;
  }
  .final .photo .tag {
    position: absolute; left: 32px; top: 32px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.92), rgba(0,0,0,0.65));
    color: var(--white);
    padding: 14px 18px;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase;
  }
  .final .photo .credit {
    position: absolute; right: 32px; bottom: 32px;
    color: var(--white);
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase;
  }
  .final .inner {
    text-align: left;
    padding: 96px 80px;
    display: flex; flex-direction: column; justify-content: center;
    max-width: none; margin: 0;
  }
  .final .pre {
    color: var(--stone);
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 16px;
    margin-bottom: 28px;
  }
  .final .pre::before { display: none; }
  .final .pre::after {
    content: ""; display: block;
    width: 48px; height: 1px; background: var(--stone);
  }
  .final h2 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: clamp(32px, 4vw, 52px); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 28px;
    text-wrap: balance;
  }
  .final p.lede { color: var(--stone); font-size: 16px; line-height: 1.55; max-width: 480px; margin: 0 0 40px; }
  .final .ctas { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; }
  @media (max-width: 980px) {
    .final .frame { grid-template-columns: 1fr; min-height: 0; }
    .final .photo { aspect-ratio: 4/3; }
    .final .inner { padding: 56px 22px; }
  }

  /* ---------- Footer (ported from Secret Spa Landing Page) ---------- */
  /* Footer is EXCLUDED from the site-wide padding increase — kept at the
     original 160 / 80 / 28 gutters. */
  footer.site .container { max-width: 1360px; margin: 0 auto; padding: 0 160px; }
  @media (max-width: 1100px) { footer.site .container { padding: 0 80px; } }
  @media (max-width: 720px)  { footer.site .container { padding: 0 36px !important; } }
  footer.site { background: var(--black); color: var(--stone); padding: 80px 0 36px; }
  footer.site .top {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 40px; gap: 24px; flex-wrap: wrap;
  }
  footer.site .brand-logo {
    display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
    text-decoration: none;
  }
  footer.site .top-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 18px;
  }
  footer.site .top-right .app-cta {
    display: inline-block;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    padding: 16px 28px;
    background: var(--white); color: var(--black);
    border: 1px solid var(--white);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  footer.site .top-right .app-cta:hover { background: transparent; color: var(--white); border-color: var(--white); }
  footer.site .brand-logo img {
    display: block; height: 32px; width: auto;
    filter: brightness(0) invert(1);
  }
  footer.site .socials { display: inline-flex; gap: 12px; }
  footer.site .socials a {
    width: 36px; height: 36px;
    border: 1px solid var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--white);
    transition: background 200ms ease, color 200ms ease;
  }
  footer.site .socials a:hover { background: var(--white); color: var(--black); }
  footer.site .socials svg { width: 18px; height: 18px; }
  footer.site .row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  }
  footer.site h4 {
    font-family: 'Quiche Sans', serif; font-weight: 500;
    font-size: 26px; letter-spacing: -0.005em;
    color: var(--white);
    margin: 0 0 28px;
    text-transform: none;
  }
  footer.site ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
  footer.site a {
    color: var(--stone); text-decoration: none;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  }
  footer.site a:hover { color: var(--white); }
  footer.site .bottom {
    margin-top: 80px; padding-top: 24px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 11px; color: var(--stone); letter-spacing: 0.28em; text-transform: uppercase;
  }
  footer.site .bottom .legal { display: flex; gap: 48px; flex-wrap: wrap; white-space: nowrap; }
  footer.site .bottom .legal a { color: var(--stone); }
  footer.site .bottom .legal a:hover { color: var(--white); }
  @media (max-width: 980px) {
    /* Centralise the whole footer once it stacks on mobile/tablet */
    footer.site { padding-top: 40px; }
    footer.site .top { flex-direction: column; align-items: center; text-align: center; }
    footer.site .brand-logo { align-items: center; }
    footer.site .top-right { align-items: center; }
    footer.site .row { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    footer.site ul { align-items: center; }
    footer.site .bottom { flex-direction: column; align-items: center; text-align: center; }
    footer.site .bottom .legal { justify-content: center; }
  }


  /* ---------- CONCIERGE MODAL + HAMBURGER + MOBILE MENU + HEADER RESPONSIVE ----------
     All moved to blocks.css (§6 header/hamburger + responsive, §7 mobile menu overlay,
     §12 concierge modal). */

  /* DESIGN RULE — Mobile: hide all image overlay text labels on the hero.
     The index label (spine text) and vertical caption are desktop editorial
     details only — too small to read on mobile and crowd the hero image.
     Do not show on viewports under 980px. */
  @media (max-width: 980px) {
    /* DESIGN RULE — Mobile & tablet: hide ALL hero image text (the editorial
       spine label AND the captions). They are desktop-only editorial details
       that crowd the image on smaller screens. */
    .hero .index-label,
    .hero .caption-full,
    .hero .caption-tl,
    .hero .caption-br { display: none !important; }
  }

  /* DESIGN RULE — Mobile padding scale:
     On mobile we use 36px left/right to give more editorial breathing room.
     Footer is pinned to 28px (excluded). Full-bleed exceptions (hero image,
     video reel, carousels, brands marquee, magazine carousel, testimonials
     carousel, loved carousel) remain 0 padding as they are intentionally
     edge-to-edge. */
  @media (max-width: 720px) {
    .container { padding: 0 36px !important; }
    /* Hero copy column matches the content gutter */
    .hero .copy { padding-left: 36px !important; padding-right: 36px !important; }
    /* Benefits stack narrow container */
    .benefits .container { padding: 0 36px !important; }
    /* FAQ and menu */
    .faq details .body { padding-left: 0; }
    /* CTA buttons: long labels (e.g. "BOOK YOUR MASSAGE") at 56px side padding make
       the button wider than the 36px-gutter content width, so it overflows the right
       gutter (asymmetric 36px left / 16px right). Trim side padding on mobile so the
       centred button fits within the gutters; max-width guards any longer label. */
    .cta-row .btn-cta { padding: 20px 40px !important; max-width: 100%; }
  }

  /* ---------- Hero image split captions ---------- */
  /* DESIGN RULE: On mobile, "Tan tonight" sits top-left of the image,
     "Out tomorrow" bottom-right — replacing the single vertical caption. */
  .hero .caption-tl,
  .hero .caption-br {
    position: absolute;
    color: var(--white);
    font-family: 'Muli', sans-serif; font-weight: 700;
    font-size: 11px; line-height: 1; letter-spacing: 0.34em; text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    z-index: 3;
  }
  .hero .caption-tl { left: 18px; top: 18px; right: auto; bottom: auto; text-align: left; }
  .hero .caption-br { right: 18px; bottom: 18px; left: auto; top: auto; }
  /* Desktop only: the combined caption (.caption-full) shows bottom-right.
     All hero image text is hidden under 980px (see the rule above), so the
     split tl/br captions are not used on mobile. */
  .hero .caption-tl,
  .hero .caption-br { display: none; }

  /* DESIGN RULE — Mobile hero image:
     The hero image (.hero .stack) must ALWAYS be full-bleed on mobile —
     no left/right margin, no padding, edge-to-edge viewport width.
     This applies at every breakpoint under 980px regardless of container
     padding changes elsewhere on the page. */
  @media (max-width: 980px) {
    .hero .stack {
      width: 100vw !important;
      margin-left: calc(-1 * var(--hero-gutter, 0px)) !important;
      margin-right: 0 !important;
      position: relative;
    }
    .hero > .container {
      overflow: visible;
    }
    .hero .grid {
      overflow: visible;
    }
  }

  /* MOBILE FIXES — hero container + captions */
  @media (max-width: 720px) {
    /* Exclude hero container from general padding rule —
       hero has its own padding rules (left only, right 0 for full-bleed) */
    .hero > .container {
      padding: 0 !important;
      overflow: visible !important;
    }
    .hero .copy {
      padding: 28px 36px 36px 36px !important;
    }
    .hero .stack {
      overflow: visible !important;
      width: 100vw !important;
      max-width: 100vw !important;
    }
  }

  /* City areas — flat list (used by Topic Links). The single-city "Areas served"
     dash list reuses the tabbed SEO layout (.areas .inline-areas) for consistency. */
  .city-areas-sec { padding: 80px 0; }
  .city-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: 920px; margin-top: 8px; }
  .city-areas a { color: var(--black); text-decoration: none; font-family: 'Muli', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
  .city-areas a:hover { text-decoration: underline; }
  .city-areas .sep { color: var(--stone-700); font-size: 13px; line-height: 1; align-self: center; }
  /* Topic Links: once a topic is clicked, dim the rest so the active one stands out. */
  .topic-links a { transition: color 200ms ease; }
  .topic-links.has-active a { color: var(--stone-700); }
  .topic-links.has-active a.is-active { color: var(--black); }

  /* ---- Supporting / marketing page utilities ---- */

  /* Bridal packages — text-led editorial rows (photoless by design): index +
     name + price lead on the left, includes + note on the right, hairline
     rules between rows, one CTA in the section foot. */
  .packages { margin-top: 32px; border-top: 1px solid rgba(26, 22, 18, 0.16); }
  .packages .pkg {
    display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px;
    padding: 48px 0; border-bottom: 1px solid rgba(26, 22, 18, 0.16);
  }
  .packages .pkg-index {
    display: block;
    font-family: var(--f-body); font-weight: 700;
    font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--stone-700); margin: 0 0 14px;
  }
  .packages .pkg-name {
    font-family: var(--f-display); font-weight: 500;
    font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.005em;
    margin: 0; text-wrap: balance;
  }
  .packages .pkg-from {
    font-family: var(--f-body); font-weight: 700;
    font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--black); margin: 16px 0 0;
  }
  .packages .pkg-note { font-family: var(--f-body); font-size: 18px; line-height: 1.6; color: #555; margin: 0; }
  .packages .pkg-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .packages .pkg-list li {
    font-family: var(--f-body); font-size: 18px; line-height: 1.55; color: #1a1a1a;
    display: flex; align-items: baseline; gap: 14px;
  }
  .packages .pkg-list li::before {
    content: ""; flex: 0 0 auto;
    width: 5px; height: 5px; background: var(--black);   /* squared marker */
    transform: translateY(-4px);
  }
  .packages-foot { margin-top: 48px; text-align: center; }
  @media (max-width: 980px) {
    .packages .pkg { grid-template-columns: 1fr; row-gap: 24px; padding: 40px 0; }
    .packages .pkg-from { margin-top: 12px; }
  }

  .prose { max-width:760px; }
  .prose h2 { font-family:'Quiche Sans',serif; font-weight:500; font-size:26px; margin:40px 0 14px; }
  .prose h3 { font-family:'Muli',sans-serif; font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin:28px 0 10px; }
  .prose p { margin:0 0 16px; color:#333; line-height:1.7; }
  .prose a { color:var(--black); }
  /* Legal copy cites full URLs, e.g.
     https://go.rakutenadvertising.com/hubfs/Services-Privacy-Policy-English.pdf
     which is 74 unbreakable characters. At 375px it painted 66px past the viewport
     and made the whole page scroll sideways. The box was never too wide — the TEXT
     was, which is why an element-level overflow audit finds nothing here. */
  .prose { overflow-wrap: anywhere; }
  .prose a { overflow-wrap: anywhere; }
  /* Article/body images (magazine, case studies, service bodies): cap to the column
     and OVERRIDE the width/height attributes astro:assets emits — without height:auto
     the attribute height wins and landscape photos render crushed. Squared edges. */
  .prose img { max-width:100%; height:auto; display:block; margin:28px 0; }
  /* Editorial page header (magazine articles/hubs, case studies): shares the .prose
     column geometry so the eyebrow/H1/date left edge aligns with the body and images
     below — .head alone is an auto-centred block and sits visibly indented. */
  .head.article-head { max-width:760px; margin:0; text-align:left; }

  .contact-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 56px; margin-top:16px; max-width:880px; }
  .contact-cols .grp h3 { font-family:'Muli',sans-serif; font-weight:700; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--stone-700); margin:0 0 14px; }
  .contact-cols .grp .role { font-family:'Quiche Sans',serif; font-size:18px; margin:12px 0 4px; }
  .contact-cols .grp a { display:inline-block; color:var(--black); text-decoration:none; font-size:15px; margin:0 0 4px; }
  .contact-cols .grp a:hover { text-decoration:underline; }
  @media (max-width:720px){ .contact-cols{ grid-template-columns:1fr; } }