/* ==========================================================================
   Pamper & Glow Waxing & Beauty Spa - Ruaka
   ========================================================================== */

/* ---------------------------------------------------------------- fonts
   Self-hosted latin subsets (variable weight), so nothing third party loads
   before first paint. The two Fallback faces are Georgia and Arial resized
   to Cormorant's and Jost's metrics (capsize), so the swap does not shift
   the layout. */
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-garamond.woff2) format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(fonts/cormorant-garamond-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/jost.woff2) format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond Fallback"; src: local("Georgia");
  ascent-override: 104.5482%; descent-override: 32.4733%; size-adjust: 88.3803%;
}
@font-face {
  font-family: "Jost Fallback"; src: local("Arial"), local("ArialMT");
  ascent-override: 111.4502%; descent-override: 39.0596%; line-gap-override: 0%; size-adjust: 96.007%;
}

:root {
  --ink:        #2B1A22;
  --ink-2:      #3E2531;
  --ink-3:      #56323F;

  --rose:       #B4536E;
  --rose-deep:  #96405A;
  --rose-soft:  #F8EAEE;
  --rose-50:    #FDF5F7;

  --gold:       #BE9450;
  --gold-light: #E2C78B;
  --gold-soft:  #F6EEDF;
  /* gold dark enough for small text on the light grounds (4.6:1 on sand) */
  --gold-ink:   #85643E;

  --cream:      #FCF8F5;
  --sand:       #F5ECE4;
  --white:      #FFFFFF;

  --text:       #524049;
  --muted:      #79656F;
  --line:       rgba(43, 26, 34, .11);
  --line-soft:  rgba(43, 26, 34, .06);

  --serif: "Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, serif;
  --sans:  "Jost", "Jost Fallback", Arial, sans-serif;

  /* the one easing every transition and animation uses */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;

  --sh-sm: 0 2px 10px rgba(43, 26, 34, .05);
  --sh:    0 12px 34px rgba(43, 26, 34, .08);
  --sh-lg: 0 26px 70px rgba(43, 26, 34, .13);

  --wrap: 1200px;
  --gut: 24px;
  --header-h: 76px;
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
/* a component's own display (flex rows in the booking summary) must not
   override the hidden attribute app.js sets */
[hidden] { display: none !important; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

::selection { background: var(--rose); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------ typography */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.h1, h1 { font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.65rem); }
.sec-title { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }

p + p { margin-top: 1.05em; }

.lede { font-size: 1.1rem; color: var(--muted); }

strong { font-weight: 500; color: var(--ink); }
em { font-style: italic; }

.eyebrow {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 14px;
}
.eyebrow--light { color: var(--gold-light); }
.eyebrow--gold { color: var(--gold); }

.serif-accent { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 840px; }

.section { padding: clamp(56px, 7vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 68px) 0; }
/* Sections after the first are not styled, laid out or painted until they
   come near the screen. On a phone this is most of the work a long page
   does at load. The browser remembers each real height once it has been
   seen, so the scrollbar settles after one pass. (Not the footer: contrast
   checkers cannot read its dark ground while it is skipped.) */
main > .section + .section, main > .section + .ctaband {
  content-visibility: auto; contain-intrinsic-size: auto 900px;
}
.section--cream { background: var(--cream); }
.section--sand { background: var(--sand); }
.section--rose { background: var(--rose-50); }
/* on the tinted grounds the brand rose is a shade deeper so small rose text
   (eyebrows, links, today in the hours) keeps 4.5:1 contrast */
.section--sand, .section--rose { --rose: #A64D66; }
.section--ink { background: var(--ink); color: rgba(255, 255, 255, .82); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }

/* Deep aubergine chapters with gold type, so the page is not one pale band
   after another. The local colour tokens are swapped, so the components
   inside (reviews, steps, splits) mostly restyle themselves. */
.section--night {
  --muted: rgba(255, 247, 238, .74);
  --text: rgba(255, 247, 238, .86);
  --line-soft: rgba(226, 199, 139, .16);
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(70% 55% at 88% 0%, rgba(190, 148, 80, .16), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(180, 83, 110, .16), transparent 70%),
    linear-gradient(165deg, var(--ink) 0%, #35202B 100%);
  color: var(--muted);
}
.section--night::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(leaf-line.svg) 40px 30px / 520px auto;
  opacity: .12;
}
/* skipping the paint of a dark section makes contrast checkers read light
   text on the page's light ground, so these always render */
main > .section + .section.section--night { content-visibility: visible; }
.section--night h2, .section--night h3 { color: #FBF3E8; }
.section--night h2 em { color: var(--gold-light); font-weight: 400; }
.section--night .eyebrow { color: var(--gold-light); }
.section--night strong { color: var(--gold-light); }
.section--night .textlink { color: var(--gold-light); border-color: rgba(226, 199, 139, .4); }
.section--night .ticks li::before { border-color: var(--gold); }
.section--night .review,
.section--night .howbook__step {
  background: rgba(255, 247, 238, .05); border-color: rgba(226, 199, 139, .2); box-shadow: none;
}
.section--night .review__q { color: rgba(226, 199, 139, .3); }
.section--night .review__who strong { color: var(--gold-light); }
.section--night .howbook__n {
  width: 64px; height: 64px; background: none; border: 1px solid var(--gold);
  font-size: 1.9rem; color: var(--gold-light);
}
.section--night .split__stamp { background: var(--gold-light); color: var(--ink); }
.section--night .split__stamp strong { color: var(--ink); }
.section--night .split__media img { box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }

/* a split photo with a second framed photo laid over its corner */
.split__media--collage { padding: 0 0 0 34px; }
.split__inset {
  position: absolute; z-index: 1; left: -6px; top: 40px; width: 38%;
  border-radius: var(--r); overflow: hidden; transform: rotate(-4deg);
  border: 7px solid #FBF3E8; box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}
.split__media .split__inset img { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; max-height: none; display: block; }
@media (max-width: 880px) {
  .split__media--collage { padding: 0 0 0 26px; }
  .split__inset { left: 0; top: 24px; width: 36%; border-width: 5px; }
}

.sec-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-sub { margin-top: 16px; color: var(--muted); font-size: 1.05rem; }

/* decorative gold rule with a diamond */
.rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 26px auto 0; max-width: 220px;
}
.rule::before, .rule::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-light));
}
.rule::after { background: linear-gradient(270deg, transparent, var(--gold-light)); }
.rule i { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

/* ---------------------------------------------------------------- icons */
.ic { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; }
.ic svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: .93rem; font-weight: 500; letter-spacing: .04em;
  cursor: pointer;
  text-align: center;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn--sm { padding: 11px 22px; font-size: .85rem; }
.btn--block { width: 100%; }

.btn--primary {
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(150, 64, 90, .26);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(150, 64, 90, .34); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(190, 148, 80, .3);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(190, 148, 80, .4); }

.btn--outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-50); }

.btn--ghost-light { border-color: rgba(255, 255, 255, .3); color: #fff; }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); }

.btn--white { background: #fff; color: var(--ink); box-shadow: var(--sh-sm); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--sh); }

.btn__arrow { display: inline-flex; width: 1.05em; height: 1.05em; transition: transform .28s var(--ease); }
.btn__arrow svg { width: 100%; height: 100%; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--rose-deep); font-weight: 500; font-size: .95rem;
  border-bottom: 1px solid rgba(180, 83, 110, .3); padding-bottom: 2px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.textlink:hover { border-color: var(--rose); gap: 12px; }

/* ---------------------------------------------------------------- header */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252, 248, 245, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease);
}
.header.is-stuck { box-shadow: 0 6px 26px rgba(43, 26, 34, .07); }
.header__inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand__mark {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  overflow: hidden;
}
.brand__mark img { width: 48px; height: 48px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--serif); font-size: 1.32rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}
.brand__sub {
  font-size: .59rem; letter-spacing: .19em; text-transform: uppercase; color: var(--muted); margin-top: 3px;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: 100px;
  font-size: .87rem; font-weight: 400; color: var(--ink);
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--rose); background: var(--rose-50); }
.nav__chev {
  width: 6px; height: 6px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .55;
}

.nav__has-sub { position: relative; }
.nav__sub {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 250px; padding: 10px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav__sub a {
  display: block; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: .87rem; color: var(--text);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__sub a:hover { background: var(--rose-50); color: var(--rose); }
.nav__all {
  margin-top: 6px; border-top: 1px solid var(--line-soft); padding-top: 12px !important;
  color: var(--rose) !important; font-weight: 500;
}

.header__actions { display: flex; align-items: center; gap: 12px; flex: none; }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 13px; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* mobile nav */
.mnav {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 101;
  background: var(--cream); border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  max-height: calc(100dvh - var(--header-h) - 40px);
  overflow-y: auto;
  padding: 8px var(--gut) 26px;
}
.mnav[hidden] { display: none; }
.mnav__list > li { border-bottom: 1px solid var(--line-soft); }
.mnav__list > li > a {
  display: block; padding: 15px 2px; font-size: 1rem; color: var(--ink); font-weight: 500;
}
.mnav__sub { padding: 0 0 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.mnav__sub a { display: block; padding: 7px 0; font-size: .84rem; color: var(--muted); }
.mnav__sub a:hover { color: var(--rose); }
.mnav__foot { margin-top: 22px; }
.mnav__contact { display: flex; gap: 10px; margin-top: 14px; }
.mnav__contact a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: 1px solid var(--line); border-radius: 100px;
  font-size: .85rem; color: var(--ink);
}
.mnav__contact .ic { color: var(--rose); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
}
/* The header is the tightest row on the site: brand + CTA + burger.
   At full size it needs about 501px, so the tightening has to start well
   clear of that - at the old 470px mark, every viewport from 471px to 499px
   (folding phones unfolded, small tablets in portrait, split screen) scrolled
   sideways. Scale the header down from 520px and the gutters from 470px. */
@media (max-width: 520px) {
  .header__inner { gap: 10px; }
  .brand { min-width: 0; }
  .brand__text { min-width: 0; }
  .brand__mark { width: 42px; height: 42px; }
  .brand__mark img { width: 42px; height: 42px; }
  .brand__name { font-size: 1.08rem; }
  .brand__sub { font-size: .5rem; letter-spacing: .12em; white-space: nowrap; }
  .header__actions { gap: 8px; }
  .btn--sm { padding: 10px 15px; font-size: .74rem; letter-spacing: .02em; }
}
/* Below 470px the gutters and the burger give up their last few pixels.
   Above it there is room to keep the burger a full 42px tap target. */
@media (max-width: 470px) {
  :root { --gut: 18px; }
}
/* The descriptor grew to "Waxing, Beauty & Wellness" when the wellness wing
   opened, which pushed the header past the viewport on 375px handsets
   (iPhone SE and 8). Drop it earlier; the wordmark alone is enough there. */
@media (max-width: 430px) {
  .brand__sub { display: none; }
  .brand__name { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(248, 234, 238, .9), transparent 70%),
    radial-gradient(45% 45% at 95% 90%, rgba(246, 238, 223, .8), transparent 70%);
  pointer-events: none;
}
/* her logo's line leaves, drawn in gold, very faint behind the hero */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(leaf-line.svg) 0 0 / 460px auto;
  opacity: .16;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 46%, transparent 62%, #000 100%);
          mask-image: linear-gradient(100deg, #000 0%, transparent 46%, transparent 62%, #000 100%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px);
  align-items: center;
  /* block padding only: a padding shorthand here zeroed the .wrap gutter, so
     on phones the heading and buttons sat against the screen edge */
  padding-block: clamp(40px, 5.5vw, 84px) clamp(56px, 6.5vw, 104px);
}
.hero h1 {
  margin-bottom: 26px;
  font-size: clamp(2.75rem, 1.15rem + 5.6vw, 6.1rem);
  line-height: 1; letter-spacing: -.02em;
}
.hero h1 .accent { color: var(--rose); font-style: italic; font-weight: 400; }
.hero__sub { font-size: 1.08rem; color: var(--muted); max-width: 30em; margin-bottom: 30px; }
.hero__actions { margin-bottom: 30px; }

.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.hero__trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); }
.hero__trust-item .ic { color: var(--rose); }
/* phones: one item per line, so the block is the same height in the fallback
   font and in Jost and the hero photo below it does not jump on the swap */
@media (max-width: 600px) { .hero__trust { flex-direction: column; align-items: flex-start; gap: 10px; } }

.rating { display: inline-flex; align-items: center; gap: 10px; }
.rating__stars { display: inline-flex; gap: 2px; color: var(--gold); }
.rating__stars .ic { width: .95em; height: .95em; }
.rating__text { font-size: .84rem; color: var(--muted); }
.rating__text strong { color: var(--ink); font-weight: 600; }

/* hero collage */
.hero__media { position: relative; }
/* a gold arch drawn just behind the photo, offset down and right */
.hero__media::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border: 1px solid var(--gold); opacity: .7;
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 40% 40% var(--r-lg) var(--r-lg);
  pointer-events: none;
}
.hero__frame {
  position: relative;
  /* a true semicircle on top at any width: half the width across, 40% of a
     4:5 frame's height down, which is the same length */
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 40% 40% var(--r-lg) var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-lg);
  /* tall enough for a portrait film later; the bigger heading keeps the
     text column level with it */
  aspect-ratio: 4 / 5;
}
/* the nails sit in the lower half of her photo, so the crop leans down */
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__frame::after {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50% 50% 18px 18px / 40% 40% 18px 18px;
  pointer-events: none;
}
/* her own reels, cut into a short silent loop. app.js starts it after the
   page has loaded; until then (and on Save-Data or reduced motion) the photo
   underneath is the hero, so it never delays the first paint. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--ease);
}
.hero__video.is-on { opacity: 1; }
.hero__live {
  position: absolute; right: 18px; bottom: 18px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  border-radius: 100px; background: rgba(43, 26, 34, .74); color: #fff;
  font-size: .74rem; letter-spacing: .02em;
  opacity: 0; transition: opacity .8s var(--ease);
}
.hero__live i { width: 7px; height: 7px; border-radius: 50%; background: #E0475B; }
.hero__video.is-on + .hero__live { opacity: 1; }
@media (min-width: 421px) and (max-width: 900px) {
  /* here the four-waxes chip sits at the bottom left, so the label moves up */
  .hero__live { bottom: auto; top: 18px; right: 50%; transform: translateX(50%); }
}
/* a second, smaller photo in a white frame laid over the arch */
.hero__inset {
  position: absolute; z-index: 2; left: -84px; top: 9%; width: 38%;
  aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  border: 8px solid #fff; box-shadow: var(--sh-lg); background: var(--sand);
  transform: rotate(-5deg);
}
.hero__inset img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* the second framed photo: the sauna, low on the right */
.hero__inset--b {
  left: auto; top: auto; right: -30px; bottom: 25%; width: 31%;
  transform: rotate(4deg);
}
.hero__inset--b img { object-position: 50% 50%; }
.hero__chip {
  position: absolute; z-index: 3; left: -40px; bottom: 40px;
  background: #fff; border-radius: var(--r); padding: 14px 18px;
  box-shadow: var(--sh-lg); display: flex; align-items: center; gap: 12px;
  max-width: 310px;
}
.hero__chip-ic {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--rose-soft); color: var(--rose);
}
.hero__chip-t { font-size: .78rem; line-height: 1.4; color: var(--muted); }
.hero__chip-t strong { display: block; font-size: .92rem; color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__media { max-width: 440px; margin-inline: auto; width: 100%; }
  .hero__media::before { inset: 14px -12px -14px 12px; }
  .hero__chip { left: 0; }
  .hero__inset { left: -10px; top: 6%; width: 36%; border-width: 6px; }
  .hero__inset--b { left: auto; top: auto; right: -10px; bottom: 30%; width: 30%; }
}
@media (max-width: 420px) {
  .hero__inset { left: 0; }
  /* the chip drops below the photo here, so the media box is taller than the
     frame: place the sauna photo and the gold arch from the frame's own size
     (full width less the two gutters, at 4:5) rather than from the bottom */
  .hero__inset--b { right: 0; bottom: auto; top: 64vw; }
  .hero__media::before { bottom: auto; height: calc((100vw - 2 * var(--gut)) * 1.25); }
  .hero__chip { position: static; margin-top: 34px; max-width: none; }
}

/* ------------------------------------------------------------- trust strip */
.trustrow { border-block: 1px solid var(--line-soft); background: var(--white); }
.trustrow__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 26px 0;
}
.trustrow__item { display: flex; align-items: center; gap: 12px; padding: 4px 18px; }
.trustrow__item + .trustrow__item { border-left: 1px solid var(--line-soft); }
.trustrow__ic {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--gold-soft); color: var(--gold);
}
.trustrow__t { font-size: .84rem; line-height: 1.45; color: var(--muted); }
.trustrow__t strong { display: block; color: var(--ink); font-weight: 500; font-size: .92rem; }
@media (max-width: 860px) {
  .trustrow__grid { grid-template-columns: 1fr 1fr; gap: 4px; }
  .trustrow__item:nth-child(odd) { border-left: 0; }
  .trustrow__item:nth-child(n+3) { border-top: 1px solid var(--line-soft); padding-top: 18px; }
  .trustrow__item:nth-child(-n+2) { padding-bottom: 18px; }
}
@media (max-width: 480px) {
  .trustrow__grid { grid-template-columns: 1fr; }
  .trustrow__item { border-left: 0 !important; padding: 14px 0; }
  .trustrow__item + .trustrow__item { border-top: 1px solid var(--line-soft); }
}

/* -------------------------------------------------------------- how to book */
.howbook__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.howbook__step {
  position: relative; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 34px 28px 30px; text-align: center;
  box-shadow: var(--sh-sm);
}
.howbook__n {
  width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--gold-light);
  font-family: var(--serif); font-size: 1.2rem;
}
.howbook__step h3 { margin-bottom: 10px; }
.howbook__step p { font-size: .93rem; color: var(--muted); }
@media (max-width: 800px) { .howbook__grid { grid-template-columns: 1fr; } }

/* Home booking steps: the ring traces itself, then the numeral, as each card arrives. */
.howbook__n--draw, .section--night .howbook__n--draw { background: none; border: 0; }
.howbook__n--draw svg { width: 100%; height: 100%; overflow: visible; }
.howbook__n--draw path {
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
}
.howbook__n--draw .ring { stroke-width: 1; opacity: .85; }
.howbook__n--draw .digit { stroke-width: 1.9; }
@media (prefers-reduced-motion: no-preference) {
  .js .howbook__n--draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .is-in .howbook__n--draw .ring { animation: pg-draw .6s cubic-bezier(.4, 0, .2, 1) forwards; }
  .js .is-in .howbook__n--draw .digit { animation: pg-draw .5s cubic-bezier(.4, 0, .2, 1) .35s forwards; }
  .js .howbook__step:nth-child(2) .howbook__n--draw path { animation-delay: .12s; }
  .js .howbook__step:nth-child(2) .howbook__n--draw .digit { animation-delay: .47s; }
  .js .howbook__step:nth-child(3) .howbook__n--draw path { animation-delay: .24s; }
  .js .howbook__step:nth-child(3) .howbook__n--draw .digit { animation-delay: .59s; }
}
@keyframes pg-draw { from { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }

/* Trust row icons: the line work traces itself in, then each icon does its own
   small move in turn, one every few seconds, so the row never fidgets at once. */
.trustrow__ic svg { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .js .howbook__n--draw path, .js .trustrow__ic path, .js .trustrow__ic circle, .js .trustrow__ic rect { opacity: 0; }
  .js .trustrow__ic path, .js .trustrow__ic circle, .js .trustrow__ic rect { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .trustrow__item.is-in .trustrow__ic { animation: pg-pop .55s cubic-bezier(.3, 1.4, .5, 1) both; }
  .js .trustrow__item.is-in .trustrow__ic path,
  .js .trustrow__item.is-in .trustrow__ic circle,
  .js .trustrow__item.is-in .trustrow__ic rect { animation: pg-draw .7s cubic-bezier(.4, 0, .2, 1) .15s forwards; }
  .js .trustrow__item:nth-child(2).is-in .trustrow__ic, .js .trustrow__item:nth-child(2).is-in .trustrow__ic :is(path, circle, rect) { animation-delay: .1s; }
  .js .trustrow__item:nth-child(3).is-in .trustrow__ic, .js .trustrow__item:nth-child(3).is-in .trustrow__ic :is(path, circle, rect) { animation-delay: .2s; }
  .js .trustrow__item:nth-child(4).is-in .trustrow__ic, .js .trustrow__item:nth-child(4).is-in .trustrow__ic :is(path, circle, rect) { animation-delay: .3s; }
  .js .trustrow__item.is-in .trustrow__ic svg { animation: var(--idle) 8s ease-in-out infinite; animation-delay: var(--idle-at); }
  .trustrow__ic--shield { --idle: pg-shield; --idle-at: 1.6s; }
  .trustrow__ic--user { --idle: pg-bob; --idle-at: 3.6s; }
  .trustrow__ic--heart { --idle: pg-beat; --idle-at: 5.6s; }
  .trustrow__ic--calendar { --idle: pg-swing; --idle-at: 7.6s; }
}
@keyframes pg-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pg-shield { 0%, 12%, 100% { transform: none; } 4% { transform: rotate(-10deg) scale(1.08); } 8% { transform: rotate(6deg) scale(1.04); } }
@keyframes pg-bob { 0%, 12%, 100% { transform: none; } 5% { transform: translateY(-3px); } 9% { transform: translateY(1px); } }
@keyframes pg-beat { 0%, 12%, 100% { transform: none; } 3% { transform: scale(1.22); } 6% { transform: scale(.96); } 9% { transform: scale(1.12); } }
@keyframes pg-swing { 0%, 12%, 100% { transform: none; } 4% { transform: rotate(9deg); } 8% { transform: rotate(-6deg); } }
.trustrow__ic svg { transform-origin: 50% 60%; }

/* ---- map still, live map on tap */
.mapfacade { position: relative; overflow: hidden; cursor: pointer; background: #ece6e1; }
.mapfacade img, .mapfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapfacade img { object-fit: cover; }
.mapfacade__pin {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--rose); border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(43, 26, 34, .35);
}
.mapfacade__pin::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--rose);
  animation: pg-ping 2.4s ease-out infinite;
}
.mapfacade__label {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  padding: 6px 12px; border-radius: 100px; background: #fff; color: var(--ink);
  font-size: .78rem; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 14px rgba(43, 26, 34, .18);
}
.mapfacade__btn {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
  border: 0; border-radius: 100px; background: var(--ink); color: #fff; cursor: pointer;
  font: 500 .84rem var(--sans); white-space: nowrap; box-shadow: 0 6px 20px rgba(43, 26, 34, .25);
  transition: background-color .25s var(--ease);
}
.mapfacade__btn .ic, .mapfacade__btn svg { width: 16px; height: 16px; color: var(--gold-light); }
.mapfacade:hover .mapfacade__btn { background: var(--rose); }
.mapfacade__credit {
  position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: .62rem; color: rgba(43, 26, 34, .65); background: rgba(255, 255, 255, .75);
}
.mapfacade.is-live { cursor: auto; }
.mapfacade.is-live > :not(iframe) { display: none; }
@keyframes pg-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapfacade__pin::after { animation: none; opacity: 0; } }

/* ---- price list: search and a jump bar that sticks under the header */
.pricebar {
  position: sticky; top: var(--header-h); z-index: 90;
  background: rgba(252, 248, 245, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--line-soft); transition: box-shadow .3s var(--ease);
}
.pricebar.is-stuck { box-shadow: 0 8px 24px rgba(43, 26, 34, .06); }
.pricebar__in { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.pricebar__search {
  flex: 0 0 260px; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 100px; color: var(--muted);
  transition: border-color .2s var(--ease);
}
.pricebar__search:focus-within { border-color: var(--rose); }
.pricebar__search svg { width: 17px; height: 17px; flex: none; }
.pricebar__search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font: 400 .9rem var(--sans); color: var(--ink);
}
.pricebar .priceindex--bar {
  flex: 1; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
  overflow-x: auto; scrollbar-width: none; padding: 2px 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.pricebar .priceindex--bar::-webkit-scrollbar { display: none; }
.pricebar .priceindex--bar a { flex: none; white-space: nowrap; padding: 8px 15px; font-size: .8rem; }
.pricebar .priceindex--bar a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.section--prices { padding-top: clamp(30px, 4vw, 48px); }
.pricegroup { scroll-margin-top: calc(var(--header-h) + 90px); }
.pricegroup + .pricegroup { margin-top: 28px; }
.pricebar__empty { text-align: center; color: var(--muted); padding: 30px 0; }
.pricebar__empty a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .pricebar__in { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 10px; }
  .pricebar__search { flex: none; height: 42px; }
  .pricebar__search input { font-size: 1rem; }
  .pricebar .priceindex--bar { margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
  .pricegroup { scroll-margin-top: calc(var(--header-h) + 124px); }
}

/* --------------------------------------------------------- category cards */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.cat {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: rgba(190, 148, 80, .35); }
.cat__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cat:hover .cat__img img { transform: scale(1.05); }
.cat__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.cat__tag {
  align-self: flex-start; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.cat__body h3 { margin-bottom: 9px; }
.cat__body p { font-size: .92rem; color: var(--muted); margin-bottom: 18px; }
.cat__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.cat__price { font-size: .84rem; color: var(--muted); }
.cat__price strong { font-family: var(--serif); font-size: 1.22rem; color: var(--ink); font-weight: 600; }
.cat__go { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--rose); font-weight: 500; }
.cat__go .ic { transition: transform .28s var(--ease); }
.cat:hover .cat__go .ic { transform: translateX(4px); }
@media (max-width: 940px) { .cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cats { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ split blocks */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img {
  width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh); object-fit: cover;
  aspect-ratio: 4 / 5; max-height: 560px;
}
.split__media--tall img { aspect-ratio: 3 / 4; }
.split__stamp {
  position: absolute; right: -14px; bottom: -14px;
  background: var(--ink); color: #fff; border-radius: var(--r);
  padding: 16px 22px; box-shadow: var(--sh-lg); text-align: center;
}
.split__stamp span { display: block; margin-bottom: 4px; }
.split__stamp strong { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--gold-light); font-weight: 600; }
.split__stamp span { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; opacity: .75; }
.split__body h2 { margin-bottom: 18px; }
.split__body p { color: var(--muted); }
.split__body .btn-row { margin-top: 28px; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media img { max-height: 420px; }
}

/* ------------------------------------------------------------------ ticks */
.ticks li {
  position: relative; padding-left: 30px; margin-bottom: 12px; font-size: .97rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 14px; height: 8px;
  border-left: 1.6px solid var(--rose); border-bottom: 1.6px solid var(--rose);
  transform: rotate(-45deg);
}
.ticks--gold li::before { border-color: var(--gold); }

.steps-list { counter-reset: step; }
.steps-list li {
  counter-increment: step; position: relative; padding-left: 40px; margin-bottom: 14px; font-size: .97rem;
}
.steps-list li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--rose-soft); color: var(--rose);
  display: grid; place-items: center; font-size: .78rem; font-weight: 500;
  font-family: var(--sans);
}

/* --------------------------------------------------------------- process */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.process--4 { grid-template-columns: repeat(4, 1fr); }
.process__step { position: relative; padding: 0 14px; text-align: center; }
.process__step::after {
  content: ""; position: absolute; top: 21px; right: -6px; width: 12px; height: 1px;
  background: var(--gold-light);
}
.process__step:last-child::after { display: none; }
.process__n {
  width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
  border: 1px solid var(--gold-light); background: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.05rem; color: var(--gold);
}
.process__step h3 { font-size: 1.05rem; margin-bottom: 7px; }
.process__step p { font-size: .86rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 900px) {
  .process, .process--4 { grid-template-columns: 1fr 1fr; gap: 26px 10px; }
  .process__step::after { display: none; }
}
/* Two columns used to start at 461px, which dropped each step's paragraph
   from 376px wide to 180px in one pixel and squeezed it to under three words
   a line. The steps need about 210px each to read, so stay single column
   until there is room for that. */
@media (max-width: 560px) { .process, .process--4 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- price tables */
.pricecard {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.pricecard__head {
  padding: 22px 26px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--rose-50);
}
.pricecard__head h2, .pricecard__head h3 { font-size: 1.3rem; }

/* a link inside running text is underlined, so it is not told apart by colour alone */
main p a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pricecard__head span { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pricelist { padding: 8px 26px 18px; }
.pricelist li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0; border-bottom: 1px dashed var(--line-soft);
}
.pricelist li:last-child { border-bottom: 0; }
.pricelist__name { flex: 1; min-width: 0; }
.pricelist__name b { font-weight: 500; color: var(--ink); font-size: .97rem; }
.pricelist__note { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.pricelist__mins { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.pricelist__cost {
  font-family: var(--serif); font-size: 1.18rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; min-width: 96px; text-align: right;
}
.pricelist__book {
  flex: none; font-size: .76rem; color: var(--rose); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: 100px; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.pricelist__book:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
@media (max-width: 640px) {
  .pricelist { padding-inline: 20px; }
  .pricelist li { flex-wrap: wrap; row-gap: 8px; }
  .pricelist__name { flex-basis: 100%; }
  .pricelist__cost { min-width: 0; margin-left: auto; }
  .pricecard__head { padding-inline: 20px; }
}

.pop-badge {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--gold-soft); color: var(--gold-ink); padding: 3px 8px; border-radius: 100px;
}

/* ------------------------------------------------------------- price index */
.priceindex { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.priceindex a {
  padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line);
  font-size: .84rem; color: var(--ink); background: #fff;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.priceindex a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --------------------------------------------------------------- reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.review {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 30px 28px; box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  position: relative;
}
.review__q { position: absolute; top: 22px; right: 24px; width: 30px; height: 30px; color: var(--rose-soft); }
.review__stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 16px; }
.review__stars .ic { width: 15px; height: 15px; }
.review p { font-size: .95rem; color: var(--text); flex: 1; }
.review__who { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.review__who strong { display: block; font-weight: 500; color: var(--ink); font-size: .95rem; }
.review__who span { font-size: .78rem; color: var(--muted); }
@media (max-width: 980px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .reviews { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); }
.member {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 30px 24px; text-align: center; box-shadow: var(--sh-sm);
}
.member__ava {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--rose-soft), var(--gold-soft));
  border: 1px solid var(--gold-light);
  font-family: var(--serif); font-size: 1.7rem; color: var(--rose-deep); font-weight: 600;
}
.member h3 { font-size: 1.2rem; margin-bottom: 4px; }
.member__role { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.member p { font-size: .89rem; color: var(--muted); }
.member__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; }
.member__tags span {
  font-size: .68rem; padding: 4px 11px; border-radius: 100px;
  background: var(--rose-50); color: var(--rose-deep);
}
@media (max-width: 1100px) { .team { grid-template-columns: 1fr 1fr; } }
/* Single column until 560px, same as the process steps. Two columns at
   521-560px left the therapists' role line ("Masseuse, Waxologist, Nail
   Tech") breaking across three lines with the separators stranded at the
   end of each one. */
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); background: var(--sand); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform .6s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figure:nth-child(1) { grid-row: span 2; }
.gallery figure:nth-child(1) img { aspect-ratio: 3 / 4.2; height: 100%; }
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery figure:nth-child(1) { grid-row: auto; } }
@media (max-width: 480px) { .gallery { grid-template-columns: 1fr 1fr; gap: 10px; } }
/* the home strip is one tall photo plus six; in two columns the sixth pairs up
   and the seventh would sit alone, so it goes */
@media (max-width: 900px) { .gallery:not(.gallery--full) figure:nth-child(7) { display: none; } }

/* home: the tour video tile leads, then the six rooms from it */
.tourtile a { position: relative; display: block; height: 100%; color: #fff; }
.tourtile a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43, 26, 34, .05) 40%, rgba(43, 26, 34, .82));
}
.tourtile__play {
  position: absolute; left: 22px; bottom: 104px; z-index: 1; width: 62px; height: 62px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--rose); box-shadow: 0 10px 30px rgba(43, 26, 34, .3);
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.tourtile__play svg { width: 26px; height: 26px; margin-left: 3px; }
.tourtile__play::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7);
  animation: pg-ping 2.6s ease-out infinite;
}
.tourtile a:hover .tourtile__play { transform: scale(1.08); background: var(--rose); color: #fff; }
.tourtile__t {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1;
  font-size: .86rem; line-height: 1.5; color: rgba(255, 255, 255, .85);
}
.tourtile__t strong {
  display: block; margin-bottom: 2px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); color: #fff;
}
@media (max-width: 900px) {
  .gallery--tour .tourtile { grid-column: 1 / -1; }
  .gallery.gallery--tour .tourtile img { aspect-ratio: 4 / 3.4; object-position: 50% 22%; }
  .gallery.gallery--tour:not(.gallery--full) figure:nth-child(7) { display: block; }
}
@media (prefers-reduced-motion: reduce) { .tourtile__play::before { animation: none; } }

.gallery--full { grid-template-columns: repeat(3, 1fr); }
.gallery--full figure:nth-child(1) { grid-row: auto; }
.gallery--full img { aspect-ratio: 3 / 4; }
@media (max-width: 900px) { .gallery--full { grid-template-columns: 1fr 1fr; } }

figcaption {
  padding: 10px 14px; font-size: .8rem; color: var(--muted); background: #fff;
}

/* -------------------------------------------------------------------- faq */
.faq__list { max-width: 840px; margin-inline: auto; }
.faq__item {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r);
  margin-bottom: 12px; overflow: hidden;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.faq__item[open] { box-shadow: var(--sh-sm); border-color: rgba(190, 148, 80, .35); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.16rem; color: var(--ink); line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__sign { position: relative; width: 16px; height: 16px; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; background: var(--rose); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq__sign::before { left: 0; top: 7.25px; width: 16px; height: 1.5px; }
.faq__sign::after { left: 7.25px; top: 0; width: 1.5px; height: 16px; }
.faq__item[open] .faq__sign::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 24px 22px; font-size: .95rem; color: var(--muted); }
.faq__a p + p { margin-top: .8em; }
.faq__a a { color: var(--rose); border-bottom: 1px solid rgba(180, 83, 110, .3); }
@media (max-width: 560px) {
  .faq__item summary { padding: 17px 18px; font-size: 1.05rem; }
  .faq__a { padding: 0 18px 20px; }
}

/* -------------------------------------------------------------- cta band */
.ctaband {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
  color: rgba(255, 255, 255, .8);
  position: relative; overflow: hidden;
}
.ctaband::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 60%; height: 180%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190, 148, 80, .18), transparent);
  pointer-events: none;
}
.ctaband::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(leaf-line.svg) 70% 20% / 440px auto; opacity: .12;
}
.ctaband__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: clamp(44px, 5vw, 72px) var(--gut);
  flex-wrap: wrap;
}
.ctaband__title { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); margin-bottom: 12px; }
.ctaband__sub { max-width: 46ch; font-size: .98rem; }
.ctaband__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ------------------------------------------------------------- location */
/* Find Us: one card, map filling the left half, arrival details on the right */
.location {
  display: grid; grid-template-columns: 1.15fr 1fr; max-width: 1040px; margin-inline: auto;
  background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh);
}
.location__map { position: relative; min-height: 380px; background: var(--sand); }
.location__map .map { position: absolute; inset: 0; min-height: 0; border-radius: 0; box-shadow: none; }
.location__info { padding: clamp(28px, 3.6vw, 48px); }
.location__addr { font-style: normal; font-size: .95rem; color: var(--muted); line-height: 1.5; }
.location__addr strong { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.location__note { font-size: .88rem; color: var(--muted); margin-top: 14px; }
.location .location__hours { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; border: 0; }
.location .location__hours li {
  display: block; padding: 12px 14px; border: 0; border-radius: var(--r-sm); background: var(--cream);
}
.location .location__hours li span { display: block; }
.location .location__hours li span:first-child { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 2px; }
.location .location__hours li span:last-child { color: var(--ink); font-weight: 500; }
.location__actions { margin-top: 24px; }
.location__actions .btn .ic { width: 18px; height: 18px; }
.location__call { margin-top: 14px; font-size: .86rem; color: var(--muted); }
.location__call a { color: var(--rose-deep); font-weight: 500; }
@media (max-width: 820px) {
  .location { grid-template-columns: 1fr; }
  .location__map { min-height: 260px; }
}
@media (max-width: 400px) {
  .location .location__hours { grid-template-columns: 1fr; }
  .location__actions .btn { width: 100%; }
}
.location__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.map {
  width: 100%; height: 100%; min-height: 420px; border: 0;
  border-radius: var(--r-lg); box-shadow: var(--sh);
}
.hours { border-top: 1px solid var(--line-soft); }
.hours li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 9px 0; font-size: .88rem; border-bottom: 1px solid var(--line-soft);
}
.hours li span:first-child { color: var(--muted); }
.hours li.is-today { color: var(--rose); font-weight: 500; }
.hours li.is-today span:first-child { color: var(--rose); }

.nap { font-style: normal; display: flex; flex-direction: column; gap: 12px; }
.nap__name { font-weight: 500; color: var(--ink); }
.nap__line { display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; }
.nap__line .ic { color: var(--rose); margin-top: .25em; }
a.nap__line:hover { color: var(--rose); }

.infocards { display: grid; gap: 14px; margin-top: 26px; }
.infocard {
  display: flex; gap: 16px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--sh-sm);
}
.infocard__ic {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--rose-soft); color: var(--rose);
}
.infocard h3 { font-size: 1.08rem; margin-bottom: 5px; }
.infocard p { font-size: .88rem; color: var(--muted); }
@media (max-width: 880px) {
  .location__grid { grid-template-columns: 1fr; }
  .map { min-height: 320px; }
}

/* ------------------------------------------------------------------ areas */
.arealist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.arealist a {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r); font-size: .9rem; color: var(--ink); box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.arealist a:hover { transform: translateY(-3px); border-color: rgba(190, 148, 80, .4); box-shadow: var(--sh); }
.arealist .ic { color: var(--rose); }
.arealist small { display: block; font-size: .74rem; color: var(--muted); }
@media (max-width: 940px) { .arealist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .arealist { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- crumbs */
.crumbs { border-bottom: 1px solid var(--line-soft); background: var(--white); }
.crumbs ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; font-size: .8rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a:hover { color: var(--rose); }

/* ------------------------------------------------------------- page hero */
.phero { background: var(--white); border-bottom: 1px solid var(--line-soft); position: relative; overflow: hidden; }
.phero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(45% 60% at 88% 10%, rgba(248, 234, 238, .8), transparent 70%);
}
.phero__inner {
  position: relative;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 4vw, 60px); align-items: center;
  padding-block: clamp(38px, 4.5vw, 66px);
}
.phero__body h1 { margin-bottom: 18px; }
.phero__lead { color: var(--muted); }
.phero__lead p:first-child { font-size: 1.06rem; }
.phero__lead + .btn-row { margin-top: 30px; }
.phero__meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 26px; }
.phero__meta span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px; background: var(--rose-50);
  font-size: .82rem; color: var(--ink);
}
.phero__meta .ic { color: var(--rose); }
.phero__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh); aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 880px) {
  .phero__inner { grid-template-columns: 1fr; }
  .phero__media { max-width: 380px; }
}

/* -------------------------------------------------------------- prose */
.prose { max-width: 820px; }
.prose h2 { margin: 0 0 16px; }
.prose h2:not(:first-child) { margin-top: 8px; }
.prose > * + * { margin-top: 1.05em; }
.prose ul, .prose ol { margin-top: 1.1em; }
.prose a:not(.btn):not(.textlink) { color: var(--rose); border-bottom: 1px solid rgba(180, 83, 110, .3); }
.prose a:not(.btn):not(.textlink):hover { border-color: var(--rose); }

.block + .block { margin-top: clamp(38px, 4vw, 58px); }

/* ------------------------------------------------------------ related */
.related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.related a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 22px 22px 20px; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r); box-shadow: var(--sh-sm); min-height: 120px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.related a:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: rgba(190, 148, 80, .4); }
.related strong { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.related .ic { color: var(--rose); }
@media (max-width: 900px) { .related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .related { grid-template-columns: 1fr; } }

/* ================================================== BOOKING WIZARD ======= */
.booking { padding: clamp(28px, 4vw, 52px) 0 clamp(60px, 7vw, 96px); }
.booking__shell {
  display: grid; grid-template-columns: 1fr 344px; gap: clamp(22px, 3vw, 40px); align-items: start;
}
/* grid children default to min-width:auto, which lets the horizontal
   category scroller push the whole page wide on phones */
.booking__shell > * { min-width: 0; }
/* booked: the summary rail is hidden, so the confirmation takes the middle */
.booking__shell.is-done { grid-template-columns: minmax(0, 780px); justify-content: center; }

.wizard {
  min-width: 0;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh); overflow: hidden;
}
.wizard__panel { min-width: 0; }

.wizard__head { padding: 24px clamp(20px, 3vw, 34px) 0; }
.wizard__steps { display: flex; gap: 6px; margin-bottom: 20px; }
.wizard__steps li { flex: 1; }
.wizard__steps button {
  width: 100%; text-align: left; background: none; border: 0; padding: 0 0 12px; cursor: default;
  border-bottom: 2px solid var(--line);
  transition: border-color .3s var(--ease);
}
.wizard__steps button span {
  display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  transition: color .3s var(--ease);
}
.wizard__steps button b {
  display: block; font-size: .87rem; font-weight: 400; color: var(--muted); margin-top: 3px;
  transition: color .3s var(--ease);
}
.wizard__steps li.is-done button { border-color: var(--gold-light); cursor: pointer; }
.wizard__steps li.is-done button b, .wizard__steps li.is-done button span { color: var(--gold); }
.wizard__steps li.is-current button { border-color: var(--rose); }
.wizard__steps li.is-current button span { color: var(--rose); }
.wizard__steps li.is-current button b { color: var(--ink); font-weight: 500; }
@media (max-width: 700px) {
  .wizard__steps button b { font-size: 0; }
  .wizard__steps button span { font-size: .62rem; letter-spacing: .1em; }
}

.wizard__panel { padding: 6px clamp(20px, 3vw, 34px) clamp(24px, 3vw, 34px); }
.wizard__panel[hidden] { display: none; }
.panel-in { animation: panelIn .34s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel-in { animation: none; } }

.wizard__q { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); margin-bottom: 6px; }
.wizard__hint { font-size: .9rem; color: var(--muted); margin-bottom: 22px; }

/* search + category filter */
.wsearch { position: relative; margin-bottom: 16px; }
.wsearch input {
  width: 100%; padding: 14px 18px 14px 46px;
  border: 1px solid var(--line); border-radius: 100px; background: var(--cream);
  font-size: 1rem; /* see note on .field input: 16px minimum stops iOS zooming */
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.wsearch input:focus { outline: none; border-color: var(--rose); background: #fff; }
.wsearch::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 13px; height: 13px;
  margin-top: -8px; border: 1.6px solid var(--muted); border-radius: 50%;
}
.wsearch::after {
  content: ""; position: absolute; left: 31px; top: 50%; width: 7px; height: 1.6px;
  background: var(--muted); transform: rotate(45deg); margin-top: 3px;
}

.wchips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 8px; scrollbar-width: thin; }
.wchip {
  flex: none; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--line);
  background: #fff; font-size: .82rem; color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.wchip:hover { border-color: var(--rose); color: var(--rose); }
.wchip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.wlist {
  max-height: 460px; overflow-y: auto; margin: 0 -6px; padding: 4px 6px;
  overscroll-behavior: contain; /* stop the page scrolling once the list hits its end */
  -webkit-overflow-scrolling: touch;
}
.wgroup__h {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink);
  padding: 16px 0 8px; position: sticky; top: 0; background: #fff; z-index: 1;
}
.wopt {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; margin-bottom: 6px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.wopt:hover { border-color: var(--rose); background: var(--rose-50); transform: translateX(2px); }
.wopt.is-on { border-color: var(--rose); background: var(--rose-50); box-shadow: 0 0 0 1px var(--rose) inset; }
.wopt__main { flex: 1; min-width: 0; }
.wopt__name { display: block; font-size: .96rem; color: var(--ink); font-weight: 500; }
.wopt__note { display: block; font-size: .81rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.wopt__meta { text-align: right; flex: none; }
.wopt__price { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.wopt__mins { display: block; font-size: .75rem; color: var(--muted); }
.wopt__ava {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--rose-soft), var(--gold-soft));
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--rose-deep);
}
.wempty { padding: 30px 4px; text-align: center; color: var(--muted); font-size: .92rem; }

/* calendar */
.wcal { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 720px) { .wcal { grid-template-columns: 1fr; } }

.calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.calhead strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.calnav { display: flex; gap: 6px; }
.calnav button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; cursor: pointer; display: grid; place-items: center;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.calnav button:hover:not(:disabled) { border-color: var(--rose); background: var(--rose-50); }
.calnav button:disabled { opacity: .35; cursor: not-allowed; }
.calnav i { width: 7px; height: 7px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.calnav .prev i { transform: rotate(45deg) translate(1px, -1px); }
.calnav .next i { transform: rotate(-135deg) translate(1px, -1px); }

.caldow, .calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.caldow span { text-align: center; font-size: .68rem; letter-spacing: .06em; color: var(--muted); padding-bottom: 6px; }
.calgrid button {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 50%;
  background: transparent; font-size: .87rem; color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.calgrid button:hover:not(:disabled) { background: var(--rose-50); border-color: var(--rose); }
.calgrid button:disabled { color: rgba(43, 26, 34, .22); cursor: not-allowed; }
.calgrid button.is-on { background: var(--rose); border-color: var(--rose); color: #fff; font-weight: 500; }
.calgrid .pad { visibility: hidden; }

.slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;
  max-height: 300px; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.slot {
  padding: 11px 6px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; font-size: .85rem; color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.slot:hover { border-color: var(--rose); color: var(--rose); }
.slot.is-on { background: var(--rose); border-color: var(--rose); color: #fff; }
.slots__note { font-size: .82rem; color: var(--muted); margin-top: 14px; }
.slots__empty { grid-column: 1 / -1; font-size: .88rem; color: var(--muted); padding: 20px 0; }

/* form fields */
.fields { display: grid; gap: 16px; }
.fields--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .fields--2 { grid-template-columns: 1fr; } }
.field label {
  display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--cream);
  /* never below 16px: iOS Safari auto-zooms the page on focus otherwise */
  font-size: 1rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--rose); background: #fff;
  box-shadow: 0 0 0 3px rgba(180, 83, 110, .12);
}
.field.is-error input, .field.is-error textarea { border-color: #c0392b; background: #fdf3f2; }
.field__err { display: none; font-size: .78rem; color: #c0392b; margin-top: 6px; }
.field.is-error .field__err { display: block; }
.field__hint { font-size: .78rem; color: var(--muted); margin-top: 6px; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* wizard footer nav */
.wnav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line-soft);
}
.wback {
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-size: .87rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px;
}
.wback:hover { color: var(--rose); }
.wback i { width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.wnav__right { margin-left: auto; }

/* summary rail */
.wsummary {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--ink); color: rgba(255, 255, 255, .78);
  border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--sh);
  overflow: hidden;
}
.wsummary::before {
  content: ""; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190, 148, 80, .22), transparent);
}
.wsummary h2 {
  position: relative; color: #fff; font-size: 1.32rem; margin-bottom: 4px;
}
.wsummary__sub { position: relative; font-size: .82rem; opacity: .7; margin-bottom: 22px; }
.wsum { position: relative; display: flex; flex-direction: column; gap: 2px; }
.wsum__row {
  display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.wsum__k { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; flex: none; }
.wsum__v { text-align: right; font-size: .92rem; color: #fff; }
.wsum__v.is-empty { color: rgba(255, 255, 255, .35); font-style: italic; }
.wsum__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 18px; }
.wsum__total span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.wsum__total strong { font-family: var(--serif); font-size: 1.9rem; color: var(--gold-light); font-weight: 600; }
.wsummary__note {
  position: relative; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1); font-size: .78rem; line-height: 1.6; opacity: .68;
}
.wsummary__help { position: relative; margin-top: 18px; display: grid; gap: 8px; }
.wsummary__help a {
  display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; color: #fff;
  padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 100px;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.wsummary__help a:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .4); }
.wsummary__help .ic { color: var(--gold-light); }

@media (max-width: 980px) {
  .booking__shell { grid-template-columns: 1fr; }
  /* must stay positioned: the ::before glow is absolutely placed at
     right:-60px, and a static parent lets it escape and widen the page */
  .wsummary { position: relative; top: auto; order: 2; }
}

/* success */
.wdone { text-align: center; padding: clamp(30px, 5vw, 56px) clamp(20px, 3vw, 40px); }
.wdone__ic {
  width: 78px; height: 78px; margin: 0 auto 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rose-soft); color: var(--rose);
  animation: pop .5s var(--ease) both;
}
.wdone__ic .ic { width: 34px; height: 34px; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wdone__ic { animation: none; } }
.wdone h2 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); margin-bottom: 12px; }
.wdone p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.wdone__card {
  margin: 28px auto 0; max-width: 460px; text-align: left;
  background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 22px 24px;
}
.wdone__card .wsum__row { border-color: var(--line-soft); }
.wdone__card .wsum__k { color: var(--muted); opacity: 1; }
.wdone__card .wsum__v { color: var(--ink); }
.wdone .btn-row { margin-top: 28px; justify-content: center; }

/* --------------------------------------------------------------- footer */
.footer { background: var(--ink); color: rgba(255, 255, 255, .68); padding-top: clamp(50px, 6vw, 80px); }
.footer__grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: clamp(28px, 4vw, 64px);
  padding-bottom: 52px;
}
.footer__all { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-light); }
.footer__all .ic { width: 14px; height: 14px; }
.footer__areas { font-size: .84rem; margin-top: 18px; color: rgba(255, 255, 255, .55); }
.footer__areas a { color: var(--gold-light); border-bottom: 1px solid rgba(226, 199, 139, .35); }
/* two lines (Mon to Sat, Sunday), each day name over its hours */
.footer .hours--short { border-top: 0; }
.footer .hours--short li { display: block; padding: 0 0 14px; border: 0; font-size: .88rem; }
.footer .hours--short li span { display: block; }
.footer .hours--short li span:first-child { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.brand--footer .brand__mark {
  background: var(--cream);
  border: 1px solid rgba(226, 199, 139, .5);
  padding: 4px;
}
.brand--footer .brand__mark img { width: 100%; height: 100%; }
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__sub { color: rgba(255, 255, 255, .5); }
.footer__blurb { font-size: .9rem; margin-top: 18px; max-width: 30ch; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.footer__social a:hover { background: var(--rose); border-color: var(--rose); color: #fff; transform: translateY(-2px); }
.footer__h {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 500; margin-bottom: 18px;
}
.footer__h--tight { margin-top: 26px; }
.footer__links li { margin-bottom: 9px; }
.footer__links a { font-size: .88rem; transition: color .25s var(--ease); }
.footer__links a:hover { color: #fff; }
.footer__links--two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.footer .nap { color: rgba(255, 255, 255, .68); }
.footer .nap__name { color: #fff; }
.footer .nap__line .ic { color: var(--gold-light); }
.footer a.nap__line:hover { color: #fff; }
.footer .hours { border-color: rgba(255, 255, 255, .1); }
.footer .hours li { border-color: rgba(255, 255, 255, .08); font-size: .82rem; }
.footer .hours li span:first-child { color: rgba(255, 255, 255, .5); }
.footer .hours li.is-today, .footer .hours li.is-today span:first-child { color: var(--gold-light); }

.footer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px var(--gut); border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem; color: rgba(255, 255, 255, .5);
}
.footer__bar-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__bar-links a:hover { color: #fff; }

@media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
/* phones: brand and address full width, treatments and hours side by side */
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer__col--brand, .footer__col--nap { grid-column: 1 / -1; }
  .footer__col--nap { order: 3; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------- deposit / pay
   Shown on the confirmation screen when a booking needs an M-Pesa deposit.
   The numbers are the whole point of the block, so they are the largest
   thing in it and each one copies on a tap. */
.wsum__v--pay { color: var(--rose); font-weight: 600; }
.wsum__row--dep .wsum__k { color: var(--ink); }
.wdone__card .wsum__row.is-last { border-bottom: 0; }

.wpay {
  margin-top: 22px; padding: 22px;
  border: 1px solid var(--rose-200, var(--line));
  border-radius: var(--r-md, 16px);
  background: linear-gradient(180deg, var(--rose-50, #FDF4F6), transparent 70%);
  text-align: left;
}
.wpay__tag {
  display: inline-block; margin-bottom: 8px;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose); font-weight: 600;
}
.wpay__h { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.25; }
.wpay__lead { margin: 0 0 18px; font-size: .95rem; color: var(--text); line-height: 1.65; }

.wpay__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.wpay__cell { min-width: 0; }
.wpay__k {
  display: block; margin-bottom: 5px;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.wpay__val {
  width: 100%; min-height: 56px; padding: 9px 10px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm, 10px);
  cursor: pointer; text-align: left;
  font-variant-numeric: lining-nums tabular-nums;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.wpay__val span {
  font-size: 1.12rem; font-weight: 600; color: var(--ink); letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.wpay__val em {
  font-style: normal; font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rose); font-weight: 600;
}
.wpay__val:hover { border-color: var(--rose); }
.wpay__val.is-copied { border-color: var(--rose); background: var(--rose-50, #FDF4F6); }
.wpay__val.is-copied em { color: var(--ink); }
.wpay__val.is-copied em::after { content: " \2713"; }

.wpay__ref {
  margin-top: 16px; padding: 14px 16px;
  background: var(--ink); border-radius: var(--r-sm, 10px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.wpay__ref .wpay__k { margin: 0; color: rgba(255, 255, 255, .72); }
.wpay__code {
  font-size: 1.35rem; letter-spacing: .08em; color: #fff;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.wpay__note {
  margin: 14px 0 0; font-size: .82rem; line-height: 1.7; color: var(--muted);
}
.wpay__note strong { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }

/* On a phone the three numbers stack, because squeezing a 6-digit Paybill
   into a third of a 360px screen drops it to a size nobody can read while
   typing it into M-Pesa with the other thumb. */
@media (max-width: 600px) {
  .wpay { padding: 18px 16px; }
  .wpay__grid { grid-template-columns: 1fr; gap: 8px; }
  .wpay__val {
    min-height: 52px; flex-direction: row; align-items: center; justify-content: space-between;
  }
  .wpay__val span { font-size: 1.2rem; }
  .wpay__ref { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------------------------------------------------------- mobile bar */
.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr 1.3fr;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 20px rgba(43, 26, 34, .08);
}
.mobilebar a {
  /* grid items default to min-width:auto, which lets the labels push the
     fixed bar wider than the viewport on small phones */
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 10px 4px; font-size: .68rem; letter-spacing: .04em; color: var(--ink);
  white-space: nowrap;
}
.mobilebar a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mobilebar a + a { border-left: 1px solid var(--line-soft); }
.mobilebar .ic { width: 19px; height: 19px; color: var(--rose); }
.mobilebar__cta { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff !important; }
.mobilebar__cta .ic { color: #fff; }
@media (max-width: 780px) {
  .mobilebar { display: grid; transition: transform .3s var(--ease), visibility 0s .3s; }
  body { padding-bottom: 62px; }
  /* app.js sets .is-typing while a form field has focus: the keyboard owns
     the bottom of the screen, so the bar slides out of its way */
  .is-typing .mobilebar { transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
  html:not(.is-typing) .mobilebar { visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
}
@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .mobilebar, .is-typing .mobilebar { transition: none; }
}

/* ---------------------------------------------------------------- reveal
   Scoped to .js so that if the script never runs, content is still visible
   rather than stuck at opacity 0. */
.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .cat, .related a, .arealist a { transition: none; }
}

/* ------------------------------------------------------------------- misc */
.center { text-align: center; }
.mt-l { margin-top: clamp(28px, 3.5vw, 46px); }
.mt-m { margin-top: 22px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

.notice {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px; border-radius: var(--r);
  background: var(--gold-soft); border: 1px solid rgba(190, 148, 80, .28);
  font-size: .91rem; color: var(--ink);
}
.notice .ic { color: var(--gold); margin-top: .2em; }
.notice--deposit { max-width: 640px; margin: 22px auto 0; text-align: left; font-size: .88rem; line-height: 1.6; }
.notice--deposit strong { display: block; margin-bottom: 2px; }
.notice--deposit .ic { flex: none; }

.err404 { text-align: center; padding: clamp(60px, 10vw, 130px) 0; }
.err404 .big {
  font-family: var(--serif); font-size: clamp(4.5rem, 3rem + 9vw, 9rem); line-height: 1;
  color: var(--rose-soft); font-weight: 600;
}

/* ==========================================================================
   PHONE OPTIMISATION
   Touch targets, readability and vertical rhythm for real handsets.
   Everything above this block is layout; this block is about the thumb.
   ========================================================================== */


@media (max-width: 780px) {
  /* ---- readability: nothing informational below ~14px ---- */

  .trustrow__t { font-size: .9rem; }
  .trustrow__t strong { font-size: .97rem; }
  .cat__body p { font-size: .95rem; }
  .process__step p { font-size: .92rem; }
  .hours li { font-size: .9rem; }
  .pricelist__note { font-size: .87rem; }
  .member p { font-size: .93rem; }
  .footer__links a, .footer__bar { font-size: .92rem; }
  .slots__note, .field__hint { font-size: .85rem; }

  /* ---- touch targets ---- */

  /* the burger has to stay 38px wide to fit the header row at 360px,
     so grow the *hit area* instead of the box */
  .burger { position: relative; }
  .burger::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 46px; height: 46px; transform: translate(-50%, -50%);
  }

  .crumbs ul { padding: 4px 0; }
  .crumbs a { display: inline-block; padding: 11px 0; }

  .mnav__sub a { padding: 11px 0; }
  .mnav__contact a { min-height: 48px; }

  .footer__links a { display: block; padding: 10px 0; }
  .footer__links li { margin-bottom: 0; }
  .footer__bar-links { gap: 6px 20px; }
  .footer__bar-links a { display: inline-block; padding: 8px 0; }
  .nap__line { padding: 5px 0; }
  a.nap__line { min-height: 44px; align-items: center; }
  .infocard a { display: inline-block; padding: 6px 0; }

  .priceindex a { padding: 12px 18px; }
  .textlink { padding: 9px 0; }
  .pricelist__book { padding: 10px 18px; font-size: .82rem; }
  .pricelist li { padding: 16px 0; }

  /* ---- wizard ---- */
  .wizard__steps button { padding: 8px 0 12px; }
  .wchip { padding: 12px 18px; font-size: .87rem; }
  .wchips { gap: 10px; padding-bottom: 14px; overscroll-behavior-x: contain; }
  .slot { padding: 14px 6px; font-size: .9rem; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); max-height: none; }

  /* seven columns cannot each be 44px wide at 360px, so drop the square
     aspect ratio and buy the height instead: ~40x44 is a comfortable tap */
  .wizard__panel { padding-inline: 15px; }
  .caldow, .calgrid { gap: 3px; }
  .calgrid button { aspect-ratio: auto; min-height: 44px; font-size: .95rem; border-radius: 12px; }
  .caldow span { font-size: .74rem; }
  .wopt { padding: 16px 16px; }
  .wopt__name { font-size: 1rem; }
  .wopt__note { font-size: .86rem; }
  /* use more of the screen for the treatment list, it is the longest step */
  .wlist { max-height: 62vh; }

  /* ---- vertical rhythm: this is a long site, tighten it on a phone ---- */
  .section { padding: 52px 0; }
  .section--tight { padding: 36px 0; }
  .sec-head { margin-bottom: 28px; }
  .review { padding: 24px 22px; }
  .howbook__step { padding: 28px 22px 24px; }
}

@media (max-width: 620px) {
  /* Treatment cards go 2-up and lose their body copy on phones. A stacked
     list of six full-bleed cards was four screens of scrolling; a scannable
     grid is how people actually browse a menu on a handset. The descriptions
     live on the service pages anyway. `.cats--text` (areas hub) keeps its
     prose, since those cards have no image and the copy is the point. */
  .cats:not(.cats--text) { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cats:not(.cats--text) .cat__img { aspect-ratio: 4 / 3; }
  .cats:not(.cats--text) .cat__body { padding: 14px 14px 16px; }
  .cats:not(.cats--text) .cat__body p { display: none; }
  .cats:not(.cats--text) .cat__body h3 { font-size: 1.12rem; line-height: 1.2; margin-bottom: 0; }
  .cats:not(.cats--text) .cat__tag { font-size: .58rem; margin-bottom: 7px; }
  .cats:not(.cats--text) .cat__foot { padding-top: 12px; margin-top: 12px; flex-wrap: wrap; gap: 4px; }
  .cats:not(.cats--text) .cat__price { font-size: .74rem; }
  .cats:not(.cats--text) .cat__price strong { font-size: 1.02rem; }
  .cats:not(.cats--text) .cat__go { font-size: .76rem; }

  .cats--text .cat__img { aspect-ratio: 16 / 10; }

  /* team cards read left-to-right on a phone: far more compact than stacked */
  .member {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
    text-align: left; padding: 22px 20px; align-items: start;
  }
  .member__ava { width: 54px; height: 54px; font-size: 1.3rem; margin: 0; grid-row: span 2; }
  .member h3 { grid-column: 2; align-self: end; }
  .member__role { grid-column: 2; margin-bottom: 0; }
  .member p { grid-column: 1 / -1; margin-top: 12px; }
  .member__tags { grid-column: 1 / -1; justify-content: flex-start; margin-top: 12px; }

  .hero__frame { aspect-ratio: 4 / 5; }
  .split__media img { max-height: 380px; }
}

/* ---- running booking summary, phone only -------------------------------- */
.wmini { display: none; }
@media (max-width: 980px) {
  .wmini {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin-bottom: 18px; padding: 12px 16px;
    background: var(--rose-50); border: 1px solid rgba(180, 83, 110, .22);
    border-radius: var(--r-sm);
  }
  .wmini[hidden] { display: none; }
  .wmini__svc { font-size: .88rem; color: var(--ink); font-weight: 500; flex: 1 1 auto; min-width: 0; }
  .wmini__when { font-size: .8rem; color: var(--muted); flex: 1 1 100%; }
  .wmini__when[hidden] { display: none; }
  .wmini__total {
    font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--rose-deep);
    margin-left: auto; flex: none;
  }
}

/* Devices that cannot hover must never depend on it (the nav dropdown is
   desktop-only, but keep this honest if the breakpoints ever move). */
@media (hover: none) {
  .nav__has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* ==========================================================================
   MOTION
   Three mechanics, one easing (var(--ease)), per the Built to Click playbook:
   1. reveal      sections fade up 26px once as they scroll in (app.js);
                  anything already on screen at load is painted, not revealed
   2. response    hover and press feedback on cards, buttons and links
   3. disclosure  FAQ answers, booking panels and booking steps unfold
   The hero paints on the first frame. Nothing loops and nothing replays.
   ========================================================================== */

/* ---- disclosure: the FAQ answer unfolds instead of snapping ---- */
.faq__item[open] .faq__a { animation: faqOpen .4s var(--ease); }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- disclosure: the current booking step's underline grows into place ---- */
.wizard__steps button { position: relative; }
.wizard__steps button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--rose); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.wizard__steps li.is-current button::after,
.wizard__steps li.is-done button::after { transform: scaleX(1); }
.wizard__steps li.is-done button::after { background: var(--gold-light); }

/* ---- response: treatment cards lift and their photo leans in ---- */
.cat { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.cat__img img { transition: transform .9s var(--ease); }
.cat:hover .cat__img img { transform: scale(1.07); }

/* ---- nothing here moves if the visitor would rather it didn't ---- */
@media (prefers-reduced-motion: reduce) {
  .faq__item[open] .faq__a { animation: none; }
  .wizard__steps button::after { transition: none; }
}

/* ==========================================================================
   TYPOGRAPHY DETAIL
   ========================================================================== */

/* Cormorant Garamond ships oldstyle (text) figures by default, so "1" comes
   out as a short roman "I" and 5, 7, 9 hang below the baseline. Fine in running
   prose, wrong in a step badge or a price. Numbers get lining figures; columns
   of prices get tabular ones so the digits line up. */
h1, h2, h3, h4,
.howbook__n, .process__n,
.cat__price strong, .split__stamp strong, .hero__chip-t strong,
.pricecard__head h2, .pricecard__head h3, .err404 .big, .wdone__card .wsum__v {
  font-variant-numeric: lining-nums;
}
.pricelist__cost, .wopt__price, .wsum__total strong, .wmini__total,
.cat__price strong, .split__stamp strong {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- small corrections ---- */

/* keep the city with its preposition: on a phone the headline was breaking
   as "Best Waxing & Beauty Spa in / Ruaka" */
.hero h1 .accent { white-space: nowrap; }

/* the last crumb has no padded anchor, so stretched flex items left its text
   sitting higher than the links beside it */
.crumbs ul { align-items: center; }

/* ---- booking: no-JS fallback and the inline warning ---- */

/* The treatment list is rendered by script, so without JS the wizard is an
   empty search box. Swap it for a way to actually reach the spa. */
.nojs-book { display: none; }
html:not(.js) .nojs-book {
  display: block;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 44px); box-shadow: var(--sh);
}
.nojs-book h2 { margin-bottom: 12px; }
.nojs-book p { color: var(--muted); }
.nojs-book .btn-row { margin-top: 22px; }
html:not(.js) #wizard,
html:not(.js) .wsummary { display: none; }

.wflash {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; padding: 12px 16px;
  background: #fdf3f2; border: 1px solid rgba(192, 57, 43, .25); border-radius: var(--r-sm);
  color: #a3301f; font-size: .89rem; line-height: 1.5;
}
.wflash[hidden] { display: none; }

/* On a phone the booking intro pushed the first treatment to the very bottom
   of the screen. Tighten it so a choice is visible without scrolling. */
@media (max-width: 780px) {
  .phero--book .sec-head { padding: 22px 0 !important; }
  .phero--book h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem); }
  .phero--book .sec-sub { font-size: .95rem; margin-top: 10px; }
  .booking { padding-top: 18px; }
  .wizard__head { padding-top: 18px; }
  .wizard__q { margin-bottom: 4px; }
  .wizard__hint { margin-bottom: 16px; }
}

/* The homepage treatment grid gained a 7th card with the wellness suite.
   A lone card on the last row centres instead of hugging the left edge. */
@media (min-width: 621px) {
  .cats > :last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (max-width: 940px) and (min-width: 621px) {
  /* two columns at this width, so the orphan is the odd one out instead */
  .cats > :last-child:nth-child(3n + 1) { grid-column: auto; }
  .cats > :last-child:nth-child(2n + 1) { grid-column: 1 / -1; max-width: calc(50% - 13px); margin-inline: auto; }
}

/* ==========================================================================
   BOOKING A BASKET
   The spa asked for several treatments in one booking, so step 1 is now a
   multi-select with a running tray, and the summary rail lists what is in it.
   ========================================================================== */

/* a tick that fills in once a treatment is in the basket */
.wopt__tick {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line); position: relative;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.wopt__tick::after {
  content: ""; position: absolute; left: 7px; top: 8px;
  width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.4); opacity: 0;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.wopt.is-on .wopt__tick { background: var(--rose); border-color: var(--rose); }
.wopt.is-on .wopt__tick::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.wopt:hover .wopt__tick { border-color: var(--rose); }

/* the running basket bar under the treatment list */
.wnav--tray { gap: 18px; }
.wtray { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wtray__count { font-size: .84rem; color: var(--muted); }
.wtray__total {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums; line-height: 1.1;
}
.wnav--tray.is-filled .wtray__count { color: var(--rose); }

/* the summary rail now holds a list, each line removable. The label sits
   above the list so long treatment names get the full width of the rail
   instead of being squeezed into a narrow right-hand column. */
.wsum__row--list { flex-direction: column; align-items: stretch; gap: 11px; }
.wsum__list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wsum__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px;
  text-align: left; padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, .1);
}
.wsum__item:last-child { border-bottom: 0; padding-bottom: 0; }
.wsum__item-name { flex: 1 1 100%; font-size: .86rem; color: #fff; line-height: 1.4; }
.wsum__item-price {
  font-size: .82rem; color: var(--gold-light); flex: none;
  font-variant-numeric: lining-nums tabular-nums;
}
.wsum__drop {
  flex: none; margin-left: auto; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 0; color: rgba(255, 255, 255, .75);
  font-size: 1rem; line-height: 1; padding: 0;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.wsum__drop:hover { background: var(--rose); color: #fff; }

@media (max-width: 780px) {
  .wopt__tick { width: 28px; height: 28px; }
  .wopt__tick::after { left: 9px; top: 10px; }
  .wtray__total { font-size: 1.2rem; }
  .wsum__drop { width: 28px; height: 28px; }
}
/* phones: the send button full width, the back link under it */
@media (max-width: 520px) {
  #bookingForm .wnav { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  #bookingForm .wnav__right { margin-left: 0; }
  #bookingForm .wnav__right .btn { width: 100%; }
  #bookingForm .wback { align-self: center; }
}
/* already on the booking page: the bar keeps Call and WhatsApp only */
body:has(#wizard) .mobilebar { grid-template-columns: 1fr 1fr; }
body:has(#wizard) .mobilebar__cta { display: none; }
@media (max-width: 420px) {
  .wnav--tray { flex-wrap: wrap; }
  .wnav--tray .wnav__right { width: 100%; }
  .wnav--tray .wnav__right .btn { width: 100%; }
}

/* 320px handsets have no room to spare once the header carries a wordmark,
   a CTA and a menu button. Shave the gutter and the CTA so it always fits. */
@media (max-width: 360px) {
  :root { --gut: 14px; }
  .header__inner { gap: 8px; }
  .header__actions { gap: 6px; }
  .btn--sm { padding: 10px 13px; font-size: .72rem; }
  .brand { gap: 9px; }
  .brand__name { font-size: 1rem; }
}

/* a send failure has to offer a way out, not just an apology */
.wflash { flex-wrap: wrap; }
.wflash__wa { margin-left: auto; flex: none; }
@media (max-width: 480px) {
  .wflash__wa { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---- phone pass, October ---- */
@media (max-width: 780px) {
  /* Removing a treatment is a real control, not a decoration. 28px was too
     small for a thumb, and on a phone the summary is where people edit the
     basket because the rail sits below the wizard. */
  .wsum__drop { width: 40px; height: 40px; font-size: 1.15rem; }
  .wsum__item { gap: 4px 12px; padding-bottom: 12px; }

  /* Section subtitles carry comma-separated area links. They are inline in a
     sentence so they stay inline, but loosen the leading so two adjacent
     links are not a coin toss under a thumb. */
  .sec-sub { line-height: 1.85; }
  .sec-sub a { padding: 2px 0; }
}

/* The multi-select tick took width from the treatment name, so names like
   "Full Brazilian Waxing (Soft Wax)" were wrapping to three lines of two
   words on a phone. Give the name the full row and put the price, duration
   and tick on a second line. */
@media (max-width: 620px) {
  .wopt { flex-wrap: wrap; row-gap: 10px; align-items: center; }
  .wopt__main { flex: 1 1 100%; order: 1; }
  .wopt__meta {
    order: 2; text-align: left;
    display: flex; align-items: baseline; gap: 12px;
  }
  .wopt__price, .wopt__mins { display: inline; }
  .wopt__tick { order: 3; margin-left: auto; }
  .wopt__ava { order: 0; }
}

/* Gallery captions are full sentences; two columns squeezed them to under
   three words a line. One column on a phone also shows the photos larger. */
@media (max-width: 560px) {
  .gallery--full { grid-template-columns: 1fr; }
}

/* the dropdown is filled by app.js; without it, "Treatments" is just a link */
.nav__sub:empty { display: none; }