/* =====================================================================
   Alchemist Detailing — website styles
   Layout: a floating glass bar over full-bleed cinematic sections; reading
   content sits in one 1180px column. Black and charcoal carry the page
   (about 75%), warm off-white text about 20%, and the logo's gold is kept
   for the moments that matter (about 5%).
   ===================================================================== */
:root {
  /* Modern black and gold (Oct 5): true black, neutral charcoal, a brighter
     champagne gold with a white highlight, near-white text. No brown tints. */
  --bg: #000000;
  --bg-2: #080808;
  --panel: #0e0e0e;
  --panel-2: #151515;
  --glass: rgba(10, 10, 10, .6);
  --glass-strong: rgba(6, 6, 6, .9);
  --hair: rgba(255, 255, 255, .09);
  --line: rgba(226, 185, 82, .3);
  --line-soft: rgba(226, 185, 82, .13);
  --ink: #f7f7f4;
  --ink-2: #bdbdb8;
  --muted: #85857f;
  --gold: #e2b952;
  --gold-hi: #f8dd98;
  --gold-pale: #fff3cf;
  --gold-deep: #8f6a1c;
  --gold-grad: linear-gradient(105deg, #9a7322 0%, #d9ac3f 22%, #f6dc96 46%, #fffbe8 52%, #efc65c 62%, #c3932c 82%, #9a7322 100%);
  --gold-text: linear-gradient(180deg, #fff6d8 0%, #f6dc96 30%, #e2b952 56%, #b88a27 80%, #f0c966 100%);
  --on-gold: #110c02;
  /* gold as ink (small gold text): the gold itself on black, the deep gold on cream (6:1) */
  --gold-ink: var(--gold);
  --danger: #d46a5a;
  --danger-text: #f0a090;
  --border-strong: rgba(255, 255, 255, .3);   /* inputs and checkboxes */
  --floor: #000;                              /* the studio floor the hero and the wash stand on */
  --font-display: "Jost", "Jost Fallback", system-ui, sans-serif;
  --font-ui: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui-caps: "Manrope", "Manrope Caps Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* tracked capitals: Manrope's are narrower than its lowercase */
  --font-script: "Cormorant Garamond", Georgia, serif;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --col: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  /* spacing scale (8pt) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: clamp(72px, 10vh, 112px);
  --s-7: clamp(104px, 15vh, 184px);
  /* type scale */
  --fs-display: clamp(46px, 10.5vw, 132px);
  --fs-h1: clamp(40px, 6.4vw, 84px);
  --fs-h2: clamp(30px, 4.4vw, 54px);
  --fs-h3: clamp(18px, 1.7vw, 21px);
  --fs-base: 16px;
  --fs-md: 15px;
  --fs-sm: 13.5px;
  --fs-xs: 12px;
  --fs-2xs: 11px;
  color-scheme: dark;
}
/* Metric fallbacks while the web fonts load: Arial sized to Jost's and Manrope's widths and line boxes
   (measured against the fonts on Oct 10: Jost's capitals are 91.5% of Arial's, Manrope's lowercase 102.3%
   and its capitals 90%), so the swap moves next to nothing. The overrides are scaled by size-adjust, hence
   the odd numbers. */
@font-face { font-family: "Jost Fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 91.5%; ascent-override: 117%; descent-override: 41%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 102.3%; ascent-override: 104.2%; descent-override: 29.3%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Caps Fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 90%; ascent-override: 118.4%; descent-override: 33.3%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding keeps a focused or scrolled-to element clear of the floating bar above and the booking's sticky bar below */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: calc(86px + env(safe-area-inset-top, 0px)); scroll-padding-bottom: 110px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
/* a heading (or main) focused by the router for screen-reader context is not a control: no ring around the page title */
h1[tabindex="-1"]:focus-visible, main:focus-visible { outline: none; }
::selection { background: rgba(226, 185, 82, .35); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the skip link: parked above the screen until a keyboard reaches it */
.skip { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 10px 14px; border-radius: 12px; background: var(--bg); color: var(--gold-hi); border: 1px solid var(--gold); font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

.wrap { width: min(100%, var(--col)); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font: 700 var(--fs-xs)/1 var(--font-ui-caps);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.gold-text {
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.script { font: italic 500 clamp(21px, 2.4vw, 28px)/1.3 var(--font-script); color: var(--gold-hi); }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
p .tnum, .bk-note .tnum, .cta-band .tnum { white-space: nowrap; }   /* a phone number in a sentence never breaks across lines */

/* ---------------------------------------------------------------- the gold shine (shared)
   Light moving across polished paint: one pass (about 1.7s), a long pause,
   again. Every gold light on the site shares the 118deg angle and the warm
   core. Instances are desynced with --shine-delay (set by app.js) and paused
   while offscreen (.offscreen). */
.shine { position: relative; overflow: hidden; isolation: isolate; }
.shine::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(118deg, transparent 38%, rgba(226, 185, 82, 0) 42%, rgba(255, 243, 207, .65) 50%, rgba(226, 185, 82, 0) 58%, transparent 62%);
  transform: translateX(-75%);
  animation: shine 8s var(--ease-in-out) infinite;
  animation-delay: var(--shine-delay, 1.2s);
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 1;
}
@keyframes shine {
  0% { transform: translateX(-75%); }
  22%, 100% { transform: translateX(75%); }
}
.offscreen::after, .offscreen span::after { animation-play-state: paused; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--h);
  padding: 0 28px;
  border-radius: 14px;
  border: 1px solid transparent;
  font: 700 var(--fs-sm)/1 var(--font-ui-caps);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
/* the two big moments (hero, closing band) get the larger cut */
.btn-lg { --h: 58px; padding: 0 34px; font-size: 14px; letter-spacing: .2em; border-radius: 16px; }
/* an inline "opens elsewhere" mark for links that leave the site */
.ext { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-left: 6px; flex-shrink: 0; }
.btn .ext { width: 14px; height: 14px; margin-left: 0; }
.btn-gold {
  background: var(--gold-grad);
  background-size: 220% 100%;
  background-position: 30% 0;
  color: var(--on-gold);
  box-shadow: 0 10px 30px -12px rgba(226, 185, 82, .55), inset 0 1px 0 rgba(255, 248, 225, .6), inset 0 -1px 0 rgba(90, 55, 10, .5);
}
.btn-gold:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 18px 40px -14px rgba(226, 185, 82, .75), 0 0 0 1px rgba(248, 221, 152, .35), inset 0 1px 0 rgba(255, 248, 225, .7);
  background-position: 70% 0;
}
.btn-gold:active { transform: translateY(0) scale(.98); }
.btn-glass {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
  color: var(--ink);
}
.btn-glass:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-hi); transform: translateY(-2px); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
/* disabled: dimmed, flat, no light. A disabled gold button drops to the panel grey, so it never reads as the
   thing to press (after the hovers, so a hover over it changes nothing) */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
.btn:disabled::after, .btn[aria-disabled="true"]::after { display: none; }
.btn-gold:disabled, .btn-gold[aria-disabled="true"] { background: var(--panel-2); color: var(--muted); border-color: var(--hair); }
.btn-glass:disabled, .btn-glass[aria-disabled="true"] { border-color: var(--hair); color: var(--muted); }

/* ---------------------------------------------------------------- floating glass bar */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 0 calc(12px + env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.bar {
  pointer-events: auto;
  width: min(100%, var(--col));
  margin-inline: auto;
  height: 62px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 9px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22, 22, 22, .66), rgba(6, 6, 6, .6));
  border: 1px solid var(--hair);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 243, 207, .07);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.topbar.scrolled .bar { background: linear-gradient(180deg, rgba(16, 16, 16, .86), rgba(4, 4, 4, .86)); border-color: rgba(226, 185, 82, .14); }
/* over the wash the bar drops its backdrop blur (the foam under it is a live canvas) and goes nearly solid instead */
.topbar.over-wash .bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, rgba(16, 16, 16, .9), rgba(4, 4, 4, .88)); }
.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, #1c1c1c, #070707);
  box-shadow: inset 0 1px 0 rgba(255, 243, 207, .18), inset 0 -2px 6px rgba(0, 0, 0, .6), 0 4px 14px -6px rgba(0, 0, 0, .8);
  color: var(--gold);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.icon-btn:hover { color: var(--gold-hi); }
.icon-btn:hover:not(:active):not(.pressed) { transform: translateY(-1px); }
.icon-btn:active, .icon-btn.pressed {
  transform: translateY(1px) scale(.94);
  transition-duration: .09s;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(226, 185, 82, .35), 0 0 22px -4px rgba(226, 185, 82, .55);
}
.icon-btn .ring {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid var(--gold-hi);
  opacity: 0;
  pointer-events: none;
}
.icon-btn.ringing .ring { animation: ring .6s var(--ease) forwards; }
@keyframes ring {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}
.page-name {
  display: grid;
  font: 600 14px/1 var(--font-display);
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: var(--ink);
  min-width: 8ch;
  text-align: center;
  position: relative;
  height: 1.2em;
  overflow: hidden;
}
.page-name span { grid-area: 1 / 1; display: block; line-height: 1.2em; transition: transform .45s var(--ease), opacity .45s var(--ease); }
.page-name span.out { transform: translateY(-110%); opacity: 0; }
.page-name span.in-start { transform: translateY(110%); opacity: 0; }
.bar-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.bar-left { justify-self: start; }
.brand-link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid transparent; transition: box-shadow .35s var(--ease); }
.brand-link:hover { box-shadow: 0 0 18px -6px rgba(226, 185, 82, .6); }
.brand-link svg { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(226, 185, 82, .25)); }
/* without JavaScript, a note under the bar (the <noscript> block after the header): what still works, and the number to call */
.nojs-note { position: sticky; top: calc(86px + env(safe-area-inset-top, 0px)); z-index: 59; width: min(100% - 24px, var(--col)); margin: 0 auto; padding: 12px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink-2); font-size: var(--fs-md); text-align: center; text-wrap: balance; }
.nojs-note b { color: var(--gold-hi); font-weight: 700; }
.nojs-note a { color: var(--ink); white-space: nowrap; }

/* ---------------------------------------------------------------- side menu (smoked glass) */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.scrim.on { opacity: 1; pointer-events: auto; }
.menu {
  position: fixed;
  z-index: 80;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(92vw, max(34vw, 420px));
  display: flex;
  flex-direction: column;
  padding: calc(22px + env(safe-area-inset-top, 0px)) clamp(22px, 3vw, 40px) calc(24px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(226, 185, 82, .10), transparent 60%),
    linear-gradient(180deg, rgba(14, 14, 14, .92), rgba(4, 4, 4, .95));
  border-right: 1px solid var(--line-soft);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: 30px 0 80px -30px rgba(0, 0, 0, .9);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  transform: translateX(-104%);
  transition: transform .6s var(--ease), visibility 0s linear .6s;
  overflow-y: auto;
  visibility: hidden;
}
.menu.on { transform: none; visibility: visible; transition: transform .6s var(--ease), visibility 0s; }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(18px, 4vh, 40px); }
.menu-brand { display: flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; }
.menu-brand svg { width: 42px; height: 42px; }
.menu-brand b { display: block; font: 600 17px/1.05 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.menu-brand small { display: block; font: 600 10px/1 var(--font-ui); letter-spacing: .5em; text-transform: uppercase; color: var(--gold-ink); margin-top: 6px; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  --i: 0;
  position: relative;
  display: flex;
  align-items: center;
  padding: 11px 0 11px 40px;
  font: 600 clamp(19px, 2.3vh, 23px)/1.1 var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  touch-action: manipulation;
  opacity: 0;
  transform: translateX(-14px);
  transition: color .3s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.menu.on nav a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 28ms + 140ms), calc(var(--i) * 28ms + 140ms), calc(var(--i) * 28ms + 140ms); }
/* the gold line: scaled in from the left (never a width animation); the current page's is longer and lit */
.menu nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--gold-grad);
  opacity: .7;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.menu nav a:hover, .menu nav a[aria-current="page"] { color: var(--gold-hi); }
.menu nav a:hover::before { transform: scaleX(1); }
.menu nav a[aria-current="page"]::before { width: 34px; opacity: 1; transform: scaleX(1); box-shadow: 0 0 10px rgba(226, 185, 82, .6); }
.menu nav a.sep { margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, .06); }
.menu-foot { margin-top: auto; padding-top: 26px; display: grid; gap: 14px; }
.menu-foot .btn { width: 100%; }
.menu-foot .call { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink-2); text-decoration: none; font: 600 14px/1 var(--font-ui); letter-spacing: .06em; }
.menu-foot .call:hover { color: var(--gold-hi); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(80% 60% at 50% 45%, #121212, #000 70%);
}
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 46% at 50% 50%, rgba(3, 3, 3, .72), rgba(3, 3, 3, .2) 70%, transparent),
    linear-gradient(180deg, rgba(5, 5, 5, .55) 0%, transparent 22%, transparent 70%, var(--bg) 100%);
}
.hero-inner {
  text-align: center;
  padding: calc(110px + env(safe-area-inset-top, 0px)) var(--gutter) 120px;
  display: grid;
  justify-items: center;
  gap: 0;
}
.hero-mark { width: clamp(62px, 8vw, 92px); margin-bottom: clamp(18px, 3vh, 30px); filter: drop-shadow(0 10px 30px rgba(226, 185, 82, .25)); }
.hero h1 { margin: 0; display: grid; justify-items: center; }
.hero h1 .l1 {
  font: 400 var(--fs-display)/.92 var(--font-display);
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
}
.hero h1 .l2 {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  margin-top: clamp(10px, 1.6vh, 18px);
  font: 500 clamp(13px, 1.9vw, 22px)/1 var(--font-display);
  letter-spacing: .62em;
  text-indent: .62em;
  text-transform: uppercase;
  color: var(--gold-hi);
}
.hero h1 .l2::before, .hero h1 .l2::after {
  content: "";
  width: clamp(28px, 7vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero h1 .l2::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hero .sub {
  margin: clamp(22px, 3.4vh, 34px) 0 0;
  font: 500 clamp(15px, 1.6vw, 19px)/1.5 var(--font-ui-caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero .sub i { font-style: normal; color: var(--gold); }
.hero .actions { margin-top: clamp(28px, 4.5vh, 44px); display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero .place {
  margin-top: 26px;
  font: 600 12.5px/1.5 var(--font-ui-caps);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero [data-in] { opacity: 0; transform: translateY(14px); filter: blur(4px); animation: heroIn 1.1s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1ms + 250ms); }
.hero h1[data-in] { filter: none; animation-name: heroInFlat; }   /* the letters carry their own blur: never two */
@keyframes heroIn { to { opacity: 1; transform: none; filter: none; } }
@keyframes heroInFlat { to { opacity: 1; transform: none; } }
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  font: 700 var(--fs-2xs)/1 var(--font-ui-caps);
  letter-spacing: .4em;
  text-indent: .4em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.scroll-cue span { width: 1px; height: 46px; background: linear-gradient(180deg, transparent, var(--gold)); position: relative; overflow: hidden; }
.scroll-cue span::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; background: var(--gold-hi); animation: drip 2.4s var(--ease-in-out) infinite; }
@keyframes drip { 0% { transform: translateY(-110%); } 70%, 100% { transform: translateY(260%); } }

/* ---------------------------------------------------------------- sections */
section { position: relative; }
.section { padding-block: var(--s-7); }
.section-head { display: grid; gap: var(--s-2); justify-items: center; text-align: center; margin-bottom: var(--s-5); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p:not(.eyebrow) { margin: 0; max-width: 58ch; color: var(--ink-2); font-size: var(--fs-md); }
.section-head p.eyebrow { margin: 0; }
/* a hairline that draws itself (scaled, never a width animation) */
.rule { width: min(320px, 60vw); height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: scaleX(0); transition: transform 1.2s var(--ease); }
.rule.in { transform: scaleX(1); }

/* the Alchemist Standard */
.standard { text-align: center; overflow: hidden; }
.standard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 38%, rgba(226, 185, 82, .07), transparent 70%);
  pointer-events: none;
}
.emblem { position: relative; width: 132px; height: 132px; margin: 0 auto 30px; display: grid; place-items: center; }
.emblem svg.circle { position: absolute; inset: 0; width: 100%; height: 100%; }
.emblem svg.circle circle { fill: none; stroke: url(#ringGrad); stroke-width: 1.2; stroke-dasharray: 402; stroke-dashoffset: 402; transition: stroke-dashoffset 2s var(--ease); }
.emblem.in svg.circle circle { stroke-dashoffset: 0; }
.emblem img { width: 62px; position: relative; filter: drop-shadow(0 6px 18px rgba(226, 185, 82, .25)); }
.standard .statement {
  margin: 24px auto 0;
  max-width: 24ch;
  font: 400 clamp(25px, 3.3vw, 40px)/1.25 var(--font-ui);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.standard .statement em { font-style: normal; color: var(--gold-hi); }
.standard .script { margin: 26px 0 0; }
.standard h2.eyebrow { margin: 0; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin-top: 46px; color: var(--ink-2); font: 600 var(--fs-xs)/1.4 var(--font-ui-caps); letter-spacing: .22em; text-transform: uppercase; }
.facts span { display: inline-flex; align-items: center; gap: 12px; }
.facts span::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); }

/* ---------------------------------------------------------------- the wash (scroll-driven, plays once) */
/* --wash-h is the section's height: the stage's screen plus the pinned length (the owner's "4 scrolls"). The pin lets
   go at its end, which is --wash-release of the wash's timeline: the rinse has cleared the screen there (foam.js reads
   it), and the film and the drops left then dry while the stage scrolls away, so no scrolling goes by with nothing
   moving. Once the wash has given its pinned length back (foam.js, .wash-folded), the section is one stage tall */
.wash {
  --wash-release: .85;
  height: var(--wash-h, 430vh);
}
.wash.wash-folded, .wash.washed { height: auto; }
.wash-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  background:
    radial-gradient(70% 55% at 50% 42%, #121212 0%, #050505 62%, #000 100%);
}
.wash-stage::before {   /* the frame: the stage fades into the page above and below, so there is never a hard edge */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 80%, var(--bg) 100%);
}
.wash-stage::after {   /* fine grain so the black never looks flat */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  pointer-events: none;
}
.wash-title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  text-align: center;
  padding: 0 var(--gutter);
  opacity: calc(1 - var(--title-out, 0));
  transform: scale(calc(1 + var(--title-out, 0) * .04));
}
.wash-title p { margin: 0; color: var(--ink-2); font: 600 12px/1.6 var(--font-ui-caps); letter-spacing: .34em; text-transform: uppercase; }
.wash-title p.eyebrow { color: var(--gold-ink); }
.wash-title p.big { font: 600 clamp(52px, 12vw, 168px)/1 var(--font-display); letter-spacing: .1em; text-indent: .1em; color: transparent; }
.wash-hint {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font: 700 var(--fs-2xs)/1 var(--font-ui);
  letter-spacing: .38em;
  text-indent: .38em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: calc(1 - var(--title-out, 0) * 3);
  white-space: nowrap;
}
.wash.washed .wash-stage { position: relative; }
.foam-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.cannon {
  position: absolute;
  z-index: 5;   /* in front of the foam it sprays */
  left: 0;
  bottom: -2vh;
  width: clamp(250px, 36vw, 560px);
  transform-origin: 50% 55%;
  transform: translateX(-150%) rotate(-58deg);
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
.cannon img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }   /* one tight shadow */
.cannon i { position: absolute; width: 1px; height: 1px; }

.wash-services {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  padding: calc(92px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.revealed .wash-services { pointer-events: auto; }
.wash-services .wrap { padding: 0; transform-origin: 50% 50%; }
.wash-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: calc(.5 + var(--clean, 0) * .3); }
.revealed .wash-bg { filter: blur(1.5px); }   /* once the cards are up, the backdrop steps back */
.wash-stage .floor { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; }   /* the light studio's warm-grey backdrop (see the light block) */
.wash-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .38) 34%, rgba(5, 5, 5, .5) 70%, var(--bg) 100%),
    radial-gradient(70% 60% at 50% 45%, transparent, rgba(5, 5, 5, .5));
  opacity: calc(1 - var(--clean, 0) * .1);
}
.svc-head[data-enter] { opacity: var(--r, 1); transform: translateY(calc((1 - var(--r, 1)) * 24px)); }
.svc-head { display: flex; align-items: end; align-items: last baseline; justify-content: space-between; gap: 20px; margin-bottom: clamp(16px, 3vh, 30px); }
.svc-head h2 { font-size: var(--fs-h2); }
.svc-head p { margin: 0; color: var(--ink-2); max-width: 40ch; font-size: var(--fs-md); }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.svc-card {
  --r: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(360px, 56vh, 520px);
  padding: clamp(16px, 1.8vw, 24px);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* the picture rests under a satin veil (dim, a little desaturated) and is lit on hover, on focus or, under a finger, when the card is centred (.lit from app.js) */
.svc-card .art, .svc-card .photo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; transform: scale(1.03); filter: brightness(.62) saturate(.85); transition: transform 1.6s var(--ease), filter .9s var(--ease); }
.svc-card .art { background: radial-gradient(90% 70% at 30% 20%, #1e1e1e, #080808); }
.svc-card .photo { object-fit: cover; }
.no-webgl .svc-card .art, .no-js .svc-card .art { background: repeating-linear-gradient(45deg, transparent 0 26px, rgba(226, 185, 82, .14) 26px 27px), repeating-linear-gradient(-45deg, transparent 0 26px, rgba(226, 185, 82, .14) 26px 27px), radial-gradient(90% 70% at 30% 20%, #1e1e1e, #080808); }   /* quilted leather, without WebGL */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 5, 5, .05) 0%, rgba(5, 5, 5, .25) 40%, rgba(5, 5, 5, .9) 78%, #050505 100%);
}
.svc-card .icon { position: absolute; top: clamp(16px, 1.8vw, 24px); left: clamp(16px, 1.8vw, 24px); width: 34px; height: 34px; color: var(--gold); opacity: .9; }
.svc-card .kind { font: 600 clamp(19px, 1.9vw, 24px)/1.1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.svc-card .from { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; color: var(--muted); font: 600 11px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.svc-card .price { font: 600 clamp(24px, 2.4vw, 32px)/1 var(--font-ui); letter-spacing: -.01em; color: var(--gold); transition: color .45s var(--ease), text-shadow .45s var(--ease); }
.svc-card .desc { margin: 12px 0 0; min-height: 4.5em; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.svc-card .go { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.svc-card .go .arrow { transition: transform .45s var(--ease); color: var(--gold); }
/* lit: the veil lifts, the price brightens and a rim of gold light runs along the edge from the top-left corner */
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--gold-hi) 0%, rgba(226, 185, 82, .35) 35%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.svc-card:hover, .svc-card:focus-visible, .svc-card.lit { border-color: rgba(226, 185, 82, .35); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95), 0 0 40px -12px rgba(226, 185, 82, .3); }
.svc-card:hover::after, .svc-card:focus-visible::after, .svc-card.lit::after { opacity: 1; transition-duration: .6s; }
.svc-card:hover .photo, .svc-card:focus-visible .photo, .svc-card.lit .photo { transform: scale(1.08); filter: brightness(1) saturate(1); }
.svc-card:hover .art, .svc-card:focus-visible .art, .svc-card.lit .art { transform: scale(1.08); filter: brightness(1) contrast(1.06); }
.svc-card:hover .price, .svc-card:focus-visible .price, .svc-card.lit .price { color: var(--gold-hi); text-shadow: 0 0 18px rgba(248, 221, 152, .35); }
.svc-card:hover .go .arrow, .svc-card:focus-visible .go .arrow, .svc-card.lit .go .arrow { transform: translateX(5px); }
/* entrance, scrubbed by the rinse (--r goes 0 -> 1) */
.svc-card[data-enter="up"] { transform: translateY(calc((1 - var(--r)) * 70px)); opacity: var(--r); }
.svc-card[data-enter="side"] { transform: translateX(calc((1 - var(--r)) * 60px)); opacity: var(--r); }
.svc-card[data-enter="grow"] { transform: scale(calc(.9 + var(--r) * .1)); opacity: var(--r); }
.svc-card[data-enter="fade"] { opacity: var(--r); transform: scale(calc(.96 + var(--r) * .04)); }
.svc-note { margin-top: 14px; color: var(--ink-2); font-size: 13px; text-align: center; text-shadow: 0 1px 14px rgba(0, 0, 0, .9); }
.svc-note[data-enter] { opacity: var(--r, 1); }
/* until the wash has run, the services stay hidden under the title (foam.js writes --r per frame once it draws and 1 when
   the pin lets go; .washed comes once the section has given its pinned length back and the stage is off the screen; the
   reduced-motion, no-WebGL, no-JS, print and .static rules force 1 !important) */
.wash:not(.washed) :is(.svc-card, .svc-head, .svc-note) { --r: 0; }
/* the scrubbed elements are promoted only while the wash runs */
.wash:not(.washed) :is(.wash-title, .svc-card, .svc-head, .svc-note) { will-change: transform, opacity; }
/* the wash could not start once the visitor was in it: the services show in the stage until the section lets go */
.wash.static :is(.wash-title, .wash-hint, .foam-gl, .cannon) { display: none; }
.wash.static .wash-services { pointer-events: auto; }
.wash.static :is(.svc-card, .svc-head, .svc-note) { --r: 1 !important; }

/* ---------------------------------------------------------------- why Alchemist */
/* Why and How share one quiet backdrop: a faint gold glow at the top, a centred hairline at the foot */
.why, .how { isolation: isolate; }
.why::before, .how::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 45% at 50% 0%, rgba(226, 185, 82, .05), transparent 70%); pointer-events: none; }
.why::after, .how::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(320px, 60vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line), transparent); pointer-events: none; }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.why-item {
  padding: 26px 22px 24px;
  border-radius: var(--r-md);
  background: radial-gradient(120% 60% at 0% 0%, rgba(226, 185, 82, .06), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .35s var(--ease), border-color .4s var(--ease);
}
.why-item:hover { border-color: var(--line); transform: translateY(-2px); }
.why-item svg { width: 36px; height: 36px; color: var(--gold); }
.why-item h3 { margin: 18px 0 8px; font: 700 var(--fs-sm)/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.why-item h3::before { content: ""; display: block; width: 24px; height: 1px; background: var(--gold); margin: 0 0 14px; }
.why-item p { margin: 0; color: var(--ink-2); font-size: var(--fs-md); }

/* ---------------------------------------------------------------- how booking works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
/* the connector draws itself left to right once the list is in view, and the numbers light up one after another */
.steps::before { content: ""; position: absolute; top: 23px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--line), var(--line), transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease) .25s; }
.steps.in::before { transform: scaleX(1); }
.step { text-align: center; padding: 0 14px; position: relative; }
.step:nth-child(2) { --k: 1; } .step:nth-child(3) { --k: 2; } .step:nth-child(4) { --k: 3; }
.step .n {
  width: 46px; height: 46px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: 50%; background: #0b0a09; border: 1px solid var(--hair);
  font: 600 14px/1 var(--font-display); letter-spacing: .08em; color: var(--ink-2);
  box-shadow: 0 0 0 6px var(--bg);
  transition: border-color .5s var(--ease), color .5s var(--ease);
}
.steps.in .step .n { border-color: var(--line); color: var(--gold-hi); transition-delay: calc(var(--k, 0) * 220ms + .3s); }
.step h3 { margin: 0 0 6px; font: 700 var(--fs-sm)/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.step p { margin: 0 auto; color: var(--ink-2); font-size: var(--fs-md); max-width: 26ch; }

/* ---------------------------------------------------------------- closing call to action */
.cta-band {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--col));
  margin-inline: auto;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(56px, 9vw, 110px) var(--gutter);
  text-align: center;
  border: 1px solid var(--line-soft);
  background: radial-gradient(70% 90% at 50% 0%, rgba(226, 185, 82, .14), transparent 60%), linear-gradient(180deg, #0d0d0d, #030303);
}
.cta-band h2 { font-size: clamp(34px, 5vw, 62px); }
.cta-band p { margin: 18px auto 0; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.cta-band .actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
/* a faint texture of beads behind the band (painted by app.js) and one pass of light when the band arrives */
.bead-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .22; pointer-events: none; }
.cta-band::after { content: ""; position: absolute; inset: -20% -40%; z-index: -1; background: linear-gradient(118deg, transparent 38%, rgba(226, 185, 82, .04) 44%, rgba(255, 243, 207, .12) 50%, rgba(226, 185, 82, .04) 56%, transparent 62%); transform: translateX(-60%); transition: transform 2.4s var(--ease-in-out); pointer-events: none; }
.cta-band.in::after { transform: translateX(40%); }

/* ---------------------------------------------------------------- footer */
.footer { position: relative; padding: 70px 0 calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--ink-2); border-top: 1px solid var(--hair); }
.footer::before { content: ""; position: absolute; left: 50%; top: -1px; width: min(320px, 60vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line), transparent); pointer-events: none; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
/* the brand lockup matches the menu's: monogram beside the wordmark (the footer's block-link rule must not win here) */
.footer a.foot-brand { display: flex; align-items: center; gap: 14px; margin: 0; font-size: inherit; }
.foot-brand svg { width: 46px; height: 46px; flex-shrink: 0; }
.foot-brand b { display: block; font: 600 18px/1.05 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.foot-brand small { display: block; font: 600 10px/1 var(--font-ui); letter-spacing: .5em; text-transform: uppercase; color: var(--gold-ink); margin-top: 6px; }
.footer .foot-script { margin: 14px 0 0; font-size: clamp(18px, 1.5vw, 21px); color: var(--gold-ink); }
.footer h2 { margin: 0 0 12px; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-ink); }
.footer p, .footer a { margin: 0 0 6px; font-size: var(--fs-md); text-decoration: none; display: block; }
.footer a:hover { color: var(--gold-hi); }
.fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------------------------------------------------------------- other pages (until they're built) */
.page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(120px + env(safe-area-inset-top, 0px)) var(--gutter) 80px; background: radial-gradient(60% 50% at 50% 30%, rgba(226, 185, 82, .07), transparent 70%); }
.page .card {
  width: min(100%, 640px);
  padding: clamp(34px, 6vw, 60px) clamp(22px, 5vw, 56px);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .07);
}
.page h1 { font-size: var(--fs-h1); font-weight: 300; letter-spacing: .1em; text-indent: .1em; }   /* the brand pages' title (see .page-head) */
.page .rule { display: block; margin: 4px auto 0; }
.page p { color: var(--ink-2); margin: 18px auto 0; max-width: 44ch; }
.page .actions { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* the 404 page (site/404.html): the emblem with the monogram symbol inside the ring, and one quiet line at the foot */
.page .emblem { margin-bottom: 26px; }
.nf-mark { position: relative; width: 56px; height: 58px; filter: drop-shadow(0 6px 18px rgba(226, 185, 82, .25)); }
.page .foot-line { margin-top: 34px; font: 600 var(--fs-xs)/1.7 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-wrap: balance; }
.page .foot-line a { color: var(--ink-2); text-decoration: none; }
.booking-steps { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 28px 0 0; font: 600 12px/1 var(--font-display); color: var(--muted); }
.booking-steps span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); }
.booking-steps span:first-child { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 14px -2px rgba(226, 185, 82, .6); }
.booking-steps i { width: 14px; height: 1px; background: rgba(255, 255, 255, .12); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- page transition (gold light across the screen)
   One pass, then app.js drops .run on animationend so the light rests hidden again. The travel (--vx) is
   wider on a phone, where the 190%-wide gradient would otherwise still cover a corner at the end of its run. */
.veil { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.veil::before {
  --vx: 62%;
  content: "";
  position: absolute;
  inset: -10% -45%;
  background: linear-gradient(118deg, transparent 35%, rgba(226, 185, 82, 0) 40%, rgba(248, 221, 152, .55) 49%, rgba(255, 243, 207, .8) 50%, rgba(248, 221, 152, .55) 51%, rgba(226, 185, 82, 0) 60%, transparent 65%);
  transform: translateX(calc(-1 * var(--vx)));
  opacity: 0;
}
@media (max-width: 720px) { .veil::before { --vx: 115%; } }
.veil.run::before { animation: veil .9s cubic-bezier(.55, 0, .35, 1) forwards; }
@keyframes veil { 0% { transform: translateX(calc(-1 * var(--vx))); opacity: 1; } 100% { transform: translateX(var(--vx)); opacity: 1; } }

/* ---------------------------------------------------------------- views (one page at a time) */
.view.enter { animation: viewIn .45s var(--ease) backwards; }   /* app.js drops .enter when it ends */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.btn.launch { transform: scale(1.06); filter: brightness(1.15); box-shadow: 0 0 0 1px rgba(248, 221, 152, .5), 0 0 60px -6px rgba(226, 185, 82, .8); }
.menu-close svg { width: 18px; height: 18px; }
.no-webgl .hero, .no-hero-gl .hero { background: radial-gradient(70% 55% at 50% 42%, #1a1a1a 0%, #070707 60%, #000 100%); }
.no-webgl .hero::after, .no-hero-gl .hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: linear-gradient(118deg, transparent 44%, rgba(226, 185, 82, .0) 46%, rgba(246, 190, 90, .5) 50%, rgba(226, 185, 82, 0) 54%, transparent 56%);
  pointer-events: none;
}

/* ---------------------------------------------------------------- services page */
/* the brand pages share one head: centred eyebrow, gold title, one lead sentence, a drawn rule */
.page-head { display: grid; gap: 14px; justify-items: center; text-align: center; }
.page-head h1 { font-size: var(--fs-h1); font-weight: 300; letter-spacing: .1em; text-indent: .1em; }
.page-head p:not(.eyebrow) { margin: 0; max-width: 52ch; color: var(--ink-2); }
.page-head p.eyebrow { margin: 0; }
/* the cinematic header: the carbon-vent photo under the title, one pass of gold light when it arrives,
   the photo settling from a slight zoom, and the bottom fading into the page */
.svc-top {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(420px, 62svh, 640px);
  display: grid;
  align-content: end;
  padding: calc(150px + env(safe-area-inset-top, 0px)) 0 clamp(54px, 8vh, 84px);
  text-align: center;
  background: var(--panel);
}
.top-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; z-index: -2; filter: brightness(.55) saturate(.9); transform: scale(1.06); transition: transform 2.2s var(--ease); }
.svc-top.in .top-photo { transform: scale(1); animation: topLit 1.8s var(--ease-in-out) .6s 1; }   /* the photo lights up under the pass */
@keyframes topLit { 0% { filter: brightness(.55) saturate(.9); } 50% { filter: brightness(.85) saturate(1); } 100% { filter: brightness(.55) saturate(.9); } }
/* one pass of gold light over the photo (screen-blended, so it reads on the dark picture), the same 118deg light as everywhere */
.svc-top::before { content: ""; position: absolute; inset: -20% -40%; z-index: -1; background: linear-gradient(118deg, transparent 40%, rgba(226, 185, 82, .18) 47%, rgba(255, 243, 207, .5) 50%, rgba(226, 185, 82, .18) 53%, transparent 60%); transform: translateX(-75%); mix-blend-mode: screen; pointer-events: none; }
.svc-top.in::before { animation: sweep 1.8s var(--ease-in-out) .6s 1 forwards; }
@keyframes sweep { from { transform: translateX(-75%); } to { transform: translateX(75%); } }
.svc-top::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, .6) 72%, var(--bg) 100%); pointer-events: none; }
.svc-top .page-head p { text-shadow: 0 1px 18px rgba(0, 0, 0, .6); }
.svc-jump { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.svc-jump a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .03);
  color: var(--ink-2);
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  touch-action: manipulation;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.svc-jump a:hover { border-color: var(--gold); color: var(--gold-hi); }
.svc-group { padding-block: clamp(40px, 7vh, 72px); scroll-margin-top: 4px; }   /* html's scroll-padding already clears the bar */
.svc-group + .svc-group { border-top: 1px solid rgba(255, 255, 255, .05); }
/* each group opens on a photo plate with its title inside (bottom left, over the card scrim); the picture
   drifts a little with the page (--py from app.js) and keeps dark tokens in both themes */
.group-head { display: grid; }
.group-plate { grid-column: 1 / -1; position: relative; margin: 0 0 26px; aspect-ratio: 21 / 8; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; background: var(--panel); border: 1px solid var(--hair); }
.group-plate > img, .group-plate > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: -2; filter: brightness(.7); transform: translateY(var(--py, 0px)) scale(1.08); will-change: transform; }
.group-plate > canvas { background: radial-gradient(90% 70% at 30% 20%, #1e1e1e, #080808); }
.no-webgl .group-plate > canvas, .no-js .group-plate > canvas { background: repeating-linear-gradient(45deg, transparent 0 26px, rgba(226, 185, 82, .14) 26px 27px), repeating-linear-gradient(-45deg, transparent 0 26px, rgba(226, 185, 82, .14) 26px 27px), radial-gradient(90% 70% at 30% 20%, #1e1e1e, #080808); }
.group-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 5, 5, .05) 0%, rgba(5, 5, 5, .25) 40%, rgba(5, 5, 5, .9) 78%, #050808 100%); }
.group-plate figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 18px; padding: clamp(18px, 3vw, 32px); color: #f7f7f4; }
.group-plate svg { grid-row: span 2; width: 40px; height: 40px; color: #e2b952; }
.group-plate h2 { font-size: clamp(26px, 3.4vw, 40px); color: #f7f7f4; }
.group-plate p { margin: 0; color: #d6d6d1; max-width: 58ch; }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: var(--sheen, none), linear-gradient(180deg, #111111, #080808);   /* --sheen: the faint pointer sheen while hovered */
  border: 1px solid rgba(255, 255, 255, .07);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.price-card.featured { border-color: rgba(226, 185, 82, .3); background: var(--sheen, none), radial-gradient(120% 70% at 100% 0%, rgba(226, 185, 82, .09), transparent 60%), linear-gradient(180deg, #121212, #080808); }
.price-card:hover { border-color: rgba(226, 185, 82, .45); transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9), 0 0 36px -14px rgba(226, 185, 82, .3); }
.price-card.featured:hover { border-color: rgba(226, 185, 82, .55); }
.price-card h3 { margin: 0; font: 600 clamp(17px, 1.7vw, 20px)/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.price-card .tag ~ h3 { padding-right: clamp(72px, 26vw, 100px); }
.price-card .tag { position: absolute; z-index: 1; top: clamp(22px, 3vw, 32px); right: clamp(22px, 3vw, 32px); font: 700 10px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); }
/* a strip of beads along the top of the WetGloss card (painted by app.js), fading into the card */
.price-card.featured { overflow: hidden; }
.bead-strip { position: absolute; inset: 0 0 auto 0; z-index: 0; width: 100%; height: 120px; opacity: .9; -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); pointer-events: none; }
.price-card.featured > :not(.bead-strip):not(.tag) { position: relative; z-index: 1; }
.amount { margin: 14px 0 0; display: flex; align-items: baseline; gap: 10px; font: 600 clamp(34px, 3.6vw, 44px)/1 var(--font-ui); letter-spacing: -.02em; color: var(--gold-hi); }
.amount small { font: 600 11px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.saving { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.saving b { color: var(--gold-hi); font-weight: 600; }
.price-card .line { width: 44px; height: 1px; margin: 20px 0; background: linear-gradient(90deg, var(--gold), transparent); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; color: var(--ink-2); font-size: 15px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.checks li::before { content: ""; width: 12px; height: 7px; margin-top: 7px; border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(-45deg); }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card .checks, .price-card .sizes, .price-card .fine-list { margin-bottom: 26px; }   /* the buttons of a pair share one baseline */
#svc-protection .price-grid { align-items: start; }   /* the Steam card is not stretched to the WetGloss card */
.sizes { margin: 0; display: grid; gap: 8px; }
.sizes div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 15px; color: var(--ink-2); }
.sizes dd { margin: 0; color: var(--gold-ink); font-weight: 600; }
.sizes dt { min-width: 0; }
.fine-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--muted); font-size: 13.5px; }
.svc-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-block: 10px clamp(60px, 10vh, 110px); }
.svc-notes div { padding: 22px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .015); }
.svc-notes h3 { margin: 0 0 8px; font: 700 12px/1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.svc-notes p { margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* ---------------------------------------------------------------- the services showroom (the owner's designs, doc 32)
   Built by services.js when the page first opens. The photo pieces (the Ritual, the Bead Test) keep dark
   tokens in both themes, like a black car in a white studio. */
.table-sec { padding-block: clamp(40px, 7vh, 72px); }
.table-sec + .svc-group { border-top: 1px solid rgba(255, 255, 255, .05); }
.table-sec .section-head { margin-bottom: var(--s-5); }
/* a head for the pieces that live inside a group: title left, the lead on the right */
.show-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(28px, 5vh, 48px); }
.show-head > div { display: grid; gap: var(--s-2); }
.show-head h2 { font-size: clamp(26px, 3.4vw, 40px); }
.show-head p { margin: 0; max-width: 44ch; color: var(--ink-2); font-size: var(--fs-md); }

/* the Alchemist's Table: a 4 x 2 grid of element tiles with column heads (the groups) and row heads (the tiers);
   grid areas carry the layout, so the phone can reflow the same markup into two columns */
.el-table { display: flex; flex-wrap: wrap; align-items: stretch; gap: 28px; }
.el-main { flex: 999 1 620px; min-width: 0; }
.el-grid {
  display: grid;
  grid-template-columns: 56px repeat(4, minmax(0, 1fr));
  grid-template-areas: ". c1 c2 c3 c4" "r1 eb ib sc wg" "r2 ed id au st";
  gap: 12px;
}
.el-col { display: grid; gap: 6px; align-content: end; padding: 0 4px 8px; }
.el-col svg { width: 22px; height: 22px; color: var(--gold); }
.el-col b { font: 700 var(--fs-xs)/1.3 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.el-col i { font: italic 500 16px/1 var(--font-script); color: var(--ink-2); }
.el-row { display: grid; justify-items: center; align-content: center; gap: 6px; }
.el-row.dup { display: none; }
.el-row i { font: italic 500 30px/1 var(--font-script); color: var(--gold-hi); }
.el-row span { font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.el-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 188px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, #131313, #0a0a0a);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.el-tile .meta { display: flex; justify-content: space-between; gap: 8px; font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--muted); }
.el-tile .sym { font: 300 56px/1 var(--font-display); }
.el-tile .nm { display: grid; gap: 4px; }
.el-tile .nm b { font: 600 13px/1.25 var(--font-ui); }
.el-tile .nm span { font: 700 14px/1 var(--font-ui); color: var(--gold); }
.el-tile.addon { border-style: dashed; border-color: rgba(226, 185, 82, .28); background: linear-gradient(180deg, #101010, #080808); }
.el-tile:hover:not(:active):not(.pressed) { border-color: rgba(226, 185, 82, .45); transform: translateY(-2px); }
.el-tile[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(226, 185, 82, .45), 0 22px 44px -20px rgba(226, 185, 82, .65); }
/* Au, the Full Detail Bundle: a solid gold tile with ink text */
.el-tile.au { background: var(--gold-grad); border-color: rgba(255, 243, 207, .45); color: var(--on-gold); }
.el-tile.au .meta { color: #3a2a06; font-weight: 700; }
.el-tile.au .sym { font-weight: 400; color: var(--on-gold); }
.el-tile.au .nm b { font-weight: 700; }
.el-tile.au .nm span { color: var(--on-gold); font-weight: 800; }
.el-tile.au[aria-pressed="true"] { border-color: var(--gold-pale); box-shadow: 0 0 0 1px rgba(255, 243, 207, .6), 0 22px 44px -20px rgba(226, 185, 82, .75); }
/* the side panel: the picked element in full */
.el-panel {
  flex: 1 1 340px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: radial-gradient(120% 70% at 100% 0%, rgba(226, 185, 82, .16), rgba(226, 185, 82, 0) 60%), linear-gradient(180deg, #131313, #070707);
}
.el-panel .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.el-panel .no { font: 600 13px/1 var(--font-ui); color: var(--muted); }
.el-panel .sym { font: 300 124px/.92 var(--font-display); }
.el-panel h3 { margin: 0; font: 400 22px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; text-wrap: balance; }
.el-eq { font: 400 20px/1.2 var(--font-display); letter-spacing: .1em; color: var(--gold-hi); }
.el-panel p { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); }
.el-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 18px; border-top: 1px solid var(--hair); }
.el-facts div { display: grid; gap: 6px; align-content: start; }
.el-facts span { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.el-facts b { font: 600 16px/1.2 var(--font-ui); }
.el-facts b.price { font-weight: 700; color: var(--gold); }
.el-panel .btn { margin-top: auto; align-self: flex-start; }
/* a new pick fades the panel's text in (app.js's reduce guard skips the class) */
.el-panel.swap > :not(.btn) { animation: elSwap .35s var(--ease) both; }
@keyframes elSwap { from { opacity: 0; transform: translateY(6px); } }
/* the legend, and the mobile note (the menu's own sentence) */
.el-legend { display: flex; align-items: center; gap: 22px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); }
.el-mini { flex: none; display: flex; flex-direction: column; justify-content: space-between; width: 84px; height: 100px; padding: 8px 9px 9px; border-radius: 10px; border: 1px solid rgba(226, 185, 82, .35); background: #0b0b0b; }
.el-mini .meta { display: flex; justify-content: space-between; font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--muted); }
.el-mini .sym { font: 300 30px/1 var(--font-display); color: var(--gold); }
.el-mini .pr { font: 700 var(--fs-xs)/1 var(--font-ui); color: var(--gold); }
.el-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.el-key b { color: var(--ink); }
.el-note { margin: 40px 0 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* the Ritual: five panels in a row share the width by --g (flex), the open one wide and lit */
.ritual { margin-top: clamp(48px, 8vh, 80px); }
.rit-scroll { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.rit-scroll::-webkit-scrollbar { display: none; }
.rit-row { min-width: 880px; height: 560px; display: flex; gap: 12px; }
.rit {
  --g: 1;
  flex: var(--g) 1 0px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background: #0a0a0a;
  color: #f7f7f4;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: flex .6s var(--ease), border-color .5s var(--ease);
}
.rit[aria-expanded="true"] { --g: 3.4; border-color: rgba(226, 185, 82, .55); cursor: default; }
.rit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); transition: filter .9s var(--ease); }
.rit[aria-expanded="true"] img { filter: brightness(.92); }
.rit .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .88) 100%); }
.rit .n { position: absolute; left: 22px; top: 16px; font: 300 72px/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px rgba(248, 221, 152, .9); }
.rit .tag { position: absolute; left: 24px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: #f8dd98; white-space: nowrap; transition: opacity .3s var(--ease); }
.rit .body { position: absolute; left: 28px; right: 28px; bottom: 28px; display: grid; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.rit[aria-expanded="true"] .tag { opacity: 0; }
.rit[aria-expanded="true"] .body { opacity: 1; transform: none; transition-delay: .2s; }
.rit .body b { font: 400 34px/1.05 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.rit .txt { max-width: 40ch; font-size: var(--fs-md); line-height: 1.55; color: #d6d6d1; }
.rit .chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rit .chip { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(226, 185, 82, .45); background: rgba(0, 0, 0, .45); font: 600 var(--fs-xs)/1.2 var(--font-ui); color: #f8dd98; }
.rit:focus-visible { outline-offset: -4px; }
/* a closed step under the pointer lifts its veil a little and takes a gold hairline; a press dims it (its size is the
   animation, so the shared scale press is not used here) */
.rit:hover:not([aria-expanded="true"]) { border-color: rgba(226, 185, 82, .35); }
.rit:hover:not([aria-expanded="true"]) img { filter: brightness(.65); }
.rit.pressed { transform: none !important; filter: brightness(.85); transition: filter .09s var(--ease); }

/* the Bead Test: bare paint beside WetGloss, a glowing gold seam between them */
.bead-test { margin-bottom: clamp(40px, 7vh, 64px); }
.bead-cmp {
  position: relative;
  height: 500px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--hair);
  background: #050505;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 243, 207, .06);
}
.bead-pane { position: relative; overflow: hidden; color: #f7f7f4; }
.bead-pane img, .bead-pane canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bead-pane.bare img { object-position: 30% 50%; }
.bead-pane.gloss img { object-position: 55% 50%; }
/* the live renderer agrees with the stills: its light and shading are laid over them softly (soft-light adds the
   bar's sheen and the drops' shading without drawing its own outlines on the owner's render) */
.bead-art { opacity: .35; mix-blend-mode: soft-light; pointer-events: none; }
.bead-pane.gloss .bead-art { opacity: .3; }
.bead-pane .scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .5) 26%, rgba(0, 0, 0, 0) 50%); pointer-events: none; }
.bead-pill { position: absolute; top: 24px; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 10, 10, .72); font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: #bdbdb8; white-space: nowrap; }
.bead-pane.bare .bead-pill { left: 24px; }
.bead-pane.gloss .bead-pill { right: 24px; border-color: rgba(226, 185, 82, .45); color: #e2b952; }
.bead-cap { position: absolute; bottom: 26px; font: 500 var(--fs-md)/1.4 var(--font-ui); color: #e8e6e0; text-shadow: 0 1px 12px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); }
.bead-pane.bare .bead-cap { left: 28px; }
.bead-pane.gloss .bead-cap { right: 28px; font-weight: 600; color: #f8dd98; }
.bead-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(226, 185, 82, 0), #e2b952 18%, #e2b952 82%, rgba(226, 185, 82, 0)); box-shadow: 0 0 16px rgba(226, 185, 82, .45); pointer-events: none; }
.bead-badge { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(226, 185, 82, .6); background: rgba(8, 8, 8, .85); color: #f8dd98; font-size: 18px; line-height: 1; box-shadow: 0 0 20px rgba(226, 185, 82, .35); pointer-events: none; }
/* press and drag to spray (desktop, services.js): a film of water comes back under the pointer and the beads
   show through a growing hole in it (--mr), then the whole panel clears on release */
@property --mr { syntax: "<length>"; inherits: false; initial-value: 0px; }
.bead-pane.can-spray { cursor: crosshair; user-select: none; }
.bead-film { opacity: 0; pointer-events: none; object-position: 30% 50%; -webkit-mask: radial-gradient(circle var(--mr, 0px) at var(--mx, 50%) var(--my, 50%), transparent 55%, #000 100%); mask: radial-gradient(circle var(--mr, 0px) at var(--mx, 50%) var(--my, 50%), transparent 55%, #000 100%); transition: opacity .35s var(--ease); }
.bead-film.on { opacity: 1; }
.bead-film.clearing { transition: opacity .4s var(--ease) .9s, --mr 1s var(--ease-in-out); }
.bead-hint { position: absolute; left: 56%; top: 30%; display: flex; align-items: center; gap: 16px; transform: translateY(-50%); pointer-events: none; transition: opacity .5s var(--ease); }
.bead-hint i { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(248, 221, 152, .6); box-shadow: 0 0 24px rgba(226, 185, 82, .35), inset 0 0 18px rgba(226, 185, 82, .18); display: grid; place-items: center; }
.bead-hint i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f8dd98; box-shadow: 0 0 14px rgba(248, 221, 152, .9); }
.bead-hint span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(10, 10, 10, .72); font: 600 13px/1 var(--font-ui); color: #f7f7f4; white-space: nowrap; }
.sprayed .bead-hint { opacity: 0; }
.bead-foot { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.bead-foot .wg { display: grid; gap: 8px; max-width: 360px; }
.bead-foot .wg b { font: 400 22px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.bead-foot .wg p { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); }
.bead-prices { display: flex; flex-wrap: wrap; gap: 10px; }
.bead-price { display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--hair); background: var(--panel); font-size: var(--fs-sm); color: var(--ink-2); }
.bead-price b { font-size: var(--fs-md); color: var(--gold); }

/* the showroom in the white studio: light tiles and panel, the dark photo pieces untouched;
   small gold text goes to the deep gold that passes on ivory */
:where([data-theme="light"]) .el-tile { background: var(--panel); border-color: rgba(20, 18, 12, .1); box-shadow: 0 24px 40px -34px rgba(20, 18, 12, .35), 0 0 0 1px rgba(20, 18, 12, .06); }
:where([data-theme="light"]) .el-tile.addon { background: var(--panel-2); border-color: rgba(184, 144, 44, .4); }
:where([data-theme="light"]) .el-tile .nm span, :where([data-theme="light"]) .el-facts b.price, :where([data-theme="light"]) .bead-price b, :where([data-theme="light"]) .el-mini .sym, :where([data-theme="light"]) .el-mini .pr { color: var(--gold-deep); }
:where([data-theme="light"]) .el-tile.au .nm span { color: var(--on-gold); }
:where([data-theme="light"]) .el-panel { background: radial-gradient(120% 70% at 100% 0%, rgba(184, 144, 44, .14), transparent 60%), var(--panel); border-color: var(--line); box-shadow: 0 24px 40px -34px rgba(20, 18, 12, .35); }
:where([data-theme="light"]) .el-mini { background: var(--panel); }
:where([data-theme="light"]) .bead-price { border-color: rgba(20, 18, 12, .1); }
:where([data-theme="light"]) .table-sec + .svc-group { border-top-color: rgba(20, 18, 12, .08); }
:where([data-theme="light"]) .group-plate { border-color: rgba(20, 18, 12, .1); box-shadow: 0 24px 40px -34px rgba(20, 18, 12, .35); }
/* the header is a dark photo piece in both themes (a black car in the white studio): its text keeps the dark
   tokens, the photo stays dark under the title and only the foot fades into the ivory page */
:where([data-theme="light"]) .svc-top { background: #0a0a0a; }
[data-theme="light"] .svc-top { --ink: #f7f7f4; --ink-2: #bdbdb8; --gold-text: linear-gradient(180deg, #fff6d8 0%, #f6dc96 30%, #e2b952 56%, #b88a27 80%, #f0c966 100%); }
:where([data-theme="light"]) .svc-top::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .4) 62%, rgba(250, 248, 244, .92) 92%, var(--bg) 100%); }

@media (max-width: 980px) {
  .el-main, .el-panel { flex-basis: 100%; }
}
@media (max-width: 720px) {
  /* two columns: the first pair of groups, then the second, each tier captioned above its pair */
  .el-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "c1 c2" "r1 r1" "eb ib" "r2 r2" "ed id" "c3 c4" "r1b r1b" "sc wg" "r2b r2b" "au st"; gap: 10px; }
  .el-col { padding: 0 2px 4px; }
  .el-grid .el-col:nth-child(3), .el-grid .el-col:nth-child(4) { margin-top: 14px; }
  .el-row, .el-row.dup { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 6px 2px 0; }
  .el-row i { font-size: 22px; }
  .el-tile { height: 160px; padding: 12px 12px 14px; }
  .el-tile .sym { font-size: 46px; }
  .el-tile .nm b { font-size: 14px; }
  .el-panel { padding: 24px; }
  .el-panel .sym { font-size: 96px; }
  .el-legend { align-items: flex-start; }
  .el-key { grid-template-columns: 1fr; gap: 8px; }
  .rit-scroll { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .rit-row { min-width: 0; height: calc(4 * 120px + 420px + 4 * 12px); flex-direction: column; }
  .rit[aria-expanded="true"] { --g: 3.5; }
  .rit .n { left: 18px; top: 14px; font-size: 56px; }
  .rit .tag { left: 108px; bottom: auto; top: 50%; writing-mode: horizontal-tb; transform: translateY(-50%); }
  .rit .body { left: 20px; right: 20px; bottom: 20px; gap: 10px; }
  .rit .body b { font-size: 26px; }
  .rit .txt { font-size: 16px; }
  .bead-cmp { height: 480px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; border-radius: var(--r-lg); }
  .bead-seam { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, rgba(226, 185, 82, 0), #e2b952 18%, #e2b952 82%, rgba(226, 185, 82, 0)); }
  .bead-pill { top: 16px; }
  .bead-pane.bare .bead-pill { left: 16px; }
  .bead-pane.gloss .bead-pill { right: 16px; }
  .bead-cap { bottom: 16px; }
  .bead-pane.bare .bead-cap { left: 18px; }
  .bead-pane.gloss .bead-cap { right: 18px; }
  .bead-foot { flex-direction: column; align-items: stretch; }
  .bead-foot .wg { max-width: none; }
  .bead-foot .btn { width: 100%; }
  .group-plate { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
  .group-plate figcaption { padding: 16px; gap: 4px 14px; }
  .group-plate svg { width: 30px; height: 30px; }
  .svc-top { min-height: 56svh; padding-top: calc(112px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 640px) {
  .price-card .tag { letter-spacing: .18em; }
  .el-key, .el-note, .el-mini .pr { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .top-photo { transform: none; }
  .svc-top.in::before { animation: none; transform: translateX(0); }   /* the pass of light shows as a still */
  .group-plate > img, .group-plate > canvas { --py: 0px; }
  .rit, .rit img, .rit .tag, .rit .body { transition: none; }
  .bead-film, .bead-hint { display: none; }
}

/* contact details on the placeholder pages */
.contact-lines { margin: 26px auto 0; display: grid; gap: 10px; max-width: 360px; text-align: left; }
.contact-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--ink-2); font-size: 15px; }
.contact-lines b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 720px) {
  .menu { backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); }   /* a cheaper blur layer on a phone */
}
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-card { min-height: clamp(200px, 31svh, 300px); }
  .svc-card .desc, .svc-card .icon { display: none; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .svc-head p { display: none; }
  .svc-notes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bar { height: 58px; }
  .page-name { font-size: 12.5px; letter-spacing: .26em; }
  .hero .actions { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
  .hero .sub { font-size: 14px; letter-spacing: .12em; }
  .hero .place { font-size: 12px; letter-spacing: .16em; text-wrap: balance; max-width: 224px; margin-inline: auto; }   /* in px, not ch: the fallback font's narrower zero must not re-wrap the line */
  .wash-title p:last-child { letter-spacing: .2em; text-wrap: balance; max-width: 26ch; }
  .cannon { width: clamp(220px, 64vw, 300px); bottom: 2vh; }   /* the body of the cannon stays in the frame mid-sweep */
  .page { align-content: start; padding-top: calc(104px + env(safe-area-inset-top, 0px)); }
  .contact-lines b { text-align: right; text-wrap: balance; }
  /* 44px targets: the footer's links and the menu's phone line (the reading floors are at the end of the file) */
  .footer a { display: flex; align-items: center; min-height: 44px; margin: 0; }
  .menu-foot .call { min-height: 44px; }
  .svc-card .go-k { display: none; }
  .hero .actions .btn { width: 100%; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .steps::before { display: none; }
  .why-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .work-foot { flex-direction: column; align-items: stretch; }
  .work-foot .btn { width: 100%; }
  .svc-card { padding: 14px; border-radius: var(--r-md); }
  .svc-card .kind { font-size: 15px; letter-spacing: .1em; }
  .svc-card .price { font-size: 21px; }
  .svc-card .go { margin-top: 10px; }
  .svc-head { margin-bottom: 14px; }
  .wash-services { padding-top: calc(84px + env(safe-area-inset-top, 0px)); }
  .price-grid { grid-template-columns: 1fr; }
  .wash { --wash-h: 380vh; }
}

/* ---------------------------------------------------------------- less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .wash { height: auto; }
  .wash-stage { position: relative; height: auto; }
  .wash-title, .wash-hint, .foam-gl, .cannon { display: none; }
  .wash-services { position: relative; pointer-events: auto; }
  .svc-card, .svc-head, .svc-note { --r: 1 !important; }
  .steps::before { transform: scaleX(1); }           /* the connector is simply there */
  .cta-band::after { transform: translateX(40%); }   /* the pass of light shows as a still */
  .work-strip { --py: 0px; }
}
/* without WebGL, and without JavaScript (html.no-js stays on when the head script never runs), the wash is a
   plain section with the services in it. Without JavaScript the hero also shows at once, the scroll cue (it
   needs the router) goes, the rules are drawn, and the full price list follows the home page. */
.no-webgl .wash, .no-js .wash { height: auto; }
.no-webgl .wash-stage, .no-js .wash-stage { position: relative; height: auto; }
:is(.no-webgl, .no-js) :is(.wash-title, .wash-hint, .foam-gl, .cannon) { display: none; }
.no-webgl .wash-services, .no-js .wash-services { position: relative; pointer-events: auto; }
:is(.no-webgl, .no-js) :is(.svc-card, .svc-head, .svc-note) { --r: 1 !important; }
.no-js .scroll-cue { display: none; }
.no-js .hero [data-in] { animation: none; opacity: 1; transform: none; filter: none; }
.no-js .rule, .no-js .steps::before { transform: none; }
.no-js .emblem svg.circle circle { stroke-dashoffset: 0; }
.no-js .view[data-view="services"] { display: block !important; }   /* the menu, readable without the router */
.no-js :is(#svc-table, #svc-ritual, #svc-bead) { display: none; }   /* the showroom pieces are built by services.js */

/* =====================================================================
   The booking app (#book): one large centred container on the dark
   background, the glass bar kept, a sticky glass bar for Back / Continue.
   ===================================================================== */
.book-page { min-height: 100vh; min-height: 100svh; padding: calc(104px + env(safe-area-inset-top, 0px)) var(--gutter) 60px; background: radial-gradient(60% 40% at 50% 0%, rgba(226, 185, 82, .08), transparent 70%); }
.bk { width: min(100%, 920px); margin-inline: auto; display: grid; gap: 26px; padding: clamp(22px, 4vw, 44px) clamp(18px, 4vw, 48px) 0; border-radius: var(--r-xl); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .012)); border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9); }
.bk-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40vh; color: var(--ink-2); }
.bk-down { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 40vh; padding: 0 16px; text-align: center; color: var(--ink-2); }   /* the database can't be reached on the real site (doc 42) */
.bk-down p { max-width: 34ch; margin: 0; font-size: 17px; line-height: 1.6; }
.bk-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bk-preview { padding: 10px 14px; border-radius: var(--r-sm); border: 1px dashed var(--line); background: rgba(226, 185, 82, .06); color: var(--ink-2); font-size: 13.5px; }
.bk-preview b { color: var(--gold-ink); }
/* the staff note on a draft page: a quiet pill under the title (the words are content.js's) */
.bk-preview.draft { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; max-width: 100%; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(226, 185, 82, .06); font-size: 12.5px; line-height: 1.4; }

/* progress: 01 ── 02 ── 03 … */
.bk-progress { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; }
.bk-progress li { flex: 1; position: relative; display: grid; justify-items: center; }
.bk-progress li + li::before { content: ""; position: absolute; top: 17px; right: 50%; left: -50%; height: 1px; background: rgba(255, 255, 255, .1); }
.bk-progress li.done + li::before, .bk-progress li.current + li.done::before { background: linear-gradient(90deg, var(--gold), var(--line)); }
.bk-progress button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); touch-action: manipulation; }
.bk-progress button:disabled { cursor: default; }
.bk-progress .num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: var(--bg); font: 600 12px/1 var(--font-display); letter-spacing: .06em; transition: border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.bk-progress .lbl { font: 700 10px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; }
.bk-progress li.done .num { border-color: var(--line); color: var(--gold-ink); }
.bk-progress li.done .lbl { color: var(--ink-2); }
.bk-progress li.current .num { border-color: var(--gold); color: var(--on-gold); background: var(--gold-grad); box-shadow: 0 0 18px -2px rgba(226, 185, 82, .7); }
.bk-progress li.current .lbl { color: var(--gold-hi); }
.bk-progress button:hover:not(:disabled) .num { border-color: var(--gold-hi); }

.bk-body { min-height: 300px; padding-bottom: 8px; }
.bk-step { display: grid; gap: 26px; }
.bk-step.in-right { animation: stepIn .55s var(--ease) both; }
.bk-step.in-left { animation: stepInL .55s var(--ease) both; }
/* 18px: with the .link hit areas reaching 8px past the content, the slide never leaves a 390px viewport */
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes stepInL { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.bk-head { display: grid; gap: 12px; }
.bk-title { font-size: clamp(26px, 4vw, 42px); outline: none; }
.bk-h2 { margin: 0; font: 600 15px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bk-h2 small { font: 500 13px/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--muted); }
.bk-grid { display: grid; gap: 22px; }
.bk-row { display: grid; gap: 14px; }
.bk-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-row.four { grid-template-columns: .7fr 1fr 1fr .8fr; }
.bk-row.addr { grid-template-columns: 1fr 140px; row-gap: 7px; align-items: start; }
.bk-row.addr .fld-msg:empty { display: none; }   /* the address has nothing to say until it does */
.addr-msg { grid-column: 1 / -1; }   /* the ZIP's message, moved out of its narrow column to run the width of the row */
.bk-inline { display: grid; gap: 14px; }
.bk-note { margin: 0; padding: 14px 16px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); color: var(--ink-2); font-size: 14.5px; }
.bk-note.ok { border-color: var(--line-soft); }
.bk-note b { color: var(--ink); font-weight: 600; }
.bk-muted { margin: 0; color: var(--muted); font-size: 14px; }
.bk-muted a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.bk-muted a:hover { color: var(--gold-pale); }
/* an empty list says what would be there: one quiet dashed slot in the list's place (admin and team) */
.bk-empty { margin: 0; padding: 18px 16px; border: 1px dashed rgba(255, 255, 255, .12); border-radius: var(--r-md); color: var(--muted); font-size: 14px; text-align: center; }
/* a text link that is still a 44px target: the hit area grows around the words, the negative margins keep the layout */
.link { display: inline-flex; align-items: center; min-height: 44px; margin: -10px -8px; padding: 0 8px; border-radius: 8px; background: none; border: 0; color: var(--gold-ink); font: 600 13px/1 var(--font-ui); letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; }
.link:hover { color: var(--gold-hi); }
.bk-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* several problems at once: a short list under the step's title, each a link to its field (booking.js scrolls it
   into view and focuses it; the margins keep it clear of the floating bar above and the sticky bar below) */
.bk-errors { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid rgba(212, 106, 90, .45); background: rgba(212, 106, 90, .08); color: var(--ink-2); font-size: 14px; scroll-margin-top: calc(96px + env(safe-area-inset-top, 0px)); scroll-margin-bottom: 130px; outline: none; }
.bk-errors p { margin: 0; color: var(--danger-text); font-weight: 600; }
.bk-errors ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.bk-errors .link { color: var(--danger-text); }

/* fields */
.fld { display: grid; gap: 7px; min-width: 0; }
.fld-label { font: 700 11px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.fld-label i { font-style: normal; color: var(--gold-ink); }
.fld-label small { font-weight: 500; letter-spacing: .08em; text-transform: none; color: var(--muted); }
.fld-box { position: relative; display: flex; align-items: stretch; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .35); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.fld-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226, 185, 82, .14); }
.fld-input { flex: 1; min-width: 0; width: 100%; height: 50px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font: 500 16px/1.3 var(--font-ui); outline: none; border-radius: 14px; }
textarea.fld-input { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.fld-input::placeholder { color: transparent; }
.fld-input[readonly] { color: var(--ink-2); }
/* a 6-digit code (the text, the authenticator): a short field with big, evenly spaced digits */
.fld[data-field="mfa_code"], .fld[data-field="phone_code"] { max-width: 360px; }
.fld[data-field="mfa_code"] .fld-input, .fld[data-field="phone_code"] .fld-input { font-size: 18px; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .12em; }
.bk-grid code { user-select: all; letter-spacing: .08em; color: var(--ink); }   /* the authenticator key: one tap selects it all */
.fld-msg, .choice-msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }
.has-error .fld-box { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(212, 106, 90, .14); }
.has-error .fld-msg, .has-error .choice-msg, .fld-msg.has-error { color: var(--danger-text); }
.is-ok .fld-msg, .fld-msg.is-ok { color: var(--gold-hi); }
.fld-ok { display: grid; place-items: center; padding: 0 16px; color: var(--gold-hi); font-weight: 700; }
.mini-btn { margin: 3px; min-height: 44px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--line); background: rgba(226, 185, 82, .08); color: var(--gold-hi); font: 700 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; white-space: nowrap; touch-action: manipulation; transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease); }
.mini-btn:hover { background: rgba(226, 185, 82, .16); border-color: var(--gold); }
.mini-btn:disabled { opacity: .45; cursor: not-allowed; }
.bk-skip { display: flex; align-items: end; }
.bk-skip .mini-btn { margin: 0 0 24px; height: 50px; }
.bk-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-2); font-size: 14.5px; cursor: pointer; touch-action: manipulation; }
/* the checkbox is drawn: a 20px rounded square that fills with gold and draws its tick */
.bk-toggle input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0; display: grid; place-items: center; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .35); cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.bk-toggle input::before { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid var(--on-gold); border-bottom: 2px solid var(--on-gold); transform: rotate(-45deg) scale(0); transition: transform .25s var(--ease); }
.bk-toggle input:checked { background: var(--gold-grad); border-color: var(--gold); box-shadow: 0 0 14px -4px rgba(226, 185, 82, .6); }
.bk-toggle input:checked::before { transform: rotate(-45deg) scale(1); }
.bk-toggle:hover input { border-color: var(--gold); }

/* choices: cards and chips */
.choice { display: grid; gap: 10px; }
.choice-label { margin: 0; font: 700 11px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.choice-label i { font-style: normal; color: var(--gold-ink); }
.choice-label small { font-weight: 500; letter-spacing: .08em; text-transform: none; color: var(--muted); }
.choice-list.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.choice-list.chips, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .025); color: var(--ink); cursor: pointer; touch-action: manipulation; transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.choice-item:hover:not(:disabled) { border-color: rgba(226, 185, 82, .5); }
.choice-item.on { border-color: var(--gold); background: rgba(226, 185, 82, .08); box-shadow: 0 0 26px -10px rgba(226, 185, 82, .6); }   /* the 1px rim is drawn by ::after (the motion system) */
.choice-item.on .choice-name { color: var(--gold-hi); }
.choice-item:disabled, .choice-item.disabled { opacity: .45; cursor: not-allowed; }
.choice-main { display: grid; gap: 3px; min-width: 0; flex: 1; }
.choice-name { font: 600 15px/1.3 var(--font-ui); }
.choice-sub { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* the price keeps to the right of the name and may wrap; a sentence of a price ("Price confirmed by us") takes its own line under the card */
.choice-price { font: 600 14px/1.25 var(--font-ui); color: var(--gold-ink); white-space: normal; max-width: 44%; text-align: right; align-self: flex-start; margin-top: 2px; }
.choice-price.long { flex-basis: 100%; max-width: none; text-align: left; order: 3; margin-top: -4px; }
.choice-check { display: none; }
/* "+ Add vehicle": a dashed, gold, centred card */
.choice-item.add { justify-content: center; border-style: dashed; color: var(--gold-ink); background: transparent; }
.choice-item.add .choice-main { flex: 0 1 auto; }
.chips .choice-item { min-height: 44px; padding: 12px 16px; border-radius: 999px; gap: 8px; }
.chips .choice-name { font-size: 13.5px; }
.chips .choice-item.on { background: rgba(226, 185, 82, .12); }
.choice-item.time { min-width: 92px; justify-content: center; font-variant-numeric: tabular-nums; }
.choice-item.time.on { border-color: var(--gold); background: var(--gold-grad); color: var(--on-gold); font-weight: 700; box-shadow: 0 0 22px -4px rgba(226, 185, 82, .75); }   /* the chosen time is filled, like the chosen day */
/* focus on a selectable thing is the ink ring (the selection is the gold one), each keeping its own corners */
.bk :is(.choice-item, .svc-opt, .cal-day, .star-pick button):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bk .choice-item:focus-visible { border-radius: 14px; }
.bk .chips .choice-item:focus-visible { border-radius: 999px; }
.bk .svc-opt:focus-visible { border-radius: var(--r-md); }
.bk .cal-day:focus-visible { border-radius: 50%; }
.bk .star-pick button:focus-visible { border-radius: 12px; }

/* photos */
.bk-photos { display: grid; gap: 10px; }
.bk-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.bk-photo { position: relative; margin: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); }
.bk-photo img { width: 100%; height: 100%; object-fit: cover; }
.bk-photo-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
.bk-photo-add { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 12px; border: 1px dashed var(--line); color: var(--gold-ink); cursor: pointer; font-size: 26px; }
.bk-photo-add .small { font: 700 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.bk-photo-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* "Modifications and photos": folded away, drawn like a FAQ item */
.bk-more { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); padding: 0 18px; transition: border-color .3s var(--ease); }
.bk-more[open] { border-color: var(--line); }
.bk-more summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 4px 0; list-style: none; cursor: pointer; font: 700 11px/1.4 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); touch-action: manipulation; }
.bk-more summary::-webkit-details-marker { display: none; }
.bk-more summary small { font-weight: 500; letter-spacing: .08em; text-transform: none; color: var(--muted); }
.bk-more summary::after { content: "+"; flex-shrink: 0; color: var(--gold); font-weight: 400; font-size: 20px; line-height: 1; transition: transform .3s var(--ease); }
.bk-more[open] summary::after { transform: rotate(45deg); }
.bk-more-body { display: grid; gap: 22px; padding: 6px 0 20px; }
.bk-more[open] .bk-more-body { animation: viewIn .35s var(--ease) both; }

/* step 04: service cards */
.bk-services { display: grid; gap: 22px; }
.svc-group-pick { display: grid; gap: 12px; }
.svc-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svc-opt { position: relative; display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: "icon name price" "icon desc desc" "icon meta meta"; column-gap: 14px; row-gap: 6px; align-items: start; text-align: left; padding: 18px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .09); background: var(--sheen, none), linear-gradient(180deg, #111111, #080808); color: var(--ink); cursor: pointer; touch-action: manipulation; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.svc-opt:hover { border-color: rgba(226, 185, 82, .45); }
.svc-opt.on { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9), 0 0 36px -12px rgba(226, 185, 82, .45); }   /* the 1px rim, and the light that runs it once, are ::after (the motion system) */
.svc-opt-icon { grid-area: icon; width: 30px; height: 30px; color: var(--gold); }
.svc-opt-icon svg { width: 100%; height: 100%; }
.svc-opt-name { grid-area: name; font: 600 15px/1.25 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.svc-opt-price { grid-area: price; padding-top: 14px; font: 600 17px/1 var(--font-ui); color: var(--gold-hi); text-align: right; display: grid; justify-items: end; gap: 3px; }   /* the room for "Selected" is always there: picking a card never moves its price */
.svc-opt-price small { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.svc-opt-price small.inc { color: var(--gold-ink); }
.svc-opt-price:empty { min-width: 56px; min-height: 17px; border-radius: 4px; background: rgba(255, 255, 255, .08); }   /* the slot until the price is known */
.bk-services > .choice-msg:empty, #bk-suggest:empty { display: none; }
.svc-opt-desc { grid-area: desc; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.svc-opt-meta { grid-area: meta; font: 700 10.5px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.svc-opt-check { position: absolute; top: 12px; right: 14px; font: 700 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.svc-opt.on .svc-opt-check { opacity: 1; transform: none; }
.bk-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: radial-gradient(100% 120% at 0% 0%, rgba(226, 185, 82, .12), transparent 60%); color: var(--ink-2); font-size: 14.5px; }
.bk-suggest b { color: var(--gold-hi); font-weight: 600; }
.bk-summary-card { padding: 18px 20px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .3); }
.pr { display: grid; gap: 8px; }
.pr-line { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--ink-2); }
.pr-line.inc { color: var(--muted); }
.pr-line small { color: var(--gold-ink); }
.pr-line.save span:last-child { color: var(--gold-hi); }
.pr-note { margin: -2px 0 0; font-size: 13px; line-height: 1.45; color: var(--gold-hi); }   /* the bundle saving: said once, never a second subtraction */
:where([data-theme="light"]) .pr-note { color: var(--gold-deep); }
.pr-total { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); font: 600 18px/1.3 var(--font-ui); color: var(--ink); }
.pr-total span:last-child { color: var(--gold-hi); text-align: right; }

/* step 05: calendar and times */
.bk-chosen { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.bk-chosen > div { display: grid; gap: 4px; }
.bk-chosen b { font-weight: 600; }
.cal { display: grid; gap: 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-btn.small { width: 44px; height: 44px; font-size: 20px; line-height: 1; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font: 700 10px/1 var(--font-ui); letter-spacing: .2em; color: var(--muted); padding: 6px 0 4px; }
.cal-day { position: relative; isolation: isolate; aspect-ratio: 1; max-height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--ink-2); font: 500 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.cal-day.open { border-color: rgba(255, 255, 255, .1); color: var(--ink); }
.cal-day.open:hover { border-color: var(--gold); color: var(--gold-hi); }
.cal-day.unknown { border-color: rgba(255, 255, 255, .06); }
.cal-day.full { color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(226, 185, 82, .14) 6px 8px); cursor: not-allowed; }
.cal-day.out { opacity: .25; cursor: default; }
/* a day of the month before or after that shares a week with this one: grey, its month in small capitals under the number */
.cal-other { aspect-ratio: 1; max-height: 56px; display: grid; place-items: center; align-content: center; gap: 3px; color: var(--muted); opacity: .6; font: 500 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; user-select: none; }
.cal-other small { font: 600 8px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
/* a chosen day settles in softly, and the gold spreads out from where the finger landed (--px/--py from booking.js; the centre for a key press) */
.cal-day.on { border-color: var(--gold); background: var(--gold-grad); color: var(--on-gold); font-weight: 700; box-shadow: 0 0 22px -4px rgba(226, 185, 82, .75); animation: dayPop .45s var(--ease); }
.cal-day.on::after { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 50%; background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), var(--gold-hi), transparent 70%); animation: ring .6s var(--ease) forwards; pointer-events: none; }
@keyframes dayPop { 0% { transform: scale(.78); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.cal-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.cal-key { display: inline-flex; align-items: center; gap: 6px; }
.cal-key::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); }
.cal-key.full::before { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(226, 185, 82, .4) 3px 4px); }
.cal .choice-msg:empty { display: none; }
/* the start times fade in once, each a little after the last; "Checking times…" stands still */
.times { display: grid; gap: 12px; }
.times .choice-item { animation: viewIn .4s var(--ease) both; animation-delay: calc(var(--t, 0) * 25ms); }

/* step 06: summary */
.sum { display: grid; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sum-body { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 8px 18px; font-size: 15px; }
.sum-body dt { color: var(--muted); }
.sum-body dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* bottom bar */
.bk-nav { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 calc(-1 * clamp(18px, 4vw, 48px)); padding: 14px clamp(18px, 4vw, 48px) calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .07); border-radius: 0 0 var(--r-xl) var(--r-xl); background: linear-gradient(180deg, rgba(10, 10, 10, .86), rgba(3, 3, 3, .95)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.bk-nav-mid { flex: 1; text-align: center; color: var(--ink-2); font-size: 14px; }
.bk-nav-total { color: var(--gold-hi); font-weight: 600; }
.bk-nav .btn { --h: 48px; padding: 0 22px; }
.bk-nav .btn:disabled { transform: none; }

/* request sent */
.bk-sent { text-align: center; justify-items: center; padding-bottom: clamp(26px, 4vw, 48px); }
.sent-mark svg { width: 74px; height: 74px; filter: drop-shadow(0 10px 30px rgba(226, 185, 82, .35)); animation: heroIn 1s var(--ease) both; }
.sent-ref { margin: 0; font-size: 17px; color: var(--ink-2); }
.sent-ref b { color: var(--gold-hi); letter-spacing: .08em; }
.sent-body { width: min(100%, 520px); text-align: left; }
.bk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* toast: drops in under the bar, so it never covers the booking's bottom bar */
.toast { position: fixed; left: 50%; top: calc(86px + env(safe-area-inset-top, 0px)); z-index: 95; transform: translate(-50%, -12px); opacity: 0; padding: 12px 18px; border-radius: 999px; background: rgba(12, 12, 12, .92); border: 1px solid var(--line); border-left: 2px solid var(--gold); color: var(--ink); font-size: 14px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .book-page { padding-inline: 10px; }
  .bk { padding-inline: 16px; gap: 20px; }
  /* the sticky bar: the running total on its own line above Back / Continue, a cheaper blur, the safe areas kept */
  .bk-nav { flex-wrap: wrap; row-gap: 8px; margin-inline: -16px; padding-inline: calc(16px + env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-right, 0px)); background: linear-gradient(180deg, rgba(10, 10, 10, .94), rgba(3, 3, 3, .98)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .bk-nav-mid { flex-basis: 100%; order: -1; text-align: left; font-size: 14px; }
  .bk-nav-mid:empty { display: none; }
  /* the step numbers stay 30px but each is a 44px target (padding, and the margin gives the room back) */
  .bk-progress .lbl { display: none; }
  .bk-progress .num { width: 30px; height: 30px; font-size: 11px; }
  .bk-progress button { padding: 7px; margin: -7px 0; }
  .bk-progress li + li::before { top: 15px; }
  .bk-row.two, .bk-row.four { grid-template-columns: 1fr 1fr; }
  .bk-row.addr { grid-template-columns: 1fr 110px; }
  .svc-pick { grid-template-columns: 1fr; }
  .choice-list.cards { grid-template-columns: 1fr; }
  .sum-body { grid-template-columns: 1fr; gap: 2px 0; }
  .sum-body dt { margin-top: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
  .cal-grid { gap: 4px; }   /* seven 44px days fit a 390px phone */
  .cal-day, .cal-other { max-height: none; font-size: 13px; }
}
@media (max-width: 480px) {
  /* a service option on a phone: the name runs the full width, the price under it with the "Selected" mark beside it */
  .svc-opt { grid-template-columns: 26px 1fr auto; grid-template-areas: "icon name name" "icon price check" "icon desc desc" "icon meta meta"; column-gap: 12px; padding: 16px; }
  .svc-opt-icon { width: 24px; height: 24px; }
  .svc-opt-price { padding-top: 2px; justify-items: start; text-align: left; }
  .svc-opt-check { position: static; grid-area: check; align-self: center; }
}

/* ---------------------------------------------------------------- account and appointments */
.acct { padding-bottom: clamp(22px, 4vw, 44px); }
.acct-sec { display: grid; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.acct-sec:last-child { border-bottom: 0; }
.acct-static { margin: 0; min-height: 50px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .2); color: var(--ink-2); }
.acct-static .tnum { white-space: nowrap; }   /* the number stays on one line; "confirmed" may wrap under it */
.acct-static small { color: var(--gold-ink); font-size: 12px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-actions .btn { --h: 46px; padding: 0 20px; }
.veh-list { display: grid; gap: 8px; }
.veh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.veh.editing { border-color: var(--line); }
.veh-main { display: grid; gap: 2px; min-width: 0; }
.veh-main b { font-weight: 600; }
.veh-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }   /* the links' own padding keeps 24px between the words */
/* Remove asks first, in the same row: the question, Yes, remove / Keep */
.veh.asking { border-color: rgba(212, 106, 90, .45); }
.veh-ask { color: var(--ink-2); font-size: 14px; margin-right: 8px; }
.link.danger { color: var(--danger-text); }
.link.danger:hover { color: #ffb8a8; }
.veh-form { display: grid; gap: 18px; padding: 18px; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .25); }
.appt { border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, #111111, #080808); overflow: hidden; }
.appt.open { border-color: var(--line); }
.appt-head { width: 100%; display: grid; grid-template-columns: 1.2fr 1.4fr auto auto; align-items: center; gap: 14px; padding: 14px 18px; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation; transition: background-color .3s var(--ease); }
.appt-head:hover { background: rgba(226, 185, 82, .04); }
/* the chevron says the head opens; it turns over while the card is open */
.appt-head:has(.appt-chev) { grid-template-columns: 1.2fr 1.4fr auto auto 18px; }
.appt-chev { width: 18px; height: 18px; color: var(--gold); transition: transform .3s var(--ease); }
.appt-chev svg { width: 100%; height: 100%; }
.appt.open .appt-chev { transform: rotate(180deg); }
.appt-when { display: grid; gap: 2px; }
.appt-when b { font-weight: 600; }
.appt-when span { color: var(--muted); font-size: 13px; }
.appt-what { color: var(--ink-2); font-size: 14px; min-width: 0; }
.appt-status { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }   /* a chip, hugging its words */
.appt-status small { font-size: inherit; }
.st-confirmed .appt-status, .st-in_progress .appt-status { border-color: var(--gold); color: var(--gold-hi); background: rgba(226, 185, 82, .1); }
.st-requested .appt-status, .st-needs_information .appt-status { border-color: rgba(226, 185, 82, .4); color: var(--gold-ink); }
.st-declined .appt-status, .st-cancelled .appt-status { color: var(--muted); }
.st-completed .appt-status { border-color: rgba(255, 255, 255, .2); color: var(--ink); }
.appt-ref { color: var(--muted); font-size: 12px; letter-spacing: .06em; }
.appt-body { display: grid; gap: 14px; padding: 4px 18px 18px; border-top: 1px solid rgba(255, 255, 255, .06); }
@media (max-width: 720px) {
  /* the head on a phone: when, the status chip and the chevron on the first row, then what, then the reference */
  .appt-head, .appt-head:has(.appt-chev) { grid-template-columns: 1fr auto; grid-template-areas: "when status" "what what" "ref ref"; }
  .appt-head:has(.appt-chev) { grid-template-columns: 1fr auto 18px; grid-template-areas: "when status chev" "what what what" "ref ref ref"; }
  .appt-when { grid-area: when; }
  .appt-status { grid-area: status; justify-self: end; align-self: start; }
  .appt-what { grid-area: what; }
  .appt-ref { grid-area: ref; }
  .appt-chev { grid-area: chev; align-self: start; margin-top: 4px; }
  .veh { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .acct-sec .bk-row.two:has(.acct-static) { grid-template-columns: 1fr; }   /* the phone number and the email each get the width */
}
/* Completed details light up as they come into view (data-reveal → .in from app.js): from a plain dark card to
   "done" (a faint gold corner glow) or, at $200 or more, "gold" (doc 22): the gold rim, a stronger glow and the
   status pill filled with gold. Only opacity and colours move. On the account page the head is plain (.static)
   with a link to Appointments under it. */
.appt { position: relative; isolation: isolate; transition: border-color .4s var(--ease); }
.appt-head.static { cursor: default; }
.appt-head.static:hover { background: none; }
.appt-go { padding-top: 14px; justify-items: start; }
.appt-go .btn { --h: 46px; padding: 0 20px; }
.appt-glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 80% at 100% 0%, rgba(226, 185, 82, .07), transparent 60%); opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.appt.gold .appt-glow { background: radial-gradient(120% 80% at 100% 0%, rgba(226, 185, 82, .18), transparent 60%); }
.appt.in .appt-glow { opacity: 1; }
.appt.done.in { border-color: rgba(226, 185, 82, .22); }
.appt.gold:not(.in) { border-color: rgba(255, 255, 255, .08); }
.appt.gold::before { transition: opacity .8s var(--ease); }
.appt.gold:not(.in)::before { opacity: 0; }
.appt-status { position: relative; isolation: isolate; transition: color .8s var(--ease), border-color .8s var(--ease); }
.appt-status::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--gold-grad); opacity: 0; transition: opacity .8s var(--ease); }
.appt.gold.st-completed.in .appt-status { color: var(--on-gold); border-color: transparent; }
.appt.gold.st-completed.in .appt-status::before { opacity: 1; }
:where([data-theme="light"]) .appt-glow { background: radial-gradient(120% 80% at 100% 0%, rgba(184, 144, 44, .08), transparent 60%); }
:where([data-theme="light"]) .appt.gold .appt-glow { background: radial-gradient(120% 80% at 100% 0%, rgba(184, 144, 44, .16), transparent 60%); }
:where([data-theme="light"]) .appt.gold:not(.in) { border-color: rgba(20, 18, 12, .08); }
:where([data-theme="light"]) .appt.done.in { border-color: rgba(184, 144, 44, .3); }
@media (prefers-reduced-motion: reduce) {   /* the lit state is simply there */
  .appt-glow, .appt.gold:not(.in)::before { opacity: 1; }
  .appt.gold:not(.in) { border-color: rgba(226, 185, 82, .45); }
  .appt.done { border-color: rgba(226, 185, 82, .22); }
  .appt.gold.st-completed .appt-status { color: var(--on-gold); border-color: transparent; }
  .appt.gold.st-completed .appt-status::before { opacity: 1; }
}

/* ---------------------------------------------------------------- the Gold client card (the owner's design; the Gold client of doc 22)
   Account shows it to a customer with a completed detail of $200 or more (the preview, to its example customer).
   A dark piece in both themes: the beads texture under a dark gradient, a gold rim, an inner hairline frame, a
   sheen that slides with the pointer and a tilt under a mouse (account.js writes --rx, --ry and --sheen; a finger
   and reduced motion leave the resting values). */
.acct-sec.gold-sec { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; padding-block: 8px 30px; }
.gold-sec::before { content: ""; position: absolute; inset: -10% 0; z-index: -1; background: radial-gradient(45% 55% at 32% 50%, rgba(226, 185, 82, .1), transparent 70%); pointer-events: none; }
.gold-stage { flex: 1 1 360px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; padding: 16px 0; }   /* minmax(0,…): the card's 440px never widens a phone */
.gold-card {
  --rx: 7deg;
  --ry: -14deg;
  --sheen: -12%;
  position: relative;
  width: 440px;
  max-width: 100%;
  aspect-ratio: 1.59;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(248, 221, 152, .55);
  background: #050505;
  color: #f7f7f4;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease-out;
  will-change: transform;
  box-shadow: 0 46px 90px -34px rgba(0, 0, 0, .95), 0 34px 80px -46px rgba(226, 185, 82, .6), inset 0 1px 0 rgba(255, 243, 207, .25);
}
.gold-card .tex { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.gold-card .shade { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .7)); }
.gold-card .sheen { position: absolute; inset: -40%; background: linear-gradient(118deg, rgba(255, 246, 216, 0) 42%, rgba(255, 246, 216, .26) 50%, rgba(255, 246, 216, 0) 58%); transform: translateX(var(--sheen)); pointer-events: none; }
.gold-card .frame { position: absolute; inset: 10px; border-radius: 13px; border: 1px solid rgba(226, 185, 82, .32); pointer-events: none; }
.gold-card .face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 30px; }
.gold-card .top, .gold-card .bottom { display: flex; justify-content: space-between; gap: 16px; }
.gold-card .top { align-items: flex-start; }
.gold-card .bottom { align-items: flex-end; }
.gold-card .mono { width: 42px; height: auto; }
.gold-card .tag { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: #e2b952; }
.gold-card .name { font: 400 28px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; overflow-wrap: anywhere; background: linear-gradient(180deg, #fff6d8 0%, #f6dc96 30%, #e2b952 56%, #b88a27 80%, #f0c966 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-card .since { display: grid; gap: 5px; }
.gold-card .since span { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: #a3a39d; }
.gold-card .since b { font: 600 15px/1.2 var(--font-ui); color: #f7f7f4; }
.gold-card .au { display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; width: 42px; height: 46px; padding: 5px 6px; border-radius: 7px; background: linear-gradient(135deg, #9a7322 0%, #d9ac3f 30%, #f6dc96 50%, #efc65c 66%, #9a7322 100%); color: #110c02; }
.gold-card .au span { font: 800 var(--fs-xs)/1 var(--font-ui); }
.gold-card .au b { font: 500 18px/1 var(--font-display); }
.gold-floor { width: 360px; max-width: 80%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 185, 82, .22), rgba(226, 185, 82, 0)); }
.gold-copy { flex: 1 1 280px; min-width: 0; display: grid; gap: 18px; align-content: center; }
.gold-copy h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: .12em; }
.gold-copy p { margin: 0; max-width: 42ch; line-height: 1.65; color: var(--ink-2); }
.gold-copy .acct-actions { margin-top: 4px; gap: 14px; }
.gold-copy .acct-actions .btn { --h: 52px; padding: 0 26px; }
:where([data-theme="light"]) .gold-sec::before { background: radial-gradient(45% 55% at 32% 50%, rgba(184, 144, 44, .08), transparent 70%); }
:where([data-theme="light"]) .gold-card { box-shadow: 0 36px 70px -34px rgba(20, 18, 12, .55), 0 24px 60px -40px rgba(184, 144, 44, .45), inset 0 1px 0 rgba(255, 243, 207, .25); }
:where([data-theme="light"]) .gold-floor { background: radial-gradient(closest-side, rgba(184, 144, 44, .16), rgba(184, 144, 44, 0)); }
@media (max-width: 640px) {
  .gold-card .face { padding: 20px 22px; }
  .gold-card .name { font-size: 22px; }
  .gold-card .mono { width: 36px; }
  .gold-copy .acct-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .gold-card { transition: none; } }

/* ---------------------------------------------------------------- admin console */
.bk.admin { width: min(100%, 1100px); padding-bottom: clamp(22px, 4vw, 44px); }   /* no sticky bar here: the sheet closes with its own room */
.adm-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); color: var(--ink-2); font: 700 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; touch-action: manipulation; transition: border-color .3s var(--ease), color .3s var(--ease); }
.adm-nav a:hover { border-color: var(--gold); color: var(--gold-hi); }
.adm-nav a.on { border-color: var(--gold); color: var(--on-gold); background: var(--gold-grad); }
.adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.adm-who { display: grid; gap: 4px; justify-items: end; color: var(--ink-2); font-size: 14px; }
.adm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* the four counts are links to their lists (Today, Needs you, Tomorrow, the Review lane) */
.adm-tile { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); transition: border-color .3s var(--ease); }
a.adm-tile { text-decoration: none; color: inherit; }
.adm-tile:hover { border-color: var(--line); }
.adm-tile b { font: 600 30px/1 var(--font-ui); color: var(--gold-hi); }
.adm-tile span { font: 700 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.adm-tile small { color: var(--muted); font-size: 12.5px; }
.appt.adm .appt-head { grid-template-columns: 1fr 1.6fr auto auto; }
.appt.adm .appt-what b { color: var(--ink); font-weight: 600; }
/* the status pill and, at $200 or more, the gold pill side by side; the hold's countdown is its own line under
   the date (late in the danger red); the price is plain ink, "Price pending" gold */
.appt-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.appt-when .appt-hold { color: var(--muted); font-size: 12.5px; }
.appt-when .appt-hold.late { color: var(--danger-text); }
.appt.adm .appt-ref { font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
.appt.adm .appt-ref.pending { color: var(--gold-ink); font-weight: 600; }
/* a copy of a card that opens elsewhere (a request shown under Today or Tomorrow, decided under Needs you): a plain head */
.appt.adm.compact .appt-head { cursor: default; }
.appt.adm.compact .appt-head:hover { background: none; }
.appt.gold { border-color: rgba(226, 185, 82, .45); background: linear-gradient(180deg, #121212, #080808); }
.appt.adm.gold { background: radial-gradient(120% 80% at 100% 0%, rgba(226, 185, 82, .10), transparent 60%), linear-gradient(180deg, #121212, #080808); }   /* the console's gold rows are simply gold; the customer's light up (see Appointments) */
.appt.gold .appt-ref { color: var(--gold-hi); }
.adm-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.adm-quote { white-space: pre-wrap; color: var(--ink-2); font-style: italic; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-actions .btn { --h: 44px; padding: 0 16px; font-size: 11.5px; }
.adm-actions .btn.attention { border-color: var(--gold); color: var(--gold-hi); }
/* the button whose panel is open is marked; Cancel booking stands apart at the right, in the danger tint */
.adm-actions .btn.on { border-color: var(--gold); color: var(--gold-hi); background: rgba(226, 185, 82, .08); }
.adm-actions .btn.danger { border-color: rgba(212, 106, 90, .35); color: #e39183; margin-left: auto; }
.adm-actions .btn.danger:hover:not(:disabled), .adm-actions .btn.danger.on { border-color: var(--danger); color: var(--danger-text); background: rgba(212, 106, 90, .08); }
.adm-panel { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: rgba(0, 0, 0, .3); animation: viewIn .4s var(--ease) both; }
.adm-history summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.adm-history ul { margin: 8px 0 0; padding: 0 0 0 18px; color: var(--ink-2); font-size: 13.5px; display: grid; gap: 4px; }
.adm-qr { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 8px; }
/* the console's calendar head: earlier, the visible range, later, then the Week / Day chips and Today */
.admin .cal-head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }
.admin .cal-head .bk-h2 { justify-content: center; text-align: center; }
.admin .cal-head .chips { align-items: center; gap: 8px 14px; }
.cal-cols { display: grid; gap: 10px; }
.cal-cols.week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-col { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02); }
.cal-col.blocked { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(226, 185, 82, .07) 8px 10px); }
/* today is lit, the days gone are quieter (a muted head, the bookings a shade back, never below 4.5:1) and offer no Close day */
.cal-col.past > :first-child { color: var(--muted); }
.cal-col.past .cal-item { opacity: .78; }
.cal-col.past .bk-empty { opacity: .6; }
.cal-col.today { border-color: var(--line); background: rgba(226, 185, 82, .04); }
.cal-col.today .bk-h2 { color: var(--gold-hi); }
.cal-col .bk-h2 { font-size: 12px; }
.cal-col .bk-h2 small { color: var(--gold-ink); }
.cal-col .bk-empty { padding: 10px 8px; font-size: 12px; }
.cal-item { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .3); color: var(--ink); font-size: 12.5px; cursor: pointer; min-width: 0; touch-action: manipulation; transition: border-color .3s var(--ease), transform .2s var(--ease); }
.cal-item:hover { border-color: rgba(226, 185, 82, .5); }
.cal-item:active { transform: scale(.99); }
.cal-item b { color: var(--gold-hi); }
.cal-item small { color: var(--muted); font-size: 11px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* two lines of the services, the rest in the title */
.cal-item .rv-gold { height: 20px; padding: 0 8px; font-size: 9.5px; justify-self: start; margin-top: 2px; }
.cal-item.st-requested, .cal-item.st-needs_information { border-style: dashed; }
.cal-item.gold { border-color: rgba(226, 185, 82, .5); }
/* the log: the time in one column, what happened in the other */
.adm-log { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; color: var(--ink-2); font-size: 14px; }
.adm-log li { display: contents; }
.adm-log .tnum { color: var(--muted); white-space: nowrap; }
.admin .sum-body { grid-template-columns: 200px 1fr; max-width: 760px; }
.bk-notice { display: grid; gap: 6px; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: radial-gradient(100% 120% at 0% 0%, rgba(226, 185, 82, .12), transparent 60%); }
.bk-notice p { margin: 0; color: var(--ink); }
@media (max-width: 980px) { .cal-cols.week { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-cols { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .appt.adm .appt-head { grid-template-columns: 1fr auto; grid-template-areas: "when status" "what what" "ref ref"; }
  .appt.adm .appt-tags { grid-area: status; justify-self: end; align-self: start; flex-direction: column; align-items: flex-end; gap: 4px; }   /* the gold pill under the status pill, so the date keeps its line */
  .admin .sum-body { grid-template-columns: 1fr; }
  .cal-cols.week { grid-template-columns: 1fr; }
  /* the calendar head on a phone: earlier, the range, later; the chips under them */
  .admin .cal-head { grid-template-columns: auto 1fr auto; }
  .admin .cal-head .bk-h2 { font-size: 13px; letter-spacing: .12em; }   /* "Sun, Oct 4 – Sat, Oct 10" on one line between the arrows */
  .admin .cal-head .chips { grid-column: 1 / -1; }
  /* the console's screens scroll sideways as one row of pills (the half-shown pill is the cue) */
  .adm-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav a { flex-shrink: 0; }
  .adm-who { grid-auto-flow: column; justify-items: start; align-items: center; gap: 14px; }
  .adm-panel .bk-row.two, .appt-body .bk-row.two { grid-template-columns: 1fr; }
  .fld-label { line-height: 1.3; }
}

/* ---------------------------------------------------------------- reviews (the owner's design: gold reviews as assay certificates)
   A plain .wrap column with the shared page head (the section drops its own gutter: .brand-page). A review of a
   $200+ detail (is_gold, doc 22) is a certificate: gold border, inner hairline frame, faint alchemy circles in a
   corner, a still sheen, the round Au seal, a gold pill, the words in the brand's italic serif. Ordinary reviews
   are simpler dark cards with ✦ stars. Each card reveals once as it enters (data-reveal → .in): the certificate's
   stars light one after another, a line of light travels its edge once and the name fades in; reduced motion
   shows everything at once. */
.book-page.brand-page { padding-inline: 0; }
.rv-page { display: grid; gap: var(--s-4); }
.rv-page .page-head { margin-bottom: var(--s-2); }
.rv-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.rv { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: var(--r-lg); border: 1px solid var(--hair); background: linear-gradient(180deg, #121212, #0a0a0a); }
.rv-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stars { display: inline-flex; gap: 6px; font-size: 16px; line-height: 1; color: var(--gold-ink); }
.stars i { font-style: normal; opacity: .25; }
.stars i.on { opacity: 1; }
.rv-gold { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: linear-gradient(105deg, #9a7322 0%, #d9ac3f 30%, #f6dc96 52%, #efc65c 70%, #9a7322 100%); color: var(--on-gold); font: 800 var(--fs-xs)/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.rv-body { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.6; }
.rv-who { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); font-size: 14px; }
.rv-who b { color: var(--ink); font-weight: 700; }
.rv-who span::before { content: "·"; margin-right: 10px; color: var(--muted); }
.rv-reply { display: grid; gap: 8px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--hair); background: rgba(0, 0, 0, .45); }
.rv-reply .eyebrow { letter-spacing: .28em; }
.rv-reply p { margin: 0; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.55; }
/* the certificate */
.rv.cert { flex: 1.45 1 520px; overflow: hidden; isolation: isolate; gap: 0; padding: 44px 46px 40px; border-color: rgba(226, 185, 82, .55); background: radial-gradient(120% 80% at 0% 0%, rgba(226, 185, 82, .17), transparent 55%), linear-gradient(180deg, #15120a, #070707); box-shadow: 0 34px 80px -44px rgba(226, 185, 82, .55), inset 0 1px 0 rgba(255, 243, 207, .2); }
.rv-frame { position: absolute; inset: 10px; border-radius: 16px; border: 1px solid rgba(226, 185, 82, .26); pointer-events: none; }
.rv-circles { position: absolute; right: -96px; bottom: -110px; width: 320px; height: 320px; color: rgba(226, 185, 82, .13); pointer-events: none; }
.rv-sheen { position: absolute; inset: -20% -40%; background: linear-gradient(118deg, rgba(255, 248, 220, 0) 40%, rgba(255, 248, 220, .09) 50%, rgba(255, 248, 220, 0) 60%); pointer-events: none; }
.rv-seal { position: absolute; right: 34px; top: 30px; width: 96px; height: 96px; }
.rv-seal .ring { fill: rgba(226, 185, 82, .06); stroke: #e2b952; stroke-width: 1.2; }
.rv-seal .inner { fill: none; stroke: rgba(226, 185, 82, .55); stroke-width: .8; }
.rv-seal text { fill: #e2b952; font: 700 8.6px var(--font-ui); letter-spacing: 2.2px; }
.rv-seal .au { fill: #f8dd98; font: 400 20px var(--font-display); letter-spacing: 0; }
.rv-main { position: relative; display: grid; gap: 22px; padding-right: 110px; }
.rv.cert .stars { font-size: 18px; color: var(--gold-hi); }
.rv.cert .rv-body { font: italic 500 30px/1.3 var(--font-script); }
.rv.cert .rv-reply { position: relative; margin-top: 28px; }
/* the reveal, once (.in): the stars from the 200ms mark, 90ms apart; the name after them; a head of light runs
   the rim once (a conic gradient whose start, --ra, turns a full circle) and fades */
@property --ra { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.rv.cert .stars i.on { opacity: .25; transition: opacity .25s var(--ease), text-shadow .25s var(--ease); transition-delay: calc(var(--s) * 90ms + 200ms); }
.rv.cert.in .stars i.on { opacity: 1; text-shadow: 0 0 10px rgba(248, 221, 152, .6); }
.rv.cert .rv-who { opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease) .85s, transform .5s var(--ease) .85s; }
.rv.cert.in .rv-who { opacity: 1; transform: none; }
.rv.cert.in::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ra), transparent 0 66%, rgba(226, 185, 82, .35) 88%, #fff3cf 98%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: rimTravel 1.1s var(--ease-in-out) .2s 1 both;
}
@keyframes rimTravel { 0% { --ra: 0deg; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { --ra: 360deg; opacity: 0; } }
/* under the grid: Book Now (and the Google link once the owner has it) with the sign-in note; or, before the
   first review, the empty state */
.rv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.rv-foot .bk-actions { justify-content: flex-start; }
.rv-empty { display: grid; justify-items: center; gap: 18px; padding: clamp(40px, 7vw, 72px) var(--s-3); text-align: center; border-radius: var(--r-lg); border: 1px solid var(--hair); background: linear-gradient(180deg, #121212, #0a0a0a); }
.rv-empty .stars { font-size: 22px; gap: 10px; }
.rv-empty .stars i { opacity: .35; }
.rv-empty p { margin: 0; max-width: 46ch; color: var(--ink-2); }
.rv-empty .bk-actions { margin-top: 6px; }
/* the customer's own review under a completed detail (Appointments) */
.rv-mine { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: rgba(226, 185, 82, .05); }
.rv-mine p { margin: 0; color: var(--ink); }
.star-pick { display: flex; gap: 6px; }
.star-pick button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .3); color: var(--muted); font-size: 22px; cursor: pointer; touch-action: manipulation; transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.star-pick button.on { color: var(--gold-hi); border-color: var(--gold); text-shadow: 0 0 12px rgba(226, 185, 82, .6); }
/* the white studio: white cards, the certificate's gold on ivory in the deep gold that passes */
:where([data-theme="light"]) .rv, :where([data-theme="light"]) .rv-empty { background: var(--panel); border-color: rgba(20, 18, 12, .08); box-shadow: 0 24px 40px -34px rgba(20, 18, 12, .35), 0 0 0 1px rgba(20, 18, 12, .06); }
:where([data-theme="light"]) .rv.cert { background: radial-gradient(120% 80% at 0% 0%, rgba(184, 144, 44, .14), transparent 55%), var(--panel); border-color: rgba(184, 144, 44, .55); }
:where([data-theme="light"]) .rv-frame { border-color: rgba(184, 144, 44, .3); }
:where([data-theme="light"]) .rv-circles { color: rgba(184, 144, 44, .16); }
:where([data-theme="light"]) .rv-sheen { background: linear-gradient(118deg, rgba(184, 144, 44, 0) 40%, rgba(184, 144, 44, .06) 50%, rgba(184, 144, 44, 0) 60%); }
:where([data-theme="light"]) .rv-seal .ring { fill: rgba(184, 144, 44, .06); stroke: var(--gold); }
:where([data-theme="light"]) .rv-seal .inner { stroke: rgba(184, 144, 44, .5); }
:where([data-theme="light"]) .rv-seal text, :where([data-theme="light"]) .rv-seal .au { fill: var(--gold-deep); }
:where([data-theme="light"]) .rv.cert .stars { color: var(--gold-ink); }
:where([data-theme="light"]) .rv.cert.in .stars i.on { text-shadow: none; }
:where([data-theme="light"]) .rv-reply { background: rgba(20, 18, 12, .03); border-color: rgba(20, 18, 12, .08); }
:where([data-theme="light"]) .rv.gold::before, :where([data-theme="light"]) .appt.gold::before { opacity: .45; }
@media (max-width: 720px) {
  .rv { padding: 26px 22px; }
  .rv.cert { padding: 28px 22px 26px; }
  .rv-frame { inset: 8px; }
  .rv-seal { width: 64px; height: 64px; right: 20px; top: 20px; }
  .rv-main { gap: 16px; padding-right: 0; }
  .rv.cert .rv-head { min-height: 64px; padding-right: 76px; align-content: center; }
  .rv.cert .rv-body { font-size: 22px; }
  .rv-circles { right: -130px; bottom: -150px; }
  .rv-foot { flex-direction: column; align-items: stretch; }
  .rv-foot .bk-actions, .rv-empty .bk-actions { flex-direction: column; align-items: stretch; }
  .rv-foot .btn, .rv-empty .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {   /* stars, name and rim are simply there */
  .rv.cert .stars i.on, .rv.cert .rv-who { opacity: 1; transform: none; transition: none; }
  .rv.cert .stars i.on { text-shadow: 0 0 10px rgba(248, 221, 152, .6); }
  .rv.cert.in::after { content: none; }
}

/* =====================================================================
   The motion system (doc 18 design upgrade; doc 29 feedback; Oct 10 pass)
   One major moment per section. Tokens: --ease for arrivals, --ease-in-out
   for passes of light; press 90ms, hover 250-400ms, reveal 550/650ms with a
   60ms stagger capped at 3, rules 1.2s, light sweeps 1.6-1.8s, veil .9s.
   Only transform, opacity, filter (on images) and background-position move.
   Everything is covered by the reduced-motion block at the end.
   ===================================================================== */
/* the headline: letters rise one by one, then one line of gold light passes
   through them (painted inside the glyphs, never a box over them). The split
   is undone once the letters have landed; the sweep carries on in the word. */
@property --sx { syntax: "<percentage>"; inherits: true; initial-value: -15%; }
@property --hx { syntax: "<percentage>"; inherits: true; initial-value: 46%; }
.hero { transition: --hx .9s var(--ease); }
.hero h1 .l1 {
  position: relative;
  background:
    linear-gradient(118deg, transparent 34%, rgba(255, 250, 230, .75) 50%, transparent 66%) calc((var(--sx) - 15%) / .7) 0 / 30% 100% no-repeat,
    linear-gradient(100deg, transparent calc(var(--hx) - 22%), rgba(255, 246, 216, .5) var(--hx), transparent calc(var(--hx) + 18%)),
    var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  animation: letterSweep 1.6s var(--ease-in-out) 1.45s 1 forwards;
}
@keyframes letterSweep { from { --sx: -15%; } to { --sx: 115%; } }
/* the split word keeps the whole word's indent once, not once per letter (text-indent inherits), so the
   letters sit exactly where the word will be and nothing moves when they rejoin */
.hero h1 .l1.split { display: inline-flex; background: none; padding-inline-start: .14em; }
.hero h1 .l1.split .ch {
  display: inline-block;
  text-indent: 0;
  opacity: 0;
  transform: translateY(.45em) rotateX(-40deg);
  filter: blur(6px);
  animation: chIn .9s var(--ease) forwards;
  animation-delay: calc(380ms + var(--i) * 40ms);
  /* the same three layers as the word, mapped into this letter (9 letters, --i is its index) */
  background:
    linear-gradient(118deg, transparent 36%, rgba(255, 250, 230, .75) 50%, transparent 64%) calc(75% - 4.5 * var(--sx) + var(--i) * 50%) 0 / 300% 100% no-repeat,
    linear-gradient(100deg, transparent calc(var(--hx) * 9 - var(--i) * 100% - 198%), rgba(255, 246, 216, .5) calc(var(--hx) * 9 - var(--i) * 100%), transparent calc(var(--hx) * 9 - var(--i) * 100% + 162%)),
    var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
}
@keyframes chIn { to { opacity: 1; transform: none; filter: none; } }
/* without a pointer the reflection drifts slowly across the wordmark */
@media (hover: none) {
  .hero h1 .l1 { animation: letterSweep 1.6s var(--ease-in-out) 1.45s 1 forwards, paintDrift 14s var(--ease-in-out) 3s infinite alternate; }
}
@keyframes paintDrift { from { --hx: 30%; } to { --hx: 70%; } }
.hero-inner { will-change: transform, opacity; }
/* the hero intro waits for the shader (html.ready, set by app.js two frames after the hero starts),
   so the first frames are never swallowed by the compile */
.hero [data-in], .hero h1 .l1, .hero h1 .l1.split .ch { animation-play-state: paused; }
html.ready .hero [data-in], html.ready .hero h1 .l1, html.ready .hero h1 .l1.split .ch { animation-play-state: running; }

/* sections rise in as they enter; children staggered 60ms, capped at 3 (--k, set per parent by app.js).
   The hidden state lives on :not(.in) so hover transforms win once an element is in; app.js then drops
   data-rise, so the element's own transitions take over. */
[data-rise] { transition: opacity .55s var(--ease), transform .65s var(--ease); transition-delay: calc(var(--k, 0) * 60ms); }
[data-rise]:not(.in) { opacity: 0; transform: translateY(18px); }
.section-head[data-rise] .rule { transition-delay: .5s; }
/* a rebuilt app page (a card expanded, a list refreshed) lands in its final state: app.js adds .settled with .in,
   so the one-time reveals (a drawn rule, lit stars, the gold pill, the rim light) never replay */
.settled, .appt.gold.settled::before, .rv.cert.settled .stars i.on, .rv.cert.settled .rv-who, .appt.settled .appt-glow, .appt.settled .appt-status, .appt.settled .appt-status::before { transition: none; }
.rv.cert.settled::after { content: none; }

/* hover = a rim of gold light on the edge that follows the pointer (--mx/--my from app.js) */
.glint { --mx: 50%; --my: 50%; }
.price-card, .why-item, .appt, .rv { position: relative; }
.price-card.glint::after, .why-item.glint::after, .svc-opt.glint::after, .appt.glint::after, .rv.glint:not(.gold)::after, .work-item.glint::after, .el-tile.glint::after, .tip.glint::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(320px circle at var(--mx) var(--my), var(--gold-hi), rgba(226, 185, 82, .25) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: rimIn .35s var(--ease) forwards;
}
@keyframes rimIn { to { opacity: 1; } }
.price-card.glint, .svc-opt.glint { --sheen: radial-gradient(260px circle at var(--mx) var(--my), rgba(248, 221, 152, .06), transparent 55%); }
/* gold reviews and gold appointments keep a rim all the time */
.rv.gold::before, .appt.gold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--gold-hi), rgba(226, 185, 82, .25) 45%, rgba(226, 185, 82, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .9;
  pointer-events: none;
  z-index: 2;
}
.btn-gold.glint { background-position: calc(var(--mx) * 0.6 + 20%) 0; }

/* press: one feel for every pressable (.pressed from a delegated pointerdown in app.js, 80ms release) */
.btn.launch, .btn:disabled { transform: none !important; }
.pressed:not(.icon-btn) { transform: translateY(1px) scale(.97) !important; transition-duration: .09s; }

/* chips and cards pop once, the moment they are chosen (.just, dropped by ui.js when the pop ends: a rebuilt
   step shows a chosen thing still, never popping again) */
.choice-item.just { animation: pick .35s var(--ease); }
@keyframes pick { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
.svc-opt.just { animation: pickLift .4s var(--ease); }
@keyframes pickLift { 0% { transform: translateY(0) scale(.98); } 60% { transform: translateY(-5px) scale(1.01); } 100% { transform: translateY(-3px) scale(1); } }
/* the chosen service (owner's move 15): a 1px rim of gold light on its edge, and the moment it is chosen a
   head of light travels the rim once (.glow, from booking.js) and settles; the "Selected" mark lands as the
   light comes round. --ra is the conic start, registered with the reviews' certificate above. */
.svc-opt.on::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ra), var(--gold-hi) 0deg, rgba(226, 185, 82, .35) 60deg, rgba(226, 185, 82, .15) 180deg, rgba(226, 185, 82, .35) 300deg, var(--gold-hi) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 1;
  animation: none;
  pointer-events: none;
}
.svc-opt.glow::after { animation: rimOnce 1.1s var(--ease-in-out) 1; }
@keyframes rimOnce { from { --ra: 0deg; } to { --ra: 360deg; } }
.svc-opt.on .svc-opt-check { transition-delay: .5s; }
/* a chosen chip or card keeps a still rim (the same light, from the top-left corner) */
.choice-item.on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--gold-hi), rgba(226, 185, 82, .25) 45%, rgba(226, 185, 82, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .9;
  pointer-events: none;
}
.choice-item.time.on::after { content: none; }   /* the filled time needs no rim */
/* the current booking step breathes once, when the step changes (.fresh), not on a rebuild of the same step */
.bk-progress li.current.fresh .num { animation: stepIn2 .6s var(--ease); }
@keyframes stepIn2 { 0% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(226, 185, 82, .6); } 100% { transform: scale(1); box-shadow: 0 0 18px -2px rgba(226, 185, 82, .7); } }
/* buttons: a soft lift and a light sweep on hover */
.btn-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg, transparent 40%, rgba(255, 255, 255, .08) 50%, transparent 60%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; }
.btn-glass { position: relative; overflow: hidden; }
.btn-glass:hover::after { transform: translateX(120%); }
.menu nav a:hover { transform: translateX(4px); }
/* taglines in the brand's italic serif */
.hero .sub { font-family: var(--font-ui-caps); }
.wash-title p.big { font-weight: 300; }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: var(--ink-2); font: 700 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: border-color .3s var(--ease), color .3s var(--ease); }
.theme-btn:hover { border-color: var(--gold); color: var(--gold-hi); }
@media (prefers-reduced-motion: reduce) {
  [data-rise]:not(.in) { opacity: 1; transform: none; }
  .rule { transform: scaleX(1); }
  .menu nav a { transition: none !important; }   /* the items are there the frame the menu opens */
  .hero h1 .l1 { animation: none; --hx: 46%; }
  .hero h1 .l1.split .ch { opacity: 1; transform: none; filter: none; animation: none; }
  .svc-opt.just, .choice-item.just, .bk-progress li.current.fresh .num, .svc-opt.glow::after, .times .choice-item { animation: none; }   /* chosen things are simply chosen */
  .svc-opt.on .svc-opt-check { transition-delay: 0s; }
  .cal-day.on::after { content: none; }
}

/* ---------------------------------------------------------------- content pages (Tips, FAQ, About; content.js)
   A plain 860px column with the brand pages' head: the lead sentence as typography (.bk-lead), the draft
   note a small pill. Tips are open cards in two columns, the FAQ unfolds, About puts the words beside a photo. */
.content-page { width: min(100%, 860px); display: grid; gap: var(--s-4); }
.content-page .page-head { margin-bottom: var(--s-2); }
.content-page .bk-actions { justify-content: center; }
.bk-lead { margin: 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.page-head p.bk-lead { max-width: 60ch; }
.page-head .script { margin: 4px 0 0; }
.page-head .emblem { margin-bottom: 8px; }
.faq-item a, .bk-lead a { color: var(--gold-hi); text-decoration: none; border-bottom: 1px solid var(--line); white-space: nowrap; }
.faq-item a:hover, .bk-lead a:hover { border-bottom-color: var(--gold-hi); }
/* tips: a grid of open cards, each a gold title, a short gold line and the words; the hover is the rim light (.glint) */
.tip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tip { position: relative; padding: 22px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, #111111, #080808); transition: border-color .35s var(--ease); }
.tip:hover { border-color: var(--line); }
.tip-title { margin: 0; font: 600 15px/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); }
.tip .line { width: 44px; height: 1px; margin: 12px 0; background: linear-gradient(90deg, var(--gold), transparent); }
.tip p { margin: 0; color: var(--ink-2); font-size: 15px; }
/* the FAQ: the answer's grid row grows from 0fr to 1fr (.32s) and shrinks back (.22s) before the item closes
   (.is-open from content.js; the plus turns into a cross, no overshoot) */
.faq { display: grid; gap: 8px; }
.faq-item { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); padding: 0 18px; transition: border-color .3s var(--ease); }
.faq-item:hover { border-color: var(--line-soft); }
.faq-item.is-open { border-color: var(--line); }
.faq-item summary { cursor: pointer; padding: 15px 0; font: 600 15.5px/1.4 var(--font-ui); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 14px; touch-action: manipulation; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; color: var(--gold); font-weight: 400; font-size: 20px; line-height: 1; transition: transform .3s var(--ease), color .3s var(--ease); }
.faq-item summary:hover::after { color: var(--gold-hi); }
.faq-item.is-open summary::after { transform: rotate(45deg); }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--ease); }
.faq-item.is-open .faq-body { grid-template-rows: 1fr; transition-duration: .32s; }
.faq-body > div { overflow: hidden; }
.faq-item p { margin: 0; padding-bottom: 16px; color: var(--ink-2); line-height: 1.6; max-width: 65ch; }
/* about: the words beside the owner's photo (kept dark in both themes) */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.about { display: grid; gap: 14px; }
.about p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; }
.about p:first-child { font-size: 19px; color: var(--ink); }
.about-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); border: 1px solid var(--hair); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9); }
.about-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 40%; }
:where([data-theme="light"]) .about-photo { border-color: rgba(20, 18, 12, .1); box-shadow: 0 24px 40px -34px rgba(20, 18, 12, .5); }
@media (max-width: 720px) {
  .tip-grid { grid-template-columns: 1fr; gap: 10px; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .content-page .bk-actions { flex-direction: column; align-items: stretch; }
  .content-page .bk-actions .btn { width: 100%; }
}
@media (max-width: 640px) { .tip { padding: 18px; } }

/* ---------------------------------------------------------------- the owner's photos (design upgrade) */
/* our work: an editorial strip. The tiles start on the content column, snap softly under a mouse (firmly under a
   finger), drift a little with the page (--py from app.js) and can be dragged, stepped with the arrows or swiped. */
.work { padding-bottom: clamp(60px, 10vh, 120px); overflow: hidden; }
.work .section-head { position: relative; }
.work-nav { position: absolute; right: 0; bottom: 0; display: flex; gap: 8px; }
.work-nav .icon-btn svg { width: 20px; height: 20px; }
@media (max-width: 980px) { .work-nav { position: static; margin-top: 8px; } }   /* under the rule, centred, where the head is narrow */
.work-strip { --py: 0px; display: flex; gap: 14px; padding: 6px max(var(--gutter), calc((100% - var(--col)) / 2 + var(--gutter))) 18px; scroll-padding-inline: max(var(--gutter), calc((100% - var(--col)) / 2 + var(--gutter))); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.work-strip::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .work-strip { scroll-snap-type: x proximity; cursor: grab; } }
.work-strip.dragging, .work-strip.settling { scroll-snap-type: none; }
.work-strip.dragging { cursor: grabbing; user-select: none; }
.work-strip.dragging .work-btn { cursor: grabbing; }
.work-item { flex: 0 0 min(78vw, 440px); margin: 0; scroll-snap-align: start; position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 4; background: var(--panel); border: 1px solid rgba(255, 255, 255, .07); isolation: isolate; touch-action: manipulation; transition: transform .35s var(--ease), border-color .5s var(--ease); }
.work-item:hover, .work-item:has(:focus-visible) { transform: translateY(-3px); border-color: rgba(226, 185, 82, .5); }
/* the photo is a real button (opens the lightbox); the caption sits over it and lets presses through */
.work-btn, .gal-btn { all: unset; display: block; cursor: zoom-in; width: 100%; height: 100%; }
.work-btn:focus-visible, .gal-btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -4px; border-radius: inherit; }
/* the slow zoom lives on the button; the scroll drift on the taller picture inside it is never transitioned */
.work-item .work-btn { position: relative; transform: scale(1.03); transition: transform 1.1s var(--ease); }
.work-item:hover .work-btn, .work-item:has(:focus-visible) .work-btn { transform: scale(1.06); }
.work-item img { position: absolute; left: 0; right: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; transform: translateY(var(--py, 0px)); filter: brightness(.96); will-change: transform; }
.work-progress { height: 1px; margin: 0 auto 28px; background: var(--hair); overflow: hidden; }
.work-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transform: scaleX(var(--wp, .35)); transform-origin: 0 50%; }
.work-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); color: #f7f7f4; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; pointer-events: none; }
.work-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; background: rgba(0, 0, 0, .9); opacity: 0; transition: opacity .3s var(--ease); outline: none; }
.lightbox.on { opacity: 1; }
.lightbox img { max-width: min(100%, 1100px); max-height: 82vh; border-radius: var(--r-md); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 1); transform: scale(.96); transition: transform .35s var(--ease); }
.lightbox.on img { transform: none; }
.lightbox-cap { margin: 0; color: var(--ink-2); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.lightbox .icon-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: var(--gold-hi); }
.lightbox .icon-btn svg { width: 20px; height: 20px; }
.lightbox-x { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }

/* ---------------------------------------------------------------- the gallery */
.gal-page { padding-inline: var(--gutter); }
.gal { width: min(100%, var(--col)); margin-inline: auto; display: grid; gap: 22px; }
.gal .page-head { margin-bottom: var(--s-2); }
.gal-filters { gap: 8px; }
.gal-filters .choice-item { min-height: 44px; }
.gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 14px; perspective: 1200px; }
.gal-tile { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); border: 1px solid rgba(255, 255, 255, .07); isolation: isolate; touch-action: manipulation;
  opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .55s var(--ease), transform .65s var(--ease), border-color .4s var(--ease); transition-delay: calc(min(var(--i, 0), 3) * 60ms); transform-style: preserve-3d; }
.gal-tile.tall { grid-row: span 2; }
.gal-tile.in { opacity: 1; transform: none; }
/* once a tile has arrived (gallery.js adds .settled on transitionend) the tilt and untilt are quick */
.gal-tile.settled { transition: transform .28s var(--ease), border-color .4s var(--ease); transition-delay: 0s; }
.gal-tile.in.tilt { transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) scale(1.02); border-color: rgba(226, 185, 82, .5); z-index: 2; }
/* the picture is taller than its tile and drifts with the page (--drift from gallery.js, never transitioned) */
.gal-media { position: absolute; inset: -20px 0; transform: translateY(var(--drift, 0px)); will-change: transform; }
.gal-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s var(--ease); filter: brightness(.95); }
.gal-tile:hover .gal-media img, .gal-tile:has(:focus-visible) .gal-media img { transform: scale(1.06); filter: brightness(1); }
.gal-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(248, 221, 152, .18), transparent 55%); opacity: 0; transition: opacity .35s var(--ease); z-index: 1; }
.gal-tile.tilt::after { opacity: 1; }
/* the caption sits on the photo's own dark scrim in both themes, so its colours are literal; one line, ellipsed */
.gal-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 44px 16px 14px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .85)); color: #f7f7f4; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; transform: translateY(8px); opacity: .85; pointer-events: none; transition: transform .45s var(--ease), opacity .45s var(--ease); }
.gal-tile figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-tile:hover figcaption, .gal-tile:has(:focus-visible) figcaption { transform: none; opacity: 1; }
.gal-tile figcaption i { font-style: normal; color: #f8dd98; opacity: 0; transform: translateX(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.gal-tile:hover figcaption i, .gal-tile:has(:focus-visible) figcaption i { opacity: 1; transform: none; }
@media (hover: none) { .gal-tile figcaption i { display: none; } }   /* a finger cannot hover: no "View" cue to wait for */
.gal-box img { animation: none; }
.gal-box img.swap { animation: galSwap .4s var(--ease); }
@keyframes galSwap { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.gal-prev, .gal-next { position: absolute; top: calc(50% - 22px); z-index: 2; transition: transform .45s var(--ease), box-shadow .45s var(--ease), color .3s var(--ease); }
.gal-prev:hover, .gal-next:hover { transform: none; }
.gal-prev:active, .gal-next:active, .gal-prev.pressed, .gal-next.pressed { transform: translateY(.5px) scale(.985); }
.gal-prev { left: 16px; } .gal-next { right: 16px; }
.lightbox-foot { display: flex; align-items: center; gap: 16px; }
.gal-count { color: var(--muted); font-size: 12px; letter-spacing: .1em; }
@media (max-width: 980px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; } }
@media (max-width: 720px) {
  .gal-grid { gap: 8px; grid-auto-rows: 150px; }
  .gal-tile { border-radius: var(--r-md); }
  .gal-tile figcaption { font-size: 11px; letter-spacing: .12em; padding: 28px 8px 10px; line-height: 1.25; }
  .gal-prev, .gal-next { top: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .gal-tile { opacity: 1; transform: none; transition: none; } .gal-tile.in.tilt { transform: none; } .gal-media { transform: none; } }

/* ---------------------------------------------------------------- the Transmutation (the owner's before / after design, gallery.js compare())
   The after photo lies under a before layer clipped from the right (--cr); the gold seam, its ‹ ✦ › handle
   and the clip all follow --pos, which the invisible range input over the frame writes on every input
   (nothing is transitioned, so the seam tracks the finger). The frame is a photo card: dark in both
   themes. With no before photo yet the before layer is the owner's hatched placeholder. */
.transmute { --pos: 46%; --cr: 54%; position: relative; padding-block: var(--s-3) var(--s-4); background: radial-gradient(50% 36% at 50% 26%, rgba(226, 185, 82, .08), transparent 70%); }
.transmute .section-head { margin-bottom: var(--s-4); }
.transmute .script { font: italic 500 clamp(21px, 2.4vw, 26px)/1.3 var(--font-script); color: var(--gold-hi); }
.tm-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; isolation: isolate; border: 1px solid var(--hair); background: #0a0a0a; color: #f7f7f4; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 243, 207, .06); }
.tm-frame:has(.tm-range:focus-visible) { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.tm-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.tm-before { position: absolute; inset: 0; clip-path: inset(0 var(--cr) 0 0); background: repeating-linear-gradient(135deg, #0c0c0c 0 14px, #121212 14px 28px); }
/* the placeholder note sits low on whatever is left of the before side, clear of the handle on the seam; once that side is
   narrower than the note, the note slides under the seam instead of reflowing a word per line */
.tm-ph { position: absolute; left: 0; bottom: 0; width: var(--pos); min-width: 240px; display: grid; justify-items: center; padding: 12px 12px 28px; }
.tm-ph div { display: grid; gap: 10px; justify-items: center; max-width: 100%; padding: 22px 28px; border-radius: 16px; border: 1px dashed rgba(226, 185, 82, .45); background: rgba(0, 0, 0, .55); text-align: center; }
.tm-ph b { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .28em; text-transform: uppercase; color: #e2b952; }
.tm-ph span { max-width: 24ch; font-size: 14px; line-height: 1.45; color: #bdbdb8; }
.tm-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, .5) 100%); }
.tm-seam { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; pointer-events: none; background: linear-gradient(180deg, #f8dd98, #e2b952 50%, #f8dd98); box-shadow: 0 0 18px rgba(226, 185, 82, .75), 0 0 2px #fff3cf; }
.tm-handle { position: absolute; top: 50%; left: var(--pos); width: 62px; height: 62px; margin: -31px 0 0 -31px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 50%; border: 1px solid rgba(226, 185, 82, .75); background: rgba(8, 8, 8, .8); box-shadow: 0 0 28px rgba(226, 185, 82, .45); font: 400 18px/1 var(--font-display); color: #f8dd98; pointer-events: none; }
.tm-handle i { font-style: normal; font-size: 14px; }
.tm-pill { position: absolute; top: 24px; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 10, 10, .72); font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: #bdbdb8; white-space: nowrap; pointer-events: none; }
.tm-pill.before { left: 24px; }
.tm-pill.after { right: 24px; border-color: rgba(226, 185, 82, .45); color: #e2b952; }
/* the control: the whole frame is the slider (vertical swipes still scroll the page) */
.tm-range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.tm-thumbs { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.tm-pair { display: grid; gap: 10px; width: 168px; font: 600 var(--fs-sm)/1.3 var(--font-ui); color: var(--ink); }
.tm-pair.next { color: var(--muted); }
.tm-thumb { display: block; position: relative; height: 96px; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); background: #0b0b0b; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.tm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tm-thumb:hover { border-color: rgba(226, 185, 82, .5); }
.tm-thumb[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(226, 185, 82, .35); }
.tm-next { height: 96px; display: grid; place-items: center; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .16); background: #0b0b0b; font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
:where([data-theme="light"]) .transmute { background: radial-gradient(50% 36% at 50% 26%, rgba(184, 144, 44, .1), transparent 70%); }
:where([data-theme="light"]) .tm-thumb { border-color: rgba(20, 18, 12, .12); }
:where([data-theme="light"]) .tm-next { background: var(--panel-2); border-color: rgba(20, 18, 12, .22); }
@media (max-width: 720px) {
  .tm-frame { border-radius: var(--r-lg); }
  .tm-pill { top: 14px; } .tm-pill.before { left: 14px; } .tm-pill.after { right: 14px; }
  .tm-handle { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 16px; }
  .tm-ph { min-width: 150px; padding-bottom: 16px; }
  .tm-ph div { gap: 8px; padding: 14px 12px; }
  .tm-ph b { font-size: 11px; letter-spacing: .2em; }
  .tm-ph span { font-size: 13px; }
  /* the three pairs sit three across (about 113px tiles at 390), never a lone one on a second row */
  .tm-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tm-pair { width: auto; font-size: 12px; }
  .tm-thumb, .tm-next { height: 80px; }
}
@media (max-width: 640px) { .tm-frame { aspect-ratio: 1 / 1; } }   /* the photos are portrait: a phone gets a square frame, with room for the handle and the note */

/* =====================================================================
   Light mode, the white studio (doc 29; Oct 10 pass). Not an inversion:
   a cyclorama of cream (--bg) falling to a warm-grey floor (--floor), the
   black photo cards kept dark and grounded by contact shadows, gold as
   light (hairlines, rims, the gradients) and, where it is text under
   24px, the deep gold ink (--gold-ink, 6:1 on cream). data-theme="light"
   on <html>; the menu has the toggle; the head script applies the saved
   theme before paint. Component overrides use :where() (0,1,0), so every
   state rule above (selected, open, error, hover) still wins; the states
   whose colours differ in the studio are written out after them.
   ===================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #faf8f4;
  --bg-2: #f1ede5;
  --floor: #e6e1d7;
  --panel: #fffdf8;
  --panel-2: #f9f6ef;
  --glass: rgba(255, 253, 248, .7);
  --glass-strong: rgba(255, 253, 248, .92);
  --hair: rgba(20, 18, 12, .08);
  --line: rgba(184, 144, 44, .4);
  --line-soft: rgba(184, 144, 44, .18);
  --border-strong: rgba(20, 18, 12, .46);   /* inputs: 3:1 on the panel */
  --ink: #141311;
  --ink-2: #4b4942;
  --muted: #67645c;
  --gold: #b8902c;
  --gold-hi: #7a5d14;
  --gold-ink: #7a5d14;
  --gold-pale: #e9d9a8;
  --gold-deep: #7a5d14;
  --gold-grad: linear-gradient(105deg, #9a7322 0%, #d9ac3f 22%, #f6dc96 46%, #fffbe8 52%, #efc65c 62%, #c3932c 82%, #9a7322 100%);
  --gold-text: linear-gradient(180deg, #b8902c 0%, #d4ad4a 40%, #9c7820 70%, #c9a040 100%);
  --on-gold: #110c02;
  --danger: #b3412f;
  --danger-text: #a63a2a;
}
/* ---- the chrome: bar, buttons, menu */
:where([data-theme="light"]) .bar { background: rgba(255, 255, 255, .72); border-color: rgba(20, 18, 12, .08); box-shadow: 0 18px 50px -24px rgba(40, 30, 10, .25); }
:where([data-theme="light"]) .topbar.scrolled .bar { background: rgba(255, 255, 255, .86); border-color: var(--line-soft); }
:where([data-theme="light"]) .topbar.over-wash .bar { background: rgba(255, 253, 248, .94); }
:where([data-theme="light"]) .icon-btn { background: linear-gradient(180deg, #fffdf8, #f0ece2); border-color: rgba(20, 18, 12, .1); box-shadow: inset 0 1px 0 #fff, 0 4px 14px -8px rgba(40, 30, 10, .4); }
/* the gold for icons and large numerals (3.8:1, the large-text floor); small gold text is --gold-ink */
[data-theme="light"] :is(.icon-btn, .amount, .adm-tile b, .el-row i) { color: #a37c22; }
[data-theme="light"] .icon-btn:hover { color: var(--gold-hi); }
[data-theme="light"] .icon-btn:active, [data-theme="light"] .icon-btn.pressed { box-shadow: inset 0 2px 6px rgba(40, 30, 10, .22), inset 0 0 0 1px rgba(184, 144, 44, .45), 0 0 18px -4px rgba(184, 144, 44, .45); }
:where([data-theme="light"]) .btn-gold { border-color: rgba(122, 93, 20, .28); box-shadow: 0 12px 28px -14px rgba(122, 93, 20, .55), inset 0 1px 0 rgba(255, 248, 225, .7), inset 0 -1px 0 rgba(90, 55, 10, .4); }
[data-theme="light"] .btn-gold:hover:not(:disabled) { box-shadow: 0 18px 36px -14px rgba(122, 93, 20, .6), 0 0 0 1px rgba(184, 144, 44, .4), inset 0 1px 0 rgba(255, 248, 225, .8); }
:where([data-theme="light"]) .btn-glass { background: #fff; border-color: rgba(20, 18, 12, .22); color: var(--ink); }
:where([data-theme="light"]) .btn-glass::after { background: linear-gradient(118deg, transparent 40%, rgba(184, 144, 44, .1) 50%, transparent 60%); }
:where([data-theme="light"]) .theme-btn, :where([data-theme="light"]) .mini-btn { background: #fff; border-color: rgba(20, 18, 12, .22); }
:where([data-theme="light"]) .mini-btn { background: rgba(184, 144, 44, .1); border-color: var(--gold); }
:where([data-theme="light"]) .menu { background: radial-gradient(120% 60% at 0% 0%, rgba(184, 144, 44, .1), transparent 60%), linear-gradient(180deg, rgba(255, 253, 248, .96), rgba(241, 237, 229, .97)); box-shadow: 30px 0 80px -30px rgba(40, 30, 10, .3); }
:where([data-theme="light"]) .menu nav a { border-bottom-color: rgba(20, 18, 12, .06); }
:where([data-theme="light"]) .menu nav a::before { background: var(--gold); box-shadow: none; }
:where([data-theme="light"]) .scrim { background: rgba(60, 50, 30, .35); }
:where([data-theme="light"]) .toast { background: rgba(255, 253, 248, .97); color: var(--ink); box-shadow: 0 20px 50px -20px rgba(40, 30, 10, .4); }
:where([data-theme="light"]) .lightbox { background: rgba(250, 248, 244, .94); }
:where([data-theme="light"]) .lightbox .icon-btn { background: rgba(20, 18, 12, .05); border-color: rgba(20, 18, 12, .22); }
:where([data-theme="light"]) .lightbox img { box-shadow: 0 40px 100px -40px rgba(40, 30, 10, .55); }
[data-theme="light"] ::selection { background: rgba(184, 144, 44, .3); color: var(--ink); }
[data-theme="light"] :focus-visible { outline-color: #7a5d14; }
[data-theme="light"] .work-btn:focus-visible, [data-theme="light"] .gal-btn:focus-visible { outline-color: #f8dd98; }   /* on the photo itself */
:where([data-theme="light"]) .bk-muted a:hover { color: var(--gold); }
:where([data-theme="light"]) .link.danger:hover { color: var(--danger); }
/* ---- the hero: a cyclorama (white at the top, cream, the warm-grey floor at the edges), the studio preset's
   cream paint and grey beads multiplied in, one hairline of light with a soft bloom that slides a little
   with the page (--key from app.js), and the wordmark in charcoal with a grey reflection at --hx */
:where([data-theme="light"]) .hero { background: radial-gradient(120% 80% at 50% 0%, #fff 0%, var(--bg) 55%, var(--floor) 100%); }
:where([data-theme="light"]) .hero::before { background: radial-gradient(60% 46% at 50% 50%, rgba(250, 248, 244, .4), rgba(250, 248, 244, .1) 70%, transparent), linear-gradient(180deg, transparent 0%, transparent 72%, var(--bg) 100%); }
[data-theme="light"] .hero::after {   /* (0,2,0): it also replaces the no-WebGL fallback band */
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    linear-gradient(118deg, transparent 49.3%, rgba(212, 173, 74, 0) 49.7%, rgba(255, 250, 235, .9) 50%, rgba(212, 173, 74, 0) 50.3%, transparent 50.7%),
    linear-gradient(118deg, transparent 44%, rgba(212, 173, 74, .1) 50%, transparent 56%);
  transform: translateX(calc(var(--key, 0) * 10%));
  pointer-events: none;
}
:where([data-theme="light"]) .hero-gl { opacity: 1; mix-blend-mode: normal; }   /* the shader paints the cream paint, the softbox and the bar itself */
:where([data-theme="light"]) :is(.no-webgl, .no-hero-gl) .hero { background: radial-gradient(70% 55% at 50% 42%, #fff 0%, var(--bg) 60%, var(--floor) 100%); }
[data-theme="light"] .hero h1 .l1 {
  background:
    linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, .45) 50%, transparent 66%) calc((var(--sx) - 15%) / .7) 0 / 30% 100% no-repeat,
    linear-gradient(100deg, #141311 0%, #3a3835 calc(var(--hx) - 8%), #6a665f var(--hx), #3a3835 calc(var(--hx) + 8%), #141311 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .hero h1 .l1.split { background: none; }
[data-theme="light"] .hero h1 .l1.split .ch {
  background:
    linear-gradient(118deg, transparent 36%, rgba(255, 255, 255, .45) 50%, transparent 64%) calc(75% - 4.5 * var(--sx) + var(--i) * 50%) 0 / 300% 100% no-repeat,
    linear-gradient(100deg, #141311 calc(0% - var(--i) * 100%), #3a3835 calc(var(--hx) * 9 - var(--i) * 100% - 72%), #6a665f calc(var(--hx) * 9 - var(--i) * 100%), #3a3835 calc(var(--hx) * 9 - var(--i) * 100% + 72%), #141311 calc(900% - var(--i) * 100%));
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="light"] .hero h1 .l2 { color: var(--gold-ink); }
/* ---- the wash stage: white falling to the floor, a warm-grey backdrop behind the foam (.floor, fading as the
   rinse clears, --clean from foam.js), the beads picture multiplied in faintly, a thin cream veil */
:where([data-theme="light"]) .wash-stage { background: linear-gradient(180deg, #fff 0%, var(--bg) 58%, var(--floor) 100%); }
:where([data-theme="light"]) .wash-stage .floor { background: radial-gradient(70% 55% at 50% 42%, #e4ded2, #cfc6b3 70%); opacity: calc((1 - var(--clean, 0)) * .85); }   /* darker while the foam is on, so thin foam has something to be thin against */
:where([data-theme="light"]) .wash-bg { opacity: calc(.06 + var(--clean, 0) * .08); mix-blend-mode: multiply; }
:where([data-theme="light"]) .wash-shade { background: linear-gradient(180deg, var(--bg) 0%, rgba(250, 248, 244, .55) 16%, rgba(250, 248, 244, .35) 62%, var(--bg) 100%); opacity: 1; }
:where([data-theme="light"]) .wash-stage::after { opacity: .25; }
:where([data-theme="light"]) .svc-note { text-shadow: 0 1px 14px rgba(250, 248, 244, .9); }
/* ---- the dark photo cards keep the dark tokens: a black car in a white studio */
[data-theme="light"] :is(.svc-card, .gold-card) { --ink: #f7f7f4; --ink-2: #bdbdb8; --muted: #85857f; --gold: #e2b952; --gold-hi: #f8dd98; --gold-ink: #e2b952; }
[data-theme="light"] .svc-top .eyebrow { color: #e2b952; }   /* on the header's dark photo */
[data-theme="light"] .svc-top .svc-jump a { background: rgba(10, 10, 10, .55); border-color: rgba(255, 255, 255, .18); color: #f7f7f4; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }   /* the header keeps dark glass chips on its photo; the light rule for chips elsewhere would make them white with grey text */
[data-theme="light"] .svc-top .svc-jump a:hover { border-color: var(--gold); color: #f8dd98; }
:where([data-theme="light"]) .svc-card { border-color: rgba(20, 18, 12, .08); box-shadow: 0 44px 54px -42px rgba(20, 18, 12, .6), 0 2px 0 rgba(255, 255, 255, .5) inset, 0 0 0 1px rgba(20, 18, 12, .06); }
/* ---- surfaces: white cards with a contact shadow and a hairline ring; nested things one step warmer */
:where([data-theme="light"]) :is(.price-card, .why-item, .appt, .tip, .page .card, .svc-notes div, .adm-tile, .cal-col, .bk-more) { background: #fff; border-color: rgba(20, 18, 12, .08); box-shadow: 0 24px 40px -34px rgba(20, 18, 12, .35), 0 0 0 1px rgba(20, 18, 12, .06); }
:where([data-theme="light"]) .bk { background: var(--panel); border-color: rgba(20, 18, 12, .08); box-shadow: 0 40px 90px -50px rgba(40, 30, 10, .35), 0 0 0 1px rgba(20, 18, 12, .04); }
:where([data-theme="light"]) :is(.bk-note, .bk-chosen, .acct-static, .bk-summary-card, .adm-panel, .cal-item, .veh, .veh-form, .rv-reply, .faq-item, .bk-suggest) { background: var(--panel-2); border-color: rgba(20, 18, 12, .1); box-shadow: none; }
:where([data-theme="light"]) .price-card.featured, :where([data-theme="light"]) .appt.adm.gold { background: radial-gradient(120% 70% at 100% 0%, rgba(184, 144, 44, .12), transparent 60%), #fff; border-color: var(--line); }
:where([data-theme="light"]) .appt.gold { background: #fff; border-color: var(--line); }
:where([data-theme="light"]) .bk-suggest, :where([data-theme="light"]) .bk-notice { background: radial-gradient(100% 120% at 0% 0%, rgba(184, 144, 44, .12), transparent 60%), var(--panel-2); border-color: var(--line); }
:where([data-theme="light"]) .bk-preview { background: rgba(184, 144, 44, .08); }
:where([data-theme="light"]) .bk-nav { background: linear-gradient(180deg, rgba(255, 253, 248, .9), rgba(250, 247, 240, .97)); border-top-color: rgba(20, 18, 12, .08); }
:where([data-theme="light"]) .cta-band { background: radial-gradient(70% 90% at 50% 0%, rgba(184, 144, 44, .16), transparent 60%), linear-gradient(180deg, #fff, var(--bg-2)); border-color: var(--line-soft); box-shadow: 0 30px 60px -40px rgba(20, 18, 12, .4); }
:where([data-theme="light"]) .cta-band::after { background: linear-gradient(118deg, transparent 38%, rgba(184, 144, 44, .03) 44%, rgba(212, 173, 74, .1) 50%, rgba(184, 144, 44, .03) 56%, transparent 62%); }
:where([data-theme="light"]) .bead-bg { opacity: .12; mix-blend-mode: multiply; }
:where([data-theme="light"]) .bead-strip { opacity: .35; }
:where([data-theme="light"]) .footer { border-top-color: rgba(20, 18, 12, .06); }
:where([data-theme="light"]) :is(.foot-grid, .sum, .acct-sec, .sizes div, .contact-lines div, .pr-total, .appt-body, .svc-group + .svc-group) { border-color: rgba(20, 18, 12, .08); }
:where([data-theme="light"]) .work-progress { background: rgba(20, 18, 12, .1); }
:where([data-theme="light"]) :is(.work-item, .gal-tile) { border-color: rgba(20, 18, 12, .1); }
:where([data-theme="light"]) .step .n { background: #fff; border-color: rgba(20, 18, 12, .14); box-shadow: 0 0 0 6px var(--bg); }
/* ---- controls: inputs with a 3:1 border, chips and cards on a hairline, the ink focus ring kept */
:where([data-theme="light"]) .fld-box { background: #fff; border-color: var(--border-strong); box-shadow: inset 0 1px 2px rgba(40, 30, 10, .06); }
[data-theme="light"] .fld-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 144, 44, .18); }
:where([data-theme="light"]) .bk-toggle input { background: #fff; border-color: var(--border-strong); }
:where([data-theme="light"]) .star-pick button { background: #fff; border-color: var(--border-strong); }
:where([data-theme="light"]) :is(.choice-item, .cal-day.open) { background: #fff; border-color: var(--border-strong); }
:where([data-theme="light"]) :is(.adm-nav a, .svc-jump a, .appt-status) { background: #fff; border-color: rgba(20, 18, 12, .22); }
:where([data-theme="light"]) .choice-item { box-shadow: 0 1px 2px rgba(20, 18, 12, .05); }
:where([data-theme="light"]) .svc-opt { background: var(--sheen, none), #fff; border-color: rgba(20, 18, 12, .22); box-shadow: 0 1px 2px rgba(20, 18, 12, .05); }
:where([data-theme="light"]) .bk-progress .num { background: var(--panel); border-color: rgba(20, 18, 12, .22); }
:where([data-theme="light"]) .bk-progress li + li::before { background: rgba(20, 18, 12, .14); }
:where([data-theme="light"]) .cal-key::before { border-color: rgba(20, 18, 12, .25); }
:where([data-theme="light"]) .cal-day.full { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(184, 144, 44, .25) 6px 8px); }
:where([data-theme="light"]) .cal-col.blocked { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(184, 144, 44, .16) 8px 10px); }
:where([data-theme="light"]) .bk-errors { background: rgba(179, 65, 47, .07); border-color: rgba(179, 65, 47, .45); }
:where([data-theme="light"]) .veh.asking { border-color: rgba(179, 65, 47, .45); }
:where([data-theme="light"]) .bk-hp { color: transparent; }
/* ---- states whose colours differ in the studio (written after the surfaces, so they win) */
[data-theme="light"] :is(.svc-card, .why-item, .price-card, .work-item, .svc-opt, .gal-tile, .tip):hover { border-color: rgba(184, 144, 44, .55); }
[data-theme="light"] .svc-opt.on, [data-theme="light"] .price-card:hover { box-shadow: 0 18px 40px -26px rgba(40, 30, 10, .35), 0 0 0 1px rgba(184, 144, 44, .35), 0 0 30px -12px rgba(184, 144, 44, .35); }
[data-theme="light"] .svc-opt.on { background: var(--sheen, none), rgba(184, 144, 44, .08); border-color: var(--gold); }
[data-theme="light"] .choice-item.on { background: rgba(184, 144, 44, .1); border-color: var(--gold); box-shadow: 0 0 22px -12px rgba(122, 93, 20, .5); }
[data-theme="light"] .chips .choice-item.on { background: rgba(184, 144, 44, .14); }
[data-theme="light"] .choice-item.time.on { background: var(--gold-grad); color: var(--on-gold); box-shadow: 0 10px 22px -8px rgba(122, 93, 20, .45); }
[data-theme="light"] .cal-day.on { background: var(--gold-grad); color: var(--on-gold); border-color: var(--gold); box-shadow: 0 0 0 3px var(--panel), 0 10px 22px -8px rgba(122, 93, 20, .45); }
[data-theme="light"] .adm-nav a.on { background: var(--gold-grad); color: var(--on-gold); border-color: var(--gold); }
[data-theme="light"] .bk-progress li.current .num { box-shadow: 0 6px 18px -6px rgba(122, 93, 20, .55); }
[data-theme="light"] .st-confirmed .appt-status, [data-theme="light"] .st-in_progress .appt-status { border-color: var(--gold); background: rgba(184, 144, 44, .12); }
[data-theme="light"] .st-requested .appt-status, [data-theme="light"] .st-needs_information .appt-status { border-color: rgba(184, 144, 44, .5); }
[data-theme="light"] .st-completed .appt-status { border-color: rgba(20, 18, 12, .3); }
[data-theme="light"] .cal-item.gold { border-color: rgba(184, 144, 44, .6); }
[data-theme="light"] .star-pick button.on { text-shadow: none; box-shadow: 0 0 0 3px rgba(184, 144, 44, .14); }
[data-theme="light"] .has-error .fld-box { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179, 65, 47, .16); }
[data-theme="light"] .btn-glass:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-hi); }
/* the consoles in the studio: the empty slot, the open trigger, the danger button, today's column */
:where([data-theme="light"]) .bk-empty { border-color: rgba(20, 18, 12, .14); }
:where([data-theme="light"]) .adm-actions .btn.on { background: rgba(184, 144, 44, .1); }
:where([data-theme="light"]) .adm-actions .btn.danger { border-color: rgba(179, 65, 47, .4); color: var(--danger-text); }
:where([data-theme="light"]) .adm-actions .btn.danger:hover:not(:disabled), :where([data-theme="light"]) .adm-actions .btn.danger.on { background: rgba(179, 65, 47, .07); }
:where([data-theme="light"]) .cal-col.today { background: linear-gradient(rgba(184, 144, 44, .06), rgba(184, 144, 44, .06)), #fff; }
/* ---- the toggle: one 420ms cross-fade of the whole page (a view transition where the browser has one, else
   every colour transitions under html.theming for the same time); the sun becomes a moon in the menu's button */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; animation-timing-function: var(--ease-in-out); }
@media (prefers-reduced-motion: no-preference) {
  html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: background-color .42s var(--ease), background .42s var(--ease), color .42s var(--ease), border-color .42s var(--ease), box-shadow .42s var(--ease), opacity .42s var(--ease) !important; transition-delay: 0s !important; }
}
.theme-btn svg { overflow: visible; }
.theme-btn .sun, .theme-btn .moon { transform-origin: 50% 50%; transition: opacity .42s var(--ease), transform .42s var(--ease); }
.theme-btn .moon { opacity: 0; transform: rotate(-40deg) scale(.7); }
[data-theme="light"] .theme-btn .sun { opacity: 0; transform: rotate(60deg) scale(.6); }
[data-theme="light"] .theme-btn .moon { opacity: 1; transform: none; }

/* =====================================================================
   Phone reading floors (Oct 10 pass). Last in the file so they win over
   the app sections above on equal specificity. On a phone (<=640px):
   sentences 16px, helper text 14px, captions 11px, nothing smaller.
   ===================================================================== */
@media (max-width: 640px) {
  .why-item p, .step p, .footer p, .footer a, .bk-note, .checks, .sizes div, .contact-lines div, .pr-line, .sum-body, .svc-notes p, .saving, .fine-list, .rv-who, .appt-what, .faq-item summary, .tip p,
  .section-head p:not(.eyebrow), .page-head p:not(.eyebrow), .show-head p, .el-panel p, .bead-foot .wg p, .rv-reply p { font-size: 16px; }
  .bk-muted, .fld-msg, .choice-msg, .choice-sub, .svc-opt-desc, .bk-preview, .svc-note, .cal-item, .fine, .adm-tile small, .bk-h2 small, .appt-when span, .appt-when .appt-hold, .appt-ref, .adm-history summary, .adm-history ul, .bead-price { font-size: 14px; }
  .menu-brand small, .foot-brand small, .cal-dow, .svc-opt-check, .svc-opt-meta, .price-card .tag, .bk-photo-add .small { font-size: var(--fs-2xs); }
  .fld-label small, .choice-label small { font-size: inherit; }
}

/* =====================================================================
   Forced colours (Windows high contrast): the selected states keep an
   outline, the buttons and fields a border, and the gold light goes.
   ===================================================================== */
@media (forced-colors: active) {
  .choice-item.on, .svc-opt.on, .cal-day.on, .adm-nav a.on { outline: 3px solid Highlight; outline-offset: 2px; }
  .btn-gold, .btn-glass, .fld-box { border: 2px solid ButtonText; }
  .shine::after, .glint::after, [class*="rim"] { display: none; }
}

/* =====================================================================
   Print (launch): the price list on paper. A white page, dark ink, gold
   as a deep gold ink (#8f6a1c); no bars, canvases, buttons or light;
   every reveal forced on and the wash un-pinned; cards kept whole; the
   web address printed after links that leave the site.
   ===================================================================== */
@page { margin: 16mm; }
@media print {
  :root, :root[data-theme="light"] {
    color-scheme: light;
    --bg: #fff; --bg-2: #fff; --panel: #fff; --panel-2: #fff; --floor: #fff;
    --ink: #111; --ink-2: #333; --muted: #555;
    --hair: #d8d8d8; --line: #c9b47a; --line-soft: #e4dcc4; --border-strong: #999;
    --gold: #8f6a1c; --gold-hi: #8f6a1c; --gold-ink: #8f6a1c; --gold-pale: #8f6a1c; --gold-deep: #8f6a1c;
  }
  .svc-card, [data-theme="light"] :is(.svc-card, .gold-card) { --ink: #111; --ink-2: #333; --muted: #555; --gold: #8f6a1c; --gold-hi: #8f6a1c; --gold-ink: #8f6a1c; }
  html, body { background: #fff !important; color: #111 !important; }
  .topbar, .menu, .scrim, .veil, .toast, .lightbox, .skip, .nojs-note, .scroll-cue, .btn, .work-nav, .work-progress, .svc-jump, .bk-nav, .theme-btn, canvas, .floor, .wash-title, .wash-hint, .cannon, .wash-shade, .top-photo, .svc-card .photo, .svc-card .art, .group-plate > img, .group-plate > canvas,
  .hero::before, .hero::after, .standard::before, .why::before, .how::before, .wash-stage::before, .wash-stage::after, .svc-card::before, .svc-card::after, .svc-top::before, .svc-top::after, .group-plate::before, .cta-band::after { display: none !important; }
  [data-rise], [data-reveal], .view, .hero [data-in], .hero-inner, .svc-card, .svc-head, .svc-note, .rule, .steps::before, .work-strip, .group-plate > *, .wash-services .wrap, .gal-tile, .gal-media, .tm-frame { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  .svc-card, .svc-head, .svc-note { --r: 1 !important; }
  .emblem svg.circle circle { stroke-dashoffset: 0; }
  .gold-text, .hero h1 .l1 { background: none !important; color: #8f6a1c !important; -webkit-text-fill-color: #8f6a1c; }
  .amount, .price-card .tag, .svc-card .price, .eyebrow { color: #8f6a1c !important; text-shadow: none !important; }
  .hero { min-height: 0 !important; background: none !important; }
  .hero-inner { padding: 10mm 0 6mm; }
  .section { padding-block: 8mm; }
  .wash { height: auto !important; }
  .wash-stage { position: static !important; height: auto !important; contain: none !important; overflow: visible !important; background: none !important; }
  .wash-services { position: static !important; padding: 0 !important; pointer-events: auto; }
  .svc-card { min-height: 0; }
  .svc-top { min-height: 0; padding: 0 0 8mm; background: none; }
  .svc-top .page-head p { text-shadow: none; }
  .svc-group { padding-block: 6mm; }
  .group-plate { aspect-ratio: auto; background: none !important; border: 0 !important; margin-bottom: 4mm; }
  .group-plate figcaption { position: static; padding: 0; color: #111; }
  .group-plate h2, .group-plate p { color: #111; }
  .group-plate svg { color: #8f6a1c; }
  .svc-group + .svc-group, .foot-grid, .sizes div, .contact-lines div { border-color: #ddd; }
  :is(.price-card, .svc-card, .why-item, .step, .tip, .faq-item, .rv, .svc-notes > div, .el-tile, .el-mini, .el-panel, .appt, .bk, .page .card, .cta-band) { break-inside: avoid; page-break-inside: avoid; background: #fff !important; border: 1px solid #d8d8d8 !important; box-shadow: none !important; }
  .work-strip { flex-wrap: wrap; overflow: visible; }
  .work-item { flex-basis: calc(33.33% - 10px); }
  .page, .book-page { min-height: 0 !important; padding-top: 8mm !important; background: none !important; }
  a { color: inherit; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font: 400 10px/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: #555; word-break: break-all; }
  .footer { padding: 8mm 0; }
}