/* ════════════════════════════════════════════════════════════════════════
   GEM AESTHETICS — botanical noir
   Black base, emerald depth, gold hairlines, white type.
   The photography is the exhibit; everything here is the vitrine.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

/* ─── tokens ─────────────────────────────────────────────────────────── */
:root {
  /* surface — black, cast faintly green so the emerald reads as native light */
  --void:      oklch(0.10 0.006 165);
  --bg:        oklch(0.135 0.009 165);
  --bg-2:      oklch(0.175 0.013 165);
  --bg-3:      oklch(0.225 0.018 165);

  /* emerald — her green, from deep foliage to lit jewel */
  --em-deep:   oklch(0.28 0.070 163);
  --em:        oklch(0.52 0.130 162);
  --em-lit:    oklch(0.68 0.150 160);
  --em-glow:   oklch(0.78 0.160 158);

  /* gold — hairlines and caught highlights, never a fill */
  --gold-deep: oklch(0.58 0.085 82);
  --gold:      oklch(0.80 0.105 85);
  --gold-lit:  oklch(0.90 0.080 88);

  /* ink — verified AA on --bg. Hue is a warm blush rather than a cool
     neutral; lightness is untouched, so every contrast ratio still holds. */
  --ink:       oklch(0.97 0.005 35);
  --ink-2:     oklch(0.86 0.012 35);
  --muted:     oklch(0.745 0.018 35);
  --faint:     oklch(0.62 0.016 35);   /* large text / decorative only */

  --line:      oklch(0.97 0.005 35 / 0.11);
  --line-gold: oklch(0.80 0.105 85 / 0.30);

  /* bloom — soft light behind type and photography, never a hard shadow */
  --bloom-warm: oklch(0.80 0.105 85 / 0.16);
  --bloom-em:   oklch(0.68 0.150 160 / 0.20);

  /* glass — only where something real sits behind it */
  --glass:      oklch(0.20 0.014 165 / 0.55);
  --glass-hi:   oklch(0.30 0.020 165 / 0.60);
  --glass-edge: oklch(0.97 0.005 35 / 0.14);
  --blur: 20px;

  /* type */
  --display: 'Gloock', 'Iowan Old Style', Georgia, serif;
  --body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.79rem);
  --t-sm:   clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --t-base: clamp(0.98rem, 0.94rem + 0.20vw, 1.09rem);
  --t-lg:   clamp(1.16rem, 1.08rem + 0.40vw, 1.42rem);
  --t-xl:   clamp(1.50rem, 1.32rem + 0.90vw, 2.10rem);
  --t-2xl:  clamp(2.00rem, 1.66rem + 1.70vw, 3.10rem);
  --t-3xl:  clamp(2.60rem, 1.95rem + 3.25vw, 4.60rem);
  --t-4xl:  clamp(3.10rem, 2.10rem + 5.00vw, 6.00rem);

  /* space */
  --s-1: 0.5rem;  --s-2: 0.875rem; --s-3: 1.25rem; --s-4: 1.75rem;
  --s-5: 2.5rem;  --s-6: 3.5rem;   --s-7: 5rem;    --s-8: 7rem;
  --sec-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gut:   clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  --maxw: 1320px;

  --r-sm: 6px; --r: 12px; --r-lg: 20px; --r-xl: 30px; --r-pill: 999px;

  /* elevation — dark UI needs glow more than shadow */
  --sh-2: 0 14px 40px -12px oklch(0 0 0 / 0.75);
  --sh-3: 0 34px 90px -24px oklch(0 0 0 / 0.85);
  --sh-em: 0 0 60px -12px oklch(0.52 0.130 162 / 0.55);

  /* motion */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: 180ms; --d-2: 320ms; --d-3: 620ms; --d-4: 1100ms;

  /* z — semantic, never arbitrary */
  --z-bg: 0; --z-content: 1; --z-nav: 100; --z-sheet: 200;
  --z-modal: 310; --z-toast: 400;
}

/* ─── base ───────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;          /* light-on-dark needs the extra air */
  font-weight: 380;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
body.menu-open, body.lock { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;           /* a touch more air; softer than the tight set */
  letter-spacing: -0.014em;   /* less clenched, so the serif can breathe */
  text-wrap: balance;
}
/* Light behind the letterforms rather than a shadow under them. Large
   display type only — body copy stays crisp and unhaloed. */
.hero h1, .display, .h2 {
  text-shadow: 0 0 38px var(--bloom-warm), 0 0 90px var(--bloom-em);
}
p { text-wrap: pretty; }
em { font-style: italic; color: var(--em-lit); }

::selection { background: oklch(0.52 0.130 162 / 0.45); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
  background: var(--em-deep); color: var(--ink);
  padding: 0.85rem 1.35rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── page atmosphere ────────────────────────────────────────────────── */
/* Emerald light pooling in the dark plus a whisper of grain. Fixed, cheap,
   behind everything. This is what keeps large black areas from going flat. */
.atmos {
  position: fixed; inset: 0; z-index: var(--z-bg);
  pointer-events: none; overflow: hidden;
}
.atmos i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: 0.5;
}
.atmos .p1 {
  width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
  top: -18vw; right: -14vw;
  background: radial-gradient(circle, oklch(0.52 0.130 162 / 0.55), transparent 68%);
}
.atmos .p2 {
  width: 48vw; height: 48vw; max-width: 620px; max-height: 620px;
  bottom: -12vw; left: -12vw;
  background: radial-gradient(circle, oklch(0.45 0.090 168 / 0.42), transparent 70%);
}
.atmos .p3 {
  width: 30vw; height: 30vw; max-width: 400px; max-height: 400px;
  top: 46%; left: 52%;
  background: radial-gradient(circle, oklch(0.62 0.075 88 / 0.20), transparent 72%);
}
.atmos::after {
  content: ''; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035; mix-blend-mode: overlay;
}

/* ─── layout ─────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-tight { max-width: 940px; }
.sec { position: relative; z-index: var(--z-content); padding-block: var(--sec-y); }
/* Adjacent sections would otherwise stack two full pads into a dead gap. */
.sec + .sec { padding-top: 0; }
main { position: relative; z-index: var(--z-content); }

/* ─── type helpers ───────────────────────────────────────────────────── */
.display { font-size: var(--t-3xl); }
.h2 { font-size: var(--t-2xl); }
.h3 { font-size: var(--t-xl); }

.lede {
  font-size: var(--t-lg);
  color: var(--ink-2);
  font-weight: 350;
  line-height: 1.6;
  max-width: 62ch;
}
.muted { color: var(--muted); }

/* The one named kicker in the system, on section leads only. */
.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}
.kicker::before { content: ''; width: 26px; height: 1px; background: var(--gold-deep); }

/* ─── buttons ────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--em);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.9rem 1.75rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: oklch(0.99 0 0);
  font-size: var(--t-sm); font-weight: 650; letter-spacing: 0.01em;
  text-decoration: none; overflow: hidden;
  box-shadow: var(--sh-2), inset 0 1px 0 oklch(1 0 0 / 0.22);
  transition: transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
/* gold sheen wipes across on hover — the "caught highlight" */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, oklch(0.90 0.080 88 / 0.55) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform var(--d-4) var(--e-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-3), var(--sh-em), inset 0 1px 0 oklch(1 0 0 / 0.3); }
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(0); }

.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-gold); box-shadow: none;
}
.btn.ghost:hover { border-color: var(--gold); background: oklch(0.80 0.105 85 / 0.08); box-shadow: none; }
.btn.gold { --btn-bg: var(--gold); color: oklch(0.16 0.02 85); }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

.tlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--ink); text-decoration: none; font-weight: 550;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.tlink:hover { background-size: 100% 1px; color: var(--gold-lit); }

/* ─── glass ──────────────────────────────────────────────────────────── */
/* Used over the light pools, the hero canvas, or photography — places with
   something real to refract. Not a default card skin. */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5);
  box-shadow: var(--sh-2), inset 0 1px 0 oklch(1 0 0 / 0.10);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass { background: oklch(0.19 0.014 165 / 0.94); }
}

/* ─── nav ────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0.85rem var(--gut);
  border-bottom: 1px solid transparent;
  transition: transform var(--d-3) var(--e-out), background var(--d-3) ease,
              border-color var(--d-3) ease;
}
.nav.stuck {
  background: oklch(0.135 0.009 165 / 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav.hide { transform: translateY(-102%); }

.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand b { font-family: var(--display); font-weight: 400; font-size: 1.22rem; line-height: 1; letter-spacing: -0.02em; }
.brand span {
  display: block; font-size: 0.58rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-links a {
  position: relative; padding: 0.55rem 0.9rem; border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); text-decoration: none;
  transition: color var(--d-1) ease;
}
/* Scaled, not widened: animating width relayouts the nav on every hover. */
.nav-links a::after {
  content: ''; position: absolute; left: 50%; bottom: 4px;
  width: 42%; height: 1px; background: var(--gold);
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--d-2) var(--e-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.on::after { transform: translateX(-50%) scaleX(1); }
.nav-links a.on { color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: 0.6rem; }
.nav-cta .btn { min-height: 44px; padding: 0.6rem 1.25rem; }

.burger {
  display: none; width: 46px; height: 46px; border-radius: var(--r-pill);
  border: 1px solid var(--line);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span {
  display: block; width: 17px; height: 1.5px; background: var(--ink);
  border-radius: 2px; transition: transform var(--d-2) var(--e-out);
}
body.menu-open .burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
body.menu-open .burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.sheet {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  display: flex; flex-direction: column; justify-content: center; gap: 0.25rem;
  padding: 5rem var(--gut) 3rem;
  background: oklch(0.10 0.006 165 / 0.96);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-3) var(--e-out), visibility var(--d-3);
}
body.menu-open .sheet { opacity: 1; visibility: visible; }
.sheet a {
  font-family: var(--display); font-size: clamp(1.9rem, 7.5vw, 2.9rem);
  text-decoration: none; padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out), color var(--d-1) ease;
}
.sheet a:hover { color: var(--em-lit); }
body.menu-open .sheet a { opacity: 1; transform: none; }
body.menu-open .sheet a:nth-child(1) { transition-delay: 80ms; }
body.menu-open .sheet a:nth-child(2) { transition-delay: 125ms; }
body.menu-open .sheet a:nth-child(3) { transition-delay: 170ms; }
body.menu-open .sheet a:nth-child(4) { transition-delay: 215ms; }
body.menu-open .sheet a:nth-child(5) { transition-delay: 260ms; }
body.menu-open .sheet a:nth-child(6) { transition-delay: 305ms; }
.sheet .btn { margin-top: var(--s-4); border-bottom: 0; }

/* ─── hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: min(100svh, 900px);
  display: flex; align-items: center;
  padding-top: 7rem; padding-bottom: var(--s-7);
  overflow: hidden;
}
/* Pools the light to the left so the headline always sits on a dark ground. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    oklch(0.135 0.009 165 / 0.94) 0%,
    oklch(0.135 0.009 165 / 0.72) 34%,
    transparent 62%);
}
.hero .wrap { position: relative; z-index: 2; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero h1 { font-size: var(--t-4xl); margin-top: var(--s-3); }
/* mask-reveal: each line clipped by its own overflow box */
.line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line > span { display: block; will-change: transform; }
.hero .lede { margin-top: var(--s-3); max-width: 46ch; }
.hero .cta-row { margin-top: var(--s-4); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.hero-meta div { display: flex; flex-direction: column; gap: 2px; }
.hero-meta .k {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); font-weight: 600;
}
.hero-meta .v { font-family: var(--display); font-size: 1.5rem; color: var(--gold); }

.hero-art { position: relative; aspect-ratio: 1 / 1.05; }
.hero-art figure {
  position: absolute; overflow: hidden; border-radius: var(--r-lg);
  /* the depth shadow, then a warm bloom spilling off the edges */
  box-shadow: var(--sh-3), 0 0 70px -10px var(--bloom-warm);
  border: 1px solid var(--line-gold);
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-art .a { inset: 0 22% 26% 0; z-index: 2; }
.hero-art .b { width: 46%; aspect-ratio: 3/4; right: 0; top: 14%; z-index: 3; }
.hero-art .c { width: 40%; aspect-ratio: 1/1; left: 12%; bottom: 0; z-index: 4; }
.hero-badge {
  position: absolute; right: 3%; bottom: 6%; z-index: 5;
  padding: 0.65rem 1.1rem; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.05em;
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 1.75rem; z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint);
}
.scroll-hint i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(var(--gold), transparent);
  animation: drip 2.4s var(--e-in-out) infinite;
}
@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─── marquee ────────────────────────────────────────────────────────── */
.marquee {
  position: relative; z-index: var(--z-content);
  overflow: hidden; padding: var(--s-3) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: oklch(0.10 0.006 165 / 0.5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: var(--s-4); width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-family: var(--display); font-size: clamp(1.1rem, 2.2vw, 1.75rem);
  color: var(--ink-2); white-space: nowrap;
}
.marquee i { color: var(--gold); font-style: normal; font-size: 0.7em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ─── section heads ──────────────────────────────────────────────────── */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-4) clamp(2rem, 5vw, 4rem);
  align-items: end; margin-bottom: var(--s-6);
}
.sec-head .lede { max-width: 42ch; }

/* ─── service ledger (not a card grid) ───────────────────────────────── */
.ledger { border-top: 1px solid var(--line); }
.ledger-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem var(--s-4); align-items: baseline;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  position: relative;
}
/* The indent shifts the text only, via transform. Animating padding here
   would relayout every row in the list on each hover, and the price stays
   anchored to the right edge this way. */
.ledger-row > div, .ledger-row > p {
  transition: transform var(--d-2) var(--e-out);
}
.ledger-row:hover > div, .ledger-row:hover > p { transform: translateX(0.9rem); }
.ledger-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--em); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--d-2) var(--e-out);
}
.ledger-row:hover::before { transform: scaleY(1); transform-origin: top; }
.ledger-row h3 { font-size: var(--t-lg); letter-spacing: -0.02em; }
.ledger-row .price { font-family: var(--display); font-size: var(--t-xl); color: var(--gold); white-space: nowrap; }
.ledger-row p { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-sm); max-width: 58ch; margin-top: 0.15rem; }
.ledger-row .dur {
  font-size: var(--t-xs); color: var(--faint); letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600;
}

/* ─── work grid ──────────────────────────────────────────────────────── */
/* Three across on desktop so a six-shot set lands as two full rows
   instead of leaving orphans in a fourth column. */
.work-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.35rem);
}
@media (min-width: 941px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shot {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--bg-2); aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  transition: border-color var(--d-3) var(--e-out);
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-4) var(--e-out);
  filter: saturate(1.02) contrast(1.02);
}
.shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, oklch(0.10 0.006 165 / 0.72), transparent 52%);
  opacity: 0.85; transition: opacity var(--d-3) ease;
}
.shot:hover { border-color: var(--line-gold); }
.shot:hover img { transform: scale(1.055); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-3); font-size: var(--t-sm); font-weight: 550;
  transform: translateY(4px); opacity: 0;
  transition: transform var(--d-3) var(--e-out), opacity var(--d-3) var(--e-out);
}
.shot:hover figcaption, .shot:focus-within figcaption { transform: none; opacity: 1; }
.shot figcaption em {
  font-style: normal; font-size: var(--t-xs); color: var(--gold);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.shot-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border-radius: inherit; }

/* ─── the two offers ─────────────────────────────────────────────────── */
/* Two panels, not a card grid: each one is a whole service with its own
   photograph, price and route into the menu. */
/* Exactly two up: auto-fit would spread these into a third empty column. */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
}
@media (min-width: 800px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.offer {
  display: grid; grid-template-rows: auto 1fr;
  text-decoration: none; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: oklch(0.175 0.013 165 / 0.55);
  transition: border-color var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
}
.offer:hover { border-color: var(--line-gold); transform: translateY(-4px); }
.offer-media { display: block; overflow: hidden; aspect-ratio: 5 / 4; }
.offer-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-4) var(--e-out);
}
.offer:hover .offer-media img { transform: scale(1.05); }
.offer-body {
  display: flex; flex-direction: column; gap: var(--s-2);
  align-items: start; padding: var(--s-4);
}
.offer-top {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: baseline; justify-content: space-between; width: 100%;
}
.offer-name {
  font-family: var(--display); font-weight: 400; font-size: var(--t-xl);
  letter-spacing: -0.028em;
}
.offer-price { font-family: var(--display); font-weight: 400; font-size: var(--t-lg); color: var(--gold); }
.offer-note { color: var(--muted); font-size: var(--t-sm); }
.offer .tlink { margin-top: auto; padding-top: var(--s-2); }
.offer:hover .tlink { background-size: 100% 1px; color: var(--gold-lit); }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: oklch(0.08 0.004 165 / 0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-2) ease, visibility var(--d-2);
}
.lb.on { opacity: 1; visibility: visible; }
.lb figure { display: grid; justify-items: center; }
.lb img {
  max-width: 100%; max-height: 80vh; object-fit: contain;
  border-radius: var(--r); border: 1px solid var(--line-gold); box-shadow: var(--sh-3);
  transform: scale(0.97); transition: transform var(--d-3) var(--e-out);
}
.lb.on img { transform: none; }
.lb figcaption { margin-top: var(--s-3); text-align: center; color: var(--ink-2); font-size: var(--t-sm); }
.lb-x, .lb-nav {
  position: absolute; z-index: 2;
  width: 52px; height: 52px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 1.25rem; line-height: 1;
  transition: background var(--d-1) ease;
}
.lb-x { top: 1.25rem; right: 1.25rem; }
.lb-nav.prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lb-nav.next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lb-x:hover, .lb-nav:hover { background: var(--glass-hi); }

/* ─── ordered sequence ───────────────────────────────────────────────── */
/* Numbers are used here because this IS a sequence, not as section scaffolding. */
.steps-flow { display: grid; gap: var(--s-4); counter-reset: step; }
.step {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3) var(--s-4); align-items: start;
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: var(--t-xl); color: var(--gold-deep); line-height: 1;
}
.step h3 { font-size: var(--t-lg); margin-bottom: 0.35rem; }
.step p { color: var(--muted); max-width: 60ch; }

/* ─── policies ───────────────────────────────────────────────────────── */
/* Two equal panels of real type, side by side. These were Instagram
   screenshots; as text they stay sharp at any zoom, read on a phone, and
   can be selected, searched and spoken aloud. */
.pol-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start;
}
.pol-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2);
}
.panel-h {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 400;
  letter-spacing: 0.01em; color: var(--ink);
  padding-bottom: var(--s-3); margin-bottom: var(--s-1);
  border-bottom: 1px solid var(--line-gold);
}
.panel-note {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--muted);
}

.pol-list { display: grid; }
.pol {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3); align-items: start;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.pol:last-child { border-bottom: 0; }
.pol svg { width: 22px; height: 22px; color: var(--em-lit); margin-top: 3px; flex: none; }
.pol p { color: var(--ink-2); }

/* price rows: name, a leader rule that eats the slack, then the figure */
.price-list { display: grid; }
.price-row {
  display: grid; grid-template-columns: auto minmax(var(--s-3), 1fr) auto;
  align-items: baseline; gap: var(--s-2);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row .n { color: var(--ink-2); }
.price-row .rule {
  height: 1px; transform: translateY(-0.28em);
  background: repeating-linear-gradient(to right,
    var(--line) 0 2px, transparent 2px 6px);
}
.price-row .p {
  font-family: var(--display); font-size: var(--t-lg);
  color: var(--gold); font-variant-numeric: tabular-nums;
}

/* Instagram cards — no longer on /policies, still used by /nails and /lashes */
.ig-cards { display: grid; gap: var(--s-3); }
.ig-card { overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); }
.ig-card img { width: 100%; height: auto; }
.ig-card span {
  display: block; padding: 0.8rem var(--s-3);
  font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid var(--line);
}

/* ─── about ──────────────────────────────────────────────────────────── */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.portrait {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line-gold);
  box-shadow: var(--sh-3), 0 0 80px -12px var(--bloom-warm);
  aspect-ratio: 4 / 5;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.pull { font-family: var(--display); font-size: var(--t-2xl); line-height: 1.16; letter-spacing: -0.03em; }
.sig {
  margin-top: var(--s-3); font-size: var(--t-sm);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600;
}
.facts { display: grid; margin-top: var(--s-5); border-top: 1px solid var(--line); }
.facts div {
  display: grid; grid-template-columns: minmax(90px, 0.3fr) minmax(0, 1fr);
  gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.facts span {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.facts b { font-weight: 500; color: var(--ink-2); }

/* ─── CTA band ───────────────────────────────────────────────────────── */
.band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--line-gold);
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse at 20% 0%, oklch(0.28 0.070 163 / 0.9), transparent 60%),
    radial-gradient(ellipse at 90% 100%, oklch(0.45 0.055 88 / 0.35), transparent 55%),
    var(--bg-2);
  text-align: center;
}
.band .lede { margin-inline: auto; }
.band .cta-row { justify-content: center; margin-top: var(--s-4); }

/* ─── footer ─────────────────────────────────────────────────────────── */
footer {
  position: relative; z-index: var(--z-content);
  border-top: 1px solid var(--line);
  padding-block: var(--s-6) var(--s-4); margin-top: var(--s-6);
}
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
}
.foot-col { display: flex; flex-direction: column; gap: 0.55rem; align-items: start; }
.foot-col .h {
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); font-weight: 650; margin-bottom: 0.2rem;
}
.foot-col a, .foot-col span:not(.h) { color: var(--muted); font-size: var(--t-sm); text-decoration: none; }
.foot-col a:hover { color: var(--ink); }
.foot-base {
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--faint);
}
/* Studio login sits directly under the copyright, bottom left. */
.foot-legal { display: flex; flex-direction: column; gap: 0.4rem; align-items: start; }
.foot-legal a { color: var(--faint); text-decoration: none; min-height: 24px; }
.foot-legal a:hover { color: var(--gold); }

/* ─── forms ──────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 0.9rem 1.05rem; min-height: 52px;
  background: oklch(0.175 0.013 165 / 0.8);
  border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink); font-size: var(--t-base);
  transition: border-color var(--d-1) ease, background var(--d-1) ease, box-shadow var(--d-1) ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--em-lit);
  background: oklch(0.20 0.016 165 / 0.95);
  box-shadow: 0 0 0 3px oklch(0.52 0.130 162 / 0.22);
}
.field input[aria-invalid='true'] { border-color: oklch(0.68 0.17 25); }
.f-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); }

.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--em); margin-top: 2px; flex: none; }
.check span { font-size: var(--t-sm); color: var(--ink-2); }

.err { color: oklch(0.75 0.15 25); font-size: var(--t-sm); }
.err:empty { display: none; }

/* ─── booking ────────────────────────────────────────────────────────── */
.book-main { padding-top: 7.5rem; }
.progress { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--s-4) 0 var(--s-5); }
.pip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted);
  transition: border-color var(--d-2) ease, color var(--d-2) ease, background var(--d-2) ease;
}
.pip .n {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--bg-3); font-size: 0.72rem; font-weight: 700;
}
.pip.on { border-color: var(--line-gold); color: var(--ink); background: oklch(0.80 0.105 85 / 0.07); }
.pip.on .n { background: var(--gold); color: oklch(0.16 0.02 85); }
.pip.done .n { background: var(--em); color: #fff; }

.book-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
}
.stage { padding: clamp(1.25rem, 3vw, 2.25rem); min-height: 380px; }
.panel { display: none; }
.panel.on { display: block; animation: panelIn var(--d-3) var(--e-out) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }

.svc-head { font-family: var(--display); font-size: var(--t-lg); margin: var(--s-4) 0 var(--s-2); }
.svc-head:first-child { margin-top: 0; }
.svc-grid { display: grid; gap: 0.6rem; }
.svc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem var(--s-3); align-items: center;
  width: 100%; text-align: left;
  padding: var(--s-3); border-radius: var(--r);
  border: 1px solid var(--line); background: oklch(0.175 0.013 165 / 0.55);
  transition: border-color var(--d-1) ease, background var(--d-1) ease, transform var(--d-1) var(--e-out);
}
.svc:hover { border-color: var(--line-gold); transform: translateX(3px); }
.svc.on { border-color: var(--em-lit); background: oklch(0.28 0.070 163 / 0.35); }
.svc b { font-weight: 600; font-size: var(--t-base); }
.svc .price { font-family: var(--display); font-size: var(--t-lg); color: var(--gold); }
.svc small { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-sm); }

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.cal-head h3 { font-size: var(--t-lg); }
.cal-nav { display: flex; gap: 0.4rem; }
.cal-nav button {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid var(--line); display: grid; place-items: center;
  transition: border-color var(--d-1) ease, background var(--d-1) ease;
}
.cal-nav button:hover:not([disabled]) { border-color: var(--gold); background: oklch(0.80 0.105 85 / 0.08); }
.cal-nav button[disabled] { opacity: 0.3; cursor: not-allowed; }

.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow span {
  text-align: center; font-size: var(--t-xs); color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 0.5rem; font-weight: 650;
}
.day {
  position: relative; aspect-ratio: 1; min-height: 44px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
  border: 1px solid transparent; color: var(--faint);
  transition: border-color var(--d-1) ease, background var(--d-1) ease, color var(--d-1) ease;
}
.day.pad { visibility: hidden; }
.day.open { color: var(--ink); border-color: var(--line); }
.day.open::after {
  content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--em-lit);
}
.day.open:hover { border-color: var(--gold); background: oklch(0.80 0.105 85 / 0.1); }
.day.on { background: var(--em); color: #fff; border-color: var(--em-lit); }
.day.on::after { background: #fff; }
.day[disabled] { cursor: not-allowed; }

.time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 0.6rem; }
.time {
  min-height: 52px; border-radius: var(--r);
  border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--d-1) ease, background var(--d-1) ease;
}
.time:hover { border-color: var(--gold); background: oklch(0.80 0.105 85 / 0.08); }
.time.on { background: var(--em); color: #fff; border-color: var(--em-lit); }

.stage-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  justify-content: space-between; margin-top: var(--s-5);
  padding-top: var(--s-3); border-top: 1px solid var(--line);
}
.back {
  color: var(--muted); font-size: var(--t-sm); font-weight: 550;
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
}
.back:hover { color: var(--ink); }

.summary { position: sticky; top: 6.5rem; padding: var(--s-4); }
.sum-rows { display: grid; margin: var(--s-3) 0; }
.sum-row {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm);
}
.sum-row span { color: var(--muted); }
.sum-row b { font-weight: 600; text-align: right; }
.sum-row.total { border-bottom: 0; padding-top: var(--s-3); }
.sum-row.total b { font-family: var(--display); font-size: var(--t-xl); color: var(--gold); font-weight: 400; }
.sum-row.total b.is-empty {
  font-family: var(--body); font-size: var(--t-sm); font-weight: 600; color: var(--muted);
}
.sum-note { font-size: var(--t-xs); color: var(--muted); line-height: 1.6; }

.confirm { text-align: center; padding: var(--s-4) 0; }
.confirm-mark {
  width: 84px; height: 84px; margin: 0 auto var(--s-3);
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-gold);
  background: radial-gradient(circle, oklch(0.28 0.070 163 / 0.8), transparent 70%);
}
.confirm-mark svg { width: 36px; height: 36px; color: var(--em-glow); }
.next-steps { text-align: left; margin: var(--s-4) auto; max-width: 480px; }
.next-steps li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-2);
}
.next-steps li:last-child { border-bottom: 0; }
.next-steps .n {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-3); color: var(--gold); font-size: 0.75rem; font-weight: 700;
}

.empty { text-align: center; padding: var(--s-6) var(--s-3); color: var(--muted); }
.empty svg { width: 44px; height: 44px; margin: 0 auto var(--s-3); color: var(--em-deep); }

/* ─── concierge ──────────────────────────────────────────────────────── */
.chat-fab {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-nav);
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--em); box-shadow: var(--sh-2), var(--sh-em);
  transition: transform var(--d-2) var(--e-out);
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab svg { width: 26px; height: 26px; color: #fff; }
.chat-fab::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--em-lit); opacity: 0.5;
  animation: ping 3s var(--e-out) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(1.35); opacity: 0; } }

.chat {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + 72px);
  z-index: var(--z-nav);
  width: min(370px, calc(100vw - 2rem)); max-height: min(560px, calc(100svh - 8rem));
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.98);
  transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out), visibility var(--d-2);
}
.chat.on { opacity: 1; visibility: visible; transform: none; }
.chat-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-3); border-bottom: 1px solid var(--line);
}
.chat-top b { font-family: var(--display); font-weight: 400; font-size: var(--t-lg); }
.chat-top small { display: block; color: var(--muted); font-size: var(--t-xs); }
.chat-log { flex: 1; overflow-y: auto; padding: var(--s-3); display: grid; gap: 0.7rem; align-content: start; }
.msg {
  padding: 0.7rem 0.95rem; border-radius: var(--r-lg); max-width: 88%;
  font-size: var(--t-sm); line-height: 1.55; white-space: pre-wrap;
}
.msg.bot { background: var(--bg-3); border-bottom-left-radius: var(--r-sm); justify-self: start; }
.msg.me { background: var(--em-deep); border-bottom-right-radius: var(--r-sm); justify-self: end; }
.chat-form { display: flex; gap: 0.5rem; padding: var(--s-3); border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1; min-height: 46px; padding: 0.6rem 0.9rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--t-sm);
}
.chat-form input:focus { outline: none; border-color: var(--em-lit); }
.chat-form button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--em); flex: none; }
.chat-form button svg { width: 18px; height: 18px; color: #fff; }
.dots { display: inline-flex; gap: 4px; align-items: center; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: blink 1.3s infinite; }
.dots i:nth-child(2) { animation-delay: 0.16s; }
.dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* ─── admin ──────────────────────────────────────────────────────────── */
.admin-main { padding-top: 4rem; padding-bottom: var(--s-7); }
.gate { max-width: 420px; margin: 12vh auto 0; }
.tabs { display: flex; gap: 0.4rem; margin: var(--s-4) 0; flex-wrap: wrap; }
.tab {
  padding: 0.65rem 1.15rem; border-radius: var(--r-pill); min-height: 44px;
  border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 600; color: var(--muted);
}
.tab.on { background: var(--em); border-color: var(--em-lit); color: #fff; }
.admin-panel { display: none; }
.admin-panel.on { display: block; }

.week { display: grid; }
.week-day {
  display: grid; grid-template-columns: minmax(96px, 0.22fr) minmax(0, 1fr);
  gap: var(--s-3); align-items: center;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.week-day > b { font-size: var(--t-sm); font-weight: 600; }
.week-day > b small { display: block; color: var(--muted); font-weight: 400; font-size: var(--t-xs); }
.slots { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.slot {
  padding: 0.5rem 0.85rem; border-radius: var(--r-pill); min-height: 40px;
  border: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.slot.on { background: var(--em); border-color: var(--em-lit); color: #fff; }
.slot.booked { background: var(--gold); border-color: var(--gold); color: oklch(0.16 0.02 85); cursor: not-allowed; }

.bk { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.bk-top { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; justify-content: space-between; }
.bk b { font-size: var(--t-base); }
.bk-meta { color: var(--muted); font-size: var(--t-sm); margin-top: 0.25rem; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s-2); }
.bk-actions a, .bk-actions button {
  padding: 0.5rem 0.9rem; border-radius: var(--r-pill); min-height: 40px;
  border: 1px solid var(--line); font-size: var(--t-sm); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.bk-actions button:hover, .bk-actions a:hover { border-color: var(--gold); }
.tag {
  padding: 0.25rem 0.7rem; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.tag.pending { background: oklch(0.80 0.105 85 / 0.18); color: var(--gold-lit); }
.tag.confirmed { background: oklch(0.52 0.130 162 / 0.25); color: var(--em-glow); }
.tag.completed { background: oklch(0.97 0.004 160 / 0.12); color: var(--ink-2); }
.tag.cancelled, .tag.expired { background: oklch(0.60 0.15 25 / 0.18); color: oklch(0.78 0.13 25); }

.pad { padding: clamp(1.15rem, 3vw, 2rem); }

.dash-top {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: baseline; justify-content: space-between;
}
.dash-top-actions { display: flex; gap: var(--s-3); align-items: center; }

/* ─── stat row ───────────────────────────────────────────────────────── */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s-2); margin-bottom: var(--s-3);
}
.stat {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: var(--s-3); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: oklch(0.175 0.013 165 / 0.6);
}
.stat-k {
  font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.stat-v { font-family: var(--display); font-weight: 400; font-size: var(--t-xl); color: var(--gold); }
.stat-n { font-size: var(--t-xs); color: var(--faint); }

/* ─── rings ──────────────────────────────────────────────────────────── */
:root { --ring-track: oklch(0.97 0.004 160 / 0.08); }

.ring-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.ring-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.ring-wrap { position: relative; width: 168px; max-width: 100%; }
.ring { width: 100%; height: auto; display: block; }
.ring-mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ring-mid b {
  font-family: var(--display); font-weight: 400; font-size: var(--t-xl);
  color: var(--ink); line-height: 1;
}
.ring-mid span {
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; max-width: 116px; line-height: 1.3;
}
.ring-note { font-size: var(--t-sm); color: var(--muted); }

/* ─── line chart ─────────────────────────────────────────────────────── */
.chart-line { display: block; }
.linechart { width: 100%; height: clamp(180px, 26vw, 240px); overflow: visible; }
.linechart-axis {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin-top: 0.4rem; font-size: var(--t-xs); color: var(--faint); text-align: center;
}
.linechart-axis .peak { color: var(--gold); font-weight: 700; }
.linechart-note { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); }
.linechart-note b { color: var(--gold); font-weight: 650; }

/* ─── split bars ─────────────────────────────────────────────────────── */
.split-row {
  display: grid; grid-template-columns: minmax(88px, 0.32fr) minmax(0, 1fr) auto;
  gap: var(--s-3); align-items: center; font-size: var(--t-sm);
  padding: 0.35rem 0;
}
.split-k { color: var(--muted); }
.split-track { height: 8px; border-radius: var(--r-pill); background: var(--ring-track); overflow: hidden; }
.split-fill {
  display: block; height: 100%; border-radius: inherit; min-width: 2px;
  background: linear-gradient(90deg, var(--em), var(--em-glow));
}
.split-v { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.split-v em { display: block; font-style: normal; font-size: var(--t-xs); color: var(--faint); font-weight: 500; }
.money-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-3); }

/* ─── site photo slots ───────────────────────────────────────────────── */
.slot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--s-3); margin-top: var(--s-3);
}
.slot {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: oklch(0.175 0.013 165 / 0.6);
}
.slot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.slot-body { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); }
.slot-body b { font-size: var(--t-sm); font-weight: 600; }
.slot-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 var(--s-3) var(--s-3); margin-top: auto; }
.slot-actions .tab { padding: 0.45rem 0.8rem; min-height: 40px; font-size: var(--t-xs); }

/* ─── deposit card ───────────────────────────────────────────────────── */
.deposit-card {
  display: grid; gap: var(--s-2); justify-items: center;
  max-width: 420px; margin: var(--s-4) auto 0;
  padding: var(--s-4); border-radius: var(--r-xl);
  border: 1px solid var(--line-gold);
  background: radial-gradient(ellipse at 50% 0%, oklch(0.28 0.070 163 / 0.75), transparent 70%), var(--bg-2);
}
.deposit-amount { font-family: var(--display); font-weight: 400; font-size: var(--t-3xl); color: var(--gold); line-height: 1; }
.deposit-code {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: center;
  width: 100%; padding: var(--s-2) var(--s-3);
  border-radius: var(--r); border: 1px dashed var(--line-gold);
  background: oklch(0.10 0.006 165 / 0.5);
}
.deposit-code > span {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.deposit-code b {
  font-family: var(--display); font-size: var(--t-xl); color: var(--ink);
  letter-spacing: 0.14em;
}
.deposit-code button {
  padding: 0.4rem 0.85rem; min-height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--line); font-size: var(--t-xs); font-weight: 650; color: var(--muted);
}
.deposit-code button:hover { border-color: var(--gold); color: var(--gold); }
.deposit-card .btn { margin-top: var(--s-2); }
.pay-tag {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-size: var(--t-sm); color: var(--muted);
  letter-spacing: 0.02em; text-align: center;
}
/* body font, not the serif: a serif $ beside lowercase letters reads as an S */
.pay-tag b {
  font-family: var(--body); font-weight: 700; font-size: var(--t-lg);
  color: var(--gold-lit); letter-spacing: 0.03em;
}
/* the mark sits at cap height beside the handle, never larger than the type */
.pay-glyph { display: block; flex: none; width: 22px; height: 22px; }

/* accepted payment, on /policies */
.pay-accepted {
  margin-top: var(--s-5); padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2);
}
.pay-lead { margin-top: var(--s-2); color: var(--ink-2); }
/* The tag sits on its own line in a chip: a $handle set in the serif next to
   running text reads as an S, and a payment handle has to be unambiguous. */
.pay-chip {
  display: inline-block; margin-top: var(--s-2);
  padding: 0.45rem 1rem; border-radius: var(--r-pill);
  border: 1px dashed var(--line-gold);
  background: oklch(0.10 0.006 165 / 0.5);
  font-family: var(--body); font-weight: 700; font-size: var(--t-lg);
  letter-spacing: 0.03em; color: var(--gold-lit);
}
/* Handle and marks share a line on desktop and stack on a phone, so the
   handle is never pushed to a second line mid-string. */
.pay-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}
.pay-marks { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); }
.pay-mark {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: var(--s-2);
  padding: 0.35rem 0.7rem; border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 650;
  letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap;
}
/* Apple's mark is a silhouette, so it takes the type colour; Cash App's is a
   fixed green tile and keeps its own. */
.pay-mark svg { display: block; flex: none; width: 18px; height: 18px; }
/* taller than it is wide, so it gets height and finds its own width */
#pm-applepay svg { width: auto; height: 17px; color: var(--ink); }
/* the chip is inline-flex, which would otherwise outrank the hidden attribute */
#pm-applepay[hidden] { display: none; }

.pay-sub { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--muted); }

/* ─── reviews ────────────────────────────────────────────────────────── */
.rating-summary { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.rating-stars { color: var(--gold); font-size: var(--t-lg); letter-spacing: 0.1em; }
.rating-summary span { color: var(--muted); font-size: var(--t-sm); }

.review-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.review-list { display: grid; gap: var(--s-3); }
.review {
  padding: var(--s-4); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: oklch(0.175 0.013 165 / 0.5);
}
.review-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.review-top b { font-size: var(--t-base); font-weight: 650; }
.review-stars { color: var(--gold); letter-spacing: 0.08em; }
.review-text { margin-top: var(--s-2); color: var(--ink-2); }
.review-meta { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--faint); }
.review-form { padding: var(--s-4); position: sticky; top: 6.5rem; }
.review-form textarea { resize: vertical; }

.stars { display: flex; gap: 0.15rem; border: 0; padding: 0; margin: 0; }
.stars legend {
  font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; padding: 0 0 0.4rem;
}
.stars label { cursor: pointer; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars span {
  display: grid; place-items: center; width: 44px; height: 44px;
  font-size: 1.6rem; color: var(--faint);
  transition: color var(--d-1) ease, transform var(--d-1) var(--e-out);
}
.stars label:hover span { transform: scale(1.12); }
.stars input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); }
/* fill every star up to the checked one */
.stars label:has(input:checked) span,
.stars label:has(~ label input:checked) span { color: var(--gold); }

@media (max-width: 940px) {
  .review-layout { grid-template-columns: minmax(0, 1fr); }
  .review-form { position: static; }
}

/* ─── weekday pattern ────────────────────────────────────────────────── */
.pattern { display: grid; gap: 0.5rem; }
.pattern-day {
  display: grid; grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr);
  gap: var(--s-3); align-items: center;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line);
}
.pattern-name {
  display: flex; flex-direction: column; gap: 2px; align-items: start;
  text-align: left; min-height: 44px; justify-content: center;
}
.pattern-name b { font-size: var(--t-sm); font-weight: 650; }
.pattern-name span { font-size: var(--t-xs); color: var(--muted); }
.pattern-day.active .pattern-name span { color: var(--em-lit); }
.pattern-weeks { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--t-sm); color: var(--muted); }
.pattern-weeks select {
  min-height: 44px; padding: 0.5rem 0.8rem; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
}

/* ─── photo upload ───────────────────────────────────────────────────── */
.upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.upload-drop {
  display: grid; place-items: center; min-height: 120px; padding: var(--s-4);
  border: 1px dashed var(--line-gold); border-radius: var(--r-lg);
  color: var(--muted); font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: border-color var(--d-1) ease, background var(--d-1) ease;
}
.upload-drop:hover { border-color: var(--gold); background: oklch(0.80 0.105 85 / 0.06); }
.upload-preview img {
  width: 120px; height: 150px; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--line-gold);
}

.post-admin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: var(--s-2); margin-top: var(--s-3);
}
.post-admin {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: oklch(0.175 0.013 165 / 0.6);
}
.post-admin img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.post-admin-body { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2); }
.post-admin-body b { font-size: var(--t-sm); font-weight: 600; }
.post-admin-x {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: oklch(0.10 0.006 165 / 0.8); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.9rem;
}
.post-admin-x:hover { background: oklch(0.35 0.13 25 / 0.85); }
.note-body {
  margin-top: var(--s-2); padding: var(--s-2) var(--s-3);
  border-left: 1px solid var(--line-gold); color: var(--ink-2); font-size: var(--t-sm);
}

/* ─── inline editors ─────────────────────────────────────────────────── */
.svc-edit, .pol-edit {
  display: grid; gap: var(--s-2) var(--s-3); align-items: end;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1.4fr) 100px 110px auto;
}
/* description takes the wide columns; remove sits beside it, not across a row */
.svc-edit .svc-desc { grid-column: 1 / 4; }
.svc-edit .svc-x { grid-column: 4; }
.pol-edit { grid-template-columns: minmax(0, 1fr) auto; }
.svc-x {
  min-height: 44px; padding: 0.5rem 0.9rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted);
  white-space: nowrap; align-self: end;
}
.svc-x:hover { border-color: oklch(0.60 0.15 25); color: oklch(0.78 0.13 25); }
.copy-field { margin-top: var(--s-3); }
.copy-field textarea { resize: vertical; min-height: 84px; }

/* ─── feed ───────────────────────────────────────────────────────────── */
.feed-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--s-4); }
/* a display rule beats the hidden attribute, so restore it explicitly */
[hidden] { display: none !important; }

.post-view .post-shell {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  width: min(1040px, 100%); max-height: 86vh; overflow: hidden;
  border-radius: var(--r-xl);
}
.post-media { background: var(--void); display: grid; place-items: center; overflow: hidden; }
.post-media img { width: 100%; height: 100%; max-height: 86vh; object-fit: contain; }
.post-side {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); overflow-y: auto;
}
.post-head h2 { margin-bottom: 0.25rem; }
.post-notes { display: grid; gap: var(--s-2); }
.note {
  padding: var(--s-2) var(--s-3); border-radius: var(--r);
  background: oklch(0.97 0.004 160 / 0.05);
}
.note b { font-size: var(--t-sm); font-weight: 650; color: var(--gold); }
.note p { font-size: var(--t-sm); color: var(--ink-2); margin-top: 0.15rem; }
.post-form { display: grid; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.post-form-title { font-family: var(--display); font-weight: 400; font-size: var(--t-lg); }
.post-form textarea { resize: vertical; min-height: 78px; }
.post-thanks {
  margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r);
  background: oklch(0.28 0.070 163 / 0.5); border: 1px solid var(--line-gold);
  font-size: var(--t-sm);
}

@media (max-width: 860px) {
  .post-view .post-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .post-media img { max-height: 42vh; }
  .upload { grid-template-columns: minmax(0, 1fr); }
  .svc-edit { grid-template-columns: minmax(0, 1fr) 1fr 1fr; }
  .svc-edit .svc-x { grid-column: 1 / -1; }
}

.toast {
  position: fixed; left: 50%; bottom: 2rem; z-index: var(--z-toast);
  transform: translate(-50%, 200%);
  padding: 0.9rem 1.5rem; border-radius: var(--r-pill);
  background: var(--bg-3); border: 1px solid var(--line-gold);
  box-shadow: var(--sh-3); font-size: var(--t-sm); font-weight: 550;
  transition: transform var(--d-3) var(--e-out);
}
.toast.on { transform: translate(-50%, 0); }

/* ─── reveals ────────────────────────────────────────────────────────── */
/* Content is visible by default; JS opts in by adding .rv-armed to <html>.
   A headless render or a failed script leaves the page fully composed. */
.rv-armed .rv { opacity: 0; transform: translateY(26px); }
.rv-armed .rv.in {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--e-out), transform 900ms var(--e-out);
}
.rv-armed .rv-d1.in { transition-delay: 90ms; }
.rv-armed .rv-d2.in { transition-delay: 180ms; }
.rv-armed .rv-d3.in { transition-delay: 270ms; }

/* ─── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .book-grid { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; order: -1; }
}
@media (max-width: 940px) {
  .hero-grid, .sec-head, .pol-grid, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-head { align-items: start; }
  .hero { min-height: auto; padding-top: 6.5rem; }
  .hero-art { aspect-ratio: 4 / 3; max-width: 540px; }
  .hero::after {
    background: linear-gradient(180deg,
      oklch(0.135 0.009 165 / 0.86) 0%,
      oklch(0.135 0.009 165 / 0.55) 45%,
      transparent 78%);
  }
  .portrait { max-width: 420px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scroll-hint { display: none; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-cta .btn { display: none; }
  .ig-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* keep the chat button from sitting on top of the last row of content */
  main { padding-bottom: 4.5rem; }
  .stage-actions { padding-right: 4.5rem; }
}
@media (max-width: 560px) {
  .hero-meta { gap: var(--s-3); }
  .hero-meta .v { font-size: 1.25rem; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .week-day { grid-template-columns: minmax(0, 1fr); }
  .lb-nav.prev { left: 0.5rem; }
  .lb-nav.next { right: 0.5rem; }
  .ig-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ─── reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rv-armed .rv { opacity: 1 !important; transform: none !important; }
  .btn::after { display: none; }
}

/* deposit reference on a booking card in the dashboard */
.bk-code {
  margin-top: 0.4rem; font-size: var(--t-xs); color: var(--muted);
  letter-spacing: 0.02em;
}
.bk-code b {
  color: var(--gold); font-family: var(--display); font-size: var(--t-sm);
  letter-spacing: 0.14em;
}