:root {
      --gold:       #C9A24A;
      --gold-dim:   rgba(201,162,74,0.30);
      --gold-glow:  rgba(201,162,74,0.10);
      --bg:         #3A281C;
      --bg-mid:     #4C3626;
      --bg-card:    #573A2A;
      --bg-light:   #F4EAD9;
      --text-dark:  #653F24;
      --text-mid:   #9A8468;
    }

    html { scroll-behavior: smooth; }
    body { background: linear-gradient(158deg, #2C1E13 0%, #3A281C 40%, #573828 63%, #6A472E 100%) fixed no-repeat; color: #fff; font-family: 'Montserrat', sans-serif; overflow-x: hidden; }
    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

    /* ══════════════════════════════════════════════
       NAV
    ══════════════════════════════════════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 22px 52px;
      background: linear-gradient(to bottom, rgba(46,29,20,0.72), transparent);
      transition: background .4s, backdrop-filter .4s;
    }
    nav.scrolled {
      background: rgba(46,29,20,0.77);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(201,162,74,0.07);
    }
    .nav-logo { font-family: 'Great Vibes', cursive; font-size: 28px; color: #fff; text-decoration: none; }
    .nav-logo span { color: var(--gold); }
    .nav-links { display: flex; gap: 36px; list-style: none; }
    .nav-links a { font-weight: 300; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,0.5); text-decoration: none; transition: color .3s; }
    .nav-links a:hover, .nav-links a.active { color: var(--gold); }
    .nav-date { font-weight: 200; font-size: 9px; letter-spacing: 4px; color: var(--gold); text-transform: uppercase; }
    @media (max-width: 768px) { nav { padding: 18px 24px; } .nav-links { display: none; } }

    /* ══════════════════════════════════════════════
       HERO
    ══════════════════════════════════════════════ */
    .hero {
      position: relative; width: 100%; height: 100vh; min-height: 700px;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('../img/m1.jpeg');
      background-size: cover; background-position: center 20%;
      filter: brightness(0.45) saturate(0.5);
      transform: scale(1.06);
      transition: transform 12s ease-out;
    }
    .hero-bg.loaded { transform: scale(1.0); }
    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(
        160deg,
        rgba(46,29,20,0.48) 0%,
        rgba(46,29,20,0.16) 45%,
        rgba(46,29,20,0.68) 100%
      );
    }
    .hero-vignette {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(46,29,20,0.52) 100%);
    }

    /* Decorative side lines */
    .hero-side-left,
    .hero-side-right {
      position: absolute; top: 0; bottom: 0; width: 1px;
      background: linear-gradient(to bottom, transparent 5%, var(--gold-dim) 30%, var(--gold-dim) 70%, transparent 95%);
      opacity: 0; animation: fadeIn 2s 1.6s forwards;
    }
    .hero-side-left  { left: 52px; }
    .hero-side-right { right: 52px; }
    @media (max-width: 768px) { .hero-side-left, .hero-side-right { display: none; } }

    .hero-content {
      position: relative; z-index: 2;
      text-align: center; padding: 0 40px;
      margin-top: 120px;
    }
    .hero-eyebrow {
      font-weight: 200; font-size: 8px; letter-spacing: 10px;
      color: var(--gold); text-transform: uppercase;
      margin-bottom: 22px;
      opacity: 0; animation: fadeUp 1s 0.4s forwards;
    }
    .hero-overline {
      display: flex; align-items: center; justify-content: center;
      gap: 16px; margin-bottom: 28px;
      opacity: 0; animation: fadeUp 1s 0.3s forwards;
    }
    .ho-line { height: 1px; width: 64px; background: linear-gradient(90deg, transparent, var(--gold)); }
    .ho-line.r { background: linear-gradient(-90deg, transparent, var(--gold)); }
    .ho-diamond { width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }

    .hero-title {
      font-family: 'Great Vibes', cursive;
      font-size: clamp(80px, 14vw, 170px);
      color: #fff;
      line-height: 0.9;
      letter-spacing: 2px;
      text-shadow: 0 6px 80px rgba(0,0,0,0.6);
      opacity: 0; animation: fadeUp 1.2s 0.6s forwards;
    }
    .hero-title-the {
      display: block;
      font-size: clamp(30px, 5vw, 60px);
      letter-spacing: 14px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 200;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      margin-bottom: 2px;
    }
    .hero-sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-weight: 300;
      font-size: clamp(14px, 1.8vw, 20px);
      color: rgba(255,255,255,0.45);
      margin-top: 26px; letter-spacing: 3px;
      opacity: 0; animation: fadeUp 1s 0.9s forwards;
    }
    .hero-date-badge {
      margin-top: 38px; display: inline-flex; align-items: center; gap: 16px;
      opacity: 0; animation: fadeUp 1s 1.1s forwards;
    }
    .hdb-line { height: 1px; width: 44px; background: var(--gold-dim); }
    .hdb-date {
      font-weight: 200; font-size: 10px; letter-spacing: 6px;
      color: var(--gold); text-transform: uppercase;
    }

    .hero-scroll {
      position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
      z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
      opacity: 0; animation: fadeIn 1s 1.8s forwards;
    }
    .scroll-label { font-size: 7px; letter-spacing: 6px; text-transform: uppercase; font-weight: 200; color: rgba(255,255,255,0.25); }
    .scroll-line { width: 1px; height: 52px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollPulse 2.2s ease-in-out infinite; }

    /* ══════════════════════════════════════════════
       OVERTURE STRIP
    ══════════════════════════════════════════════ */
    .overture {
      background: var(--bg-mid);
      border-top: 1px solid rgba(201,162,74,0.08);
      border-bottom: 1px solid rgba(201,162,74,0.08);
      padding: 36px 10%;
      display: flex; align-items: center; justify-content: space-between; gap: 40px;
      flex-wrap: wrap;
    }
    .ov-item { text-align: center; flex: 1; min-width: 140px; }
    .ov-label { font-size: 7px; letter-spacing: 5px; text-transform: uppercase; font-weight: 200; color: rgba(255,255,255,0.28); margin-bottom: 8px; }
    .ov-value {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(14px, 1.8vw, 18px); color: var(--gold); letter-spacing: 2px;
    }
    .ov-sep { width: 1px; height: 44px; background: var(--gold-dim); flex-shrink: 0; }
    @media (max-width: 640px) { .ov-sep { display: none; } .overture { justify-content: center; gap: 28px; } }

    /* ══════════════════════════════════════════════
       INTRO QUOTE
    ══════════════════════════════════════════════ */
    .intro-quote {
      background: var(--bg); padding: 108px 10%;
      text-align: center; position: relative; overflow: hidden;
    }
    .iq-eyebrow {
      font-size: 8px; letter-spacing: 7px; text-transform: uppercase; font-weight: 200;
      color: var(--gold); margin-bottom: 28px;
    }
    .iq-text {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-weight: 300;
      font-size: clamp(22px, 3.2vw, 38px);
      color: rgba(255,255,255,0.82);
      line-height: 1.7; max-width: 820px; margin: 0 auto;
      position: relative; z-index: 1;
    }
    .iq-divider {
      display: flex; align-items: center; justify-content: center;
      gap: 18px; margin-top: 40px;
    }
    .iq-line { height: 1px; width: 56px; background: var(--gold-dim); }
    .iq-star { font-size: 9px; color: var(--gold); opacity: 0.7; letter-spacing: 6px; }

    /* ══════════════════════════════════════════════
       SCHEDULE SECTION
    ══════════════════════════════════════════════ */
    .schedule-section {
      background: #fff;
      padding: 120px 0 140px;
      position: relative; overflow: hidden;
    }

    /* Background giant ghost text */
    .schedule-ghost {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(200px, 30vw, 380px);
      color: rgba(201,162,74,0.06);
      letter-spacing: 0; line-height: 1;
      white-space: nowrap; pointer-events: none;
      user-select: none;
    }

    .schedule-header {
      text-align: center; margin-bottom: 96px;
      padding: 0 8%; position: relative; z-index: 2;
    }
    .sh-eyebrow { font-size: 8px; letter-spacing: 7px; text-transform: uppercase; font-weight: 200; color: #6A472E; margin-bottom: 16px; }
    .sh-title {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(32px, 4.5vw, 56px); color: #6A472E; line-height: 1.2;
    }
    .sh-sub { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; font-weight: 200; color: rgba(0,0,0,0.28); margin-top: 14px; }

    /* Timeline */
    .timeline-wrap {
      max-width: 900px; margin: 0 auto;
      padding: 0 40px; position: relative; z-index: 2;
    }

    /* Vertical spine */
    .timeline-wrap::before {
      content: '';
      position: absolute; left: 50%; top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2) 8%, rgba(0,0,0,0.2) 92%, transparent);
      transform: translateX(-50%);
    }
    @media (max-width: 700px) {
      .timeline-wrap::before { left: 28px; transform: none; }
    }

    .tl-event {
      display: grid;
      grid-template-columns: 1fr 60px 1fr;
      align-items: start;
      margin-bottom: 80px;
      position: relative;
      opacity: 0; transform: translateY(32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .tl-event.visible { opacity: 1; transform: translateY(0); }
    .tl-event:last-child { margin-bottom: 0; }

    /* Left / right content panels */
    .tl-left  { text-align: right; padding-right: 52px; padding-top: 6px; }
    .tl-right { text-align: left;  padding-left: 52px;  padding-top: 6px; }
    .tl-empty { /* placeholder cell */ }

    /* Middle node */
    .tl-node {
      display: flex; flex-direction: column; align-items: center;
      gap: 0; position: relative;
    }
    .tl-node-icon {
      width: 48px; height: 48px;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.25);
      border-radius: 0;
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 2;
      transition: border-color .3s, background .3s;
    }
    .tl-node-icon svg { width: 20px; height: 20px; }
    .tl-event:hover .tl-node-icon {
      border-color: #6A472E;
      background: rgba(0,0,0,0.04);
    }
    .tl-node-dot {
      width: 6px; height: 6px; background: #6A472E;
      transform: rotate(45deg); margin-top: -1px; flex-shrink: 0;
    }

    .tl-time {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(28px, 3.5vw, 42px); color: #6A472E;
      letter-spacing: 1px; line-height: 1;
      margin-bottom: 6px; display: block;
    }
    .tl-ampm {
      font-size: 9px; letter-spacing: 4px; font-weight: 200;
      color: rgba(0,0,0,0.45); text-transform: uppercase;
      display: inline-block; margin-left: 4px; vertical-align: middle;
      font-family: 'Montserrat', sans-serif;
    }
    .tl-event-name {
      font-family: 'Cormorant Garamond', serif; font-weight: 400;
      font-size: clamp(18px, 2vw, 24px); color: #6A472E; line-height: 1.3;
      margin-bottom: 10px;
    }
    .tl-event-desc {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-weight: 300; font-size: clamp(13px, 1.4vw, 15px);
      color: rgba(0,0,0,0.72); line-height: 1.7; letter-spacing: 0.4px;
    }
    .tl-event-num {
      font-size: 7px; letter-spacing: 4px; font-weight: 200;
      color: rgba(0,0,0,0.35); text-transform: uppercase;
      font-family: 'Montserrat', sans-serif; margin-bottom: 12px;
    }

    /* Alternating: even events show content on right */
    .tl-event.even .tl-left  { text-align: left;  padding-left: 52px; padding-right: 0; }
    .tl-event.even .tl-right { text-align: left;  padding-left: 52px; padding-right: 0; }

    @media (max-width: 700px) {
      .tl-event { grid-template-columns: 56px 1fr; gap: 0; }
      .tl-event.even { grid-template-columns: 56px 1fr; }
      .tl-left, .tl-right,
      .tl-event.even .tl-left, .tl-event.even .tl-right {
        order: unset; grid-column: 2;
        text-align: left; padding: 4px 0 0 20px;
      }
      .tl-node, .tl-event.even .tl-node { order: unset; grid-column: 1; grid-row: 1; }
      .tl-empty { display: none; }
      /* Even events: show .tl-right in column 2, hide the empty left */
      .tl-event.even .tl-right { display: block; grid-column: 2; text-align: left; padding: 4px 0 0 20px; }
      .tl-event.even .tl-left  { display: none; }
      /* Odd events: .tl-right is the empty cell — keep hidden */
      .tl-event:not(.even) .tl-right { display: none; }
      .tl-node-icon { width: 40px; height: 40px; }
      .tl-time { font-size: 26px; }
    }

    /* ══════════════════════════════════════════════
       DRESS CODE SECTION
    ══════════════════════════════════════════════ */
    .dresscode-section {
      background: #F6EEE0;
      padding: 0;
      overflow: hidden;
    }

    /* Editorial header */
    .dc-header {
      background: #6A472E;
      padding: 80px 8% 72px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }
    .dc-header-left {}
    .dc-kicker {
      font-size: 8px; letter-spacing: 8px; text-transform: uppercase;
      font-weight: 200; color: rgba(255,255,255,0.35); margin-bottom: 20px;
    }
    .dc-big-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(60px, 10vw, 120px);
      color: #fff;
      line-height: 0.88;
      letter-spacing: -1px;
    }
    .dc-big-title em {
      font-style: italic;
      color: rgba(255,255,255,0.35);
    }
    .dc-header-right {
      text-align: right;
    }
    .dc-attire-label {
      font-size: 8px; letter-spacing: 6px; text-transform: uppercase;
      font-weight: 200; color: rgba(255,255,255,0.3); margin-bottom: 10px;
    }
    .dc-attire-name {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-weight: 300;
      font-size: clamp(20px, 2.5vw, 30px);
      color: rgba(255,255,255,0.75);
      letter-spacing: 1px;
    }

    /* Body */
    .dc-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 0;
    }
    .dc-copy {
      padding: 72px 64px 72px 8%;
      border-right: 1px solid rgba(0,0,0,0.08);
    }
    .dc-copy-eyebrow {
      font-size: 8px; letter-spacing: 6px; text-transform: uppercase;
      font-weight: 200; color: #6A472E; opacity: 0.4; margin-bottom: 20px;
    }
    .dc-copy-title {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(26px, 3vw, 38px); color: #6A472E; line-height: 1.25;
      margin-bottom: 22px;
    }
    .dc-copy-title em { font-style: italic; }
    .dc-copy-body {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(15px, 1.6vw, 17px); color: rgba(0,0,0,0.65);
      line-height: 1.85; margin-bottom: 28px;
    }
    .dc-vibe-quote {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic; font-weight: 300;
      font-size: clamp(16px, 1.7vw, 19px);
      color: #6A472E;
      line-height: 1.65;
      border-left: 2px solid #6A472E;
      padding-left: 20px;
      margin: 28px 0;
    }
    .dc-rules {
      list-style: none; display: flex; flex-direction: column; gap: 14px;
    }
    .dc-rules li {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(14px, 1.5vw, 16px); color: rgba(0,0,0,0.7);
      line-height: 1.6; padding-left: 20px; position: relative;
    }
    .dc-rules li::before {
      content: '';
      position: absolute; left: 0; top: 8px;
      width: 5px; height: 5px;
      background: #6A472E; transform: rotate(45deg);
    }

    /* Palettes */
    .dc-palettes {
      padding: 72px 8% 72px 64px;
      display: flex; flex-direction: column; gap: 48px;
    }
    .dc-palette-group {}
    .dc-palette-label {
      font-size: 8px; letter-spacing: 6px; text-transform: uppercase;
      font-weight: 300; color: #6A472E; margin-bottom: 6px;
    }
    .dc-palette-note {
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-weight: 300; font-size: 14px; color: rgba(0,0,0,0.45);
      margin-bottom: 20px; line-height: 1.5;
    }
    .dc-swatches {
      display: flex; flex-wrap: wrap; gap: 10px;
    }
    .dc-swatch {
      width: 36px; height: 36px;
      border-radius: 50%;
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
      position: relative;
    }
    /* Dress code image */
    .dc-image-wrap {
      width: 100%; background: #F6EEE0;
      padding: 52px 6%;
    }
    .dc-full-image {
      width: 100%; height: auto; display: block;
      border-radius: 2px;
      box-shadow: 0 8px 48px rgba(0,0,0,0.08);
    }

    /* Fashion figures */
    .dc-figures {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-top: 20px; align-items: flex-end;
    }
    .dc-figure {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
    }
    .dc-figure-label {
      font-family: 'Montserrat', sans-serif; font-weight: 200;
      font-size: 7px; letter-spacing: 2px; color: rgba(0,0,0,0.35);
      text-transform: uppercase; text-align: center;
    }

    .dc-swatch[title]:hover::after {
      content: attr(title);
      position: absolute; bottom: calc(100% + 6px); left: 50%;
      transform: translateX(-50%);
      background: #6A472E; color: #fff;
      font-family: 'Montserrat', sans-serif; font-size: 9px;
      letter-spacing: 1px; padding: 4px 8px;
      white-space: nowrap; pointer-events: none;
    }

    /* No-go strip */
    .dc-nogo {
      background: #6A472E;
      padding: 28px 8%;
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    }
    .dc-nogo-label {
      font-size: 8px; letter-spacing: 5px; text-transform: uppercase;
      font-weight: 200; color: rgba(255,255,255,0.35);
    }
    .dc-nogo-item {
      display: flex; align-items: center; gap: 8px;
      font-family: 'Cormorant Garamond', serif; font-style: italic;
      font-weight: 300; font-size: 15px; color: rgba(255,255,255,0.55);
    }
    .dc-nogo-item::before {
      content: '✕'; font-size: 9px; color: rgba(255,255,255,0.3);
      font-style: normal; font-family: 'Montserrat', sans-serif;
    }
    .dc-nogo-sep { color: rgba(255,255,255,0.12); margin: 0 6px; }

    @media (max-width: 860px) {
      .dc-body { grid-template-columns: 1fr; }
      .dc-copy { padding: 52px 8%; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); }
      .dc-palettes { padding: 52px 8%; }
      .dc-header { padding: 52px 8%; }
    }

    /* ══════════════════════════════════════════════
       MID PARALLAX STRIP
    ══════════════════════════════════════════════ */
    .parallax-strip {
      position: relative; height: 70vh; min-height: 480px;
      overflow: hidden; display: flex; align-items: center; justify-content: center;
    }
    .ps-bg {
      position: absolute; inset: -20%;
      background-image: url('../1.jpeg');
      background-size: cover; background-position: center;
      filter: brightness(0.35) saturate(0.7);
      will-change: transform;
    }
    .ps-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(46,29,20,0.44) 0%, rgba(46,29,20,0.08) 50%, rgba(46,29,20,0.44) 100%);
    }
    .ps-content {
      position: relative; z-index: 2;
      text-align: center; padding: 0 10%;
    }
    .ps-eyebrow { font-size: 8px; letter-spacing: 8px; text-transform: uppercase; font-weight: 200; color: var(--gold); margin-bottom: 20px; }
    .ps-quote {
      font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
      font-size: clamp(26px, 4vw, 52px);
      color: rgba(255,255,255,0.9); line-height: 1.5; max-width: 780px;
    }
    .ps-attr {
      margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 16px;
    }
    .ps-attr-line { width: 48px; height: 1px; background: var(--gold-dim); }
    .ps-attr-text { font-size: 8px; letter-spacing: 5px; text-transform: uppercase; font-weight: 200; color: var(--gold); }

    /* ══════════════════════════════════════════════
       ATTIRE SECTION
    ══════════════════════════════════════════════ */
    .attire-section {
      background: var(--bg-light);
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 78vh;
    }
    .attire-image {
      position: relative; overflow: hidden;
    }
    .attire-image img {
      width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
      transition: transform 8s ease;
    }
    .attire-image:hover img { transform: scale(1.03); }
    .attire-image::after {
      content: '';
      position: absolute; top: 8%; bottom: 8%; right: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--gold-dim) 30%, var(--gold-dim) 70%, transparent);
    }
    .attire-text {
      display: flex; flex-direction: column; justify-content: center;
      padding: 80px 72px 80px 80px;
    }
    .at-eyebrow { font-size: 8px; letter-spacing: 7px; text-transform: uppercase; font-weight: 200; color: var(--gold); margin-bottom: 18px; }
    .at-title {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(32px, 3.5vw, 48px); color: var(--text-dark); line-height: 1.2; margin-bottom: 6px;
    }
    .at-title em { font-style: italic; color: var(--gold); }
    .at-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 30px; }
    .at-line { height: 1px; width: 44px; background: linear-gradient(90deg, var(--gold), transparent); }
    .at-diamond { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
    .at-body {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(15px, 1.6vw, 17px); color: var(--text-mid); line-height: 1.9;
      margin-bottom: 20px;
    }
    .at-vibe-label {
      font-size: 8px; letter-spacing: 5px; text-transform: uppercase;
      font-weight: 300; color: var(--gold); margin-bottom: 10px; margin-top: 6px;
    }
    .at-vibe-quote {
      font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
      font-size: clamp(15px, 1.6vw, 18px); color: var(--text-dark);
      line-height: 1.7; border-left: 2px solid var(--gold);
      padding-left: 18px; margin-bottom: 22px;
    }
    .at-list {
      list-style: none; display: flex; flex-direction: column; gap: 12px;
    }
    .at-list li {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(14px, 1.5vw, 16px); color: var(--text-mid);
      line-height: 1.6; padding-left: 18px; position: relative;
    }
    .at-list li::before {
      content: '';
      position: absolute; left: 0; top: 9px;
      width: 5px; height: 5px;
      background: var(--gold); transform: rotate(45deg);
    }
    @media (max-width: 900px) {
      .attire-section { grid-template-columns: 1fr; }
      .attire-image { height: 55vw; min-height: 300px; }
      .attire-image::after { display: none; }
      .attire-text { padding: 52px 8%; }
    }

    /* ══════════════════════════════════════════════
       NOTE SECTION (What to expect)
    ══════════════════════════════════════════════ */
    .note-section {
      background: var(--bg); padding: 110px 10%;
      display: flex; flex-direction: column; align-items: center; text-align: center;
    }
    .ns-eyebrow { font-size: 8px; letter-spacing: 7px; text-transform: uppercase; font-weight: 200; color: var(--gold); margin-bottom: 20px; }
    .ns-title {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: clamp(26px, 3vw, 38px); color: rgba(255,255,255,0.9);
      margin-bottom: 24px; line-height: 1.4;
    }
    .ns-body {
      font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
      font-size: clamp(16px, 1.7vw, 20px); color: rgba(255,255,255,0.38);
      max-width: 660px; line-height: 1.9; margin-bottom: 44px;
    }
    .ns-cards {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 0; max-width: 900px; width: 100%;
      border: 1px solid rgba(201,162,74,0.1);
    }
    .ns-card {
      padding: 44px 36px; text-align: center;
      border-right: 1px solid rgba(201,162,74,0.1);
      position: relative; overflow: hidden;
    }
    .ns-card:last-child { border-right: none; }
    .ns-card::before {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      transform: scaleX(0); transition: transform .4s ease;
    }
    .ns-card:hover::before { transform: scaleX(1); }
    .ns-card-icon { margin-bottom: 18px; }
    .ns-card-icon svg { width: 28px; height: 28px; }
    .ns-card-title { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 400; color: rgba(255,255,255,0.8); margin-bottom: 10px; }
    .ns-card-body { font-size: 10px; letter-spacing: 1px; color: rgba(255,255,255,0.28); line-height: 1.8; font-weight: 300; }
    @media (max-width: 640px) { .ns-cards { grid-template-columns: 1fr; } .ns-card { border-right: none; border-bottom: 1px solid rgba(201,162,74,0.1); } .ns-card:last-child { border-bottom: none; } }

    /* ══════════════════════════════════════════════
       CLOSING HERO
    ══════════════════════════════════════════════ */
    .closing {
      position: relative; height: 68vh; min-height: 440px;
      display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    .closing-bg {
      position: absolute; inset: 0;
      background-image: url('../img/WhatsApp%20Image%202026-07-25%20at%201.36.46%20PM%20(4).jpeg');
      background-size: cover; background-position: center 35%;
      filter: brightness(0.3) saturate(0.6);
    }
    .closing-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(46,29,20,0.32), rgba(46,29,20,0.56));
    }
    .closing-content {
      position: relative; z-index: 2; text-align: center; padding: 0 10%;
    }
    .cc-eyebrow { font-size: 8px; letter-spacing: 8px; text-transform: uppercase; font-weight: 200; color: var(--gold); margin-bottom: 18px; }
    .cc-title {
      font-family: 'Playfair Display', serif; font-weight: 600; font-style: italic;
      font-size: clamp(42px, 6.5vw, 82px); letter-spacing: 1px;
      color: #fff; line-height: 1.05; text-shadow: 0 4px 60px rgba(0,0,0,0.5);
      margin-bottom: 18px;
    }
    .cc-sub { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(16px, 1.8vw, 22px); color: rgba(255,255,255,0.45); letter-spacing: 2px; }
    .cc-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
    .cc-line { height: 1px; width: 56px; background: linear-gradient(90deg, transparent, var(--gold)); }
    .cc-line.r { background: linear-gradient(-90deg, transparent, var(--gold)); }
    .cc-diamond { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
    .cc-rsvp-link {
      display: inline-block; margin-top: 38px;
      font-size: 8px; letter-spacing: 5px; text-transform: uppercase;
      font-weight: 300; color: var(--gold);
      text-decoration: none;
      padding: 14px 36px; border: 1px solid var(--gold-dim);
      transition: background .3s, border-color .3s, color .3s;
    }
    .cc-rsvp-link:hover { background: rgba(201,162,74,0.08); border-color: var(--gold); }

    /* ══════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════ */
    footer {
      background: var(--bg); border-top: 1px solid rgba(201,162,74,0.07);
      padding: 44px 52px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 20px;
    }
    .footer-logo { font-family: 'Great Vibes', cursive; font-size: 24px; color: rgba(255,255,255,0.5); text-decoration: none; }
    .footer-logo span { color: var(--gold); }
    .footer-copy { font-size: 8px; letter-spacing: 3px; font-weight: 200; color: rgba(255,255,255,0.18); text-transform: uppercase; }
    .footer-date { font-size: 9px; letter-spacing: 5px; text-transform: uppercase; font-weight: 200; color: rgba(255,255,255,0.22); }

    /* ══════════════════════════════════════════════
       KEYFRAMES
    ══════════════════════════════════════════════ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; } to { opacity: 1; }
    }
    @keyframes scrollPulse {
      0%, 100% { opacity: 0.4; transform: scaleY(1); }
      50%       { opacity: 1;   transform: scaleY(0.65); }
    }
    /* ══════════════════════════════════════════════
       EXPLORE NAV
    ══════════════════════════════════════════════ */
    .vnav-section {
      background: #3A281C;
      padding: 80px 24px 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      position: relative;
      overflow: hidden;
    }
    .vnav-top-rule {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 360px;
      margin-bottom: 52px;
    }
    .vnav-top-rule .vnr-line {
      flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201,162,74,0.35), transparent);
    }
    .vnav-top-rule .vnr-diamond {
      width: 5px; height: 5px;
      border: 1px solid rgba(201,162,74,0.5);
      transform: rotate(45deg);
    }
    .vnav-eyebrow {
      font-family: 'Montserrat', sans-serif;
      font-weight: 200;
      font-size: 8px;
      letter-spacing: 7px;
      color: rgba(201,162,74,0.55);
      text-transform: uppercase;
      margin-bottom: 48px;
      text-align: center;
    }
    .vnav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }
    .vnav-item {
      width: 100%;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .vnav-item:first-child {
      border-top: 1px solid rgba(255,255,255,0.12);
    }
    .vnav-item a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 4px;
      text-decoration: none;
      color: rgba(244,234,217,0.65);
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(22px, 5.5vw, 30px);
      letter-spacing: 4px;
      text-transform: uppercase;
      transition: color 0.3s ease, padding-left 0.3s ease;
      position: relative;
    }
    .vnav-item a::after {
      content: '→';
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      font-weight: 200;
      color: rgba(201,162,74,0);
      transition: color 0.3s ease, transform 0.3s ease;
      transform: translateX(-8px);
    }
    .vnav-item a:hover {
      color: #fff;
      padding-left: 10px;
    }
    .vnav-item a:hover::after {
      color: #C9A24A;
      transform: translateX(0);
    }
    .vnav-bottom {
      margin-top: 56px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .vnav-monogram {
      font-family: 'Great Vibes', cursive;
      font-size: clamp(28px, 7vw, 42px);
      color: rgba(201,162,74,0.55);
      letter-spacing: 2px;
    }
    .vnav-date {
      font-family: 'Montserrat', sans-serif;
      font-weight: 200;
      font-size: 8px;
      letter-spacing: 6px;
      color: rgba(255,255,255,0.2);
      text-transform: uppercase;
    }
    @media (min-width: 600px) {
      .vnav-list { max-width: 480px; }
      .vnav-item a { font-size: 28px; }
    

    /* Reception venue line */
    .tl-event-loc {
      font-family: 'Montserrat', sans-serif; font-weight: 300;
      font-size: 10px; letter-spacing: 1.2px; line-height: 1.6;
      color: var(--gold); margin-top: 10px;
    }
    .tl-event-loc .loc-pin { font-size: 8px; opacity: 0.85; margin-right: 5px; }