/* ============================================================
   Our Story Movement — Section layouts
   ============================================================ */

/* ---------------- HERO (full-bleed cinematic) ---------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 94vh;
  min-height: 94svh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(7rem, 5rem + 9vw, 11rem) clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--paper);
}
/* cinematic edge vignette — corners sink into black */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(2, 5, 4, 0.55) 100%),
    radial-gradient(80% 60% at 12% 82%, rgba(53, 240, 160, 0.14), transparent 60%);
}

/* ---- Hero background video ---- */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: heroKen 26s var(--ease-io) infinite alternate;
}
@keyframes heroKen { to { transform: scale(1.16) translate(0, -1.4%); } }
@media (prefers-reduced-motion: reduce) {
  /* CSS-only guarantee: no moving footage without depending on main.js.
     Swap the looping <video> for its static poster, still graded + scrimmed. */
  .hero-video { background: var(--paper) url("/assets/hero-poster.jpg") center / cover no-repeat; }
  .hero-video-el { display: none; }
}
/* true green colour-grade over the footage */
.hero-grade {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, #10B981 0%, #0BA5B8 52%, #0A3A2E 100%);
  mix-blend-mode: color;
  opacity: 0.5;
}
/* cinematic readability scrim + fade into the page below */
.hero-video-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(3, 9, 8, 0.92) 0%,
      rgba(3, 9, 8, 0.62) 38%,
      rgba(3, 9, 8, 0.12) 72%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(3, 9, 8, 0.5) 0%,
      transparent 26%,
      transparent 58%,
      rgba(5, 8, 11, 0.6) 82%,
      var(--paper) 100%);
}

.hero .container { z-index: 2; width: 100%; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.hero-copy { max-width: 62ch; }

.hero-refrain {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.hero-refrain .l1 { color: var(--sp-pink);  display: block; text-shadow: 0 0 30px rgba(110, 231, 183, 0.35); }
.hero-refrain .l2 { color: var(--sp-green); display: block; font-weight: 600; text-shadow: 0 0 40px rgba(53, 240, 160, 0.6); }
.hero-refrain .l3 { color: var(--sp-blue);  display: block; text-shadow: 0 0 30px rgba(34, 199, 230, 0.4); }

.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  font-weight: 380;
  color: var(--neon);
  margin: 0 0 1.5rem;
  text-shadow: 0 0 26px rgba(75, 255, 176, 0.35);
}
.hero-lead {
  max-width: 56ch;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: #CFE0D6;
  margin: 0 0 2rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero-meta {
  margin-top: 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.hero-meta strong { color: var(--neon); font-weight: 700; }
.hero-meta .spark { color: var(--neon); }
.hero-try { margin-top: 1.2rem; }
.hero-try-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--neon-2); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.hero-try-link:hover { color: var(--neon); }

/* ---------------- REFRAME ("bigger than journaling") ---------------- */
.reframe { background: transparent; }
.reframe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.reframe h2 { max-width: 16ch; }
.reframe-body p { color: var(--ink-soft); font-size: 1.08rem; }
.reframe-quote { margin: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0 0; }

/* ---------------- MANIFESTO (dusk beat) ---------------- */
.manifesto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% -10%, var(--dusk) 0%, var(--dusk-2) 70%);
  color: var(--bone);
}
.manifesto::before { /* aurora glow at the foot — light returns */
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; bottom: -40%;
  width: min(120vw, 1200px);
  aspect-ratio: 1/1;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(53, 240, 160, 0.16), rgba(34, 199, 230, 0.08) 40%, transparent 62%);
  pointer-events: none;
}
.manifesto .eyebrow { color: var(--gold-glow); }
.manifesto-credo {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.65rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--bone);
  margin: 0;
  text-wrap: pretty;
}
.manifesto-credo .accent { color: var(--gold-glow); font-style: italic; }
.manifesto-credo p { margin: 0 0 0.9em; }
.manifesto-credo p:last-child { margin-bottom: 0; font-size: 1.08em; font-weight: 420; color: var(--bone); }

/* ---------------- TRIPTYCH (My / Your / Our) ---------------- */
.triptych-head { max-width: 48ch; margin-bottom: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); }
.triptych-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  counter-reset: refrain;
}
.refrain-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  overflow: hidden;
}
.refrain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--glow-soft); border-color: rgba(53, 240, 160, 0.4); }
.refrain-card .rc-key {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 480;
  letter-spacing: -0.02em;
  margin: 0 0 0.2rem;
}
.refrain-card .rc-sub { font-style: italic; color: var(--amber-text); font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 1rem; display: block; }
.refrain-card p { color: var(--ink-soft); margin: 0; font-size: 1rem; }
.refrain-card .rc-band { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--sp-green), var(--sp-blue)); opacity: 0.9; box-shadow: 0 0 18px 0 rgba(53, 240, 160, 0.5); }

/* ---------------- BUILD (features) ---------------- */
.build { background: var(--paper-2); }
.build-head { display: grid; gap: 1rem; max-width: 60ch; margin-bottom: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); }
.build-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.build-foot {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem 1rem;
  flex-wrap: wrap;
  color: var(--ink-mute);
  font-size: 0.95rem;
}
.build-foot-text { flex: 1 1 auto; }
.build-foot-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* ---------------- JOURNEY (ascending) ---------------- */
.journey { background: transparent; }
.journey-head { max-width: 46ch; }
.journey-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  align-items: end;
}
.journey-step {
  position: relative;
  padding: 1.4rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* ascending bioluminescence — each step glows a little brighter */
.journey-step:nth-child(1) { margin-top: 3.6rem; border-color: rgba(53, 240, 160, 0.16); }
.journey-step:nth-child(2) { margin-top: 2.4rem; border-color: rgba(53, 240, 160, 0.26); box-shadow: var(--glow-soft); }
.journey-step:nth-child(3) { margin-top: 1.2rem; border-color: rgba(53, 240, 160, 0.4); box-shadow: 0 0 30px -8px rgba(53, 240, 160, 0.45); }
.journey-step:nth-child(4) { margin-top: 0; }
.journey-step:last-child {
  background: var(--grad-cta);
  border-color: transparent;
  box-shadow: var(--glow);
}
.journey-step .js-num { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-text); }
.journey-step .js-word { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); font-weight: 520; margin-top: 0.3rem; letter-spacing: -0.01em; color: var(--ink); }
.journey-step:last-child .js-num,
.journey-step:last-child .js-word { color: var(--ink-on-neon); }

/* ---------------- CAMPAIGN ---------------- */
.campaign { background: var(--paper-peach); position: relative; overflow: hidden; }
.campaign-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.campaign-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  box-shadow: var(--shadow-md);
}
.gift-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.95rem; }
.gift-list li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--ink-soft); }
.gift-list .tick {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--gold);
  color: #2A1B07;
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 800;
}
.campaign-cta { margin-top: 1.8rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.campaign-lead { color: var(--ink-soft); margin-bottom: 2rem; }
.trust-note { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.trust-promise { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 0.9rem; }
.trust-promise strong { color: var(--ink); }
.trust-legal { font-size: 0.85rem; margin: 0; }

/* ---------------- WAITLIST ---------------- */
.waitlist { background: transparent; }
.waitlist-card {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(53, 240, 160, 0.1), transparent 60%),
    linear-gradient(135deg, var(--paper-2), var(--paper-peach));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--glow-soft);
}
.waitlist-card .signup { max-width: 30rem; margin: 1.8rem auto 0; }

/* ---------------- CLOSING ---------------- */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(120% 130% at 50% 120%, var(--dusk) 0%, var(--dusk-2) 75%);
  color: var(--bone);
  text-align: center;
  padding-block: clamp(5rem, 3.5rem + 6vw, 9rem);
}
.closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: -30%;
  width: min(120vw, 1300px);
  aspect-ratio: 1/1;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(53, 240, 160, 0.24), rgba(34, 199, 230, 0.1) 42%, transparent 64%);
  pointer-events: none;
}
.closing-refrain {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.4rem, 1.2rem + 5vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 1.2rem;
}
.closing-refrain .mid { color: var(--gold-glow); font-style: italic; }
.closing-line { font-size: var(--t-lead); color: var(--bone-soft); margin: 0 auto 2.3rem; max-width: 40ch; }
.closing-cta { display: inline-flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }

/* ---------------- Responsive ---------------- */
@media (max-width: 920px) {
  .reframe-grid,
  .campaign-grid { grid-template-columns: 1fr; }
  .triptych-grid { grid-template-columns: 1fr; }
  .build-grid { grid-template-columns: 1fr 1fr; }
  .journey-steps { grid-template-columns: 1fr; }
  .journey-step,
  .journey-step:nth-child(n) { margin-top: 0; }
}
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }

  /* nav-menu collapses into a dropdown panel */
  .nav-menu {
    position: fixed;
    inset: 63px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 1rem var(--gutter) 1.5rem;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur);
  }
  .nav[data-open="true"] .nav-menu { opacity: 1; transform: none; visibility: visible; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 0.9rem 0.3rem; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav-links a:last-of-type { border-bottom: 0; }
  .nav-links a::after { display: none; }

  .nav-actions { flex-direction: column; align-items: stretch; gap: 0.6rem; margin-top: 0.9rem; }
  .nav-actions .btn { width: 100%; }
}
@media (max-width: 560px) {
  .build-grid { grid-template-columns: 1fr; }
  .journey-steps { grid-template-columns: 1fr; }
  .hero-cta .btn,
  .campaign-cta .btn,
  .closing-cta .btn { width: 100%; }
  .signup { flex-direction: column; }
  .signup .btn { width: 100%; }
}