/* ============================================================
   main.css — SkinMedics "MAISON"
   Luxury fashion-house language: monochrome, full-bleed imagery,
   editorial restraint. Sharp corners, hairline rules, tracked caps,
   vast whitespace. Native scroll. (css/tokens.css drives all values.)
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  /* Theme vars flip with [data-theme] for the scroll-driven colour morph */
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --hairline: var(--line);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.js body { transition: background-color 0.7s var(--ease-out), color 0.7s var(--ease-out); }
body[data-theme="dark"] {
  --fg: var(--on-dark);
  --fg-soft: var(--on-dark-soft);
  --hairline: var(--line-on-dark);
  background: var(--dark);
}
html, body { overflow-x: hidden; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; }
:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 3px; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-l); }
@media (min-width: 768px) { .container { padding-inline: var(--space-2xl); } }
.narrow { max-width: var(--container-narrow); margin-inline: auto; }
.section { padding-block: var(--space-3xl); }
.section.tight { padding-block: var(--space-2xl); }
.section.dark { background: var(--dark); color: var(--on-dark); }
.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-regular); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: inherit; text-wrap: balance; }
h1 { font-size: var(--step-5); line-height: var(--lh-tight); }
h2 { font-size: var(--step-4); line-height: var(--lh-tight); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { max-width: var(--measure); text-wrap: pretty; }
.lead { font-size: var(--step-1); font-weight: var(--weight-regular); line-height: 1.55; color: var(--fg-soft); }

/* Maison tracked label */
.label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-soft);
}
.hero-full .label, .band .label { color: var(--on-dark-soft); }
.section-title { margin-top: var(--space-s); }
/* Consistent breathing room between a title and its description */
.section-title + .lead, .section-title + p, h1 + .lead, h2 + .lead, h2 + p { margin-top: var(--space-l); }

/* Minimal CTAs */
.cta {
  display: inline-flex; align-items: center; gap: 0.75em;
  font-family: var(--font-body); font-size: var(--step--2); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid currentColor; color: var(--fg);
}
.cta .ar { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .cta:hover .ar { transform: translateX(6px); } }
.hero-full .cta, .band .cta { color: var(--on-dark); }

/* Buttons (used in header + sticky bar; restrained) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 var(--space-l);
  font-family: var(--font-body); font-size: var(--step--2); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-solid { background: var(--ink); color: var(--bg); }
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--bg); } .btn-solid:hover { background: #000; } }
/* Buttons over dark/image contexts → cream */
.hero-full .btn, .band .btn, .section.dark .btn { border-color: var(--on-dark); color: var(--on-dark); background: transparent; }
@media (hover: hover) { .hero-full .btn:hover, .band .btn:hover, .section.dark .btn:hover { background: var(--on-dark); color: var(--ink); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; }

/* ---------- Offer announcement bar ---------- */
.announce { position: fixed; top: 0; left: 0; right: 0; height: var(--announce-h); z-index: 110; background: var(--ink); color: var(--bg); display: flex; align-items: center; overflow: hidden; transition: height var(--dur-base) var(--ease-out); }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: var(--space-m); width: 100%; padding-inline: var(--space-m); }
.announce p { margin: 0; font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.announce a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.announce-x { position: absolute; right: var(--space-l); top: 50%; transform: translateY(-50%); width: 28px; height: 28px; color: var(--bg); font-size: 18px; line-height: 1; opacity: 0.7; }
.announce-x:hover { opacity: 1; }
.announce[hidden] { display: none; }

/* ---------- Header (transparent over hero, solidifies on scroll) ---------- */
.site-header { position: fixed; top: var(--announce-h); left: 0; right: 0; z-index: 100; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out); border-bottom: 1px solid transparent; }
/* media as <video> (hero + bands) */
.hero-full .media video, .band .media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Logo-reveal intro (once per session) ---------- */
.intro { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.6s var(--ease-out); }
.intro video { width: min(60vw, 520px); height: auto; }
.intro.done { opacity: 0; pointer-events: none; }
.intro[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- Brand divider (wordmark) ---------- */
.brand-divider { padding-block: var(--space-3xl); text-align: center; }
.brand-divider img { width: min(80%, 640px); margin-inline: auto; opacity: 0.92; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); min-height: 76px; }
.brand { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.02em; color: var(--on-dark); transition: color var(--dur-base) var(--ease-out); }
.nav { display: none; }
.nav ul { display: flex; gap: var(--space-xl); }
.nav a { font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--on-dark-soft); transition: color var(--dur-fast); }
.nav a:hover { color: var(--on-dark); }
.header-cta { display: flex; align-items: center; gap: var(--space-m); }
.header-call { display: none; font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--on-dark); }
.header-cta .btn { border-color: currentColor; color: var(--on-dark); min-height: 42px; }
@media (hover: hover) { .header-cta .btn:hover { background: var(--on-dark); color: var(--ink); } }
@media (min-width: 1024px) { .nav { display: block; } .header-call { display: inline-flex; } }

/* Scrolled state — cream bg, ink text */
.site-header.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.site-header.scrolled .brand,
.site-header.scrolled .nav a,
.site-header.scrolled .header-call,
.site-header.scrolled .header-cta .btn { color: var(--ink); border-color: var(--ink); }
.site-header.scrolled .nav a { color: var(--ink-soft); }
.site-header.scrolled .nav a:hover { color: var(--ink); }
@media (hover: hover) { .site-header.scrolled .header-cta .btn:hover { background: var(--ink); color: var(--bg); } }

/* Sub-pages (generated): header is solid from the top (no dark hero behind it) */
.subpage .site-header { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.subpage .brand, .subpage .header-call, .subpage .header-cta .btn { color: var(--ink); border-color: var(--ink); }
.subpage .nav a { color: var(--ink-soft); }
.subpage .nav a:hover { color: var(--ink); }
@media (hover: hover) { .subpage .header-cta .btn:hover { background: var(--ink); color: var(--bg); } }

/* ---------- Full-bleed hero ---------- */
.hero-full { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--on-dark); overflow: hidden; }
.hero-full .media, .hero-full .scrim { position: absolute; inset: 0; }
.hero-full .media img { width: 100%; height: 100%; object-fit: cover; }
.hero-full .scrim { background:
  linear-gradient(90deg, rgba(20,19,15,0.58) 0%, rgba(20,19,15,0.12) 60%, rgba(20,19,15,0) 100%),
  linear-gradient(180deg, rgba(20,19,15,0.40) 0%, rgba(20,19,15,0.14) 30%, rgba(20,19,15,0.52) 66%, rgba(20,19,15,0.86) 100%); }
.hero-full .inner { position: relative; z-index: 2; width: 100%; max-width: 60rem; padding-block: var(--space-3xl) var(--space-2xl); }
.hero-full h1 { font-size: clamp(2.7rem, 1.5rem + 5vw, 5.4rem); max-width: 15ch; line-height: 1.0; margin-top: var(--space-l); }
.hero-full .lead { color: rgba(243, 240, 232, 0.92); max-width: 38ch; margin-top: var(--space-l); }
.hero-full .btn-row { margin-top: var(--space-xl); gap: var(--space-l); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: 1px solid var(--line-on-dark); }
@media (max-width: 600px) {
  .hero-full .inner { padding-block: var(--space-2xl) var(--space-xl); }
  .hero-full h1 { margin-top: var(--space-m); }
  .hero-full .lead { margin-top: var(--space-m); font-size: var(--step-0); }
  .hero-full .btn-row { margin-top: var(--space-l); }
  .hero-trust { margin-top: var(--space-xl); }
  /* Crop toward the left so the physician/subject stays in frame on narrow screens */
  .hero-full .media video, .hero-full .media img { object-position: 22% center; }
}

/* ---------- Hamburger + mobile nav ---------- */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 130; color: inherit; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px auto; transition: transform 0.3s var(--ease-out), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span { background: var(--on-dark); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1023px) { .nav-toggle { display: block; } }

.mobile-nav { position: fixed; inset: 0; z-index: 120; background: var(--dark); color: var(--on-dark); display: flex; flex-direction: column; justify-content: center; gap: var(--space-l); padding: var(--space-3xl) var(--space-2xl); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out), visibility 0.4s; }
.mobile-nav.open { transform: none; opacity: 1; visibility: visible; }
.mobile-nav a { font-family: var(--font-display); font-size: var(--step-3); color: var(--on-dark); }
.mobile-nav .m-links { display: flex; flex-direction: column; gap: var(--space-m); }
.mobile-nav .m-cta { margin-top: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-m); align-items: flex-start; }
.mobile-nav .m-cta a, .mobile-nav .m-cta button { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
body.nav-open { overflow: hidden; }
@media (min-width: 1024px) { .mobile-nav { display: none; } }
.hero-trust span { font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }

/* ---------- Editorial statement ---------- */
.statement { text-align: center; }
.statement h2 { font-size: var(--step-4); max-width: 18ch; margin-inline: auto; }
.statement .lead { margin: var(--space-l) auto 0; }
.statement .cta { margin-top: var(--space-xl); }

/* ---------- Lookbook grid (treatments) ---------- */
.lookbook { display: grid; gap: 2px; margin-top: var(--space-2xl); }
@media (min-width: 700px) { .lookbook { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lookbook.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.look { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: var(--on-dark); background: var(--dark); }
.look img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8) saturate(0.92); transition: transform 1.3s var(--ease-out), filter var(--dur-base); }
.look .cap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-xl); background: linear-gradient(0deg, rgba(20,19,15,0.55) 0%, rgba(20,19,15,0) 55%); }
.look .num { font-size: var(--step--2); letter-spacing: var(--tracking-label); color: var(--on-dark-soft); }
.look .name { font-family: var(--font-display); font-size: var(--step-2); margin-top: var(--space-2xs); }
.look .more { margin-top: var(--space-s); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--on-dark-soft); opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .look:hover img { transform: scale(1.05); filter: brightness(0.72) saturate(0.92); }
  .look:hover .more { opacity: 1; transform: none; }
}

/* ---------- Full-bleed image band w/ overlay ---------- */
.band { position: relative; min-height: 86vh; display: flex; align-items: center; color: var(--on-dark); overflow: hidden; }
.band .media, .band .scrim { position: absolute; inset: 0; }
.band .media img { width: 100%; height: 100%; object-fit: cover; }
.band .scrim { background: linear-gradient(90deg, rgba(20,19,15,0.66) 0%, rgba(20,19,15,0.28) 55%, rgba(20,19,15,0.05) 100%); }
@media (max-width: 700px) { .band .scrim { background: linear-gradient(180deg, rgba(20,19,15,0.55) 0%, rgba(20,19,15,0.35) 40%, rgba(20,19,15,0.72) 100%); } }
.band .inner { position: relative; z-index: 2; }
.band h2 { max-width: 16ch; }
.band .lead { color: var(--on-dark-soft); max-width: 42ch; margin-top: var(--space-l); }
.band .btn-row { margin-top: var(--space-xl); }

/* ---------- Editorial split (image + text) ---------- */
.split { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } .split.reverse > .split-text { order: 2; } }
.split-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dark); }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); }
@media (hover: hover) { .split-media:hover img { transform: scale(1.04); } }
.split-text .cta { margin-top: var(--space-xl); }

/* ---------- Reviews (editorial, minimal) ---------- */
.reviews { display: grid; gap: var(--space-2xl); margin-top: var(--space-2xl); }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: var(--space-3xl); } }
.review blockquote { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; font-weight: var(--weight-regular); }
.review cite { display: block; margin-top: var(--space-m); font-style: normal; font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-soft); }

/* ---------- Process steps ---------- */
.steps { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); } }
.step { border-top: 1px solid var(--hairline); padding-top: var(--space-l); }
.step::before { counter-increment: step; content: "0" counter(step); display: block; font-family: var(--font-display); font-size: var(--step-2); margin-bottom: var(--space-s); }
.step h4 { margin-bottom: var(--space-xs); }
.step p { font-size: var(--step--1); color: var(--fg-soft); font-weight: var(--weight-light); }

/* ---------- Location / final ---------- */
.locate { display: grid; gap: var(--space-2xl); }
@media (min-width: 1024px) { .locate { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } }
.locate dl { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.locate dt { font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }
.locate dd { color: var(--fg); }
.map-embed { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #2a2823; }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.map-embed .media-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-l); text-align: center; color: var(--on-dark-soft); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ---------- Treatment-page hero (generated pages, no full image) ---------- */
.hero-inner { padding-block: calc(var(--announce-h) + 76px + var(--space-2xl)) var(--space-3xl); max-width: var(--container-narrow); }
.hero-inner h1 { margin-top: var(--space-m); }
.hero-inner .lead { margin-top: var(--space-l); }
.hero-inner .btn-row { margin-top: var(--space-xl); }
@media (max-width: 600px) {
  .hero-inner { padding-block: calc(var(--announce-h) + 76px + var(--space-l)) var(--space-2xl); }
  .hero-inner .lead { margin-top: var(--space-m); }
  .hero-inner .btn-row { margin-top: var(--space-l); }
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-l); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-soft); }
.feature-list { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); }
@media (min-width: 768px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }
.feature h4 { margin-bottom: var(--space-xs); }
.feature p { font-size: var(--step--1); color: var(--fg-soft); font-weight: var(--weight-light); }
.spec { display: grid; gap: var(--space-l); align-content: start; }
.spec > div { display: grid; gap: var(--space-2xs); padding-top: var(--space-m); border-top: 1px solid var(--hairline); }
.spec dt { font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }
.spec dd { font-size: var(--step-1); font-family: var(--font-display); }
.faq-item { border-top: 1px solid var(--hairline); padding: var(--space-l) 0; }
.faq-item summary { font-family: var(--font-display); font-size: var(--step-1); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: var(--on-dark-soft); padding-block: var(--space-3xl) var(--space-2xl); }
.footer-grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer .brand { color: var(--on-dark); display: inline-block; margin-bottom: var(--space-m); }
.site-footer h5 { font-family: var(--font-body); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: var(--space-m); }
.footer-links { display: grid; gap: var(--space-s); font-size: var(--step--1); }
.site-footer a:hover { color: var(--on-dark); }
.footer-bottom { margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: 1px solid var(--line-on-dark); display: flex; flex-wrap: wrap; gap: var(--space-m); justify-content: space-between; font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ---------- Mobile sticky Call/Book ---------- */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; }
.sticky-bar a { display: flex; align-items: center; justify-content: center; min-height: 54px; font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.sticky-bar a.call { background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); }
.sticky-bar a.book { background: var(--ink); color: var(--bg); }
@media (min-width: 1024px) { .sticky-bar { display: none; } }
body { padding-bottom: 54px; }
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
.js .reveal.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.stagger.is-in > * { opacity: 1; transform: none; }
.js .reveal.stagger.is-in > *:nth-child(2) { transition-delay: 90ms; }
.js .reveal.stagger.is-in > *:nth-child(3) { transition-delay: 180ms; }
.js .reveal.stagger.is-in > *:nth-child(4) { transition-delay: 270ms; }
.js .reveal.stagger.is-in > *:nth-child(5) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) { .js .reveal.stagger > * { opacity: 1; transform: none; } }

/* ---------- Scroll colour-morph ----------
   Sections tagged data-bg become transparent (JS only) so the body's
   morphing background shows through; body[data-theme] is driven by scroll.
   Without JS, .section.dark keeps its solid bg (readable fallback). */
.js .section[data-bg] { background: transparent; color: inherit; }

/* ---------- Mask reveal (headline rises behind a clip) ---------- */
/* .reveal-mask: titles are ALWAYS visible (no hide-by-default — that caused
   missing-title bugs). Motion comes from the parent .reveal fade. */
.reveal-mask > span { display: block; }

/* ---------- Clip-path image reveal ---------- */
.js .reveal-img img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 1.2s var(--ease-out), transform 1.6s var(--ease-out); }
.js .reveal-img.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .js .reveal-img img { clip-path: none; transform: none; transition: none; } }

/* ---------- Marquee credential ticker ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--hairline); padding-block: var(--space-l); }
.marquee-track { display: flex; gap: var(--space-2xl); width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--font-display); font-size: var(--step-2); white-space: nowrap; color: var(--fg); opacity: 0.9; }
.marquee span::after { content: "—"; margin-left: var(--space-2xl); color: var(--fg-soft); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; } }

/* ---------- Forms (enquiry) ---------- */
.form { display: grid; gap: var(--space-l); max-width: 38rem; margin-top: var(--space-xl); }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }
.field input, .field textarea { font: inherit; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: var(--space-s) 0; border-radius: 0; transition: border-color var(--dur-fast) var(--ease-out); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field textarea { resize: vertical; min-height: 5rem; }

/* Cal.com inline mount */
#cal-inline { min-height: 580px; margin-top: var(--space-l); }

/* Value-ladder emphasis */
.feature.feature-hero { border-top: 2px solid var(--ink); padding-top: var(--space-m); }
.feature .tag { display: inline-block; font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--space-xs); }

/* Legal / long-form copy */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-2xl); margin-bottom: var(--space-s); }
.prose p { margin-bottom: var(--space-m); color: var(--fg-soft); }

/* ---------- Stats band (count-ups) ---------- */
.stats { display: grid; gap: var(--space-2xl); text-align: center; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat .num { display: block; font-family: var(--font-display); font-size: var(--step-5); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: var(--space-s); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }

/* ---------- Brand divider (full-bleed wordmark) ---------- */
.brand-divider { line-height: 0; }
.brand-divider img { width: 100%; height: clamp(200px, 36vh, 400px); object-fit: cover; }

/* ---------- Announcement rotator ---------- */
.announce-msg { margin: 0; font-family: var(--font-body); font-size: var(--step--2); font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.announce-msg a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
@media (max-width: 600px) { .announce-msg { font-size: 0.56rem; letter-spacing: 0.08em; } }

/* ---------- Custom cursor (desktop fine-pointer only) ---------- */
.cursor { display: none; position: fixed; top: 0; left: 0; z-index: 400; width: 12px; height: 12px; border: 1px solid #fff; border-radius: 50%; pointer-events: none; align-items: center; justify-content: center; font-size: 0; mix-blend-mode: difference; transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.25s, color 0.25s; }
.has-cursor .cursor { display: flex; }
.has-cursor.is-touch .cursor { display: none; }
.cursor.view { width: 86px; height: 86px; background: var(--ink); color: var(--bg); mix-blend-mode: normal; font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
/* Native cursor stays visible — the ring is an additive flourish (never hide the pointer). */

/* ---------- Auto-rotating testimonial ---------- */
.testimonial { position: relative; min-height: 11rem; touch-action: pan-y; }
.t-quote { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease-out); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.t-quote.is-active { opacity: 1; position: relative; }
.t-quote blockquote { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.3; max-width: 24ch; margin-inline: auto; }
.t-quote cite { display: block; margin-top: var(--space-l); font-style: normal; font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }
.t-dots { display: flex; gap: var(--space-2xs); justify-content: center; margin-top: var(--space-2xl); }
.t-dot { width: 28px; height: 28px; border: 0; background: transparent; position: relative; padding: 0; }
.t-dot::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.4; transition: opacity var(--dur-fast), background-color var(--dur-fast); }
.t-dot.is-active::after { opacity: 1; background: currentColor; }
@media (prefers-reduced-motion: reduce) { .t-quote { transition: none; } }
@media (max-width: 600px) { .t-quote blockquote { font-size: var(--step-2); max-width: 20ch; } .testimonial { min-height: 13rem; } }

/* ---------- Draggable horizontal gallery ---------- */
.h-gallery { display: flex; gap: var(--space-m); overflow-x: auto; scroll-snap-type: x proximity; margin-top: var(--space-2xl); padding-bottom: var(--space-m); cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.h-gallery::-webkit-scrollbar { display: none; }
.h-gallery.dragging { cursor: grabbing; scroll-snap-type: none; }
.h-gallery figure { flex: 0 0 auto; width: min(80vw, 400px); scroll-snap-align: center; margin: 0; }
.h-gallery figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; }
.h-gallery figcaption { margin-top: var(--space-s); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-soft); }
.g-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-l); flex-wrap: wrap; }
.h-gallery-hint { margin: 0; font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-soft); white-space: nowrap; }

/* ---------- Treatments index (filterable) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; }
.filter { font-family: var(--font-body); font-size: var(--step--2); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: var(--space-xs) var(--space-m); min-height: 40px; border: 1px solid var(--line-strong); color: var(--ink-soft); background: transparent; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .filter:hover { border-color: var(--ink); color: var(--ink); } }
.filter.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.tindex { display: grid; gap: var(--space-xl) var(--space-l); margin-top: var(--space-2xl); }
@media (min-width: 640px) { .tindex { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tindex { grid-template-columns: repeat(3, 1fr); } }
.tcard { display: block; }
.tcard[hidden] { display: none; }
.tcard .ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tint-deep); }
.tcard .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) contrast(1.02); transition: transform 1.1s var(--ease-out); }
.tcard-cat { display: block; margin-top: var(--space-m); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); }
.tcard .nm { display: block; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; margin-top: var(--space-2xs); }
.tcard .bl { display: block; margin-top: var(--space-s); font-size: var(--step--1); color: var(--fg-soft); }
.tcard .go { display: inline-flex; align-items: center; gap: 0.5em; margin-top: var(--space-m); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-ink); }
.tcard .go .ar { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .tcard:hover .ph img { transform: scale(1.05); } .tcard:hover .go .ar { transform: translateX(5px); } }

/* ---------- Team grid (About) ---------- */
.team { display: grid; gap: var(--space-2xl) var(--space-xl); margin-top: var(--space-2xl); }
@media (min-width: 640px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team { grid-template-columns: repeat(3, 1fr); } }
.member .photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tint-deep); }
.member .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.02); transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .member:hover .photo img { transform: scale(1.04); } }
.member .mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--step-4); color: var(--accent-ink); opacity: 0.55; }
.member .name { font-family: var(--font-display); font-size: var(--step-2); margin-top: var(--space-m); }
.member .role { display: block; margin-top: var(--space-2xs); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-soft); }
.member .creds { display: block; margin-top: var(--space-s); font-size: var(--step--1); color: var(--fg-soft); }
/* Member as link (team grid + /team index) */
a.member { display: block; color: inherit; text-decoration: none; }
a.member .name { color: var(--fg); }
.member .go { display: inline-flex; align-items: center; gap: 0.5em; margin-top: var(--space-s); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-ink); }
.member .go .ar { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { a.member:hover .go .ar { transform: translateX(5px); } }

/* ---------- Breadcrumbs ---------- */
.crumbs { padding-top: calc(var(--announce-h, 40px) + 96px); padding-bottom: var(--space-xs); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-soft); }
.crumbs a { color: var(--fg-soft); }
.crumbs a:hover { color: var(--fg); }
.crumbs span { margin: 0 0.5em; color: var(--hairline); }
.crumbs [aria-current] { color: var(--fg); }

/* ---------- Staff profile page ---------- */
.profile.section { padding-top: var(--space-l); }
.profile-mono { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: var(--tint-deep); }
.profile-mono span { font-family: var(--font-display); font-size: var(--step-6); color: var(--accent-ink); opacity: 0.5; }
.split-prose { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 900px) { .split-prose { grid-template-columns: 1.6fr 1fr; gap: var(--space-3xl); } }
.focus-card { border-top: 1px solid var(--hairline); padding-top: var(--space-l); }
.focus-list { list-style: none; margin: var(--space-m) 0 0; padding: 0; }
.focus-list li { position: relative; padding-left: 1.4em; margin-bottom: var(--space-s); color: var(--fg-soft); font-size: var(--step--1); }
.focus-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.7em; height: 1px; background: var(--accent-ink); }
.creds-line { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--hairline); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-soft); }

/* ---------- Explore-more grid (cross-links) ---------- */
.explore { display: grid; gap: var(--space-xl) var(--space-l); margin-top: var(--space-2xl); }
@media (min-width: 640px) { .explore { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .explore { grid-template-columns: repeat(3, 1fr); } }
.ecard { display: block; color: inherit; text-decoration: none; }
.ecard .ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tint-deep); }
.ecard .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) contrast(1.02); transition: transform 1.1s var(--ease-out); }
.ecard-cat { display: block; margin-top: var(--space-m); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); }
.ecard .nm { display: block; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; margin-top: var(--space-2xs); color: var(--fg); }
.ecard .bl { display: block; margin-top: var(--space-s); font-size: var(--step--1); color: var(--fg-soft); }
.ecard .go { display: inline-flex; align-items: center; gap: 0.5em; margin-top: var(--space-m); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-ink); }
.ecard .go .ar { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .ecard:hover .ph img { transform: scale(1.05); } .ecard:hover .go .ar { transform: translateX(5px); } }

/* ---------- Journal index ---------- */
.j-feature { display: grid; gap: var(--space-l); color: inherit; text-decoration: none; align-items: center; margin-bottom: var(--space-xl); }
@media (min-width: 900px) { .j-feature { grid-template-columns: 1.2fr 1fr; gap: var(--space-2xl); } }
.j-feature-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint-deep); }
.j-feature-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) contrast(1.02); transition: transform 1.1s var(--ease-out); }
.j-feature-text .section-title { margin-top: var(--space-2xs); }
.j-feature-text .go { display: inline-flex; align-items: center; gap: 0.5em; margin-top: var(--space-m); font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-ink); }
.j-feature-text .go .ar { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .j-feature:hover .j-feature-media img { transform: scale(1.04); } .j-feature:hover .go .ar { transform: translateX(5px); } }

/* ---------- Article page ---------- */
.article-head { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.article-head h1 { margin-top: var(--space-2xs); }
.article-media .container { padding-inline: 0; }
.article-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(0.25) contrast(1.02); }
@media (min-width: 1024px) { .article-media .container { padding-inline: var(--space-l); } .article-media img { aspect-ratio: 21 / 9; } }
.article-disclaimer { margin-top: var(--space-2xl); padding-top: var(--space-m); border-top: 1px solid var(--hairline); font-size: var(--step--2); color: var(--fg-soft); font-style: italic; }
.article-author { display: inline-flex; align-items: center; gap: var(--space-m); margin-top: var(--space-xl); color: inherit; text-decoration: none; }
.aa-photo { width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; background: var(--tint-deep); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.aa-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3); }
.aa-photo .mono { font-family: var(--font-display); color: var(--accent-ink); }
.aa-text { display: flex; flex-direction: column; }
.aa-by { font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-soft); }
.aa-name { font-family: var(--font-display); font-size: var(--step-1); color: var(--fg); }
.aa-role { font-size: var(--step--2); color: var(--fg-soft); }
@media (hover: hover) { .article-author:hover .aa-name { color: var(--accent-ink); } }

/* Skip link */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--ink); color: var(--bg); padding: var(--space-s) var(--space-m); }
.skip-link:focus { left: var(--space-s); top: var(--space-s); }