/* =============================================================================
   Le Domaine de Gambais — Expérience de visite (V2)
   Direction A : Éditorial Premium. Tous les tokens en variables CSS.
   ========================================================================== */

:root {
  --ink: #100F0D; --ink-2: #1A1815; --ink-3: #221E17;
  --ivory: #F3EEE4; --muted: #B7AE9E;
  --gold: #C9A24B; --gold-dim: #9A7E3C;
  --line: rgba(243, 238, 228, .16); --line-soft: rgba(243, 238, 228, .07);
  --ok: #86B071;

  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Manrope", system-ui, sans-serif;

  --h1: clamp(44px, 12vw, 92px);
  --h2: clamp(34px, 8.5vw, 64px);
  --lead: clamp(16px, 2.2vw, 19px);

  --radius: 14px;
  --pad-x: clamp(22px, 6vw, 64px);
  --maxw: 760px;
  --kb: 16s; --rise: .9s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--ink); color: var(--ivory); font-family: var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
::selection { background: var(--gold); color: #1a1305; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================== SCROLLER ================================= */
.scroller {
  height: 100dvh; overflow-y: scroll;
  scroll-snap-type: y proximity;     /* héros calés, galeries en flux libre */
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller { scrollbar-width: none; }

/* =============================== HÉROS =================================== */
.chapter {
  height: 100dvh; scroll-snap-align: start;
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden; background: var(--ink);
}
.chapter .bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transform: scale(1.07); animation: kenburns var(--kb) ease-out forwards;
}
@keyframes kenburns { to { transform: scale(1); } }

.chapter .scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,15,13,.5) 0%, rgba(16,15,13,.04) 30%,
    rgba(16,15,13,.12) 52%, rgba(16,15,13,.82) 100%);
}
.chapter .ord {
  position: absolute; z-index: 2; top: clamp(64px, 11vh, 120px); right: var(--pad-x);
  font-family: var(--display); font-size: clamp(120px, 30vw, 300px); line-height: .8;
  font-weight: 500; font-style: italic; color: var(--ivory); opacity: .07;
  pointer-events: none; user-select: none;
}
.chapter .content { position: relative; z-index: 3; margin: 0 var(--pad-x) clamp(64px, 11vh, 104px); max-width: var(--maxw); }

/* — Fond tenu UNIQUEMENT sous le bloc titre (kicker + titre), pas sous tout le
     texte : l'image reste largement visible. Le reste repose sur le scrim + ombre. */
.head {
  width: fit-content; max-width: 100%;
  background: rgba(16, 15, 13, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 14px 20px 16px;
}
.head .kicker { margin-bottom: 9px; }

.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 16px;
}
.kicker::before { content: ""; width: 38px; height: 1px; background: var(--gold); opacity: .7; }

.chapter h2 { font-family: var(--display); font-weight: 500; font-size: var(--h2); line-height: 1.04; letter-spacing: .005em; }
.chapter h2 em { font-style: italic; color: var(--gold); }
.desc { font-size: var(--lead); line-height: 1.62; color: var(--ivory); max-width: 50ch; margin-top: 18px; text-shadow: 0 1px 18px rgba(16,15,13,.85), 0 1px 3px rgba(16,15,13,.7); }

.tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.tag {
  font-size: 12.5px; letter-spacing: .02em; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 100px; color: var(--muted);
  background: rgba(16,15,13,.34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.tag b { color: var(--ivory); font-weight: 600; }

.islot { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.islot:empty { display: none; }

/* — Révélations (transition, pas animation : l'état final est une vraie
     propriété, donc le texte reste visible même si la transition ne joue pas) — */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.chapter.in .reveal, .gallery.in .reveal { opacity: 1; transform: none; }
.chapter.in .reveal:nth-child(2) { transition-delay: .10s; }
.chapter.in .reveal:nth-child(3) { transition-delay: .22s; }
.chapter.in .reveal:nth-child(4) { transition-delay: .34s; }

/* ================================ COVER ================================== */
#cover { display: block; text-align: center; }            /* centrage porté par .cover-sticky */
.cover-sticky {
  position: relative; height: 100dvh; width: 100%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
/* Mode scrub : section haute, sticky épinglé pendant le pilotage vidéo.
   overflow:visible est INDISPENSABLE : .chapter met overflow:hidden, or un parent
   en overflow:hidden casse le position:sticky de l'enfant. */
#cover.scrub { height: calc(100dvh + var(--cover-scrub, 160vh)); scroll-snap-align: none; overflow: visible; }
#cover.scrub .cover-sticky { position: sticky; top: 0; }
.cover-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; background: var(--ink);
}
#cover .content { margin-bottom: 0; max-width: 720px; }
#cover .head { margin-left: auto; margin-right: auto; text-align: center; padding: 20px 28px 24px; }
#cover .loc { font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 12px; }
#cover h1 { font-family: var(--display); font-weight: 400; font-size: var(--h1); line-height: .98; letter-spacing: .01em; }
#cover h1 em { font-style: italic; color: var(--gold); }
#cover .tagline { font-family: var(--display); font-style: italic; font-size: clamp(18px,4.6vw,26px); color: var(--ivory); margin-top: 18px; text-shadow: 0 1px 20px rgba(16,15,13,.8), 0 1px 3px rgba(16,15,13,.7); }
#cover .price-chip {
  display: inline-block; margin-top: 22px; font-size: 12.5px; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 8px 18px; background: rgba(16,15,13,.4); backdrop-filter: blur(7px);
}
#cover .price-chip b { color: var(--ivory); font-weight: 600; }
.scrollcue { margin-top: 36px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 14px rgba(16,15,13,.9); }
.scrollcue .chev { display: block; margin-bottom: 8px; font-size: 16px; animation: float 2.4s 1.6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* =============================== GALERIES =============================== */
.gallery {
  position: relative; z-index: 2; background: var(--ink);
  padding: clamp(56px, 10vh, 104px) var(--pad-x);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.ghead { max-width: var(--maxw); margin-bottom: clamp(24px, 4vh, 40px); }
.ghead .kicker { margin-bottom: 14px; }
.ghead h2 { font-family: var(--display); font-weight: 500; font-size: var(--h2); line-height: 1.05; }
.gintro { font-size: var(--lead); line-height: 1.6; color: var(--muted); max-width: 52ch; margin-top: 14px; }
.proj-badge {
  display: inline-block; margin-top: 16px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dim); border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px;
}

.grid { display: grid; gap: 10px; }
.tile {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 4px;
  background: var(--ink-2); cursor: pointer;
}
.tile picture { display: block; width: 100%; height: 100%; }
.tile .tile-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.tile:hover .tile-img { transform: scale(1.07); }
.tile-grain {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,15,13,0) 55%, rgba(16,15,13,.45) 100%);
  opacity: .8; transition: opacity .4s;
}
.tile:hover .tile-grain { opacity: 1; }
.tile.tall { aspect-ratio: 3 / 4; }

/* layout : 4 carrés (2×2) */
.layout-quad .grid { grid-template-columns: repeat(2, 1fr); }
/* layout : trio bento */
.layout-trio .grid { grid-template-columns: repeat(2, 1fr); }
.layout-trio .feat { grid-column: span 2; aspect-ratio: 2 / 1; }
/* layout : mosaïque 6 (tuile haute en travers) */
.layout-mosaic .grid { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
.layout-mosaic .tall { grid-row: span 2; }

/* Révélation décalée des tuiles (transition, état final réel) */
.tile {
  opacity: 0; transform: translateY(22px) scale(.99);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.gallery.in .tile { opacity: 1; transform: none; }
.gallery.in .tile:nth-child(2) { transition-delay: .07s; }
.gallery.in .tile:nth-child(3) { transition-delay: .14s; }
.gallery.in .tile:nth-child(4) { transition-delay: .21s; }
.gallery.in .tile:nth-child(5) { transition-delay: .28s; }
.gallery.in .tile:nth-child(6) { transition-delay: .35s; }

.gtags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(20px, 3vh, 30px); max-width: var(--maxw); }

@media (min-width: 760px) {
  .layout-trio .grid { grid-template-columns: 2fr 1fr; }
  .layout-trio .feat { grid-column: 1; grid-row: span 2; aspect-ratio: auto; }
  .layout-mosaic .grid { grid-template-columns: repeat(3, 1fr); }
  .desc { font-size: 19px; }
}

/* ============================ BARRE / BRAND ============================== */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; background: transparent; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .2s ease-out; }
.brand { position: fixed; top: 18px; left: var(--pad-x); z-index: 50; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ivory); font-weight: 700; mix-blend-mode: difference; }
.brand b { color: var(--gold); }

/* ================================ CTA ==================================== */
#cta { justify-content: center; align-items: center; text-align: center; background: radial-gradient(130% 90% at 50% 0%, #241f17, var(--ink)); }
#cta .content { max-width: 600px; margin-bottom: clamp(56px, 9vh, 84px); }
#cta .ey { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 18px; }
#cta h2 { font-family: var(--display); font-size: var(--h2); line-height: 1.05; }
#cta p { color: var(--muted); font-size: 15px; margin-top: 18px; line-height: 1.65; }

.specs { display: flex; flex-wrap: wrap; justify-content: center; margin: 30px auto 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: 540px; }
.spec { flex: 1 1 33%; padding: 16px 10px; border-left: 1px solid var(--line-soft); }
.spec:first-child { border-left: none; }
.spec .n { font-family: var(--display); font-size: 26px; color: var(--ivory); line-height: 1; }
.spec .l { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }

.priceline { margin-top: 24px; font-size: 15px; color: var(--ivory); }
.priceline b { font-family: var(--display); font-size: 22px; color: var(--gold); font-weight: 600; }
.priceline .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }

.btn { margin-top: 28px; display: inline-block; background: var(--gold); color: #1a1305; font-family: var(--body); font-weight: 700; font-size: 15.5px; letter-spacing: .01em; padding: 17px 36px; border: none; border-radius: 100px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 10px 40px rgba(201,162,75,.26); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 52px rgba(201,162,75,.4); }
.reassure { margin-top: 16px; font-size: 12.5px; color: var(--muted); }

.dpe { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
.dpe .badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.dpe .badge b { color: var(--ivory); font-weight: 700; letter-spacing: .1em; }
.dpe .badge .sq { width: 9px; height: 9px; border-radius: 2px; }

/* ============================ OVERLAY QUALIF ============================= */
.overlay { position: fixed; inset: 0; z-index: 100; background: linear-gradient(180deg, #15130f, var(--ink)); display: none; flex-direction: column; overflow-y: auto; }
.overlay.on { display: flex; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.qtop { padding: 20px var(--pad-x) 0; display: flex; align-items: center; gap: 16px; }
.qbar { flex: 1; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.qbar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s ease; }
.qclose { background: none; border: none; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; width: 44px; height: 44px; flex-shrink: 0; }
.qclose:hover { color: var(--ivory); }

.qbody { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px var(--pad-x) 48px; max-width: 600px; margin: 0 auto; width: 100%; }
.qstep { display: none; }
.qstep.on { display: block; animation: rise2 .42s ease forwards; }
@keyframes rise2 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.qk { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.qq { font-family: var(--display); font-size: clamp(28px,7vw,40px); line-height: 1.08; margin: 12px 0 26px; }

.opts { display: flex; flex-direction: column; gap: 11px; }
.opt { text-align: left; background: var(--ink-2); border: 1px solid var(--line); color: var(--ivory); font-family: inherit; font-size: 16px; font-weight: 500; padding: 18px 20px; border-radius: 13px; cursor: pointer; transition: border-color .18s, background .18s; display: flex; align-items: center; gap: 14px; min-height: 56px; }
.opt:hover, .opt:focus-visible { border-color: var(--gold); background: var(--ink-3); outline: none; }
.opt .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex-shrink: 0; transition: background .18s; }
.opt:hover .dot, .opt:focus-visible .dot { background: var(--gold); }
.opt small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; margin-top: 3px; }
/* Option d'exclusion : visuellement plus discrète */
.opt.excl { color: var(--muted); font-weight: 400; }
.opt.excl:hover, .opt.excl:focus-visible { border-color: var(--muted); }
.opt.excl:hover .dot { background: var(--muted); }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; letter-spacing: .02em; }
.field input { width: 100%; background: var(--ink-2); border: 1px solid var(--line); border-radius: 11px; padding: 15px 16px; color: var(--ivory); font-family: inherit; font-size: 16px; min-height: 52px; }
.field input:focus { outline: none; border-color: var(--gold); }
.field input::placeholder { color: #6f685c; }

.qsubmit { width: 100%; background: var(--gold); color: #1a1305; font-family: var(--body); font-weight: 700; font-size: 16px; padding: 17px; border: none; border-radius: 12px; cursor: pointer; margin-top: 10px; min-height: 54px; transition: transform .15s ease; }
.qsubmit:hover { transform: translateY(-1px); }
.qback { background: none; border: none; color: var(--muted); font-size: 13.5px; cursor: pointer; margin-top: 18px; text-align: center; width: 100%; padding: 10px; }
.qback:hover { color: var(--ivory); }

/* ====================== REMERCIEMENT (VISITEUR) ======================== */
#thanks { display: none; text-align: center; }
#thanks.on { display: block; animation: rise2 .5s forwards; }
.rcheck { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #0d1408; }
#thanks h3 { font-family: var(--display); font-size: clamp(28px, 6vw, 38px); line-height: 1.12; margin-bottom: 14px; }
#thanks .rsub { color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 44ch; margin: 0 auto; }

/* — Aperçu email agent (démo) — */
.agent-wrap { margin-top: 30px; }
.agent-toggle { background: none; border: 1px solid var(--line); color: var(--muted); font-family: inherit; font-size: 12.5px; letter-spacing: .04em; padding: 11px 18px; border-radius: 100px; cursor: pointer; transition: .18s; }
.agent-toggle:hover { border-color: var(--gold); color: var(--ivory); }
.agent-card { margin-top: 18px; text-align: left; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.agent-card.on { opacity: 1; transform: translateY(0); }
.mail-head { padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.18); }
.mail-head .ml { font-size: 13px; color: var(--ivory); padding: 3px 0; }
.mail-head .ml span { display: inline-block; width: 52px; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.mail-head .ml em { font-style: normal; color: var(--gold); font-weight: 700; }
.mail-body { padding: 16px 18px; }
.mail-body .seg { font-size: 13px; line-height: 1.45; border-radius: 9px; padding: 11px 13px; margin-bottom: 14px; }
.seg-chaud { background: rgba(201,162,75,.12); border: 1px solid rgba(201,162,75,.42); color: #e7d2a0; }
.seg-tiede { background: rgba(134,176,113,.12); border: 1px solid rgba(134,176,113,.4); color: #cfe3c4; }
.seg-froid, .seg-exclu { background: rgba(183,174,158,.1); border: 1px solid var(--line); color: var(--muted); }
.ar { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14px; border-top: 1px solid var(--line-soft); }
.ar:first-of-type { border-top: none; }
.ar span { color: var(--muted); flex-shrink: 0; }
.ar b { text-align: right; font-weight: 600; }
.ar .sc { font-family: var(--display); font-size: 22px; color: var(--gold); }
.mail-note { padding: 12px 18px; font-size: 11px; line-height: 1.45; color: var(--gold-dim); border-top: 1px solid var(--line); background: rgba(0,0,0,.18); }

/* ============================== DEMO NOTE ============================== */
.demo-note { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(16,15,13,.86); backdrop-filter: blur(8px); border-top: 1px solid var(--line); text-align: center; font-size: 11px; letter-spacing: .06em; color: var(--gold-dim); padding: 9px; }

/* =============================== LIGHTBOX =============================== */
/* Indices : la photo est cliquable */
.zoomable { cursor: zoom-in; }
.tile-grain { pointer-events: none; }
.tile::after {
  content: "\2922"; position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--ivory); background: rgba(16,15,13,.5);
  border: 1px solid var(--line); border-radius: 8px; backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.tile:hover::after { opacity: .95; }
.hero-zoom {
  position: absolute; z-index: 4; right: var(--pad-x); bottom: clamp(20px, 4vh, 34px);
  display: inline-flex; align-items: center; gap: 8px; pointer-events: none;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  background: rgba(16,15,13,.45); border: 1px solid var(--line); border-radius: 100px;
  padding: 8px 14px; backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s;
}
.chapter:hover .hero-zoom { opacity: .9; }

.lb-open .scroller { overflow: hidden; }    /* fige le fond */
.lb {
  position: fixed; inset: 0; z-index: 200; background: rgba(8, 7, 6, .96);
  display: flex; align-items: center; justify-content: center;
  animation: fade .25s ease;
}
.lb[hidden] { display: none; }
.lb-stage {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none; cursor: zoom-in;
}
.lb-img {
  max-width: 94vw; max-height: 92vh; object-fit: contain;
  transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.lb-btn {
  position: absolute; z-index: 3; background: rgba(16,15,13,.55); color: var(--ivory);
  border: 1px solid var(--line); border-radius: 50%; width: 48px; height: 48px;
  font-size: 26px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; transition: background .18s, border-color .18s;
}
.lb-btn:hover { background: rgba(16,15,13,.85); border-color: var(--gold); color: var(--gold); }
.lb-close { top: 18px; right: 18px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-zoom { position: absolute; z-index: 3; bottom: 20px; right: 18px; display: flex; gap: 10px; }
.lb-zoom .lb-btn { position: static; width: 44px; height: 44px; font-size: 22px; }
.lb-counter {
  position: absolute; z-index: 3; top: 24px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .14em; color: var(--muted);
  font-family: var(--display); font-style: italic;
}
.lb-cap {
  position: absolute; z-index: 3; bottom: 22px; left: 50%; transform: translateX(-50%);
  max-width: 70vw; text-align: center; font-size: 13px; color: var(--muted);
  background: rgba(16,15,13,.4); border-radius: 100px; padding: 7px 16px; backdrop-filter: blur(6px);
}
@media (max-width: 640px) {
  .lb-cap { display: none; }
  .lb-nav { width: 44px; height: 44px; }
}

/* =============================== FOCUS ================================= */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .qsubmit:focus-visible { outline-offset: 4px; }

/* ========================= REDUCED MOTION ============================= */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .chapter .bg { animation: none; transform: none; }
  .reveal, .chapter.in .reveal, .gallery.in .reveal,
  .tile, .gallery.in .tile { animation: none !important; transition: none !important; opacity: 1; transform: none; }
  .scrollcue .chev { animation: none; }
  .qstep.on, #thanks.on, .overlay.on, .agent-card { animation: none; }
  .tile:hover .tile-img { transform: none; }
}