@font-face {
      font-family: 'Brittany';
      src: url('https://fonts.cdnfonts.com/s/15098/Brittany.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
  


    :root {
      --gold: #C9A84C;
      --gold-deep: #A07828;
      --gold-light: #E8C96A;
      --gold-pale: #F7EDD0;
      --gold-shimmer: #F5D878;
      --yellow: #F0C832;
      --yellow-soft: #FDE97A;
      --cream: #FFFDF5;
      --white: #FFFFFF;
      --ivory: #FAF7EE;
      --black: #0E0C07;
      --text: #1A1509;
      --brittany: 'Pinyon Script', cursive;
      --font-display: 'Playfair Display', Georgia, serif;
      --font-sub: 'Raleway', sans-serif;
      --font-tenor: 'Tenor Sans', 'Raleway', sans-serif;
    }

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

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      max-width: 100%;
    }

    html, body {
  max-width: 100%;
  overflow-x: hidden; /* Specifically kills horizontal scroll */
  position: relative;
}


    /* ── INTRO OVERLAY (COMPLETE FINAL VERSION) ── */
    #intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: linear-gradient(135deg, #F3E6C8 0%, #E8DCC8 50%, #C9A84C 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      overflow: hidden; /* This kills any horizontal or vertical scrollbars on the intro */
      width: 100vw;
      height: 100vh;
    }

    #intro-overlay.dismissed {
      pointer-events: none;
      animation: overlayFadeOut 1s ease forwards;
      animation-delay: 3.5s;
      /* Waits 3.5s for both flaps to slowly finish opening */
    }

    @keyframes overlayFadeOut {
      0% {
        opacity: 1;
      }

      100% {
        opacity: 0;
        visibility: hidden;
      }
    }

    /* Gatefold Envelope Container */
    .laser-envelope-wrapper {
      position: relative;
      width: 320px;
      height: 460px;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1500px;
      z-index: 2;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    /* The Invitation Paper Inside */
    .laser-paper {
      position: absolute;
      inset: 5px;
      background: #fdfbf7;
      border: 1px solid rgba(201, 168, 76, 0.3);
      border-radius: 2px;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    }

    /* Flap Base Settings */
    .flap {
      position: absolute;
      top: 0;
      bottom: 0;
      transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
      /* Slow 2-second swing */
      transform-style: preserve-3d;
    }

    /* LEFT FLAP - Dark Gold */
    .flap-left {
      left: 0;
      width: 35%;
      transform-origin: left center;
      z-index: 4;
      background: linear-gradient(to right, #b28e46 0%, #826220 100%);
    }

    /* The GENTLE Wavy Edge - COMPLETELY FLAT */
    .flap-left::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: -23px;
      width: 24px;
      z-index: 4;
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="120" viewBox="0 0 24 120"><path d="M-1,0 L12,0 C16,20 16,40 12,60 C8,80 8,100 12,120 L-1,120 Z" fill="%23826220"/><path d="M12,0 C16,20 16,40 12,60 C8,80 8,100 12,120" fill="none" stroke="%23d4af37" stroke-width="1.5"/></svg>');
      background-repeat: repeat-y;
      background-size: 24px 120px;
      filter: none;
    }

    /* Styling for Save the Date on Intro Flap */
    .save-the-date-intro {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      text-align: center;
      pointer-events: none;
      /* Ensures it doesn't block clicking the envelope */
    }

    /* Update the Save the Date to be horizontal on the right flap */
.save-the-date-vertical {
  writing-mode: horizontal-tb;
  text-orientation: initial;
  font-family: 'Tenor Sans', sans-serif;
  letter-spacing: 0.2em;
  font-size: 0.9rem;
  color: #826220;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.6;
  pointer-events: none;
}


    /* Ensure the right flap can hold the absolute text */
    .flap-right {
      position: absolute;
  right: 0;
  width: 65%;
  height: 100%;
  transform-origin: right center;
  z-index: 3;
  background: linear-gradient(to left, #fdfbf7 0%, #f5f2eb 100%);
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  overflow: hidden;
    }

    /* Base style for top and bottom ornaments on the flap */
.flap-ornament {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.6;
  pointer-events: none;
}

.flap-ornament.top {
  top: 30px;
}

.flap-ornament.bottom {
  bottom: 30px;
  transform: translateX(-50%) rotate(180deg); /* Flips the design for the bottom */
}

.flap-ornament .line-thick {
  width: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, #826220, transparent);
}

.flap-ornament .symbol {
  font-family: 'Tenor Sans', sans-serif;
  color: #826220;
  font-size: 12px;
  letter-spacing: 6px;
}

    /* REMOVED YELLOW WIGGLY LINE */
    .flap-right::after {
      display: none;
      /* This hides the SVG wavy edge entirely */
    }

    /* SEQUENCE ANIMATIONS */
    #intro-overlay.dismissed .flap-right {
      transform: rotateY(130deg);
    }

    #intro-overlay.dismissed .flap-left {
      transform: rotateY(-130deg);
    }

    /* CENTER SEAL CONTAINER */
    .seal-container {
      position: absolute;
      top: 50%;
      left: 35%;
      transform: translate(-50%, -50%);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #intro-overlay.dismissed {
      pointer-events: none;
      animation: overlayFadeOut 1s ease forwards;
      animation-delay: 2.8s;
      /* Waits for both flaps to finish */
    }

    /* ULTRA-REALISTIC WAX/PRESSED SEAL - Updated for Larger Gold Initials */
    .pressed-seal {
      font-family: 'Pinyon Script', cursive !important;
      font-size: 78px;
      /* Increased from 38px to be much bigger */
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none !important;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;

      /* Gold Color Styling */
      color: #D4AF37;
      /* Classic Metallic Gold */
      text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.3), -0.5px -0.5px 1px rgba(0, 0, 0, 0.5);
      /* FIX FOR CUT OFF LETTERS: */
      overflow: visible !important;
    }

    .pressed-seal span {
      font-family: 'Pinyon Script', cursive !important;
      text-transform: none !important;
      display: inline-block;
      /* Use a gradient for a shiny gold effect */
      background: linear-gradient(135deg, #fdf5e6 0%, #D4AF37 50%, #b8860b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
      /* ADD THESE FOR IOS: */
      padding: 0 15px;      /* Adds invisible space for the L's tail to breathe */
      margin: 0 -5px;       /* Tightens the gap back up so they don't look too far apart */
      overflow: visible;    /* Ensures Safari doesn't clip the flourish */
    }

    /* Ensure the seal container has enough room for bigger text */
    .pressed-seal::before {
      content: '';
      position: absolute;
      inset: 2px;
      /* Slightly expanded the inner area */
      border-radius: 53% 47% 54% 46% / 48% 52% 47% 53%;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
      box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.6),
        inset 0 -2px 3px rgba(255, 255, 255, 0.4),
        0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 0 6px rgba(201, 168, 76, 0.3);
      z-index: -1;
    }

    .pressed-seal::after {
      content: '';
      position: absolute;
      inset: 9px;
      border-radius: 49% 51% 52% 48% / 50% 48% 51% 49%;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
      z-index: -1;
    }

    /* STANDARD SIZE DRIED FLOWER */
    .seal-flower {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      width: 45px;
      height: 110px;
      z-index: 1;
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 120"><path d="M25,10 C30,40 20,80 25,120" fill="none" stroke="%238b7b4d" stroke-width="1.5"/><path d="M26,20 Q38,10 35,25 Q30,25 26,25 Z" fill="%23b09f6e"/><path d="M24,40 Q12,30 15,45 Q20,45 24,45 Z" fill="%239c8c5c"/><path d="M26,60 Q40,50 35,65 Q30,65 26,65 Z" fill="%238b7b4d"/><path d="M24,80 Q10,70 15,85 Q20,85 24,85 Z" fill="%23b09f6e"/><path d="M25,100 Q35,90 32,105 Q28,105 25,105 Z" fill="%239c8c5c"/></svg>');
      background-repeat: no-repeat;
      background-position: top center;
      filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
    }

    /* Tap to Open Hint - Fixed Beneath Envelope */
    .intro-tap-hint {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99;
      font-family: var(--font-tenor);
      font-size: 10px;
      letter-spacing: 4px;
      color: #fff;
      text-transform: uppercase;
      animation: hintFadeIn 1s ease forwards;
      animation-delay: 1.5s;
      opacity: 0;
      transition: opacity 0.3s;
    }

    @keyframes hintFadeIn {
      0% {
        opacity: 0;
        transform: translate(-50%, 10px);
      }

      100% {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    #particles {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.35;
    }

    /* ── SCROLL REVEAL ── */
    .reveal,
    .reveal-left,
    .reveal-right {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .js-ready .reveal {
      opacity: 0;
      transform: translateY(30px);
    }

    .js-ready .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .js-ready .reveal-left {
      opacity: 0;
      transform: translateX(-30px);
    }

    .js-ready .reveal-left.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .js-ready .reveal-right {
      opacity: 0;
      transform: translateX(30px);
    }

    .js-ready .reveal-right.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* ── FLOATING BUTTONS ── */
    .floating-controls {
  position: fixed;
  bottom: 80px;
  right: 22px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  overflow: visible;
  pointer-events: none;
}

.floating-controls > * {
  pointer-events: auto;
}

    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: rgba(255, 253, 245, 0.92);
      border: 1.5px solid var(--gold);
      border-radius: 40px;
      cursor: pointer;
      backdrop-filter: blur(14px);
      box-shadow: 0 4px 24px rgba(201, 168, 76, 0.22);
      transition: all 0.3s;
      color: var(--gold-deep);
      text-decoration: none;
    }

    .action-btn:hover {
      box-shadow: 0 8px 36px rgba(201, 168, 76, 0.4);
      transform: translateY(-3px);
    }

    .music-btn {
      padding: 10px 20px;
    }

    .music-disc {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      color: var(--gold);
      animation: spinDisc 4s linear infinite;
    }

    .music-disc.paused {
      animation-play-state: paused;
    }

    @keyframes spinDisc {
      to {
        transform: rotate(360deg);
      }
    }

    .btn-txt {
     font-family: var(--font-tenor);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
    }

    /* ── NAV ── */
    nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 26px;
      padding: 14px 20px;
      background: rgba(255, 253, 245, 0.96);
      border-top: 1.5px solid rgba(201, 168, 76, 0.3);
      backdrop-filter: blur(16px);
    }

    nav a {
      font-family: var(--font-tenor);
      font-size: 8.5px;
      letter-spacing: 3px;
      color: var(--gold-deep);
      text-decoration: none;
      text-transform: uppercase;
      transition: 0.3s;
      opacity: 0.65;
      white-space: nowrap;
    }

    nav a:hover {
      color: var(--gold);
      opacity: 1;
    }

    /* ── MOBILE NAV TOGGLE ── */
    .nav-toggle-btn {
      display: none;
      position: fixed;
      bottom: 22px;
      right: 22px;
      z-index: 1100;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold-deep), var(--gold));
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(201, 168, 76, 0.45);
      align-items: center;
      justify-content: center;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
    }

    .nav-toggle-btn.open {
      transform: rotate(45deg);
      box-shadow: 0 6px 28px rgba(201, 168, 76, 0.6);
    }

    .nav-toggle-icon {
      font-family: var(--brittany);
      font-size: 22px;
      color: var(--cream);
      line-height: 1;
      pointer-events: none;
    }

    .mobile-nav-popup {
      display: none;
      position: fixed;
      bottom: 88px;
      right: 16px;
      z-index: 1090;
      background: rgba(255, 253, 245, 0.97);
      backdrop-filter: blur(18px);
      border: 1.5px solid rgba(201, 168, 76, 0.35);
      border-radius: 16px;
      padding: 10px 0;
      min-width: 190px;
      box-shadow: 0 12px 48px rgba(201, 168, 76, 0.22), 0 2px 12px rgba(0, 0, 0, 0.07);
      transform-origin: bottom right;
      transform: scale(0.85);
      opacity: 0;
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
      pointer-events: none;
    }

    .mobile-nav-popup.open {
      transform: scale(1);
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-nav-popup a {
      display: block;
      font-family: var(--font-sub), serif;
      font-size: 10px;
      letter-spacing: 3px;
      color: var(--gold-deep);
      text-decoration: none;
      text-transform: uppercase;
      padding: 13px 24px;
      border-bottom: 1px solid rgba(201, 168, 76, 0.12);
      transition: background 0.2s, color 0.2s;
      opacity: 0.8;
    }

    .mobile-nav-popup a:last-child {
      border-bottom: none;
    }

    .mobile-nav-popup a:hover,
    .mobile-nav-popup a:active {
      background: rgba(201, 168, 76, 0.1);
      color: var(--gold);
      opacity: 1;
    }

    .nav-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1080;
      background: rgba(14, 12, 7, 0.25);
      backdrop-filter: blur(2px);
      opacity: 0;
      transition: opacity 0.25s;
      pointer-events: none;
    }

    .nav-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    /* ── SHARED ── */
    .section-wrap {
      padding: 90px 24px;
      position: relative;
    }

    .bg-ivory {
      background: var(--ivory);
    }

    .bg-cream {
      background: var(--cream);
    }

    .bg-white {
      background: var(--white);
    }

    .bg-gold-pale {
      background: var(--gold-pale);
    }

    .s-eyebrow {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 7px;
      color: var(--gold);
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 10px;
      opacity: 0.8;
    }

    .s-script {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: clamp(34px, 6vw, 56px);
      font-style: italic;
      font-weight: 300;
      color: var(--black);
      text-align: center;
      line-height: 1.2;
      letter-spacing: 1px;
      text-transform: none;
    }

    .s-caps {
      font-family: var(--font-tenor);
      font-weight: 400;
      font-size: clamp(10px, 1.8vw, 14px);
      letter-spacing: 8px;
      color: var(--gold-deep);
      text-align: center;
      text-transform: uppercase;
      margin-top: 6px;
    }

    .gold-bar {
      width: 100px;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
      margin: 22px auto 48px;
      position: relative;
    }

    .thin-rule {
      width: 60px;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
      display: inline-block;
    }

    .ornament-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin: 10px 0;
    }

    .ornament-row span {
      color: var(--gold);
      font-size: 12px;
    }

    /* ── HERO ── */
    #home {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, #FFFDF5 0%, #FDF6DC 40%, #FEF9E7 70%, #FFFDF5 100%);
      padding-top: 40px;
      padding-bottom: 120px;
      text-align: center;
    }

    .hc {
      position: absolute;
      width: 72px;
      height: 72px;
      pointer-events: none;
    }

    .hc svg {
      width: 100%;
      height: 100%;
    }

    .hc.tl {
      top: 80px;
      left: 20px;
    }

    .hc.tr {
      top: 80px;
      right: 20px;
      transform: scaleX(-1);
    }

    .hc.bl {
      bottom: 20px;
      left: 20px;
      transform: scaleY(-1);
    }

    .hc.br {
      bottom: 20px;
      right: 20px;
      transform: scale(-1, -1);
    }

    .petal {
      position: absolute;
      width: 8px;
      height: 8px;
      background: radial-gradient(circle, var(--gold-light) 0%, var(--yellow-soft) 100%);
      border-radius: 50% 0;
      opacity: 0;
      animation: petalFall linear infinite;
      pointer-events: none;
    }

    @keyframes petalFall {
      0% {
        opacity: 0;
        transform: translateY(-20px) rotate(0deg);
      }

      10% {
        opacity: 0.7;
      }

      90% {
        opacity: 0.4;
      }

      100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) translateX(60px);
      }
    }

    .hero-ribbon {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 6px;
      color: var(--gold-light);
      text-transform: uppercase;
      opacity: 0.9;
      animation: fadeUp 1s ease both;
      text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    }

    .hero-names {
      font-family: var(--brittany);
      font-size: clamp(52px, 12vw, 110px);
      color: var(--gold);
      animation: fadeUp 1s 0.15s ease both;
      text-shadow: 1px 3px 20px rgba(201, 168, 76, 0.4), 0 0 60px rgba(201, 168, 76, 0.15);
      line-height: 1.15;
      text-align: center;
      margin: 10px 0;
      letter-spacing: 2px;
      text-transform: none;
      font-weight: 400;
      letter-spacing: 0;
    }

    .hero-amp {
      font-size: 0.65em;
      vertical-align: middle;
    }

    .hero-surname {
      font-family: var(--font-tenor);
      font-size: clamp(8px, 1.5vw, 11px);
      letter-spacing: 10px;
      color: var(--gold-deep);
      text-transform: uppercase;
      animation: fadeUp 1s 0.3s ease both;
      margin-top: 8px;
      font-weight: 300;
    }

    .hero-date-line {
      font-family: var(--font-display);
      font-size: clamp(16px, 3vw, 24px);
      font-weight: 400;
      font-style: italic;
      color: var(--cream);
      letter-spacing: 2px;
      animation: fadeUp 1s 0.45s ease both;
      margin-top: 120px;
      text-shadow: 0 1px 8px rgba(0,0,0,0.6);
    }

    .hero-church {
      font-family: 'EB Garamond', serif;
      font-size: 15px;
      font-style: italic;
      color: var(--gold-pale);
      max-width: 380px;
      line-height: 2;
      letter-spacing: 0.5px;
      animation: fadeUp 1s 0.6s ease both;
      margin-top: 30px;
      text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    }

    .hero-sunburst {
      position: absolute;
      width: 700px;
      height: 700px;
      background: repeating-conic-gradient(from 0deg, transparent 0deg 10deg, rgba(201, 168, 76, 0.025) 10deg 20deg);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: slowSpin 100s linear infinite;
      pointer-events: none;
      filter: blur(12px);
    }

    @keyframes slowSpin {
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }


    /* ── DRESS CODE SWATCH ROW ── */
    .dress-swatches-row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 22px 14px;
      margin: 8px 0 36px;
    }
    .dress-swatch-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 64px;
    }
    .dress-swatch-dot {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 3px solid var(--white);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    }
    .dress-swatch-item:hover .dress-swatch-dot {
      transform: translateY(-5px) scale(1.1);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    }
    .dress-swatch-name {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 1.5px;
      color: var(--gold-deep);
      text-transform: uppercase;
      text-align: center;
      line-height: 1.5;
    }

    /* ── FORMAL ATTIRE CARD ── */
    .dress-formal-card {
      border: 1px solid rgba(201, 168, 76, 0.3);
      border-radius: 10px;
      background: var(--ivory);
      padding: 36px 30px;
    }
    .dress-formal-title {
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(15px, 2vw, 18px);
      color: var(--gold-deep);
      margin-bottom: 18px;
    }
    .dress-formal-text {
      font-family: 'EB Garamond', serif;
      font-size: clamp(14px, 2vw, 16px);
      color: var(--text);
      line-height: 1.8;
      opacity: 0.85;
      margin: 0 auto;
      max-width: 480px;
    }
    .dress-formal-divider {
      width: 100%;
      height: 1px;
      background: rgba(201, 168, 76, 0.22);
      margin: 26px 0;
    }
    .dress-color-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px;
    }
    .dress-color-tag {
      font-family: var(--font-tenor);
      font-size: 10px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold-deep);
      border: 1px solid rgba(201, 168, 76, 0.35);
      border-radius: 4px;
      padding: 13px 22px;
      background: var(--white);
      transition: all 0.3s ease;
    }
    .dress-color-tag:hover {
      border-color: var(--gold);
      background: var(--cream);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(201, 168, 76, 0.14);
    }
    .dress-formal-warning {
      font-family: var(--font-tenor);
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: none;
      color: var(--gold-deep);
    }
    .dress-formal-warning strong {
      color: var(--text);
    }
    @media(max-width:540px) {
      .dress-swatches-row { gap: 22px 16px; }
      .dress-swatch-dot { width: 40px; height: 40px; }
      .dress-formal-card { padding: 28px 18px; }
    }

    /* ── COUNTDOWN (fixed) ── */
    #countdown {
      background: linear-gradient(135deg, #FDF6DC, #FEF9E7, #FDF6DC);
      position: relative;
      overflow: hidden;
    }

    .cd-wrap {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: clamp(15px, 5vw, 50px);
      flex-wrap: wrap;
      margin-top: 40px;
      position: relative;
      z-index: 1;
    }

    .cd-box {
      text-align: center;
      min-width: 70px;
    }

    .cd-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(50px, 10vw, 96px);
      color: var(--black);
      line-height: 1;
      display: block;
      border-bottom: 1.5px solid rgba(201, 168, 76, 0.5);
      padding-bottom: 4px;
    }

    .cd-lbl {
      font-family: var(--font-sub), serif;
      font-size: 9px;
      letter-spacing: 3px;
      color: var(--gold-deep);
      text-transform: uppercase;
      margin-top: 10px;
    }

    /* ── PHOTO STRIP (SCROLLABLE GALLERY) ── */
    #strip-section {
      padding: 80px 0;
      overflow: hidden;
      background: var(--white);
    }

    .strip-hint {
      font-family: var(--font-sub), serif;
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.6;
      text-align: center;
      margin: -10px 0 18px;
    }

    .strip-fade-wrap {
      position: relative;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 30px 0 26px;
      min-height: 320px;
      scroll-snap-type: x proximity;
      scrollbar-width: thin;
      scrollbar-color: rgba(201, 168, 76, 0.4) rgba(201, 168, 76, 0.08);
    }

    .strip-fade-wrap::-webkit-scrollbar {
      height: 6px;
    }

    .strip-fade-wrap::-webkit-scrollbar-track {
      background: rgba(201, 168, 76, 0.08);
      border-radius: 10px;
    }

    .strip-fade-wrap::-webkit-scrollbar-thumb {
      background: rgba(201, 168, 76, 0.4);
      border-radius: 10px;
    }

    .strip-fade-wrap::-webkit-scrollbar-thumb:hover {
      background: rgba(201, 168, 76, 0.6);
    }

    .strip-fade-wrap::before,
    .strip-fade-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 16px;
      z-index: 2;
      width: 80px;
      pointer-events: none;
    }

    .strip-fade-wrap::before {
      left: 0;
      background: linear-gradient(to right, var(--white), transparent);
    }

    .strip-fade-wrap::after {
      right: 0;
      background: linear-gradient(to left, var(--white), transparent);
    }

    .strip-track {
      display: flex;
      align-items: center;
      gap: 28px;
      width: max-content;
      padding: 10px 28px;
    }

    .sf {
      flex-shrink: 0;
      background: #ffffff;
      padding: 10px 10px 44px 10px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(201, 168, 76, 0.15);
      position: relative;
      border: 1px solid rgba(201, 168, 76, 0.25);
      scroll-snap-align: center;
      will-change: transform;
      transform: translateZ(0);
    }

    .sf:nth-child(odd) {
      transform: rotate(-2.5deg);
    }

    .sf:nth-child(even) {
      transform: rotate(2.5deg);
    }

    .sf:hover {
      transform: translateY(-8px) scale(1.04) !important;
      z-index: 10;
      box-shadow: 0 16px 36px rgba(201, 168, 76, 0.22);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .sf.portrait {
      width: 180px;
    }

    .sf.landscape {
      width: 270px;
    }

    .sf-photo {
      width: 100%;
      background: linear-gradient(135deg, #FAF7EE 0%, #F0E6C8 60%, #FAF7EE 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(201, 168, 76, 0.2);
    }

    .sf.portrait .sf-photo {
      height: 200px;
    }

    .sf.landscape .sf-photo {
      height: 170px;
    }

    .sf-icon {
      font-size: 42px;
    }

    .sf-lbl {
      font-family: var(--brittany);
      font-size: 22px;
      color: var(--gold-deep);
      text-align: center;
      position: absolute;
      bottom: 8px;
      left: 0;
      right: 0;
    }

    /* ── ELEGANT CARDS (PARENTS / SPONSORS / ENTOURAGE) ── */
    .par-grid,
    .ent-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 36px 20px;
      justify-content: center;
      max-width: 860px;
      margin: 0 auto;
    }

    .par-grid {
      max-width: 700px;
    }

    /* ── SPONSORS TABLE LAYOUT ── */
    .spon-table {
      max-width: 680px;
      margin: 0 auto;
      width: 100%;
    }

    .spon-header {
      display: flex;
      justify-content: space-around;
      padding-bottom: 14px;
    }

    .spon-col-label {
      font-family: var(--font-tenor);
      font-size: 11px;
      letter-spacing: 7px;
      color: var(--gold-deep);
      text-transform: uppercase;
      flex: 1;
      text-align: center;
    }

    .spon-header-rule {
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
      margin-bottom: 0;
    }

    .spon-body {
      display: flex;
      align-items: stretch;
    }

    .spon-col {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .spon-divider-v {
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(201, 168, 76, 0.4), transparent);
      margin: 0 4px;
      flex-shrink: 0;
    }

    .spon-name {
      font-family: 'EB Garamond', serif;
      font-size: 16px;
      font-style: italic;
      color: var(--text);
      text-align: center; /* Center everything by default */
      padding: 16px 12px;
      border-bottom: 1px solid rgba(201, 168, 76, 0.18);
      line-height: 1.4;
      /* Ensure names take up the same height even if one is 2 lines */
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
    }

    @media (max-width: 600px) {
    .spon-name {
      font-size: 14px; /* Slightly smaller text for better fit */
      padding: 12px 5px;
      min-height: 60px; /* Forces boxes to be same height even if text wraps */
    }
  
    .spon-divider-v {
      margin: 0 10px; /* Give a bit more breathing room to the center line */
    }
  }

  
    .par-col,
    .ent-col {
      background: var(--white);
      border: 1.5px solid rgba(201, 168, 76, 0.25);
      border-radius: 12px;
      padding: 26px 22px;
      padding-top: 44px;
      text-align: center;
      box-shadow: 0 8px 24px -6px rgba(201, 168, 76, 0.12), 0 3px 10px rgba(0, 0, 0, 0.02);
      transition: all 0.35s;
      position: relative;
      overflow: hidden;
      flex: 0 1 290px;
      max-width: 310px;
    }

    .par-col::after,
    .ent-col::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      padding: 1.5px;
      background: linear-gradient(145deg, rgba(201, 168, 76, 0.4) 0%, transparent 70%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .par-col:hover,
    .ent-col:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px -10px rgba(201, 168, 76, 0.25);
      border-color: rgba(201, 168, 76, 0.55);
    }

    .par-col h3,
    .ent-col h3 {
      font-family: var(--font-sub), serif;
      font-size: 10px;
      letter-spacing: 5px;
      color: var(--gold-deep);
      text-transform: uppercase;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(201, 168, 76, 0.25);
      display: block;
      text-align: center;
      width: 100%;
    }

    .par-col p,
    .ent-col ul li {
      font-family: 'EB Garamond', serif;
      font-size: 17px;
      font-style: italic;
      color: var(--text);
      line-height: 1.7;
      padding: 4px 0;
    }

    .ent-col ul {
      list-style: none;
    }

    .ent-full {
      flex: 0 1 100%;
      max-width: 500px;
    }

    /* ── ENTOURAGE TABLE LAYOUT ── */
    .ent-table-wrap {
      max-width: 680px;
      margin: 0 auto;
      width: 100%;
    }

    .ent-table-block {
      background: var(--white);
      border: 1.5px solid rgba(201, 168, 76, 0.28);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 8px 32px -8px rgba(201, 168, 76, 0.16), 0 3px 12px rgba(0,0,0,0.03);
      position: relative;
    }

    .ent-table-block::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 14px;
      background: linear-gradient(145deg, rgba(201,168,76,0.06) 0%, transparent 60%);
      pointer-events: none;
    }

    .ent-table-spacer {
      height: 28px;
    }

    .ent-table-header {
      display: flex;
      justify-content: space-around;
      padding: 22px 20px 16px;
    }

    .ent-table-col-label {
      font-family: var(--font-tenor);
      font-size: 10px;
      letter-spacing: 6px;
      color: var(--gold-deep);
      text-transform: uppercase;
      flex: 1;
      text-align: center;
    }

    .ent-table-header-rule {
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
      margin: 0 20px;
    }

    .ent-table-body {
      display: flex;
      align-items: stretch;
      padding: 0;
    }

    .ent-table-col {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .ent-table-divider-v {
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(201, 168, 76, 0.35), transparent);
      margin: 12px 0;
      flex-shrink: 0;
    }

    .ent-spon-name {
      font-family: 'EB Garamond', serif;
      font-size: 16px;
      font-style: italic;
      color: var(--text);
      text-align: center;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(201, 168, 76, 0.14);
      line-height: 1.45;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      transition: color 0.25s, background 0.25s;
    }

    .ent-spon-name:hover {
      color: var(--gold-deep);
      background: rgba(201,168,76,0.04);
    }

    .ent-spon-name.last {
      border-bottom: none;
    }

    .ent-three-col .ent-table-col {
      flex: 1;
    }

    @media(max-width: 600px) {
      .ent-table-col-label {
        font-size: 8px;
        letter-spacing: 3px;
      }
      .ent-spon-name {
        font-size: 13px;
        padding: 11px 6px;
        min-height: 56px;
      }
    }

    /* ── TIMELINE (circle on line, left time first, right circle-desc-time) ── */
    .tl-wrap {
      max-width: 640px;
      margin: 0 auto;
      position: relative;
      padding: 20px 0;
    }

    .tl-wrap::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1.5px;
      transform: translateX(-50%);
      background: linear-gradient(to bottom, transparent, var(--gold) 5%, var(--gold) 95%, transparent);
    }

    .tl-row {
      display: flex;
      align-items: center;
      margin-bottom: 52px;
      position: relative;
    }

    .tl-t {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 24px;
      color: var(--black);
      width: calc(50% - 20px);
      text-align: right;
      flex-shrink: 0;
    }

    .tl-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 3px solid var(--gold);
      background: var(--cream);
      flex-shrink: 0;
      position: relative;
      z-index: 1;
      margin: 0 12px;
      transition: 0.3s;
    }

    .tl-row:hover .tl-dot {
      background: var(--gold);
      transform: scale(1.2);
    }

    .tl-txt {
      width: calc(50% - 20px);
      flex-shrink: 0;
      text-align: left;
    }

    .tl-row.right {
      flex-direction: row-reverse;
    }

    .tl-row.right .tl-t {
      text-align: left;
    }

    .tl-row.right .tl-txt {
      text-align: right;
    }

    .tl-ico {
      font-size: 22px;
      display: block;
      margin-bottom: 4px;
    }

    .tl-name {
      font-family: var(--font-sub), serif;
      font-size: 11px;
      letter-spacing: 2px;
      color: var(--black);
      text-transform: uppercase;
      font-weight: 600;
    }

    .tl-note {
      font-family: 'EB Garamond', serif;
      font-size: 15px;
      font-style: italic;
      color: var(--gold-deep);
      margin-top: 4px;
    }

    /* ── FOOTER ── */
    footer {
      text-align: center;
      padding: 80px 20px 60px;
      background: linear-gradient(160deg, #FFFDF5 0%, #FDF6DC 100%);
      border-top: 1px solid rgba(201, 168, 76, 0.2);
      position: relative;
      overflow: hidden;
    }

    .ft-monogram {
      width: 85px;
      height: 85px;
      margin: 0 auto 20px;
      border-radius: 50%;
      border: 1px solid rgba(201, 168, 76, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--gold-pale), var(--cream));
      box-shadow: 0 0 40px rgba(201, 168, 76, 0.15);
    }

    .ft-monogram span {
      font-family: var(--brittany);
      font-size: 48px;
      color: var(--gold-deep);
      font-weight: 400;
    }

    .ft-names {
      font-family: var(--brittany);
      font-size: 42px;
      color: var(--gold-deep);
      text-transform: none;
      letter-spacing: 2px;
      line-height: 1.2;
      margin-bottom: 10px;
      font-weight: 400;
    }

    .ft-tagline {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 18px;
      color: var(--gold-deep);
      opacity: 0.55;
      margin-top: 14px;
    }

    /* ── LOCATION / RSVP / DRESS ── */
    .cards-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      max-width: 920px;
      margin: 0 auto;
    }

    .card {
      border: 1.5px solid rgba(201, 168, 76, 0.3);
      border-radius: 6px;
      padding: 32px 22px;
      text-align: center;
      background: var(--white);
      box-shadow: 0 4px 18px rgba(201, 168, 76, 0.06);
      transition: 0.35s;
      flex: 0 1 260px;
      max-width: 280px;
    }

    .card:hover {
      border-color: rgba(201, 168, 76, 0.65);
      box-shadow: 0 12px 36px rgba(201, 168, 76, 0.12);
      transform: translateY(-6px);
    }

    .card-ico {
      font-size: 32px;
      margin-bottom: 14px;
    }

    .card-lbl {
      font-family: var(--font-sub), serif;
      font-size: 9px;
      letter-spacing: 4px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 9px;
    }

    .card-head {
      font-family: var(--brittany);
      font-size: 32px;
      color: var(--black);
      margin-bottom: 8px;
    }

    .card-body {
      font-family: 'EB Garamond', serif;
      font-size: 15px;
      color: var(--gold-deep);
      font-style: italic;
      line-height: 1.8;
    }

    .cal-btn {
      display: inline-block;
      margin-top: 20px;
      padding: 8px 18px;
      border: 1px solid var(--gold);
      border-radius: 4px;
      font-family: var(--font-sub), serif;
      font-size: 8px;
      letter-spacing: 2px;
      color: var(--gold-deep);
      text-decoration: none;
      text-transform: uppercase;
    }

    .location-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
      max-width: 820px;
      margin: 0 auto;
    }

    .loc-card {
      background: var(--white);
      border: 1.5px solid rgba(201, 168, 76, 0.3);
      border-radius: 6px;
      padding: 30px 22px;
      text-align: center;
      box-shadow: 0 4px 20px rgba(201, 168, 76, 0.08);
      transition: 0.3s;
      flex: 0 1 320px;
      max-width: 360px;
    }

    .loc-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(201, 168, 76, 0.15);
    }

    .loc-card-icon {
      font-size: 32px;
      margin-bottom: 14px;
    }

    .loc-card-title {
      font-family: var(--font-sub), serif;
      font-size: 10px;
      letter-spacing: 4px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .loc-card-name {
      font-family: var(--brittany);
      font-size: 34px;
      color: var(--black);
      margin-bottom: 8px;
    }

    .loc-card-addr {
      font-family: 'EB Garamond', serif;
      font-size: 15px;
      font-style: italic;
      color: var(--gold-deep);
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .loc-btn {
      display: inline-block;
      font-family: var(--font-sub), serif;
      font-size: 10px;
      letter-spacing: 2px;
      color: var(--gold-deep);
      text-decoration: none;
      border: 1.5px solid var(--gold);
      padding: 10px 24px;
      text-transform: uppercase;
      border-radius: 4px;
    }

    .dress-box {
      max-width: 620px;
      margin: 0 auto;
      text-align: center;
      border: 1.5px solid rgba(201, 168, 76, 0.4);
      padding: 50px 40px;
      background: var(--white);
      border-radius: 6px;
      box-shadow: 0 8px 30px rgba(201, 168, 76, 0.1);
    }

    .palette {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin: 24px 0;
    }

    .pal-dot {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border: 2px solid #fff;
    }

    .dress-title {
      font-family: var(--font-sub), serif;
      font-size: 13px;
      letter-spacing: 4px;
      color: var(--gold-deep);
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .dress-body {
      font-family: 'EB Garamond', serif;
      font-size: 17px;
      font-style: italic;
      color: var(--text);
      line-height: 1.8;
      margin-bottom: 16px;
    }

    .dress-warn {
      font-family: var(--font-sub), serif;
      font-size: 10px;
      letter-spacing: 2px;
      color: var(--gold-deep);
      text-transform: uppercase;
      padding: 12px 20px;
      border: 1px solid var(--gold);
      display: inline-block;
      margin-top: 10px;
      background: var(--cream);
    }

    #hashtag {
      padding: 100px 20px;
      text-align: center;
      background: linear-gradient(135deg, #FDF6DC, #FFF9E5, #FDF6DC);
    }

    .ht-tag {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(26px, 5vw, 54px);
      color: var(--black);
      letter-spacing: 2px;
      margin: 24px 0;
    }

    .rsvp-gform-wrap {
      max-width: 520px;
      width: 100%;
      margin: 0 auto;
      border-radius: 8px;
      border: 1.5px solid rgba(201, 168, 76, 0.3);
      box-shadow: 0 10px 40px rgba(201, 168, 76, 0.12);
      overflow: hidden;
      background: var(--white);
    }

    .rsvp-gform-wrap iframe {
      width: 100%;
      height: 820px;
      border: none;
    }

    /* ── VENUE ── */
    #venue {
      padding: 90px 24px;
      background: var(--gold-pale);
      text-align: center;
    }

    .venue-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
      max-width: 860px;
      margin: 0 auto;
    }

    /* ── VENUE MAP EMBEDS ── */
    .venue-map-embed {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 6px;
      overflow: hidden;
      margin: 0 auto 20px auto;
      border: 1px solid rgba(201, 168, 76, 0.3);
      box-shadow: 0 4px 15px rgba(201, 168, 76, 0.1);
    }

    .venue-map-embed iframe {
      width: 100%;
      height: 100%;
      display: block;
      border: 0;
    }

    .venue-card {
      background: var(--white);
      border: 1.5px solid rgba(201, 168, 76, 0.3);
      border-radius: 12px;
      padding: 32px 24px 28px;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 30px -6px rgba(201, 168, 76, 0.14), 0 3px 10px rgba(0, 0, 0, 0.03);
      transition: all 0.35s;
      flex: 0 1 340px;
      max-width: 360px;
    }

    .venue-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      padding: 1.5px;
      background: linear-gradient(145deg, rgba(201, 168, 76, 0.4) 0%, transparent 70%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .venue-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 22px 48px -10px rgba(201, 168, 76, 0.28);
      border-color: rgba(201, 168, 76, 0.6);
    }

    .venue-ico {
      font-size: 36px;
      margin-bottom: 16px;
    }

    .venue-type {
      font-family: var(--font-sub), serif;
      font-size: 9px;
      letter-spacing: 5px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .venue-name {
      font-family: var(--font-tenor);
      font-size: 28px;
      color: var(--black);
      text-transform: uppercase;
      letter-spacing: 4px;
      line-height: 1.3;
      margin-bottom: 10px;
    }

    .venue-addr {
      font-family: 'EB Garamond', serif;
      font-size: 15px;
      font-style: italic;
      color: var(--gold-deep);
      line-height: 1.8;
      margin-bottom: 28px;
    }

    .venue-divider {
      width: 60px;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
      margin: 0 auto 28px;
    }

    .venue-map-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-sub), serif;
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--cream);
      background: linear-gradient(135deg, var(--gold-deep), var(--gold));
      border: none;
      border-radius: 4px;
      padding: 12px 28px;
      text-decoration: none;
      box-shadow: 0 4px 18px rgba(201, 168, 76, 0.3);
      transition: all 0.3s;
      cursor: pointer;
    }

    .venue-map-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(201, 168, 76, 0.45);
    }

    .venue-map-btn svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      flex-shrink: 0;
    }

    @media(max-width:768px) {
      nav {
        display: none;
      }

      .nav-toggle-btn {
        display: flex;
      }

      .mobile-nav-popup {
        display: block;
      }

      .nav-backdrop {
        display: block;
      }

      .floating-controls {
        bottom: 88px;
      }

      /* Timeline: keep desktop centered layout on mobile */
      .tl-wrap {
        max-width: 100%;
        padding: 20px 16px;
      }

      .tl-wrap::before {
        left: 50%;
      }

      .tl-row {
        flex-direction: row;
        align-items: center;
        padding-left: 0;
        gap: 0;
      }

      .tl-row.right {
        flex-direction: row-reverse;
      }

      .tl-dot {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 10px;
        flex-shrink: 0;
      }

      .tl-t {
        width: calc(50% - 18px);
        text-align: right;
        font-size: 18px;
      }

      .tl-row.right .tl-t {
        text-align: left;
      }

      .tl-txt {
        width: calc(50% - 18px);
        text-align: left;
      }

      .tl-row.right .tl-txt {
        text-align: right;
      }

      .tl-ico {
        font-size: 18px;
      }

      .tl-name {
        font-size: 9px;
        letter-spacing: 1.5px;
      }

      .tl-note {
        font-size: 13px;
      }

      .par-grid {
        max-width: 100%;
      }

      .ent-grid {
        max-width: 100%;
      }

      .ent-full {
        max-width: 500px;
        flex: 0 1 100%;
      }
    }

    /* ── PARENTS SECTION HEADER ── */
    #parents {
      padding: 90px 24px;
      background: var(--ivory);
      text-align: center;
    }

    .parents-title-script {
      font-family: var(--brittany);
      font-size: clamp(52px, 9vw, 84px);
      color: var(--black);
      text-align: center;
      line-height: 1;
    }

    .parents-subtitle {
      font-family: var(--font-tenor);
      font-weight: 400;
      font-size: clamp(9px, 1.6vw, 12px);
      letter-spacing: 9px;
      color: var(--gold-deep);
      text-align: center;
      text-transform: uppercase;
      margin-top: 8px;
    }

    .parents-border-frame {
      max-width: 760px;
      margin: 40px auto 0;
      border: 2px solid rgba(201, 168, 76, 0.4);
      border-radius: 14px;
      padding: 14px;
      position: relative;
    }

    .parents-border-frame::before {
      content: '✦';
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--ivory);
      padding: 0 12px;
      font-size: 16px;
      color: var(--gold);
    }

    .parents-inner-border {
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 10px;
      padding: 48px 36px 40px;
    }

    .parents-inner-border .par-grid {
      max-width: 100%;
    }

    /* ── ENTOURAGE DESIGNS ── */
    .ent-grid {
      position: relative;
    }

    .ent-col {
      position: relative;
      overflow: visible;
    }

    .ent-col::before {
      content: attr(data-role-icon);
      position: absolute;
      top: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 28px;
      line-height: 1;
      background: var(--white);
      padding: 0 8px;
      z-index: 2;
    }

    .ent-col h3 {
      padding-top: 4px;
    }

    .ent-role-badge {
      display: inline-block;
      margin-bottom: 14px;
      padding: 4px 16px;
      background: linear-gradient(135deg, var(--gold-pale), var(--cream));
      border: 1px solid rgba(201, 168, 76, 0.35);
      border-radius: 30px;
      font-family: var(--font-sub), serif;
      font-size: 8px;
      letter-spacing: 3px;
      color: var(--gold-deep);
      text-transform: uppercase;
    }

    .ent-col ul li {
      position: relative;
      padding-left: 0;
    }

    .ent-col ul li::before {
      content: '';
      display: none;
    }

    .ent-header-ornament {
      display: block;
      font-size: 11px;
      color: var(--gold);
      opacity: 0.5;
      margin-bottom: 6px;
      letter-spacing: 6px;
    }

    /* Entourage section decorative corners */
    #entourage {
      position: relative;
    }

    #entourage::before {
      content: '';
      position: absolute;
      top: 30px;
      left: 30px;
      width: 60px;
      height: 60px;
      border-top: 2px solid rgba(201, 168, 76, 0.35);
      border-left: 2px solid rgba(201, 168, 76, 0.35);
      border-radius: 4px 0 0 0;
      pointer-events: none;
    }

    #entourage::after {
      content: '';
      position: absolute;
      bottom: 30px;
      right: 30px;
      width: 60px;
      height: 60px;
      border-bottom: 2px solid rgba(201, 168, 76, 0.35);
      border-right: 2px solid rgba(201, 168, 76, 0.35);
      border-radius: 0 0 4px 0;
      pointer-events: none;
    }

    .ent-section-ornament {
      position: absolute;
      top: 30px;
      right: 30px;
      width: 60px;
      height: 60px;
      border-top: 2px solid rgba(201, 168, 76, 0.35);
      border-right: 2px solid rgba(201, 168, 76, 0.35);
      border-radius: 0 4px 0 0;
      pointer-events: none;
    }

    .ent-section-ornament-bl {
      position: absolute;
      bottom: 30px;
      left: 30px;
      width: 60px;
      height: 60px;
      border-bottom: 2px solid rgba(201, 168, 76, 0.35);
      border-left: 2px solid rgba(201, 168, 76, 0.35);
      border-radius: 0 0 0 4px;
      pointer-events: none;
    }

    .ent-divider {
      width: 30px;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
      display: block;
      margin: 0 auto 12px;
    }

    .entourage-eyebrow-deco {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin: 8px 0 36px;
    }

    .entourage-eyebrow-deco span {
      color: var(--gold);
      font-size: 11px;
    }

    .entourage-eyebrow-deco .thin-rule {
      width: 80px;
    }

    /* ── DRESS CODE SECTION — elegant minimal ── */
    #dresscode {
      padding: 110px 24px;
      background: var(--ivory);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    #dresscode::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
    }

    .dress-elegant-wrap {
      max-width: 680px;
      margin: 0 auto;
    }

    .dress-intro-text {
      font-family: 'EB Garamond', serif;
      font-size: clamp(17px, 2.5vw, 21px);
      font-style: italic;
      color: var(--text);
      line-height: 1.9;
      margin-bottom: 52px;
      opacity: 0.85;
    }

    .dress-cols {
      display: flex;
      align-items: stretch;
      justify-content: center;
      margin-bottom: 52px;
      border: 1.5px solid rgba(201, 168, 76, 0.25);
      border-radius: 8px;
      overflow: hidden;
      background: var(--white);
    }

    .dress-col {
      flex: 1;
      padding: 44px 36px;
      text-align: center;
    }

    .dress-col-divider {
      width: 1px;
      background: rgba(201, 168, 76, 0.18);
      flex-shrink: 0;
    }

    .dress-col-eyebrow {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 6px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    .dress-col-list {
      list-style: none;
      padding: 0;
    }

    .dress-col-list li {
      font-family: var(--font-display);
      font-size: clamp(18px, 2.5vw, 24px);
      font-weight: 400;
      font-style: italic;
      color: var(--text);
      letter-spacing: 0.5px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(201, 168, 76, 0.1);
      transition: color 0.3s;
    }

    .dress-col-list li:last-child {
      border-bottom: none;
    }

    .dress-col-list li:hover {
      color: var(--gold-deep);
    }

    .dress-palette-wrap {
      margin-bottom: 0;
    }

    .dress-palette-label {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 6px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .dress-palette-dots {
      display: flex;
      justify-content: center;
      gap: 14px;
    }

    .dress-pal-dot {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 3px solid #fff;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      position: relative;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    }

    .dress-pal-dot span {
      position: absolute;
      bottom: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-tenor);
      font-size: 7px;
      letter-spacing: 1px;
      color: var(--gold-deep);
      opacity: 0;
      white-space: nowrap;
      transition: opacity 0.25s;
      pointer-events: none;
    }

    .dress-pal-dot:hover {
      transform: translateY(-6px) scale(1.12);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }

    .dress-pal-dot:hover span {
      opacity: 0.8;
    }

    .dress-refrain-wrap {
      margin-bottom: 0;
    }

    .dress-refrain-label {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 6px;
      color: var(--gold-deep);
      text-transform: uppercase;
      margin-bottom: 16px;
      opacity: 0.7;
    }

    .dress-refrain-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .dress-refrain-tag {
      font-family: var(--font-display);
      font-size: 15px;
      font-style: italic;
      color: var(--text);
      padding: 7px 20px;
      border: 1px solid rgba(201, 168, 76, 0.28);
      border-radius: 30px;
      background: var(--ivory);
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      opacity: 0.75;
    }

    .dress-refrain-tag:hover {
      border-color: var(--gold);
      opacity: 1;
      color: var(--gold-deep);
      transform: translateY(-3px);
      box-shadow: 0 6px 18px rgba(201, 168, 76, 0.12);
    }

    .dress-warning-bar {
      display: inline-block;
      padding: 14px 36px;
      border: 1.5px solid rgba(201, 168, 76, 0.5);
      border-radius: 4px;
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold-deep);
      background: var(--cream);
      box-shadow: 0 2px 14px rgba(201, 168, 76, 0.08);
    }

    /* ── UNIFIED DRESS CODE BOX ── */
    .dress-unified-box {
      max-width: 560px;
      margin: 0 auto;
      background: var(--white);
      border: 1.5px solid rgba(201, 168, 76, 0.35);
      border-radius: 16px;
      padding: 52px 48px 40px;
      box-shadow: 0 20px 60px -10px rgba(201, 168, 76, 0.14), 0 4px 20px rgba(0, 0, 0, 0.04);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.4s ease, transform 0.4s ease;
    }

    .dress-unified-box::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
      pointer-events: none;
    }

    .dress-unified-box:hover {
      box-shadow: 0 28px 72px -10px rgba(201, 168, 76, 0.22), 0 8px 30px rgba(0, 0, 0, 0.05);
      transform: translateY(-4px);
    }

    .dress-box-ornament {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 32px;
    }

    .dress-box-ornament span {
      color: var(--gold);
      font-size: 11px;
      flex-shrink: 0;
    }

    .dress-box-rule {
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.4), transparent);
    }

    .dress-box-hrule {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.25), transparent);
      margin: 36px 0;
    }

    .dress-warning-bar {
      display: block;
      padding: 16px 32px;
      margin-top: 28px;
      border: 1px solid rgba(201, 168, 76, 0.4);
      border-radius: 6px;
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--gold-deep);
      background: linear-gradient(135deg, var(--gold-pale), var(--cream));
      text-align: center;
    }

    /* ── SMOOTH ANIMATIONS — extra keyframes ── */
    @keyframes floatUp {
      0% {
        opacity: 0;
        transform: translateY(40px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeScaleIn {
      0% {
        opacity: 0;
        transform: scale(0.93);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes slideInLeft {
      0% {
        opacity: 0;
        transform: translateX(-40px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInRight {
      0% {
        opacity: 0;
        transform: translateX(40px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Staggered list items in entourage */
    .ent-col.visible ul li {
      animation: floatUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    .ent-col.visible ul li:nth-child(1) {
      animation-delay: 0.05s;
    }

    .ent-col.visible ul li:nth-child(2) {
      animation-delay: 0.10s;
    }

    .ent-col.visible ul li:nth-child(3) {
      animation-delay: 0.15s;
    }

    .ent-col.visible ul li:nth-child(4) {
      animation-delay: 0.20s;
    }

    .ent-col.visible ul li:nth-child(5) {
      animation-delay: 0.25s;
    }

    .ent-col.visible ul li:nth-child(6) {
      animation-delay: 0.30s;
    }

    .ent-col.visible ul li:nth-child(7) {
      animation-delay: 0.35s;
    }

    .ent-col.visible ul li:nth-child(8) {
      animation-delay: 0.40s;
    }

    .ent-col.visible ul li:nth-child(9) {
      animation-delay: 0.45s;
    }

    .ent-col.visible ul li:nth-child(10) {
      animation-delay: 0.50s;
    }


    /* Dress swatches stagger */
    .dress-swatches-row .dress-swatch-item {
      opacity: 0;
      animation: floatUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    .dress-unified-box.visible .dress-swatches-row .dress-swatch-item:nth-child(1) {
      animation-delay: 0.1s;
    }

    .dress-unified-box.visible .dress-swatches-row .dress-swatch-item:nth-child(2) {
      animation-delay: 0.16s;
    }

    .dress-unified-box.visible .dress-swatches-row .dress-swatch-item:nth-child(3) {
      animation-delay: 0.22s;
    }

    .dress-unified-box.visible .dress-swatches-row .dress-swatch-item:nth-child(4) {
      animation-delay: 0.28s;
    }

    .dress-unified-box.visible .dress-swatches-row .dress-swatch-item:nth-child(5) {
      animation-delay: 0.34s;
    }

    .dress-unified-box.visible .dress-swatches-row .dress-swatch-item:nth-child(6) {
      animation-delay: 0.4s;
    }

    /* Color tags stagger */
    .dress-color-tags .dress-color-tag {
      opacity: 0;
      animation: floatUp 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    .dress-unified-box.visible .dress-color-tags .dress-color-tag:nth-child(1) {
      animation-delay: 0.1s;
    }

    .dress-unified-box.visible .dress-color-tags .dress-color-tag:nth-child(2) {
      animation-delay: 0.17s;
    }

    .dress-unified-box.visible .dress-color-tags .dress-color-tag:nth-child(3) {
      animation-delay: 0.24s;
    }

    .dress-unified-box.visible .dress-color-tags .dress-color-tag:nth-child(4) {
      animation-delay: 0.31s;
    }

    .dress-unified-box.visible .dress-color-tags .dress-color-tag:nth-child(5) {
      animation-delay: 0.38s;
    }

    .dress-unified-box.visible .dress-color-tags .dress-color-tag:nth-child(6) {
      animation-delay: 0.45s;
    }

    /* Timeline rows */
    .tl-row.visible {
      animation: floatUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    /* Venue cards */
    .venue-card {
      transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* par-col smooth border animation */
    .par-col,
    .ent-col {
      transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.35s;
    }

    /* Countdown numbers pulse on change */
    .cd-num {
      transition: opacity 0.15s;
    }

    @media(max-width:768px) {
      .dress-cols {
        flex-direction: column;
      }

      .dress-col-divider {
        width: auto;
        height: 1px;
      }

      .dress-unified-box {
        padding: 36px 24px 32px;
      }
    }

    @media(max-width:480px) {
      .dress-unified-box {
        padding: 28px 18px 24px;
      }
    }

    /* ── GITHUB SYNC STEPS ── */
    .sync-step {
      display: flex;
      gap: 24px;
      align-items: flex-start;
      padding: 32px 0;
      border-bottom: 1px solid rgba(201, 168, 76, 0.1);
      position: relative;
    }

    .sync-step:last-child {
      border-bottom: none;
    }

    .sync-step-num {
      font-family: var(--font-display);
      font-size: clamp(42px, 6vw, 64px);
      font-weight: 400;
      color: rgba(201, 168, 76, 0.18);
      line-height: 1;
      flex-shrink: 0;
      width: 80px;
      text-align: center;
      transition: color 0.3s;
    }

    .sync-step:hover .sync-step-num {
      color: rgba(201, 168, 76, 0.4);
    }

    .sync-step-body {
      flex: 1;
      padding-top: 8px;
    }

    .sync-step-title {
      font-family: var(--font-tenor);
      font-size: 11px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 12px;
    }

    .sync-step-desc {
      font-family: 'EB Garamond', serif;
      font-size: 16px;
      font-style: italic;
      color: rgba(247, 237, 208, 0.6);
      line-height: 1.85;
    }

    .sync-code {
      font-family: 'Courier New', monospace;
      font-style: normal;
      font-size: 13px;
      background: rgba(201, 168, 76, 0.12);
      color: var(--gold-light);
      padding: 2px 7px;
      border-radius: 3px;
      border: 1px solid rgba(201, 168, 76, 0.2);
    }

    /* ── ENHANCED SMOOTH TRANSITIONS ── */
    * {
      transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .reveal,
    .reveal-left,
    .reveal-right {
      transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Floating botanical accents */
    #home::after {
      content: '';
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 300px;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.3), transparent);
      pointer-events: none;
    }

    /* Paragraph body font update */
    .par-col p,
    .ent-col ul li {
      font-family: var(--font-display);
      font-size: 17px;
      font-style: italic;
      color: var(--text);
      line-height: 1.8;
      padding: 4px 0;
    }

    /* Card header font update */
    .par-col h3,
    .ent-col h3 {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 6px;
      color: var(--gold-deep);
      text-transform: uppercase;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(201, 168, 76, 0.25);
      display: block;
      text-align: center;
      width: 100%;
    }

    /* Timeline font update */
    .tl-name {
      font-family: var(--font-tenor);
      font-size: 10px;
      letter-spacing: 3px;
      color: var(--black);
      text-transform: uppercase;
      font-weight: 400;
    }

    .tl-t {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 22px;
      font-style: italic;
      color: var(--black);
    }

    /* Countdown label update */
    .cd-lbl {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 4px;
      color: var(--gold-deep);
      text-transform: uppercase;
      margin-top: 10px;
    }

    /* Venue type + btn font update */
    .venue-type {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 6px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .venue-map-btn {
      font-family: var(--font-tenor);
      font-size: 9px;
      letter-spacing: 3px;
    }

    /* button text updates */
    .btn-txt {
      font-family: var(--font-tenor);
      font-size: 8px;
      letter-spacing: 3px;
      text-transform: uppercase;
      white-space: nowrap;
  pointer-events: none;
  /* Ensure it doesn't push the width of the screen */
  max-width: 150px; 
  overflow: hidden;
  text-overflow: ellipsis;
    }

    /* Footer update */
    .ft-date {
      font-family: var(--font-tenor);
      font-size: 10px;
      letter-spacing: 5px;
      color: var(--gold-deep);
      opacity: 0.6;
      text-transform: uppercase;
      margin-top: 10px;
    }

    /* Scroll cue */
    .scroll-cue p {
      font-family: var(--font-tenor);
      font-size: 8px;
      letter-spacing: 4px;
      color: var(--gold);
      opacity: 0.6;
      text-transform: uppercase;
    }

    /* Enhanced card hover shimmer */
    .par-col,
    .ent-col,
    .venue-card {
      background: linear-gradient(135deg, #ffffff 0%, #fffdf8 100%);
    }

    /* Mobile sync step layout */
    @media(max-width:600px) {
      .sync-step {
        flex-direction: column;
        gap: 12px;
      }

      .sync-step-num {
        width: auto;
        text-align: left;
        font-size: 36px;
      }
    }

    /* ── 2. ELEGANT GOLD DIVIDER ── */
    .gold-divider {
      position: relative;
      width: 1px;
      height: 80px;
      background: linear-gradient(to bottom, transparent, var(--gold), transparent);
      margin: 60px auto;
    }

    .gold-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 8px;
      height: 8px;
      border: 1px solid var(--gold);
      background: var(--bg-color);
    }

    /* ── 2. LUXURY CORNER ACCENTS ── */
    .venue-card,
    .par-col {
      position: relative;
    }

    .venue-card::before,
    .par-col::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      border: 1px solid transparent;
      background:
        linear-gradient(to right, var(--gold) 2px, transparent 2px) 0 0,
        linear-gradient(to bottom, var(--gold) 2px, transparent 2px) 0 0,
        linear-gradient(to left, var(--gold) 2px, transparent 2px) 100% 0,
        linear-gradient(to bottom, var(--gold) 2px, transparent 2px) 100% 0,
        linear-gradient(to right, var(--gold) 2px, transparent 2px) 0 100%,
        linear-gradient(to top, var(--gold) 2px, transparent 2px) 0 100%,
        linear-gradient(to left, var(--gold) 2px, transparent 2px) 100% 100%,
        linear-gradient(to top, var(--gold) 2px, transparent 2px) 100% 100%;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      pointer-events: none;
      opacity: 0.6;
      transition: all 0.4s ease;
    }

    /* Make them expand slightly when hovered! */
    .venue-card:hover::before,
    .par-col:hover::before {
      background-size: 30px 30px;
      opacity: 1;
    }

    /* ── 4. GOLD DUST ATMOSPHERE ── */
    body {
      position: relative;
    }

    body::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      /* So it doesn't block clicks */
      z-index: 9999;
      background-image: radial-gradient(rgba(201, 168, 76, 0.15) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.4;
      /* Creates a subtle falling/drifting illusion */
      animation: drift 60s linear infinite;
    }

    @keyframes drift {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 400px 400px;
      }
    }

    /* ── 1. LUXURY PAPER TEXTURE BACKGROUND ── */
    body {
      background-color: var(--white);
      /* Keeps your base color */
      /* This creates a seamless, subtle noise texture overlay */
      /* noise texture removed for performance */
      background-attachment: scroll;
      /* Keeps the texture still while you scroll */
    }

    /* ── 2. SOFT ROMANTIC GOLD GLOWS ── */
    body::before {
      content: "";
      position: fixed;
      top: -10vh;
      left: -10vw;
      width: 60vw;
      height: 60vw;
      background: radial-gradient(circle, rgba(201, 168, 76, 0.07) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      /* Prevents it from blocking clicks */
      z-index: -1;
      /* Pushes it behind all your content */
    }

    body::after {
      content: "";
      position: fixed;
      bottom: -15vh;
      right: -10vw;
      width: 70vw;
      height: 70vw;
      background: radial-gradient(circle, rgba(201, 168, 76, 0.05) 0%, transparent 65%);
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
    }

    @keyframes floatGlow1 {
      0% {
        transform: translate(0, 0) scale(1);
      }

      100% {
        transform: translate(30px, 40px) scale(1.1);
      }
    }

    @keyframes floatGlow2 {
      0% {
        transform: translate(0, 0) scale(1);
      }

      100% {
        transform: translate(-40px, -30px) scale(1.05);
      }
    }

    /* ── 3. ELEGANT FINE-LINE GRID ── */
    body {
      background-color: var(--white);
      background-image:
        linear-gradient(rgba(201, 168, 76, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
      background-size: 60px 60px;
      /* Size of the grid squares */
      background-position: center top;
      background-attachment: scroll;
    }

    /* ── 4. CHAMPAGNE SILK BACKGROUND ── */
    body {
      /* Static champagne background — no animation for performance */
      background: #fdfbf7;
    }

    @keyframes silkShift {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    /* ── HERO (photo background) ── */
    #home {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background-image:
        linear-gradient(
          to bottom,
          rgba(14, 12, 7, 0.38) 0%,
          rgba(14, 12, 7, 0.28) 40%,
          rgba(14, 12, 7, 0.50) 100%
        ),
        url('FT-27.jpg');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: scroll;
      padding-top: 40px;
      padding-bottom: 120px;
      text-align: center;
      --arch-top: 0px;
      --arch-inset: 0px;
      --arch-radius: 0px;
      clip-path: inset(var(--arch-top) var(--arch-inset) 0px var(--arch-inset) round var(--arch-radius) var(--arch-radius) 0px 0px);
      will-change: clip-path;
    }

    /* ── SCROLL ARCH ── */
    #scroll-arch {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 500;
      overflow: hidden;
      opacity: 0;
      transition: opacity 1.2s ease;
    }

    #scroll-arch.arch-visible {
      opacity: 1;
    }

    .arch-side {
      position: absolute;
      top: 0;
      width: clamp(55px, 6.5vw, 100px);
      height: 100%;
    }

    .arch-side.left {
      left: 0;
    }

    .arch-side.right {
      right: 0;
      transform: scaleX(-1);
    }

    .arch-side svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .arch-stem {
      fill: none;
      stroke: var(--gold-deep);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.45;
      stroke-dasharray: 4000;
      stroke-dashoffset: 4000;
      transition: stroke-dashoffset 2.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .arch-stem.drawn {
      stroke-dashoffset: 0;
    }

    .arch-stem2 {
      fill: none;
      stroke: var(--gold);
      stroke-width: 0.8;
      stroke-linecap: round;
      opacity: 0.28;
      stroke-dasharray: 4000;
      stroke-dashoffset: 4000;
      transition: stroke-dashoffset 3s 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .arch-stem2.drawn {
      stroke-dashoffset: 0;
    }

    .arch-leaf {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      transform: scale(0.15) rotate(-20deg);
      transition: opacity 0.5s ease, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .arch-leaf.bloomed {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    .arch-bloom {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      transform: scale(0) rotate(30deg);
      transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .arch-bloom.bloomed {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    @keyframes swayA {

      0%,
      100% {
        transform: rotate(0deg)
      }

      40% {
        transform: rotate(2.5deg)
      }

      70% {
        transform: rotate(-1.8deg)
      }
    }

    @keyframes swayB {

      0%,
      100% {
        transform: rotate(0deg)
      }

      35% {
        transform: rotate(-2deg)
      }

      65% {
        transform: rotate(1.4deg)
      }
    }

    @keyframes swayC {

      0%,
      100% {
        transform: rotate(0deg)
      }

      50% {
        transform: rotate(1.2deg)
      }
    }

    @keyframes swayD {

      0%,
      100% {
        transform: rotate(0deg)
      }

      45% {
        transform: rotate(-1deg)
      }

      75% {
        transform: rotate(0.8deg)
      }
    }

    .sway-a {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      animation: swayA 8s ease-in-out infinite;
    }

    .sway-b {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      animation: swayB 10s ease-in-out infinite;
    }

    .sway-c {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      animation: swayC 13s ease-in-out infinite;
    }

    .sway-d {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      animation: swayD 11s 1.5s ease-in-out infinite;
    }

    .sway-e {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      animation: swayA 15s 3s ease-in-out infinite;
    }

    @media(max-width:480px) {
      .arch-side {
        width: 38px;
      }

      .arch-stem {
        stroke-width: 1.1;
      }

      /* Push sponsors and entourage content clear of the 38px arch vines */
      #sponsors {
        padding-left: 48px;
        padding-right: 48px;
      }

      #entourage {
        padding-left: 48px;
        padding-right: 48px;
      }
    }

    /* ══════════════════════════════════════════
       MOBILE FIXES — full responsive overhaul
    ══════════════════════════════════════════ */

    /* ── INTRO OVERLAY mobile ── */
    @media(max-width:600px) {
      #intro-overlay {
        padding: 0 20px;
      }

      .intro-center {
        width: 100%;
        max-width: 320px;
        padding: 0 16px;
      }

      .intro-monogram {
        font-size: clamp(52px, 18vw, 80px);
        text-align: center;
      }

      .intro-tap-hint {
        font-size: 9px;
        letter-spacing: 3px;
      }
    }

    /* ── HERO section mobile ── */
    @media(max-width:768px) {
      #home {
        padding-top: 60px;
        padding-bottom: 100px;
        padding-left: 16px;
        padding-right: 16px;
      }

      .hero-names {
        font-size: clamp(48px, 14vw, 90px);
        letter-spacing: 1px;
        word-break: normal;
      }

      .hero-ribbon {
        font-size: 8px;
        letter-spacing: 3px;
        padding: 0 16px;
        text-align: center;
      }

      .hero-surname {
        letter-spacing: 5px;
        font-size: 9px;
      }

      .hero-date-line {
        font-size: clamp(14px, 4vw, 20px);
      }

      .hero-church {
        font-size: 13px;
        max-width: 100%;
        padding: 0 10px;
      }

      .hc {
        width: 44px;
        height: 44px;
      }

      .hc.tl {
        top: 60px;
        left: 10px;
      }

      .hc.tr {
        top: 60px;
        right: 10px;
      }

      .hc.bl {
        bottom: 90px;
        left: 10px;
      }

      .hc.br {
        bottom: 90px;
        right: 10px;
      }
    }

    @media(max-width:480px) {
      #home {
        padding-top: 50px;
        padding-left: 12px;
        padding-right: 12px;
      }

      .hero-names {
        font-size: clamp(30px, 12vw, 52px);
        letter-spacing: 2px;
      }
    }

    /* ── GENERAL SECTION mobile ── */
    @media(max-width:768px) {
      .section-wrap {
        padding: 60px 16px;
      }

      #parents {
        padding: 60px 16px;
      }

      #venue {
        padding: 60px 16px;
      }

      #dresscode {
        padding: 70px 16px;
      }

      #hashtag {
        padding: 70px 16px;
      }

      #rsvp {
        padding: 60px 16px;
      }

      .s-script {
        font-size: clamp(24px, 6vw, 40px);
        letter-spacing: 2px;
      }

      .s-caps {
        font-size: clamp(9px, 2vw, 12px);
        letter-spacing: 4px;
      }

      .gold-bar {
        margin: 16px auto 32px;
      }
    }

    /* ── COUNTDOWN mobile ── */
    @media(max-width:480px) {
      .cd-wrap {
        gap: 12px;
      }

      .cd-box {
        min-width: 55px;
      }

      .cd-num {
        font-size: clamp(40px, 13vw, 70px);
      }
    }

    /* ── VENUE mobile ── */
    @media(max-width:768px) {
      .venue-grid {
        gap: 18px;
      }

      .venue-card {
        flex: 0 1 calc(100% - 32px);
        max-width: 380px;
        padding: 24px 18px 20px;
      }

      .venue-name {
        font-size: 22px;
        letter-spacing: 2px;
      }

      .venue-map-embed {
        aspect-ratio: 16 / 11;
      }
    }

    /* ── PARENTS / ENTOURAGE mobile ── */
    @media(max-width:768px) {
      .par-grid {
        max-width: 100%;
      }

      .parents-border-frame {
        padding: 10px;
      }

      .parents-inner-border {
        padding: 28px 16px 24px;
      }

      .spon-table {
        max-width: 100%;
      }
    }

    @media(max-width:480px) {
      /* — Entourage 2-column — */
      .ent-grid {
        overflow: visible;
        gap: 30px 10px;
      }

      .ent-col {
        flex: 0 1 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        width: calc(50% - 5px);
        padding: 40px 8px 14px !important;
        box-sizing: border-box;
      }

      .ent-full {
        flex: 0 1 100% !important;
        max-width: 100% !important;
        width: 100%;
      }

      .ent-col h3 {
        font-size: 8px !important;
        letter-spacing: 2px;
        margin-bottom: 10px;
        padding-bottom: 8px;
        display: block;
        text-align: center;
        width: 100%;
      }

      .ent-col ul li {
        font-size: 13px !important;
        line-height: 1.55;
        padding: 1px 0;
      }

      /* — Border frame tightening — */
      .parents-border-frame {
        padding: 8px;
      }

      .parents-inner-border {
        padding: 20px 10px 18px;
      }

      /* — Sponsors table mobile — */
      .spon-col-label {
        font-size: 9px;
        letter-spacing: 4px;
      }

      .spon-name {
        font-size: 13px;
        padding: 11px 4px;
        text-align: center !important;
      }

      .spon-col:first-child .spon-name,
      .spon-col:last-child .spon-name {
        text-align: center !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
      }
    }

    /* ── TIMELINE mobile ── */
    /* (removed: padding-left:0 override broke symmetry with the
       768px rule's padding:20px 16px, shifting the dots 8px left
       of the center line) */

    /* ── DRESS CODE mobile ── */
    @media(max-width:768px) {
      .dress-unified-box {
        padding: 28px 16px 24px;
      }

      .dress-cols {
        flex-direction: column;
      }

      .dress-col-divider {
        width: auto;
        height: 1px;
      }

      .dress-col {
        padding: 24px 16px;
      }

      .dress-palette-dots {
        flex-wrap: wrap;
        gap: 10px;
      }

      .dress-refrain-row {
        gap: 8px;
      }
    }

    /* ── RSVP iframe mobile ── */
    @media(max-width:600px) {
      .rsvp-gform-wrap iframe {
        height: 650px;
      }
    }

    /* ── FLOATING CONTROLS mobile ── */
    @media(max-width:600px) {
      .floating-controls {
        bottom: 76px;
        right: 14px;
      }

      .music-btn {
        padding: 8px 14px;
      }
    }

    /* ── FOOTER mobile ── */
    @media(max-width:600px) {
      footer {
        padding: 60px 20px 80px;
      }
    }

    /* ── STRIP / PHOTO STRIP mobile ── */
    @media(max-width:600px) {
      #strip-section {
        padding: 50px 0;
      }

      .sf.portrait {
        width: 140px;
      }

      .sf.landscape {
        width: 200px;
      }

      .sf.portrait .sf-photo {
        height: 160px;
      }

      .sf.landscape .sf-photo {
        height: 130px;
      }
    }

    /* ══════════════════════════════════════════
       OVERFLOW LOCK — prevent horizontal shift
       on ALL screen sizes, especially mobile
    ══════════════════════════════════════════ */
    html,
    body {
      overflow-x: hidden !important;
      max-width: 100% !important;
    }

    /* Contain every direct child of body */
   body > *:not(.floating-controls):not(.nav-toggle-btn):not(.mobile-nav-popup):not(.nav-backdrop) {
  max-width: 100vw;
  overflow-x: hidden;
    }

    /* Lock sections and wrappers */
    section,
    footer,
    nav,
    #scroll-arch,
    #intro-overlay,
    .floating-controls,
    .nav-toggle-btn,
    .mobile-nav-popup,
    .nav-backdrop {
      max-width: 100vw;
    }

    /* Prevent wide absolute/fixed elements from bleeding */
    .hero-sunburst,
    #home::after,
    #home::before {
      max-width: 100vw;
      overflow: hidden;
    }

    /* Ensure strip doesn't push page width */
    #strip-section {
      overflow: hidden;
      max-width: 100vw;
    }

    /* Fix any inline-block elements that might overflow */
    .dress-warning-bar,
    .dress-refrain-row,
    .dress-palette-dots,
    .dress-swatches-row,
    .dress-color-tags,
    .dress-formal-card {
      max-width: 100%;
    }

    /* Grid overflow containment only — max-width controlled per-component */
    .venue-grid,
    .par-grid {
      overflow: hidden;
    }

    /* RSVP iframe — no overflow */
    .rsvp-gform-wrap {
      overflow: hidden;
    }

    /* Hero content containment */
    #home {
      max-width: 100vw;
      overflow: hidden;
    }

    /* ══════════════════════════════════════════
       iOS SAFARI FIXES
       Targets iPhone/iPad Safari specifically
    ══════════════════════════════════════════ */

    /* iOS safe-area padding for nav and floating controls */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      nav {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
      }

      .floating-controls {
        bottom: calc(80px + env(safe-area-inset-bottom));
      }

      .nav-toggle-btn {
        bottom: calc(22px + env(safe-area-inset-bottom));
      }

      .mobile-nav-popup {
        bottom: calc(88px + env(safe-area-inset-bottom));
      }

      .intro-tap-hint {
        bottom: calc(40px + env(safe-area-inset-bottom));
      }

      footer {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
      }
    }

    /* Fix iOS 100vh bug — use -webkit-fill-available as fallback */
    @supports (-webkit-touch-callout: none) {
      #intro-overlay {
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
      }

      #home {
        min-height: -webkit-fill-available;
      }
    }

    /* ── iOS intro overlay & envelope: fix the cut-off "L" ── */
    @media (max-width: 430px) {
      /* Shrink envelope to fit narrow iPhone screens */
      .laser-envelope-wrapper {
        width: 290px;
        height: 420px;
      }

      /* The initials were overflowing the paper area — scale them down */
      .pressed-seal {
        font-size: 58px;
        letter-spacing: -1px;
        overflow: visible;
        width: 100%;
        text-align: center;
        padding: 0 8px;
        box-sizing: border-box;
      }

      .pressed-seal span {
        white-space: nowrap;
        display: inline-block;
        max-width: 100%;
      }

      /* Give the paper more breathing room for text */
      .laser-paper {
        padding: 0 8px;
        overflow: visible;
      }

      .save-the-date-vertical {
        font-size: 0.78rem;
        letter-spacing: 0.15em;
      }
    }

    /* Even smaller iPhones (SE, mini) */
    @media (max-width: 375px) {
      .laser-envelope-wrapper {
        width: 268px;
        height: 400px;
      }

      .pressed-seal {
        font-size: 50px;
      }
    }

    /* Fix iOS background-attachment: fixed causing blank sections */
    @supports (-webkit-touch-callout: none) {
      body {
        background-attachment: scroll !important;
      }

      #home {
        background-attachment: scroll !important;
      }
    }

    /* Prevent double-tap zoom on buttons and links in iOS Safari */
    @supports (-webkit-touch-callout: none) {
      a,
      button,
      .action-btn,
      .venue-map-btn,
      .nav-toggle-btn {
        touch-action: manipulation;
      }
    }

    /* iOS scroll momentum for any horizontally scrollable areas */
    .strip-fade-wrap {
      -webkit-overflow-scrolling: touch;
    }

    /* ── RSVP mobile sizing ── */
    @media(max-width:768px) {
      .rsvp-gform-wrap {
        max-width: 420px;
        width: calc(100% - 32px);
      }
    }

    @media(max-width:480px) {
      .rsvp-gform-wrap {
        max-width: 100%;
        width: calc(100% - 32px);
      }
    }

    #intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: linear-gradient(135deg, #F3E6C8 0%, #E8DCC8 50%, #C9A84C 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
    }

    #intro-overlay.dismissed {
      #intro-overlay.dismissed {
        pointer-events: none;
        animation: overlayFadeOut 1s ease forwards;
        animation-delay: 2.5s;
        /* Adjusted so it fades out as the left flap finishes */
      }

      @keyframes overlayFadeOut {
        0% {
          opacity: 1;
        }

        100% {
          opacity: 0;
          visibility: hidden;
        }
      }

      /* Gatefold Envelope Container */
      .laser-envelope-wrapper {
        position: relative;
        width: 320px;
        height: 460px;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 1500px;
        z-index: 2;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        /* Soft, natural grounding shadow */
      }

      /* The Invitation Paper Inside */
      .laser-paper {
        position: absolute;
        inset: 5px;
        background: #fdfbf7;
        border: 1px solid rgba(201, 168, 76, 0.3);
        border-radius: 2px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
      }

      /* Flap Base Settings */
      .flap {
        position: absolute;
        top: 0;
        bottom: 0;
        /* Ensures the swing is smooth and applies to all transforms */
        transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1);
        transform-style: preserve-3d;
      }

      /* LEFT FLAP - Dark Gold */
      .flap-left {
        left: 0;
        width: 35%;
        transform-origin: left center;
        z-index: 4;
        background: linear-gradient(to right, #b28e46 0%, #826220 100%);
        /* Waits 0.8 seconds before moving */
        transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1) 0.8s;
      }

      /* The GENTLE Wavy Edge - COMPLETELY FLAT (No Shadow) */
      .flap-left::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: -23px;
        width: 24px;
        z-index: 4;
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="120" viewBox="0 0 24 120"><path d="M-1,0 L12,0 C16,20 16,40 12,60 C8,80 8,100 12,120 L-1,120 Z" fill="%23826220"/><path d="M12,0 C16,20 16,40 12,60 C8,80 8,100 12,120" fill="none" stroke="%23d4af37" stroke-width="1.5"/></svg>');
        background-repeat: repeat-y;
        background-size: 24px 120px;
      }

      /* RIGHT FLAP - Light Cream */
      #intro-overlay.dismissed .flap-right {
        transform: rotateY(130deg);
        transition-delay: 0s;
        /* Starts instantly */
      }

      /* LEFT FLAP ANIMATION (Opens Second) */
      #intro-overlay.dismissed .flap-left {
        transform: rotateY(-130deg);
        /* Reduced from 1.5s to 0.5s. It will start swinging slightly after the right one */
        transition-delay: 0.5s;
        ;
      }



      /* Tap to Open Hint */
      /* Tap to Open Hint - Fixed Positioning */
      .intro-tap-hint {
        position: absolute;
        bottom: 40px;
        /* Forces it to sit physically beneath the envelope */
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
        /* Ensures it never gets stuck underneath the flaps */
        font-family: var(--font-tenor);
        font-size: 10px;
        letter-spacing: 4px;
        color: #fff;
        text-transform: uppercase;
        animation: hintFadeIn 1s ease forwards;
        animation-delay: 1.5s;
        opacity: 0;
        transition: opacity 0.3s;
      }

      @keyframes hintFadeIn {
        0% {
          opacity: 0;
          transform: translate(-50%, 10px);
        }

        100% {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }

      #intro-overlay.dismissed .intro-tap-hint {
        opacity: 0;
      }
    }

    /* ── ENTOURAGE LIST STYLE ── */
    .ent-list-wrap {
      max-width: 480px;
      margin: 0 auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .ent-group {
      text-align: center;
    }

    .ent-group-title {
      font-family: 'Pinyon Script', cursive;
      font-size: 36px;
      font-weight: 400;
      color: var(--gold-deep);
      margin-bottom: 6px;
      line-height: 1.2;
    }

    .ent-group-rule {
      width: 80px;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
      margin: 0 auto 16px;
    }

    .ent-name {
      font-family: 'EB Garamond', serif;
      font-size: 15.5px;
      font-style: normal;
      color: var(--text);
      line-height: 2;
      letter-spacing: 0.5px;
    }

    @media (max-width: 600px) {
      .ent-list-wrap {
        max-width: 100%;
        padding: 0 16px;
      }
      .ent-group-title {
        font-size: 30px;
      }
      .ent-name {
        font-size: 14px;
        line-height: 1.9;
      }
    }