/* The Kaga Institute: site styles (ported from the approved Claude Design mockup). */
:root {
  --ink: #080808;
  --ink-2: #0a0a0a;
  --paper: #f4f1ec;
  --gold: #c9b98a;
  --gold-dark: #7a6a3f;
  --pad: clamp(20px, 4vw, 56px);
  --sec: clamp(80px, 12vh, 140px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html, body { margin: 0; padding: 0; background: var(--ink); color: var(--paper); font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
input, select, button, textarea { font-family: inherit; }
img, video { display: block; }
[hidden] { display: none !important; }
.serif { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.pad { padding-left: var(--pad); padding-right: var(--pad); }
.sec-pad { padding-top: var(--sec); padding-bottom: var(--sec); }
.dark { background: var(--ink); color: var(--paper); }
.light { background: var(--paper); color: var(--ink-2); }
.hide-mobile { display: inline; }
@media (max-width: 719px) { .hide-mobile { display: none !important; } }

/* Type */
.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.light .eyebrow { color: var(--gold-dark); }
.display { margin: 0; font-weight: 800; line-height: .9; letter-spacing: -.05em; text-transform: uppercase; text-wrap: balance; }
.display .serif { letter-spacing: 0; }
.d-lg { font-size: clamp(40px, 6vw, 92px); line-height: .95; letter-spacing: -.04em; }
.d-xl { font-size: clamp(44px, 7vw, 112px); }
.d-xxl { font-size: clamp(52px, 9vw, 150px); line-height: .88; }
.h3 { margin: 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.03em; }
.lead { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(244, 241, 236, .65); max-width: 520px; }
.light .lead { color: rgba(10, 10, 10, .7); }
.lead.narrow { max-width: 440px; }
.light-text { color: rgba(244, 241, 236, .78) !important; }
.body-lg { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; max-width: 520px; color: rgba(244, 241, 236, .72); text-wrap: pretty; }
.light .body-lg { color: rgba(10, 10, 10, .8); }

/* Layout helpers */
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack.center { justify-content: center; }
.stack-sm { display: flex; flex-direction: column; gap: 18px; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.head-text { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split-end { align-items: end; margin-bottom: 44px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 18px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; }
.btn-light { background: #fff; color: #000; }
.btn-light:hover { background: var(--gold); color: #000; }
.btn-dark { background: var(--ink-2); color: #fff; }
.btn-dark:hover { background: var(--gold); color: #000; }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: inherit; }
.btn-ghost:hover { background: #fff; color: #000; }
.light .btn-ghost { border-color: rgba(0, 0, 0, .4); }
.light .btn-ghost:hover { background: var(--ink-2); color: #fff; }
.btn-glass { background: rgba(255, 255, 255, .1); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-glass:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.play-tri { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.round { flex: none; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; cursor: pointer; font-size: 18px; transition: background .25s, color .25s; }
.round:hover { background: #fff; color: #000; }
.round.small { width: 48px; height: 48px; font-size: 16px; }
.round.on-light { border-color: rgba(0, 0, 0, .3); color: var(--ink-2); }
.round.on-light:hover { background: var(--ink-2); color: #fff; }
.rail-nav { display: flex; gap: 10px; }
.play-dot { flex: none; width: 44px; height: 44px; border-radius: 999px; background: #fff; display: grid; place-items: center; }
.play-dot::after { content: ''; width: 0; height: 0; border-left: 11px solid #000; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; margin-left: 3px; }
.play-dot.small { width: 34px; height: 34px; }
.play-dot.small::after { border-left-width: 9px; border-top-width: 5.5px; border-bottom-width: 5.5px; margin-left: 2px; }
.line-link { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.line-link i { display: inline-block; width: 32px; height: 1px; background: currentColor; }
.chip { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); color: #fff; }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .82) 100%); pointer-events: none; }

/* Scroll reveal */
[data-reveal-root] [data-r] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
[data-reveal-root] [data-r="media"] { transform: translateY(28px) scale(.96); }
[data-reveal-root] [data-r="clip"] { clip-path: inset(0 0 100% 0); transform: none; transition: opacity .8s, clip-path 1.1s cubic-bezier(.2, .7, .2, 1); }
[data-reveal-root][data-in] [data-r] { opacity: 1; transform: none; }
/* Only the image wipes use clip-path; on text it would cut off descenders (the "y" in "Friday"). */
[data-reveal-root][data-in] [data-r="clip"] { clip-path: inset(0 0 0 0); }
[data-reveal-root][data-in] [data-r]:nth-child(2) { transition-delay: .08s; }
[data-reveal-root][data-in] [data-r]:nth-child(3) { transition-delay: .16s; }
[data-reveal-root][data-in] [data-r]:nth-child(4) { transition-delay: .24s; }
[data-reveal-root][data-in] [data-r]:nth-child(5) { transition-delay: .32s; }
[data-reveal-root][data-in] [data-r]:nth-child(6) { transition-delay: .4s; }
[data-reveal-root][data-in] [data-r="late"] { transition-delay: .45s; }
html:not(.js) [data-reveal-root] [data-r] { opacity: 1; transform: none; clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal-root] [data-r] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Nav + menu */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--pad); mix-blend-mode: difference; color: #fff; }
.nav-logo img { height: 34px; filter: invert(1); }
.nav-actions { display: flex; align-items: center; gap: 18px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nav-actions > a.hide-mobile { opacity: .85; }
.nav-book { padding: 12px 20px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; }
.nav-book:hover { background: #fff; color: #000; }
.nav-menu { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; }
.nav-menu span { display: block; width: 16px; height: 1.5px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
.menu { position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--paper); padding: 96px clamp(24px, 6vw, 80px) clamp(24px, 6vw, 80px); overflow: auto; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 40px 32px; align-content: start; }
.menu-items a:hover, .menu-title:hover { color: var(--paper); }
.menu-close { position: absolute; top: 22px; right: var(--pad); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; cursor: pointer; font-size: 18px; }
.menu-group { display: flex; flex-direction: column; gap: 10px; }
.menu-title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.menu-items { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: rgba(244, 241, 236, .6); }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #000; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .75) 100%); }
.hero-inner { position: relative; width: 100%; padding: 120px var(--pad) clamp(32px, 5vh, 64px); display: flex; flex-direction: column; gap: 28px; }
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hero-title { margin: 0; font-size: clamp(56px, 12.5vw, 196px); font-weight: 800; line-height: .88; letter-spacing: -.05em; text-transform: uppercase; text-wrap: balance; }
.hero-side { max-width: 380px; display: flex; flex-direction: column; gap: 18px; padding-bottom: 10px; }
.hero-tag { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1; color: #fff; }
.hero-intro { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.hero-strip { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 18px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.hero-strip .dot { display: flex; align-items: center; gap: 10px; }
.hero-strip .dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.scroll-cue { display: flex; align-items: center; gap: 8px; }
.scroll-cue i { display: inline-block; width: 36px; height: 1px; background: rgba(255, 255, 255, .6); }

/* Rails + video cards */
.rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; }
.rail::-webkit-scrollbar { display: none; }
.rail-bottom { padding-top: 24px; padding-bottom: clamp(72px, 10vh, 120px); }
.sec-videos { padding: clamp(72px, 10vh, 128px) 0 clamp(64px, 8vh, 104px); }
.sec-videos .head { margin-bottom: 40px; }
.vcard { position: relative; flex: none; border-radius: 22px; overflow: hidden; background: #111; scroll-snap-align: start; cursor: pointer; color: #fff; transition: transform .5s var(--ease); }
.vcard:hover, .vcard:focus-visible { transform: translateY(-8px); outline: none; }
.vcard > video, .vcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard.portrait { width: min(78vw, 320px); aspect-ratio: 9 / 16; }
.vcard.landscape { width: min(84vw, 520px); aspect-ratio: 16 / 10; }
.vcard-top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; }
.dur { font-size: 11px; color: rgba(255, 255, 255, .75); }
.vcard-bottom { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.vcard-bottom > div { display: flex; flex-direction: column; gap: 4px; }
.vcard-bottom strong { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.vcard-bottom span:not(.play-dot) { font-size: 12px; color: rgba(255, 255, 255, .7); }
.vcard-bottom .meta { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.vcard.landscape .vcard-bottom strong { font-size: 20px; }

/* AviClear */
.sec-avi { padding-top: var(--sec); overflow: hidden; }
.sec-avi .split { margin-bottom: clamp(56px, 8vh, 96px); }
.avi-visual { display: flex; flex-direction: column; gap: 28px; align-items: center; }
.avi-device { position: relative; width: min(100%, 560px); aspect-ratio: 1; border-radius: 32px; overflow: hidden; background: radial-gradient(circle at 30% 20%, #fff 0%, #e9e4da 60%, #d8d1c3 100%); }
.avi-device img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
/* The AviClear reel: a phone-shaped video card overlapping the device photo's left edge. */
.avi-stage { position: relative; width: min(100%, 560px); }
.avi-stage .avi-device { width: 100%; }
.avi-stage .avi-reel { position: absolute; z-index: 2; left: -14%; bottom: -3%; width: 60%; border: 4px solid #fff; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.avi-reel .vcard-bottom { left: 14px; right: 14px; bottom: 14px; }
.avi-reel .vcard-bottom strong { font-size: 15px; }
@media (max-width: 1240px) { .avi-stage .avi-reel { left: -4%; } }
@media (max-width: 860px) { .avi-stage .avi-reel { left: 4%; bottom: -6%; width: 56%; border-width: 3px; } .avi-reel .vcard-bottom { left: 10px; right: 10px; bottom: 10px; } .avi-reel .vcard-bottom strong { font-size: 13px; } .avi-reel .vcard-bottom span:not(.play-dot) { display: none; } }
.avi-device span { position: absolute; right: 22px; bottom: 22px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
.awards { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 40px); }
.awards img { height: 96px; width: 96px; object-fit: contain; }
.award-quote { display: flex; flex-direction: column; gap: 2px; max-width: 200px; }
.award-quote strong { font-size: 26px; line-height: 1; }
.award-quote span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
.journeys-head { margin-bottom: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 36px; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); padding: 20px 0; }
.light .stats { border-color: rgba(0, 0, 0, .15); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat strong { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.stat small { font-size: 18px; }
.stat span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 236, .6); }
.light .stat span { color: rgba(10, 10, 10, .6); }

/* truSculpt */
.tx-card { position: relative; min-height: min(80svh, 720px); border-radius: 28px; overflow: hidden; background: #111; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 44px); color: #fff; }
.tx-card > img, .tx-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tx-top { position: absolute; top: clamp(24px, 3vw, 44px); left: clamp(24px, 3vw, 44px); right: clamp(24px, 3vw, 44px); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.tx-bottom { position: relative; display: flex; flex-direction: column; gap: 18px; }
.tx-bottom h3 { margin: 0; font-size: clamp(40px, 5vw, 80px); font-weight: 800; line-height: .9; letter-spacing: -.05em; }
.tx-bottom p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 460px; color: rgba(255, 255, 255, .8); }

/* Testimonials */
.sec-stories { display: flex; flex-direction: column; gap: clamp(40px, 6vh, 64px); }
.sec-stories .head { margin-bottom: 0; }
.vcard.story { width: 100%; aspect-ratio: 3 / 4; border-radius: 24px; }
.story-chip { position: absolute; top: 18px; left: 18px; }
.story-bottom { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.story-bottom p { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; text-wrap: pretty; }
.story-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-who span:first-child { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.stories-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px; }
.stories-foot .serif { font-size: clamp(20px, 2vw, 28px); }

/* About */
.sec-about .split { align-items: stretch; }
.about-photo { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 720px; border-radius: 28px; overflow: hidden; background: #ddd; }
.about-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-video { position: absolute; right: 18px; bottom: 18px; width: min(46%, 220px); aspect-ratio: 9 / 13; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); cursor: pointer; color: #fff; transition: transform .5s var(--ease); }
.about-video:hover { transform: scale(1.03); }
.about-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-video-label { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.about-video-label strong { font-size: 13px; line-height: 1.3; }
/* Phones: a smaller card tucked into the corner, below Dr. Kaga's face */
@media (max-width: 700px) { .about-video { width: 36%; right: 12px; bottom: 12px; border-radius: 14px; } .about-video-label { left: 10px; right: 10px; bottom: 10px; } .about-video-label strong { font-size: 11.5px; } }
.about-quote { margin: 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; text-wrap: pretty; }
.about-bio { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(10, 10, 10, .78); max-width: 560px; text-wrap: pretty; }

/* Health */
.sec-health { padding-left: 0; padding-right: 0; }
.health-card { flex: none; width: min(78vw, 300px); display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; }
.health-img { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #151515; margin-bottom: 6px; }
.health-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s, transform .8s; }
.health-card:hover .health-img img { filter: grayscale(0); transform: scale(1.04); }
.health-img span { position: absolute; top: 14px; left: 14px; font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, .8); }
.health-card strong { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.health-body { font-size: 13px; line-height: 1.55; color: rgba(244, 241, 236, .6); }

/* Injectables + hair */
.sec-inject { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 64px); }
.sec-inject .head { margin-bottom: 0; }
.inj-card { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #ddd; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #fff; }
.inj-card img, .feature-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.inj-card:hover img, .feature-card:hover img { transform: scale(1.05); }
.inj-text { position: relative; display: flex; flex-direction: column; gap: 6px; }
.inj-text strong { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.inj-text span { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.features { margin-top: clamp(20px, 3vh, 32px); }
.feature-card { position: relative; min-height: min(440px, 110vw); border-radius: 24px; overflow: hidden; background: #ddd; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 40px); color: #fff; }
.feature-text { position: relative; display: flex; flex-direction: column; gap: 14px; }
.feature-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.feature-text h3 { margin: 0; font-size: clamp(36px, 4vw, 64px); font-weight: 800; line-height: .9; letter-spacing: -.05em; text-transform: uppercase; }
.feature-text p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 480px; color: rgba(255, 255, 255, .8); }
.feature-text .line-link { color: #fff; }

/* Mural */
.sec-mural { position: relative; aspect-ratio: 2061 / 759; overflow: hidden; background: #0b0b0b; }
.sec-mural img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.22, .61, .36, 1); will-change: transform; }

/* Facilities */
.sec-fac { display: flex; flex-direction: column; gap: 18px; }
.fac-hero { position: relative; aspect-ratio: 4 / 5; max-height: 860px; border-radius: 28px; overflow: hidden; background: #151515; }
.fac-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.fac-badge { position: absolute; left: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(8, 8, 8, .55); backdrop-filter: blur(10px); }
.fac-badge strong { font-size: 13px; }
.fac-badge span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.fac-gallery { margin-top: clamp(24px, 4vh, 48px); }
.fac-card { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #151515; }
.fac-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.fac-card:hover img { transform: scale(1.04); }
.fac-card span { position: absolute; left: 16px; bottom: 16px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fff; padding: 9px 13px; border-radius: 999px; background: rgba(8, 8, 8, .6); backdrop-filter: blur(10px); }

/* Booking */
.sec-book { position: relative; overflow: hidden; background: var(--ink); }
.book-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.book-inner { position: relative; align-items: start; }
.book-phone { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.02em; }
.book-offline { position: relative; padding: 24px; border-radius: 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.book-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: rgba(8, 8, 8, .55); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .14); }
.book-form .full { grid-column: 1 / -1; }
.book-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 236, .7); padding: 0; margin-bottom: 8px; }
.field > span { margin-bottom: 0; }
.field input, .field select { width: 100%; padding: 15px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .35); color: #fff; font-size: 15px; outline: none; color-scheme: dark; }
.field input:focus, .field select:focus { border-color: var(--gold); }
.field select option { background: #111; color: #fff; }
.field [aria-invalid="true"] { border-color: #e8907c; }
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span { display: inline-block; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); font-size: 13px; color: rgba(244, 241, 236, .85); transition: background .2s, color .2s, border-color .2s; }
.pill input:checked + span { background: var(--gold); border-color: var(--gold); color: #000; }
.pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.consent { gap: 10px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: rgba(244, 241, 236, .78); cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); }
.privacy { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(244, 241, 236, .6); }
.submit { padding: 18px; letter-spacing: .16em; }
.form-status { margin: 0; min-height: 1.2em; font-size: 14px; line-height: 1.5; }
.form-status.ok { color: var(--gold); }
.form-status.err { color: #f0a594; }

/* Footer */
.footer { background: var(--ink); padding-top: clamp(56px, 8vh, 96px); padding-bottom: 32px; display: flex; flex-direction: column; gap: 48px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px; }
.footer-logo { height: 40px; width: max-content; filter: invert(1); }
.footer-tag { margin: 0; font-size: 26px; line-height: 1; }
.social { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 241, 236, .7); }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.6; color: rgba(244, 241, 236, .7); }
.footer-col strong { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); }
.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; line-height: 1.9; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; font-size: 12px; color: rgba(244, 241, 236, .5); }

/* ---- Specials (Black Friday) ---- */
:root { --pink: #f71278; --sp-w: clamp(312px, 28.8vw, 408px); --sp-ratio: 4 / 5; }
/* Phones: narrower so the next card peeks in, and about 20% taller, with bigger text. */
@media (max-width: 719px) {
  :root { --sp-w: min(80vw, 360px); --sp-ratio: 5 / 8; }
  .sec-specials .sp-name { font-size: 44px; }
  .sec-specials .sp-tag { font-size: 25px; }
  .sec-specials .sp-price strong { font-size: 32px; }
}
.sec-specials { position: relative; overflow: hidden; padding: var(--sec) 0 calc(var(--sec) * .8); background: radial-gradient(55% 45% at 88% 0%, rgba(247, 18, 120, .22), transparent 70%), radial-gradient(40% 35% at 0% 100%, rgba(247, 18, 120, .12), transparent 70%), #000; }
.sp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: clamp(36px, 5vh, 56px); }
.sp-head-text { display: flex; flex-direction: column; gap: 14px; }
.sp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--pink); }
.sp-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0 rgba(247, 18, 120, .7); animation: sp-pulse 1.8s infinite; }
@keyframes sp-pulse { 70% { box-shadow: 0 0 0 10px rgba(247, 18, 120, 0); } 100% { box-shadow: 0 0 0 0 rgba(247, 18, 120, 0); } }
.sp-title { font-size: clamp(54px, 9.5vw, 156px); line-height: .86; padding-bottom: .12em; } /* room for the serif descenders */
.sp-title .serif { color: var(--pink); }
.sp-edit { margin: 0; font-size: clamp(26px, 2.8vw, 40px); line-height: 1; color: var(--paper); }
.sp-head-side { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.sp-tagline { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.sp-window { align-self: flex-start; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--pink); color: var(--pink); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sp-hint { font-size: 12px; color: rgba(244, 241, 236, .5); }

.sp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; }
.sp-controls .round { width: 48px; height: 48px; font-size: 16px; }
.sp-controls .round:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.sp-controls .sp-hint { margin-left: 8px; }
.sp-pause { position: relative; }
.sp-pause::before, .sp-pause::after { content: ''; position: absolute; top: 50%; width: 4px; height: 14px; background: currentColor; transform: translateY(-50%); }
.sp-pause::before { left: calc(50% - 6px); }
.sp-pause::after { left: calc(50% + 2px); }
.sp-pause[aria-pressed="true"]::before { left: calc(50% - 4px); width: 0; height: 0; background: none; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.sp-pause[aria-pressed="true"]::after { display: none; }
.sp-rail { position: relative; display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--pad) 26px; cursor: grab; user-select: none; -webkit-user-select: none; overscroll-behavior-x: contain; }
.sp-rail::-webkit-scrollbar { display: none; }
/* Touch screens: each swipe locks a card in the middle (the very first one sits left, so the next one shows). */
.sp-rail.snap { scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); cursor: auto; }
.sp-rail.snap > .sp-slot, .sp-rail.snap > .sp-card { scroll-snap-align: center; scroll-snap-stop: always; }
.sp-rail.snap > .sp-first { scroll-snap-align: start; }
/* On arrival, the row slides left for a moment to show there are more offers, then settles back. */
.sp-rail.peek > * { animation: sp-peek 1.5s cubic-bezier(.45, 0, .2, 1); }
@keyframes sp-peek { 0%, 100% { transform: none; } 40%, 58% { transform: translateX(calc(var(--sp-w) * -.38)); } }
@media (prefers-reduced-motion: reduce) { .sp-rail.peek > * { animation: none; } }
.sp-rail.dragging { cursor: grabbing; }
.sp-rail img { -webkit-user-drag: none; }
.sp-divider { flex: none; width: 92px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 0 18px 18px; border-left: 1px solid rgba(247, 18, 120, .6); }
.sp-divider span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(36px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; color: var(--pink); }
.sp-divider strong { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 241, 236, .55); }

.sp-card { flex: none; position: relative; color: #fff; outline: none; }
.sp-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; border-radius: 26px; }
.sp-front { position: relative; width: var(--sp-w); aspect-ratio: var(--sp-ratio); border-radius: 24px; overflow: hidden; background: #111; }
.sp-front > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sp-card:hover .sp-front > img { transform: scale(1.05); }
/* Dark enough behind the text block that white and pink text stay readable on bright photos (WCAG contrast). */
.sp-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, .74) 56%, rgba(0, 0, 0, .92) 72%, rgba(0, 0, 0, .96) 100%); }
.sp-shade.deep { background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .9) 51%, #000 64%, #000 100%); }
.sp-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.sp-chip { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(8px); border: 1px solid var(--pink); color: #fff; }
.sp-num { font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, .8); }
.sp-bottom { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.sp-name { margin: 0; font-size: clamp(36px, 3.8vw, 55px); font-weight: 800; line-height: .88; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.sp-tag { margin: 0; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.1; color: #ff2d8a; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .55); }
.sp-name { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.sp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
.sp-price strong { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.sp-usual { font-style: normal; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .72); }
s.sp-usual { font-size: 16px; text-decoration-line: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.sp-price.big s.sp-usual { font-size: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-usual.tbd { color: #ffd166; }
.sp-dates { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.sp-details .sp-dates { color: var(--pink); }
.sp-price span { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.sp-price.big strong { font-size: 30px; color: var(--pink); }

.sp-details { display: flex; flex-direction: column; gap: 10px; padding: 20px; color: var(--paper); }
.sp-details-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-details-title { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 236, .6); text-align: right; }
.sp-offer { margin: 0; font-size: clamp(19px, 1.6vw, 22px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.sp-copy { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(244, 241, 236, .8); }
.sp-small { margin: 0; font-size: 11px; line-height: 1.5; color: rgba(244, 241, 236, .55); }
.btn-pink { background: #c40d5f; color: #fff; }
.sp-details .btn-pink { align-self: flex-start; padding: 13px 20px; font-size: 11px; }
.btn-pink:hover { background: #fff; color: #000; }

/* Flip and unwrap show details inside the 4:5 card, so their text scales with the card's width. */
.sp-card.flip, .sp-card.unwrap { container-type: inline-size; }
@container (max-width: 360px) {
  .sp-details { gap: clamp(5px, 2.6cqi, 10px); padding: clamp(14px, 5.6cqi, 20px); }
  .sp-offer { font-size: clamp(15px, 5.8cqi, 20px); }
  .sp-copy { font-size: clamp(11px, 3.7cqi, 13px); line-height: 1.45; }
  .sp-small { font-size: clamp(9.5px, 3cqi, 11px); line-height: 1.4; }
  .sp-price.big strong { font-size: clamp(20px, 8.4cqi, 30px); }
  .sp-details .btn-pink { padding: clamp(9px, 3.4cqi, 13px) clamp(14px, 5.2cqi, 20px); }
}

/* Option 1: flip */
.sp-card.flip { width: var(--sp-w); aspect-ratio: var(--sp-ratio); perspective: 1400px; cursor: pointer; }
.sp-card.flip .sp-inner { position: relative; width: 100%; height: 100%; transition: transform .8s var(--ease); transform-style: preserve-3d; }
.sp-card.flip .sp-front, .sp-card.flip .sp-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sp-card.flip .sp-back { transform: rotateY(180deg); border-radius: 24px; overflow: auto; scrollbar-width: none; background: radial-gradient(120% 70% at 100% 0%, rgba(247, 18, 120, .28), transparent 60%), #0b0b0b; border: 1px solid rgba(247, 18, 120, .6); box-shadow: 0 30px 70px rgba(247, 18, 120, .18); }
.sp-card.flip .sp-back .sp-details { min-height: 100%; }
.sp-card.flip .sp-back .sp-small { margin-top: auto; }
.sp-card.flip.is-open .sp-inner { transform: rotateY(180deg); }
.sp-slot { flex: none; display: flex; flex-direction: column; gap: 12px; }
.sp-flip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 13px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.sp-flip-btn:hover { border-color: var(--pink); color: var(--pink); }
.sp-flip-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.sp-flip-btn[aria-expanded="true"] { background: var(--pink); border-color: var(--pink); color: #fff; }
.sp-flip-btn .when-open, .sp-flip-btn[aria-expanded="true"] .when-closed { display: none; }
.sp-flip-btn[aria-expanded="true"] .when-open { display: inline; }

/* Option 2: expand */
.sp-card.expand { display: flex; border-radius: 24px; overflow: hidden; background: #0b0b0b; cursor: pointer; transition: box-shadow .5s; }
.sp-card.expand .sp-front { flex: none; border-radius: 0; }
.sp-card.expand .sp-num { display: none; }
.sp-card.expand .sp-details { flex: none; width: 0; padding: 22px 0; opacity: 0; overflow: hidden; transition: width .6s var(--ease), padding .6s var(--ease), opacity .35s; }
.sp-card.expand .sp-details > * { width: min(300px, calc(80vw - 48px)); }
.sp-card.expand .sp-details .sp-small { margin-top: auto; }
.sp-card.expand.is-open { box-shadow: 0 0 0 1px rgba(247, 18, 120, .7), 0 30px 80px rgba(247, 18, 120, .2); }
.sp-card.expand.is-open .sp-details { width: min(348px, 80vw); padding: 24px; opacity: 1; transition: width .6s var(--ease), padding .6s var(--ease), opacity .5s .25s; }
.sp-plus { position: absolute; top: 14px; left: calc(var(--sp-w) - 50px); width: 34px; height: 34px; border-radius: 999px; background: var(--pink); transition: transform .4s var(--ease); }
.sp-plus::before, .sp-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: #fff; transform: translate(-50%, -50%); }
.sp-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.sp-card.expand.is-open .sp-plus { transform: rotate(45deg); }

/* Option 3: unwrap */
.sp-card.unwrap { width: var(--sp-w); aspect-ratio: var(--sp-ratio); border-radius: 24px; overflow: hidden; cursor: pointer; }
.sp-card.unwrap .sp-front { position: absolute; inset: 0; width: 100%; }
.sp-card.unwrap .sp-bottom { right: 22%; }
.sp-card.unwrap .sp-num { display: none; }
.sp-ribbon { position: absolute; inset: 0; pointer-events: none; }
.sp-ribbon::before, .sp-ribbon::after { content: ''; position: absolute; background: linear-gradient(90deg, #c40d5f, var(--pink) 45%, #ff5aa5 55%, var(--pink) 70%, #c40d5f); box-shadow: 0 0 20px rgba(0, 0, 0, .35); transition: transform .7s var(--ease); }
.sp-ribbon::before { top: 0; bottom: 0; right: 10%; width: 26px; }
.sp-ribbon::after { left: 0; right: 0; top: 23%; height: 26px; background: linear-gradient(180deg, #c40d5f, var(--pink) 45%, #ff5aa5 55%, var(--pink) 70%, #c40d5f); }
.sp-ribbon span { position: absolute; right: calc(10% + 13px); top: calc(23% + 13px); transform: translate(50%, -50%) rotate(-8deg); padding: 9px 14px; border-radius: 999px; background: #fff; color: #000; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .5s var(--ease), opacity .4s; }
.sp-card.unwrap .sp-details { position: absolute; left: 0; right: 0; bottom: 0; max-height: 100%; overflow: auto; scrollbar-width: none; border-radius: 20px 20px 24px 24px; border-top: 2px solid var(--pink); background: rgba(8, 8, 8, .92); backdrop-filter: blur(14px); transform: translateY(103%); transition: transform .65s var(--ease); }
.sp-card.unwrap.is-open .sp-ribbon::before { transform: translateY(-105%); }
.sp-card.unwrap.is-open .sp-ribbon::after { transform: translateX(105%); }
.sp-card.unwrap.is-open .sp-ribbon span { transform: translate(50%, -50%) rotate(-8deg) scale(0); opacity: 0; }
.sp-card.unwrap.is-open .sp-details { transform: none; }
@media (hover: hover) {
  .sp-card.unwrap:hover .sp-ribbon::before { transform: translateY(-105%); }
  .sp-card.unwrap:hover .sp-ribbon::after { transform: translateX(105%); }
  .sp-card.unwrap:hover .sp-ribbon span { transform: translate(50%, -50%) rotate(-8deg) scale(0); opacity: 0; }
  .sp-card.unwrap:hover .sp-details { transform: none; }
}

.sp-fine { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 10px 40px; margin-top: 18px; }
.sp-fine-block summary { cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); list-style: none; }
.sp-fine-block summary::-webkit-details-marker { display: none; }
.sp-fine-block summary::after { content: ' +'; }
.sp-fine-block[open] summary::after { content: ' –'; }
.sp-fine-block p { margin: 10px 0 0; font-size: 11px; line-height: 1.65; color: rgba(244, 241, 236, .55); }

.preview-switch { position: fixed; top: 84px; right: var(--pad); z-index: 95; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(8, 8, 8, .85); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .15); }
.preview-switch a { padding: 9px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 241, 236, .75); }
.preview-switch a[aria-current="page"] { background: var(--pink); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sp-card.flip .sp-inner, .sp-card.expand .sp-details, .sp-card.unwrap .sp-details, .sp-ribbon::before, .sp-ribbon::after { transition: none; }
  .sp-eyebrow i { animation: none; }
}

/* Preview banner (temp domain only; hidden once SITE_INDEXABLE=true at launch) */
.preview-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 999px; background: var(--gold); color: #000; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); }
.lightbox-inner { position: relative; width: min(100%, 1100px); display: flex; flex-direction: column; gap: 18px; }
.lightbox-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; color: #fff; }
.lightbox-head > div { display: flex; flex-direction: column; gap: 6px; }
.lightbox-head strong { font-size: clamp(20px, 2.6vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.lightbox-media video { width: 100%; max-height: 78vh; border-radius: 20px; background: #000; object-fit: contain; }
.lightbox-media .yt { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; border-radius: 20px; overflow: hidden; background: #000; }
.lightbox-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================== Inner pages (treatments, conditions, shop…) */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: #fff; color: #000; font-weight: 700; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
.nav-links { display: none; margin: 0 auto; padding: 0; list-style: none; gap: clamp(14px, 1.6vw, 28px); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nav-links a { opacity: .85; }
.nav-links a:hover { opacity: 1; color: inherit; text-decoration: underline; text-underline-offset: 6px; }
@media (min-width: 1180px) { .nav-links { display: flex; } }
.nav a:focus-visible, .nav button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Page hero */
.ph { position: relative; background: radial-gradient(60% 70% at 100% 0%, rgba(247, 18, 120, .16), transparent 70%), #000; color: var(--paper); overflow: hidden; }
.ph-inner { padding-top: clamp(112px, 16vh, 150px); padding-bottom: clamp(48px, 7vh, 88px); display: flex; flex-direction: column; gap: clamp(24px, 4vh, 40px); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.ph-has-media .ph-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.ph-text { display: flex; flex-direction: column; gap: 22px; max-width: 900px; }
.ph-title { font-size: clamp(40px, 6.2vw, 96px); line-height: .9; padding-bottom: .06em; overflow-wrap: break-word; }
.ph-has-media .ph-title { font-size: clamp(34px, 4.4vw, 70px); }
.ph-title .serif { color: var(--pink); }
.ph-lede { margin: 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: rgba(244, 241, 236, .78); max-width: 640px; text-wrap: pretty; }
.ph-lede a { color: #ff4f9b; text-decoration: underline; text-underline-offset: 3px; }
.ph-media { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: #111; }
.ph-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .ph-has-media .ph-grid { grid-template-columns: minmax(0, 1fr); } .ph-media { aspect-ratio: 16 / 10; } }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 236, .55); }
.crumbs li + li::before { content: '/'; margin-right: 10px; opacity: .5; }
.crumbs a:hover { color: var(--paper); }
.crumbs [aria-current] { color: var(--gold); }

/* Jump links (hubs, shop, media) */
.jump { position: sticky; top: 0; z-index: 40; background: rgba(8, 8, 8, .86); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.jump-inner { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; }
.jump-inner::-webkit-scrollbar { display: none; }
.jump-inner > span { flex: none; margin-right: 6px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.jump-inner a { flex: none; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; font-weight: 600; color: rgba(244, 241, 236, .85); white-space: nowrap; }
.jump-inner a:hover, .jump-inner a[aria-current] { border-color: var(--pink); color: #fff; background: rgba(247, 18, 120, .14); }
.jump + .page-body, .jump + .tiles, .jump + .press, .jump + .ba, .jump + .shop-sec { padding-top: clamp(40px, 6vh, 72px); }

/* Body: article + sticky booking card */
.page-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 5vw, 88px); align-items: start; max-width: 1360px; margin: 0 auto; padding-top: clamp(48px, 7vh, 88px); padding-bottom: clamp(56px, 8vh, 104px); }
.page-body.single { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
@media (max-width: 1000px) { .page-body { grid-template-columns: minmax(0, 1fr); } }

.prose { min-width: 0; color: rgba(244, 241, 236, .8); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.75; }
.prose > * { max-width: 72ch; }
.prose h2 { margin: 2.4em 0 .6em; color: var(--paper); font-size: clamp(26px, 2.6vw, 40px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.prose h3 { margin: 2em 0 .5em; color: var(--paper); font-size: clamp(19px, 1.5vw, 23px); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.prose h4 { margin: 1.6em 0 .4em; color: var(--paper); font-size: 17px; font-weight: 700; }
.prose > :first-child, .hub-sec > h2 + * { margin-top: 0; }
.prose p { margin: 0 0 1.05em; text-wrap: pretty; }
.prose a { color: #ff4f9b; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: #fff; }
.prose strong { color: var(--paper); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.2em; }
.prose li { margin: .35em 0; padding-left: .3em; }
.prose ul li::marker { color: var(--pink); }
.prose ol li::marker { color: var(--pink); font-weight: 700; }
.prose blockquote { margin: 1.6em 0; padding-left: 22px; border-left: 2px solid var(--pink); font-size: clamp(22px, 2vw, 30px); line-height: 1.25; color: var(--paper); }
.prose .btn { text-decoration: none; }
.prose-figure { margin: 1.8em 0; max-width: 760px !important; }
.prose-figure img { width: 100%; height: auto; max-height: 540px; object-fit: cover; border-radius: 20px; background: #111; }
.prose-figure figcaption { margin-top: 10px; font-size: 13px; color: rgba(244, 241, 236, .55); }
.prose-video { position: relative; aspect-ratio: 16 / 9; margin: 1.8em 0; border-radius: 20px; overflow: hidden; background: #000; max-width: 760px !important; }
.prose-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.also { padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(247, 18, 120, .35); background: rgba(247, 18, 120, .08); color: var(--paper); }

.treats { margin: 0 0 2em; padding: 20px 22px; border-radius: 20px; background: #111; border: 1px solid rgba(255, 255, 255, .08); }
.treats ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.treats li { margin: 0; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 14px; color: var(--paper); }

.hub-sec { scroll-margin-top: 90px; padding-top: clamp(32px, 5vh, 56px); margin-top: clamp(32px, 5vh, 56px); border-top: 1px solid rgba(255, 255, 255, .1); }
.hub-sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.hub-sec > h2 { margin-top: 0; font-size: clamp(32px, 3.6vw, 56px); }
.hub-lede { font-size: clamp(17px, 1.3vw, 20px); color: var(--paper); }

.aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.aside-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 24px; background: radial-gradient(90% 80% at 100% 0%, rgba(247, 18, 120, .22), transparent 70%), #111; border: 1px solid rgba(255, 255, 255, .08); }
.aside-card strong { font-size: 24px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; }
.aside-card p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(244, 241, 236, .7); }
.aside-card .btn { margin-top: 6px; }
.aside-phone { font-size: 14px; font-weight: 600; text-align: center; color: rgba(244, 241, 236, .85); }
.aside-related { display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; color: rgba(244, 241, 236, .85); }
.chip-link:hover { border-color: var(--pink); color: #fff; }
@media (max-width: 1000px) { .aside { position: static; } }

/* Tiles (category grids, related) */
.tiles { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(48px, 7vh, 88px); }
.tiles.related { background: #050505; border-top: 1px solid rgba(255, 255, 255, .06); }
.tiles-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.tile { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #111; border: 1px solid rgba(255, 255, 255, .06); transition: transform .45s var(--ease), border-color .3s; }
.tile:hover { transform: translateY(-4px); border-color: rgba(247, 18, 120, .5); color: inherit; }
.tile-media { aspect-ratio: 4 / 3; overflow: hidden; background: #161616; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tile:hover .tile-media img { transform: scale(1.05); }
.tile-blank { display: block; width: 100%; height: 100%; background: radial-gradient(80% 80% at 0% 100%, rgba(247, 18, 120, .25), transparent 70%), #161616; }
.tile-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; flex: 1; }
.tile-body strong { font-size: 20px; font-weight: 800; line-height: 1.05; letter-spacing: -.025em; text-transform: uppercase; color: var(--paper); }
.tile-body > span:not(.tile-cta) { font-size: 13.5px; line-height: 1.5; color: rgba(244, 241, 236, .62); }
.tile-cta { margin-top: auto; padding-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff4f9b; }
.tile-cta i { font-style: normal; display: inline-block; transition: transform .3s; }
.tile:hover .tile-cta i, .press-card:hover .tile-cta i { transform: translateX(4px); }

/* Before & after / albums */
.ba { padding-top: clamp(48px, 7vh, 88px); padding-bottom: clamp(48px, 7vh, 88px); background: #050505; scroll-margin-top: 80px; }
.ba-head { margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
.ba-head .serif { color: var(--pink); }
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.ba-grid.masonry { display: block; columns: 3 280px; column-gap: 14px; }
.ba-grid.masonry .ba-item { break-inside: avoid; margin-bottom: 14px; }
.ba-item { margin: 0; border-radius: 18px; overflow: hidden; background: #111; }
.ba-item img { width: 100%; height: auto; display: block; }
.ba-note { margin: 18px 0 0; font-size: 12px; letter-spacing: .04em; color: rgba(244, 241, 236, .55); }
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 18px; }
.zoom-dialog { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 92vh; }
.zoom-dialog::backdrop { background: rgba(0, 0, 0, .9); backdrop-filter: blur(10px); }
.zoom-dialog img { display: block; max-width: min(96vw, 1400px); max-height: 86vh; width: auto; height: auto; border-radius: 16px; }
.zoom-dialog button { position: fixed; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; cursor: pointer; }
.zoom-dialog .zoom-nav { top: 50%; width: 56px; height: 56px; font-size: 32px; line-height: 1; transform: translateY(-50%); }
.zoom-dialog .zoom-prev { left: 18px; right: auto; }
.zoom-dialog .zoom-nav:hover, .zoom-dialog .zoom-close:hover { background: rgba(255, 255, 255, .18); }
.zoom-dialog [hidden] { display: none; }
.zoom-count { position: fixed; bottom: 18px; left: 50%; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; transform: translateX(-50%); }
@media (max-width: 700px) { .zoom-dialog .zoom-nav { width: 44px; height: 44px; font-size: 26px; } .zoom-dialog .zoom-prev { left: 8px; } .zoom-dialog .zoom-next { right: 8px; } }

/* CTA band */
.cta-band { background: radial-gradient(55% 80% at 90% 0%, rgba(247, 18, 120, .25), transparent 70%), #000; padding-top: clamp(64px, 10vh, 120px); padding-bottom: clamp(64px, 10vh, 120px); }
.cta-inner { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
.cta-inner .serif { color: var(--pink); }

/* Press */
.press { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(56px, 8vh, 96px); }
.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.press-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; background: #111; border: 1px solid rgba(255, 255, 255, .06); transition: border-color .3s, transform .45s var(--ease); }
.press-card:hover { border-color: rgba(247, 18, 120, .5); transform: translateY(-3px); color: inherit; }
.press-media { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.press-media img { width: 100%; height: 100%; object-fit: contain; }
.press-text { font-size: 14.5px; line-height: 1.55; color: rgba(244, 241, 236, .8); }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; max-width: 980px; }
.person { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #111; border: 1px solid rgba(255, 255, 255, .06); transition: border-color .3s, transform .45s var(--ease); }
.person:hover { border-color: rgba(247, 18, 120, .5); transform: translateY(-4px); color: inherit; }
.person-media { aspect-ratio: 4 / 5; background: radial-gradient(80% 70% at 100% 0%, rgba(247, 18, 120, .3), transparent 70%), #161616; display: grid; place-items: center; overflow: hidden; }
.person-media img { width: 100%; height: 100%; object-fit: cover; }
.person-initials { font-size: 96px; font-weight: 800; letter-spacing: -.05em; color: rgba(244, 241, 236, .25); }
.person-body { display: flex; flex-direction: column; gap: 6px; padding: 22px; }
.person-body strong { font-size: 24px; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.person-body > span:not(.tile-cta) { color: var(--gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

/* Shop */
.shop-sec { padding-top: clamp(48px, 7vh, 80px); padding-bottom: clamp(24px, 4vh, 40px); scroll-margin-top: 80px; }
.shop-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); align-items: start; margin-bottom: 28px; }
@media (max-width: 900px) { .shop-head { grid-template-columns: minmax(0, 1fr); } }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.product { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 18px; border-radius: 20px; background: #111; border: 1px solid rgba(255, 255, 255, .06); }
.product-media { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.product-media img { width: 88%; height: 88%; object-fit: contain; }
.product h3 { margin: 4px 0 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; color: var(--paper); }
.product p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(244, 241, 236, .65); }

/* Contact & booking */
.contact { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(56px, 8vh, 96px); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.contact-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 26px; background: #111; border: 1px solid rgba(255, 255, 255, .08); }
.contact-card h2 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase; }
.contact-card p { margin: 0; color: rgba(244, 241, 236, .7); font-size: 14px; line-height: 1.6; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
.hours dt { color: var(--gold); font-weight: 700; }
.hours dd { margin: 0; color: rgba(244, 241, 236, .85); }
.contact-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.contact-list li { display: flex; flex-direction: column; gap: 2px; }
.contact-list span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.contact-list a { color: var(--paper); }
.contact-card .btn { align-self: flex-start; margin-top: 6px; }
.book-page { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(56px, 8vh, 96px); }
.book-page .split { align-items: start; }

/* Footer additions */
.footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-cta p { margin: 0; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; max-width: 720px; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: rgba(244, 241, 236, .75); }
.footer-map { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-legal a:hover { color: var(--paper); }

/* ---- Specials & news signup (popup; a bottom sheet on phones) */
.signup { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; }
.signup[open] { display: grid; place-items: center; }
.signup::backdrop { background: rgba(8, 6, 7, .62); backdrop-filter: blur(4px); }
.signup-card {
  position: relative; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 40px 36px 28px; border-radius: 24px; color: #f4f1ec;
  background: radial-gradient(120% 80% at 100% 0%, rgba(196, 13, 95, .35), transparent 60%), #141012;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.signup.in .signup-card { animation: signup-in .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes signup-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes signup-up { from { transform: translateY(100%); } }
.signup-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.signup-close:hover { background: rgba(255, 255, 255, .1); }
.signup-close:focus-visible, .footer-signup:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.signup-form, .signup-done { display: flex; flex-direction: column; gap: 14px; }
.signup-form[hidden], .signup-done[hidden] { display: none; }
.signup-title { margin: 0; padding-right: 40px; font-size: clamp(30px, 6vw, 40px); line-height: 1.02; }
.signup-title .serif { color: #ff6fa8; text-transform: none; }
.signup-text { margin: 0 0 4px; color: rgba(244, 241, 236, .78); line-height: 1.55; font-size: 15px; }
.signup .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup .check { font-size: 12.5px; }
.signup .check input { accent-color: #c40d5f; }
.signup-submit { margin-top: 4px; justify-content: center; }
.signup-status { margin: 0; min-height: 1.2em; font-size: 14px; color: rgba(244, 241, 236, .8); }
.signup-status.err { color: #f0a594; }
.signup-fine { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(244, 241, 236, .6); }
.signup-fine a { color: inherit; text-decoration: underline; }
.signup-done:focus { outline: none; }
.footer-signup { margin-top: 14px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.footer-signup[hidden] { display: none; }
@media (max-width: 640px) {
  .signup[open] { place-items: end center; }
  .signup-card { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; padding: 32px 20px calc(20px + env(safe-area-inset-bottom)); }
  .signup.in .signup-card { animation-name: signup-up; }
}
@media (prefers-reduced-motion: reduce) { .signup.in .signup-card { animation: none; } }

/* ============================================================== Light theme (every page except the homepage)
   Cream background and black text, like the homepage's light sections. The footer stays dark.
   Pink text uses the deeper #c40d5f so it passes WCAG contrast on cream. */
html:has(body.page-light) { background: var(--paper); }
body.page-light { background: var(--paper); color: var(--ink-2); --pink-text: #c40d5f; --gold-text: #6b5c34; }
.page-light main .eyebrow { color: var(--gold-text); }
.page-light .footer { color: var(--paper); }

/* Page hero */
.page-light .ph { background: radial-gradient(60% 70% at 100% 0%, rgba(247, 18, 120, .09), transparent 70%), var(--paper); color: var(--ink-2); }
.page-light .ph-title .serif, .page-light .cta-inner .serif, .page-light .ba-head .serif { color: var(--pink-text); }
.page-light .ph-lede { color: rgba(10, 10, 10, .74); }
.page-light .ph-lede a { color: var(--pink-text); }
.page-light .ph-media { background: #e9e4dc; }
.page-light .ph .btn-ghost { border-color: rgba(0, 0, 0, .4); }
.page-light .ph .btn-ghost:hover { background: var(--ink-2); color: #fff; }
.page-light .crumbs ol { color: rgba(10, 10, 10, .6); }
.page-light .crumbs a:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.page-light .crumbs [aria-current] { color: var(--gold-text); }

/* Jump links */
.page-light .jump { background: rgba(244, 241, 236, .9); border-bottom-color: rgba(0, 0, 0, .1); }
.page-light .jump-inner > span { color: var(--gold-text); }
.page-light .jump-inner a { border-color: rgba(0, 0, 0, .18); color: rgba(10, 10, 10, .85); }
.page-light .jump-inner a:hover, .page-light .jump-inner a[aria-current] { border-color: var(--pink-text); color: var(--ink-2); background: rgba(196, 13, 95, .08); }

/* Article */
.page-light .prose { color: rgba(10, 10, 10, .8); }
.page-light .prose h2, .page-light .prose h3, .page-light .prose h4, .page-light .prose strong, .page-light .prose blockquote, .page-light .hub-lede { color: var(--ink-2); }
.page-light .prose a { color: var(--pink-text); }
.page-light .prose a:hover { color: var(--ink-2); }
.page-light .prose .btn-light { background: var(--ink-2); color: #fff; }
.page-light .prose .btn-light:hover { background: var(--pink-text); color: #fff; }
.page-light .prose ul li::marker, .page-light .prose ol li::marker { color: var(--pink-text); }
.page-light .prose blockquote { border-left-color: var(--pink-text); }
.page-light .prose-figure img { background: #e9e4dc; }
.page-light .prose-figure figcaption { color: rgba(10, 10, 10, .62); }
.page-light .also { border-color: rgba(196, 13, 95, .3); background: rgba(196, 13, 95, .06); color: var(--ink-2); }
.page-light .treats { background: #fff; border-color: rgba(0, 0, 0, .08); }
.page-light .treats li { background: rgba(0, 0, 0, .05); color: var(--ink-2); }
.page-light .hub-sec { border-top-color: rgba(0, 0, 0, .1); }

/* Booking card and related links */
.page-light .aside-card { background: radial-gradient(90% 80% at 100% 0%, rgba(247, 18, 120, .1), transparent 70%), #fff; border-color: rgba(0, 0, 0, .08); box-shadow: 0 18px 40px rgba(10, 10, 10, .06); }
.page-light .aside-card p { color: rgba(10, 10, 10, .7); }
.page-light .aside-phone { color: var(--ink-2); }
.page-light .aside-phone:hover { color: var(--pink-text); }
.page-light .chip-link { border-color: rgba(0, 0, 0, .18); color: rgba(10, 10, 10, .85); }
.page-light .chip-link:hover { border-color: var(--pink-text); color: var(--ink-2); }

/* Tiles, galleries, press, team, shop, contact */
.page-light .tiles.related, .page-light .ba { background: #ece7df; border-top-color: rgba(0, 0, 0, .06); }
.page-light .tile, .page-light .press-card, .page-light .person, .page-light .product, .page-light .contact-card { background: #fff; border-color: rgba(0, 0, 0, .07); }
.page-light .tile:hover, .page-light .press-card:hover, .page-light .person:hover { border-color: rgba(196, 13, 95, .45); }
.page-light .tile-media, .page-light .ba-item { background: #e9e4dc; }
.page-light .tile-blank { background: radial-gradient(80% 80% at 0% 100%, rgba(247, 18, 120, .14), transparent 70%), #e9e4dc; }
.page-light .tile-body strong, .page-light .product h3, .page-light .contact-list a { color: var(--ink-2); }
.page-light .tile-body > span:not(.tile-cta), .page-light .product p, .page-light .contact-card p { color: rgba(10, 10, 10, .68); }
.page-light .tile-cta { color: var(--pink-text); }
.page-light .ba-note { color: rgba(10, 10, 10, .62); }
.page-light .press-media, .page-light .product-media { border: 1px solid rgba(0, 0, 0, .06); }
.page-light .press-text { color: rgba(10, 10, 10, .8); }
.page-light .person-media { background: radial-gradient(80% 70% at 100% 0%, rgba(247, 18, 120, .14), transparent 70%), #e9e4dc; }
.page-light .person-initials { color: rgba(10, 10, 10, .2); }
.page-light .person-body > span:not(.tile-cta), .page-light .hours dt, .page-light .contact-list span { color: var(--gold-text); }
.page-light .hours dd { color: rgba(10, 10, 10, .85); }
.page-light .cta-band { background: radial-gradient(55% 80% at 90% 0%, rgba(247, 18, 120, .12), transparent 70%), #ece7df; }

/* The booking form keeps its dark card, so it stands out on the cream page */
.page-light .book-form { background: #141012; color: var(--paper); border-color: transparent; backdrop-filter: none; }
.page-light .book-offline { background: #fff; border-color: rgba(0, 0, 0, .1); }

/* Focus outlines that were white on black */
.page-light .zoom:focus-visible { outline-color: var(--pink-text); }
.page-light main a:focus-visible, .page-light main button:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; }
.page-light .sec-specials .eyebrow, .page-light .book-form .eyebrow { color: var(--gold); }

/* Light pages: a solid cream header (the homepage's see-through one would sit on top of the text),
   with the "On this page" bar parked just below it. */
.page-light .nav { mix-blend-mode: normal; color: var(--ink-2); background: rgba(244, 241, 236, .94); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.page-light .nav-logo img { filter: none; }
.page-light .nav-book, .page-light .nav-menu { border-color: rgba(0, 0, 0, .55); }
.page-light .nav-book:hover { background: var(--ink-2); color: #fff; }
.page-light .nav-links a:hover, .page-light .nav-phone:hover { color: var(--ink-2); }
.page-light .nav a:focus-visible, .page-light .nav button:focus-visible { outline-color: var(--ink-2); }
.page-light .jump { top: 88px; }
.page-light .hub-sec, .page-light .ba, .page-light .shop-sec { scroll-margin-top: 160px; }
/* Shared homepage pieces used on light pages (CTA band, intro text, outline buttons) */
.page-light main .body-lg, .page-light main .lead { color: rgba(10, 10, 10, .74); }
.page-light main .btn-ghost { border-color: rgba(0, 0, 0, .4); }
.page-light main .btn-ghost:hover { background: var(--ink-2); color: #fff; }
.page-light .sec-specials .body-lg, .page-light .sec-specials .lead { color: rgba(244, 241, 236, .72); }
.page-light .sec-specials .btn-ghost { border-color: rgba(255, 255, 255, .4); }
.page-light .sec-specials .btn-ghost:hover { background: #fff; color: #000; }
.footer-credit a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--gold); }

/* ---- Appointment form: stays black everywhere, with a pink accent and easy-to-read fields */
.book-form { border-top: 3px solid var(--pink); background: rgba(8, 8, 8, .86); }
.page-light .book-form { border-top-color: var(--pink); }
.book-form-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.book-form-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #ff4f9b; }
.book-form-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.book-form-title { margin: 0; font-size: clamp(28px, 3vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -.035em; text-transform: uppercase; color: #fff; }
.book-form-title .serif { color: #ff4f9b; }
.book-form-sub { margin: 0; font-size: 14px; color: rgba(244, 241, 236, .78); }
.book-form .field > span, .book-form .field > legend { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: rgba(244, 241, 236, .95); }
.book-form .field input, .book-form .field select { font-size: 16px; font-weight: 500; border: 1.5px solid rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .07); }
.book-form .field input:focus, .book-form .field select:focus { border-color: #ff4f9b; box-shadow: 0 0 0 3px rgba(247, 18, 120, .28); }
.book-form .pill span { font-size: 14px; font-weight: 600; border: 1.5px solid rgba(255, 255, 255, .42); color: #fff; }
.book-form .pill input:checked + span { background: #ff4f9b; border-color: #ff4f9b; color: #000; }
.book-form .pill input:focus-visible + span { outline-color: #ff4f9b; }
.book-form .check { font-size: 13.5px; color: rgba(244, 241, 236, .9); }
.book-form .check input { accent-color: #ff4f9b; }
.book-form .privacy { font-size: 12.5px; color: rgba(244, 241, 236, .75); }
@media (max-width: 719px) { .book-form { background: #0b0b0b; padding: 22px 18px; } }

/* Phones: big, bold titles like the homepage. site.js shrinks a title only if its longest word
   wouldn't fit across the screen (e.g. "IMPROVEMENT"), so nothing breaks mid-word. */
@media (max-width: 719px) {
  .page-light .ph-title, .page-light .ph-has-media .ph-title { font-size: 68px; line-height: .9; }
  .page-light .prose h2 { font-size: 44px; line-height: .96; }
  .page-light .hub-sec > h2 { font-size: 50px; }
  .page-light .prose h3 { font-size: 25px; line-height: 1.15; }
  .page-light main .d-lg { font-size: 56px; }
  .page-light .tile-body strong { font-size: 24px; }
}

/* Booking page: a full-screen dark takeover (photo behind, headline left, form right) */
.book-takeover { min-height: 100svh; display: flex; align-items: center; padding-top: clamp(112px, 15vh, 150px); padding-bottom: clamp(48px, 8vh, 96px); }
.book-takeover .book-inner { width: 100%; }
.book-takeover .stack { gap: 20px; }
.book-takeover h1 .serif { color: #ff4f9b; }
.book-intro p { margin: 0 0 1em; max-width: 540px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: rgba(244, 241, 236, .82); }
.book-intro p:last-child { margin-bottom: 0; }
.book-intro strong { color: #fff; }
.book-phone:hover { color: #ff4f9b; }

/* Phones: less empty space between the page header and the content, and around headings */
@media (max-width: 719px) {
  .ph-inner { padding-bottom: 28px; }
  .page-body { padding-top: 28px; padding-bottom: 44px; }
  .jump + .page-body, .jump + .tiles, .jump + .press, .jump + .ba, .jump + .shop-sec { padding-top: 28px; }
  .tiles, .press, .contact, .shop-sec { padding-top: 28px; }
  .prose h2 { margin-top: 1.3em; margin-bottom: .45em; }
  .prose h3 { margin-top: 1.4em; }
  .hub-sec { padding-top: 28px; margin-top: 28px; }
  .prose-figure, .prose-video { margin: 1.4em 0; }
  .book-takeover { padding-top: 104px; }
}
/* The homepage booking section is full screen too, so every booking form looks the same */
.book-full { min-height: 100svh; display: flex; align-items: center; }
.book-full .book-inner { width: 100%; }

/* Scroll animations item by item (site.js adds .rv only when JavaScript runs and motion is allowed) */
.rv { opacity: 0; transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .95s cubic-bezier(.2, .7, .2, 1), clip-path 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.rv[data-fx="rise"] { transform: translateY(30px); }
.rv[data-fx="up"] { transform: translateY(16px); }
.rv[data-fx="wipe"] { opacity: 1; clip-path: inset(0 0 100% 0 round 20px); transform: scale(1.03); }
.rv[data-fx="left"] { transform: translateX(-28px); }
.rv[data-fx="right"] { transform: translateX(28px); }
.rv[data-fx="card"] { transform: translateY(36px) scale(.97); }
.rv[data-fx="pop"] { transform: scale(.93); }
.rv.in { opacity: 1; transform: none; }
.rv[data-fx="wipe"].in { clip-path: inset(0 0 0 0 round 20px); }
@media print { .rv { opacity: 1 !important; transform: none !important; clip-path: none !important; } }

/* ============================================================== Homepage (TKI 2026 requests) */
/* Physician-led hero: Dr. Kaga's photo, text on a dark fade at the left (bottom on phones) */
.hero-dr { align-items: stretch; }
.hero-dr .hero-inner { justify-content: flex-end; min-height: 100svh; }
.hero-dr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.hero-dr-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .78) 34%, rgba(0, 0, 0, .2) 62%, rgba(0, 0, 0, 0) 78%), linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 100%); }
.hero-dr-text { display: flex; flex-direction: column; gap: 18px; max-width: min(640px, 58vw); margin-bottom: clamp(8px, 4vh, 48px); }
.hero-dr .hero-title { font-size: clamp(44px, 6.4vw, 104px); line-height: .9; color: #fff; }
.hero-dr .hero-title .serif { color: #ff6fa8; text-transform: none; }
.hero-dr .hero-tag { font-size: clamp(22px, 2.2vw, 30px); }
.hero-dr .hero-intro { font-size: clamp(16px, 1.3vw, 19px); max-width: 520px; color: rgba(255, 255, 255, .88); }
.hero-creds { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; padding: 0; list-style: none; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.hero-creds li + li::before { content: '•'; margin: 0 12px; color: rgba(255, 255, 255, .45); }
.hero-story { display: inline-flex; align-items: center; gap: 12px; padding: 6px 8px; border: 0; background: none; color: #fff; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.hero-story .play-dot { width: 40px; height: 40px; }
.hero-story:hover span { text-decoration: underline; text-underline-offset: 4px; }
.hero-story:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 999px; }
@media (max-width: 860px) {
  .hero-dr-img { height: 62%; object-position: 70% 25%; }
  .hero-dr-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .25) 42%, #000 62%, #000 100%); }
  .hero-dr-text { max-width: none; margin-bottom: 8px; }
  .hero-dr .hero-title { font-size: clamp(40px, 11vw, 64px); }
  .hero-creds { flex-direction: column; gap: 6px; }
  .hero-creds li + li::before { content: none; }
}

/* Why TKI */
.sec-why .why-split { align-items: start; }
.why-intro { color: var(--ink-2) !important; font-weight: 600; }
.why-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; margin-top: clamp(36px, 6vh, 64px); }
.why-point { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid rgba(0, 0, 0, .07); }
.why-point span { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: #c40d5f; }
.why-point strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.why-point p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(10, 10, 10, .72); }

/* As Seen In */
.sec-press { padding-top: clamp(48px, 8vh, 88px); padding-bottom: clamp(48px, 8vh, 88px); background: radial-gradient(50% 80% at 100% 0%, rgba(247, 18, 120, .16), transparent 70%), #000; }
.press-head { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin-bottom: 30px; }
.press-title { margin: 0; font-size: clamp(26px, 3vw, 44px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.press-outlets { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0 0 26px; padding: 0; list-style: none; }
.press-outlets li { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; color: rgba(244, 241, 236, .82); }
.press-link { color: #ff6fa8; }

/* Start Here */
.sec-start { background: radial-gradient(55% 80% at 90% 0%, rgba(247, 18, 120, .25), transparent 70%), #000; }
.start-inner { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
.start-inner .serif { color: #ff6fa8; }

/* Service cards: link to the treatment page */
a.inj-card { color: #fff; }
a.inj-card:hover { color: #fff; }
.inj-cta { margin-top: 6px; font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff !important; }
.inj-cta i { font-style: normal; display: inline-block; transition: transform .3s; }
a.inj-card:hover .inj-cta i { transform: translateX(4px); }
a.inj-card:focus-visible { outline: 2px solid #c40d5f; outline-offset: 3px; }
.tx-bottom .btn-row { gap: 18px; }
/* Phones: Dr. Kaga's photo on top, the text below it on black (never over her face) */
@media (max-width: 860px) {
  .hero-dr { display: block; min-height: 0; }
  .hero-dr-img { position: relative; display: block; height: 60svh; object-position: 70% 18%; }
  .hero-dr-shade { inset: 0 0 auto 0; height: 60svh; background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 62%, #000 100%); }
  .hero-dr .hero-inner { min-height: 0; padding-top: 0; margin-top: -56px; }
}

/* Main menu: white with black text (like the old site), keeping the grouped layout. The menu
   button stays on top and morphs from three lines into an X, and back. */
.menu { z-index: 55; background: #fff; color: var(--ink-2); padding-top: 112px; }
.menu:not([hidden]) { animation: menu-in .35s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } }
.menu-title { color: var(--ink-2); }
.menu-items { color: rgba(10, 10, 10, .66); }
.menu-items a:hover, .menu-title:hover { color: #c40d5f; }
.menu-items a:focus-visible, .menu-title:focus-visible { outline: 2px solid #c40d5f; outline-offset: 3px; }
.menu-close { display: none; }
.menu-open .nav { mix-blend-mode: normal; color: var(--ink-2); background: #fff; border-bottom-color: rgba(0, 0, 0, .06); }
.menu-open .nav-logo img { filter: none; }
.menu-open .nav-book, .menu-open .nav-menu { border-color: rgba(0, 0, 0, .55); }
.menu-open .nav-book:hover { background: var(--ink-2); color: #fff; }
.menu-open .nav a:focus-visible, .menu-open .nav button:focus-visible { outline-color: var(--ink-2); }
.nav-menu span { position: relative; width: 18px; height: 1.5px; box-shadow: none; transition: background-color .2s .1s; }
.nav-menu span::before, .nav-menu span::after { content: ''; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: top .25s var(--ease) .15s, transform .3s var(--ease); }
.nav-menu span::before { top: -6px; }
.nav-menu span::after { top: 6px; }
.nav-menu[aria-expanded="true"] span { background-color: transparent; transition-delay: 0s; }
.nav-menu[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); transition: top .25s var(--ease), transform .3s var(--ease) .2s; }
.nav-menu[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); transition: top .25s var(--ease), transform .3s var(--ease) .2s; }
@media (prefers-reduced-motion: reduce) {
  .menu:not([hidden]) { animation: none; }
  .nav-menu span, .nav-menu span::before, .nav-menu span::after { transition: none; }
}

/* ---- Appointment form in steps (one card; same on phones and desktop) */
.book-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.book-step-grid .full { grid-column: 1 / -1; }
.book-step-title { margin: 0 0 16px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; color: #fff; }
.book-step-title .serif { color: #ff4f9b; text-transform: none; }
.book-step-title:focus { outline: none; }
.book-optional { font-size: .55em; font-weight: 600; letter-spacing: .08em; color: rgba(244, 241, 236, .6); vertical-align: middle; }
.book-step + .book-step { margin-top: 18px; }
.book-form.stepped .book-step + .book-step { margin-top: 0; }
.book-step.enter-fwd { animation: step-in-fwd .45s cubic-bezier(.2, .8, .2, 1) both; }
.book-step.enter-back { animation: step-in-back .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes step-in-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-28px); } }

.book-progress { display: flex; flex-direction: column; gap: 10px; }
.book-progress-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.book-progress-bar i { display: block; height: 100%; width: calc(var(--p, .25) * 100%); border-radius: inherit; background: linear-gradient(90deg, #c40d5f, #ff4f9b); box-shadow: 0 0 14px rgba(255, 79, 155, .85); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.book-progress-steps { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 0; list-style: none; }
.book-progress-steps li { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 236, .45); transition: color .3s; }
.book-progress-steps li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background .3s, box-shadow .3s; }
.book-progress-steps li.done { color: rgba(255, 140, 190, .9); }
.book-progress-steps li.done::before { background: #ff4f9b; }
.book-progress-steps li.on { color: #fff; }
.book-progress-steps li.on::before { background: #ff4f9b; animation: step-glow 1.8s ease-in-out infinite; }
@keyframes step-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 155, .7); } 50% { box-shadow: 0 0 0 7px rgba(255, 79, 155, 0), 0 0 14px rgba(255, 79, 155, .9); } }
.book-progress-label { margin: 0; font-size: 12px; color: rgba(244, 241, 236, .62); }
@media (max-width: 420px) { .book-progress-steps li { font-size: 9.5px; letter-spacing: .1em; gap: 5px; } }

.book-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.book-nav .submit { margin-left: auto; min-width: 170px; padding: 17px 30px; transition: background .25s, color .25s, box-shadow .3s; }
.book-nav .submit:hover, .book-nav .submit:focus-visible { box-shadow: 0 0 26px rgba(255, 79, 155, .55); }
.book-nav .submit.is-final { background: #ff4f9b; color: #000; animation: submit-glow 2.4s ease-in-out infinite; }
.book-nav .submit.is-final:hover { background: #fff; }
@keyframes submit-glow { 0%, 100% { box-shadow: 0 0 0 rgba(255, 79, 155, 0); } 50% { box-shadow: 0 0 28px rgba(255, 79, 155, .7); } }
.book-back { padding: 12px 4px; border: 0; background: none; color: rgba(244, 241, 236, .85); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.book-back:hover { color: #ff4f9b; }
.book-back:focus-visible { outline: 2px solid #ff4f9b; outline-offset: 3px; border-radius: 6px; }

/* Sent: the steps give way to a glowing thank-you */
.book-form.is-sent .book-step, .book-form.is-sent .book-nav, .book-form.is-sent .book-progress { display: none; }
.book-form.is-sent .form-status { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 0 6px; font-size: 18px; line-height: 1.5; color: #fff; outline: none; }
.book-form.is-sent .form-status::before { content: '✓'; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #ff4f9b; color: #000; font-size: 26px; font-weight: 800; box-shadow: 0 0 30px rgba(255, 79, 155, .7); }
@media (prefers-reduced-motion: reduce) {
  .book-step.enter-fwd, .book-step.enter-back, .book-progress-steps li.on::before, .book-nav .submit.is-final { animation: none; }
  .book-progress-bar i { transition: none; }
}
.contact-note { margin: 0; font-size: 13px; color: var(--gold); }
.ph-where { margin: 0; font-size: 13px; letter-spacing: .02em; color: var(--gold); }
.book-only-note { margin: 2px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(201, 169, 106, .45); background: rgba(201, 169, 106, .1); font-size: 13px; line-height: 1.5; color: rgba(244, 241, 236, .9); }
.book-draft-notice { margin: 2px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 79, 155, .35); background: rgba(255, 79, 155, .08); font-size: 13px; line-height: 1.5; color: rgba(244, 241, 236, .9); }

/* Menu: larger, less plain. Each section gets a pink accent under its title; on phones the links
   sit in two columns with a line down the center, so the menu is half as long. */
.menu-title { display: block; }
.menu-title::after { content: ''; display: block; width: 30px; height: 3px; margin-top: 12px; border-radius: 3px; background: #c40d5f; transition: width .3s var(--ease); }
.menu-title:hover::after { width: 54px; }
.menu-items { font-size: 15.5px; font-weight: 500; color: rgba(10, 10, 10, .74); }
.menu-items a { padding: 3px 0; }
@media (max-width: 719px) {
  .menu { padding: 100px 20px 48px; }
  .menu-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .menu-group { gap: 16px; padding-top: 26px; border-top: 1px solid rgba(10, 10, 10, .1); }
  .menu-group:first-child { padding-top: 0; border-top: 0; }
  .menu-title { font-size: 34px; }
  .menu-items { display: block; columns: 2; column-gap: 34px; column-rule: 2px solid rgba(196, 13, 95, .55); font-size: 17px; }
  .menu-items a { display: block; break-inside: avoid; padding: 7px 0; line-height: 1.3; }
}

/* ---- Promo bar: bright pink, fixed above the menu on every page */
:root { --bar-h: 0px; }
body.has-promo { --bar-h: 40px; }
.promo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 65; height: var(--bar-h); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; background: #ff4f9b; color: #0a0a0a; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.promo-bar:hover { background: #ff6fae; color: #0a0a0a; }
.promo-bar:focus-visible { outline: 3px solid #0a0a0a; outline-offset: -4px; }
.promo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.promo-cta { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #0a0a0a; color: #fff; font-size: 11px; letter-spacing: .12em; }
.promo-cta i { font-style: normal; transition: transform .3s; }
.promo-bar:hover .promo-cta i { transform: translateX(3px); }
.promo-cta-short { display: none; }
.promo-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #0a0a0a; animation: promo-pulse 1.8s infinite; }
@keyframes promo-pulse { 0% { box-shadow: 0 0 0 0 rgba(10, 10, 10, .45); } 70% { box-shadow: 0 0 0 8px rgba(10, 10, 10, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 10, 10, 0); } }
@media (max-width: 520px) {
  .promo-bar { gap: 8px; padding: 0 12px; font-size: 10.5px; letter-spacing: .06em; }
  .promo-cta { padding: 5px 10px; font-size: 10.5px; }
  .promo-cta-long { display: none; }
  .promo-cta-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .promo-dot { animation: none; } }
/* Everything that sits at the top makes room for the bar */
body.has-promo .nav { top: var(--bar-h); }
body.has-promo main { padding-top: var(--bar-h); }
body.has-promo .menu { padding-top: calc(112px + var(--bar-h)); }
.page-light .jump { top: calc(88px + var(--bar-h)); }
.aside { top: calc(96px + var(--bar-h)); }
.page-light .hub-sec, .page-light .ba, .page-light .shop-sec { scroll-margin-top: calc(160px + var(--bar-h)); }
#specials { scroll-margin-top: var(--bar-h); }
@media (max-width: 719px) { body.has-promo .menu { padding-top: calc(100px + var(--bar-h)); } }

/* ---- Instagram button next to Book */
.nav-ig { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .7); color: inherit; }
.nav-ig:hover { background: #fff; color: #000; }
.page-light .nav-ig, .menu-open .nav-ig { border-color: rgba(0, 0, 0, .55); }
.page-light .nav-ig:hover, .menu-open .nav-ig:hover { background: var(--ink-2); color: #fff; }
@media (max-width: 719px) {
  .nav-actions { gap: 8px; }
  .nav-ig { width: 40px; height: 40px; }
}

/* ---- "As Seen In" logo strip: white logos drifting slowly across */
.sec-press { padding-left: 0; padding-right: 0; }
/* Magazine covers montage: full width; on phones it scrolls sideways at a readable height. */
.press-montage { display: block; margin: clamp(20px, 3vh, 36px) 0 clamp(8px, 2vh, 20px); padding: 0 var(--pad); }
.press-montage img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .press-montage { overflow-x: auto; scrollbar-width: none; } .press-montage::-webkit-scrollbar { display: none; } .press-montage img { width: auto; max-width: none; height: 230px; } }
.press-head { margin-bottom: 26px; }
.press-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.press-track { flex: none; display: flex; align-items: center; gap: clamp(44px, 5vw, 76px); margin: 0; padding: 6px clamp(22px, 2.5vw, 38px); list-style: none; animation: press-scroll 70s linear infinite; }
.press-marquee.paused .press-track { animation-play-state: paused; }
@keyframes press-scroll { to { transform: translateX(-100%); } }
.press-track li { flex: none; display: grid; place-items: center; height: 44px; }
.press-track img { display: block; height: 26px; width: auto; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1); opacity: .82; transition: opacity .3s; }
.press-track li:hover img { opacity: 1; }
.press-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.press-pause { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: rgba(244, 241, 236, .8); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.press-pause:hover { border-color: #ff4f9b; color: #fff; }
.press-pause:focus-visible { outline: 2px solid #ff4f9b; outline-offset: 3px; }
@media (max-width: 719px) { .press-track img { height: 21px; max-width: 130px; } .press-track { animation-duration: 55s; } }
@media (prefers-reduced-motion: reduce) {
  .press-marquee { -webkit-mask-image: none; mask-image: none; }
  .press-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 22px; }
  .press-track[aria-hidden="true"], .press-pause { display: none; }
}
.press-track img.lg { height: 36px; max-width: 190px; }
@media (max-width: 719px) { .press-track img.lg { height: 29px; max-width: 150px; } }
/* Staff login (footer): goes to the staff portal (login with MFA) */
.footer-staff { display: inline-flex; align-items: center; gap: 6px; }
.footer-staff svg { opacity: .8; }
/* "As Seen In": logos at double size (Darren 2026-10-15) */
.press-track { gap: clamp(64px, 6.5vw, 116px); }
.press-track li { height: 88px; }
.press-track img { height: 52px; max-width: 340px; }
.press-track img.lg { height: 72px; max-width: 380px; }
@media (max-width: 719px) {
  .press-track li { height: 64px; }
  .press-track img { height: 40px; max-width: 240px; }
  .press-track img.lg { height: 54px; max-width: 280px; }
}
/* Pause / play for the looping body-card videos (WCAG 2.2.2) */
.tx-top { align-items: center; gap: 14px; }
.tx-top > span:first-child { margin-right: auto; }
.loop-pause { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .35); cursor: pointer; }
.loop-pause::before, .loop-pause::after { content: ""; position: absolute; top: 11px; width: 3px; height: 11px; border-radius: 1px; background: #fff; }
.loop-pause::before { left: 12px; }
.loop-pause::after { right: 12px; }
.loop-pause.is-paused::before { left: 13px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.loop-pause.is-paused::after { display: none; }
.loop-pause:hover { border-color: #ff4f9b; }
.loop-pause:focus-visible { outline: 2px solid #ff4f9b; outline-offset: 3px; }
/* Small pink labels over the specials glow: the lighter accent pink keeps them at 4.5:1 (WCAG 1.4.3) */
.sp-eyebrow, .sp-window, .sp-details .sp-dates, .sp-fine-block summary { color: #ff4f9b; }
/* Current Offers page: the specials block stays dark on the light theme, so its text stays light */
.page-light .sec-specials { color: var(--paper); }
body.page-light { --gold-text: #655631; }
/* ---- TKI Insider (blog): post page, blog home, topic pages ---- */
.post-head .ph-inner { gap: clamp(20px, 3vh, 32px); }
.post-intro { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.post-topic { align-self: flex-start; text-decoration: none; }
.post-topic:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-title { font-size: clamp(34px, 4.6vw, 72px); line-height: .95; }
.post-meta { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(244, 241, 236, .72); }
.post-hero { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 8; background: #111; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding-top: clamp(40px, 6vh, 72px); }
.post-body .prose h2 { scroll-margin-top: calc(110px + var(--bar-h)); }
.post-aside { gap: 24px; }
.toc { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1); }
.toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: toc; }
.toc li { counter-increment: toc; display: grid; grid-template-columns: 26px 1fr; font-size: 14px; line-height: 1.4; }
.toc li::before { content: counter(toc, decimal-leading-zero); font-size: 11px; font-weight: 700; color: #ff4f9b; padding-top: 2px; }
.toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(56px, 8vh, 104px); max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 4vh, 48px); }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.post-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #111; border: 1px solid rgba(255, 255, 255, .06); transition: transform .45s var(--ease), border-color .3s; }
.post-card:hover { transform: translateY(-4px); border-color: rgba(247, 18, 120, .5); }
.post-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #161616; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.post-card-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.post-card-text { font-size: 14px; line-height: 1.55; color: rgba(244, 241, 236, .66); }
.post-card-meta { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 600; color: rgba(244, 241, 236, .55); }
.post-card.featured { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.post-card.featured .post-card-media { aspect-ratio: auto; min-height: 340px; }
.post-card.featured .post-card-body { justify-content: center; gap: 14px; padding: clamp(26px, 3.5vw, 52px); }
.post-card.featured .post-card-title { font-size: clamp(28px, 3vw, 46px); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.post-card.featured .post-card-text { font-size: 16px; }
.more-posts { padding-top: clamp(48px, 7vh, 88px); border-top: 1px solid rgba(255, 255, 255, .08); }
.more-posts .tiles-head { margin-bottom: 0; }
@media (max-width: 999px) {
  .post-card.featured { grid-template-columns: minmax(0, 1fr); }
  .post-card.featured .post-card-media { min-height: 0; aspect-ratio: 16 / 10; }
  .post-aside { position: static; }
  .post-aside .toc { display: none; }
}
@media (max-width: 719px) {
  .post-hero { aspect-ratio: 4 / 3; border-radius: 20px; }
  .page-light main .post-title { font-size: 40px; }
}
/* Light theme (cream pages) */
.page-light .post-meta { color: rgba(10, 10, 10, .66); }
.page-light .post-hero, .page-light .post-card-media { background: #e9e4dc; }
.page-light .toc { background: #fff; border-color: rgba(0, 0, 0, .08); }
.page-light .toc li::before { color: var(--pink-text); }
.page-light .toc a { color: var(--ink-2); }
.page-light .post-card { background: #fff; border-color: rgba(0, 0, 0, .07); }
.page-light .post-card:hover { border-color: rgba(196, 13, 95, .45); }
.page-light .post-card-title { color: var(--ink-2); }
.page-light .post-card-text { color: rgba(10, 10, 10, .7); }
.page-light .post-card-meta { color: rgba(10, 10, 10, .6); }
.page-light .more-posts { border-top-color: rgba(0, 0, 0, .1); }
/* The booking section keeps its dark photo background on cream pages (end of each post). */
.page-light .sec-book { color: var(--paper); }
.page-light .sec-book .stack .eyebrow { color: var(--gold); }
/* Dark pages (homepage, booking page): the see-through "blend" menu washed out over photos and
   the logo strip. A solid dark bar with white text instead, the same while it floats on scroll
   (the cream inner pages keep their light bar; the open menu stays white). */
html:not(.menu-open) body:not(.page-light) .nav { mix-blend-mode: normal; color: #fff; background: rgba(8, 8, 8, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
html:not(.menu-open) body:not(.page-light) .nav-links a { opacity: .9; }
body:not(.page-light) #specials { scroll-margin-top: calc(var(--bar-h) + 88px); }
/* Homepage hero under the solid menu bar: the photo starts below the bar, so Dr. Kaga's head
   is never hidden behind it. */
.hero-dr { --nav-h: 88px; }
.hero-dr-img { top: var(--nav-h); height: calc(100% - var(--nav-h)); object-position: 72% 12%; }
@media (max-width: 860px) {
  .hero-dr { padding-top: var(--nav-h); }
  .hero-dr-img { top: 0; height: 60svh; }
  .hero-dr-shade { top: var(--nav-h); }
}
/* Hero strip: #BetterNotDifferent™ and the locations, larger and brighter (Darren 2026-10-15) */
.hero-dr .hero-strip { font-size: clamp(13px, 1.05vw, 16px); letter-spacing: .14em; color: rgba(255, 255, 255, .9); font-weight: 600; padding-top: 20px; }
.hero-dr .hero-strip .dot::before { width: 9px; height: 9px; }
@media (max-width: 860px) {
  .hero-dr .hero-strip { font-size: 13px; letter-spacing: .12em; }
  .hero-dr .hero-strip .hide-mobile:not(.scroll-cue) { display: inline !important; }
  .hero-dr .hero-strip .scroll-cue { display: none; }
}

/* ---- Booking overlay (every Book / consultation / claim-offer button; site.js) ----
   "Frosted glass" (Darren's pick, 2026-10-15): the page blurs behind a dark layer, the form
   floats on a glowing card and two pink glows drift slowly around the screen. */
html:has(.book-modal[open]) { overflow: hidden; }
.book-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.book-modal::backdrop { background: rgba(0, 0, 0, .7); }
.bm-wrap { position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(76px, 10vh, 112px) var(--pad) clamp(32px, 6vh, 64px); }
.bm-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; width: 100%; max-width: 1220px; }
.bm-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bm-eyebrow { color: var(--gold); }
.bm-title { font-size: clamp(40px, 4.6vw, 72px); line-height: .92; color: #fff; }
.bm-title .serif { color: #ff4f9b; text-transform: none; }
.bm-intro { margin: 0; max-width: 460px; font-size: 16px; line-height: 1.6; color: rgba(244, 241, 236, .78); }
.bm-phone { align-self: flex-start; font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; letter-spacing: -.01em; color: #fff; }
.bm-phone:hover { color: #ff4f9b; }
.bm-close { position: fixed; top: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); z-index: 3; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .45); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
.bm-close:hover { background: #fff; color: #000; }
.bm-close:focus-visible { outline: 2px solid #ff4f9b; outline-offset: 3px; }
.book-modal .book-form { margin: 0; }

/* The claimed special, next to the form */
.bm-offer { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(247, 18, 120, .5); box-shadow: 0 0 40px rgba(247, 18, 120, .12); }
.bm-offer[hidden] { display: none; }
.bm-offer-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: #111; }
.bm-offer-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bm-offer-label { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #ff4f9b; }
.bm-offer-name { font-size: 22px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.bm-offer-tag { font-size: 18px; color: #ff6fa8; }
.bm-offer-what { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(244, 241, 236, .8); }
.bm-offer .sp-price strong { font-size: 26px; color: #fff; }
.bm-offer-dates { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #ff4f9b; }
.bm-offer-fine { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.5; color: rgba(244, 241, 236, .62); }
.has-offer .bm-intro { font-size: 15px; }


/* Frosted glass */
.book-modal[data-style="glass"]::backdrop { background: rgba(0, 0, 0, .58); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.book-modal[data-style="glass"] .bm-grid { padding: clamp(24px, 3.2vw, 48px); border-radius: 34px; background: rgba(14, 11, 12, .74); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(247, 18, 120, .22), 0 0 90px rgba(247, 18, 120, .14); }
.book-modal[data-style="glass"] .book-form { background: rgba(0, 0, 0, .4); }


/* Entrances */
.book-modal.in { animation: bm-fade .35s var(--ease) both; }
.book-modal[data-style="glass"].in .bm-grid { animation: bm-rise .5s var(--ease) both; }
@keyframes bm-fade { from { opacity: 0; } }
@keyframes bm-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .book-modal.in, .book-modal.in .bm-grid { animation: none !important; } }

@media (max-width: 899px) {
  .bm-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bm-intro { display: none; }
  .has-offer .bm-intro { display: none; }
  .bm-title { font-size: 40px; }
  .book-modal[data-style="glass"] .bm-wrap { padding: 72px 12px 24px; }
  .book-modal[data-style="glass"] .bm-grid { padding: 22px 16px; border-radius: 26px; }
  .bm-offer { grid-template-columns: 96px minmax(0, 1fr); }
}

/* Booking page on large screens: text and form sit together in the middle (the space goes to the
   sides instead of a wide gap between them). */
@media (min-width: 1000px) {
  .book-takeover .book-inner { max-width: 1280px; margin-inline: auto; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 4vw, 72px); align-items: center; }
}
@media (max-width: 899px) { .book-modal .book-form-title, .book-modal .book-form-sub { display: none; } }
/* Frosted glass + two large pink glows drifting slowly around the screen (Darren 2026-10-15).
   Each glow follows its own long, uneven path and timing, so they never move in step. */
.book-modal[data-style="glass"] .bm-wrap { z-index: 1; }
.book-modal[data-style="glass"]::before, .book-modal[data-style="glass"]::after {
  content: ''; position: fixed; z-index: 0; top: 0; left: 0; width: 62vmax; height: 62vmax; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen; will-change: transform;
  background: radial-gradient(circle at 50% 50%, rgba(247, 18, 120, .42) 0%, rgba(247, 18, 120, .18) 34%, rgba(247, 18, 120, 0) 66%);
}
.book-modal[data-style="glass"]::before { animation: bm-glow-a 46s ease-in-out infinite alternate; }
.book-modal[data-style="glass"]::after { width: 54vmax; height: 54vmax; opacity: .85; animation: bm-glow-b 58s ease-in-out infinite alternate; }
@keyframes bm-glow-a {
  0% { transform: translate(-22vmax, -24vmax); }
  18% { transform: translate(18vw, -14vmax); }
  37% { transform: translate(42vw, 8vh); }
  55% { transform: translate(8vw, 28vh); }
  74% { transform: translate(-16vmax, 6vh); }
  100% { transform: translate(26vw, -20vmax); }
}
@keyframes bm-glow-b {
  0% { transform: translate(62vw, 48vh); }
  21% { transform: translate(34vw, 64vh); }
  43% { transform: translate(70vw, 18vh); }
  62% { transform: translate(48vw, 2vh); }
  81% { transform: translate(20vw, 40vh); }
  100% { transform: translate(58vw, 70vh); }
}
@media (prefers-reduced-motion: reduce) {
  .book-modal[data-style="glass"]::before { animation: none; transform: translate(-14vmax, -18vmax); }
  .book-modal[data-style="glass"]::after { animation: none; transform: translate(58vw, 52vh); }
}
.book-modal[data-style="glass"] .bm-grid { background: rgba(14, 11, 12, .6); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }

/* ---- Desktop menu dropdowns (hover or keyboard focus); phones use the full menu ---- */
.nav-links > li { position: relative; }
.has-drop > a::after { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .25s var(--ease); }
.has-drop:hover > a::after, .has-drop:focus-within > a::after { transform: translateY(2px) rotate(225deg); }
.nav-drop { position: absolute; top: 100%; left: 50%; z-index: 5; padding-top: 30px; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s var(--ease) .12s, transform .25s var(--ease) .12s, visibility 0s linear .37s; pointer-events: none; text-transform: none; letter-spacing: 0; }
.has-drop:hover .nav-drop, .has-drop:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; pointer-events: auto; }
.nav-drop-inner { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; border-radius: 20px; background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.nav-drop.cols-1 .nav-drop-inner { width: 280px; }
.nav-drop.cols-2 .nav-drop-inner { width: 500px; }
.nav-drop.cols-3 .nav-drop-inner { width: 700px; }
.nav-drop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px 18px; }
.nav-drop.cols-2 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-drop.cols-3 ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-links .nav-drop a { display: block; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; opacity: 1; text-decoration: none; }
.nav-links .nav-drop a:hover, .nav-links .nav-drop a:focus-visible { background: rgba(247, 18, 120, .16); color: #fff; text-decoration: none; }
.nav-links .nav-drop .nav-drop-all { padding: 0 10px 10px; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ff4f9b; }
.nav-links .nav-drop .nav-drop-all:hover { background: none; color: #fff; }
/* Cream inner pages: white panel, black text */
.page-light .nav-drop-inner { background: #fff; color: var(--ink-2); border-color: rgba(0, 0, 0, .08); box-shadow: 0 24px 60px rgba(10, 10, 10, .14); }
.page-light .nav-links .nav-drop a:hover, .page-light .nav-links .nav-drop a:focus-visible { background: rgba(196, 13, 95, .08); color: var(--ink-2); }
.page-light .nav-links .nav-drop .nav-drop-all { color: var(--pink-text); border-bottom-color: rgba(0, 0, 0, .08); }
.page-light .nav-links .nav-drop .nav-drop-all:hover { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .nav-drop { transition: none; transform: translate(-50%, 0); } }

/* ---- Treatments and shop products: "editorial rows" (Darren, 2026-10-15) ----
   One item per large white panel, centered (not full width), photo and text side by side,
   alternating sides; so the practice reads less like a catalog. */
.tiles > .tiles-head, .shop-head { max-width: 1120px; margin-inline: auto; }

.tile-grid, .product-grid { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 40px); max-width: 1120px; margin-inline: auto; }
.tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(320px, 34vw, 460px); border-radius: 30px; background: #fff; border: 1px solid rgba(0, 0, 0, .05); box-shadow: 0 30px 70px rgba(10, 10, 10, .06); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 36px 80px rgba(10, 10, 10, .1); }
.tile-media { aspect-ratio: auto; height: 100%; }
.tile:nth-child(even) .tile-media { order: 2; }
.tile-body { justify-content: center; gap: 16px; padding: clamp(28px, 4.5vw, 68px); }
.tile-body strong { font-size: clamp(28px, 2.8vw, 46px); line-height: .98; letter-spacing: -.035em; }
.tile-body > span:not(.tile-cta) { font-size: 16.5px; line-height: 1.65; max-width: 44ch; }
.tile-cta { margin-top: 10px; padding-top: 0; font-size: 12px; }
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto 1fr; gap: 0; padding: 0; min-height: clamp(300px, 30vw, 400px); border-radius: 30px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, .05); box-shadow: 0 30px 70px rgba(10, 10, 10, .06); }
.product-media { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; background: #faf8f5; }
.product-media img { width: 70%; height: 80%; }
.product h3, .product p { grid-column: 2; padding-inline: clamp(28px, 4.5vw, 68px); }
.product h3 { grid-row: 1; align-self: end; margin: 0; font-size: clamp(24px, 2.4vw, 38px); line-height: 1; letter-spacing: -.03em; }
.product p { grid-row: 2; padding-top: 16px; font-size: 16.5px; line-height: 1.65; max-width: 48ch; }
.product:nth-child(even) .product-media { grid-column: 2; }
.product:nth-child(even) h3, .product:nth-child(even) p { grid-column: 1; }
@media (max-width: 760px) {
  .tile { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tile-media { aspect-ratio: 4 / 3; height: auto; order: 0 !important; }
  .tile-body { padding: 26px 24px 28px; }
  .product { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
  .product-media, .product:nth-child(even) .product-media { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
  .product h3, .product p, .product:nth-child(even) h3, .product:nth-child(even) p { grid-column: 1; grid-row: auto; padding-inline: 24px; }
  .product h3 { padding-top: 24px; }
  .product p { padding-bottom: 26px; }
}
/* Video hero (back on the homepage, 2026-10-15): the same larger strip as the photo hero. */
.hero .hero-strip { font-size: clamp(13px, 1.05vw, 16px); letter-spacing: .14em; color: rgba(255, 255, 255, .9); font-weight: 600; padding-top: 20px; }
.hero .hero-strip .dot::before { width: 9px; height: 9px; }
@media (max-width: 860px) {
  .hero .hero-strip { font-size: 13px; letter-spacing: .12em; }
  .hero .hero-strip .hide-mobile:not(.scroll-cue) { display: inline !important; }
  .hero .hero-strip .scroll-cue { display: none; }
}
/* New TKI logo (2026-10-15): the "TKi" mark with THE KAGA INSTITUTE underneath. Taller than the
   old wide logo, so the menu bar trades a little padding for logo height (bar stays 88px). */
.nav { padding-top: 16px; padding-bottom: 16px; }
.nav-logo { display: block; line-height: 0; }
.nav-logo img { height: 56px; width: auto; filter: brightness(0) invert(1); }
.page-light .nav-logo img, .menu-open .nav-logo img { filter: none; }
.footer-logo { height: 110px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); }
@media (max-width: 719px) { .nav-logo img { height: 50px; } .nav { padding-top: 19px; padding-bottom: 19px; } .footer-logo { height: 92px; } }

/* ---- Full menu: Contact first (phone, social, locations), then the menu groups ---- */
.menu-contact { display: flex; flex-direction: column; gap: 16px; padding-bottom: 30px; margin-bottom: 36px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.menu-contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.menu-phone { font-size: clamp(17px, 1.8vw, 22px); color: rgba(10, 10, 10, .7); }
.menu-phone b { font-weight: 800; color: var(--ink-2); letter-spacing: .01em; }
.menu-phone:hover b { color: #c40d5f; }
.menu-social { display: flex; flex-wrap: wrap; gap: 10px; }
.menu-social a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .22); color: var(--ink-2); font-size: 13px; font-weight: 700; }
.menu-social a:not(.has-handle) { padding: 0; width: 44px; }
.menu-social a:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.menu-locations { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; background: #f4f1ec; color: var(--ink-2); font-size: 14px; }
.menu-locations b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.menu-locations span { color: rgba(10, 10, 10, .62); }
.menu-locations i { font-style: normal; color: #c40d5f; transition: transform .25s var(--ease); }
.menu-locations:hover i { transform: translateX(3px); }
.menu-social a:focus-visible, .menu-locations:focus-visible, .menu-phone:focus-visible { outline: 2px solid #c40d5f; outline-offset: 3px; }
@media (max-width: 719px) {
  .menu-contact { gap: 14px; padding-bottom: 24px; margin-bottom: 28px; }
  .menu-contact-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .menu-phone { font-size: 19px; }
}

/* ---- Page header: wide photo banner, title on the left (like the old site) ---- */
.ph-banner { --ph-top: 89px; position: relative; }
.ph-card { display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 36px); }
.ph-banner .ph-text { gap: 20px; }
.ph-photo { margin: 0; overflow: hidden; background: #111; }
.ph-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.ph-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; }

/* White text on the photo */
.page-light .ph-banner:not(.ph-nophoto) .ph-title { color: #fff; }
.page-light .ph-banner:not(.ph-nophoto) .ph-title .serif { color: #ff4f9b; }
.page-light .ph-banner:not(.ph-nophoto) .ph-lede { color: rgba(255, 255, 255, .88); }
.page-light .ph-banner:not(.ph-nophoto) .ph-lede a { color: #ff8fbf; }
.page-light .ph-banner:not(.ph-nophoto) .eyebrow { color: var(--gold); }
.page-light .ph-banner:not(.ph-nophoto) .btn-ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.page-light .ph-banner:not(.ph-nophoto) .btn-ghost:hover { background: #fff; color: #000; }
.page-light .ph-banner:not(.ph-nophoto) .crumbs ol { color: rgba(255, 255, 255, .7); }
.page-light .ph-banner:not(.ph-nophoto) .crumbs a:hover { color: #fff; }
.page-light .ph-banner:not(.ph-nophoto) .crumbs [aria-current] { color: var(--gold); }

/* Photo under the menu, dark fade from the left, title on the left, breadcrumb in a black
   bar along the bottom. */
.ph-banner:not(.ph-nophoto) .ph-photo { position: absolute; left: 0; right: 0; top: var(--ph-top); bottom: 0; }
.ph-banner:not(.ph-nophoto) .ph-photo::after { background: linear-gradient(90deg, rgba(8, 8, 8, .84) 0%, rgba(8, 8, 8, .62) 34%, rgba(8, 8, 8, .12) 68%, rgba(8, 8, 8, 0) 100%); }
.ph-banner:not(.ph-nophoto) .ph-inner { position: relative; min-height: clamp(560px, 70vh, 680px); justify-content: center; padding-top: calc(var(--ph-top) + clamp(40px, 6vh, 72px)); padding-bottom: calc(54px + clamp(40px, 6vh, 72px)); }
.ph-banner:not(.ph-nophoto) .ph-text { max-width: 640px; }
.ph-banner:not(.ph-nophoto) .ph-title { font-size: clamp(40px, 5.2vw, 82px); }
.ph-banner:not(.ph-nophoto) .crumbs { position: absolute; left: 0; right: 0; bottom: 0; padding: 19px var(--pad); background: #111; }

@media (max-width: 899px) {
  .ph-banner:not(.ph-nophoto) .ph-photo::after { background: linear-gradient(180deg, rgba(8, 8, 8, .35) 0%, rgba(8, 8, 8, .55) 45%, rgba(8, 8, 8, .86) 100%); }
  .ph-banner:not(.ph-nophoto) .ph-inner { min-height: 0; justify-content: flex-end; padding-top: calc(var(--ph-top) + 150px); }
}
.ph-banner:not(.ph-nophoto) .eyebrow, .ph-banner:not(.ph-nophoto) .crumbs { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

/* ---- Homepage hero: white TKI logo on black until the video's first frame is ready ---- */
.hero-loading { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 28vh; pointer-events: none; transition: opacity .6s ease; }
.hero-loading img { width: clamp(110px, 12vw, 190px); height: auto; filter: brightness(0) invert(1); }
.hero.video-ready .hero-loading { opacity: 0; }
@media (max-width: 899px) {
  .hero-loading { place-items: start center; padding: calc(var(--bar-h, 0px) + 120px) 0 0; }
  .hero-loading img { width: 116px; }
}

/* ---- Menu bar with Concierge Medicine (8 items): one line per label; narrower screens drop the
   phone number (it's in the full menu and the booking overlay) and tighten the spacing. ---- */
.nav-links > li > a { white-space: nowrap; }
@media (min-width: 1180px) and (max-width: 1439px) {
  .nav-phone { display: none; }
  .nav-links { gap: clamp(12px, 1.25vw, 20px); letter-spacing: .1em; }
}

/* ---- ® ™ in display text: small superscript (see marks() in render.js) ---- */
sup.mk { font-size: .42em; line-height: 0; vertical-align: top; position: relative; top: .32em; margin-left: .04em; font-style: normal; letter-spacing: 0; }

/* ---- Press: gallery wall (photo + publication; headline slides up on hover) ---- */
.pw-item { position: relative; display: block; overflow: hidden; isolation: isolate; background: #111; color: #fff; text-decoration: none; }
.pw-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1.1s var(--ease); }
.pw-item:hover img, .pw-item:focus-visible img { transform: scale(1.05); }
.pw-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 8, 0) 32%, rgba(8, 8, 8, .55) 60%, rgba(8, 8, 8, .92) 100%); transition: opacity .5s var(--ease); }
.pw-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 1.8vw, 26px); }
.pw-pub { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pw-title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: clamp(17px, 1.3vw, 21px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
.pw-cta { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff8fbf; }
.pw-item:focus-visible { outline: 3px solid #f71278; outline-offset: 3px; }



/* Edge to edge, square black-and-white photos; color and the headline on hover */
.press { padding-left: 0; padding-right: 0; background: #080808; }
.press-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.press-wall .pw-item { aspect-ratio: 1; }
.press-wall .pw-shade { background: linear-gradient(180deg, rgba(8, 8, 8, 0) 55%, rgba(8, 8, 8, .75) 100%); }
.press-wall .pw-title, .press-wall .pw-cta { max-height: 0; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease), max-height .4s var(--ease); }
.press-wall .pw-item:hover .pw-title, .press-wall .pw-item:focus-visible .pw-title,
.press-wall .pw-item:hover .pw-cta, .press-wall .pw-item:focus-visible .pw-cta { max-height: 8em; opacity: 1; transform: none; }
.press-wall .pw-item:hover .pw-shade, .press-wall .pw-item:focus-visible .pw-shade { background: linear-gradient(180deg, rgba(8, 8, 8, .15) 0%, rgba(8, 8, 8, .9) 100%); }
@media (hover: none) {
  .press-wall .pw-title, .press-wall .pw-cta { max-height: 8em; opacity: 1; transform: none; }
}

@media (max-width: 899px) {
}
.press .pw-item, .press .pw-item:hover, .press .pw-item:focus-visible { color: #fff; text-decoration: none; }
/* Many press images are screenshots of the article: a deeper fade keeps the headline clean. */
.pw-shade { background: linear-gradient(180deg, rgba(8, 8, 8, .04) 0%, rgba(8, 8, 8, .12) 34%, rgba(8, 8, 8, .8) 64%, rgba(8, 8, 8, .97) 100%); }
.press-wall .pw-item img { filter: grayscale(1) contrast(1.05); transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.press-wall .pw-item:hover img, .press-wall .pw-item:focus-visible img { filter: none; }

/* ---- Press magazine on top of the press page (built by pressMagazine() in site.js) ---- */
.press-mag { background: radial-gradient(120% 70% at 50% 0%, #2a1320 0%, #0b0b0b 62%); color: #fff; }
.mag { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 1180px; margin: 0 auto; }
.mag-tip { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .62); text-align: center; }
.mag-stage { width: 100%; perspective: 2800px; }
.mag-book { position: relative; width: min(100%, 1120px); margin: 0 auto; aspect-ratio: 3 / 2; transition: transform .9s var(--ease); }
.mag-book.is-start { transform: translateX(-25%); }
.mag-book.is-end { transform: translateX(25%); }
.mag-sheet { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(.3, .7, .2, 1); }
.mag-sheet.is-turned { transform: rotateY(-180deg); }
.mag-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #f7f3ec; cursor: pointer; box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .75); }
.mag-front { border-radius: 0 10px 10px 0; }
.mag-back { transform: rotateY(180deg); border-radius: 10px 0 0 10px; }
.mag-front::after, .mag-back::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.mag-front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, .07) 3.5%, rgba(0, 0, 0, 0) 9%); }
.mag-back::after { background: linear-gradient(270deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, .07) 3.5%, rgba(0, 0, 0, 0) 9%); }
.mag-page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6% 7% 5%; color: #141414; }
.mag-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4%; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .14); font-size: clamp(9px, .75vw, 11px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #6b5c34; }
.mag-art { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; color: inherit; text-decoration: none; cursor: pointer; }
.mag-photo { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 4px; background: #e7e1d7; }
.mag-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1s var(--ease); }
.mag-art:hover .mag-photo img, .mag-art:focus-visible .mag-photo img { transform: scale(1.04); }
.mag-pub { margin-top: 6px; font-size: clamp(9px, .8vw, 11px); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #c40d5f; }
.mag-title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-family: 'Instrument Serif', serif; font-size: clamp(19px, 2vw, 32px); line-height: 1.08; color: #111; }
.mag-read { align-self: flex-start; padding: 9px 14px; border-radius: 999px; background: #111; color: #fff; font-size: clamp(9px, .8vw, 11px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transition: background .25s; }
.mag-art:hover .mag-read, .mag-art:focus-visible .mag-read { background: #c40d5f; }
.mag-art:focus-visible { outline: 3px solid #f71278; outline-offset: 4px; }
.mag-foot { margin-top: 4%; font-size: 10px; letter-spacing: .16em; color: rgba(0, 0, 0, .45); text-align: right; }
.mag-back .mag-foot { text-align: left; }
.mag-cover { padding: 0; background: #0a0a0a; color: #fff; }
.mag-cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mag-cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 8, .55) 0%, rgba(8, 8, 8, 0) 30%, rgba(8, 8, 8, .25) 55%, rgba(8, 8, 8, .92) 100%); }
.mag-cover-top { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6% 7% 0; }
.mag-masthead { font-size: clamp(56px, 8.4vw, 140px); font-weight: 800; line-height: .82; letter-spacing: -.05em; text-transform: uppercase; }
.mag-issue { font-size: clamp(9px, .8vw, 11px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.mag-coverlines { position: relative; display: flex; flex-direction: column; gap: 12px; margin: auto 0 0; padding: 0 7% 5%; list-style: none; font-family: 'Instrument Serif', serif; font-size: clamp(15px, 1.35vw, 21px); line-height: 1.12; }
.mag-coverlines span { display: block; margin-bottom: 2px; font-family: inherit; font-size: clamp(8px, .7vw, 10px); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ff8fbf; font-family: Manrope, sans-serif; }
.mag-hint { position: absolute; right: 7%; top: 6%; font-size: clamp(9px, .8vw, 11px); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; opacity: .85; }
.mag-backcover { align-items: center; justify-content: center; gap: 14px; background: #0a0a0a; color: #fff; text-align: center; }
.mag-backcover img { width: 38%; height: auto; filter: brightness(0) invert(1); }
.mag-backcover span { font-family: 'Instrument Serif', serif; font-size: clamp(16px, 1.6vw, 24px); font-style: italic; }
.mag-backcover .mag-url { font-family: Manrope, sans-serif; font-style: normal; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.mag-blank { background: #f7f3ec; }
.mag-controls { display: flex; align-items: center; gap: 18px; }
.mag-count { min-width: 120px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, .8); }
.mag-controls .round { color: #fff; border-color: rgba(255, 255, 255, .4); }
.mag-controls .round:disabled { opacity: .3; cursor: default; }
/* Phones: one page at a time; turned pages swing off to the left. */
.mag.is-single .mag-stage { overflow: hidden; }
.mag.is-single .mag-book { width: min(100%, 520px); aspect-ratio: 3 / 4; }
.mag.is-single .mag-sheet { left: 0; width: 100%; }
.mag.is-single .mag-front { border-radius: 10px; }
.mag.is-single .mag-front::after { background: none; }
@media (prefers-reduced-motion: reduce) { .mag-sheet, .mag-book { transition: none; } }
/* The whole spread and its controls fit on the screen. */
.mag-book { width: min(100%, 1120px, calc((100svh - 230px) * 1.5)); }
.mag.is-single .mag-book { width: min(100%, 520px, calc((100svh - 230px) * .75)); }
/* Press page: magazine section spacing; heading over the wall on the dark background. */
.press-mag { padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(40px, 6vh, 72px); }
.press-mag:empty { display: none; }
.press { padding-top: clamp(48px, 7vh, 88px); }
.press .press-head { display: flex; flex-direction: column; gap: 14px; padding: 0 var(--pad) clamp(24px, 4vh, 40px); }
.page-light .press-head .display { color: #fff; }
.page-light .press-head .serif { color: #ff4f9b; }
.page-light .press-head .eyebrow { color: var(--gold); }

/* ---- Before & after sliders: card-sized, each side cropped to its photo (see baSlider() and site.js) ---- */
.ba-slider { --pos: 85%; margin: 0; }
.ba-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: #111; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba-img { position: absolute; max-width: none; opacity: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; transition: opacity .4s; }
.ba-slider.is-ready .ba-img { opacity: 1; }
.ba-after-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); display: flex; align-items: center; justify-content: center; width: 0; outline: none; }
.ba-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 12px rgba(0, 0, 0, .45); }
.ba-knob { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: 42px; height: 42px; border-radius: 999px; background: #fff; color: #111; font-size: 16px; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.ba-knob i { font-style: normal; line-height: 1; }
.ba-handle:focus-visible .ba-knob { outline: 3px solid #f71278; outline-offset: 3px; }
.ba-tag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ba-hint { position: absolute; top: 50%; right: calc(100% - var(--pos) + 30px); display: flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: #f71278; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transform: translateY(-50%); animation: ba-nudge 1.6s ease-in-out infinite; transition: opacity .4s; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.ba-hint i { font-style: normal; }
.ba-used .ba-hint { opacity: 0; animation: none; }
@keyframes ba-nudge { 0%, 100% { transform: translateY(-50%); } 50% { transform: translate(-8px, -50%); } }
@media (prefers-reduced-motion: reduce) { .ba-hint { animation: none; } }
.ba-slider figcaption { margin-top: 10px; font-size: 13px; text-align: center; }
.ba-tune { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; max-width: 760px; margin: 28px auto 0; padding: 18px 22px; border: 1px dashed rgba(10, 10, 10, .25); border-radius: 18px; font-size: 13px; }
.ba-tune p { grid-column: 1 / -1; margin: 0; font-weight: 700; text-align: center; }
.ba-tune label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ba-tune span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.ba-tune input[type=range] { width: 100%; accent-color: #f71278; }
.ba-tune output { grid-column: 1 / -1; font-weight: 700; text-align: center; }

/* ---- Photos of the practice (homepage): framed photos and a mosaic gallery ---- */
.office-photo { position: relative; margin: 0; overflow: hidden; background: #111; }
.office-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.office-photo figcaption { position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px); display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; border-radius: 14px; background: rgba(10, 10, 10, .55); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.office-photo figcaption strong { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.office-photo figcaption span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.office-frame { padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(28px, 5vh, 56px); }
.office-frame .office-photo { aspect-ratio: 16 / 9; max-width: 1240px; margin: 0 auto; border-radius: 28px; }
/* Parallax: the photo is a little taller than its frame and drifts as you scroll (site.js). */
.has-parallax img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; will-change: transform; }
/* The featured photos run full screen, edge to edge. */
.office-tall { padding: 0; }
.office-tall .office-photo { aspect-ratio: auto; height: 100vh; height: 100svh; max-width: none; border-radius: 0; }
.sec-start.has-photo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.start-photo { aspect-ratio: 4 / 3; border-radius: 28px; }
@media (max-width: 860px) { .sec-start.has-photo { grid-template-columns: 1fr; } }

.fac-intro { align-items: end; margin-bottom: clamp(28px, 5vh, 56px); }
.fac-tile { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #151515; cursor: zoom-in; }
.fac-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.fac-tile:hover img, .fac-tile:focus-visible img { transform: scale(1.05); }
.fac-tile:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
/* Hover: a flash of light sweeps across and the photo grows a little. */
.sec-fac .fac-tile[data-r] { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), scale .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.fac-tile:hover, .fac-tile:focus-visible { scale: 1.035; z-index: 2; box-shadow: 0 26px 60px rgba(0, 0, 0, .6); }
.fac-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 47%, rgba(255, 255, 255, .12) 53%, transparent 70%); transform: translateX(-130%); pointer-events: none; }
.fac-tile:hover::after, .fac-tile:focus-visible::after { transform: translateX(130%); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .fac-tile:hover, .fac-tile:focus-visible { scale: 1; } .fac-tile::after { display: none; } }
/* Mosaic: big and small tiles locked to a grid */
.fac-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 17vw, 260px); grid-auto-flow: dense; gap: 14px; }
.fac-bento .is-big { grid-column: span 2; grid-row: span 2; }
.fac-bento .is-tall { grid-row: span 2; }
.fac-bento .is-wide { grid-column: span 2; }
@media (max-width: 900px) { .fac-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; gap: 10px; } .fac-bento .fac-tile { border-radius: 14px; } }

/* Smooth wheel scrolling (Lenis, see site.js): the library's required styles. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---- Gift cards (homepage). --p: 1 entering from below, 0 centered, -1 leaving above; --a: 1 when
   centered, 0 at the edges; --mx/--my: mouse position over the card, -1..1 (site.js). ---- */
.sec-gift { --p: 0; --a: 1; position: relative; overflow: hidden; background: radial-gradient(60% 70% at 30% 50%, rgba(255, 30, 130, .16), transparent 70%), #000; }
.gift-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.gift-copy { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.gift-copy .body-lg { color: rgba(244, 241, 236, .82); }
.gift-stage { --mx: 0; --my: 0; position: relative; perspective: 1400px; padding: clamp(24px, 4vw, 56px) 0; }
.gift-smoke { position: absolute; inset: -15% -10%; z-index: 0; pointer-events: none; background: radial-gradient(38% 42% at 28% 38%, rgba(255, 30, 130, .5), transparent 70%), radial-gradient(34% 40% at 76% 66%, rgba(255, 70, 165, .38), transparent 70%), radial-gradient(30% 30% at 55% 20%, rgba(255, 120, 190, .22), transparent 70%); filter: blur(28px); opacity: calc(.55 + var(--a) * .45); transform: translateY(calc(var(--p) * 50px)) rotate(calc(var(--p) * 8deg)); }
/* The card lies back, then stands up to face you as it reaches the middle of the screen; it leans
   toward the mouse. */
.gift-tilt { position: relative; z-index: 1; transform-style: preserve-3d; transform-origin: 50% 100%; transition: transform .25s ease-out; transform: translateY(calc(max(var(--p), 0) * 70px)) rotateX(calc(max(var(--p), 0) * 58deg - var(--my) * 8deg)) rotateY(calc(var(--p) * -12deg + var(--mx) * 10deg)); }
.gift-card { position: relative; border-radius: 3.2% / 5.6%; overflow: hidden; box-shadow: 0 0 calc(30px + var(--a) * 70px) rgba(255, 40, 140, calc(.25 + var(--a) * .35)), 0 40px 80px rgba(0, 0, 0, .6); }
.gift-card img { display: block; width: 100%; height: auto; }
.gift-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%); background-size: 260% 100%; background-position: calc(50% + var(--p) * 70% + var(--mx) * 20%) 0; mix-blend-mode: screen; pointer-events: none; }
.gift-perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gift-perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(244, 241, 236, .9); }
.gift-perks li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
/* Big outlined words behind everything, drifting in opposite directions as you scroll. */
.gift-words { position: absolute; inset: 50% 0 auto; translate: 0 -50%; z-index: 0; display: flex; flex-direction: column; gap: 2vw; pointer-events: none; white-space: nowrap; font-size: clamp(56px, 11vw, 170px); font-weight: 800; letter-spacing: -.04em; line-height: .9; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 79, 155, .35); }
.gift-words span:first-child { transform: translateX(calc(-20% + var(--p) * 18%)); }
.gift-words span:last-child { transform: translateX(calc(-35% - var(--p) * 18%)); -webkit-text-stroke-color: rgba(244, 241, 236, .18); }
@media (max-width: 860px) { .gift-inner { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .gift-tilt, .gift-smoke, .gift-words span { transform: none !important; transition: none; }
}

/* "Watch tour" thumbnail (facilities): opens the tour video in the overlay. */
.fac-tour { position: relative; display: block; width: min(100%, 620px); aspect-ratio: 16 / 9; margin: 0 0 clamp(4px, 1vh, 12px); padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #151515; cursor: pointer; }
.fac-tour img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.fac-tour::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 55%); }
.fac-tour:hover img, .fac-tour:focus-visible img { transform: scale(1.04); }
.fac-tour:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.fac-tour-label { position: absolute; left: 18px; bottom: 16px; z-index: 1; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

/* ---- Our doctors: one row per doctor, portraits on alternating sides ---- */
.team-intro { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 5vh, 56px); }
.team .person-initials { display: grid; place-items: center; width: 100%; height: 100%; font-size: 120px; }
.doc-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.doc-row + .doc-row { margin-top: clamp(56px, 9vh, 110px); }
.doc-row.flip .doc-media { order: 2; }
.doc-media { position: relative; }
.doc-row .doc-photo { aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #e9e4dc; }
.doc-row .doc-photo img { width: 100%; height: 100%; object-fit: cover; }
.doc-text { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.doc-quote { margin: 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; }
.doc-bio { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(10, 10, 10, .75); }
.doc-where { margin: 0; font-size: 13px; letter-spacing: .04em; color: #8a6d2f; }
/* A second, smaller photo overlapping the portrait's lower right corner */
.doc-photo2, .dent-photo2 { position: absolute; right: -7%; bottom: -8%; width: 42%; aspect-ratio: 2 / 3; margin: 0; border: 6px solid var(--paper, #f4f1ec); border-radius: 22px; overflow: hidden; background: #e9e4dc; box-shadow: 0 24px 50px rgba(0, 0, 0, .22); }
.doc-photo2 img, .dent-photo2 img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .doc-row { grid-template-columns: 1fr; }
  .doc-row.flip .doc-media { order: 0; }
  .doc-photo2, .dent-photo2 { right: 4%; bottom: -6%; width: 38%; border-width: 4px; }
}
/* Dr. Mira Kaga's bio page: her portrait above the bio */
.profile-portrait { max-width: 440px; margin: 0 0 32px; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: #e9e4dc; }
.profile-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Homepage Dentistry (East Brunswick): Dr. Maha Kaga and links into the dental pages ---- */
.dent-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.dent-media { position: relative; }
.dent-photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #e9e4dc; }
.dent-photo img { width: 100%; height: 100%; object-fit: cover; }
.dent-copy { display: flex; flex-direction: column; gap: 16px; }
.dent-who { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a6d2f; }
.dent-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 6px 0 0; padding: 0; list-style: none; }
.dent-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; border-bottom: 1px solid rgba(10, 10, 10, .14); font-size: 15px; font-weight: 700; color: inherit; transition: color .2s, padding .3s; }
.dent-links a:hover, .dent-links a:focus-visible { color: #c40d5f; padding-left: 8px; }
.dent-links i { font-style: normal; }
.dent-where { margin: 0; font-size: 13px; color: rgba(10, 10, 10, .65); }
@media (max-width: 860px) { .dent-grid { grid-template-columns: 1fr; } .dent-links { grid-template-columns: 1fr; } }

/* ---- Category pages, the Our Doctors way: photo on the left, words on the right. Six or fewer
   items get big rows; longer lists sit two to a row on wide screens. ---- */
.cats .doc-row { margin-bottom: clamp(56px, 9vh, 110px); }
.cats-head { margin-bottom: clamp(20px, 3vh, 32px); }
.cat-list { display: grid; gap: clamp(40px, 7vh, 80px); }
.cat-item { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(22px, 4vw, 64px); align-items: center; }
.cat-photo { display: block; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: #e9e4dc; }
.cat-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.cat-item:hover .cat-photo img { transform: scale(1.04); }
.cat-text { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.cat-title { margin: 0; font-size: clamp(30px, 3.4vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1; text-transform: uppercase; }
.cat-title a { color: inherit; }
.cat-title a:hover, .cat-title a:focus-visible { color: #c40d5f; }
.cat-desc { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(10, 10, 10, .75); }
.cat-text .btn { padding: 13px 22px; }
@media (min-width: 1100px) {
  .cat-list.many { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 80px); }
  .cat-list.many .cat-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .cat-list.many .cat-photo { aspect-ratio: 4 / 5; }
  .cat-list.many .cat-title { font-size: clamp(24px, 2.1vw, 34px); }
  .cat-list.many .cat-desc { font-size: 15px; }
}
@media (max-width: 760px) { .cat-item { grid-template-columns: 1fr; } }

/* ---- Specials teaser (before the drop): blurred stand-ins under a pink "revealed" badge ---- */
.sp-card.teaser { cursor: grab; }
.tz-blur { display: flex; flex-direction: column; gap: 8px; filter: blur(7px); opacity: .85; user-select: none; -webkit-user-select: none; pointer-events: none; }
.tz-badge { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; text-align: center; background: #f71278; box-shadow: 0 18px 44px rgba(247, 18, 120, .5); }
.tz-badge small { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; line-height: 1.35; text-transform: uppercase; }
.tz-badge b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
/* 1: a tilted pink sticker */
.tz-sticker { top: 24%; right: 16px; width: 122px; height: 122px; padding: 12px; border-radius: 16px; transform: rotate(-7deg); }
/* 2: an upright square seal with a double frame, set over the blurred price */
.tz-seal { right: 22px; bottom: 22px; width: 116px; height: 116px; padding: 10px; gap: 4px; border: 3px solid #fff; border-radius: 10px; outline: 2px solid #f71278; outline-offset: 5px; }
.tz-seal b { font-size: 30px; }
.tz-2 .tz-blur { min-height: 132px; justify-content: flex-end; }
/* 3: a frosted pink panel over the price, with a lock */
.tz-panel { left: 14px; right: 14px; bottom: 14px; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 18px; border-radius: 18px; text-align: left; background: rgba(247, 18, 120, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tz-panel > span { display: flex; flex-direction: column; gap: 4px; }
.tz-panel b { font-size: 28px; }
.tz-lock { flex: none; width: 34px; height: 34px; color: #fff; }
.tz-3 .sp-bottom { bottom: 96px; }

/* The countdown under the specials heading */
.drop { margin: calc(clamp(36px, 5vh, 56px) * -.4) 0 clamp(28px, 4vh, 44px); }
.drop-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px); border: 1px solid rgba(247, 18, 120, .45); border-radius: 28px; background: linear-gradient(120deg, rgba(247, 18, 120, .16), rgba(255, 255, 255, .03) 55%); box-shadow: 0 0 60px rgba(247, 18, 120, .12) inset; }
.drop-text { display: flex; flex-direction: column; gap: 8px; min-width: min(100%, 300px); }
.drop-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #ff4f9b; }
.drop-eyebrow i { width: 8px; height: 8px; border-radius: 999px; background: #f71278; box-shadow: 0 0 12px #f71278; }
.drop-title { margin: 0; font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.drop-title .serif { color: #ff4f9b; font-weight: 400; }
.drop-sub { margin: 0; font-size: 15px; color: rgba(244, 241, 236, .78); }
.drop-clock { display: flex; gap: 10px; }
.drop-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 84px; padding: 14px 10px 12px; border: 1px solid rgba(247, 18, 120, .35); border-radius: 18px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.drop-unit b { display: block; font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.drop-unit b.tick { animation: drop-tick .45s cubic-bezier(.2, .7, .2, 1); }
.drop-unit small { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 241, 236, .6); }
@keyframes drop-tick { from { transform: translateY(-40%); opacity: .35; } to { transform: none; opacity: 1; } }
.drop-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.drop-pause { padding: 0; border: 0; background: none; color: rgba(244, 241, 236, .7); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.drop.is-live .drop-clock { display: none; }
@media (max-width: 700px) {
  .drop-clock { width: 100%; justify-content: space-between; gap: 8px; }
  .drop-unit { flex: 1; min-width: 0; padding: 12px 4px 10px; border-radius: 14px; }
  .drop-unit b { font-size: 30px; }
  .drop-unit small { font-size: 9px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) { .drop-unit b.tick { animation: none; } }

/* ---- Meet our doctors (homepage): both doctors side by side ---- */
.docs-head { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin-bottom: clamp(36px, 6vh, 64px); }
.docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6vw, 96px); align-items: start; }
.docs-card { display: flex; flex-direction: column; gap: clamp(34px, 5vh, 52px); }
.docs-media { position: relative; margin-right: 7%; }
.docs-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 720px; border-radius: 28px; overflow: hidden; background: #e9e4dc; }
.docs-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.docs-text { display: flex; flex-direction: column; gap: 14px; }
.docs-name { margin: 0; font-size: clamp(36px, 3.6vw, 58px); font-weight: 800; letter-spacing: -.045em; line-height: .92; text-transform: uppercase; }
.docs-name .serif { color: #c40d5f; font-weight: 400; text-transform: none; }
.docs-text .dent-links { margin-top: 4px; }
@media (max-width: 980px) { .docs-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Gift Cards in the menu bar ---- */
.nav-gift { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #f71278; color: #fff; }
.nav-gift:hover, .nav-gift:focus-visible { background: #ff2d8a; }
.menu-gift { align-self: flex-start; }
@media (max-width: 640px) {
  .nav-gift { padding: 11px; }
  .nav-gift span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.footer-links { display: flex; gap: 16px; }

/* ---- The TKi logo on every special's card ---- */
.sp-front .sp-top .sp-logo { position: static; inset: auto; flex: none; width: 46px; height: auto; object-fit: contain; transform: none; transition: none; filter: brightness(0) invert(1); opacity: .95; }

/* ---- A light TKI watermark over patient before & after photos (on screen only) ---- */
[data-watermark] .ba-item, [data-watermark] .ba-frame { position: relative; }
[data-watermark] .ba-item::after, [data-watermark] .ba-frame::after, .zoom-dialog.watermark::after {
  content: ''; position: absolute; right: 4%; bottom: 4%; z-index: 3; width: 20%; aspect-ratio: 1040 / 772;
  background: url(/img/tki-logo-2026.svg) center / contain no-repeat; filter: invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); opacity: .5; pointer-events: none;
}
[data-watermark] .ba-item::after, [data-watermark] .ba-frame::after { max-width: 120px; }
.zoom-dialog.watermark::after { position: fixed; right: 28px; bottom: 28px; width: 120px; }
.nav-actions a { white-space: nowrap; }
@media (max-width: 1560px) { .nav-actions .nav-phone { display: none; } }

/* ---- Sienna, the concierge chat (Claude Design look: black with tan) ---- */
.sienna-launcher, .sienna-panel { --s-tan: #c9b98a; --s-ink: #0e0d0b; --s-bubble: #1c1a16; --s-text: #f4f1ec; font-family: Manrope, system-ui, sans-serif; }
.sienna-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 40px); padding: 7px 22px 7px 7px; border: 1px solid rgba(201, 185, 138, .45); border-radius: 999px; background: rgba(14, 13, 11, .92); color: var(--s-text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); cursor: pointer; text-align: left; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1), border-color .2s; }
.sienna-launcher.in { opacity: 1; transform: none; }
.sienna-launcher:hover, .sienna-launcher:focus-visible { border-color: var(--s-tan); }
.sienna-launcher:focus-visible, .sienna-panel :focus-visible { outline: 2px solid var(--s-tan); outline-offset: 3px; }
.sienna-face { position: relative; flex: none; display: block; border-radius: 50%; padding: 2px; background: var(--s-tan); }
.sienna-face img { display: block; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.sienna-dot { position: absolute; right: 1px; bottom: 2px; width: 11px; height: 11px; border: 2px solid var(--s-ink); border-radius: 50%; background: #4ade80; }
.sienna-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sienna-words b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sienna-words small { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--s-tan); }
html.sienna-open .sienna-launcher { opacity: 0; pointer-events: none; transform: translateY(12px); }

.sienna-panel { position: fixed; right: 20px; bottom: 20px; z-index: 61; display: flex; flex-direction: column; width: min(400px, calc(100vw - 40px)); height: min(660px, calc(100vh - 120px)); border: 1px solid rgba(201, 185, 138, .25); border-radius: 26px; background: var(--s-ink); color: var(--s-text); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); overflow: hidden; }
.sienna-panel[hidden] { display: none; }
.sienna-panel.is-open { animation: sienna-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes sienna-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.sienna-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; border-bottom: 1px solid rgba(201, 185, 138, .14); }
.sienna-head .sienna-face img { width: 52px; height: 52px; }
.sienna-who { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sienna-who h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.sienna-who span { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--s-tan); }
.sienna-close { flex: none; width: 42px; height: 42px; border: 1px solid rgba(244, 241, 236, .25); border-radius: 50%; background: none; color: var(--s-text); font-size: 22px; line-height: 1; cursor: pointer; }
.sienna-close:hover { border-color: var(--s-tan); }
.sienna-log { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px; overflow-y: auto; overscroll-behavior: contain; }
.sienna-msg { max-width: 86%; padding: 12px 16px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.sienna-msg p { margin: 0; }
.sienna-msg p + p { margin-top: 8px; }
.sienna-msg a { color: var(--s-tan); text-decoration: underline; text-underline-offset: 2px; }
.sienna-msg.from-her { align-self: flex-start; border-radius: 18px 18px 18px 6px; background: var(--s-bubble); }
.sienna-msg.from-you { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--s-tan); color: #0a0a0a; }
.sienna-msg.typing { display: flex; gap: 5px; padding: 15px 18px; }
.sienna-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 241, 236, .55); animation: sienna-dot 1.1s infinite; }
.sienna-msg.typing i:nth-child(2) { animation-delay: .15s; }
.sienna-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sienna-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.sienna-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.sienna-pills:empty { display: none; }
.sienna-pill { padding: 10px 16px; border: 1px solid rgba(201, 185, 138, .55); border-radius: 999px; background: none; color: var(--s-text); font: inherit; font-size: 13.5px; cursor: pointer; transition: background .2s, color .2s; }
.sienna-pill:hover, .sienna-pill:focus-visible { background: var(--s-tan); color: #0a0a0a; }
.sienna-card { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid rgba(201, 185, 138, .45); border-radius: 18px; background: rgba(201, 185, 138, .07); }
.sienna-card strong { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--s-tan); }
.sienna-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(244, 241, 236, .8); }
.sienna-card.emergency { border-color: #ff6b6b; background: rgba(255, 107, 107, .08); }
.sienna-card.emergency strong { color: #ff8a8a; }
.sienna-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sienna-btn { display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid var(--s-tan); border-radius: 999px; background: var(--s-tan); color: #0a0a0a; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.sienna-btn.ghost { background: none; color: var(--s-text); }
.sienna-form { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; border-top: 1px solid rgba(201, 185, 138, .14); }
.sienna-form input { flex: 1; min-width: 0; height: 48px; padding: 0 20px; border: 1px solid rgba(201, 185, 138, .25); border-radius: 999px; background: #16140f; color: var(--s-text); font: inherit; font-size: 15px; }
.sienna-form input::placeholder { color: rgba(244, 241, 236, .45); }
.sienna-form input:focus { outline: none; border-color: var(--s-tan); }
.sienna-send { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--s-tan); color: #0a0a0a; cursor: pointer; }
.sienna-send:disabled, .sienna-form input:disabled { opacity: .5; cursor: default; }
.sienna-note { margin: 0; padding: 0 18px 12px; font-size: 10.5px; line-height: 1.4; color: rgba(244, 241, 236, .5); text-align: center; }
@media (max-width: 600px) {
  .sienna-launcher { right: 12px; bottom: 12px; padding-right: 16px; }
  .sienna-words b { font-size: 14px; }
  .sienna-panel { inset: auto 0 0 0; width: 100%; height: min(88vh, 100% - 40px); border-radius: 22px 22px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sienna-launcher, .sienna-panel.is-open, .sienna-msg.typing i { transition: none; animation: none; }
}

/* ---- Gift card checkout (pop-up) ---- */
.gift-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.gift-modal::backdrop { background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gm-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 6vh, 64px) var(--pad); }
.gm-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(1040px, 100%); border: 1px solid rgba(247, 18, 120, .35); border-radius: 30px; background: radial-gradient(90% 70% at 0% 0%, rgba(247, 18, 120, .22), transparent 60%), #0b0b0b; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); overflow: hidden; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .45s, transform .55s cubic-bezier(.2, .7, .2, 1); }
.gift-modal.in .gm-panel { opacity: 1; transform: none; }
.gm-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(0, 0, 0, .4); color: #fff; font-size: 22px; cursor: pointer; }
.gm-close:hover { border-color: #f71278; }
.gm-visual { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: clamp(28px, 4vw, 52px); border-right: 1px solid rgba(255, 255, 255, .08); perspective: 1000px; }
.gm-card { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(247, 18, 120, .28), 0 10px 30px rgba(0, 0, 0, .5); transform: rotateY(-8deg) rotateX(4deg); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.gm-visual:hover .gm-card { transform: rotateY(0) rotateX(0); }
.gm-card img { display: block; width: 100%; height: auto; }
.gm-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 60%); transform: translateX(-60%); animation: gm-shine 4.5s ease-in-out 1s 2; pointer-events: none; }
@keyframes gm-shine { to { transform: translateX(60%); } }
.gm-amount { position: absolute; right: 20px; top: 12px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.gm-to { position: absolute; left: 18px; bottom: 20px; max-width: 55%; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gm-perks li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: rgba(244, 241, 236, .82); }
.gm-perks li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f71278; box-shadow: 0 0 10px #f71278; }
.gm-form, .gm-done { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 52px); }
.gm-form[hidden], .gm-done[hidden] { display: none; }
.gm-form fieldset { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.gm-form fieldset[hidden] { display: none; }
.gm-form legend { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; padding: 0; }
.gm-title { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #fff; }
.gm-title .serif { color: #ff4f9b; font-weight: 400; }
.gm-steps { display: flex; gap: 6px; margin: 0 52px 4px 0; padding: 0; list-style: none; }
.gm-steps li { flex: 1; padding-top: 10px; border-top: 3px solid rgba(255, 255, 255, .14); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 236, .45); transition: border-color .3s, color .3s; }
.gm-steps li.on { border-color: #f71278; color: #fff; }
.gm-amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gm-amt { padding: 22px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; background: rgba(255, 255, 255, .03); color: #fff; font: inherit; font-size: 26px; font-weight: 800; letter-spacing: -.02em; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.gm-amt:hover { border-color: rgba(247, 18, 120, .6); transform: translateY(-2px); }
.gm-amt[aria-checked="true"] { border-color: #f71278; background: rgba(247, 18, 120, .16); box-shadow: 0 0 0 1px #f71278 inset; }
.gm-amt-other { grid-column: 1 / -1; padding: 16px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gm-amt:focus-visible, .gm-close:focus-visible { outline: 2px solid #f71278; outline-offset: 3px; }
.gm-form textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: 15px; resize: vertical; }
.gm-form textarea:focus { outline: none; border-color: var(--gold); }
.gm-count { align-self: flex-end; font-size: 11px; color: rgba(244, 241, 236, .5); }
.gm-to-email { display: flex; flex-direction: column; gap: 16px; }
.gm-to-email[hidden] { display: none; }
.gm-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gm-review { display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; margin: 0; padding: 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: rgba(255, 255, 255, .03); font-size: 15px; }
.gm-review dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 236, .55); padding-top: 3px; }
.gm-review dd { margin: 0; color: #fff; overflow-wrap: anywhere; white-space: pre-line; }
.gm-test { margin: 0; padding: 12px 16px; border-radius: 12px; background: rgba(247, 18, 120, .12); border: 1px solid rgba(247, 18, 120, .4); font-size: 13px; color: #ffd1e5; }
.gm-error { margin: 0; padding: 12px 16px; border-radius: 12px; background: rgba(232, 144, 124, .12); border: 1px solid rgba(232, 144, 124, .5); font-size: 14px; color: #ffd8cf; }
.gm-error[hidden] { display: none; }
.gm-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 4px; }
.gm-actions .btn[hidden] { display: none; }
.gm-done { justify-content: center; text-align: left; }
.gm-check { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #f71278; color: #fff; font-size: 30px; font-weight: 800; box-shadow: 0 0 40px rgba(247, 18, 120, .6); }
.gm-done-text { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(244, 241, 236, .85); }
.gm-done .gm-actions { justify-content: flex-start; }
@media (max-width: 860px) {
  .gm-panel { grid-template-columns: minmax(0, 1fr); }
  .gm-visual { padding-bottom: 0; border-right: 0; }
  .gm-card { max-width: 420px; transform: none; }
  .gm-perks { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gm-panel, .gm-card, .gm-amt { transition: none; } .gm-shine { animation: none; } }

.gm-terms, .gm-terms-review { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(244, 241, 236, .55); }
.gm-terms-review { font-size: 12.5px; color: rgba(244, 241, 236, .75); }
/* Step 1: which gift card (Aesthetics or the Dental Suite) */
.gm-lede { margin: -4px 0 0; font-size: 14.5px; line-height: 1.55; color: rgba(244, 241, 236, .75); }
.gm-practices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gm-pr { display: flex; flex-direction: column; padding: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; background: rgba(255, 255, 255, .03); color: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.gm-pr img { display: block; width: 100%; height: auto; aspect-ratio: 944 / 540; object-fit: cover; }
.gm-pr-text { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.gm-pr-text b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.gm-pr-text span { font-size: 12.5px; line-height: 1.4; color: rgba(244, 241, 236, .65); }
.gm-pr:hover { border-color: rgba(247, 18, 120, .6); transform: translateY(-2px); }
.gm-pr[aria-checked="true"] { border-color: #f71278; background: rgba(247, 18, 120, .12); box-shadow: 0 0 0 1px #f71278 inset, 0 12px 30px rgba(247, 18, 120, .25); }
.gm-pr:focus-visible { outline: 2px solid #f71278; outline-offset: 3px; }
.gm-steps li { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .gift-modal[data-step="0"] .gm-visual { display: none; } }
@media (prefers-reduced-motion: reduce) { .gm-pr { transition: none; } }
/* The big feature cards (laser hair reduction, hair restoration) are links as a whole, like the cards above them. */
.feature-card .line-link i { transition: width .3s; }
.feature-card:hover .line-link i { width: 52px; }
.feature-card:focus-visible { outline: 2px solid #f71278; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .feature-card .line-link i { transition: none; } }

/* Signup popup: first and last name side by side (stacked on narrow phones). */
.signup-names { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .signup-names { grid-template-columns: 1fr; } }

/* /early: Better than Black Friday early access */
.early { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #000; color: #fff; }
.early-bg { position: absolute; inset: 0; }
.early-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.early-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 38%, rgba(0,0,0,.15) 72%, rgba(0,0,0,0) 100%), linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 30%); }
.early-inner { position: relative; display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 680px; margin-right: auto; padding-top: clamp(130px, 18vh, 190px); padding-bottom: clamp(48px, 8vh, 90px); }
.early-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #ff4f9b; }
.early-eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: #f71278; box-shadow: 0 0 14px #f71278; }
.early-title { margin: 0; font-size: clamp(54px, 8vw, 116px); line-height: .92; text-transform: uppercase; }
.early-title .serif { display: block; color: #ff4f9b; text-transform: none; text-shadow: 0 0 40px rgba(247,18,120,.45); }
.early-lede { margin: 0; max-width: 560px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: rgba(244,241,236,.9); }
.early-lede b { color: #fff; }
.early-perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.early-perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(244,241,236,.85); }
.early-perks li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f71278; box-shadow: 0 0 10px #f71278; }
.early-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.early-clock .drop-pause { background: none; border: 0; padding: 0; color: rgba(244,241,236,.6); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.early-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.early-cta { min-width: 240px; }
.early-fine { margin: 0; font-size: 12px; color: rgba(244,241,236,.55); }
@media (max-width: 760px) {
  .early { align-items: flex-end; }
  .early-bg img { height: 62svh; object-position: 70% 25%; }
  .early-bg::after { background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.85) 52%, #000 64%); }
  .early-inner { padding-top: 46svh; }
}

/* Seasonal signup popup (Better than Black Friday): the hush photo across the top. */
.signup-card.has-photo { padding-top: 0; }
.signup-photo { position: relative; margin: 0 -36px 22px; height: 190px; overflow: hidden; }
.signup-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 28%; display: block; }
.signup-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,18,0) 45%, #141012 100%); }
@media (max-width: 600px) { .signup-photo { margin: 0 -20px 18px; height: 150px; } }

.early-paren { color: rgba(244,241,236,.7); }
.early-clock-label { flex-basis: 100%; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #ff4f9b; }

/* Booking form step 1: how should we contact you (big pink checks, all on by default) */
.contact-methods { margin: 0; padding: 0; border: 0; }
.contact-methods legend { margin-bottom: 10px; }
.contact-methods-row { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-methods-row label { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border: 1px solid rgba(127, 127, 127, .45); border-radius: 14px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s; }
.contact-methods-row input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border: 2px solid #f71278; border-radius: 9px; background: transparent; cursor: pointer; }
.contact-methods-row input:checked { background: #f71278; box-shadow: 0 0 14px rgba(247, 18, 120, .55); }
.contact-methods-row input { position: relative; }
.contact-methods-row input:checked::after { content: ''; position: absolute; left: 50%; top: 45%; width: 7px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); }
.contact-methods-row label:has(input:checked) { border-color: #f71278; background: rgba(247, 18, 120, .1); }
.contact-methods-row input:focus-visible { outline: 2px solid #f71278; outline-offset: 3px; }
.gm-secure { margin: 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); font-size: 13px; line-height: 1.5; }