/* =========================================================================
   STILLWATER DAY SPA — site stylesheet
   Forest, eucalyptus and warm stone; Spectral + Karla.
   Rebrand the whole site by editing the tokens in :root below.
   ========================================================================= */

:root{
  /* --- BRAND COLOURS: forest, eucalyptus and warm stone --- */
  --ink:        #23302a;   /* headings, dark surfaces */
  --ink-soft:   #56645c;   /* body text */
  --accent:     #3a6446;   /* buttons, links, small text (6.3:1 on paper) */
  --accent-2:   #5c8f6a;   /* brighter: tags, highlights */
  --paper:      #f8f6f1;   /* page background */

  /* --- derived surfaces --- */
  --surface:    #ffffff;
  --surface-2:  #edf0e8;
  --line:       #dfe3d8;
  --line-soft:  #eceee5;

  /* --- on dark backgrounds: hero, quote band, footer --- */
  --ink-deep:     #18211c;   /* footer background */
  --on-ink:       #eef1e9;   /* text on dark */
  --on-ink-soft:  #b7c0b3;   /* muted text on dark */
  --accent-light: #9ec8a6;   /* accent on dark */
  --scrim-rgb:    35,48,42;   /* --ink as r,g,b */
  --gold-rgb:     158,200,166;   /* --accent-light as r,g,b: hero glow, rim light, dust */
  --accent-rgb:   58,100,70;   /* --accent as r,g,b */
  --accent-2-rgb: 92,143,106;   /* --accent-2 as r,g,b */
  --header-bg:    rgba(248,246,241,.92);
  --focus-ring:   rgba(58,100,70,.18);   /* --accent, faint */
  --danger:       #a32222;   /* form errors */

  /* --- hero gradient (dark, four stops) and the 3D card backing --- */
  --hero-1: #121a15;
  --hero-2: #23302a;
  --hero-3: #2e4a37;
  --hero-4: #456f51;
  --card3d-bg: #27352c;
  --letter-1: #cfe6d4;   /* initials avatar gradient */
  --letter-2: #3a6446;

  /* --- status colours (the same on every site: an alert should read as an alert) --- */
  --warn-bg:    #fdf0e1;
  --warn-ink:   #8a4a1f;
  --alert-line: #e8c9a8;
  --alert-bg:   #fdf5ec;

  /* --- type --- */
  --font-display: "Spectral", "Georgia", "Times New Roman", serif;
  --font-body:    "Karla", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- rhythm --- */
  --wrap: 1180px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(var(--scrim-rgb),.05), 0 6px 20px rgba(var(--scrim-rgb),.05);
  --shadow-md: 0 2px 6px rgba(var(--scrim-rgb),.07), 0 18px 44px rgba(var(--scrim-rgb),.09);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; overflow-x:clip;   /* the off-canvas menu lives off-screen; never let it scroll */ background:var(--paper); color:var(--ink-soft);
  font-family:var(--font-body); font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.7; font-weight:400; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; font-synthesis:none; font-synthesis-weight:none;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-display); color:var(--ink);
  font-weight:500; line-height:1.08; letter-spacing:0; margin:0 0 .5em;
}
h1{ font-size:clamp(2.8rem,7vw,4.9rem); }
h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); }
h3{ font-size:clamp(1.4rem,2.2vw,1.8rem); font-weight:600; }
h1 em,h2 em{ font-style:italic; font-weight:500; color:var(--accent); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------- layout helpers ---------- */
.wrap{ width:min(var(--wrap), 100% - 2.5rem); margin-inline:auto; }
.section{ padding-block:var(--section-y); }
.section--tint{ background:var(--surface-2); }
.section--ink{ background:var(--ink); color:var(--on-ink); }
.section--ink h2,.section--ink h3{ color:#fff; }
.center{ text-align:center; }
.stack > * + *{ margin-top:1rem; }
.grid{ display:grid; gap:var(--gap); }
.hidden{ display:none !important; }

.eyebrow{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); font-weight:500; margin:0 0 1rem;
}
.section--ink .eyebrow{ color:var(--accent-light); }
.lede{ font-size:1.1rem; font-weight:300; color:var(--ink-soft); max-width:60ch; }
.center .lede{ margin-inline:auto; }

.rule{ width:52px; height:1px; background:var(--accent); border:0; margin:1.4rem 0; }
.center .rule{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 2rem; border-radius:var(--radius); border:1px solid var(--ink);
  background:var(--ink); color:#fff; text-decoration:none; cursor:pointer;
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--light:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--gold{ background:linear-gradient(135deg,var(--letter-1),var(--letter-2)); color:var(--ink-deep); border-color:transparent; }
.btn--gold:hover{ background:linear-gradient(135deg,#f7e7bb,#d69a36); color:var(--ink-deep); border-color:transparent; }
.btn--ghost-light{ color:var(--on-ink); border-color:rgba(var(--gold-rgb),.45); }
.btn--ghost-light:hover{ background:rgba(var(--gold-rgb),.14); color:#fff; border-color:rgba(var(--gold-rgb),.8); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }
.center .btn-row{ justify-content:center; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--accent); padding-bottom:.25rem;
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow:hover{ gap:.85rem; color:var(--accent); }

/* ---------- announcement + header ---------- */
.announce{
  background:var(--ink); color:var(--on-ink); text-align:center;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:.6rem 1rem;
}
.site-header{
  position:sticky; top:0; z-index:50; background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line-soft);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand img{ width:38px; height:38px; }
.brand-name{
  font-family:var(--font-display); font-size:1.45rem; font-weight:600; color:var(--ink);
  letter-spacing:.04em; line-height:1.05;
}
.brand-tag{ display:block; font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); padding:.35rem 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent);
  transition:width .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ width:100%; }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-cta{ display:none; }
.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line); background:transparent;
  border-radius:var(--radius); cursor:pointer; padding:0; place-items:center;
}
.burger span{ display:block; width:18px; height:1px; background:var(--ink); margin:4px auto; transition:.3s var(--ease); }
.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); }

@media (min-width:900px){ .nav-cta{ display:inline-flex; } }
@media (max-width:899px){
  .burger{ display:grid; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0; padding:6rem 2rem 2rem;
    border-left:1px solid var(--line); transform:translateX(100%);
    transition:transform .35s var(--ease); box-shadow:var(--shadow-md);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links li{ width:100%; border-bottom:1px solid var(--line-soft); }
  .nav-links a{ display:block; padding:1.1rem 0; font-size:.9rem; }
}

/* --- small phones: keep the header on one line --- */
@media (max-width:520px){
  .brand-tag{ display:none; }
  .brand-name{ font-size:1.15rem; white-space:nowrap; }
  .brand img{ width:32px; height:32px; }
  .burger{ width:40px; height:40px; }
  .announce{ font-size:.62rem; letter-spacing:.12em; padding:.5rem .75rem; }
}

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--scrim-rgb),.72) 0%, rgba(var(--scrim-rgb),.45) 45%, rgba(var(--scrim-rgb),.88) 100%);
}
.hero-inner{ position:relative; padding-block:clamp(5rem,16vh,9.5rem); max-width:640px; }
.hero h1{ color:#fff; }
.hero .eyebrow{ color:var(--accent-light); }
.hero p{ color:var(--on-ink); font-size:1.06rem; font-weight:300; max-width:46ch; }
.hero .btn-row{ margin-top:2rem; }

/* ---------- feature trio ---------- */
.features{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.feature{ padding:2rem; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); }
.feature .ico{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:var(--surface-2); color:var(--accent); margin-bottom:1.1rem;
}
.feature .ico svg{ width:20px; height:20px; }
.feature h3{ font-size:1.25rem; }
.feature p{ font-size:.95rem; margin:0; }

/* ---------- product / gallery cards ---------- */
.cards{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.card{ text-decoration:none; color:inherit; display:block; }
.card-media{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface-2);
  border-radius:var(--radius);
}
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.card:hover .card-media img{ transform:scale(1.05); }
.card-body{ padding:1rem .1rem 0; }
.card-title{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--ink); margin:0 0 .25rem; }
.card-meta{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.04em; margin:0; }
.card-price{ color:var(--accent); font-size:.9rem; letter-spacing:.06em; }
.tag{
  position:absolute; top:.75rem; left:.75rem; background:var(--accent-light); color:var(--ink-deep);
  font-size:.6rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; padding:.35rem .6rem; border-radius:var(--radius); z-index:1;
}

/* ---------- split section ---------- */
.split{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:820px){ .split{ grid-template-columns:1fr 1fr; } .split--flip .split-media{ order:2; } }
.split-media img{ border-radius:var(--radius); box-shadow:var(--shadow-md); }

/* ---------- gallery grid + lightbox ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2.5rem; }
.filter,.jump{
  border:1px solid var(--line); background:transparent; border-radius:99px; cursor:pointer;
  padding:.55rem 1.25rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); transition:.25s var(--ease); text-decoration:none; display:inline-block;
}
.filter:hover,.jump:hover{ border-color:var(--accent); color:var(--ink); }
.filter[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

.masonry{ columns:3 260px; column-gap:var(--gap); }
.masonry figure{ margin:0 0 var(--gap); break-inside:avoid; position:relative; cursor:zoom-in; }
.masonry img{ width:100%; border-radius:var(--radius); }
.masonry figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.5rem 1rem .9rem; color:#fff;
  background:linear-gradient(transparent,rgba(var(--scrim-rgb),.8)); font-size:.82rem; letter-spacing:.08em;
  opacity:0; transition:opacity .3s var(--ease); border-radius:0 0 var(--radius) var(--radius);
}
.masonry figure:hover figcaption{ opacity:1; }

.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(var(--scrim-rgb),.96);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
}
.lightbox img{ max-height:82vh; width:auto; border-radius:var(--radius); box-shadow:var(--shadow-md); }
.lightbox-cap{ color:var(--on-ink); text-align:center; margin-top:1rem; font-size:.85rem; letter-spacing:.1em; }
.lb-btn{
  position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  width:48px; height:48px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:1.2rem;
  transition:.25s var(--ease);
}
.lb-btn:hover{ background:var(--accent); border-color:var(--accent); }
.lb-close{ top:1.25rem; right:1.25rem; }
.lb-prev{ left:1.25rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.25rem; top:50%; transform:translateY(-50%); }

/* ---------- forms ---------- */
.form{ display:grid; gap:1.15rem; }
.field label{
  display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); margin-bottom:.5rem;
}
.field input,.field select,.field textarea{
  width:100%; padding:.9rem 1rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring);
}
.field textarea{ min-height:150px; resize:vertical; }
.field-row{ display:grid; gap:1.15rem; grid-template-columns:1fr; }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:.8rem; color:var(--ink-soft); }
.form-status{ padding:1rem 1.15rem; border-radius:var(--radius); font-size:.9rem; display:none; }
.form-status.ok{ display:block; background:#e8f2ec; border:1px solid #bcd9cb; color:var(--ink); }
.form-status.err{ display:block; background:#fbeaea; border:1px solid #f0c6c6; color:#7d1f1f; }
.field-error{ color:var(--danger); font-size:.78rem; margin-top:.35rem; display:none; }
.field.invalid .field-error{ display:block; }
.field.invalid input,.field.invalid textarea{ border-color:var(--danger); }

/* ---------- info list (hours / contact) ---------- */
.info-list{ list-style:none; margin:0; padding:0; }
.info-list li{
  display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0;
  border-bottom:1px solid var(--line-soft); font-size:.92rem;
}
.info-list li:last-child{ border-bottom:0; }
.info-list dt,.info-list .k{ color:var(--ink); }

.contact-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:2rem; box-shadow:var(--shadow-sm);
}
.contact-card a:not(.btn){ color:var(--accent); text-decoration:none; }
.contact-card a:not(.btn):hover{ text-decoration:underline; }

/* ---------- steps ---------- */
.steps{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); counter-reset:s; }
.step{ position:relative; padding-top:1.5rem; border-top:1px solid var(--line); }
.step-n{
  font-family:var(--font-display); font-size:2.6rem; font-weight:500; color:var(--accent); line-height:1; display:block; margin-bottom:.5rem;
}
.step h3{ font-size:1.1rem; }
.step p{ font-size:.92rem; margin:0; }

/* ---------- testimonial ---------- */
.quote{ max-width:44rem; margin-inline:auto; text-align:center; }
.quote blockquote{
  font-family:var(--font-display); font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1.4; font-weight:500;
  color:var(--ink); margin:0 0 1.25rem; font-style:italic;
}
.section--ink .quote blockquote{ color:#fff; }
.quote cite{ font-style:normal; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }

/* ---------- page header ---------- */
.page-head{ background:var(--surface-2); padding-block:clamp(3rem,8vw,5.5rem); text-align:center; border-bottom:1px solid var(--line-soft); }
.crumbs{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1rem; }
.crumbs a{ text-decoration:none; color:var(--accent); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink); color:var(--on-ink); text-align:center; padding-block:clamp(3.5rem,8vw,6rem); }
.cta-band h2{ color:#fff; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink-deep); color:var(--on-ink-soft); padding-block:clamp(3rem,7vw,4.5rem) 0; font-size:.9rem; }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.site-footer h4{ color:#fff; font-family:var(--font-body); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; margin:0 0 1.1rem; }
.site-footer a{ color:var(--on-ink-soft); text-decoration:none; }
.site-footer a:hover{ color:var(--accent-light); }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer-brand .brand-name{ color:#fff; }
.footer-brand p{ max-width:34ch; margin-top:1rem; }
.socials{ display:flex; gap:.75rem; margin-top:1.25rem; }
.socials a{ width:38px; height:38px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:grid; place-items:center; transition:.25s var(--ease); }
.socials a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.socials svg{ width:16px; height:16px; }
.footer-bottom{
  margin-top:3rem; border-top:1px solid rgba(255,255,255,.1); padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; font-size:.78rem;
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- print ---------- */

/* =========================================================================
   Images inside aspect-ratio boxes
   A percentage height is *indefinite* when the parent's height comes from
   aspect-ratio, so `height:100%` silently falls back to auto and a square
   photo letterboxes inside a 4:5 frame. Pinning the image fixes it.
   ========================================================================= */
.card-media{ position:relative; }
.card-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media print{
  .site-header,.site-footer,.announce,.cta-band{ display:none; }
  body{ background:#fff; }
}

/* =========================================================================
   Price menu and team initials (restyled further down, in the Stillwater block)
   ========================================================================= */
.menu-grid{ display:grid; gap:clamp(2.5rem,5vw,4rem) clamp(2rem,5vw,5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); }
.menu-group{ scroll-margin-top:110px; }
.menu-head{ border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:.25rem; }
.menu-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 .3rem; }
.menu-head p{ font-size:.9rem; margin:0; }
.menu{ list-style:none; margin:0; padding:0; }
.menu li{ padding:1.05rem 0; border-bottom:1px solid var(--line-soft); }
.menu-row{ display:flex; align-items:baseline; gap:.6rem; }
.menu-name{ font-family:var(--font-display); font-size:1.2rem; color:var(--ink); }
.menu-dots{ flex:1; min-width:1rem; border-bottom:1px dotted var(--line); transform:translateY(-.3em); }
.menu-price{ color:var(--accent); font-weight:500; white-space:nowrap; }
.menu-desc{ font-size:.9rem; margin:.3rem 0 0; }
.menu-time{ display:inline-block; margin-right:.6rem; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); font-weight:500; }
.ico--letter{ font-family:var(--font-display); font-size:1.3rem; line-height:1; }

/* =========================================================================
   Off-canvas panels: hide with clip-path, not transform.
   A fixed panel pushed off-screen with translateX still widens the page's
   scrollable area, so phones could swipe sideways into blank space. This
   keeps the panel inside the viewport and wipes it in instead. Closed, it is
   also visibility:hidden, so keyboard focus no longer lands on hidden links.
   ========================================================================= */
@media (max-width:899px){
  .nav-links{ transform:none; clip-path:inset(0 0 0 100%); visibility:hidden;
    transition:clip-path .35s var(--ease), visibility 0s linear .35s; }
  .nav-links.open{ transform:none; clip-path:inset(0 0 0 -80px); visibility:visible;
    transition:clip-path .35s var(--ease), visibility 0s; }
}

/* =========================================================================
   Contrast: text on dark bands uses the light tokens, and button text is
   never overridden by card link colours. (Found by a rendered-text audit.)
   ========================================================================= */
.cta-band .eyebrow,.section--ink .quote cite,.site-footer .brand-tag{ color:var(--accent-light); }
.cta-band .lede,.section--ink .lede{ color:var(--on-ink); }

/* =========================================================================
   Mobile menu height fix.
   backdrop-filter on the sticky header makes the header the containing
   block for position:fixed children, so the slide-out menu was only as tall
   as the header. Below the menu breakpoint the header goes solid instead,
   and the ✕ button stays above the open panel.
   ========================================================================= */
@media (max-width:899px){
  .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper); }
  .burger{ position:relative; z-index:80; }
}

/* Close icon: pin all three lines to the exact centre of the button and move
   them from there, so the open state is a true ✕ whatever the button's layout
   (grid/flex/margins). */
.burger{ position:relative; }
.burger span{ position:absolute; left:50%; top:50%; width:18px; height:1px; margin:0; transform-origin:center; }
.burger span:nth-child(1){ transform:translate(-50%,-6px); }
.burger span:nth-child(2){ transform:translate(-50%,0); }
.burger span:nth-child(3){ transform:translate(-50%,6px); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translate(-50%,0) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translate(-50%,0) rotate(-45deg); }

/* Online booking calendar (contact page, shown when SITE.bookingUrl is set) */
[hidden]{ display:none !important; }
.booking-frame iframe{ display:block; width:100%; height:720px; border:0; border-radius:var(--radius);
  background:#fff; box-shadow:var(--shadow-md); }
@media (max-width:600px){ .booking-frame iframe{ height:960px; } }

/* Online booking: free-time buttons (contact.html) and summary (thank-you.html) */
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(6.25rem,1fr)); gap:.5rem; margin-top:.25rem; }
.field .slot{ position:relative; display:block; margin:0; padding:0; font-size:.9rem; font-weight:500;
  text-transform:none; letter-spacing:0; color:var(--ink); }
.field .slot input{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; }
.slot span{ display:block; padding:.65rem .5rem; text-align:center; border:1px solid var(--line); border-radius:10px;
  background:#fff; transition:border-color .15s, background-color .15s, color .15s; }
.slot input:hover + span{ border-color:var(--accent); }
.slot input:checked + span{ background:var(--accent); border-color:var(--accent); color:#fff; }
.slot input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.slot-note{ font-size:.85rem; color:var(--ink-soft); margin-top:.6rem; }
.slot-note.is-err{ color:var(--danger); }
.field.invalid .slots span{ border-color:var(--danger); }
.booked-card{ margin:2rem auto 0; max-width:32rem; padding:1.5rem 1.75rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); text-align:center; }
.booked-what{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink); }
.booked-when{ font-weight:600; margin-top:.25rem; }
.booked-where{ color:var(--ink-soft); font-size:.9rem; margin-top:.15rem; }
.booked-card .btn-row{ margin-top:1.25rem; justify-content:center; }

/* Deposits: note and policy box (contact.html), payment details (thank-you.html) */
.deposit-note{ font-size:.9rem; color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; padding:.75rem 1rem; }
.field .check{ display:flex; gap:.65rem; align-items:flex-start; margin:0; font-size:.85rem; font-weight:400;
  text-transform:none; letter-spacing:0; line-height:1.5; color:var(--ink-soft); cursor:pointer; }
.field .check input{ width:auto; height:auto; min-height:0; padding:0; margin:.2rem 0 0; flex:none; accent-color:var(--accent); }
.deposit-box{ margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--line); text-align:left; }
.deposit-title{ font-weight:600; margin-bottom:.75rem; }
.deposit-list{ display:grid; gap:.6rem; margin:0; }
.deposit-list > div{ display:grid; grid-template-columns:7.5rem 1fr; gap:.75rem; align-items:baseline; }
.deposit-list dt{ color:var(--ink-soft); font-size:.85rem; }
.deposit-list dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.copy{ margin-left:.5rem; padding:.15rem .6rem; font:inherit; font-size:.75rem; font-weight:500; color:var(--accent);
  background:#fff; border:1px solid var(--line); border-radius:99px; cursor:pointer; }
.deposit-small{ margin-top:1rem; font-size:.8rem; color:var(--ink-soft); }

/* FAQ, privacy and terms pages */
.prose{ max-width:46rem; }
.prose h2{ font-size:clamp(1.35rem,2.4vw,1.7rem); margin:2.5rem 0 1rem; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ color:var(--ink-soft); line-height:1.7; }
.prose p + p{ margin-top:.9rem; }
.prose ul{ padding-left:1.2rem; display:grid; gap:.55rem; margin:.6rem 0 0; }
.prose a{ color:var(--accent); }
.prose-meta{ font-size:.85rem; margin-bottom:1.5rem; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; padding:1.05rem 2rem 1.05rem 0; position:relative;
  font-weight:600; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  font-size:1.35rem; font-weight:300; color:var(--accent); transition:transform .2s; }
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.faq-a{ padding:0 0 1.1rem; }
.footer-legal a{ color:inherit; }

/* Photos in split layouts (home page) */
.split-media img.photo{ width:100%; aspect-ratio:4/5; object-fit:cover; }

/* Manage my booking (manage.html) and its link on thank-you.html */
.narrow{ max-width:40rem; }
.manage-service{ margin:.25rem 0 .35rem; }
.manage-when{ font-weight:600; color:var(--ink); }
.manage-policy{ margin-top:1.1rem; font-size:.9rem; color:var(--ink-soft); }
.manage-card .btn-row{ margin-top:1.4rem; }
.manage-card .form-status{ margin-top:1rem; }
.manage-row{ margin-top:1rem; font-size:.9rem; color:var(--ink-soft); }
.manage-row a{ color:var(--accent); font-weight:600; }

/* "Already booked?" card on the Book page */
.manage-teaser p{ color:var(--ink-soft); font-size:.92rem; }

/* Pay-by-card button in the deposit box (thank-you.html, manage.html) */
.deposit-box .pay-card{ display:inline-block; margin:.25rem 0 .85rem; }
.deposit-or{ font-size:.85rem; color:var(--ink-soft); margin-bottom:.75rem; }

/* Deposit payment choice on the booking form */
.pay-choice{ border:0; padding:0; margin:0; display:grid; gap:.5rem; }
.pay-choice legend{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem; }
.field .pay-option{ display:flex; gap:.7rem; align-items:flex-start; margin:0; padding:.8rem 1rem; border:1px solid var(--line);
  border-radius:12px; background:#fff; cursor:pointer; font-size:.88rem; font-weight:400; text-transform:none; letter-spacing:0;
  line-height:1.45; color:var(--ink-soft); }
.field .pay-option strong{ color:var(--ink); }
.field .pay-option input{ width:auto; height:auto; min-height:0; padding:0; margin:.2rem 0 0; flex:none; accent-color:var(--accent); }
.field .pay-option:has(input:checked), .field .pay-option.is-picked{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); background:#fff; }
.field .pay-option strong{ display:block; font-size:1rem; margin-bottom:.15rem; }
.pay-desc{ display:block; font-size:.85rem; color:var(--ink-soft); line-height:1.4; }
.pay-choice + .pay-choice{ margin-top:1rem; }
.pay-choice legend{ font-size:.78rem; color:var(--ink); }

/* ===== Home page additions (favourites swipe, photo strip, style quiz, calculator, questions + find us) ===== */
.card-book{ color:var(--accent); font-weight:600; }
@media (max-width:760px){
  .cards--swipe{ display:grid; grid-auto-flow:column; grid-auto-columns:78%; grid-template-columns:none; overflow-x:auto;
    scroll-snap-type:x mandatory; gap:1rem; padding-bottom:.6rem; }
  .cards--swipe > .card{ scroll-snap-align:start; }
}
.strip{ display:block; overflow:hidden; margin-top:2.5rem; border-radius:var(--radius);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.strip-track{ display:flex; gap:.75rem; width:max-content; animation:strip-move 100s linear infinite; }
.strip:hover .strip-track, .strip:focus .strip-track{ animation-play-state:paused; }
.strip-track img{ height:190px; width:145px; object-fit:cover; border-radius:12px; display:block; }
@keyframes strip-move{ to{ transform:translateX(-50%); } }

.quiz{ max-width:60rem; margin:0 auto; display:grid; gap:1rem; }
.quiz-q{ display:grid; grid-template-columns:6.5rem 1fr; gap:.75rem; align-items:center; }
.quiz-q > span{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.quiz-opts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.quiz-opts button{ font:inherit; font-size:.9rem; padding:.5rem 1rem; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; cursor:pointer; }
.quiz-opts button:hover{ border-color:var(--accent); }
.quiz-opts button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.quiz-note{ color:var(--ink-soft); font-size:.92rem; }
.quiz-looks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.quiz-look{ position:relative; margin:0; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; background:var(--surface-2); }
.quiz-look img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.quiz-look figcaption{ position:absolute; inset:auto 0 0 0; padding:3rem 1rem 1rem; background:linear-gradient(transparent,rgba(var(--scrim-rgb),.9));
  color:#fff; display:grid; gap:.6rem; font-family:var(--font-display); font-size:1.15rem; line-height:1.2; }
.quiz-look .btn{ justify-self:start; font-family:var(--font-body); }
@media (max-width:760px){ .quiz-q{ grid-template-columns:1fr; gap:.4rem; } .quiz-looks{ grid-template-columns:repeat(2,minmax(0,1fr)); } .quiz-look figcaption{ font-size:1rem; padding:2.5rem .75rem .75rem; } }

.calc-grid{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; grid-template-columns:1fr; }
@media (min-width:900px){ .calc-grid{ grid-template-columns:5fr 7fr; } }
.calc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.25rem,3vw,2rem); display:grid; gap:.9rem; box-shadow:var(--shadow-md); }
.calc-label{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0; }
.calc-card select{ width:100%; font:inherit; padding:.75rem .9rem; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); }
.calc-addons{ display:grid; gap:.45rem; }
.calc-addon{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.6rem .85rem; border:1px solid var(--line); border-radius:12px; font-size:.92rem; }
.calc-addon label{ display:flex; gap:.6rem; align-items:center; cursor:pointer; color:var(--ink); }
.calc-addon input{ accent-color:var(--accent); width:17px; height:17px; flex:none; }
.calc-addon small{ color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-card .calc-addon select{ width:auto; padding:.3rem .5rem; margin-left:.4rem; }
.calc-totals{ display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:.6rem; }
.calc-totals > div{ border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; }
.calc-totals span{ display:block; font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.calc-totals b{ font-family:var(--font-display); font-weight:400; font-size:1.5rem; font-variant-numeric:tabular-nums; color:var(--ink); }
.calc-totals .calc-dep{ background:var(--ink); border-color:var(--ink); }
.calc-totals .calc-dep span{ color:var(--on-ink-soft); }
.calc-totals .calc-dep b{ color:#fff; }
.calc-card > .btn{ justify-self:start; }
@media (max-width:560px){ .calc-totals{ grid-template-columns:1fr 1fr; } .calc-totals .calc-dep{ grid-column:1/-1; } }

.help-grid{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .help-grid{ grid-template-columns:7fr 5fr; } }
.findus-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.25rem,3vw,2rem); display:grid; gap:.8rem; }
.findus-address{ color:var(--ink-soft); }
.findus-card iframe{ width:100%; height:220px; border:0; border-radius:12px; display:block; filter:grayscale(.2); }
.findus-card .btn{ justify-self:start; }

/* Sticky "Book now" bar on phones (added by main.js) */
.sticky-book{ display:none; }
@media (max-width:760px){
  .sticky-book{ position:fixed; left:12px; right:12px; bottom:12px; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.55rem .55rem .55rem 1rem; background:var(--ink); color:#fff; border-radius:16px; box-shadow:0 12px 28px rgba(var(--scrim-rgb),.3); }
  .sticky-book strong{ display:block; font-size:.92rem; }
  .sticky-book small{ display:block; font-size:.75rem; color:var(--on-ink-soft); }
  .sticky-book .btn{ background:#fff; color:var(--ink); padding:.65rem 1.1rem; }
  body.has-sticky-book{ padding-bottom:84px; }
}

/* Booking form: add-ons */
.addons-field{ border:0; padding:0; margin:0; display:grid; gap:.5rem; }
.addons-field legend{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem; }
.addons-field legend span{ text-transform:none; letter-spacing:0; font-weight:400; }
.addon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.5rem; }
.field .addon-opt{ display:flex; gap:.6rem; align-items:center; margin:0; padding:.65rem .85rem; border:1px solid var(--line); border-radius:12px; background:#fff;
  cursor:pointer; font-size:.88rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink); line-height:1.35; }
.field .addon-opt input{ width:auto; height:auto; min-height:0; padding:0; margin:0; flex:none; accent-color:var(--accent); }
.field .addon-opt small{ display:block; color:var(--ink-soft); font-size:.78rem; }
.field .addon-opt:has(input:checked){ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.field .addon-accents{ justify-content:space-between; }
.field .addon-accents select{ width:auto; padding:.35rem .5rem; }
@media (prefers-reduced-motion:reduce){ .strip-track{ animation:none; } }

/* ===== Home top: open-now badge, photo strip band ===== */
.open-badge{ display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1.1rem; padding:.35rem .9rem; border-radius:999px;
  font-size:.8rem; font-weight:600; letter-spacing:.02em; }
.open-badge i{ width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.open-badge.is-open{ background:#e4f3ea; color:#2f7d55; }
.open-badge.is-closed{ background:var(--warn-bg); color:var(--warn-ink); }
.hero .open-badge{ font-size:.8rem; max-width:none; }
.strip-band{ padding-block:clamp(.9rem,2.2vw,1.4rem); background:var(--paper); }
.strip-band .strip{ margin-top:0; border-radius:0; }
@media (max-width:760px){ .strip-track img{ height:150px; width:115px; } }

/* ===== Home top: floating 3D look cards over the looping video ===== */
.hero--3d{ background:
  radial-gradient(60% 70% at 78% 30%, rgba(var(--gold-rgb),.38) 0%, rgba(var(--accent-2-rgb),.16) 35%, transparent 62%),
  radial-gradient(45% 55% at 8% 100%, rgba(var(--accent-rgb),.35) 0%, transparent 60%),
  linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 40%, var(--hero-3) 78%, var(--hero-4) 100%); }
.hero-bg{ position:absolute; inset:0; overflow:hidden; background:url("../img/hero/hero-loop.jpg") center/cover no-repeat; }
.hero-bg:empty{ background:none; }
.hero-video{ width:100%; height:100%; object-fit:cover; opacity:.55; mix-blend-mode:screen; }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(var(--scrim-rgb),.86) 0%, rgba(var(--scrim-rgb),.55) 45%, rgba(var(--scrim-rgb),.25) 100%),
             linear-gradient(180deg, rgba(var(--scrim-rgb),.35), transparent 30%, transparent 70%, rgba(var(--scrim-rgb),.5)); }
.hero-dust{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:2rem; }
.hero--3d .hero-inner{ padding-block:clamp(4rem,12vh,7.5rem); }
.deck{ --w:230px; --u:1; position:relative; align-self:stretch; min-height:520px; perspective:1300px; display:grid; place-items:center; }
.deck-glow{ position:absolute; width:min(500px,95%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(var(--gold-rgb),.38),rgba(var(--gold-rgb),.08) 45%,transparent 68%); filter:blur(12px); }
.deck-sway, .deck-in{ position:relative; display:block; width:1px; height:1px; transform-style:preserve-3d; }
.deck-in{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.card3d{ position:absolute; left:calc(var(--w) / -2); top:calc(var(--w) * -.75); width:var(--w); height:calc(var(--w) * 1.5);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1.4s; }
.card3d .bob{ position:absolute; inset:0; border-radius:18px; overflow:hidden; background:var(--card3d-bg);
  box-shadow:0 40px 70px rgba(10,5,2,.6), 0 0 0 1.5px rgba(var(--gold-rgb),.6), 0 0 28px rgba(var(--gold-rgb),.16);
  animation:card-bob 5s ease-in-out infinite alternate; }
.card3d:nth-child(2) .bob{ animation-delay:-1.1s; } .card3d:nth-child(3) .bob{ animation-delay:-2.2s; }
.card3d:nth-child(4) .bob{ animation-delay:-3.3s; } .card3d:nth-child(5) .bob{ animation-delay:-4.4s; }
.card3d img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .45s ease; }
.card3d .bob::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,244,214,.34) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 68%,rgba(var(--gold-rgb),.22) 100%);
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.35), inset 0 1px 0 rgba(255,244,214,.5); }
.card3d[data-slot="0"]{ transform:translate3d(0,0,calc(170px * var(--u))) rotateY(-14deg) rotateX(6deg) rotateZ(-2deg); }
.card3d[data-slot="1"]{ transform:translate3d(calc(-195px * var(--u)),calc(-45px * var(--u)),calc(-30px * var(--u))) rotateY(24deg) rotateX(4deg) rotateZ(-9deg); filter:brightness(.82); }
.card3d[data-slot="2"]{ transform:translate3d(calc(205px * var(--u)),calc(40px * var(--u)),calc(-10px * var(--u))) rotateY(-30deg) rotateX(4deg) rotateZ(8deg); filter:brightness(.82); }
.card3d[data-slot="3"]{ transform:translate3d(calc(-85px * var(--u)),calc(-115px * var(--u)),calc(-280px * var(--u))) rotateY(10deg) rotateZ(4deg); filter:brightness(.6); }
.card3d[data-slot="4"]{ transform:translate3d(calc(115px * var(--u)),calc(-95px * var(--u)),calc(-400px * var(--u))) rotateY(-6deg) rotateZ(-5deg); filter:brightness(.48); }
@keyframes card-bob{ from{ transform:translateY(-8px); } to{ transform:translateY(10px); } }
@media (hover:none){ .deck-sway{ animation:deck-sway 10s ease-in-out infinite alternate; } }
@keyframes deck-sway{ from{ transform:rotateY(-10deg) rotateX(4deg); } to{ transform:rotateY(10deg) rotateX(-3deg); } }
.hero.is-offscreen .bob, .hero.is-offscreen .deck-sway{ animation-play-state:paused; }
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:0; }
  .deck{ --w:122px; --u:.52; min-height:270px; order:-1; margin-top:1.25rem; }
  .hero--3d .hero-inner{ padding-block:.25rem 3rem; }
}
@media (prefers-reduced-motion:reduce){ .card3d .bob, .deck-sway{ animation:none; } .card3d, .deck-in{ transition:none; } .hero-dust{ display:none; } }

/* ===== e-Transfer discount, package code on the booking form, packages page ===== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pay-save{ display:inline-block; font-style:normal; font-size:.7rem; font-weight:700; letter-spacing:.04em; color:#2f7d55; background:#e4f3ea; border-radius:999px; padding:.05rem .5rem; margin-left:.25rem; }
.package-field{ display:grid; gap:.5rem; }
.package-row{ display:grid; gap:.35rem; max-width:20rem; }
.pk-points{ display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:.75rem; margin-bottom:2rem; }
.pk-points > div{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; display:grid; gap:.2rem; }
.pk-points b{ font-family:var(--font-display); font-weight:400; font-size:1.15rem; color:var(--ink); }
.pk-points span{ color:var(--ink-soft); font-size:.9rem; }
.pk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1rem; }
.pk-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem 1.3rem; display:grid; gap:.35rem; align-content:start; }
.pk-card h3{ font-size:1.2rem; }
.pk-visits{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.pk-price b{ font-family:var(--font-display); font-weight:400; font-size:1.6rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.pk-sub{ color:var(--ink-soft); font-size:.88rem; }
.pk-card .btn{ justify-self:start; margin-top:.5rem; }
.calc-totals .calc-dep small{ display:block; font-size:.75rem; color:var(--on-ink-soft); margin-top:.15rem; }

/* ===== Studio dashboard (admin.html, staff.html) ===== */
.admin-login{ max-width:27rem; margin:0 auto; }
.admin-dash{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; }   /* nothing can make the page wider than the screen */
.admin-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.75rem; }
.admin-bar .btn{ padding:.6rem 1rem; }
.admin-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:.75rem; }
.a-tile{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; display:grid; gap:.15rem; }
.a-tile span{ font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.a-tile b{ font-family:var(--font-display); font-weight:400; font-size:1.7rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.a-tile small{ color:var(--ink-soft); }
.a-tile.is-alert{ border-color:var(--alert-line); background:var(--alert-bg); }
.admin-tabs{ display:flex; gap:.5rem; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.admin-tabs::-webkit-scrollbar{ display:none; }
.admin-tabs button{ font:inherit; background:none; border:0; border-bottom:2px solid transparent; padding:.6rem .9rem; cursor:pointer; color:var(--ink-soft); font-weight:600; flex:0 0 auto; white-space:nowrap; }
@media (max-width: 600px){ .admin-tabs{ gap:.1rem; } .admin-tabs button{ padding:.55rem .6rem; font-size:.9rem; } }
.admin-tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
.admin-filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.admin-filters input, .admin-filters select{ font:inherit; padding:.65rem .85rem; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
.admin-filters input{ flex:1 1 16rem; min-width:0; }
.admin-count{ font-size:.85rem; margin:0; }
.admin-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.admin-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.admin-table th, .admin-table td{ padding:.75rem .9rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.admin-table th{ font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface-2); white-space:nowrap; }
.admin-table tr:last-child td{ border-bottom:0; }
.admin-table td small{ display:block; color:var(--ink-soft); font-size:.8rem; margin-top:.15rem; overflow-wrap:anywhere; }
.admin-table td a{ color:var(--accent); }
.admin-table .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.a-actions{ display:flex; flex-wrap:wrap; gap:.4rem; }
.a-actions button, .a-actions a{ font:inherit; font-size:.78rem; font-weight:600; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; white-space:nowrap; }
.a-actions button.primary{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pill{ display:inline-block; font-size:.72rem; font-weight:700; border-radius:999px; padding:.15rem .6rem; white-space:nowrap; }
.pill--due{ background:var(--warn-bg); color:var(--warn-ink); }
.pill--ok{ background:var(--surface-2); color:var(--accent); }
.pill--done{ background:#e4f3ea; color:#2f7d55; }
.pill--off{ background:var(--line-soft); color:var(--ink-soft); }
.pill--paid{ background:#e2f4e9; color:#1f6b40; }        /* paid in full - green */
.pill--half{ background:#fdeedd; color:#8a4a1f; }        /* half paid - orange */
.pill--unpaid{ background:#fbe4e4; color:#a32222; }      /* pending - red */
@media (max-width:760px){
  .admin-table thead{ display:none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{ display:block; width:100%; }
  .admin-table tr{ border-bottom:1px solid var(--line); padding:.4rem 0; }
  .admin-table tr:last-child{ border-bottom:0; }
  .admin-table td{ border:0; padding:.35rem 1rem; }
  .admin-table td[data-l]::before{ content:attr(data-l); display:block; font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
}

/* Dashboard sign-in by code */
.link-btn{ font:inherit; background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; cursor:pointer; }
.code-input{ font-size:1.6rem !important; letter-spacing:.5em; font-variant-numeric:tabular-nums; text-align:center; max-width:14rem; }
.admin-tip{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem; font-size:.9rem; margin:0; }
.admin-sched{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; }
.admin-sched .field{ margin:0; }
.admin-sched input[type="date"]{ font:inherit; padding:.6rem .8rem; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
.admin-sched .btn{ padding:.65rem 1.1rem; }
.admin-sched-note{ flex-basis:100%; margin:0; font-size:.85rem; }
.admin-sched-text{ flex:1 1 20rem; }
.admin-sched-title{ font-weight:600; margin:0 0 .2rem; color:var(--ink); }
.is-staff [data-admin-only]{ display:none !important; }

/* ===== My account ===== */
.account{ display:grid; gap:1.25rem; }
.points-card{ display:grid; gap:.5rem; }
.points-big{ margin:0; font-family:var(--font-display); font-size:1.4rem; color:var(--ink); }
.points-big b{ font-size:2.6rem; font-weight:400; font-variant-numeric:tabular-nums; margin-right:.2rem; }
.points-bar{ height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.points-bar span{ display:block; height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .6s ease; }
.c-list{ display:grid; margin-top:.5rem; }
.c-item{ display:flex; justify-content:space-between; align-items:center; gap:.75rem 1rem; flex-wrap:wrap; padding:.8rem 0; border-top:1px solid var(--line); }
.c-item:first-child{ border-top:0; }
.c-item small{ display:block; color:var(--ink-soft); font-size:.85rem; margin-top:.1rem; }
.c-item .c-due{ color:var(--warn-ink); }
.c-side{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.c-side .btn{ padding:.5rem .95rem; font-size:.72rem; }
.c-log{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; }
.c-log li{ display:flex; justify-content:space-between; padding:.5rem 0; border-top:1px solid var(--line); font-size:.9rem; }
.c-log li:first-child{ border-top:0; }
.c-log .plus{ color:#2f7d55; } .c-log .minus{ color:var(--warn-ink); }
.account-note{ margin:0 0 1rem; }
.waitlist-btn{ margin-top:.5rem; }

/* dashboard: days off & team points */
.a-team{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items:start; margin-top:.5rem; }
.a-team-card .manage-service{ margin-bottom:.5rem; }
.a-team-card > .muted{ font-size:.9rem; margin-bottom:1rem; }
.a-dayoff{ display:grid; gap:.25rem; }
.t-who{ flex:1 1 220px; }
.t-bar{ height:8px; max-width:280px; margin-top:.55rem; }
.admin-dash [hidden]{ display:none !important; }

/* dashboard sign-in: one short card, big buttons */
.page-head--slim{ padding-block:clamp(1.25rem,4vw,2.25rem); }
.page-head--slim .crumbs{ display:none; }
.admin-login-form{ display:grid; gap:.9rem; }
.admin-login-form .manage-service, .admin-login-form p, .admin-login-form .field{ margin:0; }
.admin-login .code-input{ max-width:none; }
.btn--wide{ width:100%; justify-content:center; text-align:center; }
.admin-login-note{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem; font-size:.9rem; margin:0 0 1rem; }

.c-pending{ margin:0 0 .6rem; padding:.6rem .8rem; border-radius:12px; background:var(--surface-2); font-size:.9rem; }

.pay-summary{ margin:0; padding:.8rem 1rem; border-radius:var(--radius); background:var(--surface-2);
  border:1px solid var(--line); font-size:.95rem; color:var(--ink); }

.field-tip{ margin:.35rem 0 0; font-size:.83rem; color:var(--warn-ink); }
.field-tip .link-btn{ font-weight:700; }

/* "or sign in with Google" under the code form */
.or-line{ display:flex; align-items:center; gap:.7rem; margin:.2rem 0; color:var(--ink-soft); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.or-line::before, .or-line::after{ content:""; flex:1; height:1px; background:var(--line); }
.google-btn{ display:flex; justify-content:center; }
.google-btn:empty{ display:none; }

.social-btns{ display:grid; gap:.55rem; justify-items:center; }
.social-btns:empty{ display:none; }
.btn--fb{ background:#1877f2; border-color:#1877f2; color:#fff; width:280px; max-width:100%; justify-content:center; text-align:center; }
.btn--fb:hover{ background:#0f66d8; border-color:#0f66d8; }

/* dashboard: one client, and checkout at the studio */
.a-profile{ display:grid; gap:var(--gap); }
.a-prof-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.a-prof-head small{ display:block; color:var(--ink-soft); overflow-wrap:anywhere; }
.a-prof-sub{ font-family:var(--font-display); font-weight:400; font-size:1.3rem; margin:0 0 .6rem; }
.a-profile .c-item.is-picked{ background:var(--surface-2); border-radius:12px; padding-inline:.7rem; }
.a-co-rows{ display:grid; gap:.1rem; margin:.4rem 0 1.1rem; max-width:26rem; }
.a-co-row{ display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; border-bottom:1px dashed var(--line); font-variant-numeric:tabular-nums; }
.a-co-form{ display:grid; gap:.9rem; max-width:32rem; }
.a-co-total{ font-size:1.05rem; }
.a-co-total b{ font-size:1.3rem; }

/* booking form: "booked with us before? sign in with Google" */
.book-signin{ display:grid; gap:.55rem; justify-items:start; padding:.8rem 1rem; margin-bottom:.4rem; border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface-2); }
.book-signin p{ margin:0; font-size:.9rem; color:var(--ink); }
.admin-table td[data-l="Status"] small{ color:#1f6b40; font-weight:600; }

/* booking form: "Use one of my packages" */
.my-packages{ display:grid; gap:.35rem; margin-bottom:.6rem; }
.my-packages label{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.my-packages select{ font:inherit; padding:.75rem .9rem; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); max-width:100%; }

/* WhatsApp: "Chat on WhatsApp" */
.btn--wa{ background:#1f8f4e; border-color:#1f8f4e; color:#fff; }
.btn--wa:hover{ background:#187a42; border-color:#187a42; color:#fff; }
.wa-card p{ margin:.35rem 0 .9rem; color:var(--ink-soft); }

/* "Chat on WhatsApp": the small button fixed in the bottom-left corner */
.wa-float{ position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:60; display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .85rem .5rem .6rem; border-radius:999px; background:#1f8f4e; color:#fff; font-weight:700; font-size:.8rem; line-height:1; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.2); }
.wa-float svg{ width:19px; height:19px; flex:none; }
.wa-float:hover{ background:#187a42; color:#fff; }
.wa-float:focus-visible{ outline:3px solid #0b4d28; outline-offset:3px; }
body.has-wa-float{ padding-bottom:68px; }             /* nothing at the bottom of the page hides behind it */
/* The WhatsApp note on the booking, packages and reschedule pages: a small white pill resting on
   the bottom edge of the page header, in the studio's own colours (the green stays on the corner button). */
.wa-banner{ position:relative; z-index:2; display:flex; justify-content:center; padding-inline:16px; margin-top:-1.35rem; }
.wa-note{ display:inline-flex; align-items:center; gap:.7rem; max-width:100%; padding:.45rem 1.1rem .45rem .45rem;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-sm);
  color:var(--ink-soft); text-decoration:none; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.wa-note:hover{ border-color:var(--accent); box-shadow:var(--shadow-md); color:var(--ink-soft); }
.wa-note:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; border-color:var(--accent); }
.wa-note-icon{ width:30px; height:30px; flex:none; border-radius:50%; display:inline-grid; place-items:center; background:var(--surface-2); color:var(--accent); }
.wa-note-icon svg{ width:15px; height:15px; }
.wa-note-text{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .5rem; font-size:.88rem; line-height:1.35; }
.wa-note-q{ font-family:var(--font-display); font-size:1.02rem; color:var(--ink); }
.wa-note-link{ color:var(--accent); font-weight:600; letter-spacing:.01em; border-bottom:1px solid var(--line); }
.wa-note:hover .wa-note-link{ border-color:var(--accent); }
.wa-note-arrow{ display:inline-block; margin-left:.25rem; transition:transform .2s var(--ease); }
.wa-note:hover .wa-note-arrow{ transform:translateX(3px); }
@media (max-width:520px){ .wa-note{ border-radius:18px; padding-right:.9rem; } }
@media (prefers-reduced-motion:reduce){ .wa-note, .wa-note-arrow{ transition:none; } }

/* =========================================================================
   Stillwater: price menu, team, calculator, packages teaser, gallery notes
   (overrides for the blocks above; every earlier class name still works)
   ========================================================================= */
.menu-grid{ gap:clamp(2.5rem,5vw,4rem) clamp(2rem,5vw,5rem); }
.menu-head{ border-bottom:1px solid var(--accent); padding-bottom:1rem; margin-bottom:.35rem; }
.menu-head h2{ font-size:clamp(1.9rem,3.2vw,2.5rem); margin:0 0 .35rem; }
.menu-head p{ font-size:.95rem; margin:0; }
.menu-policy{ display:flex; flex-wrap:wrap; gap:.35rem .5rem; margin:.75rem 0 0; padding:0; list-style:none; }
.menu-policy li{ font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:.25rem .65rem; }
.menu li{ padding:1.1rem 0; }
.menu-name{ font-family:var(--font-display); font-size:1.42rem; font-weight:600; color:var(--ink); line-height:1.15; }
.menu-dots{ border-bottom:1px dotted var(--accent); opacity:.55; }
.menu-price{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.menu-desc{ font-size:.93rem; margin:.35rem 0 0; }
.menu-time{ font-size:.66rem; letter-spacing:.14em; }
.menu-note{ font-size:.85rem; color:var(--ink-soft); margin:1rem 0 0; padding:.75rem 1rem; background:var(--surface-2); border-radius:10px; }
.menu-note b{ color:var(--ink); font-weight:500; }

.ico--letter{ width:60px; height:60px; font-family:var(--font-display); font-size:1.7rem; font-weight:600; line-height:1;
  background:linear-gradient(135deg,var(--letter-1),var(--letter-2)); color:var(--ink-deep); box-shadow:0 0 0 4px var(--surface-2); }
.feature .role{ display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:500; margin:-.35rem 0 .8rem; }

.split-media img.photo--wide{ aspect-ratio:4/3; }

.calc-row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.calc-row > div{ display:grid; gap:.4rem; }
.calc-card select:disabled{ color:var(--ink-soft); opacity:.85; }
.calc-lines{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem; font-size:.88rem; color:var(--ink-soft); }
.calc-lines li{ display:flex; justify-content:space-between; gap:1rem; padding:.2rem 0; border-bottom:1px dashed var(--line); font-variant-numeric:tabular-nums; }
.calc-lines li:last-child{ border-bottom:0; }
.calc-lines b{ font-weight:500; color:var(--ink); }
.calc-lines .is-off b{ color:#2f7d55; }
.calc-note{ font-size:.82rem; color:var(--ink-soft); margin:0; }
.calc-totals b{ font-weight:600; }
.calc-addon small em{ font-style:normal; color:var(--accent); }
@media (max-width:460px){ .calc-row{ grid-template-columns:1fr; } }

.pk-mini{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.75rem; margin-top:2rem; text-align:left; }
.pk-mini a{ display:grid; gap:.15rem; padding:1rem 1.1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:inherit; transition:border-color .25s var(--ease), transform .25s var(--ease); }
.pk-mini a:hover{ border-color:var(--accent); transform:translateY(-2px); }
.pk-mini b{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--ink); }
.pk-mini span{ font-size:.85rem; color:var(--ink-soft); }
.pk-mini .pk-visits{ margin-top:.25rem; }

.masonry figcaption{ font-family:var(--font-body); }
.filter[aria-pressed="true"],.quiz-opts button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--accent-light); }
.open-badge.is-closed{ background:var(--surface-2); color:var(--warn-ink); }
.hero .open-badge.is-open{ background:rgba(228,243,234,.92); }
.hero .open-badge.is-closed{ background:color-mix(in srgb, var(--surface-2) 92%, transparent); }

/* =========================================================================
   Stillwater: finishing touches for the public pages
   ========================================================================= */
/* price menu: every service name books that service */
a.menu-name{ text-decoration:none; transition:color .2s var(--ease); }
a.menu-name:hover, a.menu-name:focus-visible{ color:var(--accent); }
/* home calculator: notes only take space when they say something */
.calc-note:empty, .calc-lines:empty{ display:none; }
/* hero: the empty video is hidden by js/home.js and the poster shows through */
.hero-video[hidden]{ display:none !important; }
.hero--3d .hero-inner h1{ text-wrap:balance; }
.hero--3d .eyebrow{ letter-spacing:.18em; }
/* phones: the cards sit above the words, so darken top to bottom instead of left to right */
@media (max-width:860px){
  .hero-bg::after{ background:linear-gradient(180deg, rgba(var(--scrim-rgb),.35) 0%, rgba(var(--scrim-rgb),.62) 38%, rgba(var(--scrim-rgb),.88) 100%); }
}
/* FAQ topic links under the page head */
.prose h2[id]{ scroll-margin-top:110px; }
/* hero: keep the grid inside the screen (the glow behind the cards must never widen the column) */
.hero-grid > *{ min-width:0; }
.hero--3d h1{ font-size:clamp(2.5rem,4.6vw,4.1rem); }
@media (max-width:860px){ .hero-grid{ grid-template-columns:minmax(0,1fr); } .hero--3d .eyebrow{ letter-spacing:.14em; } }

/* Honest note under every page: the photos are illustrative. */
.footer-bottom .footer-note{ flex-basis:100%; grid-column:1 / -1; width:100%; font-size:.78rem; opacity:.75; }


/* ---------- demo notice: this is not a real business (pre-launch checklist) ---------- */
.demo-banner{
  background:#ffc93c; color:#1a1205;
  text-align:center; padding:.6rem 1rem;
  font-size:.82rem; line-height:1.45;
  border-bottom:2px solid #1a1205;
}
.demo-banner strong{ text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:640px){
  .demo-banner{ font-size:.74rem; padding:.55rem .75rem; }
}