/* ========================================================================
   ALTER — A Ritual of Freedom
   Light room: ivory ground, warm caustic light moving across every surface.
   ======================================================================== */

:root {
  --ivory: #F8F5EF;
  --sand: #D8C6AE;
  --sand-soft: #EEE6D9;
  --clay: #99320A;
  --clay-bright: #C2430E;
  --brown: #532B1B;
  --brown-soft: rgba(83, 43, 27, 0.72);
  --brown-faint: rgba(83, 43, 27, 0.70);   /* 4.69:1 on ivory - was 0.48 / 2.65:1 */

  --font-display: 'Cormorant Garamond', 'Didot', Georgia, serif;
  --font-statement: 'Montserrat', 'Inter', sans-serif;
  --font-sans: 'Montserrat', 'Inter', sans-serif;

  --max-width: 1200px;
  --section-pad: clamp(5rem, 12vw, 9rem);
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ivory);
  color: var(--brown);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  /* Cormorant ships old-style figures, where 1 is a short bar on the
     baseline: "11 Oct" read as "II Oct". Every number stands at cap height. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  overflow-x: hidden;
  cursor: none;
}

@media (max-width: 900px), (hover: none) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

section[id] { scroll-margin-top: 90px; }

::selection {
  background: var(--clay);
  color: var(--ivory);
}

/* 14,000px of page behind a fixed nav: a keyboard user should not have to tab
   through the whole header on every visit. Hidden until it is focused. */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 10001;
  padding: 0.75rem 1.5rem;
  background: var(--clay);
  color: var(--ivory);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0 0 6px 6px;
  transition: transform 0.25s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }
main:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}
.btn:focus-visible, .nav-cta:focus-visible {
  outline-offset: 3px;
  border-radius: 999px;
}

/* ---------------- Projection canvas: the room's shared light ---------------- */
.projection-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* ---------------- Progress thread ---------------- */
.progress-thread {
  position: fixed;
  top: 90px;
  bottom: 24px;
  left: 22px;
  width: 1px;
  background: rgba(83,43,27,0.12);
  z-index: 400;
  display: none;
}
.progress-thread-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: var(--clay);
  box-shadow: 0 0 10px rgba(153,50,10,0.5);
  transform-origin: top;
}
@media (min-width: 1160px) {
  .progress-thread { display: block; }
}

/* ---------------- Grain overlay ---------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- Custom cursor ---------------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--clay);
  transition: opacity 0.2s ease;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(83, 43, 27, 0.3);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
}
.cursor-ring.is-active {
  width: 60px; height: 60px;
  border-color: var(--clay);
}

/* ---------------- Preloader ---------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader-mark {
  width: 56px;
  height: auto;
  object-fit: contain;
  animation: pulseMark 1.4s ease-in-out infinite;
}
.preloader-word {
  width: 110px;
  height: auto;
}
.preloader-count {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--brown-faint);
  margin-top: 0.25rem;
  transition: opacity 0.3s ease;
}
.preloader.is-ready .preloader-count { opacity: 0; height: 0; }
.preloader-enter {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--brown-faint);
  border-radius: 999px;
  padding: 0.9rem 2.25rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease;
}
.preloader-enter span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--brown);
}
.preloader-enter small {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown-faint);
}
.preloader-enter:hover { border-color: var(--clay); }
.preloader.is-ready .preloader-enter {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---------------- Sound toggle ---------------- */
.sound-toggle {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 600;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(248,245,239,0.92);
  border: 1px solid rgba(83,43,27,0.15);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.2s ease;
  box-shadow: 0 8px 24px rgba(83,43,27,0.18);
}
.sound-toggle.is-visible { opacity: 1; pointer-events: auto; }
.sound-toggle:hover { transform: scale(1.08); }
/* A solid ivory disc reads as a hole punched in the dark sections. Over dark
   ground the control inverts with everything else. */
.over-dark .sound-toggle {
  background: rgba(21, 11, 6, 0.55);
  border-color: rgba(248, 245, 239, 0.32);
}
.over-dark .sound-toggle .sound-toggle-bars i { background: var(--sand); }

.sound-toggle-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}
.sound-toggle-bars i {
  display: block;
  width: 3px;
  background: var(--clay);
  border-radius: 2px;
  animation: soundBar 1s ease-in-out infinite;
}
.sound-toggle-bars i:nth-child(1) { height: 7px; animation-delay: -0.6s; }
.sound-toggle-bars i:nth-child(2) { height: 15px; animation-delay: -0.2s; }
.sound-toggle-bars i:nth-child(3) { height: 10px; animation-delay: -0.9s; }
@keyframes soundBar {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.sound-toggle.is-muted .sound-toggle-bars i {
  animation-play-state: paused;
  transform: scaleY(0.25);
  opacity: 0.4;
}
@keyframes pulseMark {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------------- Header / Nav ---------------- */
/* The header used to set its own horizontal padding, which put the logo on a
   left edge of its own - 56px, while every section's content column began at
   120px. Two unrelated left edges stacked in the same 120px. It now uses the
   same container as the sections, so the mark and the copy share one edge at
   every width. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 1.4rem 1.5rem;
  background: linear-gradient(to bottom, rgba(248,245,239,0.92), rgba(248,245,239,0));
  transition: background 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header.is-scrolled {
  background: rgba(248, 245, 239, 0.88);
  backdrop-filter: blur(10px);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  box-shadow: 0 1px 0 rgba(83, 43, 27, 0.1);
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.brand-mark {
  width: 26px;
  height: auto;
  object-fit: contain;
}
.brand-word-img {
  width: 68px;
  height: auto;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.nav-link {
  transition: color 0.4s ease;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-soft);
  position: relative;
  padding-bottom: 4px;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--clay);
  transition: width 0.3s ease;
}
.nav-link:hover { color: var(--brown); }
.nav-link:hover::after { width: 100%; }
.nav-cta {
  border: 1px solid var(--brown-faint);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  color: var(--brown);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--clay); border-color: var(--clay); color: var(--ivory); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--brown);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary {
  background: var(--clay);
  color: var(--ivory);
  border-color: var(--clay);
  box-shadow: 0 8px 24px rgba(153, 50, 10, 0.25);
}
.btn-primary:hover {
  background: var(--clay-bright);
  border-color: var(--clay-bright);
  box-shadow: 0 12px 28px rgba(153, 50, 10, 0.32);
}
.btn-ghost {
  color: var(--brown);
  border-color: var(--brown-faint);
}
.btn-ghost:hover {
  border-color: var(--clay);
  color: var(--clay);
}

/* ---------------- Statement type ---------------- */
.statement {
  font-family: var(--font-statement);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
}
.statement-label {
  font-family: 'Space Mono', var(--font-statement), monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-faint);
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 6rem;
  overflow: hidden;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  z-index: 0;
  opacity: 0.28;
  filter: sepia(0.25) saturate(1.1) contrast(1.02) brightness(1.25) blur(1.5px);
}
.hero-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 75% 60% at 50% 42%, rgba(248,245,239,0.55) 0%, rgba(248,245,239,0.88) 74%),
    linear-gradient(180deg, rgba(248,245,239,0.82) 0%, rgba(248,245,239,0.6) 30%, rgba(248,245,239,0.65) 65%, rgba(248,245,239,0.94) 100%);
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 1;
}
.hero-glow--a {
  width: 520px; height: 520px;
  top: -12%; left: -10%;
  background: rgba(153, 50, 10, 0.1);
  animation: driftA 16s ease-in-out infinite;
}
.hero-glow--b {
  width: 460px; height: 460px;
  bottom: -18%; right: -8%;
  background: rgba(216, 198, 174, 0.55);
  animation: driftB 20s ease-in-out infinite;
}
.hero-glow--c {
  width: 520px; height: 520px;
  top: 8%; left: 50%;
  transform: translateX(-50%);
  background: rgba(153, 50, 10, 0.1);
  filter: blur(120px);
}
@keyframes driftA {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(60px, 40px); }
}
@keyframes driftB {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(-50px, -30px); }
}

.flow-path {
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1.25rem;
}
.hero-statement {
  font-size: clamp(2.1rem, 6.4vw, 3.6rem);
  color: var(--brown);
  margin-bottom: 0.5rem;
}
.hero-statement .accent { color: var(--clay); }
.kinetic-word {
  display: inline-block;
  will-change: transform, opacity;
}
.logo-morph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.05em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 6.5vw, 3.4rem);
  letter-spacing: 0.22em;
  color: var(--brown);
  z-index: 3;
  perspective: 400px;
  opacity: 0;
}
.morph-letter {
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  color: var(--clay);
}
.logo-particles {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  z-index: 1;
}
.particle {
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clay-bright), transparent 70%);
  filter: blur(0.3px);
}
.hero-copy {
  margin: 1.75rem auto 0;
  max-width: 46ch;
  font-size: 1rem;
  font-weight: 300;
  color: var(--brown-soft);
}
.hero-actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brown-faint);
}
.scroll-cue-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--clay), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------------- Section base ---------------- */
.section {
  position: relative;
  padding: var(--section-pad) 1.5rem;
}
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
  color: var(--brown);
  text-wrap: balance;
}
.section-lede {
  /* The CSS ch unit is the width of "0", which in Montserrat is ~17% wider than
     the average lowercase letter - so 62ch was really 72 characters a line.
     56ch lands at about 65, which is the measure this face reads best at. */
  max-width: 56ch;
  font-size: 1.18rem;
  color: var(--brown-soft);
  font-weight: 300;
}

/* ---------------- Reveal animation ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.16,.84,.44,1), transform 0.9s cubic-bezier(.16,.84,.44,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
h2.section-title.reveal {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.16,.84,.44,1);
}
h2.section-title.reveal.is-visible {
  clip-path: inset(0 0% 0 0);
}

/* ---------------- Events / Ticket ---------------- */
.events { background: transparent; }
.ticket {
  margin-top: 3rem;
  max-width: 780px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: stretch;
  background: linear-gradient(155deg, var(--brown), #3c1f14);
  border-radius: 8px;
  box-shadow: 0 30px 70px rgba(83, 43, 27, 0.28);
  overflow: hidden;
}
.ticket-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 2.5rem 2rem;
  min-width: 140px;
  text-align: center;
}
.ticket-day {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  color: var(--ivory);
}
.ticket-year {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--sand);
}
.ticket-stub {
  position: relative;
  width: 1px;
  background-image: linear-gradient(to bottom, rgba(216,198,174,0.35) 60%, transparent 0%);
  background-size: 1px 12px;
  background-repeat: repeat-y;
}
.ticket-stub::before,
.ticket-stub::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 22px; height: 22px;
  background: var(--ivory);
  border-radius: 50%;
  transform: translateX(-50%);
}
.ticket-stub::before { top: -11px; }
.ticket-stub::after { bottom: -11px; }
.ticket-body {
  padding: 2.5rem clamp(1.5rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.ticket-status {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
}
.ticket-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--ivory);
}
.ticket-location {
  color: rgba(248, 245, 239, 0.7);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.events-note {
  margin-top: 1.75rem;
  font-size: 0.9rem;
  color: var(--brown-soft);
}
.inline-link {
  color: var(--clay);
  border-bottom: 1px solid rgba(153,50,10,0.35);
  transition: border-color 0.3s ease;
}
.inline-link:hover { border-color: var(--clay); }

/* ---------------- Concept / Pillars ---------------- */
.concept { background: transparent; overflow: hidden; }
.section-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}
.section-glow--concept {
  top: -10%;
  right: -12%;
  background: rgba(153, 50, 10, 0.08);
}
.concept .section-inner {
  position: relative;
  z-index: 1;
}

/* ---------------- No two nights / modality strip ---------------- */
/* ---------------- Experience / Feature grid ---------------- */
.experience {
  background: transparent;
  position: relative;
  overflow: hidden;
}
.experience .section-inner { position: relative; z-index: 1; }

/* ---------------- Threshold (the one dark beat) ---------------- */
.threshold {
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #150B06;
  overflow: hidden;
}
.threshold-pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clay-bright);
  box-shadow: 0 0 40px 10px rgba(212, 82, 15, 0.5);
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(0.8); opacity: 0.6; box-shadow: 0 0 30px 8px rgba(212, 82, 15, 0.35); }
  50% { transform: scale(1.6); opacity: 1; box-shadow: 0 0 60px 18px rgba(212, 82, 15, 0.6); }
}
/* Crossing is the one thing this section says, so it is the one thing it does:
   a light opens from the centre and the words spread apart as you pass through. */
.threshold::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vw;
  height: 120vw;
  max-width: 1400px;
  max-height: 1400px;
  margin: -60vw 0 0 -60vw;
  border-radius: 50%;
  pointer-events: none;
  /* screen, so it lifts the image rather than tinting it - a clay wash at any
     opacity simply disappears into a photograph that is already warm. */
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 216, 172, 0.55) 0%, rgba(214, 96, 30, 0.26) 36%, transparent 68%);
  opacity: 0;
  transform: scale(0.12);
  transition: opacity 2.4s ease, transform 2.8s cubic-bezier(.16,.84,.44,1);
}
.threshold.is-crossed::after { opacity: 1; transform: scale(1); }

.threshold-text {
  position: relative;
  z-index: 1;
  margin-top: 8rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  letter-spacing: 0.1em;
  color: rgba(248, 245, 239, 0.72);
  opacity: 0;
  transition: letter-spacing 2.6s cubic-bezier(.16,.84,.44,1), opacity 1.8s ease;
}
.threshold.is-crossed .threshold-text { opacity: 1; letter-spacing: 0.42em; }

/* ---------------- Glimpse ---------------- */
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* ---------------- Facilitator ---------------- */
.facilitator { background: transparent; }
.facilitator-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.facilitator-panel {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 20%, rgba(212,82,15,0.3), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(216,198,174,0.12), transparent 55%),
    linear-gradient(160deg, var(--brown), #2b160d);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 70px rgba(83, 43, 27, 0.28);
}
.facilitator-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  filter: sepia(0.24) saturate(1.2) brightness(0.82) contrast(1.18);
  transform: scale(1.06);
  transition: transform 8s ease;
}
.facilitator-visual.is-visible .facilitator-photo { transform: scale(1); }
.facilitator-photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(43,22,14,0.10) 0%, rgba(43,22,14,0.58) 100%),
    linear-gradient(160deg, rgba(153,50,10,0.26), transparent 55%);
  box-shadow: inset 0 0 90px rgba(43,22,14,0.6);
}

.facilitator-role {
  letter-spacing: 0.04em;
  color: var(--brown-soft);
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
}
.facilitator-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--brown);
  border-left: 2px solid var(--clay);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 1.75rem 0;
  max-width: 48ch;
}

/* ---------------- Integration (the second dark beat) ---------------- */
.integration {
  position: relative;
  min-height: 118svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #241209, #150B06 75%);
  overflow: hidden;
  text-align: center;
  padding: 6rem 1.5rem 4.5rem;
}
.integration-sweep {
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(212,82,15,0.09) 60deg, transparent 140deg, rgba(216,198,174,0.06) 220deg, transparent 320deg);
  animation: sweepRotate 34s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes sweepRotate {
  to { transform: rotate(360deg); }
}
.integration-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
.integration::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(21,11,6,0.55) 80%, rgba(21,11,6,0.85) 100%);
  pointer-events: none;
}
.eyebrow--light { color: var(--sand); }
.section-title--light { color: var(--ivory); }
.integration-copy {
  color: rgba(248,245,239,0.68);
  font-size: 1.18rem;
  margin-top: 1.25rem;
}

/* ---------------- Join ---------------- */
/* The page opens in the dark and now closes there too. It also breaks what was
   5,700px of unbroken ivory from the facilitator down to the footer, and "leave
   altered" lands harder on the ground the room is actually held in. */
.join {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(194, 67, 14, 0.16), transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 40%, #241209, #150B06 78%);
  text-align: center;
  overflow: hidden;
}
.join .eyebrow { color: var(--sand); }
.join .section-title { color: var(--ivory); }
.join .section-lede { color: rgba(248, 245, 239, 0.7); }
.join .join-vision { color: rgba(216, 198, 174, 0.62); }
.join-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.join-logo-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.join-logo-mark {
  width: 44px;
  height: auto;
  position: relative;
  z-index: 2;
}
.join .section-lede { margin: 0 auto; }
.join-actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.join-vision {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--brown-soft);
}

/* ---------------- Footer ---------------- */
/* The close is one movement: join and footer share the same dark ground, so the
   page ends where it began instead of cutting to ivory on the last screen. */
.site-footer {
  background: #150B06;
  border-top: 1px solid rgba(248, 245, 239, 0.08);
  padding: 4rem 1.5rem 1.75rem;
  color: rgba(248, 245, 239, 0.66);
}
/* The wordmark is dark ink on transparent, so it needs inverting here - the
   same treatment the header gives it over the hero. */
.site-footer .footer-mark img[alt="ALTER"] { filter: brightness(0) invert(1); opacity: 0.85; }
.site-footer .footer-tagline { color: var(--sand); }
.site-footer .footer-nav a,
.site-footer .footer-contact a,
.site-footer .footer-contact span { color: rgba(248, 245, 239, 0.66); }
.site-footer .footer-nav a:hover,
.site-footer .footer-contact a:hover { color: var(--ivory); }
.site-footer .footer-bottom { color: rgba(216, 198, 174, 0.60); border-top-color: rgba(248, 245, 239, 0.08); }  /* 4.74:1 - 0.45 was 3.15 */
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.footer-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.footer-mark img:first-child { width: 34px; height: auto; }
.footer-mark img:last-child { width: 84px; height: auto; }
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brown-soft);
  font-size: 1.05rem;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--brown-soft);
}
.footer-nav a:hover { color: var(--clay); }
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--brown-soft);
  text-align: right;
}
.footer-contact a:hover { color: var(--clay); }
.footer-bottom {
  max-width: var(--max-width);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(83,43,27,0.1);
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown-faint);
}

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 80vw);
    background: var(--ivory);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.16,.84,.44,1);
    box-shadow: -20px 0 60px rgba(83,43,27,0.15);
  }
  .main-nav.is-open { transform: translateX(0); }
  .nav-toggle { display: flex; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 490;
    background: rgba(43,22,14,0.35);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .facilitator-grid { grid-template-columns: 1fr; }
  .facilitator-panel { max-width: 340px; margin: 0 auto; }

  .ticket { grid-template-columns: 1fr; }
  .ticket-date { flex-direction: row; padding: 1.5rem 2rem; gap: 0.75rem; }
  .ticket-stub {
    width: 100%; height: 1px;
    background-image: linear-gradient(to right, rgba(216,198,174,0.35) 60%, transparent 0%);
    background-size: 12px 1px;
  }
  .ticket-stub::before, .ticket-stub::after { top: 50%; left: auto; transform: translateY(-50%); }
  .ticket-stub::before { left: -11px; }
  .ticket-stub::after { left: auto; right: -11px; bottom: auto; }
  .footer-inner { grid-template-columns: 1fr; text-align: left; }
  .footer-contact { text-align: left; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; }
}

@media (max-width: 560px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { justify-content: center; }
  .join-actions { flex-direction: column; width: 100%; }
  .join-actions .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-glow--a, .hero-glow--b { animation: none; }
  .scroll-cue-line { animation: none; height: 20px; }
  .preloader-mark { animation: none; }
  .facilitator-photo { transition: none; transform: none; }
  .reveal { transition-duration: 0.2s; }
  .threshold-pulse { animation: none; }
  .integration-sweep { animation: none; }
  .sound-toggle-bars i { animation: none; }
  h2.section-title.reveal { transition-duration: 0.2s; }
}

/* ========================================================================
   PORTAL HERO / SECTION IMAGERY / CONVERSION LAYER
   ======================================================================== */

/* ---------------- Hero portal (dark cinematic opening) ---------------- */
.hero {
  background: #0D0805;
}
.hero-portal {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-portal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scale(1.08);
  will-change: transform;
}
.hero .hero-bg-scrim {
  background:
    radial-gradient(ellipse 60% 52% at 50% 46%, rgba(13,8,5,0.80) 0%, rgba(13,8,5,0.45) 55%, rgba(13,8,5,0.15) 100%),
    linear-gradient(180deg, rgba(13,8,5,0.72) 0%, rgba(13,8,5,0.28) 26%, rgba(13,8,5,0.34) 62%, rgba(13,8,5,0.88) 100%);
}
.hero .hero-statement { color: var(--ivory); }
.hero .hero-statement .accent { color: #E8933F; }
.hero .hero-sub { color: rgba(248,245,239,0.86); }
.hero .hero-copy { color: rgba(248,245,239,0.7); }
.hero .logo-morph { color: var(--ivory); }
.hero .morph-letter { color: #E8933F; }
.hero .hero-logo {
  filter: brightness(0) invert(1) drop-shadow(0 12px 40px rgba(0,0,0,0.5));
  opacity: 0.96;
}
.hero .scroll-cue { color: rgba(248,245,239,0.5); }
.hero .scroll-cue-line { background: linear-gradient(to bottom, rgba(232,147,63,0.9), transparent); }
.btn-enter {
  background: rgba(248,245,239,0.06);
  border-color: rgba(248,245,239,0.42);
  color: var(--ivory);
  backdrop-filter: blur(6px);
  box-shadow: none;
}
.btn-enter:hover {
  background: var(--clay);
  border-color: var(--clay);
  box-shadow: 0 12px 34px rgba(153,50,10,0.45);
}

/* ---------------- Section background imagery ---------------- */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  will-change: transform;
}
.section-bg--integration img { opacity: 0.62; object-position: 50% 60%; }
.threshold .threshold-text,
.threshold .threshold-pulse { z-index: 2; }
.integration .integration-inner { z-index: 2; }

/* ---------------- Modal ---------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21,11,6,0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.modal.is-open .modal-backdrop { opacity: 1; }
.modal-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--ivory);
  border-radius: 10px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 40px 100px rgba(21,11,6,0.5);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.45s cubic-bezier(.16,.84,.44,1), transform 0.45s cubic-bezier(.16,.84,.44,1);
}
.modal.is-open .modal-panel { opacity: 1; transform: translateY(0) scale(1); }
.modal-close {
  position: absolute;
  top: 0.85rem; right: 1.1rem;
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--brown-faint);
  cursor: pointer;
  transition: color 0.25s ease;
}
.modal-close:hover { color: var(--clay); }
.modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  line-height: 1.05;
  color: var(--brown);
  margin: 0.3rem 0 0.5rem;
}
.modal-lede {
  color: var(--brown-soft);
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
}

/* ---------------- Form ---------------- */
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-soft);
  margin-bottom: 0.45rem;
}
.field .optional { text-transform: none; letter-spacing: 0; color: var(--brown-faint); }
/* A radio group needs a real group name, so the dangling <label> became a
   fieldset/legend. Reset the browser's fieldset chrome and inherit the field
   label's type so it looks identical to the labels around it. */
.choice-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-set legend {
  display: block;
  padding: 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-soft);
  margin-bottom: 0.45rem;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--brown);
  background: rgba(216,198,174,0.14);
  border: 1px solid rgba(83,43,27,0.18);
  border-radius: 5px;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(83,43,27,0.38); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--clay);
  background: rgba(248,245,239,0.9);
}
.field textarea { resize: vertical; min-height: 84px; }
.field.has-error input,
.field.has-error textarea { border-color: #B23A0F; background: rgba(178,58,15,0.06); }
.field-error {
  display: block;
  font-size: 0.75rem;
  color: #B23A0F;
  margin-top: 0.35rem;
  min-height: 1em;
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.btn-block { width: 100%; justify-content: center; margin-top: 0.5rem; }
.btn-spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(248,245,239,0.35);
  border-top-color: var(--ivory);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.is-submitting .btn-spinner { display: block; }
.is-submitting .btn-label { opacity: 0.65; }
#formSubmit[disabled] { opacity: 0.75; cursor: not-allowed; }
.form-status {
  font-size: 0.85rem;
  margin: 0.5rem 0 0.25rem;
  min-height: 1.2em;
}
.form-status.is-error { color: #B23A0F; }
.form-alt {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--brown-soft);
  text-align: center;
}

/* ---------------- Success state ---------------- */
.modal-success { text-align: center; }
.success-mark {
  width: 56px; height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--clay);
  position: relative;
}
.success-mark::after {
  content: '';
  position: absolute;
  top: 45%; left: 50%;
  width: 15px; height: 8px;
  border-left: 2px solid var(--clay);
  border-bottom: 2px solid var(--clay);
  transform: translate(-50%,-50%) rotate(-45deg);
}
.success-next {
  color: var(--brown-soft);
  font-size: 0.92rem;
  margin: 0.75rem auto 1.75rem;
  max-width: 38ch;
}
.success-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------- Event section additions ---------------- */
.ticket-expect {
  color: rgba(248,245,239,0.6);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.1rem;
}
.ticket-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.btn-ghost--light { color: var(--sand); border-color: rgba(216,198,174,0.4); }
.btn-ghost--light:hover { color: var(--ivory); border-color: var(--sand); }

@media (max-width: 560px) {
  .ticket-actions { flex-direction: column; }
  .ticket-actions .btn { justify-content: center; }
  .success-actions { flex-direction: column; }
  .success-actions .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-panel, .modal-backdrop { transition: none; }
  .btn-spinner { animation: none; }
}

/* ---------------- Header legibility over the dark portal ---------------- */
.site-header { background: linear-gradient(to bottom, rgba(13,8,5,0.75), rgba(13,8,5,0)); }
.site-header .brand-word-img { filter: brightness(0) invert(1); opacity: 0.9; }
.site-header .nav-link { color: rgba(248,245,239,0.72); }
.site-header .nav-link:hover { color: var(--ivory); }
.site-header .nav-cta { color: var(--ivory); border-color: rgba(248,245,239,0.45); }
.site-header .nav-toggle span { background: var(--ivory); }

/* once scrolled past the hero the page is light again — restore dark-on-light */
.site-header.is-scrolled { background: rgba(248,245,239,0.9); }
.site-header.is-scrolled .brand-word-img { filter: none; opacity: 1; }
.site-header.is-scrolled .nav-link { color: var(--brown-soft); }
.site-header.is-scrolled .nav-link:hover { color: var(--brown); }
.site-header.is-scrolled .nav-cta { color: var(--brown); border-color: var(--brown-faint); }
.site-header.is-scrolled .nav-cta:hover { color: var(--ivory); }
.site-header.is-scrolled .nav-toggle span { background: var(--brown); }

/* Over a dark section the light bar cut straight across it. The header inverts
   back for exactly as long as dark ground sits behind it. Placed after the
   .is-scrolled rules because both are single-class and order decides. */
.site-header.is-over-dark {
  background: linear-gradient(to bottom, rgba(13, 8, 5, 0.72), rgba(13, 8, 5, 0));
  backdrop-filter: none;
  box-shadow: none;
}
.site-header.is-over-dark .brand-word-img { filter: brightness(0) invert(1); opacity: 0.9; }
.site-header.is-over-dark .nav-link { color: rgba(248, 245, 239, 0.72); }
.site-header.is-over-dark .nav-link:hover { color: var(--ivory); }
.site-header.is-over-dark .nav-cta { color: var(--ivory); border-color: rgba(248, 245, 239, 0.45); }
.site-header.is-over-dark .nav-cta:hover { color: var(--brown); background: var(--ivory); border-color: var(--ivory); }
.site-header.is-over-dark .nav-toggle span { background: var(--ivory); }
/* At the hero the soft gradient is right - nothing is behind it yet. Deeper in
   the page, headings scroll under a transparent bar and collide with the mark,
   so once scrolled the dark state takes the same solid treatment the light one
   has. Three classes, so it beats both single-class rules above. */
.site-header.is-over-dark.is-scrolled {
  background: rgba(21, 11, 6, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(248, 245, 239, 0.08);
}

/* soften the hard cut-off at both edges so words don't appear sliced */
/* ---------------- Mobile hero: breathing room ---------------- */
@media (max-width: 560px) {
  .hero { padding-top: 6.5rem; padding-bottom: 7rem; }
  .hero-copy { margin-top: 1.1rem; }
  .hero-actions { margin-top: 1.9rem; }
  .scroll-cue { bottom: 1.5rem; }
}



/* the final step is the payoff — let it land louder */
@media (max-width: 560px) {
  }

/* ---------------- Motion reduction ----------------
   The projection-sweep duplicated light the imagery already provides. */

/* ---------------- Stepper + choice row ---------------- */
.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(83,43,27,0.18);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(216,198,174,0.14);
}
.stepper-btn {
  width: 46px;
  border: none;
  background: transparent;
  color: var(--brown);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.stepper-btn:hover { background: var(--clay); color: var(--ivory); }
.stepper input {
  width: 62px;
  text-align: center;
  border: none;
  border-left: 1px solid rgba(83,43,27,0.14);
  border-right: 1px solid rgba(83,43,27,0.14);
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--brown);
  cursor: default;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.choice { position: relative; cursor: pointer; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: block;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(83,43,27,0.18);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--brown-soft);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.choice input:checked + span {
  border-color: var(--clay);
  background: rgba(153,50,10,0.07);
  color: var(--clay);
}
.choice input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 3px; }
.field-hint {
  font-size: 0.75rem;
  color: var(--brown-faint);
  margin-top: 0.45rem;
}


/* ---------------- Invitation ---------------- */
.invitation {
  margin-top: 3.5rem;
  max-width: 58ch;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(83,43,27,0.14);
}
.invitation h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  color: var(--brown);
  margin-bottom: 0.9rem;
}
.invitation p {
  color: var(--brown-soft);
  font-size: 1.02rem;
}

/* ---------------- Facilitator credentials ---------------- */
.credentials {
  margin: 2.25rem 0 2.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  border-top: 1px solid rgba(83,43,27,0.14);
  padding-top: 1.75rem;
}
.cred dt {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.45rem;
}
.cred dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--brown-soft);
}
@media (max-width: 620px) {
  .credentials { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------------- Hero: the word is the centrepiece ---------------- */
.hero-kicker {
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.6rem, 1.5vw, 0.72rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(248,245,239,0.6);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.hero-word {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(5rem, 14vw, 9rem);
  margin: 0;
}
.hero .logo-morph {
  position: static;
  opacity: 1;
  font-size: clamp(3.2rem, 12vw, 8rem);
  letter-spacing: 0.16em;
  color: var(--ivory);
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.hero .morph-letter { color: #E8933F; }
.hero .hero-copy {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  letter-spacing: 0.02em;
}

/* ---------------- Verse: moving poetry ---------------- */
/* the pause and the payoff breathe differently */

@media (prefers-reduced-motion: reduce) {
}

/* ---------------- Hero video: fades in over the still once it can play ----------------
   The still paints instantly and remains the fallback; the loop crossfades in
   only when it has enough data, so there is never a black or empty frame. */
.hero-portal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s ease;
  will-change: opacity;
}
.hero-portal-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-portal-video { display: none; }
}

/* ---------------- Hero projection light ----------------
   A low-res canvas scaled up (soft light needs no pixel detail) blended with
   `overlay`, so the photograph's own luminance acts as the mask: the light only
   modulates where projection already falls, and never lifts the silhouettes. */
.hero-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 2.2s ease;
}
.hero-light.is-live { opacity: 0.85; }
.hero-light:not(.is-live) { mix-blend-mode: normal; }

/* the room breathing — very slow, near-subliminal.
   Paused whenever the hero is off screen; a CSS animation keeps running and
   repainting a full-size image otherwise. */
.hero-portal-img {
  animation: roomBreath 9s ease-in-out infinite;
  animation-play-state: paused;
}
.hero.is-onscreen .hero-portal-img { animation-play-state: running; }
@keyframes roomBreath {
  0%, 100% { transform: scale(1.08); }
  50%      { transform: scale(1.115); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-light { display: none; }
  .hero-portal-img { animation: none; }
}

/* ---------------- Event date + pricing tiers ---------------- */
.ticket-month {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: -0.15rem;
}
.tiers {
  list-style: none;
  margin: 1.4rem 0 1rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(216,198,174,0.18);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}
.tier {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(216,198,174,0.09);
}
.tier:last-child { border-bottom: none; }
.tier-name {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(248,245,239,0.78);
}
.tier-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ivory);
}
.tier-note {
  grid-column: 1 / -1;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(216,198,174,0.72);
  margin-top: -0.35rem;
}
/* the tier currently on sale */
.tier--live .tier-name { color: var(--ivory); }
.tier--live .tier-price { color: #E8933F; }
.tier--live .tier-note::before {
  content: '● ';
  color: #E8933F;
}
/* A sold-out tier stays on the page - seeing what has already gone is the
   scarcity; hiding it just makes the ladder look short. */
.tier--gone { opacity: 0.45; }
.tier--gone .tier-name,
.tier--gone .tier-price { text-decoration: line-through; text-decoration-thickness: 1px; }
.tier--gone .tier-note { color: rgba(216, 198, 174, 0.72); }
.tiers--full::after {
  content: 'This room is full. Join the list for ALTER 002.';
  display: block;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: var(--sand);
}

.tier-pair {
  max-width: 48ch;
  font-size: 0.82rem;
  color: rgba(248,245,239,0.7);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.tier-pair strong { color: var(--sand); font-weight: 500; }

/* ========================================================================
   Copy blocks, the invitation film, and before-you-come.
   Built only from the tokens above — no new design language.
   ======================================================================== */

/* The concept glow is 480px wide and sits at right: -12%, so any section
   carrying one has to contain it — otherwise it widens the page on mobile. */
.medicine {
  position: relative;
  overflow: hidden;
}
.medicine .section-inner { position: relative; z-index: 1; }

/* Sub-blocks now carry several paragraphs each. */
.invitation p + p { margin-top: 0.9rem; }
.block-cta { margin-top: 1.25rem; }
.integration-copy--last { margin-top: 1.1rem; }
.cred-heading {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brown-faint);
  margin: 2.25rem 0 1rem;
}
.section-lede + .section-lede { margin-top: 1.1rem; }
/* A lede following a bordered sub-block had no separation and read as part of it. */
.invitation + .section-lede,
.rituals + .section-lede { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* ---------------- Display headings ---------------- */
.invitation h3,
.ritual h3,
.before-col h3,
.faq-heading,
.worth h3,
.modal-title { text-wrap: balance; }

.honest-turn {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  line-height: 1.14;
  color: var(--clay);
  text-wrap: balance;
}
.honest-turn--quiet {
  margin-top: 0;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  color: var(--brown);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

/* ---------------- The invitation, in the dark ---------------- */
/* The one film on the page earns its own ground: on ivory it read as a video
   dropped into a document, and it was six thousand pixels of unbroken light
   between the hero and the threshold. */
.invitation-film {
  background: radial-gradient(ellipse 90% 70% at 50% 35%, #241209, #150B06 78%);
  color: var(--ivory);
}
.invitation-film .eyebrow { color: var(--sand); }
.invitation-film .section-title { color: var(--ivory); }
.invitation-film .section-lede { color: rgba(248, 245, 239, 0.68); }
.invitation-film .film-frame {
  background: linear-gradient(165deg, #2A160C, #150B06);
}
.invitation-film .film figcaption { color: rgba(216, 198, 174, 0.6); }

/* ---------------- The turn ----------------
   The page had no typographic event. Everything was well set and nothing was
   loud - 67px was the largest thing on 14,000px of page. This is the one moment
   where the words are the image and the page stops arguing.
   His line, from the three hero sublines he offered and never used. The second
   half steps in and turns clay, because that is what the sentence describes. */
.turn {
  padding: clamp(6rem, 17vh, 13rem) 1.5rem;
  overflow: hidden;
}
.turn-line {
  max-width: var(--max-width);
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.9rem, 10.5vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--brown);
}
.turn-line span { display: block; }
.turn-b {
  color: var(--clay);
  padding-left: clamp(1.5rem, 9vw, 8rem);
}

/* ---------------- What if / the refusals ---------------- */
/* The journey carries a concept glow, so like .experience it has to contain it. */
.journey {
  position: relative;
  overflow: hidden;
}
.journey .section-inner { position: relative; z-index: 1; }

/* Set as machinery - monospaced, evenly spaced, dot-separated - deliberately
   unlike the flowing serif around it. Three refusals stated flatly. */
.refusals {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
}
.refusals span { display: inline-flex; align-items: center; }
.refusals span:not(:last-child)::after {
  content: '';
  width: 4px;
  height: 4px;
  margin-left: 0.9rem;
  border-radius: 50%;
  background: var(--sand);
}

/* ---------------- The three rituals of freedom ---------------- */
/* Numbered because this genuinely is a sequence - the order carries meaning.
   The rule down the left is the journey; each node sits on it. */
.rituals-label {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clay);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.rituals-note {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  max-width: 52ch;
  font-size: 0.9rem;
  color: var(--brown-faint);
}
.rituals {
  list-style: none;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding: 0;
  max-width: 60ch;
}
.ritual {
  position: relative;
  padding: 0 0 clamp(1.9rem, 4vw, 2.75rem) clamp(3.25rem, 7vw, 4.25rem);
  border-left: 1px solid rgba(83, 43, 27, 0.16);
}
/* A clay segment draws down over the faint track as each ritual is reached,
   so the rule reads as the journey being walked rather than a static divider. */
.ritual::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--clay);
  opacity: 0.5;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.ritual.is-drawn::before { transform: scaleY(1); }
.ritual:last-child::before { display: none; }
.ritual-num { transition: none; }
.ritual-num { background: rgba(153, 50, 10, 0.42); }
.ritual.is-drawn .ritual-num { background: var(--clay); }
.ritual:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
/* The emblem is a clay block with its figures knocked out of it. That figure /
   ground relationship is the brand's grammar, so the ritual markers use it too:
   a solid clay bar in the emblem's vertical proportion, numeral reversed out.
   A bordered circle was generic - this could not belong to anything else. */
.ritual-num {
  position: absolute;
  left: 0;
  top: -0.15em;
  transform: translateX(-50%);
  width: 1.45rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: var(--clay);
  color: var(--ivory);
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  transition: background 0.8s ease;
}
.ritual h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  color: var(--brown);
  margin-bottom: 0.55rem;
}
.ritual p {
  color: var(--brown-soft);
  max-width: 48ch;
}

/* ---------------- The invitation film ---------------- */
/* The one asset carrying the whole invitation should not sit in a rounded card
   inside a padded column, like a video embedded in a document. It runs edge to
   edge: the section is the film. The caption returns to the text column so it
   still lines up with the copy above. */
.invitation-film { padding-left: 0; padding-right: 0; }
.invitation-film .section-inner { padding: 0 1.5rem; }
.film { margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; }
.film figcaption {
  max-width: var(--max-width);
  margin: 0.9rem auto 0;
  padding: 0 1.5rem;
}
.film-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* at 1920 a 16:9 band is taller than the screen; cap it so the film is a
     window rather than a wall */
  max-height: 84svh;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(165deg, var(--sand-soft), var(--sand));
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Keeps the caption and the sound hint readable whatever the footage does. */
.film-frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(43, 22, 14, 0.66), transparent);
}
.film-play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  margin: -41px 0 0 -41px;
  border-radius: 50%;
  background: rgba(248, 245, 239, 0.92);
  box-shadow: 0 14px 44px rgba(43, 22, 14, 0.34);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16,.84,.44,1);
}
.film-play::after {
  content: '';
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 20px;
  border-color: transparent transparent transparent var(--clay);
}
.film-frame:hover .film-play { transform: scale(1.07); }
.film-frame.is-playing .film-play { opacity: 0; transform: scale(0.82); }
.film-sound {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 1.35rem;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  text-shadow: 0 1px 12px rgba(43, 22, 14, 0.75);
  transition: opacity 0.5s ease;
}
.film-frame.is-playing .film-sound { opacity: 0; }
.film figcaption {
  margin-top: 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brown-faint);
}

/* ---------------- Facilitator: the numbers ---------------- */
.stats {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.stat dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1;
  color: var(--clay);
  font-variant-numeric: tabular-nums;
}
.stat dd {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--brown-faint);
}
@media (max-width: 900px) {
  /* A floating control over a full-width page will always cover something, and
     here it was sitting on top of the ticket prices - the one thing on the page
     that has to be readable. Global controls belong beside the other global
     control, so on phones it joins the header. */
  .sound-toggle {
    top: 26px;
    right: 66px;
    bottom: auto;
    width: 36px;
    height: 36px;
    box-shadow: none;
    background: rgba(248, 245, 239, 0.82);
  }
  .nav-is-open .sound-toggle { opacity: 0; pointer-events: none; }

  /* Uppercase letter-spaced type under ~11px stops being readable on a phone.
     tier-note carries "first 10 / next 20", which is the scarcity that sells. */
  .hero-kicker { font-size: 0.68rem; }
  .tier-note { font-size: 0.72rem; }
  .ticket-status { font-size: 0.72rem; }
  .cred dt { font-size: 0.68rem; }
  .film-sound { font-size: 0.68rem; }

  /* Inline links were 20px tall - well under a reliable thumb target. */
  .inline-link, .footer-nav a, .footer-contact a {
    display: inline-block;
    padding-block: 0.35rem;
  }
  /* The drawer links too - the pill CTA keeps its own shape. */
  .main-nav .nav-link:not(.nav-cta) { padding-block: 0.5rem; }
}

@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
}

/* ---------------- Before you come ---------------- */
.before-bring {
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(83, 43, 27, 0.14);
}
.before-col h3,
.faq-heading,
.worth h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  color: var(--brown);
  margin-bottom: 0.9rem;
}
.before-col p { color: var(--brown-soft); max-width: 46ch; }
.before-col p + p { margin-top: 0.9rem; }
.before-list { margin: 0.9rem 0; }
.before-list li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.4rem;
  color: var(--brown-soft);
}
.before-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clay);
}

.faq {
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(83, 43, 27, 0.14);
  max-width: 64ch;
}
.faq-item { border-bottom: 1px solid rgba(83, 43, 27, 0.1); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  cursor: pointer;
  color: var(--brown);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: none;
  color: var(--clay);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(.16,.84,.44,1);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  padding: 0 0 1.15rem;
  color: var(--brown-soft);
  max-width: 58ch;
}

/* ---------------- Where your ticket goes ---------------- */
.worth {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 62ch;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(83, 43, 27, 0.14);
  border-radius: 6px;
  background: rgba(238, 230, 217, 0.5);
}
.worth p { color: var(--brown-soft); }
.worth p + p { margin-top: 0.9rem; }

.tier-pair { margin-bottom: 0.5rem; }
.ticket-next {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(248, 245, 239, 0.5);
}
.tier-urgency {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(248, 245, 239, 0.55);
  margin-bottom: 1.3rem;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
}

@media (max-width: 700px) {
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
  .ritual::before { transform: scaleY(1); transition: none; }
  .threshold::after { opacity: 1; transform: scale(1); transition: none; }
  .threshold-text { opacity: 1; letter-spacing: 0.42em; transition: none; }
  .ritual-num { transition: none; }
}


/* The policy pages, linked at the foot of the site. */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  margin-bottom: 1rem;
}
.footer-legal a {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brown-faint); text-decoration: none;
}
.footer-legal a:hover { color: var(--ivory); }


/* The invitation film is square (shot for phones), so its frame is square and
   held to a sensible width instead of being cropped into 16:9. */
.film .film-frame { aspect-ratio: 1 / 1; max-width: 34rem; margin-inline: auto; }

/* The invitation carries its own subtitles along the bottom, so its
   "tap for sound" sits at the top instead of on top of the words. */
.film .film-hint { top: 1rem; bottom: auto; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }

/* ======================================================================
   Aligned with the booking page (book.alter.dance): the same promise in
   the hero, the crew and the voices behind the authority, the six worries
   answered in the open, two doors before the offer, and the live anchored
   price inside the ticket. Light sections keep the site's ivory ground;
   everything inside the ticket sits on its dark card.
   ====================================================================== */

/* hero: the promise under the wordmark */
.hero-copy-sub {
  margin-top: 0.6rem;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.1rem, 4.2vw, 1.5rem); color: var(--sand);
}
.hero-when {
  margin-top: 1.1rem;
  font-size: clamp(0.72rem, 2.8vw, 0.85rem); letter-spacing: 0.06em;
  color: var(--sand-soft);
}
.hero-when strong { font-weight: 500; color: var(--ivory); }

/* the crew */
.crew-list {
  list-style: none; margin-top: 3rem;
  display: grid; gap: 2.5rem; text-align: center;
}
@media (min-width: 760px) { .crew-list { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.crew-one img {
  width: clamp(110px, 30vw, 150px); height: auto; margin: 0 auto 1rem;
  border-radius: 50%; border: 1px solid rgba(153, 50, 10, 0.25);
  box-shadow: 0 16px 36px rgba(83, 43, 27, 0.22);
}
.crew-name { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--brown); }
.crew-role {
  margin: 0.35rem 0 0.7rem;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-bright);
}
.crew-line { max-width: 32ch; margin: 0 auto; color: var(--brown-soft); }

/* the voices */
.voices { margin-top: 3.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .voices { grid-template-columns: 1fr 1fr; } }
.voice {
  padding: 1.5rem 1.6rem;
  border-left: 2px solid var(--clay-bright);
  background: rgba(153, 50, 10, 0.05);
}
.voice p { font-family: var(--font-display); font-size: clamp(1.3rem, 4vw, 1.6rem); line-height: 1.3; color: var(--brown); }
.voice cite {
  display: block; margin-top: 0.7rem; font-style: normal;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown-faint);
}

/* the six worries */
.care-grid { margin-top: 2.5rem; display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .care-grid { grid-template-columns: 1fr 1fr; } }
.care {
  padding: 1.3rem 1.4rem;
  border: 1px solid rgba(83, 43, 27, 0.14); border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
}
.care-q { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; color: var(--brown); margin-bottom: 0.5rem; }
.care-a { color: var(--brown-soft); }

/* the two doors */
.choices { margin-top: 2.5rem; display: grid; gap: 1rem; }
@media (min-width: 760px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { padding: 1.4rem 1.5rem; border: 1px solid rgba(83, 43, 27, 0.16); border-radius: 8px; }
.choice-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown-faint); margin-bottom: 0.6rem; }
.choice-line { color: var(--brown-soft); }
.choice--lit { border-color: var(--clay-bright); background: rgba(194, 67, 14, 0.06); }
.choice--lit .choice-label { color: var(--clay-bright); }
.choice--lit .choice-line { color: var(--brown); }

/* inside the ticket: the live, anchored price */
.price-now { margin: 1.4rem 0 1.2rem; }
.price-now-tier { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: #E8933F; margin-bottom: 0.5rem; }
.price-now-row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; color: var(--sand-soft); }
.price-now-row s { font-family: var(--font-display); font-size: 1.1rem; color: rgba(216, 198, 174, 0.6); text-decoration-color: rgba(232, 147, 63, 0.75); }
.price-now-row strong { font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--ivory); }
.price-now-row span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.price-now-row[hidden] { display: none; }
.price-now-note { margin-top: 0.6rem; font-size: 0.82rem; color: var(--sand); }
.price-now.is-full .price-now-row { display: none; }

.gets { list-style: none; margin: 1.4rem 0; display: grid; gap: 0.5rem; }
.gets li { position: relative; padding-left: 1.2rem; font-size: 0.9rem; color: var(--sand-soft); }
.gets li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: #E8933F;
}