/* =========================================================
   SEYEBEN @ 40 — Design System
   Luxury Tropical Resort × Modern Nigerian Elegance
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Primary palette */
  --ivory:        #F7F3EC;
  --ivory-deep:   #EFE7DA;
  --champagne:    #E4CfA8;
  --champagne-lt: #F0E4CE;
  --gold:         #B8912E;
  --gold-soft:    #C9A94A;
  --gold-line:    #CBB073;
  --royal:        #14306B;   /* Seye's signature royal blue */
  --royal-deep:   #0C1F49;
  --sapphire:     #1E4FA0;
  --navy:         #0A1733;

  /* Neutrals / text */
  --ink:          #23201A;
  --ink-soft:     #4A453B;
  --muted:        #857C6C;
  --line:         #E2D8C6;
  --surface:      #FFFFFF;
  --surface-warm: #FBF8F2;

  /* Accents */
  --greenery:     #5C6E52;
  --wood:         #9C7A4E;

  /* Type */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Poppins", "Montserrat", -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* Layout */
  --container: 1160px;
  --container-narrow: 820px;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 2px 12px rgba(20,48,107,.06);
  --shadow-md: 0 12px 40px rgba(12,31,73,.12);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.65;
  font-size: 17px;
  font-weight: 300;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--royal); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--gold); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); line-height: 1.15; margin: 0 0 var(--s-4); letter-spacing: .01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.15rem; }
p  { margin: 0 0 var(--s-4); color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s-3);
  display: inline-block;
}
.script-accent { font-style: italic; color: var(--gold); }
.lead { font-size: 1.2rem; color: var(--ink-soft); font-weight: 300; }
.text-center { text-align: center; }

/* Gold divider */
.divider { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: var(--s-5) 0; }
.divider::before, .divider::after { content: ""; height: 1px; width: 54px; background: var(--gold-line); opacity: .7; }
.divider span { color: var(--gold); font-size: 1rem; letter-spacing: .2em; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.narrow { max-width: var(--container-narrow); }
section { padding: var(--s-9) 0; }
.section-warm { background: var(--surface-warm); }
.section-ivory { background: var(--ivory-deep); }
.section-royal { background: var(--royal-deep); color: var(--ivory); }
.section-royal h1, .section-royal h2, .section-royal h3 { color: #fff; }
.section-royal p { color: rgba(247,243,236,.82); }
.section-royal .eyebrow { color: var(--champagne); }

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: .82rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 1rem 2.1rem; border-radius: var(--radius);
  cursor: pointer; border: 1px solid transparent; transition: all .3s var(--ease);
}
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold:hover { background: #a67f24; color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-royal { background: var(--royal); color: #fff; }
.btn-royal:hover { background: var(--royal-deep); color:#fff; transform: translateY(-2px); }
.btn-outline { background: transparent; border-color: var(--gold-line); color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: #fff; }
.btn-ghost-light { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--royal-deep); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding: var(--s-4) 0;
}
.site-header.scrolled { background: rgba(247,243,236,.96); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); padding: var(--s-3) 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand .brand-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.brand .brand-sub { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.site-header:not(.scrolled).header-over-hero .brand-name { color: #fff; }
.site-header:not(.scrolled).header-over-hero .nav-links a { color: rgba(255,255,255,.9); }
.site-header:not(.scrolled).header-over-hero .nav-toggle span { background:#fff; }

.nav-links { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: .82rem; letter-spacing: .05em; color: var(--ink-soft); font-weight: 400; position: relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background: var(--gold); transition: width .3s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-links a.active::after, .nav-links a:hover::after { width:100%; }
.nav-links .has-menu { position: relative; }
.nav-dropdown { list-style:none; margin:0; padding:.5rem 0; position:absolute; top:150%; left:50%; transform:translateX(-50%); background:#fff; min-width:210px; box-shadow: var(--shadow-md); border-radius: var(--radius); opacity:0; visibility:hidden; transition: all .25s var(--ease); }
.nav-links .has-menu:hover .nav-dropdown { opacity:1; visibility:visible; top:130%; }
.nav-dropdown li a { display:block; padding:.55rem 1.3rem; font-size:.8rem; color:var(--ink-soft); }
.nav-dropdown li a::after { display:none; }
.nav-dropdown li a:hover { background: var(--surface-warm); color: var(--gold); }
.nav-cta { padding:.6rem 1.3rem !important; }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span { width:26px; height:2px; background: var(--ink); transition: all .3s var(--ease); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,23,51,.55) 0%, rgba(12,31,73,.45) 45%, rgba(10,23,51,.75) 100%),
    radial-gradient(120% 90% at 70% 20%, #1E4FA0 0%, #14306B 40%, #0A1733 100%);
  background-size: cover; background-position: center;
}
.hero-bg::after { /* subtle palm silhouette texture placeholder */
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 12% 88%, rgba(92,110,82,.35), transparent 30%),
                    radial-gradient(circle at 88% 90%, rgba(184,145,46,.18), transparent 32%);
}
.hero-content { position: relative; z-index: 2; padding: var(--s-6); max-width: 900px; }
.hero .eyebrow { color: var(--champagne); }
.hero h1 { color:#fff; font-size: clamp(3rem, 9vw, 6rem); margin-bottom: var(--s-3); text-shadow: 0 4px 30px rgba(0,0,0,.3); }
.hero .hero-tag { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem,3vw,1.9rem); color: var(--champagne); margin-bottom: var(--s-5); }
.hero-meta { display:flex; gap: var(--s-5); justify-content:center; flex-wrap:wrap; margin: var(--s-6) 0; font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.9); }
.hero-meta span { display:flex; align-items:center; gap:.5rem; }
.hero-scroll { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.7); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; }
.hero-scroll::after { content:""; display:block; width:1px; height:34px; background:rgba(255,255,255,.5); margin:8px auto 0; animation: scrollpulse 2s infinite; }
@keyframes scrollpulse { 0%,100%{opacity:.3;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1)} }

/* Page banner (interior pages) */
.page-banner { position:relative; padding: calc(var(--s-10) + 40px) 0 var(--s-8); text-align:center; color:#fff; overflow:hidden; }
.page-banner .hero-bg { background:
    linear-gradient(180deg, rgba(10,23,51,.6), rgba(12,31,73,.72)),
    radial-gradient(120% 120% at 60% 0%, #1E4FA0 0%, #14306B 45%, #0A1733 100%); }
.page-banner-content { position:relative; z-index:2; }
.page-banner h1 { color:#fff; margin-bottom:.4rem; }
.page-banner .eyebrow { color: var(--champagne); }
.page-banner p { color: rgba(247,243,236,.85); max-width:620px; margin:0 auto; }

/* Breadcrumb strip */
.breadcrumb { background: var(--surface-warm); border-bottom:1px solid var(--line); padding:.9rem 0; font-size:.78rem; letter-spacing:.08em; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold); }

/* ---------- Countdown ---------- */
.countdown { display:flex; gap: var(--s-5); justify-content:center; flex-wrap:wrap; }
.countdown .unit { text-align:center; min-width:92px; }
.countdown .num { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,3.4rem); color: var(--gold); line-height:1; }
.section-royal .countdown .num { color: var(--champagne); }
.countdown .lbl { font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color: var(--muted); margin-top:.5rem; }
.section-royal .countdown .lbl { color: rgba(247,243,236,.7); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  height:100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card .card-icon { font-size:1.6rem; color: var(--gold); margin-bottom: var(--s-3); }
.card h3 { margin-bottom: var(--s-2); }
.card p { font-size:.95rem; margin-bottom: var(--s-3); }
.card-link { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color: var(--gold); }
.card-link::after { content:" →"; }

/* Quick link tiles */
.quicklinks { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); }
.ql-tile { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding: var(--s-6) var(--s-4); background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); transition:all .3s var(--ease); }
.ql-tile:hover { border-color: var(--gold-line); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ql-tile .ql-ico { font-size:1.8rem; }
.ql-tile .ql-name { font-family:var(--font-display); font-size:1.15rem; color:var(--ink); }
.ql-tile .ql-sub { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* Split feature (image + text) */
.split { display:grid; grid-template-columns:1fr 1fr; gap: var(--s-8); align-items:center; }
.split.reverse .split-media { order:2; }

/* Image placeholder */
.img-ph {
  position:relative; border-radius: var(--radius-lg); overflow:hidden; min-height:340px;
  background: linear-gradient(135deg, var(--champagne-lt), var(--ivory-deep));
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--line);
}
.img-ph::before { content:""; position:absolute; inset:12px; border:1px solid var(--gold-line); opacity:.5; border-radius: var(--radius); }
.img-ph .ph-label { position:relative; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); padding:.4rem .9rem; }
.img-ph .ph-label small { display:block; color: var(--muted); letter-spacing:.05em; text-transform:none; font-size:.72rem; margin-top:.3rem; }
.img-ph.tall { min-height:480px; }
.img-ph.royal { background: linear-gradient(135deg, var(--sapphire), var(--royal-deep)); }
.img-ph.royal .ph-label { color: var(--champagne); }
.img-ph.royal .ph-label small { color: rgba(255,255,255,.6); }

/* ---------- Itinerary / timeline ---------- */
.itin { position:relative; max-width:760px; margin:0 auto; }
.itin::before { content:""; position:absolute; left:20px; top:8px; bottom:8px; width:2px; background: var(--gold-line); opacity:.5; }
.itin-item { position:relative; padding:0 0 var(--s-7) 64px; }
.itin-item::before { content:""; position:absolute; left:12px; top:4px; width:18px; height:18px; border-radius:50%; background:var(--gold); border:3px solid var(--ivory); }
.itin-day { font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color: var(--gold); }
.itin-item h3 { margin:.3rem 0 .4rem; }

/* ---------- Feature list / chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap:.6rem; margin: var(--s-3) 0; }
.chip { font-size:.78rem; letter-spacing:.04em; padding:.4rem 1rem; border-radius:999px; background: var(--ivory-deep); color: var(--ink-soft); border:1px solid var(--line); }
.chip.gold { background: var(--champagne-lt); border-color: var(--gold-line); color: #7a5f18; }
.chip.royal { background: rgba(20,48,107,.08); border-color: rgba(20,48,107,.25); color: var(--royal); }

.ticklist { list-style:none; padding:0; margin:0; }
.ticklist li { position:relative; padding:.4rem 0 .4rem 1.8rem; color:var(--ink-soft); font-size:.98rem; border-bottom:1px solid var(--line); }
.ticklist li:last-child { border-bottom:none; }
.ticklist li::before { content:"◆"; position:absolute; left:0; color:var(--gold); font-size:.7rem; top:.7rem; }

/* Palette swatches */
.swatches { display:flex; flex-wrap:wrap; gap:var(--s-4); }
.swatch { text-align:center; }
.swatch .dot { width:66px; height:66px; border-radius:50%; box-shadow: var(--shadow-sm); border:1px solid rgba(0,0,0,.05); margin:0 auto .5rem; }
.swatch .nm { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---------- Dress code blocks ---------- */
.dress-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.dress-card .dc-head { padding:var(--s-5) var(--s-6); background: var(--royal-deep); color:#fff; }
.dress-card .dc-head .eyebrow { color: var(--champagne); }
.dress-card .dc-head h3 { color:#fff; margin:0; }
.dress-card .dc-body { padding: var(--s-6); }

/* ---------- Accordion (FAQ) ---------- */
.accordion { max-width:820px; margin:0 auto; }
.acc-item { border-bottom:1px solid var(--line); }
.acc-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:1.4rem 2.5rem 1.4rem 0; font-family:var(--font-display); font-size:1.15rem; color:var(--ink); position:relative; }
.acc-q::after { content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:1.4rem; transition:transform .3s var(--ease); }
.acc-item.open .acc-q::after { content:"–"; }
.acc-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.acc-a-inner { padding:0 0 1.4rem; color:var(--ink-soft); }

/* ---------- Callouts ---------- */
.callout { border-left:3px solid var(--gold); background: var(--champagne-lt); padding: var(--s-5) var(--s-6); border-radius: var(--radius); margin: var(--s-5) 0; }
.callout h4 { margin:0 0 .4rem; color:#7a5f18; }
.callout p { margin:0; color:#6a5a2f; }
.secret { border-left-color: var(--royal); background: rgba(20,48,107,.06); }
.secret h4 { color: var(--royal); }
.secret p { color: var(--royal-deep); }
.secret .tag { display:inline-block; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; background:var(--royal); padding:.2rem .6rem; border-radius:999px; margin-bottom:.5rem; }

/* Info table */
.info-table { width:100%; border-collapse:collapse; margin: var(--s-4) 0; }
.info-table th, .info-table td { text-align:left; padding:.9rem 1rem; border-bottom:1px solid var(--line); font-size:.95rem; }
.info-table th { font-family:var(--font-body); font-weight:500; color:var(--ink); background:var(--surface-warm); width:38%; }
.info-table td { color:var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(247,243,236,.75); padding: var(--s-8) 0 var(--s-5); }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); padding-bottom: var(--s-6); border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .brand-name { font-family:var(--font-display); font-size:1.6rem; color:#fff; }
.footer-brand .brand-sub { font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--champagne); margin-top:.4rem; }
.footer-col h4 { color:#fff; font-family:var(--font-body); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:var(--s-4); }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom:.6rem; }
.footer-col a { color: rgba(247,243,236,.7); font-size:.9rem; }
.footer-col a:hover { color: var(--champagne); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top:var(--s-5); font-size:.78rem; color:rgba(247,243,236,.5); }

/* ---------- Experiences catalog ---------- */
.cat-nav { position: sticky; top: 64px; z-index: 40; background: rgba(247,243,236,.95); backdrop-filter: blur(8px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cat-nav ul { list-style:none; margin:0; padding:.7rem 0; display:flex; gap:1.4rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cat-nav a { white-space:nowrap; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:400; }
.cat-nav a:hover { color:var(--gold); }

.exp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.exp-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s-5); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.exp-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.exp-card h3 { font-size:1.25rem; margin-bottom:.3rem; }
.exp-card .exp-desc { font-size:.92rem; color:var(--ink-soft); margin-bottom:var(--s-3); flex-grow:1; }
.exp-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:var(--s-3); }
.exp-tag { font-size:.68rem; letter-spacing:.05em; padding:.25rem .6rem; border-radius:999px; background:var(--ivory-deep); color:var(--muted); }
.exp-tag.adults { background:rgba(20,48,107,.08); color:var(--royal); }
.exp-tag.family { background:var(--champagne-lt); color:#7a5f18; }
.exp-price { display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid var(--line); padding-top:var(--s-3); margin-top:auto; gap:.5rem; flex-wrap:wrap; }
.exp-price .amt { font-family:var(--font-display); font-size:1.15rem; color:var(--gold); }
.exp-price .per { font-size:.72rem; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
.exp-when { font-size:.78rem; color:var(--muted); margin-top:.4rem; }

.cat-head { display:flex; align-items:center; gap:1rem; margin-bottom:var(--s-2); }
.cat-head .cat-ico { font-size:1.8rem; }
.price-note { font-size:.8rem; color:var(--muted); font-style:italic; }
.pdf-link { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--royal); }
.pdf-link::before { content:"⤓"; }

@media (max-width: 960px){ .exp-grid { grid-template-columns:repeat(2,1fr); } .cat-nav { top:56px; } }
@media (max-width: 760px){ .exp-grid { grid-template-columns:1fr; } }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.center-narrow { max-width:720px; margin-left:auto; margin-right:auto; }
.stack-lg > * + * { margin-top: var(--s-5); }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .split, .footer-top { grid-template-columns:1fr; gap:var(--s-6); }
  .split.reverse .split-media { order:0; }
  .grid-3, .grid-4 { grid-template-columns:repeat(2,1fr); }
  .quicklinks { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px){
  body { font-size:16px; }
  section { padding: var(--s-8) 0; }
  .nav-links {
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:var(--ivory);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding: 6rem var(--s-6) var(--s-6); gap:var(--s-4); transform:translateX(100%);
    transition:transform .35s var(--ease); box-shadow:var(--shadow-md); overflow-y:auto;
  }
  .nav-links.open { transform:none; }
  .nav-links a { color:var(--ink-soft) !important; font-size:1rem; }
  .nav-dropdown { position:static; opacity:1; visibility:visible; box-shadow:none; transform:none; padding-left:.5rem; min-width:auto; }
  .nav-links .has-menu:hover .nav-dropdown { top:auto; }
  .nav-toggle { display:flex; z-index:110; }
  .site-header:not(.scrolled).header-over-hero .nav-links a { color:var(--ink-soft) !important; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns:1fr; }
  .quicklinks { grid-template-columns:repeat(2,1fr); }
  .hero-meta { gap:var(--s-3); font-size:.72rem; }
}

/* =========================================================
   Wired-in brand images (hero, logo, header on dark)
   ========================================================= */

/* Home hero background photo */
.hero .hero-bg{
  background:
    linear-gradient(180deg, rgba(10,23,51,.50) 0%, rgba(12,31,73,.42) 45%, rgba(10,23,51,.74) 100%),
    url('img/hero-home.webp') center/cover no-repeat;
}
@media (max-width:760px){
  .hero .hero-bg{
    background:
      linear-gradient(180deg, rgba(10,23,51,.50), rgba(10,23,51,.74)),
      url('img/hero-home-mobile.webp') center/cover no-repeat;
  }
}

/* Logo in the nav */
.brand-logo{ height:104px; width:auto; display:block; transition:height .35s var(--ease); }
.site-header.scrolled .brand-logo{ height:76px; }

/* Header sits over dark banners/hero on every page → white nav + white logo,
   with a translucent navy bar once scrolled */
.nav-links > li > a{ color:rgba(255,255,255,.92); }
.nav-links a:hover, .nav-links a.active{ color:var(--champagne); }
.nav-toggle span{ background:#fff; }
.site-header.scrolled{ background:rgba(10,23,51,.92); box-shadow:0 2px 22px rgba(0,0,0,.28); backdrop-filter:blur(8px); }
.site-header.scrolled .nav-links > li > a{ color:rgba(255,255,255,.92); }
.site-header.scrolled .nav-links a:hover, .site-header.scrolled .nav-links a.active{ color:var(--champagne); }

/* Desktop dropdown stays a light panel with dark links */
.nav-dropdown li a{ color:var(--ink-soft); }

/* Footer logo */
.footer-logo{ height:120px; width:auto; margin-bottom:1rem; display:block; }

/* Mobile slide-in panel: dark to match the white logo/nav */
@media (max-width:760px){
  .nav-links{ background:var(--royal-deep); }
  .nav-links > li > a{ color:rgba(255,255,255,.92) !important; }
  .nav-dropdown li a{ color:rgba(255,255,255,.8); }
  .site-header:not(.scrolled).header-over-hero .nav-links > li > a{ color:rgba(255,255,255,.92) !important; }
  .brand-logo{ height:68px; }
  .site-header.scrolled .brand-logo{ height:58px; }
}

/* =========================================================
   Homepage "Guest Forms" section
   ========================================================= */
section[id]{ scroll-margin-top:96px; }   /* so #forms etc. clear the fixed header */

#forms .form-card{
  position:relative; text-align:center; display:flex; flex-direction:column;
  align-items:center; padding-top:2.6rem; border-color:var(--gold-line);
}
#forms .form-card .card-icon{ font-size:2rem; }
#forms .form-card p{ font-size:.95rem; }
.form-num{
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  width:40px; height:40px; border-radius:50%; background:var(--gold); color:#fff;
  font-family:var(--font-display); font-size:1.2rem; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--shadow-sm);
}
.deadline-pill{
  display:inline-block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:#7a5f18; background:var(--champagne-lt); border:1px solid var(--gold-line);
  padding:.3rem .8rem; border-radius:999px; margin:.2rem 0 .2rem;
}
.form-btn{ margin-top:1.1rem; }

/* The action band gets a soft gold top accent to stand out */
#forms{ border-top:3px solid var(--gold); }

/* Event-planner credit in the footer */
.footer-planner{ letter-spacing:.04em; }
.planner-name{ color:var(--champagne); font-weight:500; letter-spacing:.06em; }
a.planner-name:hover{ color:#fff; }
@media (max-width:760px){ .footer-bottom{ flex-direction:column; gap:.6rem; text-align:center; } }

/* Itinerary sub-details on their own lines */
.itin-meta{ font-size:.9rem; color:var(--muted); margin:.4rem 0 0; line-height:1.9; }
.itin-meta .k{ color:var(--ink-soft); font-weight:500; }
.itin-meta a{ color:var(--gold); }

/* =========================================================
   Alignment fixes: payment cards, form cards, travel layout
   ========================================================= */

/* Payment detail rows — no fixed column widths, so nothing wraps awkwardly */
.pay-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.75rem 0; border-bottom:1px solid var(--line); font-size:.95rem;
}
.pay-row:last-child{ border-bottom:none; }
.pay-k{ color:var(--ink); font-weight:500; white-space:nowrap; }
.pay-v{ color:var(--ink-soft); text-align:right; overflow-wrap:anywhere; }
.pay-card .exp-when{ margin-top:.6rem; }

/* Guest-form cards: pin the deadline pill + button to the bottom so all three line up */
#forms .form-card p{ margin-bottom:1rem; }
#forms .deadline-pill{
  margin-top:auto; display:flex; align-items:center; justify-content:center;
  min-height:46px; text-align:center; line-height:1.35;
}
#forms .form-btn{ margin-top:1rem; }

/* Let a placeholder image fill its column height */
.img-ph.fill{ height:100%; }

/* Payment email values kept on one line */
.pay-v.email{ white-space:nowrap; font-size:.82rem; letter-spacing:-.01em; }

/* Fix: keep desktop dropdown items dark on the white panel (the over-hero rule
   was turning ALL nav links white, making dropdown text invisible on the homepage) */
@media (min-width:761px){
  .site-header:not(.scrolled).header-over-hero .nav-dropdown li a,
  .site-header.scrolled .nav-dropdown li a,
  .nav-dropdown li a { color: var(--ink-soft); }
  .nav-dropdown li a:hover { color: var(--gold); }
}