/* ============================================================================
   NPS "How It Works" — Scroll-Expand Section (rebuilt 2026-05-28)
   Desktop  = sticky scroll-scrub (the section pins, scroll drives the expand)
   Mobile   = scroll-triggered reveal (plays once when it enters view)
   Collapsed state shows the wide "after" bg + static "before" image card.
   The video only plays while expanding/expanded, and pauses (showing the
   before image) when collapsed or scrolled back past.
   ========================================================================= */

.nps-expand-section {
  position: relative;
  width: 100%;
  background: var(--nps-ink, #2A2820);
}

/* Sticky stage wrapper — pins on desktop while the tall track scrolls */
.nps-expand-sticky {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* --- Background ("after" aerial; fades as the video expands) --- */
.nps-expand-bg { position: absolute; inset: 0; z-index: 0; will-change: opacity; }
.nps-expand-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nps-expand-bg-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.18); }

/* --- Stage --- */
.nps-expand-stage { position: absolute; inset: 0; z-index: 5; }

/* --- Media card (expands; holds the static before-image + the video) --- */
.nps-expand-media {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; height: 400px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0,0,0,0.35);
  z-index: 1;
  will-change: width, height;
}
.nps-expand-before-img,
.nps-expand-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.nps-expand-video { z-index: 1; }
.nps-expand-before-img { z-index: 2; transition: opacity 0.45s ease; } /* static "before"; fades to reveal video */
.nps-expand-media-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: #000; opacity: 0.35;
  transition: opacity 0.2s ease;
}

/* --- Titles (split apart on scroll) --- */
.nps-expand-titles {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  pointer-events: none;
}
.nps-expand-title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3.75rem);
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  margin: 0; line-height: 1.12; text-align: center; white-space: nowrap;
  will-change: transform, opacity;
}

/* --- Hints below the card --- */
.nps-expand-hints {
  position: absolute; bottom: 8vh; left: 50%;
  transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center; will-change: opacity;
}
.nps-expand-subtitle {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 1rem; color: rgba(255,255,255,0.92); margin: 0; letter-spacing: 0.5px;
}
.nps-expand-scroll-hint {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.8125rem; color: rgba(255,255,255,0.8); margin: 0;
  text-transform: uppercase; letter-spacing: 1px;
}
.nps-expand-scroll-arrow { display: inline-block; animation: nps-bounce 1.5s ease-in-out infinite; }
@keyframes nps-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* --- Revealed content (steps + CTA), fades in over the expanded video --- */
.nps-expand-content {
  position: absolute; inset: 0; z-index: 15;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; will-change: opacity;
}
.nps-expand-content-inner { max-width: 1100px; width: 100%; margin: 0 auto; padding: 2rem; }
.nps-expand-steps { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .nps-expand-steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.nps-expand-step { text-align: center; }
.nps-expand-step-number {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 3rem; font-weight: 700; color: var(--nps-gold, #B8893E); line-height: 1; margin-bottom: 0.5rem;
}
.nps-expand-step-title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.375rem; font-weight: 700; color: #FFFFFF; margin: 0 0 0.6rem; line-height: 1.3;
}
.nps-expand-step-text {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.9375rem; color: rgba(255,255,255,0.9); line-height: 1.7; margin: 0;
}
.nps-expand-cta { text-align: center; margin-top: 2.5rem; }
.nps-expand-cta-btn {
  display: inline-block;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.9375rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  color: var(--nps-near-black, #1F1B16); background: var(--nps-gold, #B8893E);
  padding: 1rem 2.5rem; border-radius: 4px; text-decoration: none; transition: all 0.3s ease;
}
.nps-expand-cta-btn:hover { background: var(--nps-gold-light, #D4A356); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(184,137,62,0.35); }
.nps-expand-cta-note { font-family: var(--font-body, 'Montserrat', sans-serif); font-size: 0.8125rem; color: rgba(255,255,255,0.6); margin: 1rem 0 0; }

/* ============================================================================
   DESKTOP (≥768px): sticky scroll-scrub. Tall track, pinned stage.
   JS sets the per-frame inline styles (width/height/opacity/transform).
   ========================================================================= */
@media (min-width: 768px) {
  .nps-expand-section { height: 240vh; }      /* 100vh visible + 140vh of scrub */
  .nps-expand-sticky { position: sticky; top: 0; }
}

/* ============================================================================
   MOBILE (<768px): clean full-bleed video band — no pinning, no scrub, no
   floating card. The video fills the section; title + subtitle sit centered
   over a dark overlay. Steps + CTA are the separate #how-it-works-steps section
   below. Video plays once the band is in view (JS IntersectionObserver).
   ========================================================================= */
@media (max-width: 767px) {
  .nps-expand-section { height: auto; }
  .nps-expand-sticky { position: relative; height: 78vh; min-height: 440px; overflow: hidden; }

  /* "after" aerial sits behind the video purely as a fallback */
  .nps-expand-bg { position: absolute; inset: 0; z-index: 0; }

  .nps-expand-stage {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1.25rem;
  }

  /* media fills the whole band as the background layer */
  .nps-expand-media {
    position: absolute; inset: 0; top: 0; left: 0; transform: none;
    width: 100%; height: 100%; max-width: none; max-height: none;
    border-radius: 0; box-shadow: none; z-index: 0; margin: 0;
  }
  .nps-expand-media-overlay { opacity: 0.45; } /* darken for title legibility */

  /* title + subtitle centered over the video */
  .nps-expand-titles { position: relative; top: auto; transform: none; z-index: 10; gap: 0.5rem; }
  .nps-expand-title { white-space: normal; max-width: 92vw; font-size: clamp(2rem, 1.4rem + 4vw, 2.8rem); }
  .nps-expand-hints { position: relative; bottom: auto; left: auto; transform: none; z-index: 10; margin-top: 1rem; }
  .nps-expand-scroll-hint, .nps-expand-scroll-arrow { display: none; } /* no scrub on mobile */
}

/* Reduced motion: show the fully-revealed end state, no animation */
@media (prefers-reduced-motion: reduce) {
  .nps-expand-before-img { opacity: 0; }
  .nps-expand-content { opacity: 1; }
}

/* ============================================================================
   How It Works — STEPS section (clean dark section BELOW the video scroll).
   The video expand is now a pure immersive moment; the steps + CTA live here
   on a solid background for legibility (reuses .nps-expand-step* styling).
   ========================================================================= */
#how-it-works-steps .hiw-steps {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  max-width: 1000px; margin: 0 auto;
}
@media (min-width: 768px) {
  #how-it-works-steps .hiw-steps { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}
#how-it-works-steps .hiw-cta { text-align: center; margin-top: 3.25rem; }
#how-it-works-steps .hiw-cta-note {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 0.8125rem; color: rgba(255,255,255,0.55); margin: 1rem 0 0;
}

/* CTA button sits in a .section--dark, whose `a { gold-light }` rule would make
   the label gold-on-gold. Force the dark label (ID specificity beats it). */
#how-it-works-steps .nps-expand-cta-btn,
#how-it-works-steps .nps-expand-cta-btn:hover { color: var(--nps-near-black, #1F1B16) !important; }

/* Center the CTA note (global p{max-width:72ch} left-biases the block). */
#how-it-works-steps .hiw-cta-note { margin-left: auto; margin-right: auto; }