:root {
    --ground: #f2ece0;
    --surface: #fbf8f1;
    --surface-on: #f3e4c8;
    --walnut: #3c5346; /* was #1e2923; lightened about 20%, then brought 10% back down (Stephanie, 2026-10-08) */
    --walnut-2: #475f52; /* was #2a3831 */
    --ink: #26241f;
    --ink-soft: #4a443b;
    --line: rgba(90, 64, 36, 0.2);
    --line-strong: rgba(122, 92, 48, 0.45);
    --gold: #a07a36;
    --gold-deep: #8a6420;
    --forest: #2a4a37;
    --step--3: 11px;
    --step--2: 13px;
    --step--1: 15px;
    --step-0: 17px;
    --step-1: 21px;
    --step-2: 26px;
    --step-3: clamp(27px, 2.6vw, 33px);
    --step-4: clamp(33px, 3.6vw, 42px);
    --gold-bright: #d8b46c;
    --amber: #c07a2c;
    --cream: #f4ead7;
    --cream-soft: #d6c4a5;
    --leaf: #4f5d3d;
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
    --head-h: 94px; --stick: 94px;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased;
    /* The twentieth-year badge glides in from beyond the right edge on the home page. Without
       this the page was briefly wider than the screen and could be scrolled sideways (found
       2026-10-14). clip, not hidden, so the sticky header keeps working. */
    overflow-x: clip; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: 0.01em; line-height: 1.12; text-wrap: balance; margin: 0; }
  p { margin: 0; }
  a { color: var(--gold-deep); }
  img { max-width: 100%; }
  .wrap { max-width: 1140px; margin: 0 auto; padding-inline: 20px; }
  .narrow { max-width: 720px; }
  .eyebrow { font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--leaf); font-weight: 700; }
  .tbd { display: inline-block; font-family: var(--sans); font-size: var(--step--2); line-height: 1.4; letter-spacing: .03em; color: #6d4e17; background: rgba(216,180,108,.16); border: 1px dashed #b08845; border-radius: 999px; padding: 2px 9px; white-space: nowrap; vertical-align: middle; font-weight: 600; }
  .dark .tbd, .visit .tbd, .bar .tbd, .tile .tbd { color: var(--gold-bright); border-color: var(--gold-bright); background: rgba(216,180,108,.1); }

  .notice { background: var(--walnut-2); color: var(--cream-soft); font-size: var(--step--2); text-align: center; padding: 7px 16px; }
  .notice a { color: var(--gold-bright); text-decoration: underline; }
  .notice strong { color: var(--gold-bright); }

  /* Header */
  /* A light header with her logo centred: the drawing, then Rapunzel's, then — SPA — */
  header.top { background: var(--surface); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
    border-bottom: 1px solid rgba(160,122,54,.28); }

  /* Gold falls from the top of the page once, over the cream, and dissolves
     before it reaches the picture below. Four layers at different speeds.

     9.5 seconds, not 7: the anniversary button takes five seconds to cross the header, and
     the gold used to be thinning out before it arrived. The emblem's catch of the light and
     the hairline settling are tied to the same number so the three stay in step — change
     one and you have to change all three. */
  .goldfall { display: none; }
  html.sparkle .goldfall { display: block; position: fixed; top: 0; left: 0; right: 0; height: 300px; z-index: 60;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
    background-image:
      radial-gradient(circle, rgba(206,168,96,.96) 0 1.7px, transparent 2.3px),
      radial-gradient(circle, rgba(176,134,60,.92) 0 1.2px, transparent 1.8px),
      radial-gradient(circle, rgba(214,176,106,.94) 0 1.4px, transparent 2px),
      radial-gradient(circle, rgba(160,122,54,.9) 0 1px, transparent 1.5px),
      radial-gradient(circle, rgba(218,182,114,.96) 0 1.5px, transparent 2.1px),
      radial-gradient(circle, rgba(186,146,72,.92) 0 1.1px, transparent 1.7px),
      radial-gradient(circle, rgba(210,172,100,.94) 0 1.3px, transparent 1.9px),
      radial-gradient(circle, rgba(138,100,32,.88) 0 .9px, transparent 1.4px),
      radial-gradient(circle, rgba(202,162,88,.94) 0 1.6px, transparent 2.2px),
      radial-gradient(circle, rgba(180,140,66,.9) 0 1.1px, transparent 1.7px),
      radial-gradient(circle, rgba(208,170,98,.92) 0 1.2px, transparent 1.8px),
      radial-gradient(circle, rgba(150,112,46,.88) 0 1px, transparent 1.5px);
    background-size: 110px 300px, 78px 300px, 155px 300px, 62px 300px,
      132px 300px, 94px 300px, 186px 300px, 70px 300px,
      120px 300px, 86px 300px, 168px 300px, 58px 300px;
    background-position: 0 -300px, 40px -300px, 80px -300px, 20px -300px,
      15px -300px, 65px -300px, 100px -300px, 50px -300px,
      30px -300px, 75px -300px, 130px -300px, 10px -300px;
    background-repeat: repeat-x;
    opacity: 0;
    animation: goldfall 9.5s cubic-bezier(.33,.25,.5,1) 0s 1 both; }

  /* The mark catches the light as the gold falls past it. */
  html.sparkle header.top .mark .emblem { animation: markCatch 9.5s cubic-bezier(.33,.25,.5,1) 0s 1 both; }
  @keyframes markCatch {
    0%, 22% { filter: none; transform: none; }
    40%     { filter: drop-shadow(0 0 10px rgba(255,236,190,.95)) drop-shadow(0 0 22px rgba(216,180,108,.6)) brightness(1.16);
              transform: scale(1.03); }
    68%     { filter: drop-shadow(0 0 5px rgba(216,180,108,.35)); transform: none; }
    100%    { filter: none; transform: none; }
  }

  /* and the last of it settles in the hairline under the nav */
  html.sparkle header.top { animation: ruleSettle 9.5s ease-out 0s 1 both; }
  @keyframes ruleSettle {
    0%, 44% { border-bottom-color: rgba(160,122,54,.28); }
    64%     { border-bottom-color: rgba(240,206,132,.9); }
    100%    { border-bottom-color: rgba(160,122,54,.28); }
  }

  @keyframes goldfall {
    /* The layers used to begin 300px above the strip, so nothing was visible until almost
       halfway through — the fall looked late. They now start just above the top edge,
       staggered, so gold is coming down from the first moment. */
    0%   { opacity: 0; background-position: 0 -6px, 40px -14px, 80px -2px, 20px -20px,
      15px -9px, 65px -24px, 100px -4px, 50px -17px,
      30px -11px, 75px -22px, 130px -7px, 10px -3px; }
    1%   { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; background-position: 0 320px, 40px 430px, 80px 250px, 20px 360px,
      15px 290px, 65px 400px, 100px 230px, 50px 345px,
      30px 375px, 75px 265px, 130px 410px, 10px 300px; }
  }
  /* Pictures running down a group page under its intro. The iris bands come on a white
     ground, so they are given a white card of their own rather than being left to sit as a
     pale rectangle on the cream — the edge reads as deliberate that way. */
  .menu-split { display: grid; gap: 30px; align-items: start; }
  /* Beside a pictures column, the cards run one per row and fill the width they are given.
     Left at the usual two-up, a category with a single treatment gets a card half the width
     of its own column, and the description runs long and thin down the page. */
  .menu-split .menu-cards { grid-template-columns: 1fr; max-width: none; margin-top: 26px; }
  .menu-strips { display: grid; gap: 24px; align-content: start; }
  .menu-strip { margin: 0; }
  /* The iris cut-outs have a transparent background, so they sit straight on the cream —
     no card, no panel, nothing behind them. Only the armchairs photograph gets a corner
     radius, because it is the only one with edges to soften. */
  .menu-strip img { display: block; width: 100%; height: auto; }
  .menu-strip:not(.cutout) img { border-radius: 14px; }
  /* Beside the cards once there is room for two columns; stacked underneath below that.
     The pictures column is deliberately narrow — they are there to show what the room and
     the irises look like, not to outweigh the treatment they sit next to. */
  @media (min-width: 900px) {
    .menu-split { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 40px; }
  }
  @media (max-width: 899px) { .menu-strips { margin-top: 28px; max-width: 420px; } }

  /* A required statement about what a treatment is and is not. Quieter than the
     description so it does not shout, but never small enough to be a disclaimer people
     are not expected to read. */
  /* Smallest text in the card, but NOT faint with it: the colour stays at full strength and
     the line height stays generous. Small is a hierarchy; washed-out grey would be hiding it,
     and this is the paragraph saying the practice is not scientifically validated. */
  /* Named per card type, like .care above it. A bare `.legal` loses to `.hs-card p` and
     `.item p`, which carry a class AND an element and therefore outrank a lone class. */
  .legal, .item .legal, .hs-card .legal {
    margin-top: 14px; font-size: var(--step--3); line-height: 1.7; font-style: italic;
    color: var(--ink-soft); max-width: 70ch; padding-left: 12px;
    border-left: 2px solid rgba(160,122,54,.35); }
  .dark .legal, .visit .legal, .bar .legal { color: var(--cream-soft);
    border-left-color: rgba(216,180,108,.45); }

  /* ---------- THE ANNIVERSARY TAG ----------
     Pinned to the top-left of the hero, below the nav so it never fouls the Menu button.
     A notched tail on the right end so it reads as a ribbon rather than a label, and a
     darker fold at the left where it turns back into the edge of the picture. */
  /* The same gold as the Reservations button — the glitter texture under the same pale
     wash, not a gradient pretending to be it. If that button's gold ever changes, this
     follows it. */
  /* Same pill and same gold as Reservations, but with a thinner cream wash over the
     glitter and a firmer edge — at the button's own opacity it sank into the cream header
     and you could not see it. */
  /* 600, not 700: Cormorant Garamond is only loaded at 500 and 600, so 700 is synthesised
     by the browser. Faked bold thickens the big numeral far more than the small caps, which
     is exactly why the 20 looked bolder than the words beside it. At 600 the whole line is
     one real weight, and crisper for it. */
  .anniv { display: inline-flex; align-items: baseline; gap: 1px; margin: 0;
    padding: 6px 20px; border-radius: 999px; text-decoration: none; white-space: nowrap;
    font-family: var(--serif); font-weight: 600; font-size: var(--step--1); letter-spacing: .1em;
    text-transform: uppercase; color: var(--walnut);
    /* Three layers, top to bottom:
       1. a soft-edged pool of flat gold under the words, so the glitter is not sparkling
          through the letters and making them hard to read;
       2. the exact cream wash the Reservations button uses — same numbers, so the two
          golds are the same gold rather than two shades that nearly match;
       3. the same glitter texture, which still shows all round the rim. */
    background-image:
      radial-gradient(ellipse 60% 66% at 50% 50%,
        rgba(238,214,154,.97) 0%, rgba(238,214,154,.93) 46%, rgba(238,214,154,0) 84%),
      linear-gradient(rgba(255,243,215,.38), rgba(255,233,190,.46)),
      url(/img/gold-glitter.png);
    background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 1px rgba(138,100,32,.7);
    transition: box-shadow .2s ease, color .2s ease;
    /* It arrives: in from the right, slowing the whole way, and then it simply stays.
       z-index so it passes in front of the logo rather than sliding underneath it. */
    position: relative; z-index: 2; }
  /* The glide belongs to the home page only. On every other page the badge is simply there,
     in its place, from the start: arriving again on each page read as a glitch. */
  body[data-route="home"] .anniv { animation: annivIn 9s cubic-bezier(.16,.66,.24,1) .3s both; }
  /* Nine seconds to cross, slowing the whole way, landing at 9.3 — just before the gold
     finishes falling at 9.5. The two are deliberately one event rather than two things
     happening near each other. Then it stays, so the link to Our Story is always there. */
  @keyframes annivIn {
    from { transform: translateX(76vw); }
    to   { transform: translateX(0); }
  }
  .anniv:hover, .anniv:focus-visible { color: var(--forest);
    box-shadow: inset 0 0 0 1px rgba(138,100,32,1), 0 4px 14px rgba(160,122,54,.35); }
  /* The 20 is the point of the thing, so it is the biggest part of it; the ordinal rides
     small and high beside it, the way it is set in print. */
  .anniv .n { font-size: 1.95em; font-weight: 600; letter-spacing: .02em; line-height: 1;
    margin: 0 .06em; }
  /* Below this the header has only room for Menu, the logo and Reservations, and the
     badge would push the logo off centre. It steps aside rather than crowding them. */
  @media (max-width: 1060px) { .anniv { display: none; } }

  /* ---------- THE TWENTIETH YEAR, 2006–2026 ----------
     A gold ribbon sails in from the right, crosses under the nav and slips out to the left
     while the gold is falling — so the fall reads as coming off the ribbon rather than two
     effects that happen to coincide.

     It rides INSIDE the header, pinned to its underside, so it sits in the right place at
     every width with nothing to measure. It shows only on `html.arriving` — the page the
     visitor lands on, once per visit. The gold keeps its own every-third rhythm. */
  .ribbon20 { display: none; }
  html.arriving .ribbon20 { display: block; position: absolute; top: 100%; left: 0; right: 0;
    height: 186px; overflow: hidden; pointer-events: none; }
  html.arriving .ribbon20 i { position: absolute; top: 0; left: 0; font-style: normal;
    animation: ribbonSail 15s linear .3s 1 both; }

  /* Drawn as SVG, because a swallowtail banner is curves and folds — a CSS box with
     rounded ends can only ever approximate it. Scales to any size without blurring. */
  /* Sized so the ribbon clears the hero's own "EST. 2006" line rather than sitting on it. */
  html.arriving .ribbon20 .rib { display: block; position: relative; width: 540px;
    filter: drop-shadow(0 10px 18px rgba(40,28,8,.40));
    animation: ribbonSway 4.4s ease-in-out .3s infinite; }
  html.arriving .ribbon20 .rib img { display: block; width: 100%; height: auto; }
  /* The words sit on the flat of the band, a little below the middle of the picture
     because the ribbon dips as it crosses, and turned to follow that slope. */
  html.arriving .ribbon20 .rib b { position: absolute; left: 50%; top: 54%;
    transform: translate(-50%, -50%) rotate(-1.2deg); white-space: nowrap;
    font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: .1em;
    text-transform: uppercase; color: #4a3410;
    text-shadow: 0 1px 0 rgba(255,246,222,.45); }

  /* In from the right, HOLD in the middle long enough to be read, then away to the left. */
  @keyframes ribbonSail {
    0%   { transform: translateX(100vw); animation-timing-function: cubic-bezier(.17,.67,.3,1); }
    27%  { transform: translateX(calc(50vw - 50%)); animation-timing-function: linear; }
    73%  { transform: translateX(calc(50vw - 50%)); animation-timing-function: cubic-bezier(.6,.04,.75,.16); }
    100% { transform: translateX(-115%); }
  }
  /* Silk, not a marquee: it breathes while it waits. */
  @keyframes ribbonSway {
    0%, 100% { transform: translateY(0) rotate(-.4deg); }
    50%      { transform: translateY(2px) rotate(.4deg); }
  }
  @media (max-width: 760px) {
    html.arriving .ribbon20 { height: 140px; }
    html.arriving .ribbon20 .rib { width: 90vw; max-width: 420px; }
    html.arriving .ribbon20 .rib b { font-size: 16px; letter-spacing: .07em; }
  }

  @media (prefers-reduced-motion: reduce) {
    .goldfall { display: none; }
    header.top, header.top .mark .emblem { animation: none; }
    /* The badge is still there — it just does not travel to get there. */
    .anniv, body[data-route="home"] .anniv { animation: none; transform: none; }
    /* It still says its piece — it simply does not travel. */
    html.arriving .ribbon20 i { left: 50%; animation: ribbonHold 7s ease-in-out .2s 1 both; }
    html.arriving .ribbon20 b { animation: none; }
    @keyframes ribbonHold {
      0%, 100% { opacity: 0; transform: translateX(-50%); }
      12%, 82% { opacity: 1; transform: translateX(-50%); }
    }
  }
  .top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--head-h); gap: 12px; }
  .head-left { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 14px; }
  .mark { grid-column: 2; text-decoration: none; color: var(--ink); display: grid; justify-items: center; line-height: 1; }
  .mark .emblem { height: 36px; width: auto; }
  .mark b { font-family: var(--serif); font-weight: 600; font-size: 29px; letter-spacing: .03em; margin-top: 3px; }
  .mark .spa { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 9.5px; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
  .mark .spa::before, .mark .spa::after { content: ""; width: 20px; height: 1px; background: rgba(160,122,54,.6); }
  .head-actions { grid-column: 3; justify-self: end; display: flex; gap: 10px; align-items: center; }
  /* Reservations: the gold glitter behind, deep green type on top. A pale wash evens the
     image out so the words stay readable wherever the sparkle happens to be bright. */
  .req { text-decoration: none; color: var(--walnut); font-weight: 700; font-size: var(--step--1);
    padding: 10px 20px; border-radius: 999px; white-space: nowrap;
    background-image: linear-gradient(rgba(255,243,215,.38), rgba(255,233,190,.46)), url(/img/gold-glitter.png);
    background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 1px rgba(138,100,32,.5);
    transition: box-shadow .2s ease, color .2s ease; }
  .req:hover { color: var(--forest); box-shadow: inset 0 0 0 1px rgba(138,100,32,.85), 0 4px 14px rgba(160,122,54,.3); }
  .req .short { display: none; }
  .menu-btn { background: none; border: 1px solid var(--line-strong); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: var(--step--1); cursor: pointer; }
  .navrow { display: none; border-top: 1px solid rgba(160,122,54,.18); }
  .navrow nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 40px; min-height: 42px; font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; }
  .back { margin: 0 0 6px; }
  .back a { color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: var(--step--1); letter-spacing: .02em; }
  .back a:hover { color: var(--gold-deep); }
  .navrow a { color: var(--ink-soft); text-decoration: none; white-space: nowrap; font-weight: 700; }
  .navrow a[aria-current="page"], .navrow a:hover { color: var(--gold-deep); }
  .menu-panel { display: none; background: var(--surface); padding: 4px 20px 16px; border-top: 1px solid rgba(160,122,54,.18); }
  .menu-panel.open { display: grid; }
  .menu-panel a { color: var(--ink); text-decoration: none; padding: 11px 0; border-bottom: 1px solid var(--line); }
  /* At this width the nav row carries the links, so the Menu button steps aside. It used
     to be hidden with `visibility`, which left its box behind — an invisible gap holding
     the anniversary tag away from the edge. `display:none` takes the space back, and the
     logo stays centred because the header's outer columns are both 1fr. */
  @media (min-width: 1100px) { :root { --head-h: 100px; --stick: 142px; } .navrow { display: block; } .menu-btn { display: none; } }
  .nav-drop { position: relative; display: inline-flex; align-items: center; }
  .nav-drop::after { content: ""; position: absolute; top: 100%; left: -20px; right: -20px; height: 18px; }
  .nav-drop:hover .nav-panel, .nav-drop:focus-within .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .nav-drop .nav-panel.closed { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(6px); }
  .nav-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); margin-top: 10px; z-index: 60; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; width: max-content; max-width: min(760px, calc(100vw - 32px)); background: var(--walnut); border: 0; border-radius: 16px; box-shadow: 0 26px 64px rgba(30,41,35,.42); padding: 14px; display: block; text-align: left; }
  .np-cats { display: grid; grid-auto-flow: column; gap: 2px 8px; }
  .nav-panel a { display: block; padding: 10px 14px; white-space: nowrap; border-radius: 10px; font-family: var(--serif); font-size: var(--step-0); font-weight: 500; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--cream); transition: background .18s ease, color .18s ease; }
  .nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(244,234,215,.12); color: var(--gold-bright); }
  .nav-panel .viewall { color: var(--gold-bright); font-style: italic; }
  .nav-panel .np-cats + .start { border-top: 1px solid rgba(244,234,215,.18); margin-top: 8px; padding-top: 13px; }
  .nav-panel .all { border-top: 1px solid rgba(244,234,215,.18); margin-top: 8px; padding-top: 13px; font-family: var(--sans); font-size: var(--step--2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright); }
  @media (max-width: 700px) { .np-cats { grid-auto-flow: row; grid-template-rows: none !important; } }
  @media (max-width: 440px) { .mark .emblem { height: 26px; } .mark b { font-size: var(--step-1); } .mark .spa { font-size: 8.5px; } .mark .spa::before, .mark .spa::after { width: 12px; } .req { padding: 7px 12px; font-size: var(--step--2); } .req .long { display: none; } .req .short { display: inline; } .menu-btn { padding: 6px 11px; } }

  /* Right under the welcome: why people can trust us, at a glance */
  .trust { background: var(--surface); border-bottom: 1px solid rgba(160,122,54,.22); }
  .trust .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-block: 20px; text-align: center; }
  .trust b { display: block; font-family: var(--serif); font-size: clamp(19px, 2.4vw, 26px); font-weight: 600; color: var(--ink); line-height: 1.15; }
  .trust span { display: block; font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-top: 4px; }
  .trust .wrap > div + div { border-left: 1px solid rgba(160,122,54,.25); }
  .welcome .kicker { font-size: var(--step--2); letter-spacing: .34em; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; margin-bottom: 20px; }

  .page[hidden] { display: none; }
  section.block { padding-block: 72px; }
  .block h2, .story-words h1 { font-size: clamp(32px, 5vw, 48px); }
  .lede { font-size: var(--step-1); color: var(--ink-soft); margin-top: 14px; max-width: 60ch; }
  .dark { background: var(--walnut); color: var(--cream); }
  .dark .lede { color: var(--cream-soft); }
  .dark .eyebrow { color: var(--gold-bright); }
  /* On the dark bands the deeper gold is too dark to read - 2.8:1. The brighter
     gold reaches 7.5:1 there. Light sections keep the deeper one. */
  .dark a, .panel-card.dark a, .sig .feature a, .hs-foot a { color: var(--gold-bright); }
  .btn { display: inline-flex; justify-content: center; align-items: center; padding: 13px 24px; border-radius: 999px; border: 0; background: var(--walnut); color: var(--cream); font: 700 var(--step--1) var(--sans); letter-spacing: .02em; cursor: pointer; text-decoration: none; }
  .btn:hover { background: var(--walnut-2); }
  .btn.gold { background: var(--gold-bright); color: var(--walnut); }
  .btn.gold:hover { background: #e6c483; }
  .btn.ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(244,234,215,.6); }
  .btn.ghost:hover { background: rgba(244,234,215,.08); }
  .btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .btn:focus-visible, .req:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
  .waitline { display: inline-flex; align-items: center; gap: 10px; font-size: var(--step--1); }
  .waitline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px 2px rgba(216,180,108,.8); }

  /* HOME: a calm welcome. The words first, the building softly behind, gold dust drifting down. */
  .welcome { position: relative; min-height: min(84svh, 780px); display: grid; place-items: center; text-align: center; overflow: hidden; background: var(--walnut); color: var(--cream); }
  .welcome-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; filter: blur(2px) saturate(.9); transform: scale(1.05); opacity: .6; }
  .welcome-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(22,32,27,.28) 0%, rgba(22,32,27,.84) 80%); }
  .welcome-text { position: relative; z-index: 2; padding-block: 90px 70px; }
  .welcome .kicker { font-size: var(--step--2); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; margin-bottom: 20px; }
  .welcome h1 { font-size: clamp(42px, 7.4vw, 88px); line-height: 1.06; text-shadow: 0 2px 30px rgba(14,20,17,.6); }
  .welcome-sub { color: var(--cream-soft); font-size: clamp(18px, 2vw, 21px); margin-top: 24px; }
  .welcome .actions { justify-content: center; margin-top: 30px; }
  @keyframes flicker { 0%,100% { transform: translate(-50%,-50%) scale(1); filter: brightness(1); } 40% { transform: translate(-50%,-50%) scale(1.06); filter: brightness(1.15); } 70% { transform: translate(-50%,-50%) scale(.97); } }
  .shimmer-line { display: block; font-style: italic; margin-top: 4px;
    background: linear-gradient(100deg, #f4ead7 20%, #f3cf86 40%, #fff6e2 50%, #f3cf86 60%, #f4ead7 80%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
    filter: drop-shadow(0 2px 14px rgba(14,20,17,.6)); animation: shimmer 5.5s ease-in-out infinite; }
  @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -150% 0; } }
  .sparkles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

  /* Story teaser */
  .story-intro { text-align: center; }
  .story-intro blockquote { margin: 14px 0 0; font-family: var(--serif); font-size: clamp(34px, 5vw, 54px); line-height: 1.1; font-style: italic; }
  .story-intro .lede { margin-inline: auto; }
  /* Artwork runs the full width of the screen, edge to edge */
  /* Shown at its own size, never stretched, with edges that melt into the page */
  /* The storybook band dissolves on all four edges into the cream, with a little
     breathing space before the deep green section below it. */
  figure.bleed { margin: 26px auto 40px; width: 100%; max-width: 1180px; line-height: 0; }
  figure.bleed img { display: block; width: 100%; height: auto;
    filter: saturate(.88) contrast(1.04) brightness(.96);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect; }
  @media (max-width: 700px) { figure.bleed img { -webkit-mask-image: none; mask-image: none; } }
  /* Our Story opens with the whole banner on the left and the tale on green at the right */
  .story-top { display: grid; grid-template-columns: 1fr; background: var(--walnut); align-items: stretch; }
  @media (min-width: 900px) { .story-top { grid-template-columns: 1fr 1fr; } }
  /* The banner is shown whole — never cropped to fill the column */
  .story-art { margin: 0; line-height: 0; }
  .story-art { overflow: hidden; }
  .story-art img { display: block; width: 100%; height: auto; }
  /* The banner sits smaller inside its half, with the deep green showing all around it. */
  /* The banner runs the full width of its half, with the deep green above and below only. */
  .story-top .story-art { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(26px, 3.5vw, 48px);
    padding: 0 0 clamp(30px, 4.5vw, 72px); }
  .story-banner { margin: 0; }
  .story-founder { margin: 0; padding: 0 clamp(26px, 4vw, 64px); }
  .story-founder img { display: block; width: 100%; height: auto; border-radius: 16px; }
  .story-founder figcaption { margin-top: 10px; font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-bright); font-weight: 700; }
  .story-row.full { grid-template-columns: 1fr !important; }
  .story-top .story-art img { width: 100%; height: auto; object-fit: contain; border-radius: 0; }
  /* The fable panel reads light: cream behind, deep green type. The photograph beside it stays dark. */
  .story-tale { background: var(--surface); color: var(--ink); border: 3px solid var(--walnut);
    padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; justify-content: flex-start; }
  .story-tale .eyebrow { color: var(--gold-deep); }
  .story-tale .turn { color: var(--gold-deep); }
  .story-tale .tale .first::first-letter { color: var(--gold-deep); }
  .story-tale .tale { color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: clamp(16px, 1.45vw, 18px); line-height: 1.68; max-width: 50ch; }
  .story-tale .turn, .story-tale .tale .first::first-letter { font-family: var(--serif); }
  .story-tale .tale-note { color: var(--ink); font-family: var(--sans); font-size: inherit; line-height: inherit;
    margin-top: clamp(24px, 5vw, 96px); border-top: 1px solid var(--forest); }
  .story-tale .eyebrow, .story-tale .turn, .story-tale .tale .first::first-letter { color: var(--forest); font-weight: 700; }
  .story-tale .tale strong { font-weight: 600; }
  /* The turn from fairytale to real place, sitting just above the rule that divides them. */
  .tale-turn { font-family: var(--serif); font-style: italic;
    font-size: clamp(20px, 2.1vw, 28px); line-height: 1.3; }
  .story-tale .tale-turn { margin-top: clamp(24px, 5vw, 96px); }
  .story-tale .tale-turn { color: var(--forest); font-weight: 600; }
  .tale-note { font-family: var(--serif); font-size: 1em; line-height: 1.6; color: var(--cream-soft); margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(216,180,108,.3); }

  /* Two artworks as a matched pair, side by side on wider screens */
  .diptych { display: grid; grid-template-columns: 1fr; background: var(--walnut); }
  @media (min-width: 760px) { .diptych { grid-template-columns: 1fr 1fr; } }
  .diptych figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; line-height: 0; }
  @media (min-width: 760px) { .diptych figure { aspect-ratio: 5 / 4; } }
  .diptych img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  figure.art { margin: 0; border-radius: 18px; overflow: hidden; max-width: 100%; box-shadow: 0 0 0 1px rgba(160,122,54,.35), 0 30px 60px -32px rgba(22,32,27,.7); }
  figure.art img { display: block; width: 100%; height: auto; }
  .portrait { margin: 0; border-radius: 18px; overflow: hidden; max-width: 420px; width: 100%; justify-self: center; box-shadow: 0 0 0 1px rgba(216,180,108,.4), 0 30px 60px -30px rgba(0,0,0,.8); }
  .portrait img { display: block; width: 100%; height: auto; }
  .page-hero.split { display: block; min-height: 0; }
  .page-hero.split::before { display: none; }
  .split-inner { display: grid; gap: 30px; align-items: center; padding-block: 44px; }
  @media (min-width: 860px) { .split-inner { grid-template-columns: 1.1fr .9fr; } }
  /* The portrait sets the hero's height, so it is sized down rather than cropped -
     the whole photograph stays visible. */
  .page-hero.split .portrait { max-width: 250px; }
  .page-hero.split .portrait img { position: static; height: auto; object-fit: fill; animation: none; }
  .page-hero.split .split-inner { padding-block: 26px; }
  .page-hero img { animation: slowzoom 18s ease-out both; }
  @keyframes slowzoom { from { transform: scale(1.07); } to { transform: scale(1); } }

  /* Rooms */
  /* Each frame takes its photograph's own shape (--ar, set on the tile), so the picture fills it
     with nothing cropped and no dark bands. On a wide screen the tiles share one height and
     differ in width, like prints hung in a row. */
  .rooms { display: grid; gap: 16px; margin-top: 34px; }
  @media (min-width: 800px) { .rooms { display: flex; align-items: flex-start; } .room { flex: calc(var(--ar, 1)) 1 0px; min-width: 0; } }
  /* The whole photo, never cropped: it sits inside a frame on the dark ground */
  .room { display: block; color: var(--cream); text-decoration: none; }
  .room .ph { position: relative; display: grid; place-items: center; aspect-ratio: var(--ar, 1); border-radius: 16px; overflow: hidden; }
  /* Pinned to the frame. As a plain grid child with height:100% the picture kept its own height,
     overflowed the square, and only its top showed: a ceiling and an air conditioner. */
  .room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
  .room:hover img { transform: scale(1.02); }
  .room .cap { padding: 16px 4px 0; }
  .room h3 { font-size: var(--step-2); }
  .room p { color: var(--cream-soft); font-size: var(--step--1); margin-top: 6px; }
  .shimmer { position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; opacity: .5; pointer-events: none;
    background-image: radial-gradient(ellipse 70px 14px at 30% 40%, rgba(255,214,150,.55), transparent 70%), radial-gradient(ellipse 50px 10px at 70% 65%, rgba(255,214,150,.45), transparent 70%);
    background-size: 190px 120px, 150px 100px; animation: drift 11s linear infinite; }
  .shimmer.two { opacity: .35; background-size: 230px 150px, 170px 110px; animation-duration: 16s; animation-direction: reverse; }
  @keyframes drift { from { background-position: 0 0, 0 0; } to { background-position: 190px 60px, -150px 100px; } }

  /* The Rapunzel's Way */
  .way { display: grid; gap: 28px; margin-top: 36px; }
  @media (min-width: 800px) { .way { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
  .way h3 { font-size: 30px; color: var(--gold-bright); }
  .way p { color: var(--cream-soft); margin-top: 8px; }
  .way > div { border-top: 1px solid rgba(216,180,108,.35); padding-top: 18px; }

  /* Chapters */
  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
  @media (min-width: 620px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .tile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 7 / 3; max-width: 100%; border-radius: 14px; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: var(--walnut); text-align: left; font: inherit; color: var(--cream); text-decoration: none; }
  .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22,32,27,.92) 0%, rgba(22,32,27,.62) 34%, rgba(22,32,27,.05) 78%); }
  .tile:hover img { transform: scale(1.04); }
  .tile .label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 18px 16px; display: grid; align-content: end; }
  .tile .label b { font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.14; text-wrap: balance; }
  .tile .label small { margin-top: 3px; font-size: var(--step-0); color: var(--cream-soft); }
  .tile.no-photo { background: repeating-linear-gradient(135deg, #2c3a32 0 12px, #26332c 12px 24px); }
  .tile .photo-tbd { position: absolute; top: 10px; right: 10px; z-index: 1; }
  .tile .ph-tag { top: 11px; right: 11px; left: auto; bottom: auto; }
  .tile[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--gold); }
  .paths { display: grid; gap: 14px; margin-top: 34px; }
  @media (min-width: 800px) { .paths { grid-template-columns: repeat(3, 1fr); } }
  .path { display: grid; gap: 6px; padding: 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .3s; }
  .path:hover { border-color: var(--gold-deep); }
  .path .n { font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--leaf); font-weight: 700; }
  .path b { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; }
  .path span { color: var(--ink-soft); font-size: var(--step--1); }

  /* Kind words */
  .quotes { display: grid; gap: 18px; margin-top: 34px; }
  @media (min-width: 800px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
  .quotes figure { margin: 0; padding: 26px; background: var(--surface); border-radius: 16px; border: 1px solid var(--line); }
  .quotes blockquote { margin: 0; font-family: var(--serif); font-size: var(--step-2); line-height: 1.3; }
  .quotes figcaption { margin-top: 12px; font-size: var(--step--1); color: var(--ink-soft); }
  .award { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
  .award b { font-family: var(--serif); font-size: var(--step-2); letter-spacing: .02em; text-transform: none; color: var(--ink); font-weight: 600; }

  /* Steps */
  .steps { display: grid; gap: 22px; margin-top: 34px; counter-reset: s; }
  @media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } }
  .steps li { list-style: none; counter-increment: s; }
  .steps li::before { content: counter(s); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-deep); font-family: var(--serif); font-size: var(--step-1); margin-bottom: 12px; }
  .steps b { display: block; font-family: var(--serif); font-size: var(--step-2); font-weight: 600; }
  .steps p { color: var(--ink-soft); font-size: var(--step--1); margin-top: 4px; }
  ol.steps { padding: 0; margin-bottom: 0; }

  /* Gift + follow + keep posted */
  .split { display: grid; gap: 18px; }
  @media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }
  .panel-card { border-radius: 18px; padding: 30px; background: var(--surface); border: 1px solid var(--line); }
  .panel-card.dark { background: var(--walnut); color: var(--cream); border: 0; }
  .panel-card h3 { font-size: 32px; }
  .panel-card p { margin-top: 10px; color: var(--ink-soft); }
  .panel-card.dark p { color: var(--cream-soft); }
  .social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .social a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 11px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(216,180,108,.55); color: var(--cream); font-weight: 600; font-size: var(--step--1); }
  .social svg { width: 18px; height: 18px; }
  .keep { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .keep input { flex: 1 1 220px; padding: 13px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: inherit; color: var(--ink); }
  .keep-done { margin-top: 12px; font-size: var(--step--1); color: var(--leaf); font-weight: 600; }

  /* A row of first looks you can scroll sideways */
  .shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 4px 8px; margin-top: 8px; scrollbar-width: thin; }
  .shelf .prod { scroll-snap-align: center; text-align: center; color: var(--cream); }
  .shelf .ph { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 14px; border: 1px dashed rgba(216,180,108,.55); background: rgba(216,180,108,.06); margin-bottom: 10px; }
  .shelf b { display: block; font-family: var(--serif); font-size: var(--step-1); font-weight: 500; }
  .shelf .prod > span:last-child { font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); }

  .soon { position: relative; overflow: hidden; }
  .soon .shimmer { opacity: .28; }

  /* Two photographs side by side */
  .pair { display: grid; gap: 16px; margin-top: 26px; }
  @media (min-width: 760px) { .pair { grid-template-columns: 1fr 1fr; } }
  /* Both photographs whole, never cropped — each centred in a matching frame */
  .pair figure { margin: 0; border-radius: 16px; overflow: hidden; background: #14100c; line-height: 0;
    aspect-ratio: 4 / 3; }
  .pair img { display: block; width: 100%; height: 100%; object-fit: contain; }
  /* A photo inside a card, shown in full at its own shape, with the words beside it. It used to
     sit centred in a wide dark frame, which left a black band down each side. */
  .fv figure.inset { float: left; width: min(46%, 300px); margin: 6px 24px 12px 0; border-radius: 12px; overflow: hidden; line-height: 0; }
  .fv figure.inset img { display: block; width: 100%; height: auto; }
  .fv section::after { content: ""; display: block; clear: both; }
  @media (max-width: 520px) { .fv figure.inset { float: none; width: 100%; margin: 0 0 16px; } }

  /* A wide desert photograph with one line across it */
  .band { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--walnut);
    height: clamp(280px, 42vw, 520px); }
  .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,20,17,.7), rgba(14,20,17,.25)); }
  .band-text { position: relative; z-index: 2; text-align: center; padding: 0 20px; }
  .band-text p { font-family: var(--serif); font-size: clamp(26px, 4vw, 46px); line-height: 1.25; color: var(--cream); text-shadow: 0 2px 24px rgba(0,0,0,.6); }
  .band-text span { color: var(--gold-bright); font-style: italic; }

  /* Inner page hero */
  .page-hero { position: relative; min-height: 340px; display: flex; align-items: flex-end; background: var(--walnut); color: var(--cream); overflow: hidden; }
  .page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(22,32,27,.9) 0%, rgba(22,32,27,.3) 65%, rgba(22,32,27,.15) 100%); }
  .page-hero .wrap { position: relative; z-index: 3; padding-block: 64px 36px; width: 100%; }
  .page-hero h1 { font-size: clamp(40px, 6.5vw, 66px); }
  .page-hero p { color: var(--cream-soft); font-size: var(--step-0); margin-top: 10px; max-width: 52ch; }

  .page-head { text-align: center; padding-block: 56px 4px; }
  .page-head h1 { font-size: clamp(40px, 6vw, 64px); }
  .page-head h1::after { content: ""; display: block; width: 54px; height: 2px; margin: 16px auto 0; background: var(--gold); opacity: .7; }
  .page-head p { color: var(--ink-soft); font-family: var(--serif); font-style: italic; font-size: var(--step-1); line-height: 1.45; max-width: 54ch; margin: 18px auto 0; }

  /* Treatments menu */
  .menu-group { text-align: center; padding-top: 64px; scroll-margin-top: calc(var(--stick) + 16px); }
  .menu-group h2, .menu-group .cat-title { font-family: var(--serif); font-weight: 600; font-size: var(--step-3); }
  /* Treatments read like a printed spa menu: name ..... price, two columns on wide screens */
  .menu-group h2::after, .menu-group .cat-title::after { content: ""; display: block; width: 54px; height: 2px; margin: 12px auto 0; background: var(--gold); opacity: .7; }
  .menu-list { margin: 20px auto 0; max-width: 720px; text-align: left; }
  @media (min-width: 940px) { .menu-list { max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; align-items: start; } .menu-list .menu-empty { grid-column: 1 / -1; } }
  .menu-intro { max-width: 720px; margin: 10px auto 0; color: var(--ink-soft); font-size: var(--step-0); font-style: italic; font-family: var(--serif); }
  /* One calm column. The whole treatment is clickable; a gold + appears at the right. */
  .item { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(160,122,54,.22); border-radius: 12px; padding: 19px 50px 19px 16px; font: inherit; color: inherit; cursor: pointer; transition: background .35s; }
  .item:hover, .item:focus-visible { background: var(--surface); }
  .item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .item .name { display: block; font-family: var(--serif); font-size: var(--step-2); font-weight: 600; line-height: 1.14; color: var(--ink); }
  .item .meta { display: block; margin-top: 6px; font: 700 var(--step-0) var(--sans); letter-spacing: .01em; text-transform: none; color: var(--gold-deep); }
  .item .time { font-size: var(--step-1); }
  .item .price { color: var(--gold-deep); font-size: var(--step--1); font-weight: 700; opacity: 1; }
  .item .time:not(:empty) + .price::before { content: "·"; margin: 0 10px; color: var(--line-strong); }
  .item .sub { display: block; margin-top: 5px; font-family: var(--serif); font-style: italic; font-size: var(--step-0); letter-spacing: 0; text-transform: none; color: var(--ink-soft); font-weight: 400; }
  .item .desc { display: block; color: var(--ink-soft); font-size: var(--step-0); line-height: 1.65; margin-top: 9px; max-width: 58ch; }
  /* A safety note the guest needs before booking, not a selling line */
  .item .care { display: block; margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--gold); color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; max-width: 58ch; }
  .item .confirm { display: block; margin-top: 10px; }
  /* One treatment, more than one length: the row is not itself a button */
  .item.has-variants { cursor: default; padding-right: 18px; }
  .item.has-variants:hover { background: none; }
  .variant-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .variant-row > button { font: inherit; font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
    color: var(--ink-soft); background: none; border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 10px 18px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
  .variant-row > button:hover { background: var(--walnut); color: var(--cream); border-color: var(--walnut); }
  .variant-row > button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .vsep { color: var(--line-strong); margin: 0 2px; }
  .variant-row .vprice { color: var(--ink-soft); margin-left: 7px; font-size: var(--step--3); opacity: .85; }
  .variant-row > button:hover .vprice { color: var(--gold-bright); }
  .learn { margin-top: 14px; font-size: var(--step--1); font-weight: 700; }
  .learn a { color: var(--gold-deep); text-decoration: none; }
  .learn a:hover { text-decoration: underline; }
  .group-quote { margin: 34px auto 0; max-width: 620px; text-align: center; }
  .group-quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.35; font-style: italic; color: var(--ink); }
  .group-quote figcaption { margin-top: 12px; font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
  .redeeming[hidden] { display: none; }
  .redeeming { display: inline-block; margin-top: 12px; padding: 7px 15px; border-radius: 999px; background: var(--surface-on); color: var(--ink); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
  /* One treatment in a category: the card takes the whole row instead of half of it. */
  .hs-cards.one { grid-template-columns: minmax(0, 1fr); }
  /* Picture left, name and intro right. The research on picture/text order points this way,
     and the cards below keep the same order, so nothing alternates down the page. */
  .cat-head { display: grid; gap: 24px; align-items: center; margin-top: 4px; }
  .cat-banner { margin: 0; }
  .cat-banner img { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 455; object-fit: cover; object-position: center 60.3%; border-radius: 12px; }
  .cat-head-words { text-align: left; }
  .cat-head-words h2::after, .cat-head-words .cat-title::after { margin-left: 0; margin-right: 0; }
  .cat-head-words .menu-intro { max-width: none; margin-left: 0; margin-right: 0; }
  @media (min-width: 900px) {
    .cat-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; }
  }
  .cat-banner + .back { margin-top: 22px; }
  .cat-note { max-width: 640px; margin: 26px auto 0; text-align: center; }
  /* Notes in a column to the right of the cards. Left aligned there, because centred
     text in a narrow column is hard to read. */
  .menu-notes { align-content: start; }
  .menu-notes .cat-note { max-width: none; margin: 0 0 22px; text-align: left; }
  .menu-notes .cat-note:last-child { margin-bottom: 0; }
  @media (min-width: 900px) {
    .menu-split.notes-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; }
    .menu-notes { margin-top: 26px; }
  }
  @media (max-width: 899px) { .menu-notes { margin-top: 30px; } }
  .cat-note h3 { font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; font-family: var(--sans); }
  .cat-note p { margin-top: 10px; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.65; }
  .menu-empty { text-align: center; color: var(--ink-soft); font-style: italic; padding: 30px 0; }
  .item .monthly { display: block; font-size: var(--step--2); color: var(--ink-soft); font-style: italic; margin-top: 6px; }
  .item .plus { position: absolute; right: 16px; top: 34px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--gold-deep); display: grid; place-items: center; font-size: var(--step-1); line-height: 1; opacity: .45; transition: opacity .3s, background .3s; }
  .item:hover .plus, .item:focus-visible .plus { opacity: 1; background: var(--surface-on); }
  .item .add:hover { text-decoration: underline; }
  .jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .jump a { font-size: var(--step--1); color: var(--ink); text-decoration: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; background: var(--surface); }

  /* Signature */
  .sig { display: grid; gap: 18px; margin-top: 30px; }
  @media (min-width: 860px) { .sig { grid-template-columns: 1fr 1fr; } }
  .sig article { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: grid; gap: 10px; align-content: start; }
  .sig article.feature { background: var(--walnut); color: var(--cream); border: 0; }
  .sig .feature p { color: var(--cream-soft); }
  .sig h3 { font-size: 34px; }
  .sig .sub { font-style: italic; font-family: var(--serif); font-size: var(--step-1); color: var(--gold-deep); }
  .sig .feature .sub { color: var(--gold-bright); }
  .sig ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-soft); }
  .sig .feature ul { color: var(--cream-soft); }
  .sig .pt { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 12px; align-items: baseline; margin-top: 6px; }
  .sig .pt b { font-size: var(--step-0); color: var(--gold-deep); font-weight: 700; }
  .sig .feature .pt b { color: var(--gold-bright); }
  .sig .pt span { color: var(--ink); font-size: var(--step-0); font-weight: 600; }
  .sig .feature .pt span { color: var(--cream); }

  /* Monsoon */
  .rain-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; background: rgba(244,234,215,.1); color: var(--cream); border: 1px solid rgba(216,180,108,.6); border-radius: 999px; padding: 10px 18px; font: 600 var(--step--1) var(--sans); cursor: pointer; }
  .rain-btn[aria-pressed="true"] { background: var(--gold-bright); color: var(--walnut); }
  .flow { display: grid; gap: 14px; margin-top: 26px; padding: 0; }
  .flow li { list-style: none; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
  .flow li::before { content: ""; width: 10px; height: 10px; margin: 10px 0 0 8px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px 2px rgba(216,180,108,.6); }

  /* First visit */
  .fv { display: grid; gap: 18px; margin-top: 30px; align-items: start; }
  @media (min-width: 860px) { .fv { grid-template-columns: 1fr 1fr; } }
  .fv section { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
  .fv h3 { font-size: 28px; margin-bottom: 8px; }
  .fv p + p { margin-top: 8px; }
  .fv ul { margin: 8px 0 0; padding-left: 18px; }
  .fv li { margin-bottom: 4px; }

  /* Story */
  .tale { font-family: var(--serif); font-size: clamp(17px, 1.65vw, 20px); line-height: 1.6; }
  .tale p + p { margin-top: 14px; }
  .tale .first::first-letter { float: left; font-size: 2.7em; line-height: .88; padding: 3px 8px 0 0; color: var(--gold-bright); }
  .real { display: grid; gap: 34px; align-items: start; }
  @media (min-width: 760px) { .real { grid-template-columns: .85fr 1.15fr; } .real.flip { grid-template-columns: 1.15fr .85fr; } }
  .real figure { margin: 0; max-width: 100%; }
  .real figure img { display: block; width: 100%; height: auto; border-radius: 18px; }
  .real figcaption { margin-top: 10px; font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
  .real p strong { color: var(--ink); }
  /* Our Story: the words always on the left, the picture always on the right.
     One left edge the whole way down, so nothing zigzags. */
  .story-row { display: grid; gap: 34px; align-items: start; margin-top: 46px; }
  .story-row:first-of-type { margin-top: 30px; }
  @media (min-width: 820px) {
    .story-row { grid-template-columns: .75fr 1.25fr; }
    .story-row .story-pic { grid-column: 1; grid-row: 1; }
    .story-row .story-words { grid-column: 2; grid-row: 1; }
  }
  .story-words { font-size: var(--step-0); line-height: 1.75; color: var(--ink-soft); }
  .story-words h2, .story-words h1 { margin: 10px 0 0; }
  .story-words .story-h { margin: 0 0 12px; }
  .story-words p + p { margin-top: 16px; }
  .story-words .lede { margin-top: 18px; color: var(--ink); }
  .story-pic { margin: 0; position: sticky; top: 92px; }
  .story-pic img { display: block; width: 100%; height: auto; border-radius: 16px; }
  .story-pic figcaption { margin-top: 10px; font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
  .story-close { margin-top: 48px; }
  .story-close .story-pic { max-width: 290px; margin-right: auto; }
  .story-close .closing { font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; color: var(--ink); max-width: 60ch; }
  /* Our Story reads straight down one column: one left edge, nothing alternating. */
  .story-col { margin-top: 30px; font-size: var(--step-0); line-height: 1.75; color: var(--ink-soft); }
  .story-col h2 { margin: 10px 0 0; }
  .story-col p + p { margin-top: 16px; }
  .story-col .lede { margin-top: 18px; color: var(--ink); }
  .story-col .story-h { margin-top: 44px; }
  .story-figure { margin: 26px 0 0; }
  .story-figure img { display: block; width: 100%; height: auto; border-radius: 16px; }
  .story-figure figcaption { margin-top: 10px; font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
  .story-col .closing { margin-top: 34px; font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
  .story-col .award, .story-col .actions { justify-content: flex-start; }
  .story-h { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; line-height: 1.2; color: var(--ink); margin: 0 0 12px; }
  .real + .real { margin-top: 46px; }
  .story-rest { margin-top: 34px; font-size: var(--step-0); line-height: 1.75; color: var(--ink-soft); }
  .story-rest p + p { margin-top: 16px; }
  .story-rest .closing { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.6vw, 27px); line-height: 1.35; color: var(--ink); margin-top: 26px; text-align: center; }
  .real p + p { margin-top: 14px; }

  /* Gifts */
  .cards3 { display: grid; gap: 14px; margin-top: 28px; }
  @media (min-width: 760px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
  .gift { display: grid; gap: 16px; justify-items: center; }
  .gift figure { margin: 0; line-height: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(30,41,35,.20); width: 100%; aspect-ratio: 3 / 2; background: var(--walnut); }
  .gift img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .gift .btn { justify-self: center; }
  .gift-strip { margin: 10px 0 0; line-height: 0; width: 100%; aspect-ratio: 2000 / 500; overflow: hidden; background: var(--walnut); }
  .gift-strip img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

  /* BUILDER */
  .layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 10px 150px; }
  @media (min-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr) 340px; padding-block: 10px 80px; } }
  .step { scroll-margin-top: calc(var(--stick) + 16px); margin-top: 36px; }
  .step h2 { font-size: clamp(30px, 4.4vw, 38px); margin: 0 0 4px; }
  .step h2::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 8px; background: var(--leaf); border-radius: 2px; opacity: .7; }
  .step .sub { color: var(--ink-soft); margin: 0 0 18px; }
  .panel { scroll-margin-top: calc(var(--stick) + 16px); margin-top: 26px; }
  .panel-head h3 { font-size: 30px; margin: 0 0 12px; }
  .panel-note { color: var(--ink-soft); font-size: var(--step--1); margin: 10px 0 0; }
  .start-hint { color: var(--ink-soft); font-size: var(--step--1); margin: 16px 0 0; }
  .cards { display: grid; gap: 10px; }
  .card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .3s, background .3s, box-shadow .3s; }
  .card:hover { border-color: var(--line-strong); }
  .card input { position: absolute; opacity: 0; pointer-events: none; }
  .card:has(input:checked) { border-color: var(--gold-deep); background: var(--surface-on); box-shadow: inset 0 0 0 1px var(--gold); }
  .card:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
  .t-name { font-family: var(--serif); font-size: var(--step-2); line-height: 1.2; font-weight: 500; }
  .t-meta { text-align: right; white-space: nowrap; }
  .t-price { font-size: var(--step--3); font-weight: 600; color: var(--ink-soft); opacity: .8; margin-top: 2px; }
  .t-time { font-size: var(--step-0); font-weight: 600; color: var(--ink); }
  .t-line { grid-column: 1 / -1; color: var(--ink-soft); font-size: var(--step--1); margin-top: 2px; max-width: 60ch; }
  .t-monthly { grid-column: 1 / -1; font-size: var(--step--2); color: var(--gold-deep); }
  /* One card, a choice of length */
  .card-variants { cursor: default; }
  .card-variants.is-chosen { border-color: var(--gold-deep); background: var(--surface-on); box-shadow: inset 0 0 0 1px var(--gold); }
  .card-variants.is-chosen .chosen-mark { display: block; }
  .len-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .len-row button { font: inherit; font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
    color: var(--ink-soft); background: var(--ground); border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 8px 15px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
  .len-row button:hover { border-color: var(--gold-deep); }
  .len-row button.on { background: var(--walnut); color: var(--cream); border-color: var(--walnut); }
  .len-row button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .len-row .lprice { color: var(--ink-soft); margin-left: 6px; font-size: var(--step--3); opacity: .85; }
  .len-row button.on .lprice { color: var(--gold-bright); }
  .chosen-mark { display: none; grid-column: 1 / -1; font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); margin-top: 4px; font-weight: 700; }
  .card:has(input:checked) .chosen-mark { display: block; }
  .locked { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 20px; color: var(--ink-soft); text-align: center; margin: 0; }
  .enh-group h3 { font-size: var(--step-2); margin: 20px 0 10px; }
  .enh-list { position: relative; padding-left: 30px; }
  .thread-bg, .thread { position: absolute; left: 10px; top: 0; width: 2px; border-radius: 2px; }
  .thread-bg { bottom: 0; background: rgba(160,122,54,.18); }
  .thread { height: 0; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 10px rgba(216,180,108,.9); transition: height .8s cubic-bezier(.2,.7,.2,1); }
  .enh { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 9px; background: var(--surface); cursor: pointer; transition: border-color .3s, background .3s; }
  .enh:hover { border-color: var(--line-strong); }
  .enh input { position: absolute; opacity: 0; pointer-events: none; }
  /* Simple line items - a name and a price - need no photograph. */
  .hs-card.no-thumb { grid-template-columns: 1fr; }
  /* The line that turns the old story toward this one. */
  .turn { font-family: var(--serif); font-size: var(--step-3); line-height: 1.2; color: var(--gold-bright); margin: 18px 0 6px; }
  /* The optional things we ask for, each with the reason attached. */
  .give { margin-top: 16px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
  .give + .give { margin-top: 11px; }
  .give-ask { margin: 0; }
  .give-ask label { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; color: var(--ink); }
  .give-why { margin: 5px 0 11px; font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); max-width: 54ch; }
  .give-note { margin: 8px 0 0; font-size: var(--step--2); color: var(--ink-soft); font-style: italic; }
  .bday { display: flex; flex-wrap: wrap; gap: 10px; }
  .bday select, .bday input { font: inherit; font-size: var(--step-0); padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); color: var(--ink); min-width: 140px; }
  .bday input { min-width: 0; width: 110px; }
  .bday select:focus-visible, .bday input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  /* A plain group reads as a list: one item per row. */
  .hs-cards.plain-rows { grid-template-columns: 1fr !important; gap: 10px;
    max-width: 660px; margin-inline: auto; }
  .hs-card.no-thumb .body { flex-direction: row; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px 20px; padding: 15px 20px; }
  .hs-card.no-thumb .body h3 { flex: 1 1 auto; }
  .hs-card.no-thumb .body .mt { margin-top: 0; order: 3; }
  .hs-card.no-thumb .body .role,
  .hs-card.no-thumb .body > p:not(.mt) { flex: 1 0 100%; margin-top: 2px; order: 5; }
  .hs-card.no-thumb .body > .btn.gold { margin-top: 0; order: 4; }
  /* This one is shot very dark; lifted so it reads at thumbnail size. */
  .thumb img[src$="leg-massage.webp"] { filter: brightness(1.42) contrast(.96) saturate(1.04); }
  /* The twelfth tile: no photograph, the desert behind it instead. */
  /* Full width, so the tile grid never ends on a lone square beside empty cells.
     aspect-ratio has to go with it or a full-width 7:3 tile becomes enormous. */
  .tile-help { grid-column: 1 / -1; aspect-ratio: auto; min-height: clamp(132px, 13vw, 170px);
    background-image: linear-gradient(rgba(30,41,35,.62), rgba(30,41,35,.62)), url(/img/card-frame.webp);
    background-size: cover; background-position: center; align-items: center; justify-content: center;
    text-align: center; padding: 20px 22px; }
  .tile-help .label { position: static; padding: 0; background: none; text-align: center; }
  .tile-help b { font-family: var(--serif); font-size: var(--step-2); line-height: 1.18; color: var(--cream); display: block; }
  .tile-help small { display: block; margin-top: 8px; font: 400 var(--step--1)/1.5 var(--sans);
    letter-spacing: 0; text-transform: none; color: var(--cream-soft); max-width: 30ch; margin-inline: auto; }
  .tile-help:hover b, .tile-help:focus-visible b { color: var(--gold-bright); }
  /* Arriving with a treatment already picked: the chooser folds away. */
  #step1.folded { display: none; }
  .chosen-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 22px 0 4px;
    padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    font: 700 var(--step--2) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
  .chosen-bar .chosen-name { font-family: var(--serif); font-size: var(--step-1); font-weight: 600;
    letter-spacing: 0; text-transform: none; color: var(--ink); }
  .chosen-bar .chosen-change { margin-left: auto; background: none; border: 0; cursor: pointer;
    font: 700 var(--step--2) var(--sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
  .chosen-bar .chosen-change:hover { color: var(--ink); }
  .e-thumb { flex: 0 0 auto; width: 58px; height: 58px; object-fit: cover; border-radius: 9px; margin-right: 2px; }
  .enh::before { content: ""; position: absolute; left: -25px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--ground); border: 1px solid var(--line-strong); transition: background .5s, box-shadow .5s; }
  .enh:has(input:checked) { border-color: var(--gold-deep); background: var(--surface-on); }
  .enh:has(input:checked)::before { background: var(--gold-bright); border-color: var(--gold-deep); box-shadow: 0 0 12px 3px rgba(216,180,108,.8); }
  .enh:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
  .e-name { font-size: var(--step-0); font-weight: 600; }
  .e-note { display: block; font-size: var(--step--2); color: var(--ink-soft); font-weight: 400; }
  .e-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
  .e-price { color: var(--ink-soft); font-size: var(--step--2); font-weight: 600; opacity: .8; }
  .tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; flex: none; transition: background .3s; }
  .tick svg { width: 13px; height: 13px; opacity: 0; transition: opacity .3s; }
  .enh:has(input:checked) .tick { background: var(--gold); }
  .enh:has(input:checked) .tick svg { opacity: 1; }
  .visit { background: var(--walnut); color: var(--cream); border-radius: 18px; padding: 22px; box-shadow: 0 24px 50px -28px rgba(22,32,27,.8); }
  .visit h3 { margin: 0; font-size: 29px; }
  .visit-thread { height: 2px; border-radius: 2px; margin: 10px 0 14px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); box-shadow: 0 0 10px rgba(216,180,108,.8); transition: width .8s cubic-bezier(.2,.7,.2,1); }
  .visit .empty { color: var(--cream-soft); margin: 0; }
  .visit ul { list-style: none; margin: 0; padding: 0; }
  .visit li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(216,180,108,.16); font-size: var(--step--1); }
  .visit li.main { font-family: var(--serif); font-size: var(--step-1); }
  .visit .p { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .totals { margin-top: 12px; display: grid; gap: 4px; }
  .totals .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .totals .sum { font-family: var(--serif); font-size: 34px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
  .totals .small { font-size: var(--step--1); color: var(--cream-soft); }
  .visit .btn { width: 100%; margin-top: 16px; }
  .aside { display: none; }
  @media (min-width: 980px) { .aside { display: block; } .aside .visit { position: sticky; top: calc(var(--stick) + 16px); } .inline-visit { display: none; } }
  .bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--walnut); color: var(--cream); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; gap: 14px; box-shadow: 0 -10px 30px rgba(22,32,27,.35); }
  body[data-route="create"] .bar { display: flex; }
  @media (min-width: 980px) { body[data-route="create"] .bar { display: none; } }
  .b-thread { position: absolute; left: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); box-shadow: 0 0 8px rgba(216,180,108,.9); transition: width .8s cubic-bezier(.2,.7,.2,1); }
  .b-text { flex: 1; min-width: 0; font-size: var(--step--1); line-height: 1.3; }
  .b-text b { display: block; font-family: var(--serif); font-size: var(--step-1); font-weight: 600; color: var(--gold-bright); }
  .b-text span { color: var(--cream-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .bar .btn { padding: 12px 20px; }
  form.details { display: grid; gap: 16px; max-width: 640px; }
  .field label, .legend { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; }
  .field input, .field textarea { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; }
  .field input:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
  .two { display: grid; gap: 16px; }
  @media (min-width: 620px) { .two { grid-template-columns: 1fr 1fr; } }
  .hint { font-size: var(--step--2); color: var(--ink-soft); font-weight: 400; }
  .pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .pill { position: relative; }
  .pill input { position: absolute; opacity: 0; }
  .pill span { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: var(--step--1); }
  .pill input:checked + span { background: var(--surface-on); border-color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold); }
  .pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
  .check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--step--1); cursor: pointer; }
  .check input { width: 20px; height: 20px; accent-color: var(--gold-deep); margin-top: 3px; flex: none; }
  .error { color: #9b3b1f; font-size: var(--step--1); min-height: 1em; font-weight: 600; }
  .done { background: var(--walnut); color: var(--cream); border-radius: 18px; padding: 28px 24px; max-width: 640px; }
  .done h3 { font-size: 34px; margin: 0 0 8px; color: var(--gold-bright); }
  .done p { margin: 0 0 12px; }
  .done ul { margin: 0 0 6px; padding-left: 20px; }
  .done .preview-note { font-size: var(--step--2); color: var(--cream-soft); border-top: 1px solid rgba(216,180,108,.2); padding-top: 12px; margin-top: 14px; }

  /* Every page ends at the Tucson sunset: the painting from her current home page */
  .finale { position: relative; background: var(--walnut); margin-top: 48px; }
  .finale-art { position: relative; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; }
  .finale-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .finale-fade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--ground) 0%, rgba(242,236,224,0) 13%), linear-gradient(0deg, rgba(22,32,27,.9) 0%, rgba(22,32,27,0) 32%); }
  .lantern { position: absolute; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(255,196,110,.6), rgba(255,196,110,0) 65%); animation: flicker 3.2s ease-in-out infinite; }
  .finale-text { color: var(--cream); padding: 22px 20px 6px; }
  .finale-line { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; text-shadow: 0 2px 22px rgba(0,0,0,.65); }
  .finale-text .actions { margin-top: 16px; }
  @media (min-width: 760px) { .finale-text { position: absolute; left: 0; bottom: 6%; padding: 0 44px; max-width: 620px; } }
  footer { background: var(--walnut); color: var(--cream-soft); font-size: var(--step--1); padding-block: 26px 40px; }
  body[data-route="create"] footer { padding-bottom: 110px; }
  footer .cols { display: grid; gap: 18px; }
  @media (min-width: 800px) { footer .cols { grid-template-columns: 1.2fr 1fr 1fr; } }
  footer b { color: var(--cream); font-family: var(--serif); font-size: var(--step-1); font-weight: 500; letter-spacing: .12em; }
  footer a { color: var(--gold-bright); text-decoration: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
  /* ---- Head Spa & Monsoon Collection: banded, horizontal layout ---- */
  .hs-hero { display: grid; grid-template-columns: 1fr; background: var(--surface); }
  @media (min-width: 760px) { .hs-hero { grid-template-columns: 1.05fr 1fr; align-items: stretch; } }
  .hs-hero-text { padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; justify-content: center; }
  .hs-hero-text .eyebrow { color: var(--gold-deep); }
  .hs-hero-text h1 { font-family: var(--serif); font-weight: 600; font-size: var(--step-4); line-height: 1.06; letter-spacing: -.01em; color: var(--ink); margin: 0; }
  .hs-hero-text .sub { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: var(--step-1); line-height: 1.35; color: var(--ink-soft); max-width: 40ch; }
  /* The whole photograph, at its own shape, set in from the edges with room above it. It used
     to fill the column edge to edge, pressed against the header and cropped to fit. */
  .hs-hero figure { margin: 0; line-height: 0; align-self: center; justify-self: center; width: 100%; max-width: 520px;
    padding: 0 clamp(20px, 2.4vw, 34px) clamp(24px, 3vw, 40px); box-sizing: border-box; }
  @media (min-width: 760px) { .hs-hero figure { padding: clamp(36px, 4vw, 60px) clamp(24px, 3vw, 44px) clamp(36px, 4vw, 60px) 0; max-width: 540px; } }
  .hs-hero img { display: block; width: 100%; height: auto; border-radius: 16px; }
  .hs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

  .hs-hero-text .hs-claim { font-family: var(--serif); font-weight: 600; font-size: var(--step-2); line-height: 1.22; color: var(--gold-deep); margin: 0 0 14px; max-width: 26ch; }
  .hs-hero-text .hs-intro { margin-top: 16px; font-size: var(--step-0); line-height: 1.65; color: var(--ink-soft); max-width: 60ch; }
  .hs-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .hs-jump a { color: var(--ink); text-decoration: none; font: 700 var(--step--1) var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); }
  .hs-jump a:hover { background: rgba(160,122,54,.1); }

  .hs-band { padding: clamp(22px, 2.4vw, 36px) 0; }
  .hs-band > .wrap { max-width: 1460px; }
  .hs-band.tint { background: var(--surface); }
  .hs-band.tint-2 { background: var(--surface-on); }
  .hs-band h2 { font-family: var(--serif); font-weight: 600; font-size: var(--step-3); line-height: 1.1; color: var(--ink); margin: 0; }
  .hs-band .band-lede { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: var(--step-1); line-height: 1.4; color: var(--ink-soft); max-width: 56ch; }

  /* one wide feature: picture beside the detail */
  .hs-feature { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
  @media (min-width: 760px) { .hs-feature { grid-template-columns: .85fr 1.15fr; gap: 30px; } }
  .hs-feature figure { margin: 0; line-height: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 5 / 4; }
  .hs-feature img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hs-feature h3 { font-family: var(--serif); font-weight: 600; font-size: var(--step-3); line-height: 1.1; color: var(--ink); margin: 0; }
  .hs-feature .role { font-family: var(--serif); font-style: italic; font-size: var(--step-1); color: var(--gold-deep); letter-spacing: 0; text-transform: none; margin-top: 8px; }
  .hs-feature p { color: var(--ink-soft); margin-top: 13px; font-size: var(--step-0); line-height: 1.65; }

  /* compact rows: thumbnail, name and price, description, action */
  .hs-rows { display: grid; gap: 10px; margin-top: 18px; }
  .hs-row { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-align: left; font: inherit; color: var(--ink); width: 100%; cursor: pointer; }
  @media (min-width: 760px) { .hs-row { grid-template-columns: 116px 1fr auto; gap: 10px 20px; } .hs-row > .thumb { grid-column: 1; grid-row: 1; } .hs-row > span { grid-column: 2; grid-row: 1; } .hs-row > .go { grid-column: 3; grid-row: 1; align-self: center; } .hs-row > details.ds { grid-column: 1 / -1; grid-row: 2; } }
  .hs-row:hover { border-color: var(--line-strong); }
  .hs-row .thumb { margin: 0; line-height: 0; border-radius: 9px; overflow: hidden; aspect-ratio: 5 / 4; background: repeating-linear-gradient(135deg, #e6dcc8 0 10px, #ded3bd 10px 20px); display: grid; place-items: center; }
  .hs-row .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hs-row .thumb .ph { font: 700 var(--step--3) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); text-align: center; padding: 4px; }
  .hs-row .nm { font-family: var(--serif); font-weight: 600; font-size: var(--step-2); line-height: 1.14; color: var(--ink); }
  .hs-row .mt { display: block; margin-top: 6px; font: 700 var(--step-0) var(--sans); color: var(--gold-deep); letter-spacing: .01em; }
  .hs-row details.ds { grid-column: 1 / -1; color: var(--ink-soft); font-size: var(--step-0); line-height: 1.65; }
  .hs-row details.ds summary { cursor: pointer; display: inline-block; font: 700 var(--step--1) var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-deep); list-style: none; padding: 2px 0; }
  .hs-row details.ds summary::-webkit-details-marker { display: none; }
  .hs-row details.ds summary::after { content: " +"; }
  .hs-row details.ds[open] summary::after { content: " \2013"; }
  .hs-row details.ds summary:hover { text-decoration: underline; }
  .hs-row details.ds p { margin: 9px 0 2px; max-width: 78ch; }
  .hs-row .go { justify-self: start; }
  @media (min-width: 760px) { .hs-row .go { justify-self: end; } }

  /* side-by-side cards */
  .hs-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
  @media (min-width: 720px) { .hs-cards { grid-template-columns: 1fr 1fr; } }
  .hs-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 1fr; }
  .hs-card .thumb { position: relative; margin: 0; line-height: 0; min-height: 132px; background: repeating-linear-gradient(135deg, #e6dcc8 0 10px, #ded3bd 10px 20px); display: grid; place-items: center; }
  .hs-card .thumb { background-image: linear-gradient(rgba(251,248,241,.42), rgba(251,248,241,.42)), url(/img/card-frame.webp);
    background-size: cover; background-position: center; }
  .hs-card .thumb img { display: block; width: 100%; height: 240px; object-fit: contain; background: transparent; align-self: center; }
  .hs-card .thumb .ph { font: 700 var(--step--3) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); text-align: center; padding: 6px; }
  @media (min-width: 520px) { .hs-card { grid-template-columns: 178px 1fr; } }
  /* Beside the words, every photograph runs the full width of its column, edge to edge, at its
     own shape. A fixed 240px height left a tall photograph narrower than the column, with a
     strip of the painted ground showing down each side. */
  @media (min-width: 520px) { .hs-card .thumb img { height: auto; object-fit: fill; } }
  .hs-card .body { padding: 16px 20px 18px; }
  /* the card stretches to the tallest in its row; the action sits at the bottom left */
  .hs-card .body { display: flex; flex-direction: column; align-items: flex-start; }
  .hs-card .body > .btn.gold { margin-top: auto; align-self: flex-start; }
  .hs-card .body > .choose-label { margin-top: auto; }
  .variant { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
  .variant .vlabel { font: 700 var(--step--2) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
  .variant .vprice { color: var(--ink-soft); margin-left: 7px; font-size: var(--step--3); opacity: .85; }

  .hs-card h3 { font-family: var(--serif); font-weight: 600; font-size: var(--step-2); line-height: 1.14; color: var(--ink); margin: 0; }
  .hs-card .mt { font: 700 var(--step-0) var(--sans); color: var(--gold-deep); margin-top: 6px; letter-spacing: .01em; }
  .hs-card .mt .t { font-size: var(--step-1); }
  /* the price is 20% smaller than the time beside it, everywhere (Stephanie, 2026-10-08) */
  .hs-card .mt .amt { font-size: calc(var(--step-1) * .8); font-weight: 700; }
  .hs-card .mt .sep { font-size: var(--step--1); opacity: .5; margin: 0 8px; }
  .hs-card .role { font-family: var(--serif); font-style: italic; font-size: var(--step-0); letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-top: 7px; }
  .hs-card p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; margin-top: 8px; }
  .hs-card .btn { margin-top: 14px; }
  .menu-cards { max-width: 1460px; margin: 26px auto 0; text-align: left; }
  .ph-tag { position: absolute; left: 8px; bottom: 8px; z-index: 2; font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); background: rgba(30,41,35,.92); padding: 3px 9px; border-radius: 999px; }
  .treatments-wrap { max-width: 1460px; }
  .menu-cards .menu-empty { grid-column: 1 / -1; }
  .hs-card .monthly { font-style: italic; color: var(--ink-soft); font-size: var(--step--1); margin-top: 8px; }
  .hs-card .care { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--gold); color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; }
  .hs-card .confirm { margin-top: 10px; }
  .hs-card .variant-row { margin-top: 14px; }

  /* small notes, three or four across */
  .hs-notes { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  @media (min-width: 820px) { .hs-notes.three { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 700px) { .hs-notes { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .hs-notes.four { grid-template-columns: repeat(4, 1fr); } }
  .hs-note { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
  .hs-note h4 { font-family: var(--serif); font-weight: 600; font-size: var(--step-1); line-height: 1.18; color: var(--ink); margin: 0; }
  .hs-note .mt { font: 700 var(--step-0) var(--sans); color: var(--gold-deep); margin-top: 5px; }
  .hs-note .role { font-family: var(--serif); font-style: italic; font-size: var(--step-0); color: var(--ink-soft); margin-top: 5px; }
  .hs-note p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; margin-top: 8px; }

  .hs-foot { background: var(--walnut); color: var(--cream); padding: 30px 0; }
  .hs-foot .wrap { display: grid; gap: 14px; justify-items: center; text-align: center; }
  /* Where to Start - concern-first way in. Same type scale and colours as everywhere else. */
  /* "Not sure where to start?" - a way out for someone stuck looking at names.
     Top of the Treatments dropdown, and top right of the Treatments page. */
  .nav-panel a.start { margin-top: 2px; font-family: var(--sans); font-size: var(--step--2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright); }
  [data-page="treatments"] .page-head .wrap { position: relative; }
  .head-help { position: absolute; top: 2px; right: 0; font: 700 var(--step--1) var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
  .head-help:hover, .head-help:focus-visible { background: var(--surface-on); }
  @media (max-width: 760px) {
    [data-page="treatments"] .page-head .wrap { position: static; }
    .head-help { position: static; display: inline-block; margin-bottom: 16px; }
  }
  /* Tap-to-call, phones only. Someone reading in the car should not have to hunt for the number. */
  /* A treatment with two lengths shows a pill per length instead of one Select button.
     Without this label the card looks like its button is missing. */
  .choose-label { margin-top: 14px; font: 700 var(--step--1) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
  .choose-label + .variant-row { margin-top: 8px; }
  footer .legal { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(245,240,232,.18); }
  footer .legal p { margin: 0; font-size: var(--step--1); color: var(--cream-soft); opacity: .8; }
  /* Wider measure so this runs to two lines, not three - it lifts the doorway strip
     into view, which is what "Send the key" is pointing at. */
  .key-line { margin: 34px auto 0; text-align: center; font-family: var(--serif); font-weight: 600; font-size: var(--step-3); line-height: 1.15; color: var(--ink); }
  .key-line small { display: block; margin-bottom: 8px; font: 700 var(--step--1) var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
  .key-line + .gift-note { margin-top: 12px; }
  .gift-note { max-width: 88ch; margin: 18px auto 0; text-align: center; }
  .keycard { max-width: 640px; margin: 40px auto 0; scroll-margin-top: 120px; }
  .keycard > p { margin: 0 0 18px; }
  .field select { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; }
  @media (max-width: 760px) { .gift-note { max-width: 62ch; } }
  /* The doorway is 2000x745. Forced into 4:1 it becomes a 94px sliver on a phone,
     which is the opposite of the point. Give it a proper shape on small screens. */
  @media (max-width: 760px) {
    .gift-strip { aspect-ratio: 3 / 2; }
    .gift-strip img { object-position: center 60%; }
  }
  /* Two tiles per row on a phone leaves each about 163px wide. At 7:3 that is a 70px
     letterbox: the photograph does not read and long names collide with the badge. */
  @media (max-width: 619px) {
    .tile { aspect-ratio: 1 / 1; }
    /* ...but not the full-width help tile, which would become a huge square. */
    .tile-help { aspect-ratio: auto; }
    .tile .label { padding: 12px 13px 13px; }
    .tile .label b { font-size: var(--step-0); }
    .tile .ph-tag { left: auto; right: 8px; top: 8px; bottom: auto; }
    /* the one tile with a tagline: at this size the text buries the photograph */
    .tile .label small { display: none; }
  }
  /* The whole menu, by name. The page stays cream like the rest of the site;
     each category is a deep green card, so the boxes lift off the page and the
     names are lit rather than printed. */
  .names-dark { position: relative; padding: 6px 0 40px; }
  .names-dark > .wrap, .names-dark > .actions { position: relative; z-index: 2; }
  .names-dark > canvas.sparkles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
  .name-columns { columns: 2; column-gap: 18px; margin: 0; }
  .name-group { break-inside: avoid; display: block; margin: 0 0 18px; background: var(--forest); border: 0; border-radius: 16px; padding: 20px 22px 17px; box-shadow: 0 10px 28px rgba(30,41,35,.14); }
  .name-group h2 { margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(216,180,108,.45); font: 700 var(--step--2) var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright); }
  .name-group h2 a { color: inherit; text-decoration: none; }
  .name-group h2 a:hover, .name-group h2 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
  .name-item { display: block; padding: 7px 0; font-family: var(--serif); font-size: var(--step-1); line-height: 1.3; color: var(--cream); text-decoration: none; transition: color .2s ease, padding-left .2s ease; }
  .name-item:hover, .name-item:focus-visible { color: var(--gold-bright); padding-left: 9px; }
  @media (max-width: 760px) { .name-columns { columns: 1; } }
  /* The number, in the header, from 720px up. Below that the floating button covers it. */
  .head-tel { display: none; }
  @media (min-width: 720px) {
    .head-tel { display: inline-block; margin-right: 18px; font: 700 var(--step-0) var(--sans);
      letter-spacing: .02em; color: var(--gold-deep); text-decoration: none; white-space: nowrap; }
    .head-tel:hover, .head-tel:focus-visible { color: var(--ink); }
  }

  /* A gold band that asks people to call. Glitter behind, dark type on top. */
  .callband { position: relative; overflow: hidden; border-radius: 18px; margin-top: 40px;
    padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3vw, 44px); text-align: center;
    background-image: linear-gradient(rgba(255,245,222,.55), rgba(255,236,196,.62)), url(/img/gold-glitter.png);
    background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 1px rgba(138,100,32,.35); }
  .callband .cb-eyebrow { margin: 0; font: 700 var(--step--2) var(--sans); letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold-deep); }
  .callband .cb-num { display: inline-block; margin: 10px 0 0; font-family: var(--serif);
    font-size: var(--step-4); font-weight: 600; line-height: 1.05; letter-spacing: .01em;
    color: var(--walnut); text-decoration: none; }
  .callband .cb-num:hover, .callband .cb-num:focus-visible { color: var(--gold-deep); }
  .callband .cb-note { margin: 10px 0 0; font-size: var(--step--1); color: var(--ink); }
  .callfab { display: none; }
  @media (max-width: 760px) {
    .callfab { display: grid; place-items: center; position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 56px; height: 56px; border-radius: 50%; background: var(--gold-deep); box-shadow: 0 8px 22px rgba(30,41,35,.32); }
    .callfab svg { width: 26px; height: 26px; fill: #fff; }
    .callfab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
    footer { padding-bottom: 86px; }
  }
  .ws-open { padding: 34px 0 6px; }
  .ws-open h1 { font-family: var(--serif); font-weight: 600; font-size: var(--step-4); line-height: 1.06; color: var(--ink); margin: 0; }
  .ws-open .lede { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); max-width: 54ch; }
  .ws-first { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: start; margin: 0 0 8px; }
  .ws-first-img { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; }
  .ws-first-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ws-first-body p:not(.ask) { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.65; margin-top: 10px; max-width: 46ch; }
  .ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; margin-top: 20px; }
  .ws-card { background: #fff; border-radius: 14px; padding: 18px 19px 16px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; }
  .ws-first-body .ask { margin-top: 22px; }
  .ask { font-family: var(--serif); font-weight: 600; font-size: var(--step-2); line-height: 1.2; color: var(--ink); margin: 0; }
  .ws-opts { margin-top: auto; padding-top: 4px; }
  .ws-opt { position: relative; display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
    padding: 16px 48px 15px 18px; margin-top: 11px;
    transition: border-color .18s ease, background .18s ease, transform .18s ease; }
  a.ws-opt { text-decoration: none; color: inherit; }
  /* arriving at one treatment from Where to Start: stop clear of the fixed header and mark the card */
  .hs-card[id], article[id] { scroll-margin-top: 150px; }
  .hs-card:target, article.feature:target, .signature-list article:target { box-shadow: 0 0 0 2px var(--gold-deep), 0 10px 28px rgba(160,122,54,.18); }
  .ws-opt::after { content: "→"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    font-size: var(--step-2); line-height: 1; color: var(--gold-deep); transition: transform .18s ease; }
  .ws-opt:hover, .ws-opt:focus-visible { background: var(--surface-on); border-color: var(--gold-deep); }
  .ws-opt:hover::after, .ws-opt:focus-visible::after { transform: translateY(-50%) translateX(3px); }
  .ws-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .ws-opt:hover .nm, .ws-opt:focus-visible .nm { color: var(--gold-deep); }
  .ws-opt .nm { display: block; font-family: var(--serif); font-size: var(--step-1); font-weight: 600; line-height: 1.25; color: var(--ink); }
  .ws-opt .mt { display: block; margin-top: 5px; font: 700 var(--step-0) var(--sans); letter-spacing: .02em; color: var(--gold-deep); }
  .ws-opt .mt.tbd { font-weight: 400; font-style: italic; color: var(--ink-soft); }
  /* the price reads 20% smaller than the time beside it (Stephanie; 15% on 2026-10-07, 20% on 2026-10-08) */
  .ws-opt .mt .amt { font-size: .8em; }
  .ws-note { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; margin-top: 12px; }
  .ws-note.wide { max-width: 76ch; margin-top: 20px; }
  .ws-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; margin-top: 20px; }
  .ws-step { background: #fff; border-radius: 14px; padding: 18px 19px 16px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; }
  .ws-step > p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; margin-top: 8px; }
  .ws-tag { display: inline-block; font: 700 var(--step--1) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
  @media (max-width: 760px) {
    .ws-first { grid-template-columns: 1fr; }
    .ws-first-img { order: -1; }
  }
  .hs-foot p { font-family: var(--serif); font-weight: 600; font-size: var(--step-3); color: var(--cream); margin: 0; }
  .hs-fine { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.7; margin-top: 22px; max-width: 76ch; }

  /* A page that ends in plain content, not a full-width band, keeps clear of the footer. A dark
     button was sitting directly on the dark footer. */
  .page > .wrap:last-child { padding-bottom: 72px; }

  /* A category as a quiet menu: photograph left, names right, thin lines not boxes (2026-10-08) */
  .glow-menu { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 72px); align-items: start; padding: 14px 0 34px; }
  .glow-pic { margin: 0; position: sticky; top: 164px; border-radius: 16px; overflow: hidden; height: min(74vh, 760px); background: var(--walnut); }
  .glow-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .glow-words h2, .glow-words h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: var(--step-3); line-height: 1.04; letter-spacing: -.01em; color: var(--walnut); }
  .glow-words h2 small, .glow-words h1 small { display: block; margin-bottom: 10px; font: 700 var(--step--1) var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); }
  .glow-lede { margin: 8px 0 0; max-width: 60ch; font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); }
  .glow-help { margin: 6px 0 0; }
  .glow-help a { color: var(--gold-deep); font-weight: 700; font-size: var(--step--1); text-decoration: none; }
  .glow-help a:hover, .glow-help a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
  /* the Treatments page: the same layout, with the categories by name in two columns that
     read down the first and then the second */
  .glow-index { padding-top: 6px; }
  /* the whole picture, uncropped: a tall picture, so the frame is as tall as the screen allows
     and takes its width from the picture's own shape */
  .glow-index .glow-pic { aspect-ratio: 1122 / 1402; height: min(calc(100vh - 210px), 780px); width: auto; max-width: 100%; justify-self: center; position: sticky; top: 164px; }
  @media (min-width: 861px) { .glow-index { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: start; } }
  @media (max-width: 860px) { .glow-index .glow-pic { height: auto; width: 100%; position: static; } }
  .glow-index .glow-words { padding-top: clamp(8px, 3vh, 40px); }
  .glow-index .glow-words h1 { font-size: var(--step-4); }
  .glow-index .glow-lede { font-family: var(--serif); font-size: var(--step-1); color: var(--ink); margin-top: 10px; }
  .glow-cats { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 6), auto); grid-auto-flow: column;
    column-gap: clamp(24px, 3.4vw, 56px); margin-top: 22px; }
  .glow-cats a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 2px 12px;
    border-bottom: 1px solid rgba(160,122,54,.38); font-family: var(--serif); font-weight: 600; font-size: var(--step-1); line-height: 1.2;
    color: var(--ink); text-decoration: none; transition: color .2s ease; }
  .glow-cats a span { color: var(--gold-deep); font-family: var(--sans); font-size: 16px; line-height: 1; transition: transform .2s ease; }
  .glow-cats a:hover, .glow-cats a:focus-visible { color: var(--gold-deep); }
  .glow-cats a:hover span, .glow-cats a:focus-visible span { transform: translateX(5px); }
  .glow-cats a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .glow-index .glow-help { margin-top: 22px; }
  .glow-index .glow-help a { text-decoration: underline; text-underline-offset: 5px; }
  @media (max-width: 700px) { .glow-cats { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }
  @media (prefers-reduced-motion: reduce) { .glow-cats a, .glow-cats a span { transition: none; } .glow-cats a:hover span { transform: none; } }
  /* Treatments page: the two boxes under the list are slim bars, not blocks (Stephanie,
     2026-10-08): a small label, then the name and its line side by side */
  #catIndex .paths { margin-top: 16px; gap: 12px; }
  @media (min-width: 800px) { #catIndex .paths { grid-template-columns: 1fr 1fr; } }
  #catIndex .path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 14px; padding: 11px 18px 12px; border-radius: 12px; }
  #catIndex .path .n { flex-basis: 100%; font-size: var(--step--2); }
  #catIndex .path b { font-size: var(--step-1); line-height: 1.2; }
  #catIndex .path span:last-child { font-size: var(--step--1); line-height: 1.35; }
  /* ---- the proposal page at /treatments-idea/ (2026-10-08). Delete with src/pages/idea.html. ---- */
  .idea-flag { margin: 0 0 10px; font-size: var(--step--1); }
  .idea-flag a { margin-left: 12px; color: var(--gold-deep); font-weight: 700; text-decoration: none; }
  .idea .glow-words h1 { font-size: var(--step-4); }
  .idea-start { margin-top: 18px; padding: 20px 22px 22px; background: var(--surface); border: 1px solid rgba(160,122,54,.45); border-radius: 16px; }
  .idea-kicker { margin: 0; font-family: var(--serif); font-weight: 600; font-size: var(--step-2); line-height: 1.15; color: var(--ink); }
  .idea-line { margin: 8px 0 0; max-width: 56ch; color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; }
  .idea-lengths { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .idea-lengths .sep { opacity: .55; margin: 0 .35em; }
  .idea-lengths .amt { font-size: .8em; }
  .glow-words h2.idea-h { margin: 28px 0 0; font: 700 var(--step--2) var(--sans); line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
  .idea .glow-cats { margin-top: 10px; }
  .idea-asks a { font-size: var(--step-0); font-weight: 500; padding: 11px 2px 10px; }
  .idea .glow-help a { font-size: var(--step--1); }
  .idea-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  .idea-door { padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
  .idea-door b { display: block; margin-bottom: 6px; font-family: var(--serif); font-weight: 600; font-size: var(--step-1); line-height: 1.2; color: var(--ink); }
  .idea-door a { display: block; padding: 4px 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.35; text-decoration: none; }
  .idea-door a:hover, .idea-door a:focus-visible { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 560px) { .idea-doors { grid-template-columns: 1fr; } }
  .glow-list { margin-top: 12px; border-top: 1px solid rgba(160,122,54,.38); }
  a.glow-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 22px; align-items: baseline; padding: 9px 4px 8px; line-height: 1.25;
    border-bottom: 1px solid rgba(160,122,54,.38); text-decoration: none; color: var(--ink); }
  a.glow-row > b, a.glow-row > i, a.glow-row > .tm { grid-column: 1; }
  a.glow-row b { font-family: var(--serif); font-weight: 600; font-size: var(--step-1); line-height: 1.16; text-decoration: underline transparent 1.5px; text-underline-offset: 6px; transition: text-decoration-color .2s ease; }
  a.glow-row i { margin-top: 1px; font-style: normal; font-size: var(--step--1); color: var(--ink-soft); }
  /* time, a centred dot, then the price 20% smaller on the same baseline */
  a.glow-row .tm { margin-top: 2px; font-size: var(--step--1); font-weight: 700; color: var(--gold-deep); }
  a.glow-row .tm .sep { margin: 0 .5em; opacity: .55; }
  a.glow-row .tm .pr { font-size: .8em; }
  /* at the right, centred top to bottom in the row */
  a.glow-row .go { grid-column: 2; grid-row: 1 / span 3; align-self: center; white-space: nowrap;
    font: 700 var(--step--2) var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
  a.glow-row .go span { display: inline-block; margin-left: 4px; transition: transform .2s ease; }
  a.glow-row:hover b, a.glow-row:focus-visible b { text-decoration-color: var(--gold-deep); }
  a.glow-row:hover .go span, a.glow-row:focus-visible .go span { transform: translateX(5px); }
  a.glow-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  @media (max-width: 860px) {
    .glow-menu { grid-template-columns: 1fr; gap: 22px; }
    .glow-pic { position: static; height: auto; aspect-ratio: 16 / 10; }
  }
  /* on a phone there is no room beside the name, so Explore Treatment takes its own line,
     still directly above the time and price */
  @media (max-width: 560px) {
    a.glow-row { grid-template-columns: minmax(0, 1fr); }
    a.glow-row > b { grid-row: 1; } a.glow-row > i { grid-row: 2; }
    a.glow-row .go { grid-column: 1; grid-row: 3; align-self: start; margin-top: 7px; }
    a.glow-row .tm { grid-row: 4; margin-top: 5px; }
  }
  .glow-notes { margin-top: 22px; }
  .glow-notes .cat-note, .glow-notes .group-quote { max-width: none; margin: 0 0 18px; text-align: left; }
  .glow-note { margin: 0 0 18px; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.65; }
  @media (prefers-reduced-motion: reduce) { a.glow-row b, a.glow-row .go span { transition: none; } a.glow-row:hover .go span { transform: none; } }
  /* a treatment on a page of its own */
  .t-single .hs-card h1 { font-family: var(--serif); font-weight: 600; font-size: var(--step-3); line-height: 1.1; color: var(--ink); margin: 0; }
  .t-single .hs-cards.one { max-width: 980px; margin-inline: auto; }
  .t-single .cat-next-row, .t-single .cat-pn { max-width: 980px; margin-inline: auto; }
  .t-single .cat-next-row { margin-top: 0; }
  .t-single .paths.two { max-width: 980px; margin: 26px auto 0; }
  @media (min-width: 800px) { .t-single .paths.two { grid-template-columns: repeat(2, 1fr); } }
  .t-single .cat-next-row + .hs-cards { margin-top: 10px; }
  .t-single .t-all { color: var(--ink-soft); font-weight: 700; font-size: var(--step--1); letter-spacing: .02em; text-decoration: none; }
  .t-single .t-all:hover { color: var(--gold-deep); }
  @media (max-width: 700px) { .t-single .t-all { order: 3; width: 100%; text-align: center; } }
  /* Where to Start: the guided way in - one question at a time (2026-10-08) */
  .ws-guide { border-block: 1px solid var(--line); }
  .ws-guide[hidden], .hs-band[hidden] { display: none; }
  .ws-q { margin-top: 24px; }
  .ws-q[hidden] { display: none; }
  .ws-qn { display: block; margin: 0 0 12px; font-family: var(--serif); font-weight: 600; font-size: var(--step-2); line-height: 1.2; color: var(--ink); }
  .ws-who { display: flex; flex-wrap: wrap; gap: 10px; }
  .ws-who .btn[aria-pressed="true"] { background: var(--walnut); color: var(--cream); box-shadow: none; }
  #wsSelect { width: 100%; max-width: 620px; padding: 14px 16px; font: 500 var(--step-0) var(--sans); color: var(--ink); background: #fff;
    border: 1.5px solid var(--gold-deep); border-radius: 12px; cursor: pointer; }
  #wsSelect:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  #wsAnswer > * { margin-top: 18px; }
  #wsAnswer > .ws-card { max-width: 620px; }
  .ws-all { margin: 26px 0 0; }
  .ws-all button { background: none; border: 0; padding: 6px 0; font: 600 var(--step--1) var(--sans); color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  /* Treatments page: the "Not sure where to start?" button, top right above the tiles */
  .tiles-help-row { display: flex; justify-content: flex-end; margin: 0; }
  /* Treatments page: the heading, its line and the tiles all sit higher, so the pictures are on
     screen the moment the page opens (Stephanie, 2026-10-08) */
  [data-page="treatments"] .page-head { padding-block: 14px 0; }
  [data-page="treatments"] .page-head h1 { font-size: clamp(30px, 3.4vw, 42px); }
  [data-page="treatments"] .page-head h1::after { margin-top: 8px; }
  [data-page="treatments"] .page-head p { margin-top: 8px; max-width: none; font-size: var(--step-0); }
  /* Treatments page: small picture tiles on the left, the same list written out on the right */
  .tiles-split { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 12px; align-items: start; }
  .tiles-split .tiles { margin-top: 0; }
  @media (min-width: 980px) { .tiles-split { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: clamp(22px, 2.6vw, 40px); } }
  /* "Zoomed out" (Stephanie, 2026-10-08): the whole block is held to a narrower width and the
     pictures run four across, so each tile is small and all twelve read at a glance. */
  .tiles-split, .tiles-help-row { max-width: 1120px; margin-inline: auto; }
  @media (min-width: 980px) {
    #catIndex .tiles-split .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    /* a little taller than wide-and-flat, so three rows of pictures stand about as tall as the written list beside them */
    #catIndex .tiles-split .tile { border-radius: 10px; aspect-ratio: 6 / 5; }
    #catIndex .tiles-split .tile .label { padding: 9px 11px 9px; }
    #catIndex .tiles-split .tile .label b { font-size: 15px; line-height: 1.15; }
    #catIndex .tiles-split .tile .label small { font-size: 11.5px; margin-top: 1px; }
    #catIndex .tiles-names a { font-size: var(--step-0); padding: 6px 2px 5px; }
    #catIndex .tiles-names a.names-help { font-size: var(--step--1); padding: 10px 16px; }
  }
  .tiles-names { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px; }
  .tiles-names a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 2px 9px;
    font-family: var(--serif); font-weight: 600; font-size: var(--step-1); line-height: 1.2; color: var(--ink); text-decoration: none;
    border-bottom: 1px solid rgba(160,122,54,.3); }
  .tiles-names a:last-child { border-bottom: 0; }
  /* the last line of the list: the way in for someone who still cannot choose */
  .tiles-names a.names-help { justify-content: center; gap: 10px; margin: 10px 0 10px; padding: 10px 16px; border: 0; border-radius: 999px;
    background: var(--walnut); color: var(--cream); font: 700 var(--step--1) var(--sans); letter-spacing: .02em; }
  .tiles-names a.names-help span { color: var(--gold-bright); }
  .tiles-names a.names-help:hover, .tiles-names a.names-help:focus-visible { color: var(--gold-bright); }
  .tiles-names a:nth-last-child(2) { border-bottom: 0; }
  .tiles-names a span { color: var(--gold-deep); font-family: var(--sans); font-size: 15px; line-height: 1; transition: transform .2s ease; }
  .tiles-names a:hover, .tiles-names a:focus-visible { color: var(--gold-deep); }
  .tiles-names a:hover span, .tiles-names a:focus-visible span { transform: translateX(4px); }
  @media (prefers-reduced-motion: reduce) { .tiles-names a span { transition: none; } }
  .tiles-help-row + .tiles { margin-top: 12px; }
  /* ---------- previous / next between treatment categories ---------- */
  .cat-next-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 22px 0 0; }
  /* Back is the quieter of the two: outlined, so Next stays the one that leads on. */
  a.cat-next.cat-prev { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--walnut); }
  a.cat-next.cat-prev:hover { background: var(--walnut); color: var(--cream); }
  .cat-next-row + .hs-cards { margin-top: 12px; }
  .cat-next-row { max-width: 1460px; margin-inline: auto; }
  .cat-next-row.narrow { max-width: 660px; }
  .cat-next-row + .menu-split { margin-top: 0; }
  .cat-next-row + .menu-split .menu-cards { margin-top: 12px; }
  a.cat-next { color: var(--cream); background: var(--walnut); padding: 10px 18px; border-radius: 999px;
    font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; text-decoration: none; }
  a.cat-next:hover { color: var(--gold-bright); }
  .cat-pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; margin: 40px 0 6px; align-items: stretch; }
  .cat-pn .pn { display: block; padding: 18px 22px; border-radius: 16px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); transition: box-shadow .2s ease, border-color .2s ease; }
  .cat-pn .pn:hover { border-color: var(--gold-deep); box-shadow: 0 6px 18px rgba(160,122,54,.18); }
  .cat-pn .pn small { display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-deep); margin-bottom: 6px; }
  .cat-pn .pn b { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--step-1); line-height: 1.2; }
  .cat-pn .pn.all { text-align: center; }
  .cat-pn .pn.next { text-align: right; background: var(--walnut); border-color: var(--walnut); color: var(--cream); }
  .cat-pn .pn.next small { color: var(--gold-bright); }
  .cat-pn .pn.next:hover { box-shadow: 0 6px 18px rgba(30,41,35,.3); }
  @media (max-width: 700px) {
    .cat-pn { grid-template-columns: 1fr 1fr; }
    .cat-pn .pn.all { grid-column: 1 / -1; order: 3; }
  }

  /* ---------- Head Spa: one enhancement featured above the rest ---------- */
  .hs-spotlight { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 22px; padding: clamp(22px, 3vw, 40px);
    background: var(--walnut); color: var(--cream); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(216,180,108,.45); }
  @media (min-width: 860px) { .hs-spotlight { grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; } }
  .hs-spot-tag { font: 700 var(--step--2) var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 10px; }
  .hs-spotlight h3 { font-family: var(--serif); font-weight: 600; font-size: var(--step-4); line-height: 1.05; color: var(--cream); margin: 0; }
  .hs-spotlight .role { font-family: var(--serif); font-style: italic; font-size: var(--step-1); color: var(--gold-bright); margin-top: 8px; }
  .hs-spotlight .mt { font: 700 var(--step-0) var(--sans); color: var(--cream); margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .hs-spot-words > p:last-child { color: var(--cream-soft); font-size: var(--step-0); line-height: 1.7; margin-top: 14px; max-width: 62ch; }
  .hs-spot-how { background: rgba(251,248,241,.07); border-radius: 14px; padding: 20px 22px; box-shadow: inset 0 0 0 1px rgba(216,180,108,.3); }
  .hs-spot-how h4 { font-family: var(--serif); font-weight: 600; font-size: var(--step-2); color: var(--gold-bright); margin: 0; }
  .hs-spot-how p { color: var(--cream); font-size: var(--step-0); line-height: 1.6; margin-top: 8px; }
  .hs-spot-how ul { margin: 12px 0 18px; padding-left: 18px; color: var(--cream-soft); font-size: var(--step--1); line-height: 1.7; }
  /* the "to come" pill is dark-on-pale everywhere else; on this dark panel it needs to be light */
  .hs-spotlight .tbd { color: var(--gold-bright); background: rgba(216,180,108,.14); border-color: rgba(216,180,108,.6); }

/* the invitation above the home page's email box */
.guest-invite { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 27px); line-height: 1.3; color: var(--cream, #F3EDE1); margin: 10px auto 18px; max-width: 26ch; text-wrap: balance; }
.guest-invite { margin-bottom: 8px; max-width: 30ch; }
.guest-what { font-family: var(--sans); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; color: rgba(244,234,215,.82); margin: 0 auto 20px; max-width: 46ch; }
.guest-band { margin-top: 56px; }
/* The Royal Guest List inside the Your Visit page, under "After your visit" */
.guest-inline { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.guest-inline .gi-invite { font-family: var(--serif); font-size: clamp(20px, 2vw, 25px); line-height: 1.25; margin: 8px 0 6px; color: var(--ink); }
.guest-inline .gi-what { margin: 0; }
.guest-inline .keep { margin-top: 14px; }

/* the one line that carries the price for the head spa extras */
.hs-addline { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; color: var(--gold-deep); margin: 34px 0 16px; }

  /* ==== REFINEMENT: square edges, no boxes around words (2026-10-08) ==== */
  /* Rounded, outlined boxes around everything read as an app. A printed menu has edges and
     rules. So: every corner is square, words are set off by a thin gold line and space, and
     buttons are square with spaced capitals. Two things keep their soft shape on purpose: the
     gold Reservations button and the anniversary ribbon in the header. */
  .menu-strip:not(.cutout) img,
  .menu-btn,
  .nav-panel,
  .nav-panel a,
  .btn,
  .story-founder img,
  figure.art,
  .portrait,
  .room .ph,
  .tile,
  .path,
  .quotes figure,
  .panel-card,
  .social a,
  .keep input,
  .shelf .ph,
  .pair figure,
  .fv figure.inset,
  .item,
  .variant-row > button,
  .redeeming,
  .cat-banner img,
  .jump a,
  .sig article,
  .rain-btn,
  .fv section,
  .real figure img,
  .story-pic img,
  .story-figure img,
  .gift figure,
  .card,
  .len-row button,
  .locked,
  .enh,
  .give,
  .bday select,
  .bday input,
  .chosen-bar,
  .e-thumb,
  .visit,
  .field input,
  .field textarea,
  .pill span,
  .done,
  .hs-hero img,
  .hs-jump a,
  .hs-feature figure,
  .hs-row,
  .hs-row .thumb,
  .hs-card,
  .hs-note,
  .head-help,
  .name-group,
  .callband,
  .ws-first-img,
  .ws-card,
  .ws-opt,
  .ws-step,
  .glow-pic,
  #catIndex .path,
  .idea-start,
  .idea-door,
  #wsSelect,
  #catIndex .tiles-split .tile,
  .tiles-names,
  .tiles-names a.names-help,
  a.cat-next,
  .cat-pn .pn,
  .hs-spotlight,
  .hs-spot-how { border-radius: 0; }

  /* buttons: square, spaced capitals */
  .btn, a.cat-next { border-radius: 0; text-transform: uppercase; letter-spacing: .16em; font-size: var(--step--2); padding: 14px 26px; }
  a.cat-next { padding: 11px 18px; }

  /* words that sat in boxes now sit under a thin gold rule */
  .path { background: transparent; border: 0; border-top: 1px solid rgba(160,122,54,.45); padding: 16px 2px 14px; }
  .path:hover b { color: var(--gold-deep); }
  #catIndex .path { padding: 12px 2px 12px; }
  .t-single .paths.two .path { text-align: left; }
  .hs-card { background: transparent; border: 0; border-top: 1px solid rgba(160,122,54,.45); padding-top: 18px; }
  .hs-card.one, .hs-cards.one .hs-card { border-top: 0; padding-top: 4px; }
  .ws-card, .ws-step { background: transparent; box-shadow: none; border-top: 1px solid rgba(160,122,54,.45); padding: 16px 2px 14px; }
  .ws-opt { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding-left: 2px; }
  .ws-opt:hover, .ws-opt:focus-visible { background: transparent; }
  .cat-pn .pn:not(.next) { background: transparent; }
  .idea-start { background: transparent; border: 0; border-top: 1px solid rgba(160,122,54,.45); border-bottom: 1px solid rgba(160,122,54,.45); padding: 18px 2px 20px; }
  .idea-door { background: transparent; border: 0; border-top: 1px solid rgba(160,122,54,.45); padding: 12px 2px; }
    /* Back / All / Next between treatments: plain words, no boxes. The dark green block for
     Next was the heaviest thing on the page; Next is now simply the gold one of the three,
     over a thin gold rule that runs under the row. (Stephanie, 2026-10-08.) */
  .cat-next-row { border-bottom: 1px solid rgba(160,122,54,.45); padding-bottom: 10px; }
  a.cat-next, a.cat-next.cat-prev { background: transparent; box-shadow: none; padding: 6px 0; color: var(--gold-deep); font-weight: 700; }
  a.cat-next.cat-prev { color: var(--ink-soft); }
  a.cat-next:hover, a.cat-next.cat-prev:hover { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
  .t-single .t-all { text-transform: uppercase; letter-spacing: .16em; font-size: var(--step--2); }
  /* the same three at the foot of a category page: lines, not blocks */
  .cat-pn .pn, .cat-pn .pn.next { background: transparent; border: 0; border-top: 1px solid rgba(160,122,54,.45); color: var(--ink); padding: 14px 2px; box-shadow: none; }
  .cat-pn .pn.next small { color: var(--gold-deep); }
  .cat-pn .pn:hover, .cat-pn .pn.next:hover { box-shadow: none; }
  .cat-pn .pn:hover b { color: var(--gold-deep); }
  /* The rest of the site, found by checking all 53 pages for anything still outlined or boxed
     (2026-10-08). Words under a thin gold rule; small links as underlined words, not chips. */
  .panel-card:not(.dark), .hs-note, .fv section, .give { background: transparent; border: 0; box-shadow: none; border-top: 1px solid rgba(160,122,54,.45); padding-inline: 2px; }
  .locked { border: 0; border-top: 1px solid rgba(160,122,54,.45); border-bottom: 1px solid rgba(160,122,54,.45); }
  fieldset.treat { border: 0; border-top: 1px solid rgba(160,122,54,.45); padding-inline: 0; }
  .social a, .hs-jump a { box-shadow: none; background: transparent; padding-inline: 0; text-decoration: underline; text-decoration-color: rgba(160,122,54,.6); text-underline-offset: 6px; }
  .social a:hover, .hs-jump a:hover { background: transparent; color: var(--gold-deep); }
  .hs-jump, .social { gap: 8px 26px; }
  .callband, .hs-spotlight, .hs-spot-how { box-shadow: none; }
  /* the storybook frame on Our Story: a fine gold line in place of the heavy dark green one */
  .story-tale { border: 1px solid rgba(160,122,54,.6); }
  /* ==== end of refinement ==== */