/* ============================================================
   MDW MIAMI · 40 units of Botox for $399
   Built on MDW's brand guide (Modern Day Wellness aesthetics):
     colours  #F3F0E9 stone · #E3DBCC sand · #D1BCAE blush · #D2C5B0 beige · #AD9476 tan · #866042 brown
     type     The Seasons (stand-in: Cormorant Garamond) · Montserrat · the logos are MDW's own artwork
   Own pieces: the video hero, the before/after lens, the Google score with map and review wall,
   the $399 ticket and price slider, the visit timeline, the Instagram reels, the all-brown close.
   ============================================================ */

:root {
  --stone: #F3F0E9; --sand: #E3DBCC; --blush: #D1BCAE; --beige: #D2C5B0; --tan: #AD9476; --brown: #866042;
  --cream: #F6F2EA; /* text and buttons on brown or on video */
  --bg: #F3F0E9; --paper: #FCFBF8;
  /* body text is the brand brown taken darker: the palette's own brown is too light for small type */
  --ink: #3B2A1E; --ink-2: #553D2C; --muted: #6E5847; --dim: #77614F; --faint: #D2C5B0;
  --line: rgba(134, 96, 66, 0.15); --line-2: rgba(134, 96, 66, 0.28);
  --accent: #866042; --deco: #AD9476;
  --cta: linear-gradient(180deg, #94694A 0%, #866042 52%, #7A5639 100%);
  --foil: linear-gradient(100deg, #7A5639 0%, #866042 30%, #A58A66 50%, #C8B294 58%, #9A7B58 68%, #7A5639 100%);
  --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-d: "Cormorant Garamond", "Cormorant", "Iowan Old Style", Georgia, serif;
  --font-b: "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --r-shell: 30px; --r-core: 23px;
  --gutter: clamp(18px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html.is-locked { overflow: hidden; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font-b); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
address { font-style: normal; }
h1, h2, h3 { text-wrap: balance; font-weight: 500; }
p { text-wrap: pretty; }
b, strong { font-weight: 700; color: var(--ink); }
::selection { background: rgba(173, 148, 118, 0.4); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--brown); color: var(--cream); font-weight: 700; }
.skip:focus { top: 12px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg .fill { fill: currentColor; stroke: none; }

/* MDW's own logo artwork, cut from the brand guide as a mask so it takes the colour around it */
.logo { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logo-mdw { --logo: url("img/mdw.png"); aspect-ratio: 564 / 178; }
.logo-aesthetics { --logo: url("img/mdw-aesthetics.png"); aspect-ratio: 593 / 234; }
.logo-miami { --logo: url("img/mdw-miami.png"); aspect-ratio: 593 / 267; }

/* ---------- ambient ---------- */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; }
.orb-a { width: 1200px; height: 1200px; top: -640px; left: 50%; margin-left: -760px; background: radial-gradient(circle, rgba(209, 188, 174, 0.6) 0%, rgba(209, 188, 174, 0.16) 42%, transparent 68%); animation: drift 30s var(--ease-out) infinite alternate; }
.orb-b { width: 980px; height: 980px; top: 8%; right: -520px; background: radial-gradient(circle, rgba(210, 197, 176, 0.7) 0%, rgba(210, 197, 176, 0.18) 45%, transparent 70%); animation: drift 38s var(--ease-out) infinite alternate-reverse; }
.orb-c { width: 900px; height: 900px; bottom: -520px; left: -380px; background: radial-gradient(circle, rgba(227, 219, 204, 0.9) 0%, transparent 66%); }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50px, 40px, 0); } }
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- layout + type ---------- */
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(76px, 8.6vw, 128px); position: relative; }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.hero-grid > *, .results-grid > *, .offer-grid > *, .offer-side > *, .visit-grid > *, .stories-grid > *, .faq-grid > *, .close-panel > * { min-width: 0; }
.sec-head.center .kicker { justify-content: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.kicker::before { content: ""; width: 22px; height: 1.5px; background: var(--deco); border-radius: 2px; }
/* the brand serif sets old-style figures by default; prices need the tall ones */
.h1, .h2, .dlg-title, h3, .tk-price, .tk-sub, .calc-q, .calc-rate output, .calc-keep dd, .close-price b, .dock b, .loc-name, .pl-cap b, .pl-end p { font-family: var(--font-d); font-variant-numeric: lining-nums; }
.h2 { font-size: clamp(46px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.015em; }
.em { font-style: italic; color: var(--accent); }
.h2 .em { display: block; }
/* the foil is the price's colour and nothing else's; a slow band of light crosses it */
.foil { font-style: italic; background: var(--foil) 0% 0 / 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.09em 0.16em 0; margin-right: -0.09em; animation: foil 5s var(--ease) 1.6s infinite alternate; }
@keyframes foil { 0%, 45% { background-position: 0% 0; } 100% { background-position: 100% 0; } }
.lede { font-size: clamp(16px, 1.4vw, 18.5px); color: var(--muted); line-height: 1.65; margin-top: 20px; max-width: 560px; }
.fine { font-size: 12.5px; color: var(--dim); line-height: 1.55; }
s { text-decoration-thickness: 1.5px; text-decoration-color: var(--deco); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 8px 8px 8px 24px;
  border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.4s var(--ease);
}
.btn-primary { background: var(--cta); color: var(--cream); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 16px 34px -14px rgba(134, 96, 66, 0.7); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 22px 44px -14px rgba(134, 96, 66, 0.85); }
.btn:active { transform: scale(0.97); }
.btn-ico { width: 38px; height: 38px; border-radius: 50%; background: rgba(246, 242, 234, 0.18); display: grid; place-items: center; transition: transform 0.5s var(--ease); flex: none; }
.btn-ico svg { width: 18px; height: 18px; stroke-width: 2; }
.btn:hover .btn-ico { transform: translate(2px, -1px) scale(1.05); }
.btn-sm { min-height: 44px; font-size: 13.5px; padding: 5px 5px 5px 18px; }
.btn-sm .btn-ico { width: 34px; height: 34px; }
.btn-lg { min-height: 64px; font-size: 16.5px; padding: 9px 9px 9px 30px; }
.btn-lg .btn-ico { width: 46px; height: 46px; }
.btn-block { width: 100%; justify-content: space-between; }
@media (max-width: 430px) {
  .btn-lg { min-height: 60px; font-size: 15px; gap: 8px; padding: 8px 8px 8px 22px; }
  .btn-lg .btn-ico { width: 44px; height: 44px; }
  /* phones drop one word from the long button label, so it never outgrows its card */
  .w-opt { display: none; }
}
/* on brown or on video the button turns to the brand's light stone */
/* literal colours on purpose: it lives inside brown and video islands, where --ink means light text */
.btn-light { background: var(--cream); color: #3B2A1E; box-shadow: 0 1px 0 #fff inset, 0 20px 44px -18px rgba(40, 26, 16, 0.7); }
.btn-light:hover { transform: translateY(-1px); background: #fff; }
.btn-light .btn-ico { background: var(--brown); color: var(--cream); }

/* ---------- shells (machined bezel) ---------- */
.shell { position: relative; padding: 7px; border-radius: var(--r-shell); background: rgba(134, 96, 66, 0.055); box-shadow: inset 0 0 0 1px var(--line), 0 40px 70px -46px rgba(88, 60, 40, 0.5); }
.core { position: relative; height: 100%; border-radius: var(--r-core); background: linear-gradient(180deg, #FDFCFA, #F8F5EF); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--line); padding: clamp(22px, 3vw, 34px); overflow: hidden; }
@media (hover: hover) {
  .shell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(173, 148, 118, 0.2), transparent 62%); opacity: 0; transition: opacity 0.6s var(--ease); }
  .shell:hover::after { opacity: 1; }
}

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; z-index: 60; top: 14px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 7px 7px 22px; border-radius: 999px;
  background: rgba(246, 243, 237, 0.74); box-shadow: inset 0 0 0 1px var(--line), 0 12px 36px -18px rgba(88, 60, 40, 0.45); transition: background-color 0.4s var(--ease);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
}
.nav.is-scrolled { background: rgba(246, 243, 237, 0.92); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--brown); }
.brand .logo { height: 22px; }
.brand-s { font-size: 10px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); }
.nav-links { display: none; gap: 2px; }
.nav-links a { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: color 0.3s var(--ease), background-color 0.3s var(--ease); }
.nav-links a:hover { color: var(--ink); background: rgba(134, 96, 66, 0.08); }
.lbl-long { display: none; }
@media (min-width: 560px) { .lbl-long { display: inline; } .lbl-short { display: none; } }
@media (max-width: 359px) { .brand-s { display: none; } }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: clamp(100px, 12vh, 136px); padding-bottom: clamp(56px, 7vw, 96px); overflow: clip; }
.hero-grid { display: grid; gap: 54px; align-items: center; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: live 2.2s var(--ease-out) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(134, 96, 66, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(134, 96, 66, 0); } }
.h1-wrap { position: relative; }
.h1 { font-size: clamp(38px, 12.8vw, 60px); line-height: 0.95; letter-spacing: -0.02em; }
.h1 .ln { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.04em 0.1em 0.12em 0; margin-bottom: -0.12em; }
.h1 .ln-price { display: block; font-size: 2em; line-height: 0.86; }
.h1 .ln > span { display: block; }
.js .h1 .ln > span { transform: translateY(112%); }
.js .is-ready .h1 .ln > span { transform: none; transition: transform 1.15s var(--ease-out); }
.js .is-ready .h1 .ln:nth-child(2) > span { transition-delay: 0.09s; }
.js .is-ready .h1 .ln:nth-child(3) > span { transition-delay: 0.18s; }
/* the regular price, struck, rides beside the offer price */
.h1 .was { font-family: var(--font-b); font-size: 0.17em; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-left: 0.7em; vertical-align: 0.95em; }
.hero-lede { margin-top: 20px; max-width: 470px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cta-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.cta-note svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 1px; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.stars { display: inline-flex; gap: 1px; color: var(--deco); }
.stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.js .in-1, .js .in-2, .js .in-3, .js .in-4, .js .in-5, .js .in-stage { opacity: 0; transform: translateY(18px); }
.js .is-ready .in-1, .js .is-ready .in-2, .js .is-ready .in-3, .js .is-ready .in-4, .js .is-ready .in-5, .js .is-ready .in-stage { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); }
.js .is-ready .in-2 { transition-delay: 0.32s; }
.js .is-ready .in-3 { transition-delay: 0.42s; }
.js .is-ready .in-4 { transition-delay: 0.5s; }
.js .is-ready .in-5 { transition-delay: 0.58s; }
.js .is-ready .in-stage { transition-delay: 0.3s; }

.hero-stage { position: relative; justify-self: center; display: grid; place-items: center; }
.stage-glow { position: absolute; inset: -16% -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(209, 188, 174, 0.85), rgba(210, 197, 176, 0.35) 55%, transparent); pointer-events: none; }
.phone { width: min(76vw, 330px); aspect-ratio: 9 / 16; border-radius: 42px; background: rgba(134, 96, 66, 0.1); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 90px -40px rgba(88, 60, 40, 0.65); }
/* A video is a dark island on a light page: it sets its own text colour and the tokens its children read. */
.player { --ink: #F6F2EA; --ink-2: #EDE6DA; --muted: #E3DBCC; --line-2: rgba(246, 242, 234, 0.3); position: absolute; inset: 7px; border-radius: 35px; overflow: hidden; background: #2E2018; color: var(--ink); isolation: isolate; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 32, 24, 0.6) 0%, transparent 22%, transparent 55%, rgba(46, 32, 24, 0.88) 100%); pointer-events: none; transition: opacity 0.5s var(--ease); }
.pl-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; z-index: 2; }
.pl-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(46, 32, 24, 0.62); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; font-weight: 600; }
.pl-tag .live { background: var(--cream); animation-name: live-cream; }
@keyframes live-cream { 0% { box-shadow: 0 0 0 0 rgba(246, 242, 234, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(246, 242, 234, 0); } }
.pl-time { padding: 6px 10px; border-radius: 999px; background: rgba(46, 32, 24, 0.62); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pl-hit:focus-visible { outline-color: var(--cream); outline-offset: -4px; }
.pl-sound { position: absolute; left: 12px; right: 12px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 9px; border-radius: 999px; text-align: left; background: rgba(246, 242, 234, 0.95); color: #3B2A1E; box-shadow: 0 18px 40px -16px rgba(40, 26, 16, 0.8); transition: transform 0.5s var(--ease), opacity 0.4s var(--ease); }
.pl-sound:hover { transform: translateY(-2px); }
.pl-sound-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brown); color: var(--cream); flex: none; animation: pulse 2.4s var(--ease-out) infinite; }
.pl-sound-ico svg { width: 19px; height: 19px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(134, 96, 66, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(134, 96, 66, 0); } }
.pl-sound b { display: block; font-size: 14px; line-height: 1.25; color: #3B2A1E; }
.pl-sound small { display: block; font-size: 11.5px; line-height: 1.3; color: #6E5847; font-weight: 500; }
.pl-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.pl-play span { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: rgba(246, 242, 234, 0.95); color: var(--brown); box-shadow: 0 0 0 10px rgba(246, 242, 234, 0.16), 0 20px 50px -14px rgba(40, 26, 16, 0.8); transition: transform 0.6s var(--ease); }
.pl-play svg { width: 28px; height: 28px; margin-left: 3px; }
.player:hover .pl-play span { transform: scale(1.07); }
.pl-cap { position: absolute; left: 18px; right: 18px; bottom: 22px; z-index: 2; pointer-events: none; }
.pl-cap b { display: block; font-weight: 600; font-size: 27px; line-height: 1.08; color: inherit; }
.pl-cap small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.pl-mute { position: absolute; right: 12px; bottom: 22px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(46, 32, 24, 0.64); box-shadow: inset 0 0 0 1px var(--line-2); }
.pl-mute svg { width: 18px; height: 18px; }
.pl-mute .i-muted, .pl-mute.is-muted .i-vol { display: none; }
.pl-mute.is-muted .i-muted { display: block; }
.pl-state { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.3s var(--ease); }
.pl-state svg { width: 64px; height: 64px; padding: 20px; border-radius: 50%; background: rgba(46, 32, 24, 0.62); }
.pl-bar { position: absolute; left: 14px; right: 14px; bottom: 9px; height: 3px; border-radius: 3px; background: rgba(246, 242, 234, 0.25); z-index: 2; overflow: hidden; opacity: 0; transition: opacity 0.4s var(--ease); }
.pl-bar i { display: block; height: 100%; background: var(--cream); border-radius: inherit; transform-origin: left; transform: scaleX(0); }
.pl-end { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; background: rgba(59, 42, 30, 0.9); }
.pl-end p { font-weight: 500; font-size: 36px; line-height: 1.05; }
.pl-replay { font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 8px 14px; text-decoration: underline; text-underline-offset: 4px; }
.player.is-live .pl-sound, .player.is-live .pl-play, .player.is-live .pl-cap { opacity: 0; visibility: hidden; pointer-events: none; }
.player.is-live .pl-shade { opacity: 0.55; }
.player.is-live .pl-bar, .player[data-ambient] .pl-bar { opacity: 1; }
.player.is-live.is-paused .pl-state { opacity: 1; }


@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(32px, 5vw, 80px); min-height: min(calc(100dvh - 230px), 760px); }
  .h1 { font-size: clamp(84px, min(9.4vw, 13.6vh), 150px); line-height: 0.9; }
  .h1 .ln { display: block; }
  .h1 .ln-price { font-size: 1em; line-height: inherit; }
  .phone { width: auto; height: clamp(520px, calc(100dvh - 210px), 700px); }
  .hero-stage .phone { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.9s var(--ease-out); }
}

/* Phones: her visit plays across the top of the first screen and melts into brand brown, where the offer sits.
   Tapping for sound hands the screen to the video (the offer steps aside, the dock keeps the button). */
.pl-back { position: absolute; top: 78px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(46, 32, 24, 0.66); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 600; }
.pl-back svg { width: 15px; height: 15px; stroke-width: 2; }
@media (max-width: 959px) {
  /* a brown island: it re-declares the tokens its children read and sets its own text colour */
  .hero { --ink: #F6F2EA; --ink-2: #EFE8DC; --muted: #EAE1D3; --dim: #E3DBCC; --accent: #F6F2EA; --deco: #E3DBCC; --line: rgba(246, 242, 234, 0.2); --line-2: rgba(246, 242, 234, 0.34);
    --foil: linear-gradient(100deg, #F6F2EA 0%, #E9DDCB 30%, #D9C3B0 50%, #FFFFFF 58%, #E9DDCB 70%, #F6F2EA 100%);
    padding: 0; isolation: isolate; background: var(--brown); color: var(--ink); }
  .stage-glow, .hero .pl-end { display: none; }
  .hero-grid { display: flex; flex-direction: column; justify-content: flex-end; gap: 0; min-height: 100svh; padding-top: max(41svh, 250px); padding-bottom: 24px; }
  .hero-copy { position: relative; z-index: 2; transition: opacity 0.5s var(--ease), transform 0.7s var(--ease), visibility 0s; }
  /* a veil of brand brown rises behind the headline, wherever the copy lands on this screen height */
  .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -150px calc(var(--gutter) * -1) -24px; background: linear-gradient(180deg, rgba(134, 96, 66, 0) 0, rgba(134, 96, 66, 0.9) 150px, var(--brown) 210px); pointer-events: none; }
  .hero.is-watching .hero-copy { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease), visibility 0s 0.4s; }
  /* justify-self: stretch matters: the desktop rule centres the stage, and a centred absolute box shrinks to zero width */
  .hero-stage { position: absolute; inset: 0 0 auto 0; justify-self: stretch; width: 100%; height: 78svh; min-height: 430px; z-index: 0; display: block; }
  .js .in-stage, .js .is-ready .in-stage { transform: none; }
  .hero-stage .phone { position: absolute; inset: 0; width: auto; aspect-ratio: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .hero-stage .phone::after { display: none; }
  /* the video melts into the brown (a mask, so there is no seam where its box ends) */
  .hero-stage .player { inset: 0; border-radius: 0; background: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); }
  .hero-stage .player.is-live { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%); }
  .hero-stage .pl-shade { background: linear-gradient(180deg, rgba(46, 32, 24, 0.62) 0%, rgba(46, 32, 24, 0.08) 24%, rgba(46, 32, 24, 0) 40%); }
  .hero-stage .player.is-live .pl-shade { opacity: 1; }
  .hero-stage .pl-top { top: 78px; }
  .hero-stage .player.is-live .pl-tag { visibility: hidden; }
  .hero-stage .pl-sound { top: 122px; bottom: auto; left: 14px; right: auto; gap: 9px; padding: 6px 15px 6px 6px; background: rgba(46, 32, 24, 0.66); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-2); }
  .hero-stage .pl-sound-ico { width: 30px; height: 30px; background: var(--cream); color: var(--brown); animation-name: live-cream; }
  .hero-stage .pl-sound-ico svg { width: 15px; height: 15px; }
  .hero-stage .pl-sound b { font-size: 13px; color: var(--cream); }
  .hero-stage .pl-sound small { display: none; }
  .hero-stage .pl-bar { left: 18px; right: 18px; bottom: 18px; }
  .hero-stage .player[data-ambient]:not(.is-live) .pl-bar { opacity: 0; }
  .hero-stage .pl-mute { right: 14px; bottom: 34px; }
  .hero-proof { margin-top: 16px; padding-top: 16px; }
  .hero-lede { margin-top: 14px; font-size: 15.5px; line-height: 1.55; }
  .hero-cta { margin-top: 20px; }
  .hero .hero-cta .btn-primary { width: 100%; justify-content: space-between; background: var(--cream); color: #3B2A1E; box-shadow: 0 1px 0 #fff inset, 0 20px 44px -18px rgba(40, 26, 16, 0.7); }
  .hero .hero-cta .btn-primary .btn-ico { background: var(--brown); color: var(--cream); }
  .cta-note { margin-top: 14px; }
  .hero :focus-visible { outline-color: var(--cream); }
}
@media (min-width: 960px) { .pl-back { display: none; } }

/* ---------- four numbers ---------- */
.stats-band { background: var(--sand); padding-block: clamp(26px, 3.6vw, 44px); }
.stats-band ul { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.stats-band li { display: grid; gap: 4px; justify-items: center; text-align: center; }
.stats-band b { font-family: var(--font-d); font-variant-numeric: lining-nums; font-weight: 500; font-size: clamp(44px, 5.6vw, 76px); line-height: 0.9; letter-spacing: -0.02em; color: var(--brown); }
.stats-band li > span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 760px) {
  .stats-band ul { grid-template-columns: repeat(4, 1fr); }
  .stats-band li + li { border-left: 1px solid var(--line-2); }
}

/* ---------- the blush sheet ---------- */
/* The brand's sand and dusty blush, where the faces are. Its tokens are a shade deeper, because blush is darker than stone. */
.sheet {
  --ink: #3B2A1E; --ink-2: #4A3526; --muted: #5C4636; --dim: #5F4938; --accent: #654832; --deco: #866042;
  --line: rgba(88, 60, 40, 0.18); --line-2: rgba(88, 60, 40, 0.32);
  position: relative; isolation: isolate; overflow: hidden; color: var(--ink);
  border-radius: clamp(30px, 4vw, 52px); padding: clamp(22px, 5vw, 72px);
  background: radial-gradient(120% 130% at 100% 0%, #EFE8DE 0%, #E3DBCC 42%, #D1BCAE 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 60px 110px -60px rgba(134, 96, 66, 0.55);
}
.sheet .shell { background: rgba(252, 251, 248, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 34px 60px -34px rgba(88, 60, 40, 0.6); }
.sheet .shell::after { display: none; }
.sheet .lens-btn { background: rgba(252, 251, 248, 0.62); box-shadow: inset 0 0 0 1px var(--line); }
.sheet .lens-btn[aria-pressed="true"] { background: var(--brown); box-shadow: none; }
.sheet .lens-btn[aria-pressed="true"] b { color: var(--cream); }
.sheet :focus-visible { outline-color: var(--ink); }
@media (max-width: 959px) { .sheet .lens-btn i { display: none; } .sheet .lens-btn { padding: 13px 16px; } }
.results.section { padding-block: clamp(34px, 5vw, 76px); }
@media (min-width: 960px) {
  .sheet .lens-btn, .sheet .lens-btn[aria-pressed="true"] { background: none; box-shadow: none; }
  .sheet .lens-btn[aria-pressed="true"] b { color: var(--accent); }
}

/* ---------- results: the lens ---------- */
.results-grid { display: grid; gap: 28px; grid-template-areas: "head" "ba" "lens" "foot"; }
.results-head { grid-area: head; }
.ba { grid-area: ba; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-card { padding: 6px; border-radius: 26px; }
.ba-view { position: relative; aspect-ratio: 330 / 430; border-radius: 20px; overflow: hidden; background: #2E2018; isolation: isolate; }
.ba-zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.15s var(--ease); }
.ba-zoom img { position: absolute; max-width: none; width: 319.394%; height: auto; }
/* crops of MDW's own before/after graphic (1054 x 1492): each window is 330 x 430 source px */
.ba-before { left: -50%; top: -52.326%; }
.ba-after { left: -176.364%; top: -51.628%; }
.ba-card figcaption { position: absolute; top: 18px; left: 18px; z-index: 2; }
.ba-card figcaption span { display: inline-block; color: var(--cream); padding: 6px 13px; border-radius: 999px; background: rgba(46, 32, 24, 0.72); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.ba-card.is-after figcaption span { background: var(--cream); color: var(--brown); }
.lens { grid-area: lens; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lens-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; text-align: left; background: rgba(134, 96, 66, 0.05); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.lens-btn:active { transform: scale(0.97); }
.lens-btn i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--dim); font-variant-numeric: tabular-nums; transition: color 0.4s var(--ease); }
.lens-btn b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink-2); }
.lens-btn small { display: none; font-size: 13.5px; color: var(--dim); line-height: 1.45; margin-top: 3px; }
.lens-btn[aria-pressed="true"] i { color: var(--accent); }
.results-foot { grid-area: foot; display: grid; gap: 16px; justify-items: start; }
@media (min-width: 960px) {
  .results-grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); grid-template-areas: "head ba" "lens ba" "foot ba"; column-gap: clamp(40px, 6vw, 96px); row-gap: 30px; align-items: start; grid-template-rows: auto auto 1fr; }
  .ba { gap: 18px; align-self: center; grid-row: 1 / -1; }
  .ba-card { padding: 7px; border-radius: 32px; }
  .ba-view { border-radius: 25px; }
  .ba-card.is-after { margin-top: 56px; }
  .ba-card:not(.is-after) { margin-bottom: 56px; }
  .lens { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .lens-btn { padding: 18px 6px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--line); gap: 22px; align-items: baseline; }
  .lens-btn b { font-family: var(--font-d); font-weight: 600; font-size: 32px; line-height: 1.05; transition: transform 0.5s var(--ease); }
  .lens-btn small { display: block; }
  .lens-btn:hover b { transform: translateX(4px); }
  .lens-btn[aria-pressed="true"] b { font-style: italic; }
}

/* ---------- google reviews: the score, the map, a wall of recent ones ---------- */
.reviews-top { display: grid; gap: 14px; }
.score .core { display: grid; gap: 20px; align-content: center; padding: clamp(22px, 3vw, 38px); }
.score-top { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); }
.score-n { font-family: var(--font-d); font-variant-numeric: lining-nums; font-weight: 500; font-size: clamp(88px, 9.4vw, 132px); line-height: 0.8; letter-spacing: -0.02em; }
.score-top > div { display: grid; gap: 4px; justify-items: start; }
.score-top .stars svg { width: 20px; height: 20px; }
.score-top b { font-size: 16.5px; }
.rating-sub { font-size: 13.5px; color: var(--muted); }
/* the star breakdown as Google shows it; each bar grows when the card arrives */
.bars { display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bars i { position: relative; height: 8px; border-radius: 8px; background: rgba(134, 96, 66, 0.14); overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--brown); transform-origin: left; transform: scaleX(var(--w)); }
.js .bars i::after { transform: scaleX(0); transition: transform 1.3s var(--ease-out) 0.25s; }
.js .score.in .bars i::after { transform: scaleX(var(--w)); }
.bars b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
/* Google's own map of the listing: its card shows the live rating and review count */
.map .core { padding: 0; display: grid; grid-template-rows: 1fr auto; }
.map-frame { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; filter: sepia(0.18) saturate(0.9); }
.map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 16px clamp(18px, 2.4vw, 26px); border-top: 1px solid var(--line); }
.map-foot p { display: grid; gap: 1px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.map-foot b { font-size: 15px; }
.wall-k { margin-top: clamp(34px, 4.4vw, 56px); }
/* phones: a rail to swipe; wider screens: three columns */
.wall { display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
.wall::-webkit-scrollbar { display: none; }
.rcard { flex: none; width: min(78vw, 300px); scroll-snap-align: center; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -36px rgba(88, 60, 40, 0.55); }
.rcard .stars svg { width: 15px; height: 15px; }
.rcard-t { font-family: var(--font-d); font-weight: 600; font-size: 25px; line-height: 1.1; }
.rcard-b { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.rcard footer, .rcard figcaption { display: grid; gap: 1px; margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--dim); }
.rcard footer b, .rcard figcaption b { font-size: 13.5px; }
/* the one review in its own words; literal colours because it is a brown island */
.rcard-quote { background: var(--brown); box-shadow: 0 26px 46px -30px rgba(88, 60, 40, 0.8); color: #F6F2EA; }
.rcard-quote .stars { color: #E3DBCC; }
.rcard-quote blockquote { font-family: var(--font-d); font-style: italic; font-weight: 500; font-size: 31px; line-height: 1.08; }
.rcard-quote figcaption { color: #E3DBCC; }
.rcard-quote figcaption b { color: #F6F2EA; }
.voice-cta, .insta-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--deco); }
.text-link svg { width: 14px; height: 14px; stroke-width: 2.2; }
@media (min-width: 900px) {
  .reviews-top { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 16px; }
  .map-frame { min-height: 360px; }
  .wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; overflow: visible; margin-inline: 0; padding: 0; }
  .rcard { width: auto; }
  .rcard-quote { grid-column: span 2; justify-content: space-between; padding: clamp(24px, 2.6vw, 34px); }
  .rcard-quote blockquote { font-size: clamp(36px, 3.6vw, 50px); }
}

/* ---------- the offer: ticket + numbers ---------- */
.offer-grid { display: grid; gap: 14px; }
.ticket .core { padding: clamp(20px, 3.4vw, 40px); display: flex; flex-direction: column; background: radial-gradient(120% 70% at 50% 0%, rgba(209, 188, 174, 0.6), transparent 62%), linear-gradient(180deg, #FDFCFA, #F8F5EF); }
.tk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.tk-price { font-weight: 500; font-size: clamp(132px, 17vw, 216px); line-height: 0.82; letter-spacing: -0.03em; margin-top: clamp(22px, 3vw, 36px); background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; width: max-content; padding-right: 0.04em; }
.tk-price sup { font-size: 0.36em; vertical-align: top; line-height: 1.5; margin-right: 0.06em; letter-spacing: 0; }
.tk-sub { font-weight: 600; font-size: clamp(29px, 3.1vw, 40px); line-height: 1.1; margin-top: 14px; }
.tk-save { padding: 5px 11px; border-radius: 999px; background: var(--brown); color: var(--cream); letter-spacing: 0.14em; }
.tk-was { margin-top: 8px; font-size: 15px; color: var(--muted); }
.tk-was s { color: var(--ink-2); font-weight: 700; }
.tk-perf { position: relative; height: 0; border-top: 1.5px dashed var(--line-2); margin: clamp(22px, 3vw, 32px) calc(clamp(20px, 3.4vw, 40px) * -1); }
.tk-perf::before, .tk-perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.tk-perf::before { left: -11px; } .tk-perf::after { right: -11px; }
.tk-list { display: grid; gap: 13px; margin-bottom: clamp(24px, 3vw, 34px); }
.tk-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.tk-list svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(173, 148, 118, 0.24); color: var(--accent); stroke-width: 2.4; }
.ticket .btn { margin-top: auto; }
/* a band of light crosses the ticket now and then, like foil catching a lamp */
.ticket .core::after { content: ""; position: absolute; inset: -20% -60%; pointer-events: none; background: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, 0.6) 50%, transparent 57%); transform: translateX(-62%); animation: sheen 8s var(--ease) 2.5s infinite; }
@keyframes sheen { 0%, 62% { transform: translateX(-62%); } 100% { transform: translateX(62%); } }

/* the price maths and the real rating */
.offer-side { display: grid; gap: 10px; align-content: start; }
.offer-side .shell { border-radius: 26px; padding: 6px; }
.offer-side .core { border-radius: 20px; padding: clamp(20px, 2.6vw, 30px); }
.side-k { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.calc-q { display: block; margin-top: 10px; font-weight: 600; font-size: clamp(28px, 2.9vw, 38px); line-height: 1.08; }
.calc-lab { display: block; margin-top: 8px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.calc-rate { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.calc-rate output { font-weight: 500; font-size: clamp(60px, 6.2vw, 82px); line-height: 0.9; letter-spacing: -0.02em; }
.calc-rate span { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.calc-rate i { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; background: rgba(173, 148, 118, 0.24); color: var(--accent); }
.calc-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 38px; margin-top: 8px; background: transparent; cursor: grab; touch-action: pan-y; }
.calc-range:active { cursor: grabbing; }
.calc-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brown) var(--fill, 23%), rgba(134, 96, 66, 0.18) var(--fill, 23%)); }
.calc-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brown) var(--fill, 23%), rgba(134, 96, 66, 0.18) var(--fill, 23%)); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -12px; border: 0; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 6px rgba(173, 148, 118, 0.28), 0 8px 18px -6px rgba(88, 60, 40, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: box-shadow 0.4s var(--ease); }
.calc-range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--brown); box-shadow: 0 0 0 6px rgba(173, 148, 118, 0.28), 0 8px 18px -6px rgba(88, 60, 40, 0.7); }
.calc-range:hover::-webkit-slider-thumb, .calc-range:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(173, 148, 118, 0.3), 0 8px 18px -6px rgba(88, 60, 40, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.calc-range:focus-visible { outline: none; }
.calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--brown); }
.calc-scale { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--dim); }
.calc-sum { margin-top: 16px; border-top: 1px solid var(--line); }
.calc-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.calc-sum dt { font-size: 14.5px; color: var(--muted); }
.calc-sum dd { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-sum dd s { color: var(--muted); }
.calc .btn { margin-top: 18px; }
.calc-sum > .calc-keep { align-items: center; border-bottom: 0; padding: 14px 0 0; }
.calc-keep dt { font-size: 15px; font-weight: 700; color: var(--ink); }
.calc-keep dd { font-weight: 600; font-size: clamp(48px, 5.2vw, 66px); line-height: 0.9; letter-spacing: -0.02em; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 900px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .offer-side { gap: 16px; }
}

/* ---------- your visit: timeline ---------- */
.visit-grid { display: grid; gap: 44px; }
/* sized so each of its two sentences holds one line in this narrow column */
.visit-side .h2 { font-size: clamp(40px, 5vw, 70px); }
.snap { width: min(100%, 290px); margin-top: 34px; padding: 6px; border-radius: 26px; background: var(--paper); }
.snap img { width: 100%; aspect-ratio: 334 / 388; object-fit: cover; border-radius: 20px; }
.snap figcaption { display: flex; align-items: center; gap: 10px; padding: 12px 10px 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tl-wrap { position: relative; padding-left: 40px; }
/* the line runs from the first dot to the last one; app.js measures it */
.tl-wrap::before, .tl-fill { content: ""; position: absolute; left: 11px; top: var(--tl-top, 37px); height: var(--tl-h, calc(100% - 120px)); width: 2px; border-radius: 2px; }
.tl-wrap::before { background: var(--line-2); }
.tl-fill { overflow: hidden; }
.tl-fill i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--tan), var(--brown)); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform 1s var(--ease); }
.tl { display: grid; gap: 12px; }
.tl-step { position: relative; }
.tl-dot { position: absolute; left: -35px; top: 30px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--faint); transition: box-shadow 0.6s var(--ease), background-color 0.6s var(--ease); }
.tl-body { padding: clamp(20px, 2.6vw, 30px); border-radius: 24px; background: rgba(252, 251, 248, 0.5); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.tl-when { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); transition: color 0.6s var(--ease); }
.tl-body h3 { font-weight: 600; font-size: clamp(28px, 3vw, 39px); line-height: 1.06; margin-top: 8px; }
.tl-body h3 + p { margin-top: 10px; color: var(--muted); font-size: 15.5px; max-width: 520px; }
.tl-step.is-on .tl-dot { background: var(--brown); box-shadow: inset 0 0 0 2px var(--brown), 0 0 0 6px rgba(173, 148, 118, 0.3); }
.tl-step.is-on .tl-body { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 44px -34px rgba(88, 60, 40, 0.5); }
.tl-step.is-on .tl-when { color: var(--accent); }
.tl-cta { display: grid; gap: 12px; justify-items: start; margin-top: 22px; }
@media (min-width: 960px) {
  .visit-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .visit-side { position: sticky; top: 112px; }
}

/* ---------- videos (a sand band) ---------- */
.stories { background: var(--sand); }
.stories-grid { display: grid; gap: 34px; }
.stories-cta { display: none; margin-top: 28px; }
.reel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 22px; scrollbar-width: none; overscroll-behavior-x: contain; }
.reel::-webkit-scrollbar { display: none; }
.reel .phone { flex: none; width: min(72vw, 320px); scroll-snap-align: center; }
.stories-fine { margin-top: -10px; color: var(--ink-2); }
@media (min-width: 960px) {
  .stories-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .stories-cta { display: block; }
  .reel { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; overflow: visible; margin: 0; padding: 0; justify-items: center; }
  .reel .phone { width: 100%; max-width: 330px; height: auto; }
  .reel .phone.is-low { margin-top: 72px; }
  .stories-fine { grid-column: 2; margin-top: 4px; text-align: center; }
}

/* ---------- instagram (shares the sand band with the videos) ---------- */
.insta { background: var(--sand); padding-top: 0; }
.insta-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.insta-head .sec-head { margin-bottom: clamp(22px, 3vw, 36px); }
/* arrows for a mouse; a phone just swipes */
.ig-nav { display: none; gap: 10px; margin-bottom: clamp(22px, 3vw, 36px); }
.ig-nav button { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--brown); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 26px -18px rgba(88, 60, 40, 0.6); transition: transform 0.4s var(--ease), background-color 0.4s var(--ease), opacity 0.4s var(--ease); }
.ig-nav button:hover { background: #fff; transform: translateY(-1px); }
.ig-nav button:active { transform: scale(0.95); }
.ig-nav button:disabled { opacity: 0.35; cursor: default; transform: none; }
.ig-nav svg { width: 20px; height: 20px; stroke-width: 1.8; }
@media (hover: hover) and (min-width: 900px) { .ig-nav { display: flex; } }
/* one rail at every size: 10 reels side by side would run four screens deep as a grid */
.ig-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 18px; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.ig-rail::-webkit-scrollbar { display: none; }
.ig-rail:focus-visible { outline-offset: -2px; }
/* Instagram's embed needs at least 326px to lay out */
.ig-card { flex: none; width: 328px; min-height: 540px; scroll-snap-align: start; display: grid; border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(88, 60, 40, 0.55); }
.ig-card .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* what shows until Instagram's embed arrives (or if it is blocked) */
.ig-card blockquote { display: grid; place-items: center; padding: 20px; text-align: center; font-size: 13.5px; color: var(--muted); }
.ig-card blockquote a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .ig-rail { gap: 18px; }
  .ig-card { width: 352px; min-height: 600px; }
}

/* ---------- faq ---------- */
.faq-grid { display: grid; gap: 30px; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; text-align: left; font-family: var(--font-d); font-variant-numeric: lining-nums; font-weight: 600; font-size: clamp(25px, 2.6vw, 33px); line-height: 1.12; }
.qa-q i { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; background: rgba(252, 251, 248, 0.8); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 0.6s var(--ease), background-color 0.4s var(--ease); }
.qa-q i::before, .qa-q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; margin: -0.75px 0 0 -6.5px; border-radius: 2px; background: var(--accent); }
.qa-q i::after { transform: rotate(90deg); }
.qa.is-open .qa-q i { transform: rotate(45deg); background: rgba(173, 148, 118, 0.3); }
.qa-a > div > p { padding: 0 54px 24px 2px; color: var(--muted); font-size: 15.5px; max-width: 640px; }
.js .qa-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.6s var(--ease), visibility 0s 0.6s; }
.js .qa-a > div { overflow: hidden; min-height: 0; }
.js .qa.is-open .qa-a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .faq-head { position: sticky; top: 112px; }
}

/* ---------- close: all brand brown ---------- */
.close { padding-block: clamp(10px, 3vw, 40px) clamp(56px, 8vw, 110px); }
/* a brown island: its own tokens and its own text colour */
.close-panel {
  --ink: #F6F2EA; --ink-2: #EFE8DC; --muted: #EAE1D3; --dim: #E3DBCC; --accent: #F6F2EA; --deco: #D2C5B0; --line: rgba(246, 242, 234, 0.22); --line-2: rgba(246, 242, 234, 0.36);
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 34px; border-radius: clamp(30px, 4vw, 52px); padding: clamp(24px, 6vw, 84px); color: var(--ink);
  background: radial-gradient(130% 150% at 0% 0%, #9A7353 0%, #866042 46%, #6E4E35 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 60px 110px -60px rgba(88, 60, 40, 0.8);
}
.close-mark { position: absolute; z-index: -1; right: clamp(-40px, -2vw, -10px); top: clamp(-30px, -2vw, -10px); width: clamp(280px, 52vw, 760px); color: rgba(246, 242, 234, 0.09); pointer-events: none; }
.close .h2 { font-size: clamp(52px, 7.4vw, 108px); line-height: 0.94; }
.close .h2 em { display: block; font-style: italic; color: var(--sand); }
.close-price { display: flex; align-items: flex-end; gap: 18px; margin: clamp(22px, 3vw, 34px) 0; }
.close-price b { font-weight: 500; font-size: clamp(88px, 11vw, 150px); line-height: 0.8; letter-spacing: -0.03em; }
.close-price sup { font-size: 0.36em; vertical-align: top; line-height: 1.5; margin-right: 0.05em; letter-spacing: 0; }
.close-price span { font-size: 16px; font-weight: 700; line-height: 1.35; padding-bottom: 4px; }
.close-price small { display: block; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.close-loc { align-self: end; padding: 22px; border-radius: 26px; background: rgba(246, 242, 234, 0.1); box-shadow: inset 0 0 0 1px var(--line); }
.loc-pin { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--brown); margin-bottom: 14px; }
.loc-pin svg { width: 20px; height: 20px; }
.loc-name { font-weight: 600; font-size: 32px; line-height: 1.1; }
.loc-addr { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.loc-hours { margin-top: 8px; font-size: 13.5px; font-weight: 700; }
.loc-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 14px 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: rgba(246, 242, 234, 0.14); transition: background-color 0.4s var(--ease), transform 0.4s var(--ease); }
.loc-link:hover { background: rgba(246, 242, 234, 0.22); transform: translateY(-1px); }
.loc-link svg { width: 15px; height: 15px; stroke-width: 2.2; }
.close :focus-visible { outline-color: var(--cream); }
.loc-facts { display: grid; gap: 7px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.loc-facts li { display: flex; align-items: center; gap: 9px; }
.loc-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--deco); flex: none; }
@media (min-width: 900px) { .close-panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); align-items: end; } }
/* on a phone the big logo sits behind the headline, so it goes fainter */
@media (max-width: 899px) { .close-mark { color: rgba(246, 242, 234, 0.055); } }

/* ---------- footer ---------- */
.foot { padding: 34px 0 calc(110px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.foot-row { display: grid; gap: 18px; }
.foot .brand .logo { height: 46px; }
.foot-legal { font-size: 12.5px; color: var(--dim); line-height: 1.6; max-width: 620px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--muted); }
.foot-links a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint); transition: color 0.3s var(--ease); }
.foot-links a:hover { color: var(--ink); }
@media (min-width: 900px) {
  .foot { padding-bottom: 40px; }
  .foot-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 40px; }
}

/* ---------- phone dock ---------- */
.dock {
  position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 7px 7px 22px; border-radius: 999px; background: rgba(250, 248, 244, 0.9); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 44px -16px rgba(88, 60, 40, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 0.4s var(--ease), transform 0.6s var(--ease), visibility 0s 0.4s;
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
}
.dock.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dock p { display: flex; align-items: baseline; gap: 10px; line-height: 1; min-width: 0; }
.dock b { font-weight: 600; font-size: 31px; color: var(--brown); }
.dock span { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.dock i { font-style: normal; }
.dock s { color: var(--dim); }
.dock .btn span { color: inherit; font-size: 13.5px; font-weight: 600; }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------- offer dialog ---------- */
/* Kept laid out while closed (hidden, not display:none) so MDW's form sizes itself before it opens.
   A column with an auto top margin: a sheet at the bottom of a phone that scrolls from its top if it is taller than the screen. */
.offer-dlg {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; pointer-events: none; transition: visibility 0s 0.4s;
}
.offer-dlg[open] { visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* the form's embed script writes visibility + pointer-events inline on its iframe, which would leave
   an invisible form swallowing taps in the middle of the page while the dialog is closed */
.offer-dlg:not([open]) iframe { visibility: hidden !important; pointer-events: none !important; }
.offer-dlg::backdrop { background: rgba(59, 42, 30, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dlg-card { flex: none; width: 100%; max-width: 540px; margin-top: auto; padding: 7px 7px 0; border-radius: 32px 32px 0 0; background: rgba(227, 219, 204, 0.92); box-shadow: 0 -30px 80px -30px rgba(40, 26, 16, 0.6); opacity: 0; transform: translateY(40px); transition: opacity 0.35s var(--ease), transform 0.7s var(--ease); outline: none; }
.offer-dlg[open] .dlg-card { opacity: 1; transform: none; }
.dlg-card .core { border-radius: 25px 25px 0 0; padding: 22px 16px calc(14px + env(safe-area-inset-bottom)); background: radial-gradient(120% 60% at 50% 0%, rgba(209, 188, 174, 0.7), transparent 62%), linear-gradient(180deg, #FBF9F5, #F3F0E9); }
.dlg-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(252, 251, 248, 0.8); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 0.5s var(--ease), background-color 0.4s var(--ease); }
.dlg-x:hover { transform: rotate(90deg); background: #fff; }
.dlg-x svg { width: 18px; height: 18px; }
.dlg-card .kicker { display: none; margin-bottom: 12px; }
.dlg-title { font-weight: 600; font-size: clamp(25px, 7.2vw, 31px); line-height: 1.05; letter-spacing: -0.01em; padding-right: 46px; white-space: nowrap; }
.dlg-sub { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.dlg-proof { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.dlg-proof .stars svg { width: 13px; height: 13px; }
.dlg-paper { position: relative; margin-top: 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 0 4px; min-height: 380px; overflow: hidden; }
/* the form brings ~60px of blank space above its first field; trim some of it so the button stays on a phone screen */
.dlg-paper iframe { position: relative; z-index: 1; display: block; width: 100%; min-height: 370px; border: 0; margin-top: -22px; }
.dlg-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13.5px; color: var(--dim); }
@media (min-width: 640px) {
  .offer-dlg { padding: 24px; }
  .dlg-card { margin-block: auto; padding: 7px; border-radius: 32px; transform: translateY(26px) scale(0.98); }
  .dlg-card .core { border-radius: 25px; padding: 30px; }
  .dlg-x { top: 14px; right: 14px; }
  .dlg-card .kicker { display: inline-flex; }
  .dlg-title { font-size: 48px; line-height: 1; white-space: normal; padding-right: 40px; }
  .dlg-title .em { display: block; }
  .dlg-sub { margin-top: 12px; font-size: 15px; }
  .dlg-paper { margin-top: 18px; padding: 10px 6px 4px; }
  .dlg-paper iframe { margin-top: 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; transition-delay: 0s !important; }
}