/* ————————————————————————————————————————————————
   Gibson Taylor — Virtual Walkthroughs
   Palette drawn from the footage: blue-hour ink + tungsten brass
—————————————————————————————————————————————— */
:root{
  --ink:   #0A0E12;   /* page base — blue-hour black       */
  --dusk:  #141E28;   /* deep slate panels                 */
  --bone:  #EDE6DA;   /* warm off-white text               */
  --brass: #C8A468;   /* tungsten window-glow accent       */
  --haze:  #8494A0;   /* cool slate captions               */
  --line:  rgba(237,230,218,.16);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Archivo", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ background:var(--ink); color:var(--bone); }
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; }

/* ————— type ————— */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.02;
  letter-spacing:.005em;
  text-wrap:balance;
}
.display em{
  font-style:italic;
  font-weight:400;
  color:var(--brass);
}
h1.display{ font-size:clamp(3rem, 8.2vw, 7.2rem); }
h2.display{ font-size:clamp(2.4rem, 6.4vw, 5.6rem); }

.eyebrow{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--haze);
  margin-bottom:1.35rem;
}
.sub{
  font-size:clamp(.95rem, 1.25vw, 1.1rem);
  color:rgba(237,230,218,.82);
  max-width:34em;
  margin-top:1.5rem;
}

/* ————— preloader ————— */
.loader{
  position:fixed; inset:0; z-index:60;
  background:var(--ink);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2.2rem;
  transition:opacity .9s ease, visibility .9s;
}
.loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ text-align:center; }
.loader-name{
  display:block;
  font-family:var(--serif); font-weight:400;
  font-size:1.6rem; letter-spacing:.34em;
}
.loader-sub{
  display:block; margin-top:.6rem;
  font-size:.62rem; letter-spacing:.5em; color:var(--haze);
}
.loader-bar{
  width:min(320px, 60vw); height:1px;
  background:var(--line); overflow:hidden;
}
.loader-bar span{
  display:block; height:100%; width:0%;
  background:var(--brass);
  transition:width .25s ease;
}
.loader-status{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.22em; color:var(--haze);
}
.loader-status #loaderPct{ color:var(--bone); }

/* ————— fixed nav ————— */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.2rem, 3.5vw, 3rem);
  background:linear-gradient(to bottom, rgba(10,14,18,.72), transparent);
}
.brand{ display:flex; flex-direction:column; line-height:1.25; }
.brand-name{
  font-family:var(--serif); font-weight:500;
  font-size:1.05rem; letter-spacing:.24em;
}
.brand-sub{ font-size:.56rem; letter-spacing:.44em; color:var(--haze); }
.nav-right{ display:flex; align-items:center; gap:1.6rem; }
.timecode{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.18em; color:var(--haze);
  font-variant-numeric:tabular-nums;
}

/* ————— buttons ————— */
.btn{
  display:inline-block;
  font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  padding:.9em 1.9em;
  border-radius:999px;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-solid{
  background:var(--brass); color:#14100A;
}
.btn-solid:hover{ transform:translateY(-2px); background:#D9B87E; }
.btn-ghost{
  border:1px solid var(--line); color:var(--bone);
}
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }
.cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; }

/* ————— walkthrough stage ————— */
.walk{ position:relative; }   /* JS sets height */
.stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
}
#film{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  background:var(--ink);
}
.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(6,9,12,.55) 100%),
    linear-gradient(to top, rgba(6,9,12,.5), transparent 22%),
    linear-gradient(to bottom, rgba(6,9,12,.42), transparent 18%);
}
.grain{
  position:absolute; inset:-60px; pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-24px,16px); }
  50%{ transform:translate(18px,-22px); } 75%{ transform:translate(-14px,-12px); }
  100%{ transform:translate(0,0); }
}

/* ————— chapters ————— */
.chapter{
  position:absolute; z-index:5;
  max-width:min(640px, 82vw);
  opacity:0;
  pointer-events:none;
  will-change:opacity, transform;
}
.chapter .cta-row{ pointer-events:auto; }
/* c1 sits HIGH, not low. The opening frame is a drawing sheet whose building
   occupies the middle band and whose dimensions and title block occupy the
   bottom — the only clear field is the top. It also works on the frames that
   follow, where the same area is sky. */
/* c1 lives entirely in the drawing sheet's top band — the one part of the
   frame with no linework in it, and sky on every frame after the dissolve.
   Heading on ONE line, body copy beneath it, both clear of the building. */
.c1{ left:clamp(1.2rem,4vw,4rem);  top:clamp(4rem,8.5vh,6rem); bottom:auto;
     max-width:min(1180px, 92vw); }
.c1 .display{
  font-size:clamp(1.75rem, 3.9vw, 3.5rem);
  white-space:nowrap;
}
.c1 .display em{ white-space:nowrap; }
.c1 .sub{ max-width:34em; }
@media (max-width: 900px){
  /* nowrap would run off a phone; let it wrap and shrink instead. Sitting
     higher too — at the desktop offset the block ran to 41% and the button
     touched the roofline, which starts at 37.6%. */
  .c1 .display, .c1 .display em{ white-space:normal; }
  .c1 .display{ font-size:clamp(1.6rem, 7vw, 2.4rem); }
  .c1{ top:clamp(2.2rem, 5vh, 3.2rem); }
  .c1 .sub{ font-size:.92rem; max-width:26em; }
}
.c2{ left:clamp(1.2rem,4vw,4rem);  top:50%; transform:translateY(-50%); }
.c3{ right:clamp(1.2rem,5vw,5rem); bottom:clamp(5rem,12vh,8rem); text-align:right; }
.c3 .sub{ margin-left:auto; }
.c4{ left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; }
.c4 .sub{ margin-inline:auto; }
.c4 .cta-row{ justify-content:center; }

/* soft scrim behind text for legibility */
.chapter::before{
  content:""; position:absolute; inset:-3.2rem -3.6rem;
  background:radial-gradient(closest-side, rgba(8,11,15,.52), transparent 78%);
  z-index:-1;
}

/* ————— film rail ————— */
.rail{
  position:absolute; z-index:6;
  right:clamp(.9rem, 2.2vw, 2rem);
  top:50%; transform:translateY(-50%);
  height:min(42vh, 340px);
  display:flex; align-items:stretch; gap:.7rem;
}
.rail-line{
  position:relative; width:1px; background:var(--line);
}
.rail-head{
  position:absolute; left:50%; top:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--brass);
  transform:translate(-50%,-50%);
  box-shadow:0 0 12px rgba(200,164,104,.8);
}
.rail-stops{ list-style:none; position:relative; width:max-content; }
.rail-stops li{ position:absolute; left:0; }   /* JS sets top per stop */
.rail-stops button{
  display:flex; align-items:center; gap:.55rem;
  transform:translateY(-50%);
  padding:.25rem .1rem;
}
.rail-stops i{
  width:14px; height:1px; background:var(--haze);
  transition:background .3s, width .3s;
}
.rail-stops span{
  font-size:.6rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--haze);
  opacity:.65;
  transition:color .3s, opacity .3s;
}
.rail-stops button:hover span,
.rail-stops li.active span{ color:var(--brass); opacity:1; }
.rail-stops li.active i{ background:var(--brass); width:22px; }

/* ————— scroll hint ————— */
.hint{
  position:absolute; z-index:6;
  left:50%; bottom:1.6rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  transition:opacity .6s ease;
}
.hint span{
  font-size:.6rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--haze);
}
.hint i{
  width:1px; height:44px;
  background:linear-gradient(to bottom, var(--brass), transparent);
  animation:drip 1.8s ease-in-out infinite;
}
@keyframes drip{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ————— outro ————— */
.outro{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(4rem, 8vw, 6.5rem) clamp(1.2rem,4vw,3rem) 2.2rem;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(20,30,40,.85), transparent 70%),
    var(--ink);
}
.outro .display{ font-size:clamp(2.6rem, 6vw, 5.2rem); }
.outro-copy{
  max-width:36em; margin-top:1.6rem;
  color:rgba(237,230,218,.8);
}
.footnote{
  margin-top:2.4rem;
  font-size:.7rem; letter-spacing:.08em;
  color:var(--haze);
}
.foot{
  margin-top:3rem;
  font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(132,148,160,.55);
}

/* ————— below-the-fold bands ————— */
.band{ position:relative; padding:clamp(3.2rem, 6.5vw, 5.5rem) clamp(1.2rem, 4vw, 3rem); }
.wrap{ max-width:1180px; margin-inline:auto; }
.band .display{ font-size:clamp(2.2rem, 5vw, 4.4rem); }
.lead{
  max-width:44em; margin-top:1.6rem;
  font-size:clamp(1rem, 1.3vw, 1.15rem);
  color:rgba(237,230,218,.82);
}

/* light theme below the film — paper white with a whisper-gray divider band */
.light{
  background:#FAF8F4;
  color:#212730;
  --line:rgba(33,39,48,.13);
}
.light.alt{ background:#F2EEE7; }
.light .display em{ color:#9C7B3F; }
.light .eyebrow{ color:#6E7A85; }
.light .lead,
.light .features p,
.light .checks li{ color:rgba(33,39,48,.78); }
.light .features li{ border-top-color:rgba(33,39,48,.14); }
.light .num{ color:#9C7B3F; }
.light .tile-label{ color:#6E7A85; }
.light .tile-note{ color:rgba(110,122,133,.95); }
.light .filmstrip a{ border-color:rgba(33,39,48,.14); }
.light .checks li::before{ background:#9C7B3F; }
.light .why-media img{ border-color:rgba(33,39,48,.14); }

/* tour data tiles */
.stats{ padding-block:clamp(2.2rem, 4.5vw, 3.5rem); border-block:1px solid var(--line); }
.tiles{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(1.2rem, 3vw, 3rem);
}
.tile{ display:flex; flex-direction:column; gap:.45rem; }
.tile-label{
  font-size:.62rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--haze);
}
.tile-value{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 3rem); line-height:1;
}
.tile-note{ font-size:.78rem; color:rgba(132,148,160,.9); }

/* numbered features */
.features{
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem, 3vw, 2.6rem);
  margin-top:clamp(2rem, 4vw, 3rem);
}
.features li{
  border-top:1px solid var(--line);
  padding-top:1.4rem;
}
.features .num{
  font-family:var(--mono); font-size:.72rem;
  color:var(--brass); letter-spacing:.2em;
}
.features h3{
  font-family:var(--serif); font-weight:500;
  font-size:1.5rem; margin:.7rem 0 .5rem;
}
.features p{ font-size:.94rem; color:rgba(237,230,218,.75); max-width:34em; }

/* filmstrip gallery */
.filmstrip{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(.8rem, 1.6vw, 1.4rem);
  margin-top:clamp(1.8rem, 3.5vw, 2.8rem);
}
.filmstrip a{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line); border-radius:4px;
  transition:transform .35s ease, border-color .35s ease;
}
.filmstrip a:hover{ transform:translateY(-6px); border-color:var(--brass); }
.filmstrip img{
  display:block; width:100%; height:100%;
  aspect-ratio:16/10; object-fit:cover;
  filter:saturate(.96);
  transition:transform .6s ease;
}
.filmstrip a:hover img{ transform:scale(1.05); }
.filmstrip span{
  position:absolute; left:.9rem; bottom:.75rem;
  font-size:.6rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone);
  text-shadow:0 1px 8px rgba(6,9,12,.9);
}
.filmstrip a::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,9,12,.55), transparent 45%);
}
.filmstrip span{ z-index:1; }

/* quote band */
.quoteband{
  background:var(--dusk);
  border-block:1px solid var(--line);
  text-align:left;
}
.quoteband blockquote{
  font-size:clamp(1.9rem, 4.2vw, 3.6rem);
  max-width:22em;
}
.quoteband cite{
  display:block; margin-top:2rem; font-style:normal;
  font-size:.66rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--brass);
}

/* why it works */
.why-grid{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(2.5rem, 5vw, 5rem);
  align-items:center;
}
.why-media{ margin:0; }
.why-media img{
  display:block; width:100%; border-radius:4px;
  border:1px solid var(--line);
}
.checks{
  list-style:none; margin-top:2.2rem;
  display:flex; flex-direction:column; gap:1.05rem;
}
.checks li{
  position:relative; padding-left:2.1rem;
  font-size:.98rem; color:rgba(237,230,218,.85);
}
.checks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:1.2rem; height:1px; background:var(--brass);
}

/* ————— responsive ————— */
@media (max-width: 820px){
  .nav{ padding:1rem 1.1rem; }
  .timecode{ display:none; }
  .rail{ display:none; }
  .tiles{ grid-template-columns:1fr 1fr; }
  .features{ grid-template-columns:1fr; }
  .filmstrip{ grid-template-columns:1fr 1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .chapter{ max-width:88vw; }
  .c2, .c3, .c4{
    left:1.1rem; right:auto; top:auto; bottom:5rem;
    transform:none; text-align:left;
  }
  .c3 .sub, .c4 .sub{ margin-inline:0; }
  .c4 .cta-row{ justify-content:flex-start; }
}

@media (max-width: 480px){
  .brand-name{ font-size:.9rem; }
  .brand-sub{ font-size:.5rem; }
  .btn{ padding:.75em 1.3em; font-size:.62rem; letter-spacing:.16em; }
  .nav-right{ gap:.8rem; }
}

/* ————— reduced motion ————— */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .grain{ animation:none; }
  .hint i{ animation:none; height:24px; }
  .btn{ transition:none; }
}

/* ————— Snow House tour: 6 chapters. c6 is the closer now, so it takes the
   centred treatment c7 used to have on the Freeport build. ————— */
.c5{ left:clamp(1.2rem,4vw,4rem); bottom:clamp(5rem,12vh,8rem); }
.c6{ left:0; right:0; margin-inline:auto; bottom:14vh;
     max-width:min(680px,86vw); text-align:center; }
.c6 .sub{ margin-inline:auto; }
.c6 .cta-row{ justify-content:center; }
.filmstrip{ grid-template-columns:repeat(5,1fr); }
@media (max-width: 820px){
  .c5, .c6{ left:1.1rem; right:auto; bottom:5rem;
    transform:none; text-align:left; margin-inline:0; max-width:88vw; }
  .c6 .sub{ margin-inline:0; }
  .c6 .cta-row{ justify-content:flex-start; }
  .filmstrip{ grid-template-columns:1fr 1fr; }
}

/* ————— "The same building": the drawn/rendered pair and the sheet row ————— */
.lead-tight{ margin-top:clamp(1.8rem, 3vw, 2.6rem); }
.proof-pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.9rem, 2vw, 1.6rem);
  margin-top:clamp(2rem, 4vw, 3rem);
}
.proof-pair figure{ margin:0; }
.proof-pair img{
  width:100%; display:block; aspect-ratio:16/9; object-fit:cover;
  border:1px solid rgba(33,39,48,.14); border-radius:3px;
}
.proof-pair figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:#6E7A85; margin-top:.7rem;
}
.sheets{
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:clamp(.7rem, 1.4vw, 1.1rem);
  margin-top:clamp(1.2rem, 2.4vw, 1.8rem);
}
.sheets a{
  display:block; text-decoration:none;
  border:1px solid rgba(33,39,48,.14); border-radius:3px;
  overflow:hidden; background:#16233F;
  transition:transform .35s ease, border-color .35s ease;
}
.sheets a:hover{ transform:translateY(-4px); border-color:var(--brass); }
.sheets img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.sheets span{
  display:block; padding:.6rem .7rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(237,242,255,.72);
}
/* ————— chapter type legibility —————
   Chapter 1 is white linework on navy, so serif type sitting over it competed
   with the drawing. A soft dark halo on the glyphs lifts the words off any
   background without touching layout, and a gentle left scrim gives the
   left-anchored chapters somewhere to sit. */
.chapter .display,
.chapter .sub,
.chapter .eyebrow{
  text-shadow:
    0 1px 3px  rgba(6,9,12,.92),
    0 2px 20px rgba(6,9,12,.80),
    0 0   52px rgba(6,9,12,.60);
}
.stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(100deg,
    rgba(6,9,12,.62) 0%,
    rgba(6,9,12,.34) 28%,
    rgba(6,9,12,0)   58%);
}
.chapter{ z-index:2; }
@media (max-width: 820px){
  /* On a phone the frame is cropped hard and the linework runs right through
     the body copy, so the diagonal scrim stops helping. Darken both ends
     instead: c1 sits at the top, every other chapter sits at the bottom. */
  .stage::after{
    background:linear-gradient(180deg,
      rgba(6,9,12,.74) 0%,
      rgba(6,9,12,.34) 38%,
      rgba(6,9,12,.34) 58%,
      rgba(6,9,12,.80) 100%);
  }
}

/* ————— white-box previz: split-screen comparisons ————— */
.previz-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.9rem, 2vw, 1.6rem);
  margin-top:clamp(2rem, 4vw, 3rem);
}
.previz-grid figure{ margin:0; }
.previz-grid video{
  width:100%; display:block; aspect-ratio:16/9;
  border:1px solid rgba(33,39,48,.14); border-radius:3px;
  background:#0A0E12;
}
.previz-grid figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:#6E7A85; margin-top:.7rem;
}

@media (max-width: 820px){
  .proof-pair{ grid-template-columns:1fr; }
  .sheets{ grid-template-columns:1fr 1fr; }
  .previz-grid{ grid-template-columns:1fr; }
}

/* ————— mosaic gallery (reference-style: big feature + mixed cards) ————— */
.mosaic{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(.8rem, 1.6vw, 1.3rem);
  margin-top:clamp(1.8rem, 3.5vw, 2.8rem);
}
.mosaic a{
  position:relative; display:block; overflow:hidden;
  border:1px solid rgba(33,39,48,.14); border-radius:4px;
  transition:transform .35s ease, border-color .35s ease;
}
.mosaic a:hover{ transform:translateY(-6px); border-color:var(--brass); }
.mosaic img{
  display:block; width:100%; height:100%;
  aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s ease;
}
.mosaic a:hover img{ transform:scale(1.04); }
.mosaic .feature{ grid-column:span 2; grid-row:span 2; }
.mosaic .feature img{ aspect-ratio:auto; }
.mosaic a::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,9,12,.45), transparent 40%);
}
.mosaic span{
  position:absolute; left:.9rem; bottom:.8rem; z-index:1;
  font-size:.6rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--bone);
  background:rgba(10,14,18,.62);
  padding:.5em 1em; border-radius:999px;
  backdrop-filter:blur(4px);
}
@media (max-width: 820px){
  .mosaic{ grid-template-columns:1fr 1fr; }
  .mosaic .feature{ grid-column:span 2; grid-row:span 1; }
  .mosaic .feature img{ aspect-ratio:16/10; }
}

/* ————— cinema mode ————— */
.cinema-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
body.cinema .cinema-video{ opacity:1; }

.cinema-pill{
  position:fixed; left:50%; bottom:1.5rem; z-index:45;
  transform:translateX(-50%) translateY(16px);
  display:flex; align-items:center; gap:.65rem;
  padding:.7em 1.5em; border-radius:999px;
  background:rgba(10,14,18,.74);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(200,164,104,.45);
  font-size:.6rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone);
  opacity:0; pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
}
body.cinema .cinema-pill{ opacity:1; pointer-events:auto; transform:translateX(-50%); }
body.cinema .hint{ opacity:0 !important; }
.cinema-pill i{
  width:9px; height:11px;
  border-left:2.5px solid var(--brass);
  border-right:2.5px solid var(--brass);
}
.btn .play{ display:inline-block; margin-right:.55em; color:inherit; }

/* film embed replacing the why-section graphic */
.why-media video{
  display:block; width:100%;
  border-radius:4px; border:1px solid var(--line);
}
.light .why-media video{ border-color:rgba(33,39,48,.14); }

/* ————— sound toggle ————— */
.sound-btn{
  position:relative;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(200,164,104,.55);
  background:rgba(10,14,18,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:rgba(216,187,140,.95);
  font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.sound-btn:hover{ color:var(--brass); border-color:var(--brass); }
.sound-btn.on{
  color:var(--brass);
  border-color:var(--brass);
  background:rgba(10,14,18,.6);
}
.sound-btn::before{
  content:""; position:absolute; left:8px; right:8px; top:50%;
  height:1.5px; background:currentColor;
  transform:rotate(-35deg);
  transition:opacity .3s ease;
  z-index:1;
}
.sound-btn.on::before{ opacity:0; }
/* pulsing ring — plays while music is on, so it's unmistakable sound is live */
.sound-btn::after{
  content:""; position:absolute; inset:-7px;
  border-radius:50%;
  border:1px solid rgba(200,164,104,.6);
  opacity:0; transform:scale(.82);
  pointer-events:none;
}
.sound-btn.on::after{
  animation:soundPulse 1.9s ease-out infinite;
}
@keyframes soundPulse{
  0%{ opacity:.7; transform:scale(.82); }
  70%{ opacity:0; transform:scale(1.4); }
  100%{ opacity:0; transform:scale(1.4); }
}
/* static label naming the sound toggle, styled like the timecode beside it */
.sound-wrap{ display:flex; align-items:center; gap:.6rem; }
.music-label{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--haze);
  font-variant-numeric:tabular-nums;
}
@media (max-width:820px){
  .music-label{ display:none; }
}

/* ————— gallery lightbox ————— */
.lightbox{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,9,12,.93);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:0; transition:opacity .28s ease;
}
.lightbox.on{ opacity:1; }
.lightbox[hidden]{ display:none; }
.lb-stage{
  margin:0; max-width:min(1400px, 90vw);
  text-align:center;
}
.lb-stage img{
  max-width:100%; max-height:78vh;
  object-fit:contain; display:block; margin-inline:auto;
  border-radius:6px;
  border:1px solid rgba(200,164,104,.28);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.lb-capline{
  margin-top:1.1rem;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:1.1rem;
}
.lb-capline span{
  font-family:var(--serif); font-style:italic;
  font-size:1.15rem; color:var(--bone);
  letter-spacing:.02em;
}
.lb-close{
  position:absolute; top:1.2rem; right:1.4rem; z-index:2;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; line-height:1; color:var(--bone);
  background:rgba(10,14,18,.55);
  border:1px solid rgba(200,164,104,.4);
  transition:color .3s, border-color .3s;
}
.lb-close:hover{ color:var(--brass); border-color:var(--brass); }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--bone);
  background:rgba(10,14,18,.55);
  border:1px solid rgba(200,164,104,.4);
  transition:color .3s, border-color .3s;
}
.lb-nav:hover{ color:var(--brass); border-color:var(--brass); }
.lb-prev{ left:1.4rem; }
.lb-next{ right:1.4rem; }
@media (max-width:820px){
  .lb-nav{ width:38px; height:38px; }
  .lb-prev{ left:.7rem; }
  .lb-next{ right:.7rem; }
  .lb-stage{ max-width:94vw; }
}