/* ============================================================
   OUTLASHED — Luxury Lash Bar, Wesley Chapel FL
   Paper ground, ink type, one champagne accent for every action.
   Every colour has one job (design/DIRECTION.md). No gradients,
   no second accent; the lash map is the only decorative device.
   ============================================================ */
:root {
  --ink: #1C1A1B; --paper: #F5F0EA; --bone: #E8E0D6; --champagne: #C9A96E; --smoke: #7A7371;
  --champagne-2: #B9975A;                       /* the same accent, pressed */
  --line: rgba(28, 26, 27, .14); --line-2: rgba(28, 26, 27, .26);
  --text: var(--ink); --text-dim: rgba(28, 26, 27, .78);
  --on-dark: var(--paper); --on-dark-dim: rgba(245, 240, 234, .76); --on-dark-faint: rgba(245, 240, 234, .5);
  /* Type system A (default): Italiana display (hairline, caps-friendly, no italic) + Satoshi text */
  --display: 'Italiana'; --body: 'Satoshi';
  --display-weight: 400; --display-scale: 1.04; --display-track: .012em; --display-lh: 1.04;
  --em-style: normal; --em-family: var(--display); --em-weight: 400;
  --gutter: 24px; --stage-gutter: clamp(24px, 5vw, 72px); --nav-h: 64px; --radius: 4px; --wrap: 1180px;
  color-scheme: light;
}
/* Type bake-off: ?font=a|b|c|d (A is the default; the switch is the inline script in <head>). */
html[data-font="b"] { --display: 'Bespoke Serif'; --body: 'Telma'; --display-weight: 500; --display-scale: .94; --display-track: -.012em; --display-lh: 1.04; --em-style: italic; --em-weight: 400; }
html[data-font="c"] { --display: 'Rowan'; --body: 'Ranade'; --display-weight: 500; --display-scale: .96; --display-track: -.01em; --display-lh: 1.04; --em-style: italic; --em-weight: 400; }
html[data-font="d"] { --display: 'Britney'; --body: 'General Sans'; --display-weight: 400; --display-scale: 1; --display-track: 0; --display-lh: 1.02; --em-style: normal; --em-weight: 400; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; background: var(--paper); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.6 var(--body), system-ui, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { display: block; max-width: 100%; }
img[width][height] { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--champagne); color: var(--ink); }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

h1, h2, .display { font-family: var(--display), Georgia, serif; font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: var(--display-lh); margin: 0; text-wrap: balance; }
h1 { font-size: calc(clamp(44px, 7.2vw, 96px) * var(--display-scale)); }
h2 { font-size: calc(clamp(34px, 4.6vw, 60px) * var(--display-scale)); }
h3, h4 { font-family: var(--body), system-ui, sans-serif; font-weight: 500; margin: 0; }
h3 { font-size: clamp(20px, 1.5vw, 22px); line-height: 1.25; }
h1 em, h2 em, .statement em { font-style: var(--em-style); font-family: var(--em-family); font-weight: var(--em-weight); color: var(--champagne); }
p { margin: 0; }
.lead { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; color: var(--text-dim); max-width: 56ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--smoke); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--champagne); flex: none; }
.num, .price, .dur, .digits { font-family: var(--body), system-ui, sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 100; border-radius: 2px; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ph { border-bottom: 1px dotted rgba(201, 169, 110, .9); } /* placeholder: a fact still to come from Jacqueline (site.js CONFIG) */
img.ph { border-bottom: 0; } /* a placeholder image is marked by its .tag, not by a dotted line across it */

/* ---------- Buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 2px; border: 1px solid var(--champagne); background: var(--champagne); color: var(--ink); text-decoration: none; font: 500 12.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .25s, border-color .25s, color .25s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.btn:hover { background: var(--champagne-2); border-color: var(--champagne-2); transform: translateY(-1px); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #2B2829; border-color: #2B2829; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: transparent; border-color: var(--ink); }
.btn-light { background: rgba(28, 26, 27, .3); border-color: rgba(245, 240, 234, .55); color: var(--paper); }
.btn-light:hover { background: rgba(28, 26, 27, .5); border-color: var(--paper); }
.link { color: var(--champagne-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(201, 169, 110, .5); }
.link:hover { text-decoration-color: var(--champagne-2); }

/* ---------- Loader (a champagne hairline while the hero frames land) ---------- */
.loader { position: fixed; left: 0; top: var(--nav-h); right: 0; height: 2px; z-index: 90; background: transparent; pointer-events: none; transition: opacity .6s .3s; }
.loader::before { content: ""; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: var(--champagne); transition: width .3s; }
.loader.done { opacity: 0; }

/* ---------- Header: ONE height (64px) at every size, opaque paper, no blur, nothing animates ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; gap: 28px; height: var(--nav-h); padding: 0 var(--stage-gutter); background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; line-height: 0; }
.brand img { width: 172px; height: auto; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { text-decoration: none; font: 500 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-color: var(--champagne); }
.nav-links .btn { min-height: 40px; padding: 0 18px; font-size: 11.5px; border-bottom: 1px solid var(--champagne); }
.nav-links .btn:hover { transform: none; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 2px; width: 44px; height: 44px; cursor: pointer; touch-action: manipulation; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; margin: 4px auto; transition: transform .3s, opacity .3s; pointer-events: none; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
/* Full-screen paper panel under the header. The engine stops Lenis while it is open; the page itself is never
   overflow-locked (overflow:hidden on html/body kills sticky stages on iOS), touch-action does the locking. */
.mobile-menu { position: fixed; inset: 0; z-index: 55; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 0; padding: calc(var(--nav-h) + 24px) var(--stage-gutter) 40px; transform: translateY(-100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); touch-action: none; visibility: hidden; }
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu a { text-decoration: none; font-family: var(--display), Georgia, serif; font-weight: var(--display-weight); font-size: calc(clamp(32px, 9vw, 46px) * var(--display-scale)); line-height: 1.1; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.mobile-menu a[aria-current="page"], .mobile-menu a:hover { color: var(--champagne-2); }
.mobile-menu a.go { color: var(--champagne-2); }
.mobile-menu .fine { margin-top: 24px; }
.fine { font-size: 12.5px; line-height: 1.55; color: var(--smoke); }
body:has(.mobile-menu.open) { touch-action: none; }

/* ---------- Scroll-scrub scenes (engine contract: do not rename) ---------- */
.scrub { position: relative; height: 520vh; background: var(--ink); color: var(--paper); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .poster, .stage .poster[width][height] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .4s ease; }
.scrub.has-frame .poster, .scrub.has-frame .poster[width][height] { opacity: 0; }
.stage-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(28, 26, 27, .62) 0%, rgba(28, 26, 27, 0) 40%), linear-gradient(180deg, rgba(28, 26, 27, .4) 0%, rgba(28, 26, 27, 0) 24%); }
.reveal-line { position: absolute; opacity: 0; will-change: opacity, transform; max-width: min(580px, 38vw); z-index: 2; isolation: isolate; color: var(--paper); }
.reveal-line::before { content: ""; position: absolute; inset: -60px -90px; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(28, 26, 27, .55) 0%, rgba(28, 26, 27, .3) 42%, rgba(28, 26, 27, 0) 72%); filter: blur(18px); }
.reveal-line h1, .reveal-line h2 { color: var(--paper); text-shadow: 0 2px 30px rgba(28, 26, 27, .5); }
.reveal-line h1 em, .reveal-line h2 em { color: var(--champagne); }
.reveal-line .eyebrow { color: var(--on-dark-dim); }
.reveal-line .lead { color: rgba(245, 240, 234, .86); margin-top: 18px; }
.reveal-line .btn-row { margin-top: 26px; }
.reveal-line.ml { left: var(--stage-gutter); top: 50%; transform: translateY(-50%); }
.reveal-line.mr { right: var(--stage-gutter); top: 50%; transform: translateY(-50%); text-align: right; }
.reveal-line.mr .lead { margin-left: auto; }
.reveal-line.mr .btn-row { justify-content: flex-end; }
.reveal-line.mr .eyebrow { flex-direction: row-reverse; }
.reveal-line.low { top: auto; bottom: clamp(100px, 13vh, 150px); transform: none; }   /* a side line kept in the lower, darker part of the frame (the engine skips its -50% centring for .low) */
/* A bright scene (the blow-dry: ivory walls, window light) darkens the side its line sits on, from the frame's edge. The wash is the
   line's own ::before, so it fades in and out with the copy; the stage's overflow: hidden trims it to the frame. */
@media (min-width: 901px) {
  .scrub.bright .reveal-line.ml::before { inset: -100vh -32vw -100vh calc(-1 * var(--stage-gutter)); border-radius: 0; filter: none; background: linear-gradient(90deg, rgba(28, 26, 27, .76) 0%, rgba(28, 26, 27, .56) 45%, rgba(28, 26, 27, 0) 100%); }
  .scrub.bright .reveal-line.mr::before { inset: -100vh calc(-1 * var(--stage-gutter)) -100vh -32vw; border-radius: 0; filter: none; background: linear-gradient(270deg, rgba(28, 26, 27, .76) 0%, rgba(28, 26, 27, .56) 45%, rgba(28, 26, 27, 0) 100%); }
}
.reveal-line.center { left: 50%; top: 50%; text-align: center; max-width: min(860px, 88vw); }
.reveal-line.center .lead { margin-left: auto; margin-right: auto; }
.reveal-line.center .btn-row, .reveal-line.center .eyebrow { justify-content: center; }
.hero-title { left: var(--stage-gutter); top: auto; bottom: clamp(72px, 12vh, 140px); max-width: min(760px, 52vw); }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font: 500 10.5px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--on-dark-dim); display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .4s; z-index: 2; }
.scroll-hint span { width: 1px; height: 46px; background: linear-gradient(var(--paper), transparent); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(245, 240, 234, .16); z-index: 2; }
.progress-fill { height: 100%; width: 0; background: var(--champagne); }
.static-preview .scrub, .static-preview .scrub.hero { height: 100vh; }
.static-preview .stage { position: relative; height: 100vh; }
.static-preview .scroll-hint { display: none; }
.scrub.poster-only .poster { animation: breathe 16s ease-in-out infinite alternate; transform-origin: 50% 55%; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
/* Scene place-cards: a small line naming where we are, top right under the header, fades out early */
.reveal-line.place { left: auto; right: var(--stage-gutter); top: calc(var(--nav-h) + 22px); max-width: none; text-align: right; }
.reveal-line.place::before { display: none; }
.place .where { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 2px; border: 1px solid rgba(245, 240, 234, .32); background: rgba(28, 26, 27, .34); font: 500 12px/1.3 var(--body); letter-spacing: .06em; color: var(--paper); }
.place .where i { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); flex: none; }

/* ---------- Plain sections (typographic, alternating paper / bone; never two image sections in a row) ---------- */
.plain { position: relative; padding: clamp(72px, 9vw, 128px) 0; background: var(--paper); }
.plain.paper { background: var(--paper); }
.plain.bone { background: var(--bone); }
.plain.ink { background: var(--ink); color: var(--on-dark); }
.plain.ink .lead, .plain.ink p { color: var(--on-dark-dim); }
.plain.ink .eyebrow { color: var(--on-dark-dim); }
.plain.ink h2 em, .plain.ink .statement b { color: var(--champagne); }
.plain.paper + .plain.paper, .plain.bone + .plain.bone { border-top: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 60px); }
.sec-head .lead { margin-top: 18px; }
.sec-head.row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; max-width: none; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.split.wide { grid-template-columns: 1.1fr .9fr; }
.split > * { min-width: 0; }
.statement { font-family: var(--display), Georgia, serif; font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: calc(clamp(28px, 2.6vw, 34px) * var(--display-scale)); line-height: 1.24; text-wrap: balance; }
.statement b { font-weight: inherit; color: var(--champagne-2); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; }

/* ---------- Meet Jacqueline: facts + portrait ---------- */
.facts { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.facts li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; }
.facts li span:first-child { font: 500 11.5px/1.7 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--smoke); }
.facts li span:last-child { color: var(--text); }
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--bone); }
.portrait img, .portrait img[width][height] { width: 100%; height: 100%; object-fit: cover; }
.portrait .tag { position: absolute; left: 16px; bottom: 16px; background: var(--paper); color: var(--ink); border-radius: 2px; padding: 9px 12px; font: 500 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
/* Meet: Jacqueline cut out of her photo and standing on the section itself, no frame (2026-10-12, "no background, make it blend").
   The cut-out is a transparent WebP from tools/cutout.swift; a soft floor shadow grounds her. */
.cutout { position: relative; margin: 0; display: flex; justify-content: center; align-items: flex-end; min-width: 0; }
.cutout img, .cutout img[width][height] { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: 100%; max-height: min(78vh, 680px); filter: drop-shadow(0 28px 34px rgba(28, 26, 27, .16)); }
.cutout::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: -6px; width: 72%; height: 34px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(28, 26, 27, .2), rgba(28, 26, 27, 0)); }
.cutout .tag { position: absolute; z-index: 2; left: 0; top: 14%; background: var(--paper); color: var(--ink); border-radius: 2px; padding: 9px 12px; font: 500 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.meet .btn-row { margin-top: 30px; }

/* ---------- The menu: three boards, each a ledger (name + note · duration · price) ---------- */
.board { min-width: 0; }
.board h3 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 16px; align-items: baseline; padding: 14px 12px; }
.ledger li:nth-child(even) { background: var(--bone); border-radius: 2px; }
.plain.bone .ledger li:nth-child(even) { background: var(--paper); }
.ledger .name { min-width: 0; }
.ledger .name b { display: block; font-weight: 500; font-size: 16.5px; line-height: 1.3; }
.ledger .name small { display: block; font-size: 13.5px; line-height: 1.45; color: var(--smoke); margin-top: 4px; }
.ledger .dur { font-size: 13px; letter-spacing: .04em; color: var(--smoke); white-space: nowrap; }
.ledger .price { font-weight: 500; font-size: 17px; color: var(--ink); white-space: nowrap; text-align: right; min-width: 3em; }
.ledger .price.ph, .ledger .dur.ph { font-size: 12.5px; font-weight: 400; letter-spacing: .04em; color: var(--smoke); }
.board .board-foot { margin: 10px 12px 0; }
.ledger-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(32px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--line); color: var(--smoke); font-size: 15px; line-height: 1.55; }
.ledger-foot span { max-width: 62ch; }

/* ---- The menu card: an ink panel on the paper section, one real photo, champagne prices. Every row that can be booked
   today is a link to her calendar. Rendered by site.js from SERVICES (static rows on services.html are the no-JS fallback). ---- */
.menu-card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); background: var(--ink); color: var(--on-dark); border-radius: 6px; overflow: hidden; overflow: clip; box-shadow: 0 50px 90px -60px rgba(28, 26, 27, .7); } /* clip, not hidden: hidden would make the card a scroll container and stop the photo sticking */
.menu-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 55% at 92% 0%, rgba(201, 169, 110, .24), transparent 70%), radial-gradient(55% 45% at 45% 105%, rgba(201, 169, 110, .12), transparent 70%); }
.menu-photo { position: sticky; top: var(--nav-h, 64px); align-self: start; margin: 0; height: min(calc(100vh - var(--nav-h, 64px)), 700px); min-height: 440px; background: #2a2627; }
.menu-photo img, .menu-photo img[width][height] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 32%); }
.menu-photo::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201, 169, 110, .6); pointer-events: none; }
.menu-body { min-width: 0; display: grid; gap: clamp(26px, 3vw, 40px); align-content: start; padding: clamp(30px, 4.2vw, 60px) clamp(24px, 4vw, 56px); }
.menu-card .board h3 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(245, 240, 234, .18); color: var(--champagne); font-family: var(--display), Georgia, serif; font-weight: var(--display-weight); font-size: calc(clamp(27px, 2.5vw, 36px) * var(--display-scale)); letter-spacing: var(--display-track); line-height: 1.1; }
.menu-card .ledger li, .menu-card .ledger li:nth-child(even) { display: block; padding: 0; background: none; border-radius: 0; border-bottom: 1px solid rgba(245, 240, 234, .1); }
.menu-card .ledger .row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(3.4em, auto) 12px; gap: 4px 16px; align-items: center; padding: 17px 10px 17px 0; color: inherit; text-decoration: none; border-radius: 3px; transition: background .25s ease, padding .25s ease; }
.menu-card .ledger a.row:hover, .menu-card .ledger a.row:focus-visible { background: rgba(201, 169, 110, .12); padding-left: 14px; }
.menu-card .ledger .name b { color: var(--paper); font-size: 17.5px; }
.menu-card .ledger .name small { color: var(--on-dark-dim); }
.menu-card .ledger .dur { justify-self: end; border: 1px solid rgba(245, 240, 234, .3); border-radius: 999px; padding: 5px 11px; font-size: 12px; letter-spacing: .04em; color: var(--on-dark-dim); font-variant-numeric: tabular-nums; }
.menu-card .ledger .dur:empty { display: none; }
.menu-card .ledger .price { color: var(--champagne); font: 500 21px/1 var(--body), system-ui, sans-serif; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }
.menu-card .ledger .price.ph { font-size: 12.5px; font-weight: 400; letter-spacing: .04em; color: var(--on-dark-faint); border-bottom: 0; }
.menu-card .ledger .go { width: 8px; height: 8px; justify-self: end; border-top: 1.5px solid var(--champagne); border-right: 1.5px solid var(--champagne); transform: rotate(45deg); opacity: 0; transition: opacity .25s ease, transform .25s ease; }
.menu-card .ledger a.row .go { opacity: .6; }
.menu-card .ledger a.row:hover .go { opacity: 1; transform: translateX(3px) rotate(45deg); }
.menu-card .board .board-foot { margin: 12px 0 0; color: var(--on-dark-faint); }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding-top: 4px; }
.menu-foot span { max-width: 44ch; font-size: 14px; line-height: 1.55; color: var(--on-dark-dim); }
@media (max-width: 900px) {
  .menu-card { grid-template-columns: 1fr; }
  .menu-photo { position: relative; top: auto; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .menu-photo::after { inset: 10px; }
  .menu-body { padding: 28px 20px 30px; gap: 28px; }
  .menu-card .ledger .row { grid-template-columns: minmax(0, 1fr) auto 10px; padding: 15px 4px 15px 0; }
  .menu-card .ledger .name { grid-column: 1; grid-row: 1; }
  .menu-card .ledger .dur { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 6px; }
  .menu-card .ledger .price { grid-column: 2; grid-row: 1; font-size: 19px; }
  .menu-card .ledger .go { grid-column: 3; grid-row: 1; }
  .menu-card .ledger a.row:hover, .menu-card .ledger a.row:focus-visible { padding-left: 8px; }
  .menu-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .menu-card .ledger .row, .menu-card .ledger .go { transition: none; } }

/* ---------- THE LASH MAP (the one signature element): monochrome ink on bone, champagne only on the chosen chip ---------- */

/* ---------- FAQ: a details list, hairlines, the answer in smoke ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-grid .sec-head { margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 32px); }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; font: 500 18px/1.35 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 300 26px/1 var(--body); color: var(--champagne-2); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 24px; color: var(--text-dim); max-width: 60ch; font-size: 16px; line-height: 1.65; }
.faq .a p + p { margin-top: 12px; }

/* ---------- Stages: a timeline labelled by year or stage name, never by number ---------- */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.stage-item { border-top: 1px solid var(--line-2); padding-top: 20px; position: relative; min-width: 0; }
.stage-item::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 1px; background: var(--champagne); }
.stage-item .when { display: block; font: 500 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--smoke); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.stage-item h3 { margin-bottom: 8px; }
.stage-item p { color: var(--text-dim); font-size: 15.5px; }
.plain.ink .stage-item { border-color: rgba(245, 240, 234, .22); } .plain.ink .stage-item .when { color: var(--on-dark-dim); }

/* ---------- CTA band: ink ground, paper text, the emphasised word champagne ---------- */
.cta-band { position: relative; text-align: center; padding: clamp(80px, 10vw, 136px) var(--gutter); background: var(--ink); color: var(--on-dark); }
.cta-band .inner { position: relative; max-width: 760px; margin: 0 auto; }
.cta-band .eyebrow { color: var(--on-dark-dim); justify-content: center; }
.cta-band h2 em { color: var(--champagne); }
.cta-band .lead { margin: 18px auto 30px; color: var(--on-dark-dim); }
.cta-band .btn-row { justify-content: center; }
.cta-band .alt { margin-top: 24px; font-size: 14px; color: var(--on-dark-dim); }
.cta-band .alt a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid rgba(245, 240, 234, .4); }
.cta-band .alt a:hover { border-color: var(--champagne); }

/* ---------- Footer (paper) ---------- */
.footer { background: var(--paper); color: var(--text); padding: clamp(48px, 7vw, 84px) 0 36px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.foot-brand .brand { margin: 0 0 18px; }
.foot-brand .brand img { width: min(240px, 80%); }
.foot-brand p { color: var(--smoke); font-size: 15px; max-width: 34ch; }
.foot-col h4 { margin: 0 0 14px; font: 500 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--smoke); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-col a { color: var(--text); text-decoration: none; font-size: 15px; }
.foot-col a:hover { color: var(--champagne-2); }
.foot-col li { color: var(--text-dim); font-size: 15px; line-height: 1.5; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(32px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--smoke); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-legal a { color: var(--smoke); text-decoration: none; }
.foot-legal a:hover { color: var(--champagne-2); }

/* ---------- Inner pages ---------- */
.page-hero { padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) 0 clamp(36px, 5vw, 64px); background: var(--paper); }
.page-hero h1 { max-width: 14ch; }
.page-hero .lead { margin-top: 22px; }
.page-hero .btn-row { margin-top: 28px; }
.band { padding: 0 0 clamp(56px, 7vw, 96px); background: var(--paper); }
.band figure { margin: 0; }
.band .still { border-radius: var(--radius); overflow: hidden; background: var(--bone); aspect-ratio: 21 / 9; }
.band .still img, .band .still img[width][height] { width: 100%; height: 100%; object-fit: cover; }
.band figcaption, .band .cap { margin-top: 12px; font-size: 13px; letter-spacing: .02em; color: var(--smoke); }
.band .copy { margin-top: clamp(24px, 3vw, 40px); max-width: 60ch; }
.band .copy p + p { margin-top: 16px; }
.plain.bone + .band, .band + .plain.bone { border-top: 0; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 20px); }
.gallery figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--bone); position: relative; }
.gallery figure img, .gallery figure img[width][height] { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.gallery figure:hover img { transform: scale(1.03); }
.prose { max-width: 64ch; }
.prose p + p { margin-top: 18px; }
.prose p { color: var(--text-dim); }
.prose strong { color: var(--text); font-weight: 500; }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--bone); }
.contact-card .k { display: block; font: 500 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--smoke); margin-bottom: 14px; }
.contact-card p, .contact-card a { color: var(--text); font-size: 17px; text-decoration: none; overflow-wrap: anywhere; }
.contact-card a:hover { color: var(--champagne-2); }
.contact-card .note { display: block; margin-top: 8px; font-size: 13px; color: var(--smoke); }

/* ---------- Book: the real booking link opens in a new tab; the request form is a demo until CONFIG.bookingEndpoint is set ---------- */
.book-grid > * { min-width: 0; }
.book-text .lead { margin-top: 18px; }
.book-form { background: var(--bone); border-radius: var(--radius); padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 16px; }
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ff-row[hidden] { display: none; }
.ff { display: flex; flex-direction: column; gap: 7px; }
.ff > span { font: 500 11.5px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--smoke); }
.ff input, .ff select, .ff textarea { font-family: var(--body), system-ui, sans-serif; font-size: 15.5px; color: var(--text); background: var(--paper); border: 1px solid var(--line-2); border-radius: 2px; padding: 12px 14px; width: 100%; transition: border-color .25s, box-shadow .25s; appearance: none; -webkit-appearance: none; }
.ff select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C1A1B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.ff textarea { resize: vertical; min-height: 96px; }
.ff input::placeholder, .ff textarea::placeholder { color: rgba(28, 26, 27, .38); }
.ff input:focus, .ff select:focus, .ff textarea:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(201, 169, 110, .28); }
.ff-consent { flex-direction: row; align-items: flex-start; gap: 12px; cursor: pointer; }
.ff-consent > span { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); text-transform: none; letter-spacing: 0; font-weight: 400; }
.ff-consent input[type="checkbox"] { appearance: auto; -webkit-appearance: checkbox; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--champagne-2); flex: none; }
.ff-notes textarea { min-height: 120px; }
.book-form .btn { align-self: flex-start; margin-top: 4px; }
.form-note { margin: 0; font-size: 12px; letter-spacing: .02em; color: var(--smoke); line-height: 1.55; }
.form-done { background: var(--paper); border: 1px solid var(--champagne); border-radius: 2px; padding: 14px 18px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.form-done strong { font-weight: 500; }
.form-done[hidden] { display: none; }
form.sent .form-note { display: none; }
.book-form [aria-invalid="true"] { border-color: var(--champagne-2); box-shadow: 0 0 0 3px rgba(201, 169, 110, .28); }
.ff-err { font-size: 13px; color: var(--ink); }
.ff-err[hidden] { display: none; }

/* 404 + legal */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-top: var(--nav-h); }
.notfound .btn-row { justify-content: center; margin-top: 26px; }
.legal { max-width: 70ch; }
.legal h2 { font-size: calc(clamp(24px, 2.2vw, 30px) * var(--display-scale)); margin: clamp(36px, 4vw, 52px) 0 14px; }
.legal h3 { margin: 28px 0 10px; }
.legal p, .legal li { color: var(--text-dim); line-height: 1.7; }
.legal p + p { margin-top: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .reveal-line { max-width: min(540px, 44vw); }
  .stages { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nav { gap: 12px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .brand img { width: 150px; }
  .split, .split.wide, .book-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .sec-head { position: static; margin-bottom: 8px; }
  .contact-cards { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .reveal-line { max-width: none; }
  /* The engine drops the translateY(-50%) centring at or under 900px, so mid lines sit low in the frame here. */
  .reveal-line.ml, .reveal-line.mr { left: var(--stage-gutter); right: var(--stage-gutter); top: auto; bottom: max(8vh, 96px); transform: none; text-align: left; }   /* 96px clears the CRM chat bubble (bottom-right, ~76px) */
  .reveal-line.mr .lead { margin-left: 0; } .reveal-line.mr .btn-row { justify-content: flex-start; } .reveal-line.mr .eyebrow { flex-direction: row; }
  .hero-title { top: auto; bottom: max(8vh, 96px); max-width: none; }
  .reveal-line.place { display: none; }
  .stage-shade { background: linear-gradient(0deg, rgba(28, 26, 27, .82) 0%, rgba(28, 26, 27, .3) 42%, rgba(28, 26, 27, 0) 60%), linear-gradient(180deg, rgba(28, 26, 27, .45) 0%, rgba(28, 26, 27, 0) 26%); }
  .btn { min-height: 48px; padding: 0 20px; font-size: 12px; }
  .scroll-hint { display: none; }
  .scrub .reveal-line::before { inset: -30px -48px; }
  .scrub .reveal-line h2 { font-size: calc(clamp(28px, 7.4vw, 40px) * var(--display-scale)); }
  .hero-title h1 { font-size: calc(clamp(38px, 10vw, 54px) * var(--display-scale)); }
  h2 { font-size: calc(clamp(30px, 7vw, 40px) * var(--display-scale)); }
  .statement { font-size: calc(clamp(26px, 6.4vw, 32px) * var(--display-scale)); }
  .facts li { grid-template-columns: 1fr; gap: 3px; }
  .sec-head.row { grid-template-columns: 1fr; align-items: start; }
  .portrait { max-width: 420px; }
  .cutout img, .cutout img[width][height] { max-height: 520px; }
  .cutout .tag { left: 8px; }
  .band .still { aspect-ratio: 4 / 3; }
  .ledger-foot .btn { width: 100%; }
}
@media (max-width: 700px) {
  /* Phones: the scene IS the content. Two short beats per scene, one button each, no paragraph. */
  .scrub .reveal-line .lead { display: none; }
  .scrub .reveal-line .btn-row { margin-top: 16px; }
  .scrub .reveal-line .btn-row .btn ~ .btn { display: none; }
  .scrub .reveal-line .eyebrow { margin-bottom: 12px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; --stage-gutter: 16px; }
  body { font-size: 16px; }
  .btn-row .btn { width: 100%; min-height: 54px; font-size: 12.5px; letter-spacing: .16em; }
  .scrub .reveal-line .btn-row .btn { width: 100%; }
  .stages { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-legal a { display: inline-block; padding: 8px 0; }
  .ff-row { grid-template-columns: 1fr; }
  .cta-band .alt { font-size: 13.5px; }
  .ledger li { grid-template-columns: 1fr auto; grid-template-areas: "name price" "name dur"; gap: 2px 14px; padding: 13px 10px; align-items: start; }
  .ledger .name { grid-area: name; } .ledger .price { grid-area: price; } .ledger .dur { grid-area: dur; text-align: right; }
  .gallery { gap: 8px; }
  .faq summary { font-size: 17px; padding: 16px 0; }
}
@media (max-width: 380px) {
  .brand img { width: 136px; }
}

/* ---------- Reduced motion: posters stay, nothing scrubs or drifts, the map is static ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .scrub.has-frame .poster, .scrub.has-frame .poster[width][height] { opacity: 1; }
  .stage canvas { visibility: hidden; }
  .scrub.poster-only .poster { animation: none; transform: none; }
  .btn:hover { transform: none; }
  .gallery figure:hover img { transform: none; }
}

/* ---------- Print: the copy, nothing fancy ---------- */
@media print {
  .nav, .mobile-menu, .loader, .scroll-hint, .progress, .stage canvas, .stage-shade, .skip-link { display: none !important; }
  .scrub { height: auto; background: none; color: var(--ink); }
  .stage { position: static; height: auto; overflow: visible; background: none; }
  .stage .poster { position: static; height: auto; }
  .reveal-line { position: static; opacity: 1 !important; transform: none !important; color: var(--ink); max-width: none; padding: 16px 0; }
  .reveal-line::before { display: none; }
  .reveal-line h1, .reveal-line h2 { color: var(--ink); text-shadow: none; }
  .reveal { opacity: 1; transform: none; }
  .btn { display: none; }
}