/* ==========================================================================
   EDEN DENTAL OFFICE — Design System v3 "Precision Noir" (2026)
   Override layer. Loads AFTER styles.css. Motion-first, luxury-restrained.
   ========================================================================== */

:root {
  --c-bg: #f6f1e8;
  --c-bg-2: #efe8db;
  --c-surface: #fffdf8;
  --c-ink: #131007;
  --c-ink-2: #362f24;
  --c-muted: #6a6152;
  --c-line: #ddd2bd;
  --c-line-2: #eae1cf;
  --c-accent: #a5814a;
  --c-accent-2: #7d6134;

  --noir: #120e08;
  --noir-2: #1b1610;
  --noir-3: #241d14;
  --gold: #c9a45c;
  --gold-2: #e4c98c;
  --gold-soft: rgba(201, 164, 92, .32);

  --radius: 20px;
  --radius-sm: 14px;
  --shadow-sm: 0 1px 2px rgba(19,16,7,.04), 0 6px 18px rgba(19,16,7,.05);
  --shadow-md: 0 14px 44px rgba(19,16,7,.13);
  --shadow-gold: 0 10px 40px rgba(201,164,92,.25);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-luxe: cubic-bezier(.65, .05, 0, 1);
  --dur: .9s;
}

html { scroll-behavior: smooth; }
body { background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--gold); color: var(--noir); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold), var(--c-accent-2)); border-radius: 8px; border: 2px solid var(--noir); }

/* film grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. PRELOADER — gold line draws, curtain lifts (first visit of session)
   ========================================================================== */
#eden-preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--noir);
  display: grid; place-items: center;
  transition: opacity .7s var(--ease-out), visibility .7s;
}
#eden-preloader.done { opacity: 0; visibility: hidden; }
.pl__mark { text-align: center; }
.pl__name {
  font-family: var(--f-serif); color: #f4ecdd;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); letter-spacing: .06em;
  opacity: 0; animation: plFade .9s var(--ease-out) .15s forwards;
}
.pl__sub {
  font-family: var(--f-sans); color: var(--gold); margin-top: 10px;
  font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
  opacity: 0; animation: plFade .9s var(--ease-out) .45s forwards;
}
.pl__line {
  width: min(300px, 54vw); height: 1px; margin: 22px auto 0;
  background: rgba(201,164,92,.2); position: relative; overflow: hidden;
}
.pl__line::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  transform: translateX(-100%); animation: plSweep 1.4s var(--ease-luxe) .3s infinite;
}
@keyframes plFade { to { opacity: 1; } }
@keyframes plSweep { to { transform: translateX(100%); } }
/* curtain reveal */
#eden-preloader::before,
#eden-preloader::after {
  content: ""; position: absolute; left: 0; right: 0; height: 50%;
  background: var(--noir); transition: transform 1s var(--ease-luxe) .1s;
}
#eden-preloader::before { top: 0; }
#eden-preloader::after { bottom: 0; }
#eden-preloader.done::before { transform: translateY(-100%); }
#eden-preloader.done::after { transform: translateY(100%); }

/* ==========================================================================
   2. SCROLL PROGRESS — hairline of gold
   ========================================================================== */
#eden-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 8000;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-accent-2), var(--gold-2), var(--gold));
  pointer-events: none;
}

/* ==========================================================================
   3. CUSTOM CURSOR (fine pointers only)
   ========================================================================== */
@media (pointer: fine) {
  .v26js.has-cursor, .v26js.has-cursor * { cursor: none !important; }
  #eden-cursor, #eden-cursor-dot {
    position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none;
    border-radius: 50%; will-change: transform;
  }
  #eden-cursor {
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1px solid var(--gold-soft);
    transition: width .35s var(--ease-out), height .35s var(--ease-out),
                margin .35s var(--ease-out), background .35s, border-color .35s, opacity .3s;
    display: grid; place-items: center;
    font-family: var(--f-sans); font-size: .6rem; letter-spacing: .12em;
    text-transform: uppercase; color: transparent;
  }
  #eden-cursor-dot {
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    background: var(--gold); transition: opacity .3s, transform .3s;
  }
  #eden-cursor.is-hover {
    width: 74px; height: 74px; margin: -37px 0 0 -37px;
    background: rgba(201,164,92,.14); border-color: var(--gold);
    color: var(--gold-2);
  }
  #eden-cursor.is-hover + #eden-cursor-dot { opacity: 0; }
  #eden-cursor.is-media { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
}
@media (pointer: coarse) { #eden-cursor, #eden-cursor-dot { display: none; } }

/* ==========================================================================
   4. TYPOGRAPHY & RHYTHM
   ========================================================================== */
.eyebrow {
  letter-spacing: .24em; font-size: .74rem; color: var(--c-accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.section { padding: clamp(88px, 11vh, 136px) 0; position: relative; }
.section__head h2, .section h2 { line-height: 1.12; letter-spacing: -.012em; }
.section__head h2 { font-size: clamp(1.95rem, 3.7vw, 3.1rem); }
.section__lede { font-size: 1.04rem; line-height: 1.8; }

/* ==========================================================================
   5. HEADER — liquid glass, hides on scroll-down
   ========================================================================== */
.site-header {
  background: rgba(246,241,232,.55);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(19,16,7,.06);
  transition: background .5s var(--ease-out), box-shadow .5s var(--ease-out), transform .55s var(--ease-out);
}
.site-header.is-scrolled { background: rgba(246,241,232,.9); box-shadow: 0 10px 40px rgba(19,16,7,.08); }
.site-header.is-hidden { transform: translateY(-110%); }
.nav a { position: relative; transition: color .3s; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-luxe);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.topbar { background: var(--noir); color: #efe6d4; }
.topbar a { color: var(--gold-2); }

/* ==========================================================================
   6. BUTTONS — sheen sweep + magnetic lift
   ========================================================================== */
.btn {
  border-radius: 999px; overflow: hidden; position: relative; isolation: isolate;
  transition: transform .4s var(--ease-out), box-shadow .45s var(--ease-out), background .3s, color .3s;
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.34) 48%, transparent 62%);
  transform: translateX(-130%); transition: transform .9s var(--ease-luxe);
}
.btn:hover::before { transform: translateX(130%); }
.btn:hover { box-shadow: var(--shadow-gold); }
.btn:active { transform: scale(.98) !important; }
.btn--primary { background: linear-gradient(135deg, var(--gold) 0%, var(--c-accent-2) 120%); border: none; color: #fff; }
.btn--ghost { border: 1px solid var(--gold-soft); }

/* ==========================================================================
   7. HERO — cinematic, char-level reveal, parallax, aurora
   ========================================================================== */
.hero { min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
/* lede set in the serif face with wide tracking — reads as a maison line,
   not a list of features */
.hero__lede {
  font-family: var(--f-serif);
  font-size: 1.18rem !important;
  letter-spacing: .015em;
  line-height: 1.75 !important;
  color: #f3ecdf !important;
  font-weight: 400;
}
/* HERO VIDEO
   NOTE: .hero__media keeps its ORIGINAL rule from styles.css
   (position:absolute; inset:0; z-index:-2) — do not override it, or the hero
   collapses to zero height. Poster shows instantly (fast LCP); the looping
   video cross-fades in on top once it can play. Both carry the SAME color
   grade as the original photo so the swap is invisible. */
.hero__poster,
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: brightness(.62) contrast(1.02) saturate(.95);
  /* IDENTICAL fixed scale on both layers — no zoom animation, so the poster→video
     hand-off is invisible. The slight upscale only provides headroom for the
     scroll parallax so no edges are exposed. */
  transform: scale(1.06);
  will-change: transform;
}
/* The poster IS the video's first frame, so there is nothing to cross-fade —
   swap almost instantly and the transition is invisible to the eye. */
.hero__video {
  opacity: 0;
  transition: opacity .25s linear;
  pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }

/* MOBILE HERO — colour grade is left exactly as the original.
   Instead of brightening the footage, the copy block is made compact so more
   of the room and the branches stay visible behind it. */
@media (max-width: 900px) {
  /* Split layout on phones: eyebrow + headline pinned to the TOP, supporting
     copy + CTAs pushed to the BOTTOM. The room and the branches show through
     the gap between them. */
  .hero { align-items: stretch !important; min-height: 100svh; }
  /* everything hugs the LEFT edge; the right side of the frame stays pure video */
  .hero__content {
    display: flex; flex-direction: column;
    padding: 26px 12px 34px 18px !important;
  }
  .hero__text { display: flex; flex-direction: column; flex: 1; align-items: flex-start; }

  /* eyebrow: shrunk just enough to hold one line on a phone */
  .hero .eyebrow {
    font-size: .5rem; letter-spacing: .06em; gap: 6px;
    max-width: 100%;
    white-space: nowrap;
  }
  .hero .eyebrow::before { width: 14px; flex: 0 0 14px; }

  /* headline: the one element allowed to run the full width of the screen */
  .hero__title {
    font-size: clamp(1.7rem, 7.6vw, 2.3rem);
    line-height: 1.12;
    margin-bottom: .7rem !important;
    max-width: 100%;
  }

  /* supporting copy — `margin-top: auto` pushes this block, and everything
     after it, down to the bottom of the hero */
  .hero__lede {
    font-size: 1.02rem !important;
    line-height: 1.62 !important;
    margin: auto 0 16px !important;
    max-width: 72%;
  }
  /* star / social-proof row: hidden on phones to free up the frame */
  .hero__text > div:not(.hero__cta) { display: none !important; }

  /* CTAs: stacked, equal width, chunkier — never wider than the left column */
  .hero__cta {
    flex-direction: column !important;
    align-items: stretch !important;
    width: max-content !important;
    max-width: 72%;
    gap: 10px !important;
    margin-top: 0 !important;
  }
  .hero__cta .btn {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 16px 22px !important;
    font-size: .88rem !important;
    gap: 9px;
  }
  .hero__cta .btn svg { width: 16px; height: 16px; flex: 0 0 16px; }

  .hero__cta-note {
    font-size: .7rem !important;
    line-height: 1.45 !important;
    margin-top: 14px !important;
    max-width: 70%;
  }
}
/* .hero__overlay is intentionally NOT overridden — the original scrim from
   styles.css is used, exactly as it looked before the redesign. */
/* Type-level insurance only (does not darken the photo). */
.hero__title { text-shadow: 0 2px 30px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35); }
.hero__lede, .hero__cta-note { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.hero .eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.hero::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(38% 30% at 72% 22%, rgba(201,164,92,.22), transparent 70%);
  animation: aurora 12s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: translate3d(-3%,-2%,0) scale(1); opacity: .65; }
  100% { transform: translate3d(4%,3%,0) scale(1.14); opacity: 1; }
}
.hero__title {
  /* the headline is two lines by design (a <br> splits it) — give it enough
     width that it never wraps into a third */
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
  line-height: 1.06; letter-spacing: -.016em;
  max-width: 30ch;
  text-shadow: 0 2px 40px rgba(0,0,0,.35); perspective: 800px;
}
/* eyebrow stays on a single line */
.hero .eyebrow { white-space: nowrap; }
/* char-level 3D reveal — CSS-animation driven (self-completing, cannot get stuck).
   .ch spans only exist when motion.js ran, so no-JS keeps the plain headline visible. */
.hero__title .ch {
  display: inline-block;
  opacity: 0; transform: translateY(.5em) rotateX(-55deg);
  transform-origin: 50% 100%;
  animation: chIn .95s var(--ease-luxe) forwards;
  animation-delay: calc(var(--ci, 0) * 26ms + .15s);
}
@keyframes chIn { to { opacity: 1; transform: none; } }

/* supporting hero copy — hidden ONLY while JS is in control (.v26js), so a JS
   failure can never leave the page blank. Also self-completing via animation. */
.v26js .hero__text > .eyebrow,
.v26js .hero__text > .hero__lede,
.v26js .hero__text > div,
.v26js .hero__text > .hero__cta,
.v26js .hero__text > .hero__cta-note {
  opacity: 0; transform: translateY(26px);
  animation: heroCopyIn .95s var(--ease-out) forwards;
}
@keyframes heroCopyIn { to { opacity: 1; transform: none; } }
.v26js .hero__text > .eyebrow { animation-delay: .2s; }
.v26js .hero__text > .hero__lede { animation-delay: 1.05s; }
.v26js .hero__text > div { animation-delay: 1.18s; }
.v26js .hero__text > .hero__cta { animation-delay: 1.3s; }
.v26js .hero__text > .hero__cta-note { animation-delay: 1.45s; }
/* hard failsafe: if anything goes wrong, force everything visible */
.hero__text.force-show > *, .hero__title.force-show .ch {
  opacity: 1 !important; transform: none !important; animation: none !important;
}
.hero__scroll { animation: scrollPulse 2.4s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(8px); opacity: .45; } }

/* ==========================================================================
   8. TRUST TICKER — infinite marquee
   ========================================================================== */
.ticker {
  background: var(--noir); border-block: 1px solid rgba(201,164,92,.25);
  overflow: hidden; padding: 17px 0; position: relative; z-index: 3;
}
.ticker__track { display: flex; width: max-content; animation: tick 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker__item {
  font-family: var(--f-sans); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: #cfc3aa; white-space: nowrap; display: inline-flex; align-items: center; gap: 26px; padding-right: 26px;
}
.ticker__item b { color: var(--gold-2); font-weight: 500; }
.ticker__item::after { content: "✦"; color: var(--gold); font-size: .62rem; }

/* ==========================================================================
   9. SCROLL REVEAL ENGINE (auto-tagged)
   ========================================================================== */
.v26js [data-rv] {
  opacity: 0; transform: translateY(36px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--rv-i, 0) * 85ms);
  will-change: transform, opacity;
}
.v26js [data-rv].in { opacity: 1; transform: none; }
.reveal { opacity: 1 !important; transform: none !important; } /* neutralize v1 */

/* line-by-line text reveal (headlines) */
.v26js [data-line] { display: block; overflow: hidden; }
.v26js [data-line] > span {
  display: inline-block; transform: translateY(110%);
  transition: transform 1s var(--ease-luxe);
  transition-delay: calc(var(--li, 0) * 90ms);
}
.v26js [data-line].in > span { transform: none; }

/* ==========================================================================
   10. IMAGE REVEAL — gold wipe unveils the picture
   ========================================================================== */
.v26js [data-img-rv] { position: relative; overflow: hidden; }
.v26js [data-img-rv]::after {
  content: ""; position: absolute; inset: 0; background: var(--noir);
  transform: scaleY(1); transform-origin: 50% 100%;
  transition: transform 1.1s var(--ease-luxe); z-index: 2;
}
.v26js [data-img-rv].in::after { transform: scaleY(0); }
.v26js [data-img-rv] > img { transform: scale(1.12); transition: transform 1.6s var(--ease-luxe); }
.v26js [data-img-rv].in > img { transform: scale(1); }

/* ==========================================================================
   11. CARDS — 3D tilt, cursor glow, lift
   ========================================================================== */
.card, .tx-card, .tech__card, .book-card, .qa, .tourism-reason {
  border-radius: var(--radius); border: 1px solid var(--c-line-2);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.card, .tx-card { transform-style: preserve-3d; will-change: transform; }
.card:hover, .tx-card:hover, .tech__card:hover {
  box-shadow: var(--shadow-md); border-color: var(--gold-soft);
}
.card { overflow: hidden; position: relative; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 40% at var(--mx,50%) var(--my,0%), rgba(201,164,92,.13), transparent 70%);
  opacity: 0; transition: opacity .5s;
}
.card:hover::after { opacity: 1; }
.card img { transition: transform 1.2s var(--ease-luxe); }
.card:hover img { transform: scale(1.06); }

/* ==========================================================================
   12. STATS BAND — noir + count-up
   ========================================================================== */
.bar { background: var(--noir); border: none; padding: 36px 0; }
.bar__item { border-color: rgba(201,164,92,.16); }
.bar__k { font-family: var(--f-serif); font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--gold-2); letter-spacing: 0; }
.bar__v { color: #b6ab95; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }

/* ==========================================================================
   13. DARK SECTIONS — unified noir + gold bloom
   ========================================================================== */
section[style*="1a1a1a"], .section.tech, .section.book {
  background: linear-gradient(165deg, var(--noir) 0%, var(--noir-2) 55%, var(--noir-3) 100%) !important;
  position: relative;
}
section[style*="1a1a1a"]::before, .section.tech::before, .section.book::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 34% at 84% 10%, rgba(201,164,92,.14), transparent 70%);
}
.section.tech .section__head h2, .section.book h2 { color: #f4ecdd; }
.tech__card {
  background: rgba(255,253,248,.05); border: 1px solid rgba(201,164,92,.2);
  color: #efe6d4; backdrop-filter: blur(8px);
}
.tech__card:hover { border-color: rgba(201,164,92,.45); box-shadow: 0 18px 60px rgba(0,0,0,.45); }
/* tech video scales up as you scroll into it */
.tech__video-wrap { will-change: transform; }

/* ==========================================================================
   14. MEMBERSHIP — glass tiers
   ========================================================================== */
#membership { background: linear-gradient(165deg, var(--noir) 0%, var(--noir-3) 100%) !important; }
#membership .package-grid > * {
  background: rgba(255,253,248,.045) !important;
  border: 1px solid rgba(201,164,92,.22) !important;
  border-radius: var(--radius); backdrop-filter: blur(10px);
  transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s;
}
#membership .package-grid > *:hover {
  transform: translateY(-8px); border-color: rgba(228,201,140,.6) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.pkg-price { font-family: var(--f-serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--gold-2); }

/* ==========================================================================
   15. GALLERY — horizontal scrub strip
   ========================================================================== */
.clinic-gallery { overflow: visible; }
.clinic-gallery__track { gap: 22px; will-change: transform; }
.clinic-gallery__item { border-radius: var(--radius); overflow: hidden; }
.clinic-gallery__item img { transition: transform 1.4s var(--ease-luxe), filter .8s; filter: saturate(.92); }
.clinic-gallery__item:hover img { transform: scale(1.07); filter: saturate(1.08); }

/* ==========================================================================
   15b. JOURNAL — latest articles on the front page (E-E-A-T proof)
   ========================================================================== */
.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 6px;
}
.journal-card {
  display: flex; flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.journal-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-soft);
}
.journal-card__media { overflow: hidden; aspect-ratio: 16 / 10; }
.journal-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease-luxe);
}
.journal-card:hover .journal-card__media img { transform: scale(1.06); }
.journal-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.journal-card__date {
  font-family: var(--f-sans); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-accent);
}
.journal-card__title {
  font-family: var(--f-serif); font-size: 1.2rem; font-weight: 600;
  color: var(--c-ink); line-height: 1.32; margin: 8px 0 10px;
}
.journal-card__excerpt {
  font-size: .9rem; line-height: 1.6; color: var(--c-muted); margin: 0 0 16px;
}
.journal-card__more {
  margin-top: auto; font-family: var(--f-sans); font-size: .86rem;
  font-weight: 500; color: var(--c-accent);
}
@media (max-width: 900px) {
  .journal__grid { grid-template-columns: 1fr; gap: 18px; }
  .journal-card__media { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   16. FAQ — card accordion (fixed padding)
   ========================================================================== */
.faq-list { display: grid; gap: 14px; }
.qa {
  border: 1px solid var(--c-line-2); border-radius: var(--radius-sm);
  background: var(--c-surface); padding: 0;
  transition: border-color .35s, box-shadow .35s;
}
.qa:last-child { border-bottom: 1px solid var(--c-line-2); }
.qa summary { padding: 24px 60px 24px 30px; }
.qa summary::after { right: 28px; }
.qa__body { padding: 0 30px 26px 30px; }
.qa:hover { border-color: var(--gold-soft); }
.qa[open] { box-shadow: var(--shadow-sm); border-color: var(--gold-soft); }
@media (max-width: 720px) {
  .qa summary { padding: 18px 46px 18px 18px; }
  .qa summary::after { right: 20px; }
  .qa__body { padding: 0 18px 20px 18px; }
}

/* ==========================================================================
   17. FORMS
   ========================================================================== */
input, select, textarea { transition: border-color .3s, box-shadow .3s, background .3s; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(201,164,92,.18) !important;
}

/* ==========================================================================
   18. STICKY DOCK + FOOTER
   ========================================================================== */
.sticky-bar {
  background: rgba(18,14,8,.84);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(201,164,92,.28);
}
.sticky-bar__btn { transition: transform .35s var(--ease-out), background .3s; }
.sticky-bar__btn:hover { transform: translateY(-2px); }
.site-footer { background: var(--noir); color: #cfc3aa; }
.site-footer a { color: #cfc3aa; transition: color .3s; }
.site-footer a:hover { color: var(--gold-2); }
.site-footer__name { color: #f4ecdd; }
.site-footer__bottom { border-top: 1px solid rgba(201,164,92,.14); color: #8d816f; }

/* media polish */
.section img, .about__media img, .firstvisit__media img,
.symptoms__media img, .travelers__media img { border-radius: var(--radius); }
video { border-radius: var(--radius); }

/* ==========================================================================
   19. MOBILE
   ========================================================================== */
@media (max-width: 720px) {
  .hero { min-height: 92svh; }
  .hero__title { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .section { padding: 70px 0; }
  .ticker__item { font-size: .68rem; }
  body::after { opacity: .035; }
}

/* ==========================================================================
   20. REDUCED MOTION — kill everything
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .v26js [data-rv], .v26js [data-line] > span, .hero__text > *, .hero__title .ch {
    opacity: 1 !important; transform: none !important;
  }
  .v26js [data-img-rv]::after { display: none; }
  #eden-preloader { display: none; }
  #eden-cursor, #eden-cursor-dot { display: none; }
  html { scroll-behavior: auto; }
}