/* ============================================================
   THE ARC — Enter Your Arc.
   One continuous shot, scrubbed by scroll.
   ============================================================ */

:root {
  --black: #050505;
  --charcoal: #101010;
  --stone: #8a857c;
  --offwhite: #f2efe9;
  --bronze: #a6753f;
  --bronze-dim: #8a5f31;
  --ink: #17150f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: auto; }

body {
  background: var(--black);
  color: var(--offwhite);
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

body.panel-open { overflow: hidden; }

.serif { font-family: 'Playfair Display', Georgia, serif; }

/* ---------- committed typography ----------
   Two voices, deliberately placed:
   · INTER (letterspaced brand "spacey" caps) — section labels, the statement
     lines, the display headlines, the mantra, and the doors title.
   · CINZEL (carved Roman capitals) — the substance: pillar names, the
     info-page body paragraphs, and the "Not everyone enters" doors line. */
.pillar-station h3,
#step-question,
#confirm-view h2 {
  font-family: 'Cinzel', 'Playfair Display', serif;
  letter-spacing: 0.05em;
}
.info-section p {
  font-family: 'Cinzel', 'Playfair Display', serif;
  letter-spacing: 0.02em;
}
/* the deliberate Inter voices (labels, statement lines, utility) */
.info-section p.info-label,
.info-section p.info-thesis,
.info-section p.info-muted,
.info-section p.info-descend { font-family: 'Inter', sans-serif; }

/* ---------- accessibility helpers ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px; left: 16px;
  z-index: 1000;
  background: var(--charcoal);
  color: var(--offwhite);
  border: 1px solid rgba(242, 239, 233, 0.3);
  padding: 10px 18px;
  font-size: 13px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

/* ---------- scroll track ---------- */

/* ---------- scroll tracks (two cinematic acts around the info page) ---------- */

#act1-space { height: 480vh; }
#act2-space { height: 250vh; }

/* ---------- the info page — a regular scrolling page ---------- */

#info-page {
  position: relative;
  z-index: 20;
  /* a solid black page that rises over the stage — hard transition, no fade */
  background: #080706;
  padding: 3vh 0 8vh;
}

.info-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 9vh 28px;
  text-align: center;
}
/* a little breathing room above THE ARC when the page fills the screen */
.info-section:first-child { padding-top: 13vh; }

/* standalone statement lines carry the brand's letterspaced sans —
   the same voice as the wordmark and ENTER YOUR ARC. */
.info-thesis {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 2.5vw, 30px);
  line-height: 1.85;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--offwhite);
}

/* .info-section p (below) is more specific than a bare .info-label,
   so scope the size/color here too or the 17px body rule wins. */
.info-section p.info-label {
  font-size: clamp(25px, 3.4vw, 40px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--bronze);
  margin-bottom: 20px;
}

.info-section h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.7vw, 32px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--offwhite);
  margin-bottom: 30px;
}

.info-section p {
  font-size: 17px;
  line-height: 1.85;
  color: rgba(242, 239, 233, 0.78);
}
.info-section p + p { margin-top: 22px; }

.info-line, .info-line em {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 400;
  font-size: clamp(17px, 2.1vw, 25px) !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--offwhite) !important;
}

.h2-sub {
  font-size: clamp(19px, 2.2vw, 27px) !important;
  color: rgba(242, 239, 233, 0.92) !important;
  margin-top: 34px;
}

/* the section's dominant title — THE ARC, larger than everything around it */
.info-section h2.info-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(38px, 6.6vw, 74px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--offwhite);
  margin: 0 0 30px;
}
.info-section p.info-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 2vw, 21px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.72);
  margin-bottom: 34px;
}

.info-wide { max-width: 960px; }

/* ---------- the six pillars — stations along The Path ----------
   A thin bronze line runs down the darkness; six stations alternate
   left and right of it, each marked by a diamond on the line and an
   enormous hollow Roman numeral behind the name. Dust drifts through. */

.pillar-rows {
  position: relative;
  margin-top: 5vh;
}

/* The Path itself — a thin bronze line winding between the stations.
   Drawn in a stretchable viewBox so the design is identical at every
   screen size; non-scaling stroke keeps it hairline. */
.path-snake {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.path-snake path { fill: none; }
.snake-base {
  stroke: rgba(166, 117, 63, 0.32);
  stroke-width: 1.2;
}
/* the travelling light — draws down the path as you scroll */
.snake-lit {
  stroke: rgba(255, 216, 160, 1);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 5px rgba(255, 200, 130, 1));
}

.pillar-dust-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
#info-dust {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
}

.pillar-row {
  position: relative;
  padding: 6.5vh 0;
  z-index: 1;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar-row.in { opacity: 1; transform: none; }

/* the station's diamond sits on the path's bend
   (nth-child counts the svg + dust layers: stations are children 3–8) */
.pillar-row::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #0c0b0a;
  border: 1px solid rgba(166, 117, 63, 0.8);
}
.pillar-row:nth-child(odd)::after { left: 62%; }
.pillar-row:nth-child(even)::after { left: 38%; }

/* the diamond ignites when the travelling light reaches it */
.pillar-row::after {
  transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.pillar-row.lit::after {
  background: rgba(255, 214, 156, 0.95);
  border-color: rgba(255, 224, 176, 1);
  box-shadow: 0 0 12px 2px rgba(255, 198, 120, 0.85);
}

.pillar-station {
  position: relative;
  width: min(46%, 380px);
}
.pillar-row:nth-child(odd) .pillar-station { margin-left: auto; margin-right: 2%; text-align: right; }
.pillar-row:nth-child(even) .pillar-station { margin-right: auto; margin-left: 2%; text-align: left; }

/* the illustration: an enormous hollow numeral, rendered not photographed */
.pillar-rows .pillar-num {
  position: absolute;
  top: 50%;
  transform: translateY(-56%);
  font-size: clamp(84px, 17vw, 210px);
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(166, 117, 63, 0.52);
  user-select: none;
  z-index: -1;
}
.pillar-row:nth-child(odd) .pillar-num { right: -4%; }
.pillar-row:nth-child(even) .pillar-num { left: -4%; }
@supports not (-webkit-text-stroke: 1px black) {
  .pillar-num { color: rgba(166, 117, 63, 0.14); }
}

.pillar-station h3 {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: clamp(19px, 3.6vw, 46px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--offwhite);
  margin-bottom: 12px;
}

.pillar-rows .pillar-tag {
  font-size: clamp(14px, 1.9vw, 22px);
  color: rgba(242, 239, 233, 0.68);
}

@media (prefers-reduced-motion: reduce) {
  .pillar-row { opacity: 1; transform: none; transition: none; }
}

.info-muted {
  margin-top: 34px;
  font-size: 12px !important;
  letter-spacing: 0.18em;
  color: rgba(242, 239, 233, 0.4) !important;
}

.info-descend {
  margin-top: 10vh;
  font-size: 13px !important;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: rgba(166, 117, 63, 0.85) !important;
}

/* ---------- stage ---------- */

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--black);
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.scene img,
.scene video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* the far shot carries the wordmark near the image's top — on wide /
   fullscreen viewports, bias the cover-crop toward the top so the mark
   survives and the crop comes out of the dark floor instead.
   (coverPoint() in main.js mirrors this 15% alignment for the glow.) */
#scene-monument img,
#scene-monument video { object-position: 50% 15%; }

/* light spill — the doorway's light falling down the steps and through
   the passage: a narrow vertical column, so the monument's outer stone
   stays untouched; screen blend keeps the blacks black */
.light-spill {
  position: absolute;
  width: 46vmin;
  height: 110vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(255, 214, 156, 0.48) 0%,
    rgba(255, 190, 120, 0.20) 30%,
    rgba(214, 150, 84, 0.07) 55%,
    transparent 74%);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
}

/* entrance glow — pulses, easter eggs, cursor bloom */
.entrance-glow {
  position: absolute;
  width: 46vmin;
  height: 60vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(255, 226, 178, 0.85) 0%,
    rgba(255, 200, 130, 0.35) 32%,
    rgba(255, 170, 90, 0.08) 60%,
    transparent 75%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

/* ---------- shot 5 · fire ---------- */

#scene-fire { background: #030202; }

#fire-glow {
  position: absolute;
  left: 50%; bottom: -28vh;
  width: 130vmin; height: 90vmin;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(255, 138, 48, 0.42) 0%,
    rgba(214, 92, 24, 0.20) 35%,
    rgba(120, 40, 8, 0.08) 60%,
    transparent 75%);
  filter: blur(6px);
}

#fire-core {
  position: absolute;
  left: 50%; bottom: -6vh;
  width: 34vmin; height: 22vmin;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(255, 196, 110, 0.55) 0%,
    rgba(255, 130, 40, 0.25) 45%,
    transparent 72%);
  filter: blur(10px);
}

/* ---------- shot 6 · transformation ---------- */

#scene-dawn { background: #060708; }

#dawn-cold {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 22% 30%, rgba(90, 120, 160, 0.16) 0%, transparent 45%),
    radial-gradient(ellipse at 74% 62%, rgba(70, 100, 150, 0.13) 0%, transparent 40%),
    linear-gradient(190deg, #0a0d12 0%, #0d1017 55%, #07080b 100%);
}

#dawn-warm {
  position: absolute; inset: 0;
  opacity: 0;
  background:
    linear-gradient(to top, rgba(214, 150, 80, 0.30) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 88%, rgba(255, 190, 120, 0.35) 0%, rgba(190, 120, 60, 0.12) 40%, transparent 65%),
    linear-gradient(190deg, #171310 0%, #221a12 55%, #120d08 100%);
}

#dawn-sun {
  position: absolute;
  left: 50%; bottom: 4vh;
  width: 90vmin; height: 55vmin;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(255, 214, 150, 0.5) 0%,
    rgba(255, 180, 110, 0.16) 40%,
    transparent 70%);
  mix-blend-mode: screen;
  filter: blur(4px);
  opacity: 0;
}

/* ---------- bloom ---------- */

#white-flash {
  position: absolute;
  inset: 0;
  background: #f7f4ec;
  opacity: 0;
  pointer-events: none;
}

/* ---------- text beats ---------- */

#beats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.beat {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 820px);
  text-align: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.beat p.serif {
  font-size: clamp(26px, 4.4vw, 52px);
  font-weight: 400;
  line-height: 1.32;
}
.beat p.serif + p.serif { margin-top: 0.55em; }

.beat p.sub {
  margin-top: 1.1em;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 300;
}

.beat-dark { color: var(--ink); }
.beat-light { color: var(--offwhite); }

/* the village line speaks in the brand's letterspaced sans */
#beat-village p.serif {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.9vw, 23px);
  line-height: 2.1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
#beat-village p.serif + p.serif { margin-top: 1em; }

/* "You will become someone." — a verdict in the dark before the doors */
#beat-become p.serif { text-shadow: 0 2px 24px rgba(5, 5, 5, 0.9); }
#beat-become .become-sub {
  margin-top: 1em;
  font-size: clamp(18px, 2.4vw, 28px);
  color: rgba(242, 239, 233, 0.82);
}

.beat-pillar {
  color: #3d382e;
  top: 72%;
}
.beat-pillar h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5.4vw, 66px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}
.beat-pillar p {
  margin-top: 0.6em;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(16px, 2vw, 24px);
}

/* over the living temple video, the carved names read in light */
body.has-videos .beat-pillar {
  color: var(--offwhite);
  text-shadow: 0 1px 14px rgba(5, 5, 5, 0.75), 0 0 44px rgba(5, 5, 5, 0.5);
}

/* ---------- atmosphere ---------- */

#vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 52%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
}

#particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

#grain {
  position: absolute; inset: -100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.055;
  pointer-events: none;
  animation: grain-shift 0.9s steps(3) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-38px, 24px); }
  66%  { transform: translate(26px, -30px); }
  100% { transform: translate(0, 0); }
}

#beam {
  position: absolute;
  width: 3px;
  height: 22vh;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 244, 224, 0.75) 30%,
    #fff7e8 55%,
    rgba(255, 236, 200, 0.5) 80%,
    transparent 100%);
  filter: blur(0.6px);
  box-shadow: 0 0 22px 4px rgba(255, 226, 178, 0.35);
  opacity: 0;
  pointer-events: none;
}

#intro-black {
  position: absolute; inset: 0;
  background: #000;
  pointer-events: none;
}

/* ---------- scroll cue (appears after resting a while) ---------- */

#scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 4.5vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}

#cue-word {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: rgba(242, 239, 233, 1);
  text-shadow: 0 1px 14px rgba(5, 5, 5, 1), 0 0 4px rgba(5, 5, 5, 0.8);
}

#cue-line {
  position: relative;
  width: 2.5px;
  height: 54px;
  border-radius: 1.5px;
  background: rgba(242, 239, 233, 0.4);
  overflow: hidden;
}

#cue-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: -22px;
  width: 2.5px;
  height: 22px;
  border-radius: 1.5px;
  background: linear-gradient(to bottom, transparent, rgba(255, 226, 178, 1));
  box-shadow: 0 0 10px rgba(255, 226, 178, 0.95);
  animation: cue-descend 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes cue-descend {
  0%   { transform: translateY(0); opacity: 0; }
  22%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(72px); opacity: 0; }
}

#cue-arrow {
  width: 13px;
  height: 13px;
  margin-top: -6px;
  border-right: 2.5px solid rgba(242, 239, 233, 1);
  border-bottom: 2.5px solid rgba(242, 239, 233, 1);
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 6px rgba(5, 5, 5, 0.9));
  animation: cue-nod 2.4s ease-in-out infinite;
}

@keyframes cue-nod {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.7; }
  55%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #cue-line::after, #cue-arrow { animation: none; }
}

/* ---------- shot 7 UI ---------- */

body.panel-open #doors-ui { opacity: 0; }

/* a soft dark pool behind the CTA cluster so the doorway beam never
   drowns the words — revealed by JS together with the text */
#doors-scrim {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, 96vw);
  height: 58vh;
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(5, 4, 3, 0.72) 0%,
    rgba(5, 4, 3, 0.5) 42%,
    rgba(5, 4, 3, 0.22) 66%,
    transparent 82%);
  opacity: 0;
  pointer-events: none;
}

/* ---------- persistent corner CTA ---------- */

#apply-corner {
  position: fixed;
  top: 22px;
  right: 28px;
  z-index: 400;
  padding: 10px 14px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: rgba(242, 239, 233, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.7);
  /* backwards fill: hidden through the intro delay, then hands opacity
     control to JS (which fades it out when the main CTA is on screen) */
  animation: corner-in 1.2s ease 2.4s backwards;
  transition: color 0.4s ease;
}
#apply-corner::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  width: 58%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(214, 174, 110, 0.85) 50%,
    transparent 100%);
  transition: width 0.5s ease;
}
#apply-corner:hover, #apply-corner:focus-visible {
  color: #fff6e9;
  outline: none;
}
#apply-corner:hover::after, #apply-corner:focus-visible::after { width: 92%; }
@keyframes corner-in { from { opacity: 0; } to { opacity: 1; } }
body.panel-open #apply-corner { opacity: 0 !important; pointer-events: none; }

#doors-ui {
  position: fixed;
  inset: 0;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}

/* the official lockup (transparent, brand off-white) replaces the
   typeset title — same mark that crowns the opening monument shot */
/* logo pinned near the top, out of the centring flow, so the button
   alone owns the vertical centre of the frame */
#doors-title {
  position: absolute;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(190px, 27vmin, 300px);
  height: auto;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* description floats just above the centred button */
#doors-line {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 7vh);
  transform: translateX(-50%);
  width: min(580px, 86vw);
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: rgba(242, 239, 233, 0.85);
  opacity: 0;
}

/* the one interaction on the site — no box at all. Carved Cinzel caps
   with a single gold hairline beneath: the words themselves are the
   monument's inscription, and the underline is the hint of gold.
   (This is the house CTA style — the application panel follows it.) */
#apply-btn {
  position: relative;
  padding: 16px 34px 24px;
  background: transparent;
  border: none;
  color: #f3ead9;
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: clamp(27px, 3.4vw, 41px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  cursor: pointer;
  opacity: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.6);
  transition: color 0.45s ease, text-shadow 0.45s ease;
}
/* the fine gold hairline, fading at both ends like light on an edge */
#apply-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(214, 174, 110, 0.9) 30%,
    rgba(236, 200, 138, 1) 50%,
    rgba(214, 174, 110, 0.9) 70%,
    transparent 100%);
  transition: width 0.55s ease;
}
#apply-btn:hover, #apply-btn:focus-visible {
  color: #fff8ec;
  text-shadow:
    0 0 26px rgba(226, 190, 130, 0.4),
    0 2px 18px rgba(0, 0, 0, 0.85);
  outline: none;
}
#apply-btn:hover::after, #apply-btn:focus-visible::after { width: 88%; }

/* footnote pinned just below the centred button — sits over the bright
   doorway beam, so it needs real contrast to stay legible */
#doors-foot {
  position: absolute;
  left: 50%;
  top: calc(50% + 8.5vh);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: rgba(242, 239, 233, 0.95);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 1), 0 0 22px rgba(0, 0, 0, 0.95);
  opacity: 0;
}

/* ---------- application panel ---------- */

#apply-panel {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(8, 8, 8, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.7s ease;
}
#apply-panel.visible { opacity: 1; }

#panel-close {
  position: absolute;
  top: 22px; right: 26px;
  background: none;
  border: none;
  color: rgba(242, 239, 233, 0.45);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px;
}
#panel-close:hover, #panel-close:focus-visible { color: var(--offwhite); outline: none; }

#panel-inner {
  width: min(92vw, 640px);
  padding: 24px;
}

#step-label {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 22px;
}

#step-question {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--offwhite);
  min-height: 2.4em;
}

#step-field { margin-top: 34px; }

#step-field input,
#step-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(242, 239, 233, 0.25);
  color: var(--offwhite);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 21px;
  padding: 10px 2px 14px;
  outline: none;
  transition: border-color 0.4s ease;
  border-radius: 0;
}
#step-field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
#step-field input:focus, #step-field textarea:focus { border-bottom-color: var(--bronze); }
#step-field input::placeholder, #step-field textarea::placeholder { color: rgba(242, 239, 233, 0.25); }

.choice-row { display: flex; gap: 16px; flex-wrap: wrap; }
.choice-btn {
  flex: 1 1 200px;
  padding: 20px 22px;
  background: transparent;
  border: 1px solid rgba(242, 239, 233, 0.25);
  color: var(--offwhite);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.choice-btn:hover, .choice-btn:focus-visible {
  border-color: var(--bronze);
  background: rgba(166, 117, 63, 0.12);
  outline: none;
}

#step-error {
  margin-top: 14px;
  min-height: 1.3em;
  font-size: 13px;
  color: #c88b5a;
}

#step-actions {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#step-back {
  background: none;
  border: none;
  color: rgba(242, 239, 233, 0.4);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  cursor: pointer;
  padding: 10px 4px;
}
#step-back:hover, #step-back:focus-visible { color: var(--offwhite); outline: none; }
#step-back[hidden] { visibility: hidden; display: block; }

#step-next {
  padding: 14px 42px;
  background: var(--bronze);
  border: none;
  color: var(--offwhite);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  cursor: pointer;
  transition: background-color 0.35s ease;
}
#step-next:hover, #step-next:focus-visible { background: var(--bronze-dim); outline: none; }
#step-next:disabled { opacity: 0.55; cursor: wait; }

#step-dots {
  margin-top: 38px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
#step-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(242, 239, 233, 0.18);
  transition: background-color 0.4s ease;
}
#step-dots span.done { background: rgba(166, 117, 63, 0.55); }
#step-dots span.now { background: var(--bronze); }

#confirm-view { text-align: center; }
#confirm-view h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  color: var(--offwhite);
}
#confirm-view p {
  margin-top: 18px;
  font-size: 17px;
  color: rgba(242, 239, 233, 0.75);
}
/* house CTA style — carved caps over a gold hairline, no box */
#book-call {
  position: relative;
  margin-top: 34px;
  padding: 14px 30px 20px;
  background: none;
  border: none;
  color: #f3ead9;
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  cursor: pointer;
  transition: color 0.4s ease;
}
#book-call::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(214, 174, 110, 0.9) 50%,
    transparent 100%);
  transition: width 0.5s ease;
}
#book-call:hover, #book-call:focus-visible { color: #fff8ec; outline: none; }
#book-call:hover::after, #book-call:focus-visible::after { width: 88%; }
#book-note { font-size: 13px !important; color: rgba(242, 239, 233, 0.45) !important; margin-top: 16px !important; }

/* ---------- calendly modal ---------- */

#calendly-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(5, 5, 5, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
#calendly-frame {
  width: min(94vw, 900px);
  height: min(88vh, 760px);
  border: 1px solid rgba(242, 239, 233, 0.15);
  background: #fff;
}
#calendly-close {
  position: absolute;
  top: 22px; right: 26px;
  background: none;
  border: none;
  color: rgba(242, 239, 233, 0.6);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px;
}
#calendly-close:hover { color: var(--offwhite); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #grain { animation: none; }
  #particles { display: none; }
  .scene { transition: opacity 0.6s ease; }
  #apply-panel { transition: none; }
}