/* Makeup by Lauren: The Beauty Counter.
   Two inks (logo sage + ink) carry the page; the only full colour is the photographs
   and the tester swatches sampled from them. */

:root {
  --sage: #C7CFBA;        /* logo ground, the counter lacquer */
  --sage-hi: #DCE2D2;     /* downlit counter */
  --sage-lo: #B6BFA7;     /* lacquer in shadow */
  --sage-deep: #3F4A3A;   /* shelf hardware, after-hours panels */
  --sage-deeper: #2F382B;
  --label: #FCFCFA;       /* label stock: tags, menu card, appointment card */
  --ink: #1E1F1B;
  --ink-soft: #3F4339;    /* secondary text on sage grounds, >= 5:1 */
  --ink-muted: #565A50;   /* secondary text on label stock, >= 6:1 */
  --rule: #DADDD3;        /* hairlines on label stock */
  --rule-sage: rgba(30, 31, 27, .2);
  --on-deep: #E4E9DB;     /* body text on sage-deep */

  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --ease-arrive: cubic-bezier(.16, 1, .3, 1);
  --ease-ui: cubic-bezier(.25, 1, .5, 1);
  --ease-exit: cubic-bezier(.32, 0, .67, 0);

  --gutter: clamp(16px, 5vw, 80px);
  --header-h: 76px;
  --shelf-shadow: 0 18px 28px -16px rgba(43, 51, 31, .55);
  --tag-shadow: 0 12px 26px -16px rgba(30, 31, 27, .6), 0 1px 0 rgba(30, 31, 27, .06);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; scrollbar-color: var(--sage-deep) var(--sage); }
body {
  margin: 0; background: var(--sage); color: var(--ink);
  font: 400 16px/1.6 var(--ui); font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--ink);
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--label); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.book :focus-visible, .footer :focus-visible { outline-color: var(--label); }
.book .appointment-card :focus-visible { outline-color: var(--ink); }
.ico { width: 14px; height: 14px; flex: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--label); padding: 12px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

.label, .talker .label, .menu-group h3 .sub {
  font-variation-settings: 'wdth' 118; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; line-height: 1.3;
}
.display, h2, h3.serif { font-family: var(--display); font-optical-sizing: auto; font-weight: 500; }

h2 { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 4.6vw, 70px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
h2 .line-mask, h2 .line { padding-bottom: .1em; margin-bottom: -.1em; }

.section-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.section-head p { max-width: 34em; color: var(--ink-soft); font-size: 17px; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px;
  padding: 14px 22px; background: var(--ink); color: var(--label); border: 0; text-decoration: none;
  font-variation-settings: 'wdth' 112; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  transition: background-color .2s var(--ease-ui);
}
.btn:hover { background: var(--sage-deep); }
.btn:active { background: var(--sage-deeper); }
.btn > span { display: inline-block; }
.btn-block { width: 100%; }
.text-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0 4px; background: none; border: 0;
  border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 500; text-decoration: none; transition: gap .2s var(--ease-ui);
}
.text-link:hover { gap: 12px; }

/* ---------- Glass shelf (the recurring divider) ---------- */
.glass {
  height: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.2) 50%, rgba(63,74,58,.3) calc(100% - 2px), rgba(255,255,255,.6) calc(100% - 1px));
  box-shadow: var(--shelf-shadow);
}

/* ---------- Preview note ---------- */
.preview-note { background: var(--ink); color: var(--sage-hi); text-align: center; font-size: 12px; padding: 7px var(--gutter); line-height: 1.4; }
.pn-short { display: none; }
.preview-note > span:first-child { font-variation-settings: 'wdth' 118; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--label); margin-right: 10px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 30; height: var(--header-h);
  display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter);
  background: var(--sage-hi); border-bottom: 1px solid transparent;
  transition: transform .25s var(--ease-ui), border-color .25s, background-color .25s;
}
.header.is-scrolled { border-color: var(--rule-sage); }
.header.is-hidden:not(:focus-within) { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.brand img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(30,31,27,.12); }
.brand-word { font-variation-settings: 'wdth' 125; font-weight: 500; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
.brand-word i { font-family: var(--display); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 17px; padding: 0 .1em; }
.nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav a:not(.btn) { font-size: 14px; font-weight: 500; text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color .15s; }
.nav a:not(.btn):hover, .nav a[aria-current="true"] { border-color: var(--ink); }
.nav .nav-book { display: none; }
.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: none; border: 1px solid var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: 'wdth' 112; }
.menu-lines { width: 16px; height: 8px; border-block: 1.5px solid currentColor; transition: transform .25s var(--ease-ui); }
.menu-toggle[aria-expanded="true"] .menu-lines { transform: scaleY(.15); }

/* ---------- The counter (hero) ---------- */
.counter {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  min-height: calc(100svh - var(--header-h) - 31px);
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); grid-template-rows: 1fr auto;
  grid-template-areas: "mirror copy" "shelf shelf";
  column-gap: clamp(24px, 5vw, 96px); padding: clamp(20px, 3vw, 40px) var(--gutter) 0;
  background: linear-gradient(180deg, var(--sage-hi) 0%, var(--sage) 52%, var(--sage-lo) 100%);
}
.downlight { position: absolute; inset: -20% -10% auto; height: 90%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 32% 18%, rgba(240,244,233,.85) 0%, rgba(240,244,233,0) 70%); }
.counter-copy { grid-area: copy; align-self: center; max-width: 640px; padding-bottom: clamp(24px, 6vh, 72px); }
.counter h1 { font-size: clamp(52px, 6.6vw, 96px); line-height: .95; letter-spacing: -.025em; margin-bottom: 28px; }
.counter h1 .ln { display: block; overflow: hidden; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.counter h1 .ln > span { display: block; }
.lede { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 31em; margin-bottom: 34px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 30px; }

.mirror-stand { grid-area: mirror; align-self: end; justify-self: center; width: min(100%, clamp(320px, 58vh, 600px)); display: flex; flex-direction: column; align-items: center; }
.mirror-wrap { position: relative; width: 100%; aspect-ratio: 1; }
.mirror { position: absolute; inset: 3.6%; border-radius: 50%; overflow: hidden; background: #D5DBCB;
  box-shadow: inset 0 0 0 9px rgba(255,255,255,.42), inset 0 0 0 10px rgba(30,31,27,.12), 0 34px 60px -34px rgba(43,51,31,.75); }
.mirror img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.mirror::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    linear-gradient(128deg, rgba(255,255,255,0) calc(var(--sheen, 0) * 70% - 14%), rgba(255,255,255,.26) calc(var(--sheen, 0) * 70% + 2%), rgba(255,255,255,0) calc(var(--sheen, 0) * 70% + 20%)),
    radial-gradient(closest-side, rgba(30,31,27,0) 84%, rgba(30,31,27,.18) 100%); }
.crescent { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--ink); pointer-events: none; }
.stem { position: relative; width: 14px; height: clamp(22px, 4vh, 46px); background: linear-gradient(90deg, #2A3226, #5A6650 45%, #2A3226); }
.stem::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 150px; height: 12px; transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, #5A6650, #2A3226); }
.tester-tag { position: absolute; right: -4%; bottom: 13%; width: clamp(150px, 15vw, 196px); padding: 12px 14px 12px; background: var(--label); box-shadow: var(--tag-shadow); transform: rotate(3deg); }
.tester-tag .swatch { width: 100%; height: 42px; }
.tester-tag figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: var(--ink-muted); }
.tester-tag figcaption b { display: block; color: var(--ink); font-variation-settings: 'wdth' 118; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; margin-bottom: 2px; }
.swatch .hi { pointer-events: none; }
.hi-satin { fill: rgba(255,255,255,.22); }
.hi-gloss { fill: rgba(255,255,255,.66); }

.shelf-hero { grid-area: shelf; position: relative; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) clamp(20px, 3vh, 36px); }
.shelf-hero .glass { position: absolute; left: 0; right: 0; top: 0; }
.talkers { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(140px, auto); gap: clamp(10px, 2vw, 28px); padding-top: 14px; align-items: start; }
.talker {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; padding: 16px 18px; min-height: 96px;
  background: var(--label); color: var(--ink); text-decoration: none; box-shadow: var(--tag-shadow);
  transform-origin: 50% 0; transition: transform .35s var(--ease-ui), background-color .2s, color .2s;
}
.talker .label { grid-column: 1 / -1; }
.talker .price, .item-price, .book-as b, .estimate .total dd { font-family: var(--display); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; font-variation-settings: 'opsz' 24; }
.cur { font-family: var(--ui); font-variation-settings: 'wdth' 100; font-weight: 600; font-size: max(11px, .42em); letter-spacing: 0; vertical-align: .95em; margin-right: .1em; }
.talker .price { font-size: clamp(34px, 3vw, 46px); line-height: 1; }
.talker .meta { font-size: 12px; line-height: 1.35; text-align: right; color: var(--ink-muted); }
.talker .meta > span { display: block; }
.talker:hover { transform: rotate(-1.4deg); }
.talker.is-selected { background: var(--ink); color: var(--label); }
.talker.is-selected .meta { color: var(--sage-hi); }
.talker-more { align-self: center; display: grid; gap: 6px; padding-left: 4px; }
.talker-more a { display: inline-flex; align-items: center; gap: 8px; width: max-content; font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.talker-more span { font-size: 12px; color: var(--ink-soft); }

/* ---------- The shelf of looks ---------- */
.looks { position: relative; background: linear-gradient(180deg, #B4BEA5 0%, #A9B49A 100%); overflow: clip; }
.looks::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: rgba(255,255,255,.7); }
.looks-pin { padding: clamp(64px, 9vh, 110px) 0 clamp(40px, 6vh, 72px); }
.looks-head { padding: 0 var(--gutter); }
.looks-head p { color: var(--ink-soft); }
.track-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.track-viewport::-webkit-scrollbar { display: none; }
.track { display: flex; gap: clamp(18px, 2.2vw, 34px); width: max-content; padding: 6px var(--gutter) 30px; }
.track { --unit-w: clamp(236px, 21vw, 312px); }
.unit { width: var(--unit-w); scroll-snap-align: start; display: flex; flex-direction: column; }
.unit-photo { position: relative; aspect-ratio: 3 / 4; overflow: clip; background: var(--sage-lo); box-shadow: 0 30px 34px -30px rgba(30,31,27,.8); }
.unit-open { position: absolute; inset: 0; padding: 0; border: 0; background: none; display: block; width: 100%; height: 100%; }
.unit-open img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .7s var(--ease-arrive); }
.unit-open:hover img { transform: scale(1.035); }
.zoom { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--label); color: var(--ink);
  font-variation-settings: 'wdth' 112; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .92; transition: opacity .2s, transform .25s var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .zoom { opacity: 0; transform: translateY(4px); } .unit-open:hover .zoom, .unit-open:focus-visible .zoom { opacity: 1; transform: none; } }
.unit .glass { margin: 0 calc(-1 * clamp(9px, 1.1vw, 17px)); }
.tag { position: relative; margin-top: 10px; padding: 16px 18px 14px; background: var(--label); box-shadow: var(--tag-shadow); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tag h3 { font-family: var(--display); font-weight: 500; font-size: clamp(19px, calc(var(--unit-w, 290px) * .095), 27px); line-height: 1.05; letter-spacing: -.01em; }
.tag .finish { font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); min-height: 2.9em; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 12px; }
.swatches li { display: grid; gap: 4px; }
.swatches .swatch { width: 100%; height: 24px; }
.swatches span { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.book-as { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13px; font-weight: 500; text-decoration: none; }
.book-as span { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s; }
.book-as:hover span { text-decoration-color: currentColor; }
.book-as b { font-size: 24px; }
.track-foot { display: flex; align-items: center; gap: 24px; padding: 6px var(--gutter) 0; }
.track-ctl { display: flex; gap: 8px; }
.track-ctl button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: var(--label); color: var(--ink); border: 1px solid var(--ink); transition: background-color .15s, color .15s; }
.track-ctl button:hover { background: var(--ink); color: var(--label); }
.looks.is-pinned .track-ctl { display: none; }
.unit-photo:has(.unit-open:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.unit-open:focus-visible { outline: 3px solid var(--label); outline-offset: -3px; }
.rail { flex: 1; height: 1px; background: rgba(30,31,27,.22); position: relative; }
.rail span { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(.11); }
.track-hint { display: flex; align-items: baseline; gap: 18px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.count { font-variation-settings: 'wdth' 118; font-weight: 600; letter-spacing: .12em; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink); }
.count b { font-weight: 700; }

/* Swatch painting: hidden only after app.js has armed it */
.swatch-armed .unit .swatch, .swatch-armed .tester-tag .swatch { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-arrive); }
.swatch-armed .unit .swatches li:nth-child(2) .swatch { transition-delay: .12s; }
.swatch-armed .unit .swatches li:nth-child(3) .swatch { transition-delay: .24s; }
.swatch-armed .unit.is-painted .swatch, .swatch-armed .tester-tag.is-painted .swatch { clip-path: inset(0 0 0 0); }

/* Phone-native shelf (app.js adds .carousel-on wherever the shelf is swiped, not pinned) */
.carousel-on .track { --unit-w: min(64vw, 300px); gap: 14px; padding-inline: calc(50vw - var(--unit-w) / 2); }
.carousel-on .unit { width: var(--unit-w); max-width: none; scroll-snap-align: center; scroll-snap-stop: always; }
.carousel-on .track-viewport { scroll-padding: 0; }
.carousel-on .unit-photo {
  transform-origin: 50% 100%; transform: scale(calc(.86 + .14 * var(--focus, 1)));
  box-shadow: 0 30px 34px -30px rgba(30,31,27, calc(.35 + .5 * var(--focus, 1)));
  will-change: transform;
}
.carousel-on .tag { transform: translateY(calc((1 - var(--focus, 1)) * 10px)); }
.carousel-on .unit:not(.is-centre) .zoom { opacity: 0; }

/* Desktop pinned shelf */
.looks.is-pinned .track-viewport { overflow: visible; scroll-snap-type: none; }
.looks.is-pinned .looks-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 56px) 0 24px; }
.looks.is-pinned .looks-head { margin-bottom: clamp(20px, 3.5vh, 44px); }
.looks.is-pinned .unit-open img { transform: scale(1.12); transition: none; }
.looks.is-pinned .track { --unit-w: clamp(180px, min(21vw, calc((100vh - 600px) * .75)), 312px); }
.looks.is-pinned .looks-head h2 { font-size: clamp(36px, min(4.2vw, 6.4vh), 64px); }
.looks.is-pinned .track { padding-bottom: 18px; }
.looks.is-pinned .tag { padding: 14px 16px 12px; }
.looks.is-pinned .swatches { margin: 6px 0 8px; }
.looks.is-pinned .hint-text { visibility: hidden; }

/* ---------- The price list ---------- */
.prices { position: relative; padding: clamp(80px, 11vw, 150px) var(--gutter); background: linear-gradient(180deg, var(--sage-hi), #D4DBC9); }
.prices > .glass, .bridal > .glass { position: absolute; inset: 0 0 auto; }
.menu-card {
  position: relative; max-width: 1220px; margin: 0 auto; background: var(--label); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px);
  padding: clamp(26px, 4.4vw, 64px); box-shadow: 0 40px 70px -46px rgba(43,51,31,.7), 0 1px 0 rgba(30,31,27,.06);
}
.menu-card::before { content: ""; position: absolute; top: clamp(12px, 1.6vw, 20px); left: clamp(12px, 1.6vw, 20px); right: clamp(12px, 1.6vw, 20px); height: 1px; background: var(--ink); opacity: .7; }
.menu-col { display: grid; gap: clamp(40px, 5vw, 64px); align-content: start; }
.menu-col + .menu-col { border-left: 1px solid var(--rule); padding-left: clamp(32px, 5vw, 80px); margin-left: calc(-1 * clamp(32px, 5vw, 80px) / 2); }
.menu-group h3 { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 2.4vw, 36px); line-height: 1.05; padding-bottom: 14px; border-bottom: 1px solid var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.menu-group h3.menu-sub { margin-top: 36px; font-size: clamp(24px, 2vw, 30px); }
.menu-group h3 .sub, .menu-sub span { font-family: var(--ui); font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main time price" "main . choose"; align-items: baseline; column-gap: 18px; row-gap: 10px; padding: 18px 0 18px; scroll-margin-top: calc(var(--header-h) + 40px); transition: background-color .25s, color .25s; }
.item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; }
.item:last-child::after { display: none; }
.item h4 { font-size: 18px; font-weight: 600; line-height: 1.3; font-variation-settings: 'wdth' 104; }
.item h4 .sub { display: inline-block; margin-left: 6px; font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.item-main p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); max-width: 40em; }
.item-main { grid-area: main; }
.item-time { grid-area: time; font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-price { grid-area: price; font-size: 28px; line-height: 1; text-align: right; white-space: nowrap; min-width: 2.6em; }
.item-price .per { font-family: var(--ui); font-size: 12px; color: var(--ink-muted); letter-spacing: 0; margin-left: 1px; }
.compact .item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main price"; padding: 13px 0; }
.compact .item-price { font-size: 22px; }
.choose {
  grid-area: choose; justify-self: end; align-self: start; min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--ink); text-decoration: none;
  font-variation-settings: 'wdth' 112; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: background-color .15s, color .15s;
}
.choose:hover { background: var(--ink); color: var(--label); }
.item.is-selected { background: var(--ink); color: var(--label); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.item.is-selected .item-main p, .item.is-selected .item-time, .item.is-selected h4 .sub { color: var(--sage-hi); }
.item.is-selected .choose { border-color: var(--label); background: var(--label); color: var(--ink); }
.item.is-selected .choose:focus-visible { outline-color: var(--label); }
.item.is-selected::after { opacity: 0; }
.item-feature { background: linear-gradient(90deg, rgba(199,207,186,.38), rgba(199,207,186,0)); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.item:target { animation: flash 1.6s var(--ease-arrive); }
@keyframes flash { 0% { background-color: var(--sage); } 100% { background-color: transparent; } }
.menu-foot { grid-column: 1 / -1; margin-top: clamp(36px, 4vw, 52px); padding-top: 20px; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; font-size: 14px; color: var(--ink-muted); }
.menu-foot b { color: var(--ink); font-weight: 600; }
.menu-foot .proposal { font-size: 13px; font-style: italic; align-self: center; }
.print-armed .menu-group .item::after { transform: scaleX(0); transition: transform .9s var(--ease-arrive) calc(var(--n, 0) * 70ms); }
.print-armed .menu-group h3 { border-bottom-color: transparent; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0% 1px no-repeat; transition: background-size 1s var(--ease-arrive); }
.print-armed .menu-group.is-printed .item::after { transform: none; }
.print-armed .menu-group.is-printed h3 { background-size: 100% 1px; }

/* ---------- Wedding-morning planner ---------- */
.bridal { position: relative; padding: clamp(80px, 11vw, 150px) var(--gutter); background: linear-gradient(180deg, var(--sage) 0%, var(--sage-lo) 100%); }
.planner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; max-width: 1220px; margin: 0 auto; }
.planner-controls { display: grid; gap: 26px; }
@media (min-width: 1025px) { .planner-controls { position: sticky; top: calc(var(--header-h) + 32px); } }
.field { display: grid; gap: 8px; }
.field label, .stepper label, .steppers legend { font-size: 13.5px; font-weight: 600; font-variation-settings: 'wdth' 104; }
.field .hint { font-size: 12.5px; color: var(--ink-soft); }
.req { font-weight: 500; font-size: 11.5px; color: var(--ink-muted); margin-left: 4px; }
select, input[type="text"], input[type="date"], input[type="time"], input[type="number"], input[type="email"], textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; font-size: 16px; line-height: 1.3; background: var(--label); color: var(--ink);
  border: 1px solid var(--ink-muted); border-radius: 2px; transition: border-color .15s, box-shadow .15s; accent-color: var(--ink);
}
select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select:hover, input:hover, textarea:hover { border-color: var(--ink); }
input[aria-invalid="true"] { border-color: #8E2A2A; box-shadow: 0 0 0 1px #8E2A2A; }
textarea { resize: vertical; min-height: 96px; }
.steppers { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.steppers legend { padding: 0; margin-bottom: 12px; }
.stepper { display: grid; gap: 8px; }
.stepper label { font-weight: 500; font-size: 13.5px; }
.step-ctl { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; }
.step-ctl button { display: grid; place-items: center; min-height: 48px; background: var(--label); border: 1px solid var(--ink-muted); transition: background-color .15s, color .15s; }
.step-ctl button:hover { background: var(--ink); color: var(--label); border-color: var(--ink); }
.step-ctl button svg { width: 14px; height: 14px; }
.step-ctl input { text-align: center; border-inline: 0; border-radius: 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.step-ctl input::-webkit-outer-spin-button, .step-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }

.planner-sheet { background: var(--label); padding: clamp(22px, 3.4vw, 44px); box-shadow: 0 40px 70px -46px rgba(43,51,31,.7); position: relative; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.sheet-ready { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.schedule { position: relative; padding: 8px 0 8px 22px; margin: 6px 0 18px; }
.schedule::before { content: ""; position: absolute; left: 4px; top: 22px; bottom: 22px; width: 1px; background: var(--ink); transform-origin: 50% 0; transition: transform 1.2s var(--ease-arrive); }
.sched-armed .schedule::before { transform: scaleY(0); }
.sched-armed .planner.is-drawn .schedule::before { transform: none; }
.schedule li { position: relative; display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.schedule li::before { content: ""; position: absolute; left: -22px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--label); border: 1px solid var(--ink); }
.schedule li.is-bride::before { background: var(--ink); }
.schedule li.is-note::before { border-style: dashed; }
.schedule .t { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule .who { font-size: 15px; font-weight: 500; }
.schedule .d { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule li.is-enter { animation: rowIn .5s var(--ease-arrive) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
.estimate { display: grid; gap: 0; margin-bottom: 14px; }
.estimate div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 7px 0; font-size: 14.5px; }
.estimate dt { color: var(--ink-muted); }
.estimate dd { font-variant-numeric: tabular-nums; font-weight: 500; }
.estimate .total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--ink); align-items: baseline; }
.estimate .total dt { color: var(--ink); font-weight: 600; font-size: 15px; }
.estimate .total dd { font-size: 40px; line-height: 1; }
.sheet-note { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 18px; }
.early-warn { font-size: 13px; padding: 10px 12px; background: rgba(199,207,186,.4); margin-bottom: 14px; }
.noscript { margin-top: 24px; font-size: 15px; }

/* ---------- Behind the counter ---------- */
.about {
  position: relative; padding: clamp(80px, 11vw, 150px) var(--gutter); background: var(--sage-hi);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 110px); align-items: center;
}
.seal { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: center; }
.seal img { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(30,31,27,.1), 0 34px 60px -34px rgba(43,51,31,.7); }
.seal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 10px rgba(255,255,255,.35), inset 0 0 0 11px rgba(30,31,27,.08); pointer-events: none; }
.about-copy > p { max-width: 36em; color: var(--ink-soft); font-size: 17px; margin-top: 18px; }
.about-copy h2 { max-width: 13em; }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule-sage); }
.how li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.how-n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.how h3 { font-size: 18px; font-weight: 600; font-variation-settings: 'wdth' 104; margin-bottom: 4px; }
.how p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.where { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px clamp(36px, 6vw, 110px); padding-top: 36px; border-top: 1px solid var(--rule-sage); align-items: baseline; }
.where-title { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.01em; }
.where p { color: var(--ink-soft); max-width: 46em; }

/* ---------- The appointment card ---------- */
.book {
  position: relative; padding: clamp(80px, 11vw, 150px) var(--gutter); background: var(--sage-deep); color: var(--label);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 110px); align-items: start;
}
.book::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: rgba(255,255,255,.35); }
.book-copy { position: sticky; top: calc(var(--header-h) + 40px); }
.book-copy h2 { color: var(--label); }
.book-copy > p { color: var(--on-deep); font-size: 17px; max-width: 30em; margin-top: 20px; }
.terms { margin-top: 36px; border-top: 1px solid rgba(228,233,219,.35); }
.terms div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(228,233,219,.2); font-size: 15px; }
.terms dt { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); padding-top: 3px; }
.terms dd { color: var(--label); }
.appointment-card { position: relative; background: var(--label); color: var(--ink); padding: clamp(22px, 3.4vw, 40px); max-width: 600px; width: 100%; justify-self: end; box-shadow: 0 50px 80px -40px rgba(0,0,0,.55); display: grid; gap: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.card-head img { width: 40px; height: 40px; border-radius: 50%; }
.enquiry { display: grid; gap: 18px; }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { color: #8E2A2A; font-size: 14px; font-weight: 500; min-height: 0; }
.form-error:empty { display: none; }
.small { font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
.card-note { font-size: 15px; color: var(--ink-muted); }
.inline-cal { margin-top: 10px; }
.calendar iframe { width: 100%; height: 720px; border: 0; margin-top: 14px; }
.sent { display: grid; gap: 14px; }
.sent h3 { font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.05; }
.sent p { color: var(--ink-muted); }
.sent-copy { margin: 0; padding: 14px 16px; background: #EEF1E8; font: 14px/1.55 var(--ui); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.sent .btn .ico, .sent .text-link .ico { width: 16px; height: 16px; }

/* ---------- Questions ---------- */
.faq { padding: clamp(80px, 11vw, 150px) var(--gutter); background: var(--sage-hi); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.faq h2 { position: sticky; top: calc(var(--header-h) + 40px); }
.faq-list { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule-sage); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 20px; align-items: center; padding: 22px 0; font-size: 17px; font-weight: 600; font-variation-settings: 'wdth' 104; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; justify-self: end; background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat; transition: transform .3s var(--ease-ui); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--ink-soft); max-width: 62ch; }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--sage-deep); color: var(--label); padding: 64px var(--gutter) 28px; }
.footer > .glass { position: absolute; inset: 0 0 auto; opacity: .55; }
.footer-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(228,233,219,.25); }
.footer .brand img { width: 56px; height: 56px; box-shadow: none; }
.footer-line { font-family: var(--display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.01em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(252,252,250,.5); padding-bottom: 2px; }
.footer-links a:hover { border-color: var(--label); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; font-size: 12.5px; color: var(--on-deep); }
.footer-base a { text-decoration: none; }

/* ---------- Mobile booking dock ---------- */
.dock { display: none; }

/* ---------- Close-up dialog ---------- */
.closeup { width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: var(--label); color: var(--ink); box-shadow: 0 50px 90px -30px rgba(0,0,0,.6); overflow: auto; overscroll-behavior: contain; }
.closeup::backdrop { background: rgba(30, 31, 27, .74); }
.closeup[open] { animation: closeupIn .45s var(--ease-arrive); }
.closeup[open]::backdrop { animation: fadeIn .35s ease; }
@keyframes closeupIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes fadeIn { from { opacity: 0; } }
.closeup-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.closeup-photo { background: var(--sage-lo); aspect-ratio: 3 / 4; }
.closeup-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.closeup-info { padding: clamp(24px, 3.6vw, 48px); display: grid; gap: 14px; align-content: start; }
.closeup-info h3 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 3.6vw, 52px); line-height: 1; letter-spacing: -.02em; }
.closeup-finish { color: var(--ink-muted); font-size: 16px; }
.callout { margin-top: 8px; border: 1px solid var(--ink); padding: 8px; width: max-content; max-width: 100%; background: var(--label); }
.callout img { width: auto; max-width: 100%; height: auto; }
.callout figcaption { font-size: 11.5px; color: var(--ink-muted); padding: 8px 2px 0; }
.closeup-swatches { display: grid; gap: 8px; margin: 6px 0 4px; }
.closeup-swatches li { display: grid; grid-template-columns: 110px 4.4em minmax(0, 1fr); gap: 14px; align-items: center; font-size: 13px; }
.closeup-swatches .swatch { width: 110px; height: 22px; }
.closeup-swatches b { font-variation-settings: 'wdth' 118; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.closeup-swatches code { font: 500 12.5px var(--ui); color: var(--ink-muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.closeup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.closeup-count { font-size: 12px; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.closeup-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--label); border: 1px solid var(--ink); }
.closeup-close svg { width: 16px; height: 16px; }
.closeup-close:hover { background: var(--ink); color: var(--label); }

/* ---------- Intro: the palette fills (once per session; an inline head script sets html.intro and --intro) ---------- */
.intro-screen { display: none; }
html.intro .intro-screen {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: var(--label); animation: introOut .6s var(--ease-exit) 1.9s both;
}
html.intro-skip .intro-screen { animation: introSkip .38s var(--ease-exit) both; }
.intro-palette { --pan: clamp(30px, 8.5vw, 40px); display: grid; grid-template-columns: repeat(3, var(--pan)); gap: calc(var(--pan) * .3); padding: calc(var(--pan) * .42); background: var(--ink); border-radius: 14px; }
.intro-palette span {
  width: var(--pan); height: var(--pan); border-radius: 50%; background: var(--c);
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 62%, #fff) 0, var(--c) 58%);
  animation: panIn .34s var(--ease-arrive) calc(var(--i) * 75ms + 60ms) both;
}
.intro-lock { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.intro-caps { margin: 0; color: var(--ink); font-variation-settings: 'wdth' 125; font-weight: 500; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
/* "Lauren" is written: a pen mask follows each stroke's centre line, revealing the vector ink behind it */
.intro-sig { display: block; width: clamp(190px, 54vw, 270px); height: auto; overflow: visible; }
.intro-ink { fill: var(--ink); }
.intro-pen path { stroke-dasharray: var(--len) calc(var(--len) + 2000px); stroke-dashoffset: calc(var(--len) + 1px); stroke-opacity: 0; animation: introPen calc(var(--dur) * 1s) linear calc(var(--delay) * 1s) forwards; }
@keyframes panIn { from { transform: scale(.25); opacity: 0; } }
@keyframes introPen { from { stroke-dashoffset: calc(var(--len) + 1px); stroke-opacity: 1; } to { stroke-dashoffset: 0; stroke-opacity: 1; } }
@keyframes introOut { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes introSkip { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes introFade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  html.intro .intro-screen, html.intro-skip .intro-screen { animation: introFade .25s ease .9s both; }
  .intro-palette span { animation: none; }
  .intro-pen path { animation: none; stroke-opacity: 1; stroke-dashoffset: 0; }
}

/* ---------- Load sequence (CSS, plays from first paint, or as the intro lifts: --intro) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .counter h1 .ln > span { animation: rise 1.05s var(--ease-arrive) calc(var(--intro, 0s) + .08s) both; }
  .counter h1 .ln + .ln > span { animation-delay: calc(var(--intro, 0s) + .17s); }
  .mirror { animation: iris 1.4s var(--ease-arrive) calc(var(--intro, 0s) + .05s) both; }
  .mirror img { animation: settle 1.9s var(--ease-arrive) calc(var(--intro, 0s) + .05s) both; }
  .counter .crescent { animation: turn 1.7s var(--ease-arrive) calc(var(--intro, 0s) + .1s) both; }
  .talker { animation: swing 1.15s var(--ease-arrive) both; }
  .talkers li:nth-child(1) .talker { animation-delay: calc(var(--intro, 0s) + .5s); }
  .talkers li:nth-child(2) .talker { animation-delay: calc(var(--intro, 0s) + .58s); }
  .talkers li:nth-child(3) .talker { animation-delay: calc(var(--intro, 0s) + .66s); }
  .tester-tag { animation: pin .9s var(--ease-arrive) calc(var(--intro, 0s) + .7s) both; }
  .lede, .actions { animation: lift .9s var(--ease-arrive) calc(var(--intro, 0s) + .3s) both; }
}
@keyframes rise { from { transform: translateY(104%); } }
@keyframes iris { from { clip-path: circle(36% at 50% 46%); } to { clip-path: circle(50% at 50% 50%); } }
@keyframes settle { from { transform: scale(1.14); } }
@keyframes turn { from { transform: rotate(-70deg); opacity: 0; } }
@keyframes swing { from { transform: rotate(-7deg) translateY(-6px); opacity: .3; } }
@keyframes pin { from { transform: rotate(9deg) translate(8px, -10px); opacity: 0; } }
@keyframes lift { from { transform: translateY(14px); opacity: .001; } }

@keyframes menuIn { from { opacity: 0; transform: translateY(-10px); } }

/* Touch feedback: a pressed control gives a little under the thumb. */
@media (hover: none) {
  .btn, .talker, .choose, .dock-ig, .step-ctl button, .unit-open, .text-link, .menu-toggle, .faq summary { transition: transform .16s var(--ease-ui), background-color .2s, color .2s; -webkit-tap-highlight-color: transparent; }
  .btn:active, .choose:active, .dock-ig:active, .step-ctl button:active, .menu-toggle:active { transform: scale(.97); }
  .talker:active { transform: rotate(-1.4deg) scale(.98); }
  .unit-open:active { transform: scale(.985); }
  .text-link:active, .faq summary:active { transform: translateY(1px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 22px; }
  .brand-word { letter-spacing: .22em; }
  .talkers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .talker-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 6px 0 0 2px; }
}
@media (max-width: 1024px) {
  .menu-card { grid-template-columns: 1fr; }
  .menu-col + .menu-col { border-left: 0; padding-left: 0; margin-left: 0; margin-top: clamp(40px, 5vw, 64px); }
  .planner { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .header { gap: 12px; }
  .brand img { width: 40px; height: 40px; }
  .brand-word { font-size: 11px; letter-spacing: .2em; }
  .app .menu-toggle { display: inline-flex; margin-left: auto; }
  .app .btn-header { display: none; }
  .app .nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 29; margin: 0; padding: 12px var(--gutter) 24px;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    display: grid; gap: 0; background: var(--sage-hi); border-bottom: 1px solid var(--rule-sage); box-shadow: 0 30px 40px -30px rgba(30,31,27,.5);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s var(--ease-exit), transform .2s var(--ease-exit), visibility 0s .2s;
  }
  .app .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease-arrive), transform .35s var(--ease-arrive); }
  .app .nav a:not(.btn) { font-family: var(--display); font-size: 28px; padding: 12px 0; border-bottom: 1px solid var(--rule-sage); }
  .app .nav .nav-book { display: inline-flex; margin-top: 18px; }
  .app .nav.is-open > * { animation: menuIn .5s var(--ease-arrive) both; }
  .app .nav.is-open > :nth-child(2) { animation-delay: .04s; }
  .app .nav.is-open > :nth-child(3) { animation-delay: .08s; }
  .app .nav.is-open > :nth-child(4) { animation-delay: .12s; }
  .app .nav.is-open > :nth-child(5) { animation-delay: .16s; }
  .header { position: sticky; }
  html:not(.app) .nav { display: none; }
  html:not(.app) .btn-header { margin-left: auto; }
  .about { grid-template-columns: 1fr; }
  .seal { width: min(70vw, 320px); }
  .where { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; gap: 18px; }
  .book { grid-template-columns: 1fr; }
  .book-copy { position: static; }
  .appointment-card { justify-self: stretch; max-width: none; }
  .faq { grid-template-columns: 1fr; }
  .faq h2 { position: static; }
}
@media (max-width: 820px) {
  .counter {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "copy" "mirror" "shelf";
    min-height: 0; padding-top: 20px;
  }
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .counter-copy { padding-bottom: 16px; }
  .counter h1 { font-size: clamp(44px, 12.4vw, 60px); margin-bottom: 12px; }
  .lede { font-size: 15.5px; margin-bottom: 18px; }
  .lede-more { display: none; }
  .actions { flex-wrap: nowrap; gap: 18px; }
  .actions .text-link { white-space: nowrap; }
  .counter .btn { padding-inline: 18px; gap: 12px; }
  .mirror-stand { width: min(58vw, 300px); }
  .tester-tag { right: -24%; bottom: 14%; width: 112px; padding: 8px 9px; }
  .tester-tag .swatch { height: 26px; }
  .tester-tag figcaption { font-size: 11px; }
  .stem { height: 22px; }
  .stem::after { width: 110px; }
  .talkers { gap: 8px; }
  .talker { grid-template-columns: 1fr; gap: 3px; padding: 11px 10px 12px; min-height: 0; }
  .talker .label { font-size: 11px; letter-spacing: .1em; min-height: 2.6em; }
  .talker .price { font-size: 30px; }
  .talker .meta { text-align: left; font-size: 11.5px; }
  .talker .meta > span + span { display: none; }
  .talker-more { padding-top: 10px; }
  .dock {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--sage-hi);
    border-top: 1px solid var(--rule-sage); box-shadow: 0 -16px 30px -24px rgba(30,31,27,.6);
    transition: transform .3s var(--ease-ui);
  }
  .dock .btn { flex: 1; padding: 12px 16px; gap: 10px; letter-spacing: .1em; white-space: nowrap; }
  .dock-ig { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 76px; min-height: 50px; border: 1px solid var(--ink); text-decoration: none; font-weight: 600; font-size: 12px; letter-spacing: .12em; font-variation-settings: 'wdth' 112; }
  .dock-ig .ico { width: 16px; height: 16px; }
  /* the call button is a square handset icon; its aria-label carries the number */
  .dock-call { min-width: 50px; padding: 0 12px; }
  .dock-call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dock.is-hidden, .dock.menu-open { transform: translateY(110%); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: 28px; }
  .looks-pin { padding-top: 64px; }
  .track { --unit-w: min(70vw, 300px); }
  .track-hint .hint-text { display: none; }
  .item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main price" "time choose"; }
  .item-time { align-self: center; }
  .compact .item { grid-template-areas: "main price"; row-gap: 0; }
  .steppers { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .footer-base { flex-direction: column; }
  .closeup { width: 100vw; max-width: 100vw; max-height: calc(100dvh - 24px); height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 14px 14px 0 0; touch-action: pan-y; }
  .closeup[open] { animation: sheetUp .5s var(--ease-arrive); }
  .closeup::before { content: ""; position: sticky; top: 0; z-index: 3; display: block; width: 40px; height: 4px; margin: 8px auto -12px; border-radius: 2px; background: rgba(252,252,250,.9); box-shadow: 0 1px 3px rgba(30,31,27,.35); }
  .closeup-photo { touch-action: pan-y; }
  .closeup-inner { grid-template-columns: 1fr; }
  .closeup-photo { aspect-ratio: 4 / 4.2; }
  .closeup-swatches li { grid-template-columns: 90px 4em minmax(0, 1fr); }
  .closeup-swatches .swatch { width: 90px; }
}
@media (max-width: 400px) {
  .tester-tag { width: 104px; right: -22%; padding: 7px 8px; }
  .tester-tag .swatch { height: 22px; }
}
@media (max-width: 389px) {
  .actions { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 560px) {
  .preview-note { font-size: 11px; text-align: left; }
  .pn-long { display: none; }
  .pn-short { display: inline; }
  .brand-word { display: none; }
  .row-2 { grid-template-columns: 1fr; }
  .section-head p { font-size: 16px; }
  .menu-card { padding: 22px 18px; margin: 0 -4px; }
  .menu-card::before { left: 10px; right: 10px; top: 10px; }
  .item.is-selected, .item-feature { margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
  .terms div { grid-template-columns: 1fr; gap: 4px; }
  .estimate .total dd { font-size: 34px; }
  .schedule li { grid-template-columns: 5.4em minmax(0, 1fr); }
  .schedule .d { grid-column: 2; }
}
@media (max-width: 360px) {
  .dock .btn { padding: 12px 14px; gap: 8px; letter-spacing: .08em; }
  .dock-ig { min-width: 64px; }
  .dock-call { min-width: 50px; }
  .talker .price { font-size: 26px; }
  .steppers { grid-template-columns: 1fr; }
}
@media (max-width: 340px) {
  .dock .btn { padding: 12px 10px; letter-spacing: .06em; }
  .dock .btn .ico { display: none; }
  .dock-ig { min-width: 50px; padding: 0 12px; }
  .dock-ig span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Reduced motion: no spatial movement; state changes stay legible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .unit-open:hover img { transform: none; }
  .talker:hover { transform: none; }
  .swatch-armed .unit .swatch, .swatch-armed .tester-tag .swatch { clip-path: none; }
  .carousel-on .unit-photo, .carousel-on .tag { transform: none; opacity: 1; }
  .btn:active, .choose:active, .talker:active, .unit-open:active { transform: none; }
  .print-armed .menu-group .item::after { transform: none; }
  .print-armed .menu-group h3 { border-bottom-color: var(--ink); background-size: 100% 1px; }
  .sched-armed .schedule::before { transform: none; }
}

/* ---------- Owner-only layout preview (?preview=1) ---------- */
body.layout-preview { height: 100dvh; overflow: hidden; background: #E8EAE3; display: flex; flex-direction: column; padding: 0; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; min-height: 72px; background: var(--label); border-bottom: 1px solid #C3CAB8; flex-shrink: 0; }
.preview-title { font-size: 15px; font-weight: 600; }
.preview-title small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.preview-switch { display: flex; border: 1px solid var(--sage-deep); padding: 3px; gap: 3px; border-radius: 8px; }
.preview-switch button { border: 0; background: transparent; color: var(--sage-deep); border-radius: 5px; padding: 9px 22px; min-height: 42px; font-size: 14px; }
.preview-switch button[aria-pressed="true"] { background: var(--sage-deep); color: var(--label); }
.preview-size { font-size: 12px; color: var(--ink-muted); min-width: 130px; text-align: right; }
.preview-stage { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 16px; overflow: auto; }
.preview-page { display: block; border: 1px solid #BCC3B2; width: 100%; height: 100%; background: var(--label); }
.preview-mobile .preview-page { width: 390px; max-width: 100%; flex-shrink: 0; box-shadow: 0 8px 30px rgba(35,36,31,.1); border-radius: 16px; }

/* ---------- Utilities and fallbacks ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:not(.app) .enquiry, html:not(.app) .planner, html:not(.app) .service-field { display: none; }
html.app .app-fallback { display: none; }
.closeup:not([open]) { display: none; }
@media (forced-colors: active) {
  .item.is-selected, .talker.is-selected { outline: 3px solid Highlight; outline-offset: -3px; }
  .swatch { forced-color-adjust: none; }
}
@media print {
  .intro-screen { display: none !important; }
  .dock, .skip, .menu-toggle, .closeup, .track-foot, .actions, .planner-controls, .appointment-card, .downlight { display: none !important; }
  .preview-note { background: #fff; border-bottom: 1px solid #000; }
  .faq details::details-content { content-visibility: visible; display: block; }
  .carousel-on .track { padding-inline: 0; }
  .header { position: static; }
  body { padding-bottom: 0; background: #fff; }
  .counter, .looks, .prices, .bridal, .about, .book, .faq, .footer { background: #fff !important; color: #000; min-height: 0; }
  .book *, .footer *, .preview-note * { color: #000 !important; }
  .track-viewport { overflow: visible; }
  .track { flex-wrap: wrap; width: auto; padding-inline: 0; transform: none !important; }
  .carousel-on .unit-photo, .carousel-on .tag { transform: none; }
  .swatch-armed .unit .swatch, .swatch-armed .tester-tag .swatch { clip-path: none; }
  .print-armed .menu-group .item::after { transform: none; }
  .print-armed .menu-group h3 { border-bottom-color: #000; }
  .menu-card, .planner-sheet { box-shadow: none; border: 1px solid #000; }
  .faq details > p { display: block; }
  .footer-base a, .track-ctl { display: none; }
  .looks.is-pinned .looks-pin { height: auto; }
}