/* Derm Clinic MD site: warm cream, champagne gold, espresso. Built from the approved concept (Oct 2026).
   Sitewide tokens, base, nav, footer and homepage sections. Additions for the production build are at the end. */
:root {
  --bg: #F7F1E8; --bg-2: #FCF9F4; --card: #FFFBF5;
  --ink: #1B1511; --ink-2: #3A302A; --muted: #6F6357;
  --gold: #B08D4C; --gold-2: #C9A25C; --gold-deep: #806026; --gold-tint: #EFE3C8; --blush: #EBD8CB;
  --dk: #17110D; --dk-2: #211912; --on-dark: #F3EADB; --on-dark-mute: rgba(243,234,219,.72);
  --line: rgba(27,21,17,.12); --dk-line: rgba(243,234,219,.14);
  --ease: cubic-bezier(.22,.61,.36,1); --ease-2: cubic-bezier(.16,1,.3,1);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw: 1200px; --gutter: clamp(20px, 4vw, 48px); --nav-h: 76px;
  --shadow: 0 30px 60px -28px rgba(60,40,15,.35), 0 10px 22px -14px rgba(60,40,15,.22);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.wipe-on { scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 1.05rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--gold-2); }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.02; }
h2 { font-size: clamp(2.3rem, 5vw, 4rem); }
h2 em, h1 em { font-style: italic; font-weight: 400; color: var(--gold-deep); }
.on-dark h2 em, .on-dark .reveal-title em { color: var(--gold-2); }
.lead { font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--muted); max-width: 56ch; font-weight: 300; }
.on-dark .lead { color: var(--on-dark-mute); }
.fine { font-size: .82rem; color: var(--muted); line-height: 1.55; }
.fine a { color: var(--gold-deep); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.eyebrow i { width: 34px; height: 1px; background: currentColor; display: inline-block; }
.on-dark .eyebrow { color: var(--gold-2); }

/* ---------- buttons ---------- */
.btn { --lift: 0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 999px; border: 1px solid transparent; font-weight: 500; font-size: .95rem; letter-spacing: .03em; text-decoration: none; cursor: pointer; transform: translateY(var(--lift)); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover { --lift: -3px; }
.btn svg { width: 18px; height: 18px; }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr, .link:hover .arr { transform: translateX(4px); }
.btn-sm { padding: 10px 20px; font-size: .86rem; }
.btn-lg { padding: 18px 36px; font-size: 1rem; }
.btn-dark { background: var(--ink); color: var(--on-dark); box-shadow: 0 10px 24px -12px rgba(27,21,17,.55); }
.btn-dark:hover { box-shadow: 0 18px 32px -14px rgba(27,21,17,.6); background: #2a1f18; }
.btn-gold { background: linear-gradient(135deg, #D6B26F, #B08D4C); color: #1B1511; box-shadow: 0 10px 26px -12px rgba(176,141,76,.8); }
.btn-gold:hover { box-shadow: 0 18px 34px -12px rgba(176,141,76,.85); }
.btn-ghost { border-color: rgba(27,21,17,.28); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: rgba(27,21,17,.04); }
.btn-ghost-light { border-color: rgba(243,234,219,.4); color: var(--on-dark); background: rgba(243,234,219,.04); }
.btn-ghost-light:hover { border-color: var(--on-dark); background: rgba(243,234,219,.1); }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--gold-deep); text-decoration: none; }
.link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }

/* ---------- reveal on scroll ---------- */
html.js .rv { opacity: 0; translate: 0 24px; transition: opacity .9s var(--ease-2), translate .9s var(--ease-2); }
html.js .rv.in { opacity: 1; translate: none; }
.rv-d2 { transition-delay: .08s !important; } .rv-d3 { transition-delay: .16s !important; } .rv-d4 { transition-delay: .24s !important; }
.rt .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
html.js .rt .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease-2); transition-delay: calc(var(--i, 0) * 60ms); }
html.js .rt.in .w > span { transform: none; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s; }
.nav.scrolled { background: rgba(247,241,232,.95); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.nav-in { display: flex; align-items: center; gap: 28px; }
.logo img { height: 56px; width: auto; }
.nav-main { margin-left: auto; }
.nav-links { display: flex; gap: 30px; }
.nav-links a, .nav-cta { white-space: nowrap; }
.nav-links a, .nav-phone { text-decoration: none; font-size: .9rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-2); transition: color .25s; }
.nav-links a:hover { color: var(--gold-deep); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav-phone svg { width: 16px; height: 16px; color: var(--gold-deep); }
.nav-menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; }
.nav-menu span, .nav-menu span::before { content: ''; position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
.nav-menu span { top: 21px; } .nav-menu span::before { top: -6px; left: 0; right: 0; }
.nav.open .nav-menu span { transform: rotate(45deg); } .nav.open .nav-menu span::before { transform: translateY(6px) rotate(-90deg); }
.nav-sheet { display: none; }

/* ---------- hero: the patient's worry over a strip of her real results, a syringe sweeps across, the mirror finder underneath ----------
   Without .wipe-on (reduced motion) the hero and the mirror simply stack. */
.wipe { position: relative; }
.wipe-sticky { position: relative; display: flex; flex-direction: column; }
.wipe-sticky > .hero { order: 1; }
.wipe-sticky > .reveal { order: 2; }
.prop-wrap, .sheen { display: none; }
.hero { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 20px) 0 56px; background: radial-gradient(55% 60% at 70% 30%, #FFF4DE 0%, rgba(255,244,222,0) 70%), var(--bg); overflow: hidden; }
.hero-in { position: relative; z-index: 3; }
.hero-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: end; margin-bottom: clamp(18px, 3vh, 36px); }
.hero-copy { position: relative; }
.hero-copy > .eyebrow { margin-bottom: 14px; }
.slides { display: grid; }
.display.hero-line { max-width: 22ch; font-size: clamp(2.4rem, 4.5vw, 4.4rem); text-wrap: initial; }
.display.hero-line .tail { display: block; }
@media (min-width: 861px) { .display.hero-line .slide { white-space: nowrap; } }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translate3d(0, 22px, 0); filter: blur(7px); transition: opacity .32s var(--ease), transform .5s var(--ease), filter .32s var(--ease), visibility 0s .5s; }
.slide.on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .7s var(--ease) .34s, transform .9s var(--ease) .34s, filter .7s var(--ease) .34s, visibility 0s .34s; }
.slide.out { transform: translate3d(0, -18px, 0); }
.display { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 5.2vw, 5rem); line-height: .96; letter-spacing: -.022em; margin: 0; text-wrap: balance; max-width: 14ch; }
.display em { font-style: italic; font-weight: 400; color: var(--gold-deep); }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 6px; }
.hero-side p { color: var(--ink-2); font-weight: 300; max-width: 36ch; }
.hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hero-row .link { border-bottom: 1px solid rgba(128,96,38,.35); padding-bottom: 2px; }
.trust-line { font-size: .84rem; color: var(--muted); }
.trust-line b { color: var(--ink); font-weight: 500; }
.trust-line .stars, .who .stars { display: inline-flex; gap: 2px; margin-right: 8px; color: var(--gold); vertical-align: -1px; }
.trust-line .stars svg, .who .stars svg { width: 11px; height: 11px; fill: currentColor; }
.rot { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.dots { display: flex; gap: 8px; align-items: center; }
.dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(27,21,17,.22); cursor: pointer; transition: width .45s var(--ease), background .3s; }
.dots button.on { width: 26px; background: var(--gold-deep); }
.rot-toggle { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.rot-toggle svg { width: 10px; height: 10px; }
.rot-toggle .i-play, .rot-toggle[aria-pressed="true"] .i-pause { display: none; }
.rot-toggle[aria-pressed="true"] .i-play { display: block; }
html:not(.motion) .rot { display: none; }
.scroll-hint { display: none; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* the strip of results: drifts left on desktop, scrolls by hand on phones */
.strip { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.track { display: flex; gap: 18px; width: max-content; padding: 16px max(var(--gutter), calc((100vw - var(--maxw)) / 2)) 22px; animation: strip-drift 70s linear infinite; }
.strip:hover .track, .strip.hold .track { animation-play-state: paused; }
@keyframes strip-drift { to { transform: translateX(calc(-50% - 9px)); } }
.sc { flex: 0 0 auto; width: clamp(170px, 15.5vw, 230px); transform: perspective(900px) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.sc .ba { box-shadow: 0 30px 60px -28px rgba(60,40,15,.45), 0 10px 22px -14px rgba(60,40,15,.3); transition: box-shadow .5s var(--ease); }
.sc .ba:hover { box-shadow: 0 44px 70px -28px rgba(60,40,15,.55); }
.sc .ba::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.sc .ba-knob { width: 38px; height: 38px; }
.sc .ba-knob::before { background-size: 18px; }
.sc .ba-tag { bottom: 10px; font-size: .56rem; padding: 5px 9px; }
.sc .ba-tag--before { left: 9px; } .sc .ba-tag--after { right: 9px; }
.sc-label { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,251,245,.85); color: var(--ink); }
.strip-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: .76rem; color: var(--muted); }
.strip-foot .hint { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.strip-foot .hint i { width: 28px; height: 1px; background: var(--gold); }

/* stacked (reduced motion): no drift, so the strip scrolls by hand and the duplicate cards are not needed */
html:not(.wipe-on) .strip { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scrollbar-width: none; }
html:not(.wipe-on) .track { animation: none; }
html:not(.wipe-on) .sc.dup { display: none; }

/* background motion: warm drifting light and gold light rippling like sun through glass */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; }
.b1 { width: 56vw; height: 56vw; left: 42%; top: -18%; background: radial-gradient(closest-side, rgba(240,200,120,.45), rgba(240,200,120,0)); animation: dA 24s ease-in-out infinite alternate; }
.b2 { width: 46vw; height: 46vw; left: -10%; top: 40%; background: radial-gradient(closest-side, rgba(236,200,184,.5), rgba(236,200,184,0)); animation: dB 30s ease-in-out infinite alternate; }
@keyframes dA { from { transform: translate3d(-4vw, 2vh, 0) scale(1); } to { transform: translate3d(5vw, -3vh, 0) scale(1.16); } }
@keyframes dB { from { transform: translate3d(3vw, -3vh, 0) scale(1.1); } to { transform: translate3d(-2vw, 4vh, 0) scale(.94); } }
.light { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: radial-gradient(75% 85% at 70% 50%, #000 20%, transparent 82%); mask-image: radial-gradient(75% 85% at 70% 50%, #000 20%, transparent 82%); }
.caustic { position: absolute; left: -1200px; top: -1200px; right: 0; bottom: 0; background-repeat: repeat; will-change: transform; }
.c1 { background-image: url(../assets/hero/caustic-a.webp); background-size: 768px 768px; opacity: .26; animation: cA 90s linear infinite; }
.c2 { background-image: url(../assets/hero/caustic-b.webp); background-size: 1152px 1152px; opacity: .18; animation: cB 130s linear infinite; }
@keyframes cA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(768px, 768px, 0); } }
@keyframes cB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1152px, 1152px, 0); } }

/* the syringe (the sweep is driven by site.js) */
.prop-wrap { position: absolute; z-index: 5; left: 0; top: 0; width: var(--pw, 720px); pointer-events: none; will-change: transform; opacity: 0; }
.prop-3d { position: relative; transform-style: preserve-3d; will-change: transform; }
.prop { width: 100%; height: auto; filter: drop-shadow(0 38px 34px rgba(60,38,10,.34)) drop-shadow(0 10px 12px rgba(60,38,10,.18)); }
.sheen { position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: 22vw; pointer-events: none; opacity: 0; background: linear-gradient(270deg, transparent, rgba(226,194,125,.38) 50%, rgba(255,246,222,.55) 58%, transparent); mix-blend-mode: screen; will-change: transform; }

/* the mirror, underneath: what do you notice, and where a consultation begins */
.reveal { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; background: var(--dk); color: var(--on-dark); overflow: hidden; }
.reveal-bg { position: absolute; inset: 0; background: radial-gradient(60% 70% at 78% 30%, rgba(201,162,92,.2), transparent 70%), linear-gradient(180deg, #201711, #17110D 75%); }
.reveal-bg .light { -webkit-mask-image: radial-gradient(70% 80% at 72% 40%, #000 10%, transparent 80%); mask-image: radial-gradient(70% 80% at 72% 40%, #000 10%, transparent 80%); }
.reveal-bg .caustic { opacity: .07; mix-blend-mode: screen; }
.grain { position: absolute; inset: 0; opacity: .07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.reveal-grid { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 70px; }
.reveal .eyebrow { color: #E2C285; }
.reveal-h { font-size: clamp(2.8rem, 5.6vw, 5.4rem); line-height: .98; letter-spacing: -.02em; max-width: 13ch; margin: 18px 0 18px; }
.reveal-h em { color: var(--gold-2); }
.reveal-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
html.js .reveal-h .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
html.js .reveal.in .reveal-h .w > span { transform: none; }
.mirror .lead { max-width: 38ch; font-weight: 300; color: var(--on-dark-mute); font-size: clamp(1rem, 1.25vw, 1.15rem); }
.mchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 560px; }
.mchips button { cursor: pointer; border: 1px solid var(--dk-line); background: rgba(243,234,219,.05); color: var(--on-dark); padding: 12px 20px; border-radius: 999px; font-size: .92rem; font-weight: 400; letter-spacing: .01em; text-align: left; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), opacity .6s var(--ease) calc(var(--k, 0) * 70ms), translate .7s var(--ease) calc(var(--k, 0) * 70ms); }
html.js .reveal:not(.in) .mchips button { opacity: 0; translate: 0 14px; }
.mchips button:hover { border-color: var(--gold-2); transform: translateY(-2px); }
.mchips button[aria-pressed="true"] { background: linear-gradient(135deg, #D6B26F, #B08D4C); color: var(--ink); border-color: transparent; }
.who { margin-top: 26px; font-size: .84rem; color: var(--on-dark-mute); }
.who b { color: var(--on-dark); font-weight: 500; }
.who .stars { color: var(--gold-2); }
/* the plan panel */
.panel { position: relative; min-height: min(70vh, 560px); display: flex; flex-wrap: wrap; align-items: flex-start; align-content: center; justify-content: center; gap: 18px 24px; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.panel-empty { width: 100%; text-align: center; padding: 4px 30px 0; color: var(--on-dark-mute); font-size: .92rem; }
@keyframes bob-dark { 50% { transform: translateY(-10px) rotate(2deg); } }
.panel .plan { margin: 0; gap: 12px; }
.panel .plan li { grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 22px; border-radius: 22px; background: rgba(243,234,219,.06); border: 1px solid var(--dk-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation-delay: calc(var(--k, 0) * 110ms); }
.panel .plan .n { width: 44px; height: 44px; background: rgba(201,162,92,.16); color: var(--gold-2); font-weight: 500; font-size: 1.3rem; }
.panel .plan b { font-weight: 500; font-size: 1.4rem; line-height: 1.15; margin-bottom: 4px; }
.panel .plan span { color: var(--on-dark-mute); }
.panel .plan-link:hover b { color: var(--gold-2); }
.panel .plan-link b::after { color: var(--gold-2); }
.panel .plan-note { color: var(--on-dark-mute); font-size: .8rem; margin-top: 14px; max-width: 52ch; }
.panel-empty[hidden], .panel-out[hidden] { display: none; }
.panel-close { display: none; }
html.wipe-on .panel-out { max-height: calc(100vh - var(--nav-h) - 70px); max-height: calc(100svh - var(--nav-h) - 70px); overflow-y: auto; scrollbar-width: none; }
html.wipe-on .panel-out::-webkit-scrollbar { display: none; }
.reveal-cue { display: none; }

/* scroll-driven mode */
html.wipe-on .wipe { height: 300vh; }
html.wipe-on .wipe-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: block; }
html.wipe-on .hero { position: absolute; inset: 0; min-height: 0; height: 100%; -webkit-mask-image: linear-gradient(270deg, transparent var(--m0, -30%), #000 var(--m1, -20%)); mask-image: linear-gradient(270deg, transparent var(--m0, -30%), #000 var(--m1, -20%)); }
html.wipe-on .reveal { position: absolute; inset: 0; min-height: 0; }
html.wipe-on .reveal-grid { min-height: 100%; height: 100%; }
html.wipe-on [data-rv] { opacity: 0; }
html.wipe-on .prop-wrap, html.wipe-on .sheen { display: block; }
html.wipe-on .scroll-hint, html.wipe-on .reveal-cue { position: absolute; z-index: 3; left: 50%; bottom: 22px; translate: -50% 0; display: inline-flex; align-items: center; gap: 12px; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
html.wipe-on .reveal-cue { color: rgba(243,234,219,.72); opacity: 0; }
.scroll-hint i, .reveal-cue i { width: 1px; height: 28px; background: linear-gradient(var(--gold-deep), transparent); transform-origin: top; animation: hint 1.8s var(--ease) infinite; }
.reveal-cue i { background: linear-gradient(#E2C285, transparent); }
.arch::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(214,178,111,.55), rgba(176,141,76,.25) 55%, rgba(120,80,30,.35)); mix-blend-mode: soft-light; }
.arch::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -90px 90px -60px rgba(60,35,10,.28); }

/* ---------- trust marquee ---------- */
.trust { background: var(--ink); color: var(--on-dark); overflow: hidden; position: relative; z-index: 3; }
.marquee { display: flex; width: max-content; padding: 20px 0; animation: marq 70s linear infinite; }
.marquee-track { display: flex; gap: 0; width: max-content; margin: 0; }
.marquee-track li { display: inline-flex; align-items: center; font-family: var(--serif); font-size: 1.25rem; font-style: italic; padding-inline: 28px; white-space: nowrap; }
.marquee-track li::after { content: ''; width: 6px; height: 6px; margin-left: 56px; border-radius: 50%; background: var(--gold-2); }
@keyframes marq { to { transform: translateX(-50%); } }
.trust.paused .marquee { animation-play-state: paused; }

/* ---------- sections ---------- */
.sec { padding: clamp(72px, 11vw, 150px) 0; position: relative; }
.sec-head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; margin-bottom: clamp(26px, 4vw, 44px); }
.sec-head h2 { max-width: 14ch; }

/* results */
.results { background: var(--bg-2); overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips button, .finder-chips button { cursor: pointer; border: 1px solid var(--line); background: var(--card); padding: 11px 22px; border-radius: 999px; font-size: .9rem; font-weight: 500; letter-spacing: .02em; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.chips button:hover, .finder-chips button:hover { border-color: var(--gold); transform: translateY(-2px); }
.chips button[aria-pressed="true"], .finder-chips button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.cases-wrap { margin-top: 34px; }
.cases { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity; padding: 10px max(var(--gutter), calc((100vw - var(--maxw)) / 2)) 34px; scrollbar-width: none; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
.cases::-webkit-scrollbar { display: none; }
.case { flex: 0 0 clamp(240px, 24vw, 330px); scroll-snap-align: start; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.case[hidden], .case.dup { display: none; }
.case-cap { display: flex; flex-direction: column; margin-top: 14px; line-height: 1.3; }
.case-cap b { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.case-cap span { font-size: .84rem; color: var(--muted); letter-spacing: .04em; }
.ba { position: relative; aspect-ratio: 540 / 864; border-radius: 22px; overflow: hidden; background: var(--gold-tint); box-shadow: var(--shadow); touch-action: pan-y; }
.ba img.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba, 50%)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba, 50%); width: 0; z-index: 3; pointer-events: none; }
.ba-line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(var(--gold-tint), #fff, var(--gold-tint)); box-shadow: 0 0 14px rgba(255,255,255,.6); }
.ba-knob { position: absolute; top: 50%; left: 0; width: 58px; height: 58px; translate: -50% -50%; border-radius: 50%; filter: drop-shadow(0 10px 14px rgba(40,25,10,.45)); transition: scale .3s var(--ease); }
.ba:hover .ba-knob { scale: 1.08; }
.ba-knob img { width: 100%; height: 100%; object-fit: contain; }
.ba-tag { position: absolute; z-index: 4; bottom: 14px; font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(27,21,17,.62); color: var(--on-dark); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ba-tag--before { left: 12px; } .ba-tag--after { right: 12px; }
.ba-range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
.cases-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.cases-nav { display: flex; gap: 10px; }
.cases-nav button { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; transition: background .3s, color .3s, transform .3s var(--ease); }
.cases-nav button:hover { background: var(--ink); color: var(--on-dark); transform: translateY(-2px); }
.cases-nav svg { width: 20px; height: 20px; }
.cases-nav [data-prev] svg { transform: scaleX(-1); }
.cases-foot .fine { max-width: 60ch; }

/* finder */
.finder { background: var(--bg); }
.finder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.finder-intro { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.finder-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.finder-chips button { text-align: left; border-radius: 18px; }
.finder-card { position: relative; min-height: 460px; border-radius: 30px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(24px, 3vw, 40px); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease), opacity .9s var(--ease-2), translate .9s var(--ease-2); display: flex; flex-direction: column; justify-content: center; }
.finder-empty { text-align: center; color: var(--muted); }
.finder-empty img { width: 150px; margin: 0 auto 18px; animation: bob 5s ease-in-out infinite; filter: drop-shadow(14px 20px 18px rgba(60,40,15,.25)); }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-2deg); } }
.plan { display: grid; gap: 14px; margin: 20px 0 18px; }
.plan li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); animation: pop .6s var(--ease-2) both; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes pop { from { opacity: 0; transform: translateY(14px); } }
.plan .n { width: 38px; height: 38px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-deep); display: grid; place-items: center; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.plan b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.plan span { font-size: .92rem; color: var(--muted); line-height: 1.5; }
.plan-note { font-size: .84rem; color: var(--muted); }
.plan-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* meet */
.meet { background: var(--bg-2); }
.meet-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 7vw, 110px); align-items: center; }
.meet-photo { position: relative; max-width: 460px; width: 100%; justify-self: center; }
.arch { aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; overflow: hidden; box-shadow: var(--shadow); }
.arch { position: relative; }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.meet-badge { position: absolute; right: -6%; bottom: 7%; width: 170px; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--on-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--shadow); border: 1px solid rgba(201,162,92,.5); }
.meet-badge .num { font-family: var(--serif); font-size: 3.6rem; font-weight: 500; line-height: .9; color: var(--gold-2); white-space: nowrap; }
.meet-badge .num b { font-weight: 500; }
.meet-badge i { font-style: normal; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; max-width: 11ch; margin-top: 6px; color: var(--on-dark-mute); line-height: 1.35; }
.meet-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.meet-copy h2 { max-width: 13ch; }
.timeline { display: grid; gap: 0; width: 100%; margin-top: 6px; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.timeline b { font-family: var(--serif); font-size: 1.28rem; font-weight: 600; line-height: 1.2; }
.timeline span { color: var(--muted); font-size: .96rem; }

/* membership */
.member { background: var(--dk); color: var(--on-dark); overflow: hidden; background-image: radial-gradient(50% 60% at 85% 20%, rgba(201,162,92,.18), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(201,162,92,.1), transparent 70%); }
.member-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 90px); align-items: center; position: relative; z-index: 2; }
.member-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.member-copy h2 { max-width: 14ch; }
.perks { display: grid; gap: 12px; margin-top: 6px; }
.perks li { display: flex; gap: 14px; align-items: flex-start; color: var(--on-dark); font-weight: 300; }
.perks svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--gold-2); }
.bank { background: rgba(243,234,219,.06); border: 1px solid var(--dk-line); border-radius: 30px; padding: clamp(24px, 3vw, 40px); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 20px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease), opacity .9s var(--ease-2), translate .9s var(--ease-2); }
.bank-label { display: flex; justify-content: space-between; font-size: .9rem; color: var(--on-dark-mute); letter-spacing: .04em; }
.bank-label b { color: var(--on-dark); font-weight: 500; }
.bank-range { width: 100%; accent-color: var(--gold-2); height: 28px; cursor: pointer; }
.bank-total { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--dk-line); padding-top: 18px; }
.bank-total span { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-mute); }
.bank-total b { font-family: var(--serif); font-weight: 500; font-size: clamp(3.4rem, 6vw, 4.8rem); line-height: 1; color: var(--gold-2); }
.bank-total i { font-style: normal; }
.bank-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bank-rows div { padding: 16px; border-radius: 18px; background: rgba(243,234,219,.07); display: flex; flex-direction: column; }
.bank-rows b { font-family: var(--serif); font-size: 2.3rem; font-weight: 500; line-height: 1; }
.bank-rows span { font-size: .82rem; color: var(--on-dark-mute); margin-top: 6px; }
.bank .fine { color: var(--on-dark-mute); }

/* visit */
.visit { background: var(--bg); }
.visit-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 70px); align-items: stretch; }
.visit-photo { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); min-height: 340px; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.visit-cap { position: absolute; left: 16px; bottom: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(255,251,245,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.offices { display: grid; gap: 18px; }
.office { padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease), opacity .9s var(--ease-2), translate .9s var(--ease-2), border-color .3s; }
.office:hover { border-color: var(--gold); }
.office h3 { font-size: 2rem; }
.office address { font-style: normal; color: var(--muted); }
.office-links { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 4px; }

/* faq */
.faq { background: var(--bg-2); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(26px, 6vw, 90px); align-items: start; }
.faq-grid > div:first-child { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--nav-h) + 24px); }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:first-child { border-top: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary svg { flex: none; width: 22px; height: 22px; color: var(--gold-deep); transition: transform .4s var(--ease); }
.acc details[open] summary svg { transform: rotate(45deg); }
.acc details p { padding: 0 0 24px; color: var(--muted); max-width: 60ch; }

/* cta + footer */
.cta { background: var(--dk); color: var(--on-dark); text-align: center; padding: clamp(80px, 12vw, 160px) 0; overflow: hidden; background-image: radial-gradient(55% 70% at 50% 110%, rgba(201,162,92,.32), transparent 70%); }
.cta-in { display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; }
.cta h2 { font-size: clamp(2.8rem, 7vw, 5.8rem); max-width: 16ch; }
.cta .lead { max-width: 44ch; }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.foot { background: #100B08; color: var(--on-dark); padding-top: 64px; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr .9fr; gap: 32px; padding-bottom: 44px; }
.foot-brand img { height: 54px; width: auto; filter: brightness(0) invert(.92) sepia(.25); margin-bottom: 18px; }
.foot-brand p { color: var(--on-dark-mute); max-width: 32ch; font-size: .95rem; }
.ig { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; text-decoration: none; color: var(--gold-2); font-size: .92rem; }
.ig svg { width: 20px; height: 20px; }
.foot h3 { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); font-weight: 500; font-family: var(--sans); margin-bottom: 14px; }
.foot-col p { color: var(--on-dark-mute); font-size: .95rem; line-height: 1.9; }
.foot-col a { text-decoration: none; transition: color .25s; } .foot-col a:hover { color: var(--gold-2); }
.foot-base { position: relative; padding-block: 22px 30px; }
.foot-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--dk-line); }
.foot-base p { font-size: .78rem; color: rgba(243,234,219,.5); max-width: 80ch; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .hide-md { display: none; }
  .nav-phone { display: none; }
  .foot-in { grid-template-columns: 1fr 1fr; }
}
/* The full nav needs about 1,100 px; below that it collapses into the menu sheet (which carries both phone numbers). */
@media (max-width: 1100px) {
  .nav-main, .nav-cta, .nav-call { display: none; }
  .nav-menu { display: block; }
  .nav.open { background: var(--bg); }
  .nav-sheet { display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--bg); padding: 8px var(--gutter) 24px; border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .35s var(--ease); max-height: calc(100svh - var(--nav-h)); overflow-y: auto; }
  .nav.open .nav-sheet { opacity: 1; visibility: visible; transform: none; }
  .nav-sheet a { padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--serif); font-size: 1.5rem; }
}
@media (max-width: 860px) {
  .hero, html.wipe-on .hero { justify-content: flex-start; padding-top: calc(var(--nav-h) + 14px); padding-bottom: 40px; }
  .hero-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 12px; }
  .display { font-size: clamp(2.2rem, 10vw, 3rem); max-width: none; }
  .display.hero-line { font-size: clamp(2rem, 9.2vw, 2.8rem); }
  .hero-side p { display: none; }
  .hero-side { gap: 10px; }
  .rot { margin-top: 14px; }
  .strip { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .track { animation: none; gap: 12px; padding: 10px var(--gutter) 16px; }
  .sc { width: min(58vw, 230px); scroll-snap-align: start; transform: none; }
  .sc.dup { display: none; }
  .strip-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .reveal-grid { grid-template-columns: 1fr; align-content: center; gap: 22px; padding-top: calc(var(--nav-h) + 14px); padding-bottom: 70px; }
  .reveal-h { font-size: clamp(2.2rem, 9vw, 3rem); }
  .mchips { margin-top: 18px; }
  .mchips button { padding: 10px 16px; font-size: .86rem; }
  .who { margin-top: 18px; }
  .reveal-grid { align-content: start; }
  .mirror .lead { font-size: .95rem; max-width: none; }
  .who { display: none; }
  .mchips button { padding: 9px 14px; font-size: .84rem; }
  .panel, .panel-empty { min-height: 0; }
  /* phones: no empty panel (the chips fill the screen); a pick opens the plan as a sheet over them, with its own scroll */
  .panel:has([data-empty]:not([hidden])) { display: none; }
  html.mirror-live .panel:has([data-out]:not([hidden])) { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 25; max-height: 70vh; max-height: 70svh; overflow-y: auto; scrollbar-width: none; background: #211912; border: 1px solid var(--dk-line); border-radius: 24px; padding: 16px; box-shadow: 0 -24px 60px rgba(0,0,0,.55); transform: none !important; filter: none !important; }
  html.mirror-live .panel-out { max-height: none; overflow: visible; }
  html.mirror-live .panel .plan li { grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 16px; border-radius: 18px; }
  html.mirror-live .panel .plan .n { width: 34px; height: 34px; font-size: 1.1rem; }
  html.mirror-live .panel .plan b { font-size: 1.2rem; }
  html.mirror-live .panel .plan span { font-size: .88rem; }
  html.mirror-live .panel-close { display: inline-flex; position: sticky; top: 0; float: right; z-index: 2; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--dk-line); background: rgba(33,25,18,.95); color: var(--on-dark); font-size: .8rem; cursor: pointer; }
  html.mirror-live .reveal-cue { display: none; }
  html.wipe-on .wipe { height: 280vh; }
  .finder-grid, .meet-grid, .member-grid, .visit-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-grid > div:first-child { position: static; }
  .meet-badge { right: 2%; width: 140px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .visit-photo { min-height: 260px; }
  .case { flex-basis: min(72vw, 300px); }
}
@media (max-width: 520px) {
  .foot-in { grid-template-columns: 1fr; }
  .bank-rows { grid-template-columns: 1fr; }
  .btn-lg { padding: 16px 28px; }
  .cases-foot .fine { order: 3; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .display { font-size: clamp(2.8rem, 5.8vw, 5.2rem); }
  .display.hero-line { font-size: clamp(2.6rem, 4.8vw, 4.8rem); }
  .reveal-h { font-size: clamp(2.6rem, 5vw, 4.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .marquee-track[aria-hidden] { display: none; } .marquee-track { flex-wrap: wrap; justify-content: center; }
  html.js .rv, html.js .rt .w > span { opacity: 1; transform: none; translate: none; }
}

/* =====================================================================================
   Production additions (Oct 2026): accessibility, SEO structure, E-E-A-T and answer sections
   ===================================================================================== */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--on-dark); text-decoration: none; font-size: .9rem; transition: top .2s; }
.skip:focus { top: 12px; }
.nav-links a[aria-current] { color: var(--gold-deep); }

/* call menu (both offices) */
.nav-call { position: relative; }
.nav-call summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-2); padding: 8px 4px; }
.nav-call summary::-webkit-details-marker { display: none; }
.nav-call summary svg { width: 16px; height: 16px; color: var(--gold-deep); }
.nav-call-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; padding: 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 4px; }
.nav-call-menu a { display: flex; justify-content: space-between; gap: 18px; padding: 12px 14px; border-radius: 12px; text-decoration: none; font-size: .9rem; color: var(--ink-2); }
.nav-call-menu a:hover { background: var(--bg); }
.nav-call-menu b { font-weight: 500; color: var(--ink); white-space: nowrap; }
.nav-sheet .btn { margin-top: 18px; font-family: var(--sans); font-size: 1rem; border-bottom: 0; }
.nav-sheet .sheet-call { font-family: var(--sans) !important; font-size: 1.05rem !important; color: var(--gold-deep); }


/* section heads */
.sec-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 28px 60px; flex-wrap: wrap; }
.sec-head--split > div { display: flex; flex-direction: column; gap: 18px; }
.sec-head--split .lead { max-width: 46ch; }
.sec-head h2 { max-width: 16ch; }

/* treatments */
.treat { background: var(--bg); }
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tgroup { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; transition: border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.tgroup:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow); }
.tgroup h3 { font-size: 1.75rem; }
.tgroup p { color: var(--muted); font-size: .95rem; }
.tgroup ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.tgroup ul a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); text-decoration: none; font-size: .88rem; font-weight: 500; color: var(--ink-2); transition: background .25s, color .25s, border-color .25s; }
.tgroup ul a:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.tgroup ul a .arr { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.tgroup ul a:hover .arr { transform: translateX(3px); }
.scope { margin-top: 22px; padding: 18px 22px; border-radius: 18px; border: 1px dashed rgba(138,106,47,.45); background: rgba(239,227,200,.35); }
.scope p { font-size: .95rem; color: var(--ink-2); max-width: 90ch; }
.scope a { color: var(--gold-deep); }

/* meet */
.meet-copy .link { margin-top: 4px; }
.meet-badge .num { font-size: 3rem; }

/* reviews */
.reviews { background: var(--bg); }
.ratings { display: flex; flex-wrap: wrap; gap: 12px; }
.rating { display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .3s, transform .3s var(--ease); }
.rating:hover { border-color: var(--gold); transform: translateY(-2px); }
.rating-n { font-family: var(--serif); font-size: 2.6rem; line-height: 1; font-weight: 500; }
.rating-meta { display: flex; flex-direction: column; line-height: 1.3; }
.rating-meta b { font-weight: 500; font-size: .92rem; }
.rating-meta i { font-style: normal; font-size: .82rem; color: var(--muted); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 14px; height: 14px; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quote { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 14px; }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--serif); font-size: 1.28rem; line-height: 1.35; color: var(--ink); }
.quote figcaption { margin-top: auto; font-size: .8rem; letter-spacing: .04em; color: var(--muted); }
.reviews .fine { margin-top: 22px; }

/* visit */
.visit-side { display: grid; gap: 18px; align-content: start; }
.hours { padding: 20px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.hours h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--gold-deep); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hours h3 svg { width: 16px; height: 16px; }
.hours table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours td { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.office-facts { display: grid; gap: 8px; font-size: .9rem; color: var(--ink-2); }
.office-facts li { display: flex; gap: 10px; align-items: flex-start; }
.office-facts svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--gold-deep); }

/* patient questions */
.questions { background: var(--bg-2); }
.q-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(26px, 6vw, 90px); align-items: start; }
.q-intro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; position: sticky; top: calc(var(--nav-h) + 24px); }
.q-list { display: grid; gap: 34px; }
.qgroup h3 { font-family: var(--sans); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--gold-deep); margin-bottom: 6px; }
.acc summary h4 { margin: 0; font: inherit; }
.acc .ans p { padding: 0 0 22px; color: var(--ink-2); max-width: 64ch; }
.acc .ans a { color: var(--gold-deep); text-underline-offset: 3px; }
.questions .acc details:first-child { border-top: 1px solid var(--line); }

/* journal */
.journal { background: var(--bg); }
.jgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.jcard { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.jcard img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; transition: transform .5s var(--ease-2), box-shadow .5s var(--ease-2); }
.jcard:hover img { transform: translateY(-4px); box-shadow: var(--shadow); }
.jcard .c-cat { margin-top: 6px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; }
.jcard h3 { font-size: 1.6rem; line-height: 1.12; }

/* footer additions */
.foot-col address { font-style: normal; color: var(--on-dark-mute); font-size: .95rem; line-height: 1.7; margin-bottom: 8px; }
.foot-base { display: grid; gap: 10px; }
.foot-hours { display: flex; align-items: center; gap: 10px; color: var(--on-dark-mute) !important; font-size: .86rem !important; }
.foot-hours svg { width: 16px; height: 16px; color: var(--gold-2); flex: none; }
.foot-legal a { color: inherit; } .foot-legal a:hover { color: var(--gold-2); }

@media (max-width: 1040px) {
  .tgrid, .quotes, .jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-call summary { font-size: 0; gap: 0; } .nav-call summary svg { width: 20px; height: 20px; }
}
@media (max-width: 860px) {
  .q-grid { grid-template-columns: 1fr; }
  .q-intro { position: static; }
  .sec-head--split { align-items: flex-start; }
}
@media (max-width: 620px) {
  .tgrid, .quotes, .jgrid { grid-template-columns: 1fr; }
  .rating { flex: 1 1 100%; }
}
.plan-link { text-decoration: none; color: inherit; } .plan-link:hover b { color: var(--gold-deep); }
.plan-link b::after { content: " \2192"; color: var(--gold-deep); font-family: var(--sans); font-size: .9rem; }
@media (max-width: 620px) { .ratings { width: 100%; } }

/* Hero entrance: transform only, never opacity, so the headline (the LCP element) paints on the first frame
   without waiting for site.js. */
@keyframes hero-rise { from { transform: translateY(16px); } }
html.motion .hero-copy > * { animation: hero-rise .9s cubic-bezier(.22,.61,.36,1) both; }
html.motion .hero-copy > :nth-child(2) { animation-delay: .06s; }
html.motion .hero-copy > :nth-child(3) { animation-delay: .12s; }
html.motion .hero-copy > :nth-child(n+4) { animation-delay: .18s; }
.office-treats { font-size: .9rem; color: var(--muted, #6b5e52); margin: 4px 0 14px; line-height: 1.6; }
.office-treats a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tgroup h3 a { color: inherit; text-decoration: underline; text-decoration-color: rgba(176,141,76,.5); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.tgroup h3 a:hover { color: var(--gold-deep); text-decoration-color: currentColor; }

/* Design review fixes */
h1, h2, .reveal-title { text-wrap: balance; }
/* Keep the hidden answer layer out of the first paint, so the browser measures the visible headline, not the portrait
   under the hero. site.js adds .wiping once the sweep starts. */
html.wipe-on:not(.wiping) .reveal { visibility: hidden; }
/* Nav over dark sections */
.nav.scrolled.nav-dark:not(.open) { background: rgba(23,17,13,.94); border-color: rgba(243,234,219,.1); }
.nav-dark:not(.open) .nav-links a, .nav-dark:not(.open) .nav-call summary { color: var(--on-dark); }
.nav-dark:not(.open) .nav-links a:hover, .nav-dark:not(.open) .nav-links a[aria-current] { color: var(--gold-2); }
.nav-dark:not(.open) .nav-call summary svg { color: var(--gold-2); }
.nav-dark:not(.open) .logo img { filter: brightness(0) invert(.92) sepia(.25); }
.nav-dark:not(.open) .nav-menu span, .nav-dark:not(.open) .nav-menu span::before { background: var(--on-dark); }
.nav .logo img { transition: filter .3s var(--ease); }
.nav-dark.nav-logo-hold .logo img { filter: none; }
/* Marquee pause control (WCAG 2.2.2) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marquee-toggle { position: absolute; z-index: 2; right: max(10px, calc(var(--gutter) / 2)); top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(243,234,219,.25); background: rgba(23,17,13,.85); color: var(--on-dark); display: grid; place-items: center; cursor: pointer; padding: 0; }
.marquee-toggle svg { width: 14px; height: 14px; }
.marquee-toggle .i-play, .marquee-toggle[aria-pressed="true"] .i-pause { display: none; }
.marquee-toggle[aria-pressed="true"] .i-play { display: block; }
.marquee-toggle:hover { border-color: var(--gold-2); }
@media (prefers-reduced-motion: reduce) { .marquee-toggle { display: none; } }
.ba:has(.ba-range:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 4px; }

/* ===== Homepage finish (2026-10-24) ===== */
/* treatment cards: an image heads each card; chips follow the text instead of floating at the bottom */
.tgroup { padding: 0; gap: 0; overflow: hidden; }
.tg-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gold-tint); }
.tg-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 28px); }
.tg-body ul { margin-top: 8px; }
/* reviews: one quote featured, four beside it */
.quotes--feature { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.quote--feature { position: relative; overflow: hidden; justify-content: center; gap: 18px; padding: clamp(28px, 4vw, 56px); background: var(--dk); border-color: transparent; color: var(--on-dark); }
.quote--feature p { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.18; color: var(--on-dark); }
.quote--feature figcaption { margin-top: 0; color: var(--on-dark-mute); }
.quote--feature::before { content: "\201C"; position: absolute; right: 22px; top: -38px; font-family: var(--serif); font-size: 16rem; line-height: 1; color: rgba(201,162,92,.16); pointer-events: none; }
.quote-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-stack .quote p { font-size: 1.12rem; }
.reviews .quotes + .link { margin-top: 22px; }
.q-list > .link { justify-self: start; }
/* the marquee control sits on a solid chip with the strip fading out behind it */
.trust::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 120px; background: linear-gradient(90deg, rgba(27,21,17,0), var(--ink) 62%); pointer-events: none; }
.marquee-toggle { background: var(--ink); }
/* before/after handle: a small gold slider knob low on the photo, so it never sits on the treated area */
.ba-knob { top: 82%; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #D6B26F, #B08D4C); box-shadow: 0 8px 18px -6px rgba(40,25,10,.55), inset 0 0 0 1px rgba(255,255,255,.4); filter: none; }
.ba-knob::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%231B1511' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.ba-knob img { display: none; }
/* finder: the empty card says nothing on a phone, so it waits for the first choice */
.finder-empty img { width: min(300px, 80%); }
@media (max-width: 860px) { .finder-card:has([data-empty]:not([hidden])) { display: none; } }
/* visit: a map heads each office card; hours and the lobby photo stay in view beside them */
.visit .office { padding-top: 0; overflow: hidden; }
.visit .office-map { display: block; margin: 0 calc(-1 * clamp(22px, 3vw, 34px)); aspect-ratio: 640 / 290; overflow: hidden; border-bottom: 1px solid var(--line); }
.visit .office-map img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-2); }
.visit .office:hover .office-map img { transform: scale(1.03); }
.visit-side { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
.visit .map-credit { margin-top: 16px; }
.visit .map-credit a { color: inherit; }
@media (max-width: 860px) { .visit-side { position: static; } }
@media (max-width: 1040px) { .quotes--feature { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .quote-stack { grid-template-columns: 1fr; } }

/* review pass: the static credentials strip wraps for reduced motion; the dermatologist note is a quiet card, not a dashed box */
@media (prefers-reduced-motion: reduce) { .marquee-track li { white-space: normal; text-align: center; } .trust::after { display: none; } }
.scope { border-style: solid; border-color: rgba(176,141,76,.32); box-shadow: inset 3px 0 0 var(--gold); }
h1, h2, h3, .bank-total b, .rating-n, .meet-badge .num { font-variant-numeric: lining-nums; }

/* Final design review fixes */
html { scroll-padding-top: calc(var(--nav-h) + 16px); }
.bank-rows b { color: var(--on-dark); }
h1, h2, h3, h4, .reveal-title, .acc summary h3, .acc summary h4, .rel-card b { text-wrap: balance; }
p, li, .lead, .dek { text-wrap: pretty; }
.nav-call-menu { min-width: 280px; }
.nav.scrolled { background: rgba(247,241,232,.92); }
@media (max-height: 700px) { .nav-sheet a { padding: 12px 0; font-size: 1.3rem; } }
/* No JavaScript: keep the navigation usable and hide controls that would do nothing */
@media (max-width: 1100px) {
  html:not(.js) .nav { position: relative; height: auto; padding-block: 8px; }
  html:not(.js) .nav-in { flex-wrap: wrap; }
  html:not(.js) .nav-menu { display: none; }
  html:not(.js) .nav-sheet { position: static; opacity: 1; visibility: visible; transform: none; width: 100%; max-height: none; padding: 0 0 12px; }
}
html:not(.js) [data-concerns], html:not(.js) [data-filter], html:not(.js) [data-grid-filter], html:not(.js) [data-card-filter], html:not(.js) .faq-search,
html:not(.js) .ba-range, html:not(.js) .bank-range, html:not(.js) .marquee-toggle { display: none; }

/* ===== Phone action bar (2026-10-24) ===== */
/* Phones and small tablets only: a fixed bar with Call (a chooser for both offices) and Book. site.js adds .on after
   about one screen of scrolling and removes it on the form pages, through the homepage hero, while the menu sheet is
   open, while a form field has focus and once the closing call-to-action band or the footer is on screen, so it never
   sits on top of the footer. Without JavaScript the bar is simply always shown on phones, with room left for it. */
.abar { display: none; }
@media (max-width: 860px) {
  .abar { display: flex; align-items: center; gap: 10px; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(247,241,232,.94); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    border-top: 1px solid var(--line); box-shadow: 0 -14px 32px -20px rgba(60,40,15,.4); }
  html.js .abar { transform: translateY(calc(100% + 16px)); visibility: hidden; transition: transform .5s var(--ease-2), visibility 0s linear .5s; }
  html.js .abar.on { transform: none; visibility: visible; transition: transform .5s var(--ease-2), visibility 0s; }
  html:not(.js) body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .abar-call { position: relative; flex: none; }
  .abar-call summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(27,21,17,.3); background: var(--card); color: var(--ink); font-weight: 500; font-size: .95rem; letter-spacing: .03em; -webkit-tap-highlight-color: transparent; transition: background .3s var(--ease), border-color .3s var(--ease); }
  .abar-call summary::-webkit-details-marker { display: none; }
  .abar-call summary svg { width: 17px; height: 17px; color: var(--gold-deep); }
  .abar-call[open] summary { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
  .abar-call[open] summary svg { color: var(--gold-2); }
  .abar-menu { position: absolute; left: 0; bottom: calc(100% + 14px); width: min(320px, calc(100vw - 32px)); padding: 8px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 2px; }
  .abar-menu-h { padding: 8px 12px 6px; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
  .abar-menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--ink-2); font-size: .92rem; }
  .abar-menu a b { font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .abar-menu a + a { position: relative; }
  .abar-menu a + a::after { content: ""; position: absolute; left: 12px; right: 12px; top: -1px; height: 1px; background: var(--line); }
  .abar-menu a:hover, .abar-menu a:active { background: var(--bg); }
  .abar-menu a b { display: inline-flex; align-items: center; gap: 10px; }
  .abar-menu a b::before { content: ""; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--gold-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z' fill='none' stroke='%23806026' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px; order: 2; }
  .abar-book { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 12px 18px; white-space: nowrap; }
  .abar .btn:hover { --lift: 0px; }
  html.motion .abar-call[open] .abar-menu { animation: abar-pop .35s var(--ease-2) both; }
}
@keyframes abar-pop { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  html.js .abar, html.js .abar.on { transition: none; }
}
@media print { .abar { display: none !important; } }

/* ===== Treatment tiles (2026-10-25): full-bleed photo tiles in the ANEWU manner. Her sets are tight face crops, so a
   photo tile shows one framed portrait as a before/after slider that sweeps itself (site.js), then fades to the next set
   for that procedure; a gold bar times the cycle. Prop tiles are full-bleed with a slow drift. Reduced motion: a static split. ===== */
.treat { overflow: hidden; }
.treat::before { content: ''; position: absolute; z-index: 0; width: 60vw; height: 60vw; left: 55%; top: 10%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(240,200,120,.28), rgba(240,200,120,0)); animation: dA 26s ease-in-out infinite alternate; }
.treat > .wrap { position: relative; z-index: 1; }
.tgrid { gap: 16px; }
.tt { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 440px; border-radius: 22px; overflow: hidden; background: var(--dk-2); color: var(--on-dark); isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tt:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -30px rgba(40,25,10,.55); }
.tt-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tt-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; animation: tt-drift 24s ease-in-out infinite alternate; animation-delay: calc(var(--k, 0) * -5s); }
@keyframes tt-drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2.5%, 2%, 0); } }
.tt-media > .tt-bg { inset: -12%; width: 124%; height: 124%; filter: blur(26px) brightness(.5) saturate(1.15); animation: none; }
.tt-frame { position: relative; z-index: 2; margin: 50px auto 0; width: 60%; max-width: 240px; aspect-ratio: 540 / 864; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.4); box-shadow: 0 26px 50px -22px rgba(0,0,0,.75); background: var(--dk); transition: transform .6s var(--ease); }
.tt:hover .tt-frame { transform: scale(1.03); }
.tt-set { position: absolute; inset: 0; --x: 100%; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.tt-set.on { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.tt-set img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; user-select: none; }
.tt-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.tt-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; translate: -1px 0; background: linear-gradient(transparent, #fff 12%, #fff 88%, transparent); box-shadow: 0 0 14px rgba(255,255,255,.6); }
.tt-knob { position: absolute; left: var(--x); top: 82%; width: 34px; height: 34px; translate: -50% -50%; border-radius: 50%; background: linear-gradient(135deg, #D6B26F, #B08D4C); box-shadow: 0 8px 18px -6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.45); }
.tt-knob::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%231B1511' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.tt-set .lb { position: absolute; z-index: 2; left: 10px; bottom: 10px; font-size: .56rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: rgba(27,21,17,.62); color: var(--on-dark); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tt-set .lb-a { left: auto; right: 10px; background: linear-gradient(135deg, #D6B26F, #B08D4C); color: var(--ink); }
.tt-bar { position: relative; z-index: 2; display: block; width: 60%; max-width: 240px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: rgba(243,234,219,.16); overflow: hidden; }
.tt-bar i { display: block; height: 100%; background: linear-gradient(90deg, #D6B26F, #C9A25C); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tt-dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.tt-dots i { width: 5px; height: 5px; border-radius: 99px; background: rgba(243,234,219,.3); transition: width .4s var(--ease), background .3s; }
.tt-dots i.on { width: 16px; background: var(--gold-2); }
.tt:hover .tt-media > img { animation-play-state: paused; }
.tt::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(23,17,13,.06) 0%, rgba(23,17,13,.12) 40%, rgba(23,17,13,.72) 66%, rgba(23,17,13,.95) 100%); }
.tt-n { position: absolute; z-index: 2; left: 22px; top: 18px; font-size: .68rem; letter-spacing: .22em; color: rgba(243,234,219,.9); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.tt-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; margin-top: auto; }
.tt-pic { font-size: .64rem; letter-spacing: .04em; color: rgba(243,234,219,.62); margin-bottom: 2px; min-height: 2.2em; }
.tt h3 { font-size: clamp(1.7rem, 2.1vw, 2.1rem); line-height: 1.05; color: var(--on-dark); }
.tt h3 a { color: inherit; text-decoration: underline; text-decoration-color: rgba(201,162,92,.6); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.tt h3 a:hover { color: var(--gold-2); text-decoration-color: currentColor; }
.tt p { color: rgba(243,234,219,.8); font-size: .92rem; max-width: 40ch; }
.tt ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 0; border: 0; }
.tt ul a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(243,234,219,.08); border: 1px solid rgba(243,234,219,.22); color: var(--on-dark); text-decoration: none; font-size: .8rem; font-weight: 500; transition: background .25s, color .25s, border-color .25s; }
.tt ul a:hover { background: var(--gold-2); color: var(--ink); border-color: var(--gold-2); }
.tt ul a .arr { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.tt ul a:hover .arr { transform: translateX(3px); }
html:not(.js) .tt-set.on, html.rm .tt-set.on { --x: 50%; }
@media (max-width: 620px) { .tt { min-height: 0; } .tt-frame { margin-top: 46px; width: 58%; } .tt:not(:has(.tt-frame)) { aspect-ratio: 4 / 4.2; } }
@media (prefers-reduced-motion: reduce) { .tt-media > img { animation: none; } .tt-set.on { --x: 50%; } .tt-bar, .tt-dots { display: none; } }

/* ---------------- Mirror panel (2026-10-26): the finder's panel is a mirror. A concern with a consented set shows that patient's slider; the rest light a zone on the gold line face. ---------------- */
.mf { width: min(100%, 440px, calc(min(70vh, 560px) * .72)); flex: 0 0 auto; transition: width .6s var(--ease); }
.mf-frame { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 30px 30px; overflow: hidden; background: #1b1410; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(226,194,133,.35); isolation: isolate; }
.mf-frame::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 24px 50px rgba(255,255,255,.035); background: linear-gradient(118deg, rgba(255,255,255,.12), transparent 32%, transparent 68%, rgba(255,255,255,.04)); }
.mf-face { position: absolute; inset: 0; }
.mf-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-face .zone { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(236,206,146,.9), rgba(226,194,133,.35) 55%, rgba(226,194,133,0)); filter: blur(5px); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.mf-face .zone.on { opacity: 1; animation: zone-breathe 2.8s ease-in-out infinite; }
.mf-face.idle .zone { animation: zone-idle 5.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .65s); }
.mf-face.all .zone:not(.on) { opacity: .3; }
@keyframes zone-breathe { 50% { opacity: .55; } }
@keyframes zone-idle { 0%, 100% { opacity: 0; } 40% { opacity: .5; } }
.mf-set { position: absolute; inset: 0; animation: mf-in .7s var(--ease) both; }
.mf-set[hidden], .mf-face[hidden] { display: none; }
.mf-set .ba { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
@keyframes mf-in { from { opacity: 0; transform: scale(1.04); } }
.mf-cap { margin: 12px 0 0; text-align: center; color: var(--on-dark-mute); font-size: .84rem; line-height: 1.45; }
.mf-cap b { color: var(--on-dark); font-weight: 500; }
.panel.has-plan { flex-wrap: nowrap; justify-content: flex-start; align-content: center; align-items: center; }
.panel.has-plan .mf { width: min(46%, calc(min(70vh, 560px) * .75)); }
.panel.has-plan .panel-out { flex: 1 1 0; min-width: 0; }
.panel.has-plan .plan li { grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 16px; border-radius: 18px; }
.panel.has-plan .plan .n { width: 36px; height: 36px; font-size: 1.1rem; }
.panel.has-plan .plan b { font-size: 1.15rem; }
.panel.has-plan .plan span { font-size: .88rem; }
.panel.has-plan .plan-note { font-size: .76rem; margin-top: 10px; }
.panel.has-plan .mf .ba-knob { width: 40px; height: 40px; } .panel.has-plan .mf .ba-knob::before { background-size: 18px; }
.panel.has-plan .mf .ba-tag { bottom: 12px; font-size: .56rem; padding: 5px 9px; }
@media (max-width: 860px) {
  html.mirror-live .panel.has-plan { display: block; }
  html.mirror-live .panel.has-plan .mf { width: 100%; display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; margin: 0 0 12px; }
  html.mirror-live .panel.has-plan .mf-frame { border-radius: 999px 999px 18px 18px; }
  html.mirror-live .panel.has-plan .mf-cap { margin: 0; text-align: left; font-size: .82rem; }
  html.mirror-live .panel .plan { clear: both; }   /* the grid is a BFC and would otherwise shrink beside the floated Close button */
  html.mirror-live .panel.has-plan .mf .ba-knob { width: 26px; height: 26px; } html.mirror-live .panel.has-plan .mf .ba-knob::before { background-size: 12px; }
  html.mirror-live .panel.has-plan .mf .ba-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mf-face .zone, .mf-set { animation: none !important; } .mf-face.idle .zone { opacity: .35; } }

/* ---------------- Results marquee (2026-10-26): on desktop the gallery drifts left to right on its own, pauses on hover or while a slider is held; phones swipe ---------------- */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html.js [data-cases-wrap] { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  html.js [data-cases-wrap] .cases { overflow: visible; width: max-content; scroll-snap-type: none; padding-left: 0; padding-right: 0; animation: cases-drift 115s linear infinite; }
  html.js [data-cases-wrap] .case.dup { display: block; }
  html.js [data-cases-wrap]:hover .cases, html.js [data-cases-wrap].hold .cases, html.js [data-cases-wrap]:focus-within .cases { animation-play-state: paused; }
  html.js .results .cases-nav { display: none; }
}
@keyframes cases-drift { from { transform: translateX(calc(-50% - 11px)); } to { transform: none; } }
.only-phone { display: none; }
@media (max-width: 860px) { .only-desk { display: none; } .only-phone { display: inline; } }

/* stacked before/after cards (lip close-ups published top and bottom, 2026-10-26): before above after, uncropped, in the same portrait card */
.ba--stack { background: #1b1410; touch-action: auto; }
.ba--stack .ba-back { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(22px) brightness(.5) saturate(1.1); }
.ba--stack .stk { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px; }
.ba--stack figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px -14px rgba(0,0,0,.6); }
.ba--stack figure img { display: block; width: 100%; height: auto; }
.ba--stack .ba-tag { left: 10px !important; right: auto !important; bottom: 10px; }

/* mirror stills (2026-10-26): concerns with no clean patient set show a real still in the mirror */
.mf-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mf-still[data-mset="unsure"] img { object-position: 50% 18%; }
.mf-still[data-mset="texture"] img { object-position: 46% 50%; }

/* ---------------- Lightbox (2026-10-26): tap any before/after to open it large with its own handle; X, Esc or the backdrop closes ---------------- */
.ba-zoom { position: absolute; top: 10px; right: 10px; z-index: 6; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: zoom-in; display: grid; place-items: center; background: rgba(255,251,245,.88); color: var(--ink); box-shadow: 0 6px 16px -6px rgba(27,21,17,.45); opacity: .92; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.ba-zoom svg { width: 15px; height: 15px; }
.ba-zoom:hover { transform: scale(1.08); opacity: 1; }
.ba-zoom:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.sc .ba-zoom { width: 30px; height: 30px; top: 9px; right: 9px; } .sc .ba-zoom svg { width: 13px; height: 13px; }
.ba[data-ba], .ba--stack { cursor: zoom-in; }
.ba[data-ba] .ba-range { cursor: ew-resize; }
.zlb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(17,12,9,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: zlb-in .35s var(--ease) both; }
.zlb[hidden] { display: none; }
@keyframes zlb-in { from { opacity: 0; } }
.zlb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; animation: zlb-pop .45s var(--ease) both; }
@keyframes zlb-pop { from { opacity: 0; transform: scale(.96) translateY(10px); } }
.zlb-ba { height: min(78vh, 78svh, 860px); width: auto; max-width: calc(100vw - 32px); border-radius: 22px; cursor: ew-resize; }
.zlb-ba .ba-knob { width: 62px; height: 62px; }
.zlb-ba .ba-tag { bottom: 16px; font-size: .7rem; padding: 7px 13px; }
.zlb-ba .ba-tag--before { left: 14px; } .zlb-ba .ba-tag--after { right: 14px; }
.zlb-stack { display: flex; flex-direction: column; gap: 10px; width: min(92vw, 860px, calc((78vh - 10px) * 1)); }
.zlb-stack figure { position: relative; margin: 0; border-radius: 18px; overflow: hidden; }
.zlb-stack img { display: block; width: 100%; height: auto; }
.zlb-stack .ba-tag { left: 14px; right: auto; bottom: 14px; }
.zlb-cap { margin: 0; max-width: 60ch; text-align: center; color: rgba(243,234,219,.78); font-size: .88rem; line-height: 1.5; }
.zlb-cap b { color: #F3EADB; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; display: block; margin-bottom: 2px; }
.zlb-x { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(243,234,219,.3); background: rgba(27,21,17,.7); color: #F3EADB; cursor: pointer; display: grid; place-items: center; transition: background .3s var(--ease), transform .3s var(--ease); }
.zlb-x:hover { background: var(--gold); color: var(--ink); transform: rotate(90deg); }
.zlb-x svg { width: 20px; height: 20px; }
.zlb-x:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
html.zlb-open, html.zlb-open body { overflow: hidden; }
@media (max-width: 860px) { .zlb-ba { height: auto; width: calc(100vw - 32px); max-height: 74svh; } .zlb-x { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .zlb, .zlb-fig { animation: none; } }

/* ---------------- Phone hero carousel + mirror (2026-10-26): no drag handles on phones; photos animate on their own, the row swipes and auto-advances ---------------- */
.strip-dots { display: none; }
@media (max-width: 860px) {
  .strip { scroll-snap-type: x mandatory; scroll-behavior: smooth; }
  .track { padding-left: calc((100vw - min(50vw, 210px)) / 2); padding-right: calc((100vw - min(50vw, 210px)) / 2); gap: 14px; }
  .sc { width: min(50vw, 210px); scroll-snap-align: center; transition: transform .5s var(--ease), opacity .5s var(--ease); }
  .sc:not(.is-on) { transform: scale(.94); opacity: .7; }
  .strip .ba-range, .mf .ba-range { pointer-events: none; }
  .strip .ba-knob, .mf .ba-knob { display: none; }
  .strip .ba, .mf .ba { touch-action: pan-x pan-y; }
  .strip-foot { align-items: center; text-align: center; }
  .strip-foot .hint { white-space: normal; justify-content: center; }
  .strip-foot .hint > i { display: none; }
  .strip-dots { display: flex; gap: 7px; justify-content: center; order: -1; }
  .strip-dots b { width: 6px; height: 6px; border-radius: 99px; background: rgba(27,21,17,.2); transition: width .4s var(--ease), background .3s; }
  .strip-dots b.on { width: 22px; background: var(--gold-deep); }
  html.mirror-live .panel.has-plan .mf { grid-template-columns: 136px 1fr; }
  html.wipe-on .scroll-hint { display: none; }
}
.mf .ba-zoom { top: auto; bottom: 10px; }
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .sc:not(.is-on) { transform: none; opacity: 1; } }

/* ---------------- Phones: the hero and the mirror flow as a normal page (2026-10-26) ----------------
   No pinned scroll transition under 861 px (it left three screens of empty dark scrolling and squeezed eight chips into one).
   Tapping a concern shows the patient photo and the plan right under the chips. */
@media (max-width: 860px) {
  html:not(.wipe-on) .hero { min-height: 0; padding-bottom: 28px; }
  html:not(.wipe-on) .reveal-grid { min-height: 0; padding-top: 56px; padding-bottom: 48px; align-content: start; }
  html:not(.wipe-on) .mchips button { opacity: 1; translate: none; }
  html:not(.wipe-on) .who { display: block; margin-top: 18px; }
  html:not(.wipe-on) .panel { min-height: 0; transform: none !important; }
  html:not(.wipe-on) .panel.has-plan { display: block; margin-top: 8px; scroll-margin-top: calc(var(--nav-h) + 12px); }
  html:not(.wipe-on) .panel.has-plan .mf { width: 100%; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 18px; }
  html:not(.wipe-on) .panel.has-plan .mf-frame { border-radius: 999px 999px 20px 20px; }
  html:not(.wipe-on) .panel.has-plan .mf-cap { margin: 0; text-align: left; font-size: .86rem; }
  html:not(.wipe-on) .panel.has-plan .mf .ba-tag { bottom: 10px; font-size: .56rem; padding: 5px 9px; }
  html:not(.wipe-on) .panel .plan li { grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 16px; border-radius: 18px; }
  html:not(.wipe-on) .panel .plan .n { width: 34px; height: 34px; font-size: 1.1rem; }
  html:not(.wipe-on) .panel .plan b { font-size: 1.2rem; }
  html:not(.wipe-on) .panel .plan span { font-size: .9rem; }
  html:not(.wipe-on) .panel .plan-ctas .btn { width: 100%; justify-content: center; }
}

/* phones: bigger tap areas for the headline dots and pause button (the dots keep their look) */
@media (max-width: 860px) {
  .dots { gap: 4px; }
  .dots button { position: relative; margin: 0 4px; }
  .dots button::after { content: ''; position: absolute; inset: -18px -8px; }
  .rot-toggle { width: 40px; height: 40px; }
}
@media (max-width: 860px) { .mf .ba-zoom { display: none; } }

/* ---------------- Phones, before/after everywhere (2026-10-26 mobile audit): no drag handles (they fight the swipe); each photo sweeps on its own while on screen; tap opens it large ---------------- */
@media (max-width: 860px) {
  .case .ba-range { pointer-events: none; }
  .case .ba-knob { display: none; }
  .case .ba { touch-action: pan-x pan-y; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--gold-deep); }
}

/* phones (2026-10-26 mobile audit): the hero's caustic light layers are two ~1600 x 2000 px animated textures blended with
   mix-blend-mode: screen; Safari re-blends them every frame, which stalled WebKit in testing. Phones get the still warm gradient only. */
@media (max-width: 860px) {
  .hero-bg .light { display: none; }
  .caustic { animation: none; }
}
/* phones: no page-wide smooth scrolling (Safari stacks programmatic smooth scrolls; the few scripted glides ask for it explicitly) */
@media (max-width: 860px) { html { scroll-behavior: auto; } }