left: 0.64rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--cream);
  transform: translateY(-50%);
}

.runway-stop:first-child .runway-card::before { top: 50%; }
.runway-stop:last-child .runway-card::before { bottom: 50%; }

.runway-time {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.52rem;
}

.runway-card h3 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.25vw, 34px);
  line-height: 1;
  margin-bottom: 0.42rem;
}

.runway-location {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--dark-accent);
  margin-bottom: 0.45rem;
}

.runway-note {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(107,29,29,0.72);
}

/* ---- HEIRLOOM DETAILS ---- */
.heirloom-details-section {
  border-bottom: var(--border);
  padding: 7vw 6vw;
  background: linear-gradient(180deg, rgba(250,245,235,0.99) 0%, rgba(247,239,227,0.95) 100%);
}

.heirloom-details-header {
  max-width: 1080px;
  margin: 0 auto 1.2rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem 2rem;
  align-items: end;
}

.heirloom-details-header .eyebrow {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(107,29,29,0.84);
  margin-bottom: 0.3rem;
  display: block;
}

.heirloom-details-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.1vw, 56px);
  line-height: 0.98;
  max-width: 8ch;
  margin: 0;
}

.heirloom-details-intro {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(56,41,33,0.68);
  margin: 0;
  max-width: 42ch;
  line-height: 1.7;
  justify-self: end;
}

.heirloom-details-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem;
}

.heirloom-detail-card {
  display: grid;
  align-content: start;
  gap: 0.48rem;
  padding: 1.1rem 1rem 1rem;
  border: 1px solid rgba(107,29,29,0.26);
  background: rgba(255,252,247,0.8);
  position: relative;
  min-height: 154px;
}

.heirloom-detail-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(107,29,29,0.12);
  pointer-events: none;
}

.heirloom-detail-card.detail-feature {
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
  padding: 1.35rem 1.3rem 1.2rem;
  background: linear-gradient(145deg, rgba(255,252,247,0.94) 0%, rgba(250,242,231,0.86) 100%);
  min-height: 320px;
  align-content: end;
}

.heirloom-detail-card.detail-one {
  grid-column: 8 / -1;
  grid-row: 1;
}

.heirloom-detail-card.detail-two {
  grid-column: 8 / -1;
  grid-row: 2;
}

.heirloom-detail-card.detail-three {
  grid-column: 1 / span 5;
  grid-row: 3;
}

.heirloom-detail-card.detail-four {
  grid-column: 6 / -1;
  grid-row: 3;
}

.detail-index {
  font-family: var(--font-sans);
  font-size: 7.6px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(107,29,29,0.72);
  margin: 0;
  display: block;
}

.heirloom-detail-card h3 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 32px);
  margin: 0;
  line-height: 0.98;
}

.heirloom-detail-card p {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(56,41,33,0.92);
  max-width: 40ch;
}

.detail-points {
  margin-top: 0.12rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.26rem 0.5rem;
  list-style: none;
}

.detail-points li {
  font-family: var(--font-sans);
  font-size: 7.2px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(107,29,29,0.86);
}

.detail-points li + li::before {
  content: " / ";
  color: rgba(107,29,29,0.5);
}

/* ---- FOR GENERATIONS CLOSING ---- */
.for-generations-section {
  border-bottom: var(--border);
  padding: 9vw 6vw;
  text-align: center;
  background: linear-gradient(180deg, rgba(250,245,235,1) 0%, rgba(247,239,227,1) 100%);
}

.for-generations-section .eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
}

.for-generations-monogram {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.3vw, 34px);
  letter-spacing: 0.35em;
  margin: 0 0 1.25rem 0.35em;
}

.for-generations-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.2vw, 68px);
  line-height: 1.08;
  margin-bottom: 1.2rem;
}

.for-generations-section p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--dark-accent);
  max-width: 640px;
  margin: 0 auto;
}

/* ---- FOOTER ---- */
footer {
  padding: 6vw;
  text-align: center;
  border-bottom: var(--border);
}

.footer-script {
  font-family: var(--font-script);
  font-size: clamp(36px, 5vw, 80px);
  color: var(--accent);
  margin-bottom: 2rem;
}

.footer-details {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dark-accent);
  line-height: 2.5;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}

.footer-social a {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-social a:hover { opacity: 0.6; }

.footer-bottom {
  margin-top: 4rem;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--dark-accent);
  letter-spacing: 0.1em;
}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- MOBILE NAV ---- */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--black);
  margin: 6px 0;
  transition: all 0.3s ease;
}

/* ---- MOBILE ---- */
@media (max-width: 768px) {
  .menu-toggle { display: block; }

  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    z-index: 99;
  }

  nav.open { transform: translateY(0); }

  nav a { font-size: 16px; }

  .nav-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--black);
  }

  .about-grid,
  .story-section { grid-template-columns: 1fr; gap: 3rem; }

  .split-text { grid-template-columns: 1fr; }
  .split-text-panel:first-child { border-right: none; border-bottom: var(--border); }

  .gallery-grid { grid-template-columns: 1fr 1fr; }

  .offerings-grid { grid-template-columns: 1fr; }
  .offering-card { border-right: none; border-bottom: var(--border); }
  .offering-card:last-child { border-bottom: none; }

  .memories-track { grid-template-columns: 1fr; }

  .countdown-section { padding: 5.1vw 6vw; }
  .countdown-script { font-size: clamp(26px, 5.3vw, 36px); }
  .countdown-grid { gap: 1.1rem; }
  .countdown-cluster { gap: 0.52rem; }

  .heirloom-details-header {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .heirloom-details-header h2 { max-width: 11ch; }
  .heirloom-details-intro { justify-self: start; max-width: 52ch; }

  .heirloom-details-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .heirloom-detail-card,
  .heirloom-detail-card.detail-feature,
  .heirloom-detail-card.detail-one,
  .heirloom-detail-card.detail-two,
  .heirloom-detail-card.detail-three,
  .heirloom-detail-card.detail-four {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 0;
    padding: 1rem 0.9rem 0.9rem;
    gap: 0.35rem;
  }

  .heirloom-detail-card::after { inset: 4px; }
  .detail-index { margin-top: 0; }
  .heirloom-detail-card h3 { font-size: clamp(24px, 6.8vw, 34px); }

  .memory-card { transform: none !important; }
  .envelope-front { min-height: 268px; }
  .envelope-pocket { height: 60%; }
  .envelope-tab { top: 0.75rem; right: 0.75rem; font-size: 7px; padding: 0.28rem 0.45rem; }
  .envelope-address { left: 10%; width: 80%; top: 61%; }
  .envelope-address .eyebrow { font-size: 7px; margin-bottom: 0.55rem; }
  .envelope-address .to { font-size: clamp(22px, 7vw, 30px); }
  .envelope-address .line { font-size: 8px; }
  .envelope-seam { left: 10%; right: 10%; top: 78%; }
  .envelope-crest { right: 10%; top: 78%; font-size: 12px; padding: 0.08rem 0.64rem; }
  .envelope-cta { bottom: 0.78rem; font-size: 8px; }
  .letter-body { margin: 0; }

  .runway-stop { grid-template-columns: 1fr; gap: 0.48rem; padding: 1rem 0; }
  .runway-date {
    flex-direction: row;
    align-items: baseline;
    gap: 0.46rem;
    padding: 0.28rem 0 0.06rem;
  }
  .runway-day,
  .runway-month { font-size: 8px; }
  .runway-number { font-size: clamp(28px, 9vw, 40px); line-height: 0.9; }
  .runway-card { padding: 0.98rem 0.95rem 0.88rem 1.65rem; min-height: 0; }
  .runway-card::before { left: 0.74rem; }
  .runway-card::after { left: 0.48rem; width: 8px; height: 8px; }
  .runway-time { margin-bottom: 0.4rem; }

  .intro-strip { flex-wrap: wrap; gap: 0.7rem; padding: 4.5vw 5vw; }
  .intro-strip .legacy-script { width: 100%; }

  .hero { height: 85vh; }

  .section,
  .gallery-section,
  .offerings-section,
  .events-section,
  .rsvp-section,
  .testimonial-section,
  .letter-opening-section,
  .memories-section,
  .heirloom-details-section,
  .for-generations-section {
    padding: 12vw 6vw;
  }

  .heirloom-details-section {
    padding: 8vw 6vw;
  }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .hero { height: 75vh; }
  .hero-script { font-size: 48px; }
  .countdown-grid {
    width: 100%;
    max-width: 420px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.62rem;
  }
  .countdown-cluster {
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
  }
  .countdown-unit::after { display: none; }
  .countdown-unit { gap: 0.2rem; }
  .countdown-value { font-size: clamp(17px, 5.9vw, 24px); }
  .countdown-label { font-size: 6.4px; letter-spacing: 0.13em; }
  .countdown-meta { font-size: 7px; letter-spacing: 0.14em; }
  .countdown-script { font-size: clamp(24px, 8.4vw, 32px); }
  .countdown-section { padding: 7.4vw 5.5vw; }
  .heirloom-details-section { padding: 9vw 5.5vw; }
  .detail-points { gap: 0.28rem; }
}
</style>
</head>
<body>

<div class="site-wrapper">

  <!-- HEADER -->
  <header>
    <a href="#" class="header-logo">Eleanor & James</a>
    <button class="menu-toggle" onclick="document.querySelector('nav').classList.toggle('open')">
      <span></span><span></span>
    </button>
    <nav>
      <button class="nav-close" onclick="this.parentElement.classList.remove('open')">×</button>
      <a href="#story">Our Story</a>
      <a href="#gallery">Gallery</a>
      <a href="#countdown">Countdown</a>
      <a href="#rsvp">RSVP</a>
    </nav>
  </header>

  <!-- HERO -->
  <section class="hero">
    <img class="hero-image" src="https://i.pinimg.com/originals/ae/07/9b/ae079b628866d7b462d9b82b3f816edf.jpg" alt="Eleanor & James">
    <div class="hero-overlay">
      <span class="hero-script">Eleanor & James</span>
      <span class="hero-names">October 18, 2025 · The Grand Palais</span>
    </div>
  </section>

  <!-- INTRO STRIP -->
  <div class="intro-strip fade-in">
    <span>The Eleanor & James Archive</span>
    <span class="dot">•</span>
    <span>Established 2025</span>
    <span class="dot">•</span>
    <span>Los Angeles, California</span>
  </div>

  <!-- ABOUT -->
  <section class="section" id="story">
    <div class="about-grid fade-in">
      <div class="about-text">
        <span class="eyebrow">About the Couple</span>
        <h2>A Love Story Written in the Stars</h2>
        <p>What began as a chance encounter at a gallery opening became the most extraordinary chapter of our lives. Two souls drawn together by a shared love for art, architecture, and quiet Sunday mornings.</p>
      </div>
      <img class="about-image" src="https://i.pinimg.com/originals/eb/7c/4b/eb7c4bcc2105f080ea055cfb16c35fae.jpg" alt="Eleanor & James together">
    </div>
  </section>

  <!-- SPLIT TEXT -->
  <div class="split-text fade-in">
    <div class="split-text-panel">
      <h2>A Heart for</h2>
      <span class="script-accent">Romance</span>
    </div>
    <div class="split-text-panel">
      <h2>An Eye for</h2>
      <span class="script-accent">Beauty</span>
    </div>
  </div>

  <!-- GALLERY -->
  <section class="gallery-section" id="gallery">
    <div class="gallery-header fade-in">
      <span class="eyebrow">Curated Moments</span>
      <h2>Our Journey</h2>
      <span class="subtitle">Captured with an editorial eye and romantic soul</span>
    </div>
    <div class="gallery-grid">
      <img src="https://i.pinimg.com/originals/23/ef/5e/23ef5e6025d5aae47460de645e65ab9a.jpg" alt="Gallery 1">
      <img src="https://i.pinimg.com/originals/5f/87/32/5f8732147b98d005ba420040c3aa587a.jpg" alt="Gallery 2">
      <img src="https://i.pinimg.com/originals/ae/99/b1/ae99b1aef182c15863c96b5cfe3ac5b1.jpg" alt="Gallery 3">
    </div>
  </section>

  <!-- OUR STORY (Photographer section adapted) -->
  <section class="story-section fade-in">
    <img class="story-image" src="https://i.pinimg.com/originals/91/14/f6/9114f6c1081340b0584995d46d6b4c50.jpg" alt="Our Story">
    <div class="story-text">
      <span class="eyebrow">Our Story</span>
      <h3>Eleanor & James</h3>
      <span class="script-subtitle">Two hearts, one beautiful beginning</span>
      <p>She's an architect who sees poetry in structure. He's a writer who finds stories in silence. Together, they discovered that the most beautiful designs aren't drawn on paper — they're built between two people who choose each other, every day.</p>
      <p>Their celebration will honor the grand spaces that inspired their love, the intimate moments that defined it, and the friends and family who witnessed it bloom.</p>
    </div>
  </section>

  <!-- TESTIMONIAL / KIND WORDS -->
  <section class="testimonial-section fade-in">
    <img class="bg-image" src="https://i.pinimg.com/originals/55/77/09/557709f6406e5fed1456a88bb979feeb.jpg" alt="Background">
    <div class="testimonial-content">
      <span class="script-decoration">Kind Words</span>
      <span class="eyebrow">From Those Who Know Them Best</span>
      <h2>"Watching Eleanor and James together is like watching two people who were always meant to find each other — their love is effortless, genuine, and deeply inspiring."</h2>
      <span class="testimonial-attribution">— Sarah & Michael, Best Friends of the Couple</span>
    </div>
  </section>


  <!-- THE OFFERINGS (Wedding Events) -->
  <section class="offerings-section" id="events">
    <div class="offerings-header fade-in">
      <h2>The Celebration</h2>
    </div>
    <div class="offerings-grid fade-in">
      <div class="offering-card">
        <span class="offering-number">[001]</span>
        <img src="https://i.pinimg.com/originals/fa/09/1c/fa091c85d5ccd83ef28568157f186dd7.jpg" alt="Welcome Dinner">
        <h3>Welcome Dinner</h3>
        <p>An intimate evening gathering at Maison Lumière to welcome our guests and toast to the weekend ahead.</p>
      </div>
      <div class="offering-card">
        <span class="offering-number">[002]</span>
        <img src="https://i.pinimg.com/originals/69/be/dc/69bedc74b78888056c5e058319d8333c.jpg" alt="The Ceremony">
        <h3>The Ceremony</h3>
        <p>An afternoon of vows exchanged beneath the grand arches of The Grand Palais, followed by cocktails in the garden.</p>
      </div>
      <div class="offering-card">
        <span class="offering-number">[003]</span>
        <img src="https://i.pinimg.com/originals/a2/48/88/a24888d35050784083fb65e520d7696b.jpg" alt="The Reception">
        <h3>The Reception</h3>
        <p>Dinner, dancing, and celebration in the candlelit ballroom. An evening designed to be remembered forever.</p>
      </div>
    </div>
  </section>

  <!-- SCHEDULE / EVENTS -->
  <section class="events-section" id="events-timeline">
    <div class="events-header fade-in">
      <span class="eyebrow">The Weekend</span>
      <h2>The Weekend, Scene by Scene</h2>
      <p>An editorial timeline of where to be and when</p>
    </div>

    <div class="runway-timeline fade-in">
      <article class="runway-stop">
        <div class="runway-date">
          <span class="runway-day">Fri</span>
          <span class="runway-number">17</span>
          <span class="runway-month">Oct</span>
        </div>
        <div class="runway-card">
          <span class="runway-time">7:00 PM</span>
          <h3>Welcome Dinner</h3>
          <p class="runway-location">Maison Lumière · 42 Rue de Rivoli</p>
          <span class="runway-note">Candlelit welcome with close friends and family</span>
        </div>
      </article>

      <article class="runway-stop">
        <div class="runway-date">
          <span class="runway-day">Sat</span>
          <span class="runway-number">18</span>
          <span class="runway-month">Oct</span>
        </div>
        <div class="runway-card">
          <span class="runway-time">4:00 PM</span>
          <h3>The Ceremony</h3>
          <p class="runway-location">The Grand Palais · Main Hall</p>
          <span class="runway-note">Vows beneath the arches</span>
        </div>
      </article>

      <article class="runway-stop">
        <div class="runway-date">
          <span class="runway-day">Sat</span>
          <span class="runway-number">18</span>
          <span class="runway-month">Oct</span>
        </div>
        <div class="runway-card">
          <span class="runway-time">5:30 PM</span>
          <h3>Cocktail Hour</h3>
          <p class="runway-location">The Garden Terrace</p>
          <span class="runway-note">Champagne, strings, and golden hour portraits</span>
        </div>
      </article>

      <article class="runway-stop">
        <div class="runway-date">
          <span class="runway-day">Sat</span>
          <span class="runway-number">18</span>
          <span class="runway-month">Oct</span>
        </div>
        <div class="runway-card">
          <span class="runway-time">7:00 PM</span>
          <h3>Reception & Dinner</h3>
          <p class="runway-location">The Grand Ballroom</p>
          <span class="runway-note">Dinner service, toasts, and the first dance</span>
        </div>
      </article>

      <article class="runway-stop">
        <div class="runway-date">
          <span class="runway-day">Sun</span>
          <span class="runway-number">19</span>
          <span class="runway-month">Oct</span>
        </div>
        <div class="runway-card">
          <span class="runway-time">11:00 AM</span>
          <h3>Farewell Brunch</h3>
          <p class="runway-location">Hotel Courtyard</p>
        </div>
      </article>
    </div>
  </section>
  <!-- HEIRLOOM DETAILS -->
  <section class="heirloom-details-section" id="details">
    <div class="heirloom-details-header fade-in">
      <span class="eyebrow">Signature Module</span>
      <h2>Love Notes & Keepsakes</h2>
      <p class="heirloom-details-intro">Not logistics — the sentimental layer that makes this weekend feel like an heirloom.</p>
    </div>
    <div class="heirloom-details-grid fade-in">
      <article class="heirloom-detail-card detail-feature">
        <span class="detail-index">[Love Notes]</span>
        <h3>Leave a Love Note</h3>
        <p>At dinner, each guest leaves one sentence of marriage advice on letterpress cards we archive and reopen every anniversary.</p>
        <ul class="detail-points">
          <li>Letterpress Cards</li>
          <li>Anniversary Capsule</li>
          <li>Family Archive</li>
        </ul>
      </article>

      <article class="heirloom-detail-card detail-one">
        <span class="detail-index">[001]</span>
        <h3>Film Drop</h3>
        <p>Upload iPhone snaps and camcorder clips so the weekend is remembered in motion, not just portraits.</p>
        <ul class="detail-points">
          <li>Private Upload Link</li>
          <li>QR at Every Table</li>
        </ul>
      </article>

      <article class="heirloom-detail-card detail-two">
        <span class="detail-index">[002]</span>
        <h3>Weekend Soundtrack</h3>
        <p>Add one song that feels like us — we’ll fold guest picks into the live playlist before the reception.</p>
        <ul class="detail-points">
          <li>Guest Song Requests</li>
          <li>Spotify Capsule</li>
        </ul>
      </article>

      <article class="heirloom-detail-card detail-three">
        <span class="detail-index">[003]</span>
        <h3>City Mini Guide</h3>
        <p>Three favorites for guests staying longer: one coffee stop, one sunset walk, one late-night nightcap.</p>
        <ul class="detail-points">
          <li>Coffee</li>
          <li>Golden-Hour Walk</li>
          <li>Nightcap</li>
        </ul>
      </article>

      <article class="heirloom-detail-card detail-four">
        <span class="detail-index">[004]</span>
        <h3>Aftercare Archive</h3>
        <p>Post-weekend, guests receive one private archive link with candid gallery, thank-you note, and keepsake exports.</p>
        <ul class="detail-points">
          <li>Gallery Delivery</li>
          <li>Notes + Keepsakes</li>
        </ul>
      </article>
    </div>
  </section>

  <!-- FOR GENERATIONS -->
  <section class="for-generations-section fade-in">
    <span class="eyebrow">A Closing Note</span>
    <div class="for-generations-monogram">E • J</div>
    <h2>For Generations</h2>
    <p>May this weekend be remembered the way heirlooms are kept: with care, with reverence, and with love that only deepens over time.</p>
  </section>

  <!-- COUNTDOWN -->
  <section class="countdown-section fade-in" id="countdown">
    <div class="countdown-shell" data-countdown-target="">
      <div class="countdown-grid" aria-label="Wedding countdown timer">
        <div class="countdown-cluster countdown-cluster-left">
          <div class="countdown-unit">
            <span class="countdown-value" data-unit="days">124</span>
            <span class="countdown-label">Days</span>
          </div>
          <div class="countdown-unit">
            <span class="countdown-value" data-unit="hours">18</span>
            <span class="countdown-label">Hours</span>
          </div>
        </div>
        <div class="countdown-topline">
          <span class="countdown-script">Until We Gather</span>
        </div>
        <div class="countdown-cluster countdown-cluster-right">
          <div class="countdown-unit">
            <span class="countdown-value" data-unit="minutes">42</span>
            <span class="countdown-label">Minutes</span>
          </div>
          <div class="countdown-unit">
            <span class="countdown-value" data-unit="seconds">16</span>
            <span class="countdown-label">Seconds</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="rsvp-section" id="rsvp">
    <h2 class="fade-in">Celebrate With Us</h2>
    <p class="fade-in">We would be honored by your presence as we begin this new chapter together. Please respond by August 1, 2025.</p>
    <div class="rsvp-form fade-in">
      <div class="rsvp-step active" data-step="1">
        <span class="rsvp-step-indicator">Step 01 of 03</span>
        <label>Full Name</label>
        <input type="text" placeholder="Your full name">
        <label>Email Address</label>
        <input type="email" placeholder="your@email.com">
        <button class="rsvp-btn" onclick="nextStep(2)">Continue</button>
      </div>
      <div class="rsvp-step" data-step="2">

[115 more lines in file. Use offset=1980 to continue.]