:root {
    --silk-image: url("../images/img-01.52a85c529c60.jpg");
    --burgundy-deepest: #3F0F1A;
    --burgundy-deep: #5C1A2A;
    --burgundy: #6E2231;
    --burgundy-light: #8B3142;
    --cream: #F5EBD8;
    --cream-warm: #EFE4D2;
    --cream-deep: #E8DCC4;
    --cream-paper: #FAF3E3;
    --gold: #B8944A;
    --gold-light: #D4B879;
    --gold-soft: #C9A961;
    --gold-dark: #7A5C18;
    --ink: #2A1418;
    /* Wedding-day palette accents */
    --coral: #E8745C;
    --coral-deep: #C95B45;
    --green: #3E6B4B;
    --green-light: #5A8267;
    --shadow-sm: 0 2px 8px rgba(63, 15, 26, 0.08);
    --shadow-md: 0 8px 24px rgba(63, 15, 26, 0.12);
    --shadow-lg: 0 18px 48px rgba(63, 15, 26, 0.18);
    --serif: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
    --script: 'Pinyon Script', cursive;
    --sans: 'Jost', 'Helvetica Neue', sans-serif;
  }

  /* === Silk fabric backgrounds — drawn from the corner of the monogram === */
  .hero,
  .gallery,
  .travel,
  .registry,
  footer {
    background-image:
      linear-gradient(160deg,
        rgba(63, 15, 26, 0.55) 0%,
        rgba(63, 15, 26, 0.08) 30%,
        rgba(0, 0, 0, 0.0) 60%,
        rgba(0, 0, 0, 0.55) 100%),
      var(--silk-image);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--serif);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(110, 34, 49, 0.025) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(184, 148, 74, 0.03) 0%, transparent 50%);
    mix-blend-mode: multiply;
  }

  /* ===== NAV ===== */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(92, 26, 42, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(184, 148, 74, 0.4);
    transition: padding 0.3s;
  }
  .nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s;
  }
  .nav-logo:hover { opacity: 0.85; }
  .nav-monogram {
    height: 56px;
    width: auto;
    display: block;
    /* The crest is an embedded PNG with mid-tone gold pixels (~#B8944A
       range) that visually disappear against the burgundy nav. Since
       it's a raster image we can't recolor it directly — instead we lift
       it with a brightness/saturate filter so it reads at roughly the
       brightness of var(--gold-light), matching the menu hover state.
       The drop-shadow gives it a slight glow lift off the burgundy. */
    filter:
      brightness(1.45)
      saturate(1.15)
      drop-shadow(0 0 4px rgba(212, 184, 121, 0.35))
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  }
  .nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
  }
  .nav-links a {
    color: var(--cream);
    font-family: var(--sans);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
  }
  .nav-links a:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold-light);
  }
  .nav-rsvp {
    background: var(--gold);
    color: var(--burgundy-deepest) !important;
    padding: 8px 18px !important;
    border-radius: 1px;
    font-weight: 500;
    border: none !important;
  }
  .nav-rsvp:hover { background: var(--gold-light); border: none !important; }

  /* Mobile actions container — holds RSVP button + hamburger side-by-side */
  .nav-mobile-actions {
    display: none;
    align-items: center;
    gap: 10px;
  }
  .nav-rsvp-mobile {
    display: inline-block;
    padding: 9px 18px;
    background: var(--gold);
    color: var(--burgundy-deepest);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 1px;
    transition: background 0.2s;
  }
  .nav-rsvp-mobile:hover, .nav-rsvp-mobile:active {
    background: var(--gold-light);
  }
  .nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(212, 184, 121, 0.4);
    color: var(--cream);
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  @media (max-width: 980px) {
    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      flex-direction: column;
      background: var(--burgundy-deep);
      gap: 0;
      padding: 16px 0;
      border-top: 1px solid rgba(184, 148, 74, 0.3);
    }
    .nav-links.open { display: flex; }
    .nav-links li { padding: 10px 32px; }
    /* Hide the RSVP item that lives inside the dropdown — the standalone mobile RSVP button replaces it */
    .nav-links li:last-child { display: none; }
    .nav-toggle { display: block; }
    .nav-mobile-actions { display: flex; }
  }
  @media (max-width: 480px) {
    .nav { padding: 12px 18px; }
    .nav-monogram { height: 44px; }
    .nav-rsvp-mobile { padding: 8px 14px; font-size: 11px; letter-spacing: 0.15em; }
    .nav-toggle { padding: 7px 10px; font-size: 10px; }
    .nav-mobile-actions { gap: 8px; }
  }

  /* ===== HERO ===== */
  .hero {
    min-height: 100vh;
    background-color: var(--burgundy-deep);
    color: var(--cream);
    padding: 120px 32px 80px;
    position: relative;
    overflow: hidden;
  }
  .hero::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(212, 184, 121, 0.35); pointer-events: none; }
  .hero::after { content: ""; position: absolute; inset: 36px; border: 1px solid rgba(212, 184, 121, 0.18); pointer-events: none; }
  .hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .hero-photo-wrap {
    position: relative;
    padding: 14px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
    box-shadow: var(--shadow-lg);
  }
  .hero-photo-wrap::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--burgundy-deep); pointer-events: none; z-index: 2; }
  .hero-photo { display: block; width: 100%; height: auto; position: relative; }
  .hero-text { text-align: center; }
  .hero-greeting {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 24px;
  }
  .hero-greeting::before, .hero-greeting::after {
    content: "◆"; margin: 0 14px; color: var(--gold); font-size: 8px; vertical-align: middle;
  }
  .hero-names { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--cream); line-height: 1.0; }
  .hero-names .first { display: block; font-size: clamp(48px, 7vw, 88px); }
  .hero-amp { display: block; margin: 6px 0; font-family: var(--script); font-size: clamp(40px, 5vw, 64px); color: var(--gold-light); font-style: normal; }
  .hero-names .second { display: block; font-size: clamp(48px, 7vw, 88px); }
  .hero-divider { margin: 32px auto; width: 200px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); position: relative; }
  .hero-divider::after { content: "◆"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--burgundy-deep); color: var(--gold); padding: 0 8px; font-size: 12px; }
  .hero-date { font-family: var(--sans); font-weight: 300; letter-spacing: 0.35em; text-transform: uppercase; font-size: 15px; color: var(--cream); }
  .hero-place { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--cream-warm); margin-top: 8px; opacity: 0.85; }

  .countdown { margin-top: 40px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
  .count-cell { min-width: 78px; padding: 14px 8px; border: 1px solid rgba(212, 184, 121, 0.4); background: rgba(0, 0, 0, 0.18); }
  .count-num { display: block; font-family: var(--serif); font-size: 36px; font-weight: 500; color: var(--gold-light); line-height: 1; }
  .count-label { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--cream-deep); margin-top: 8px; }

  @media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .hero-photo-wrap { max-width: 420px; margin: 0 auto; }
    .count-cell { min-width: 64px; }
    .count-num { font-size: 28px; }
  }

  /* ===== Section Frame ===== */
  section { padding: 110px 32px; position: relative; z-index: 2; }
  .container { max-width: 1100px; margin: 0 auto; }
  .container-wide { max-width: 1280px; margin: 0 auto; }
  .eyebrow {
    font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0.4em;
    text-transform: uppercase; color: var(--gold-dark); text-align: center; margin-bottom: 14px;
  }
  .eyebrow::before, .eyebrow::after {
    content: "◆"; margin: 0 12px; color: var(--gold-dark); font-size: 7px; vertical-align: middle;
  }
  .h-display {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(44px, 5.5vw, 70px); text-align: center; color: var(--burgundy-deep);
    line-height: 1.1; margin-bottom: 16px;
  }
  .h-sub {
    font-family: var(--serif); font-size: 20px; text-align: center; color: var(--burgundy-light);
    max-width: 640px; margin: 0 auto 64px; font-weight: 400; line-height: 1.7;
  }
  .h-sub em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    color: var(--burgundy-deep);
    letter-spacing: 0.005em;
  }
  .ornate-rule { display: flex; align-items: center; justify-content: center; margin: 0 auto 56px; max-width: 240px; color: var(--gold-dark); }
  .ornate-rule::before, .ornate-rule::after { content: ""; flex: 1; height: 1px; background: var(--gold); }
  .ornate-rule span { margin: 0 12px; font-size: 10px; }

  /* ===== WELCOME ===== */
  .welcome { background: var(--cream-warm); text-align: center; }
  .welcome-body { max-width: 720px; margin: 0 auto; font-size: 21px; line-height: 1.85; color: var(--ink); }
  .welcome-body p { margin-bottom: 20px; }
  .welcome-body .igbo { font-style: italic; color: var(--burgundy); }
  .signature { margin-top: 36px; font-family: var(--script); font-size: 38px; color: var(--burgundy-deep); line-height: 1; }
  .signature-sub { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--burgundy-deep); margin-top: 8px; }

  /* ===== GALLERY ===== */
  .gallery { background-color: var(--burgundy-deepest); color: var(--cream); }
  .gallery .h-display { color: var(--cream); }
  .gallery .h-sub { color: var(--cream-deep); }
  .gallery .eyebrow { color: var(--gold-light); }
  .gallery .h-sub em { color: var(--gold-light); }
  .gallery-feature {
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--burgundy-deep);
  }
  .gallery-feature img {
    width: 100%; height: auto; display: block;
    transition: transform 0.8s ease;
  }
  .gallery-feature:hover img { transform: scale(1.03); }
  .gallery-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 18px; }
  .gallery-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
  .gallery-item {
    position: relative;
    overflow: hidden;
    background: var(--burgundy-deep);
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-md);
  }
  .gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.8s ease, filter 0.4s ease;
  }
  .gallery-item:hover img { transform: scale(1.06); }
  .gallery-duo .gallery-item { aspect-ratio: 3 / 2; }
  .gallery-cap {
    text-align: center;
    margin-top: 32px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    color: var(--cream-warm);
    opacity: 0.8;
  }
  .gallery-cap a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid var(--gold); }

  @media (max-width: 880px) {
    .gallery-trio { grid-template-columns: 1fr 1fr; }
    .gallery-duo { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .gallery-trio { grid-template-columns: 1fr; }
  }

  /* ===== SCHEDULE ===== */
  .schedule { background: var(--cream); }
  .schedule-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 16px; }
  @media (max-width: 880px) { .schedule-grid { grid-template-columns: 1fr; } }
  .event-card {
    background: var(--cream-paper); padding: 36px 28px; border: 1px solid var(--cream-deep);
    text-align: center; position: relative; transition: transform 0.3s, box-shadow 0.3s;
  }
  .event-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold); pointer-events: none; opacity: 0.5; }
  .event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .event-time { font-family: var(--sans); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 14px; }
  .event-title { font-family: var(--serif); font-style: italic; font-size: 32px; color: var(--burgundy-deep); line-height: 1.2; margin-bottom: 12px; }
  .event-loc { font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--burgundy); margin-bottom: 6px; }
  .event-addr { font-family: var(--serif); font-size: 17px; color: var(--ink); font-style: italic; opacity: 0.75; }
  .event-icon { width: 38px; height: 38px; margin: 0 auto 18px; color: var(--burgundy); }
  .bus-banner {
    margin-top: 36px;
    padding: 22px 28px;
    background: var(--burgundy-deep);
    color: var(--cream);
    text-align: center;
    border: 1px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .bus-banner svg { color: var(--gold-light); width: 36px; height: 36px; flex-shrink: 0; }
  .bus-banner-text { text-align: left; }
  .bus-banner-eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-light);
    display: block;
    margin-bottom: 4px;
  }
  .bus-banner-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--cream);
  }
  .bus-banner-detail {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--cream-warm);
    margin-top: 2px;
    opacity: 0.85;
  }
  @media (max-width: 600px) {
    .bus-banner { flex-direction: column; gap: 12px; }
    .bus-banner-text { text-align: center; }
  }

  /* ===== TRAVEL ===== */
  .travel { background-color: var(--burgundy-deep); color: var(--cream); }
  .travel .h-display { color: var(--cream); }
  .travel .h-sub { color: var(--cream-deep); }
  .travel .eyebrow { color: var(--gold-light); }
  .travel .h-sub em { color: var(--gold-light); }

  /* Concierge feature card */
  .concierge {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 44px 48px;
    background: linear-gradient(135deg, var(--cream-paper) 0%, var(--cream) 100%);
    color: var(--ink);
    border: 14px solid transparent;
    background-image:
      linear-gradient(135deg, var(--cream-paper) 0%, var(--cream) 100%),
      linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-light));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
  }
  .concierge-mark {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(63, 15, 26, 0.20);
    border: 1px solid var(--cream-deep);
  }
  .concierge-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }
  .concierge:hover .concierge-logo { transform: scale(1.04); }
  @media (max-width: 880px) {
    .concierge-mark { width: 200px; height: 200px; }
  }
  .concierge-text {}
  .concierge-eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--coral-deep);
    margin-bottom: 8px;
  }
  .concierge-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 32px;
    color: var(--burgundy-deep);
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .concierge-desc {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink);
    line-height: 1.65;
  }
  .concierge-cta {
    flex-shrink: 0;
    padding: 16px 26px;
    background: var(--burgundy-deep);
    color: var(--cream);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: background 0.2s;
    text-align: center;
    white-space: nowrap;
  }
  .concierge-cta:hover { background: var(--burgundy-deepest); }
  @media (max-width: 880px) {
    .concierge { grid-template-columns: 1fr; text-align: center; padding: 36px 28px; }
    .concierge-mark { margin: 0 auto; }
  }

  .travel-divider-text {
    text-align: center;
    margin: 0 auto 36px;
    max-width: 1100px;
    color: var(--cream-deep);
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    position: relative;
  }
  .travel-divider-text span {
    background: var(--burgundy-deep);
    padding: 0 22px;
    position: relative;
    z-index: 2;
  }
  .travel-divider-text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 1px;
    background: rgba(212, 184, 121, 0.3);
    z-index: 1;
  }

  .travel-card {
    background: var(--cream-paper); color: var(--ink); padding: 60px;
    border: 14px solid transparent;
    background-image:
      linear-gradient(var(--cream-paper), var(--cream-paper)),
      linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
    background-origin: border-box; background-clip: padding-box, border-box;
    box-shadow: var(--shadow-lg);
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
  }
  .travel-card::before {
    content: "";
    position: absolute;
    inset: 30px;
    border: 1px solid var(--gold);
    opacity: 0.32;
    pointer-events: none;
  }
  .travel-card > * { position: relative; z-index: 1; }
  @media (max-width: 880px) { .travel-card { padding: 44px 32px; } }
  .travel-mode { display: flex; gap: 0; border: 1px solid var(--cream-deep); margin-bottom: 32px; background: white; }
  .mode-btn {
    flex: 1; padding: 16px; background: transparent; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink); transition: background 0.2s, color 0.2s;
  }
  .mode-btn.active { background: var(--burgundy-deep); color: var(--cream); }
  .mode-btn:not(.active):hover { background: var(--cream); }

  .travel-form { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin-bottom: 16px; }
  @media (max-width: 600px) { .travel-form { grid-template-columns: 1fr; } }
  .travel-form label {
    grid-column: 1 / -1; font-family: var(--sans); font-size: 13px;
    letter-spacing: 0.25em; text-transform: uppercase; color: var(--burgundy); font-weight: 500;
  }
  .travel-form input {
    padding: 14px 16px; font-family: var(--serif); font-size: 18px;
    background: white; border: 1px solid var(--cream-deep); color: var(--ink); transition: border-color 0.2s;
  }
  .travel-form input:focus { outline: none; border-color: var(--gold); }
  .geo-btn {
    padding: 14px 20px; background: var(--burgundy); color: var(--cream); border: none; cursor: pointer;
    font-family: var(--sans); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
    transition: background 0.2s; white-space: nowrap;
  }
  .geo-btn:hover { background: var(--burgundy-deep); }
  .geo-status { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--burgundy); min-height: 22px; margin-bottom: 8px; }
  /* === Airport combobox === */
  .origin-wrapper {
    position: relative;
    grid-column: 1;
  }
  @media (max-width: 600px) { .origin-wrapper { grid-column: auto; } }

  .airport-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    background: white;
    /* Bold gold double-line frame matches the gold-foil aesthetic of the parent card */
    border: 2px solid var(--gold);
    outline: 1px solid rgba(63, 15, 26, 0.15);
    outline-offset: 2px;
    max-height: 360px;
    overflow-y: auto;
    /* Strong dark drop-shadow so the panel reads as floating above whatever's beneath */
    box-shadow: 0 10px 32px rgba(63, 15, 26, 0.45), 0 4px 12px rgba(0, 0, 0, 0.18);
  }
  .airport-dropdown[hidden] { display: none; }
  .airport-hint {
    padding: 16px 18px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--burgundy);
    text-align: center;
  }
  .airport-region-header {
    padding: 10px 18px 8px;
    background: var(--burgundy-deep);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-light);
    border-bottom: 1px solid var(--gold);
    text-align: center;
  }
  .airport-option {
    padding: 14px 18px;
    cursor: pointer;
    /* Distinct, visible row separator — burgundy-tinted instead of nearly-white */
    border-bottom: 1px solid rgba(184, 148, 74, 0.35);
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 14px;
    align-items: center;
    transition: background 0.15s;
  }
  /* Alternating subtle stripe so adjacent rows are easier to distinguish */
  .airport-option:nth-child(even) { background: var(--cream-paper); }
  .airport-option:last-child { border-bottom: none; }
  .airport-option:hover, .airport-option.highlighted {
    background: var(--burgundy-deep);
  }
  .airport-option:hover .airport-city,
  .airport-option.highlighted .airport-city,
  .airport-option:hover .airport-name,
  .airport-option.highlighted .airport-name {
    color: var(--cream);
  }
  .airport-code {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    font-size: 18px;
    color: var(--burgundy-deep);
    text-align: center;
    background: var(--cream);
    padding: 5px 0;
    border: 1px solid var(--gold);
    letter-spacing: 0.05em;
  }
  .airport-option:hover .airport-code,
  .airport-option.highlighted .airport-code {
    background: var(--gold);
    color: var(--burgundy-deepest);
    border-color: var(--gold-light);
  }
  .airport-meta { line-height: 1.35; min-width: 0; }
  .airport-city {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .airport-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--ink);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Selected airport pill — appears below input after selection */
  .airport-selected {
    margin-top: 12px;
    margin-bottom: 8px;
    padding: 10px 14px;
    background: var(--cream-paper);
    border-left: 3px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .airport-selected[hidden] { display: none; }
  .airport-selected-text {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
  }
  .airport-selected-text strong {
    font-weight: 600;
    color: var(--burgundy-deep);
    font-style: italic;
  }
  .airport-selected-clear {
    background: none;
    border: 1px solid var(--cream-deep);
    color: var(--burgundy);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .airport-selected-clear:hover {
    background: var(--burgundy-deep);
    color: var(--cream);
    border-color: var(--burgundy-deep);
  }
  .booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 600px) { .booking-grid { grid-template-columns: 1fr; } }
  .booking-card {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    background: white; border: 1px solid var(--cream-deep); text-decoration: none;
    color: var(--ink); transition: all 0.2s; position: relative;
  }
  .booking-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .booking-card.disabled { opacity: 0.4; pointer-events: none; }
  .booking-icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--burgundy); }
  .booking-text { flex: 1; }
  .booking-eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-dark); display: block; margin-bottom: 2px; }
  .booking-name { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--burgundy-deep); line-height: 1.2; }
  .booking-arrow { color: var(--gold-dark); font-size: 18px; }
  .travel-section-title {
    font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--burgundy-deep);
    margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--cream-deep);
  }

  /* ===== STAY ===== */
  .stay { background: var(--cream-warm); }
  .stay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 24px; }
  @media (max-width: 880px) { .stay-grid { grid-template-columns: 1fr; gap: 32px; } }
  .stay-card { background: var(--cream-paper); padding: 44px; border: 1px solid var(--gold); position: relative; }
  .stay-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold); opacity: 0.4; pointer-events: none; }
  .stay-name { font-family: var(--serif); font-style: italic; font-size: 32px; color: var(--burgundy-deep); margin-bottom: 8px; }
  .stay-addr { font-family: var(--serif); font-size: 16px; color: var(--burgundy); font-style: italic; margin-bottom: 28px; }
  .stay-rate { text-align: center; padding: 24px 0; border-top: 1px solid var(--cream-deep); border-bottom: 1px solid var(--cream-deep); margin-bottom: 24px; }
  .rate-num { font-family: var(--serif); font-size: 56px; color: var(--burgundy-deep); font-weight: 500; line-height: 1; }
  .rate-num sup { font-size: 28px; vertical-align: top; margin-right: 2px; }
  .rate-label { font-family: var(--sans); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dark); margin-top: 8px; }
  .rate-detail { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--burgundy); margin-top: 6px; }
  .stay-list { list-style: none; margin-bottom: 28px; }
  .stay-list li { padding: 8px 0; font-size: 16px; display: flex; gap: 10px; align-items: baseline; }
  .stay-list li::before { content: "◆"; color: var(--gold-dark); font-size: 8px; }
  .stay-cta {
    display: block; text-align: center; padding: 16px; background: var(--burgundy-deep);
    color: var(--cream); text-decoration: none; font-family: var(--sans); font-size: 13px;
    letter-spacing: 0.3em; text-transform: uppercase; transition: background 0.2s;
  }
  .stay-cta:hover { background: var(--burgundy); }

  .stay-aside { padding: 0 16px; }
  .stay-aside h3 { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--burgundy-deep); margin-bottom: 20px; }
  .stay-aside p { font-size: 17px; line-height: 1.75; margin-bottom: 16px; }
  .contact-card { margin-top: 24px; padding: 20px; background: white; border-left: 3px solid var(--gold); }
  .contact-card .name { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--burgundy-deep); }
  .contact-card .role { font-family: var(--sans); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-dark); margin: 4px 0 8px; }
  .contact-card a { color: var(--burgundy); text-decoration: none; border-bottom: 1px solid var(--gold); }
  .contact-card a:hover { color: var(--burgundy-deep); }

  /* ===== ATTIRE ===== */
  .attire { background: var(--cream); text-align: center; }
  .attire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }
  @media (max-width: 700px) { .attire-grid { grid-template-columns: 1fr; } }
  .attire-card { padding: 48px 32px; background: var(--cream-paper); border: 1px solid var(--cream-deep); position: relative; }
  .attire-card-title { font-family: var(--serif); font-style: italic; font-size: 38px; color: var(--burgundy-deep); margin-bottom: 16px; }
  .attire-card p { font-size: 17px; line-height: 1.75; color: var(--ink); }
  .palette-section {
    margin-top: 56px;
    padding: 40px 32px;
    background: var(--cream-paper);
    border: 1px solid var(--cream-deep);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .palette-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 26px;
    color: var(--burgundy-deep);
    margin-bottom: 8px;
  }
  .palette-sub {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 24px;
  }
  .palette-row { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
  .palette-swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .swatch-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  }
  .swatch-name { font-family: var(--sans); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--burgundy); }

  /* ===== ORLANDO ===== */
  .orlando { background: var(--cream-warm); }
  .ol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 880px) { .ol-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .ol-grid { grid-template-columns: 1fr; } }
  .ol-card { padding: 24px; background: var(--cream-paper); border: 1px solid var(--cream-deep); transition: transform 0.2s, box-shadow 0.2s; }
  .ol-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
  .ol-card h4 { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--burgundy-deep); margin-bottom: 8px; }
  .ol-card .ol-tag { font-family: var(--sans); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; }
  .ol-card p { font-size: 16px; color: var(--ink); opacity: 0.85; }

  /* ===== REGISTRY ===== */
  .registry { background-color: var(--burgundy-deep); color: var(--cream); text-align: center; }
  .registry .h-display { color: var(--cream); }
  .registry .h-sub { color: var(--cream-deep); }
  .registry .eyebrow { color: var(--gold-light); }
  .registry .h-sub em { color: var(--gold-light); }
  .registry-body { max-width: 640px; margin: 0 auto; font-size: 20px; line-height: 1.85; color: var(--cream-warm); }
  /* === Wedding Team === */
  .team { background: var(--cream-warm); }
  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 16px;
  }
  @media (max-width: 880px) { .team-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

  .team-card {
    background: var(--cream-paper);
    padding: 32px 28px 28px;
    text-align: center;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    /* Gold-foil gradient border on every team card */
    border: 8px solid transparent;
    background-image:
      linear-gradient(var(--cream-paper), var(--cream-paper)),
      linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
  .team-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid var(--gold);
    pointer-events: none;
    opacity: 0.45;
  }
  .team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  /* Square headshot for team cards that have a photo. Sized to fit
     within the existing card width without changing card dimensions.
     Sits between the role title and the name. */
  .team-photo {
    display: block;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center top;
    margin: 14px auto 18px;
    border: 1px solid var(--gold);
    box-shadow: 0 4px 12px rgba(63, 15, 26, 0.2);
    position: relative;
    z-index: 1;
  }
  /* Compact circular avatar for non-featured team cards (e.g. Officiant).
     Smaller than .team-photo and round so the card stays close to its
     original height when adding a photo — used when we want a face on
     the card without promoting it to the larger "featured" treatment. */
  .team-avatar {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: cover;
    object-position: center top;
    margin: 8px auto 14px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(63, 15, 26, 0.18);
    position: relative;
    z-index: 1;
  }
  /* Brand logo treatment for vendor/business cards. Different from .team-photo:
     uses object-fit: contain so the logo is never cropped, and a white background
     so logos with light marks remain readable. */
  .team-logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: 80px;
    object-fit: contain;
    object-position: center;
    margin: 14px auto 18px;
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--cream-deep);
    box-shadow: 0 2px 8px rgba(63, 15, 26, 0.12);
    position: relative;
    z-index: 1;
  }
  /* Wide-aspect variant: for horizontal wordmark logos (e.g. 8:1 or wider).
     Goes wider with less vertical height to keep the wordmark readable. */
  .team-logo-wide {
    max-width: 260px;
    height: 60px;
    padding: 10px 18px;
  }

  .team-role {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
  }
  .team-name {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 26px;
    color: var(--burgundy-deep);
    line-height: 1.2;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
  }
  .team-stage-name {
    font-family: var(--script);
    font-size: 30px;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
  }
  .team-detail {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
    opacity: 0.8;
    line-height: 1.55;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
  }
  .team-detail em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--burgundy);
  }
  .team-credits {
    font-family: var(--serif);
    font-size: 13px;
    color: var(--ink);
    opacity: 0.7;
    line-height: 1.55;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--cream);
    border-left: 2px solid var(--gold);
    text-align: left;
    position: relative;
    z-index: 1;
  }
  .team-credits-label {
    display: block;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 4px;
    font-weight: 500;
  }
  /* Compact contact block for vendor cards that need direct contact info */
  .team-contact {
    font-family: var(--serif);
    font-size: 13px;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--cream);
    border-left: 2px solid var(--gold);
    text-align: left;
    position: relative;
    z-index: 1;
  }
  .team-contact-label {
    display: block;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .team-contact-row {
    display: block;
    margin-bottom: 2px;
  }
  .team-contact-row:last-child { margin-bottom: 0; }
  .team-contact-row strong {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--burgundy);
    font-weight: 500;
    margin-right: 8px;
  }
  .team-contact a {
    color: var(--burgundy-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    transition: color 0.2s;
  }
  .team-contact a:hover {
    color: var(--burgundy);
  }
  .team-link {
    display: inline-block;
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--burgundy-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
    align-self: center;
    position: relative;
    z-index: 1;
  }
  .team-link:hover {
    color: var(--burgundy);
  }
  .team-tbd {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--burgundy);
    opacity: 0.55;
    margin-top: auto;
    position: relative;
    z-index: 1;
  }

  /* === RSVP deadline banner — sits prominently in the team section === */
  .rsvp-deadline-banner {
    margin-top: 64px;
    padding: 32px 36px;
    background: var(--burgundy-deep);
    color: var(--cream);
    text-align: center;
    border: 1px solid var(--gold);
    background-image:
      linear-gradient(160deg,
        rgba(63, 15, 26, 0.55) 0%,
        rgba(63, 15, 26, 0.08) 30%,
        rgba(0, 0, 0, 0.0) 60%,
        rgba(0, 0, 0, 0.55) 100%),
      var(--silk-image);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    position: relative;
  }
  .rsvp-deadline-banner::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--gold);
    opacity: 0.5;
    pointer-events: none;
  }
  .rsvp-deadline-eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
  }
  .rsvp-deadline-eyebrow::before, .rsvp-deadline-eyebrow::after {
    content: "◆"; margin: 0 14px; color: var(--gold); font-size: 7px; vertical-align: middle;
  }
  .rsvp-deadline-date {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 38px;
    color: var(--cream);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
  }
  .rsvp-deadline-text {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--cream-deep);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
  }
  .rsvp-deadline-cta {
    display: inline-block;
    padding: 14px 30px;
    background: var(--gold);
    color: var(--burgundy-deepest);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: background 0.2s;
    position: relative;
    z-index: 1;
  }
  .rsvp-deadline-cta:hover { background: var(--gold-light); }

  /* === Registry: tiered layout === */
  .registry-tier {
    margin-top: 56px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  .registry-tier-label {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-align: center;
    margin-bottom: 8px;
  }
  .registry-tier-label::before, .registry-tier-label::after {
    content: "◆"; margin: 0 12px; color: var(--gold); font-size: 7px; vertical-align: middle;
  }
  .registry-tier-sub {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--cream-deep);
    text-align: center;
    margin-bottom: 28px;
    opacity: 0.85;
  }

  /* Retail registry cards */
  .registry-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  @media (max-width: 700px) { .registry-cards { grid-template-columns: 1fr; } }
  .reg-card {
    display: block;
    padding: 28px 24px;
    background: var(--cream-paper);
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--gold);
    transition: transform 0.25s, box-shadow 0.25s;
    text-align: center;
    position: relative;
  }
  .reg-card::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--gold);
    opacity: 0.35;
    pointer-events: none;
  }
  .reg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  }
  .reg-card-eyebrow {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 10px;
    display: block;
  }
  .reg-card-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 28px;
    color: var(--burgundy-deep);
    line-height: 1.15;
    margin-bottom: 6px;
  }
  .reg-card-desc {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
    opacity: 0.75;
    line-height: 1.5;
  }
  .reg-card-arrow {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--burgundy-deep);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
  }

  /* Honeymoon fund featured card */
  .honeymoon-card {
    margin: 0 auto;
    max-width: 720px;
    padding: 40px 36px;
    background: var(--cream-paper);
    color: var(--ink);
    text-align: center;
    border: 14px solid transparent;
    background-image:
      linear-gradient(var(--cream-paper), var(--cream-paper)),
      linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: var(--shadow-lg);
    position: relative;
  }
  .honeymoon-card::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid var(--gold);
    opacity: 0.35;
    pointer-events: none;
  }
  .honeymoon-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    color: var(--burgundy-deep);
  }
  .honeymoon-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 36px;
    color: var(--burgundy-deep);
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .honeymoon-desc {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    line-height: 1.65;
    margin-bottom: 22px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
  .honeymoon-cta {
    display: inline-block;
    padding: 14px 32px;
    background: var(--burgundy-deep);
    color: var(--cream);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: background 0.2s;
  }
  .honeymoon-cta:hover { background: var(--burgundy); }

  /* Direct payment rails */
  .payment-rails {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--cream-deep);
  }
  .payment-rails-label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-dark);
    text-align: center;
    margin-bottom: 6px;
  }
  .payment-rails-sub {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--burgundy-deep);
    text-align: center;
    margin-bottom: 18px;
  }
  /* Zelle copy button: lives inside an .amount-prefill card just like
     the PayPal/Venmo submit buttons, but is wider (it shows a full
     email address as its label) and acts on click via JS rather than
     submitting a form. The .payment-pill-copied overlay name is kept
     so existing JS (which toggles 'is-copied' to flash "Copied!")
     continues to work unchanged. */
  .zelle-copy-btn {
    width: 100%;
    max-width: 360px;
    padding: 12px 18px;
    cursor: copy;
    text-transform: none;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
  }
  .zelle-copy-btn-email {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    word-break: break-all;
  }
  .payment-pill-copied {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: var(--burgundy-deep);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .zelle-copy-btn.is-copied .payment-pill-copied,
  #zelleLink.is-copied .payment-pill-copied {
    opacity: 1;
  }

  /* Amount-prefill card (Zelle, Venmo, PayPal): a small bordered card
     holding the brand row, an action area (input + button for Venmo/
     PayPal, single copy button for Zelle), and helper text. Sits inside
     the honeymoon-card, which has a cream background — so all text
     uses dark ink/burgundy tones, not cream. The card's own border
     uses a soft gold tint to set it apart from the cream parent. */
  .amount-prefill {
    margin: 22px auto 0;
    max-width: 460px;
    padding: 22px 24px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--gold);
    border-radius: 2px;
    text-align: center;
  }
  /* Brand row at top of the card: brand glyph + "Venmo" / "PayPal".
     Burgundy ink so it's clearly visible against the cream/white card. */
  .amount-prefill-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--burgundy-deep);
  }
  .amount-prefill-icon {
    width: 24px;
    height: 24px;
    color: var(--burgundy);
    flex-shrink: 0;
  }
  .amount-prefill-brand-name {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: 0.3px;
    color: var(--burgundy-deep);
  }
  /* Helper line: dark ink at full opacity, sized for clear reading on
     mobile. No italic — italic at small sizes hurts readability. */
  .amount-prefill-label {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 16px;
  }
  .amount-prefill-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
  }
  .amount-prefill-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid var(--cream-deep);
    flex: 1 1 160px;
    min-width: 140px;
    max-width: 220px;
  }
  .amount-prefill-input-wrap:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
  }
  .amount-prefill-currency {
    padding: 0 4px 0 12px;
    color: var(--burgundy-deep);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 15px;
  }
  .amount-prefill-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 12px 10px 4px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    background: transparent;
    width: 100%;
  }
  .amount-prefill-btn {
    padding: 10px 18px;
    background: var(--gold);
    color: var(--burgundy-deep);
    border: 1px solid var(--gold);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .amount-prefill-btn:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-1px);
  }
  .amount-prefill-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
  /* Reassurance text below the button: dark ink, slightly muted via
     opacity but still clearly legible. */
  .amount-prefill-hint {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
    margin: 14px 0 0;
    opacity: 0.75;
  }

  .registry-footnote {
    margin-top: 24px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--cream-deep);
    opacity: 0.85;
  }

  /* ===== RSVP ===== */
  .rsvp { background: var(--cream); }
  .rsvp-form {
    max-width: 720px; margin: 32px auto 0; background: var(--cream-paper);
    padding: 64px; border: 14px solid transparent;
    background-image:
      linear-gradient(var(--cream-paper), var(--cream-paper)),
      linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
    background-origin: border-box; background-clip: padding-box, border-box;
    box-shadow: var(--shadow-md);
    position: relative;
  }
  .rsvp-form::before {
    content: "";
    position: absolute;
    inset: 30px;
    border: 1px solid var(--gold);
    opacity: 0.32;
    pointer-events: none;
  }
  .rsvp-form > * { position: relative; z-index: 1; }
  @media (max-width: 600px) { .rsvp-form { padding: 44px 32px; } }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 24px; }
  @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
  /* Inside a .form-row, labels on different cells may wrap differently
     (e.g. "Number of guests in your party" vs "Children attending?"),
     and content below an input may differ (e.g. a persistent hint under
     Phone but nothing under Email). To keep inputs horizontally aligned
     across the row, we reserve enough vertical space for a 2-line label
     in every cell. Inputs then sit at a consistent top position,
     unaffected by what comes after them. */
  .form-row .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }
  .form-row .form-group label {
    /* Reserve room for up to 2 lines so single-line labels in the same
       row don't pull their input upward relative to wrapping siblings.
       12px font * 1.4 line-height * 2 lines = ~33.6px, plus the 8px
       label-to-input margin already set elsewhere. */
    min-height: 2.8em;
    align-items: flex-start;
  }
  .form-group label { display: block; font-family: var(--sans); font-size: 12px; line-height: 1.4; letter-spacing: 0.3em; text-transform: uppercase; color: var(--burgundy); margin-bottom: 8px; font-weight: 500; }
  .form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 14px 16px; font-family: var(--serif); font-size: 18px;
    background: white; border: 1px solid var(--cream-deep); color: var(--ink);
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--gold); }
  .form-group textarea { min-height: 96px; resize: vertical; }
  .form-group { margin-bottom: 24px; }

  /* Inline validation error message. Hidden by default — only shown when
     the parent .form-group is flagged with .has-error by the validation
     JS on submit. Without this rule the error text was always visible
     under fields like Email, which also pushed adjacent inputs out of
     vertical alignment when the row's other field had no error span. */
  .field-error {
    display: none;
    font-family: var(--sans);
    font-size: 12px;
    color: #B0394A;
    margin-top: 6px;
    line-height: 1.4;
  }
  .form-group.has-error .field-error {
    display: block;
  }
  .form-group.has-error input,
  .form-group.has-error select,
  .form-group.has-error textarea {
    border-color: #B0394A;
  }
  /* Persistent help hint under an input. Always visible — used for
     guidance the guest needs *before* typing (e.g. country-code prompt
     on the phone field). Neutral ink color so it reads as helpful
     information rather than an error. */
  .field-hint {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink);
    opacity: 0.65;
    margin-top: 6px;
    line-height: 1.4;
  }
  .form-section-head {
    margin: 40px 0 20px;
    padding-top: 28px;
    border-top: 1px solid var(--cream-deep);
  }
  .form-section-head h4 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 26px;
    color: var(--burgundy-deep);
    margin-bottom: 4px;
    font-weight: 400;
  }
  .form-section-head p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--burgundy);
    opacity: 0.75;
  }
  .form-row-3 { grid-template-columns: 1.4fr 1fr 1fr; }
  @media (max-width: 600px) { .form-row-3 { grid-template-columns: 1fr; } }
  .radio-group { display: flex; gap: 0; background: white; border: 1px solid var(--cream-deep); }
  .radio-group label { flex: 1; margin: 0; padding: 16px; text-align: center; cursor: pointer; font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; color: var(--ink); transition: background 0.2s, color 0.2s; }
  .radio-group input { display: none; }
  .radio-group input:checked + label { background: var(--burgundy-deep); color: var(--cream); }

  /* Collapsible wrapper for reception-only fields (party size, children
     count, meal preference). Hidden visually when the guest declines so
     they can see those details aren't being collected. The fields remain
     in the DOM with their values intact, but the form's email-template
     logic also drops them on submit when attending !== 'yes'.

     Animation is a smooth slide-up + fade. max-height is generous (640px)
     because the contained fields total roughly 250-300px and we want
     the transition to feel natural rather than abrupt. */
  .reception-fields {
    overflow: hidden;
    max-height: 640px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 0.35s ease, opacity 0.25s ease 0.05s, transform 0.3s ease, margin 0.3s ease;
  }
  .reception-fields.is-hidden {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
  }
  /* Respect users who prefer reduced motion — skip the animation */
  @media (prefers-reduced-motion: reduce) {
    .reception-fields {
      transition: none;
    }
  }

  /* Custom checkbox for the printed-invitation opt-in. Hides the native
     checkbox and renders a square box that fills with burgundy when
     checked, with a CSS-drawn checkmark. The label is fully clickable
     and the title/help text wraps cleanly on mobile. Selectors are
     scoped under .form-checkbox-group to override the broader
     .form-group input/label rules elsewhere in the form. */
  .form-checkbox-group {
    margin-top: 4px;
  }
  .form-checkbox-group label.form-checkbox {
    /* Reset global .form-group label rules (uppercase, small font, etc.) */
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 0;
    background: white;
    border: 1px solid var(--cream-deep);
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-size: inherit;
    color: inherit;
    font-weight: normal;
    transition: border-color 0.2s, background 0.2s;
  }
  .form-checkbox-group label.form-checkbox:hover {
    border-color: var(--gold);
    background: var(--cream-paper);
  }
  /* Hide the native checkbox without removing it from the accessibility
     tree. !important is needed to defeat the global .form-group input
     rule that sets width: 100% and visible padding/border. */
  .form-checkbox-group input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0 !important;
    background: transparent !important;
  }
  .form-checkbox-group .form-checkbox-box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    background: white;
    border: 2px solid var(--burgundy);
    position: relative;
    transition: background 0.15s, border-color 0.15s;
  }
  .form-checkbox-group .form-checkbox-box::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid var(--cream);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 0.15s ease;
  }
  .form-checkbox-group input[type="checkbox"]:checked ~ .form-checkbox-box {
    background: var(--burgundy-deep);
    border-color: var(--burgundy-deep);
  }
  .form-checkbox-group input[type="checkbox"]:checked ~ .form-checkbox-box::after {
    transform: rotate(45deg) scale(1);
  }
  .form-checkbox-group input[type="checkbox"]:focus-visible ~ .form-checkbox-box {
    box-shadow: 0 0 0 3px var(--gold);
  }
  .form-checkbox-group .form-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .form-checkbox-group .form-checkbox-title {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--burgundy-deep);
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
  }
  .form-checkbox-group .form-checkbox-help {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
    opacity: 0.8;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
  }
  .submit-btn { width: 100%; margin-top: 12px; padding: 18px; background: var(--burgundy-deep); color: var(--cream); border: none; cursor: pointer; font-family: var(--sans); font-size: 14px; letter-spacing: 0.4em; text-transform: uppercase; transition: background 0.2s; }
  .submit-btn:hover { background: var(--burgundy); }
  .form-note { text-align: center; margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--burgundy); }
  .form-success { text-align: center; padding: 64px 32px; }
  .form-success h3 { font-family: var(--serif); font-style: italic; font-size: 36px; color: var(--burgundy-deep); margin-bottom: 12px; }
  .form-success p { font-size: 17px; color: var(--ink); line-height: 1.7; }
  .form-success .check { width: 56px; height: 56px; margin: 0 auto 20px; color: var(--gold-dark); }

  /* ===== FAQ ===== */
  .faq { background: var(--cream-warm); }
  .faq-list { max-width: 760px; margin: 32px auto 0; }
  .faq-item { background: var(--cream-paper); border: 1px solid var(--cream-deep); margin-bottom: 12px; overflow: hidden; }
  .faq-q {
    padding: 22px 28px; font-family: var(--serif); font-style: italic; font-size: 21px;
    color: var(--burgundy-deep); cursor: pointer; display: flex; justify-content: space-between;
    align-items: center; user-select: none; transition: background 0.2s;
  }
  .faq-q:hover { background: var(--cream); }
  .faq-q::after { content: "+"; font-family: var(--serif); font-style: normal; font-size: 28px; color: var(--gold-dark); transition: transform 0.3s; }
  .faq-item.open .faq-q::after { transform: rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding: 0 28px; }
  .faq-item.open .faq-a { max-height: 600px; padding-bottom: 22px; }
  .faq-a p { font-size: 18px; line-height: 1.75; color: var(--ink); margin-bottom: 8px; }
  .faq-a a { color: var(--burgundy); text-decoration: none; border-bottom: 1px solid var(--gold); }
  .faq-a address { font-style: normal; font-size: 17px; line-height: 1.6; color: var(--ink); margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--gold); }

  /* ===== FOOTER ===== */
  footer { background-color: var(--burgundy-deepest); color: var(--cream); padding: 64px 32px 32px; text-align: center; position: relative; z-index: 2; }
  .footer-monogram {
    display: block;
    width: clamp(220px, 32vw, 300px);
    height: auto;
    margin: 0 auto 24px;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.6));
  }
  .footer-date { font-family: var(--sans); font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--cream-deep); margin-bottom: 32px; }
  .footer-divider { width: 100px; height: 1px; background: var(--gold); margin: 0 auto 24px; }
  .footer-text { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--cream-warm); max-width: 520px; margin: 0 auto 24px; line-height: 1.7; }
  .footer-contact {
    margin-top: 24px;
    font-family: var(--sans);
    font-size: 15px;
    letter-spacing: 0.05em;
    color: var(--cream-warm);
  }
  .footer-contact a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(212,184,121,0.4); }
  .footer-igbo { font-family: var(--script); font-size: 32px; color: var(--gold-light); margin: 28px 0 4px; }
  .footer-translation { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--cream-deep); opacity: 0.7; margin-bottom: 32px; }
  .footer-tiny { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245, 235, 216, 0.7); margin-top: 48px; }

  /* ===== Animations ===== */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s, transform 0.8s; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .hero-text > * { animation: fadeUp 0.9s both; }
  .hero-greeting { animation-delay: 0.1s; }
  .hero-names { animation-delay: 0.25s; }
  .hero-divider { animation-delay: 0.5s; }
  .hero-date { animation-delay: 0.65s; }
  .hero-place { animation-delay: 0.75s; }
  .countdown { animation-delay: 0.9s; animation: fadeUp 0.9s 0.9s both; }
  .hero-photo-wrap { animation: fadeUp 1s both; }