/* ============================================================
   MONTU'S WESTERN CANADA 2027 — SHARED STYLESHEET
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Nunito:ital,wght@0,200..900;1,200..900&family=Dancing+Script:wght@400..700&display=swap');

:root {
    --primary: #1B4965;
    --primary-light: #5FA8D3;
    --secondary: #62B6CB;
    --accent: #FFB4A2;
    --accent-warm: #FF8C78;
    --blush: #FFCDB2;
    --lavender: #C9B8E8;
    --sage: #B5D5C5;
    --dark: #2C3A47;
    --glass-border: rgba(255,255,255,0.35);
    --glass-solid: rgba(255,255,255,0.88);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Nunito', sans-serif;
    color: var(--dark);
    overflow-x: hidden;
    background-color: #0a0e1a;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ---- PARTICLES ---- */
#particles {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.particle {
    position: absolute; border-radius: 50%; opacity: 0;
    animation: floatParticle linear infinite;
}
@keyframes floatParticle {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    10%  { opacity: 0.55; }
    90%  { opacity: 0.25; }
    100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* ---- FLOATING NAV ---- */
nav.float-nav {
    position: fixed; top: 18px; left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(20, 40, 62, 0.60);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50px;
    padding: 9px 22px;
    display: flex; gap: 4px; align-items: center; flex-wrap: nowrap;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: background 0.4s ease, box-shadow 0.4s ease;
    white-space: nowrap;
}
nav.float-nav.scrolled {
    background: rgba(15, 30, 50, 0.88);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
nav.float-nav a {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 30px;
    transition: all 0.3s ease;
    white-space: nowrap;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
nav.float-nav a:hover { background: rgba(255,255,255,0.16); color: #fff; }
nav.float-nav a.active { background: rgba(255,255,255,0.18); color: #fff; }
nav.float-nav a.nav-rsvp {
    background: rgba(255,140,120,0.28);
    border: 1px solid rgba(255,140,120,0.4);
    color: #fff;
}
nav.float-nav a.nav-rsvp:hover { background: rgba(255,140,120,0.45); }
nav.float-nav .nav-logo {
    font-family: 'Dancing Script', cursive;
    font-size: 1.05rem; font-weight: 700;
    color: var(--blush);
    margin-right: 6px;
    border-right: 1px solid rgba(255,255,255,0.18);
    padding-right: 12px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

/* ---- PAGE HERO (subpages use this) ---- */
.page-hero {
    position: relative;
    height: 100vh; min-height: 500px;
    display: flex; align-items: flex-end;
}
.page-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,14,26,0.2) 0%, rgba(10,14,26,0.65) 100%);
}
.page-hero-overlay-color {
    position: absolute; inset: 0;
}
.page-hero-content {
    position: relative; z-index: 10;
    color: #fff; padding: 0 50px 45px;
    max-width: 900px;
}
.page-hero-content .eyebrow {
    font-family: 'Dancing Script', cursive;
    font-size: 1.2rem; color: var(--blush);
    margin-bottom: 6px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.page-hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900; line-height: 1.15;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
    margin-bottom: 8px;
}
.page-hero-content p {
    font-size: 1rem; opacity: 0.88; line-height: 1.7;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    max-width: 600px;
}

/* ---- SITE BODY WRAPPER ---- */
.site-body {
    background: transparent;
    position: relative; z-index: 1;
}
.container {
    max-width: 1200px; margin: 0 auto;
    padding: 0 24px 80px;
}

/* ---- SECTIONS ---- */
section {
    background: rgba(255,255,255,0.80);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 28px;
    padding: 44px;
    margin-bottom: 44px;
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow: 0 16px 50px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
    position: relative; overflow: hidden;
    opacity: 0; transform: translateY(38px);
    transition: opacity 0.65s ease, transform 0.65s ease, box-shadow 0.3s ease;
}
section.visible { opacity: 1; transform: translateY(0); }
section::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    border-radius: 28px 28px 0 0;
}
section:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8); }

/* Section accent bars */
section.accent-sunrise::before  { background: linear-gradient(90deg,#FFB4A2,#FFCDB2,#C9B8E8); }
section.accent-sky::before      { background: linear-gradient(90deg,#5FA8D3,#62B6CB,#a6c1ee); }
section.accent-teal::before     { background: linear-gradient(90deg,#1B4965,#5FA8D3); }
section.accent-lavender::before { background: linear-gradient(90deg,#C9B8E8,#a18cd1,#5FA8D3); }
section.accent-warm::before     { background: linear-gradient(90deg,#FF8C78,#FFB4A2,#C9B8E8); }
section.accent-night::before    { background: linear-gradient(90deg,#62B6CB,#a18cd1,#FFCDB2); }

/* Section bg tints */
section.bg-sunrise  { background: linear-gradient(135deg,rgba(255,237,213,0.88) 0%,rgba(255,220,200,0.65) 40%,rgba(255,255,255,0.95) 100%) !important; }
section.bg-sky      { background: linear-gradient(135deg,rgba(232,244,252,0.88) 0%,rgba(214,236,250,0.65) 40%,rgba(255,255,255,0.95) 100%) !important; }
section.bg-teal     { background: linear-gradient(135deg,rgba(220,240,248,0.88) 0%,rgba(200,232,245,0.65) 40%,rgba(255,255,255,0.95) 100%) !important; }
section.bg-lavender { background: linear-gradient(135deg,rgba(245,240,255,0.88) 0%,rgba(235,228,255,0.65) 40%,rgba(255,255,255,0.95) 100%) !important; }
section.bg-warm     { background: linear-gradient(135deg,rgba(255,237,213,0.80) 0%,rgba(255,205,178,0.50) 30%,rgba(230,220,255,0.45) 70%,rgba(255,255,255,0.95) 100%) !important; }
section.bg-night    { background: linear-gradient(135deg,#0a0e1a,#1a2040,#0d1a2e) !important; color: #fff !important; border: 1px solid rgba(98,182,203,0.18) !important; }
section.bg-night::before { background: none !important; }
section.bg-night h2.section-title  { color: var(--blush) !important; }
section.bg-night h3.subsection-title { color: var(--secondary) !important; }
section.bg-night p, section.bg-night li { color: rgba(255,255,255,0.82) !important; }
section.bg-night p b, section.bg-night li b { color: var(--blush) !important; }
section.bg-night .section-subtitle { color: rgba(255,255,255,0.4) !important; }

/* ---- TYPOGRAPHY ---- */
h2.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem; color: var(--primary);
    font-weight: 800; margin-bottom: 6px;
    display: flex; align-items: center; gap: 12px;
}
.section-subtitle {
    font-size: 0.82rem; color: #888;
    font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(95,168,211,0.2);
}
h3.subsection-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem; color: var(--primary-light);
    font-weight: 700; margin: 30px 0 14px;
}
p.body-lead { font-size: 1.03rem; color: #444; line-height: 1.85; margin-bottom: 22px; }

/* ---- BUTTONS ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; padding: 12px 26px; border-radius: 40px;
    font-family: 'Nunito', sans-serif; font-weight: 800;
    font-size: 0.88rem; text-decoration: none; cursor: pointer;
    border: none; transition: all 0.32s cubic-bezier(0.165,0.84,0.44,1);
    letter-spacing: 0.3px;
}
.btn-primary { background: linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; box-shadow:0 6px 20px rgba(27,73,101,0.3); }
.btn-primary:hover  { transform:translateY(-3px); box-shadow:0 12px 30px rgba(27,73,101,0.4); color:#fff; }
.btn-warm    { background: linear-gradient(135deg,var(--accent-warm),var(--accent)); color:#fff; box-shadow:0 6px 20px rgba(255,140,120,0.35); }
.btn-warm:hover     { transform:translateY(-3px); box-shadow:0 12px 30px rgba(255,140,120,0.5); color:#fff; }
.btn-teal    { background: linear-gradient(135deg,var(--secondary),#4A9CAE); color:#fff; box-shadow:0 6px 20px rgba(98,182,203,0.3); }
.btn-teal:hover     { transform:translateY(-3px); box-shadow:0 12px 30px rgba(98,182,203,0.45); color:#fff; }
.btn-glass   { background:rgba(255,255,255,0.18); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.4); color:#fff; }
.btn-glass:hover    { background:rgba(255,255,255,0.32); transform:translateY(-3px); color:#fff; }
.btn-outline { background:transparent; border:2px solid var(--primary-light); color:var(--primary); }
.btn-outline:hover  { background:var(--primary-light); color:#fff; transform:translateY(-2px); }

/* ---- TABLES ---- */
table { width:100%; border-collapse:separate; border-spacing:0; margin:22px 0; font-size:0.93rem; border-radius:18px; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,0.04); }
th { background:linear-gradient(135deg,rgba(27,73,101,0.9),rgba(95,168,211,0.88)); color:#fff; text-align:left; padding:16px 20px; font-weight:700; font-family:'Playfair Display',serif; font-size:0.98rem; }
td { padding:14px 20px; vertical-align:middle; border-bottom:1px solid rgba(255,255,255,0.6); background:rgba(255,255,255,0.55); transition:background 0.2s; }
tr:last-child td { border-bottom:none; }
tr:nth-child(even) td { background:rgba(255,255,255,0.78); }
tr:hover td { background:rgba(255,255,255,0.95); }

/* ---- LISTS ---- */
ul.blueprint-list { list-style:none; margin:16px 0; }
ul.blueprint-list li { position:relative; padding-left:30px; margin-bottom:14px; font-size:0.98rem; line-height:1.75; }
ul.blueprint-list li::before { content:"✦"; position:absolute; left:0; color:var(--accent-warm); font-size:1rem; top:3px; }

/* ---- TWO COLUMN ---- */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:32px; }

/* ---- COUNTDOWN STRIP ---- */
.countdown-strip {
    background: linear-gradient(90deg,#1B4965,#5FA8D3,#62B6CB,#FFB4A2,#C9B8E8,#1B4965);
    background-size:300% 100%; animation:gradientFlow 8s linear infinite;
    padding:24px 20px; text-align:center; color:#fff; position:relative; z-index:50;
}
@keyframes gradientFlow { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
.countdown-strip h3 { font-family:'Dancing Script',cursive; font-size:1.2rem; margin-bottom:14px; opacity:0.92; }
.countdown-units { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.countdown-unit { background:rgba(255,255,255,0.18); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:10px 18px; min-width:72px; }
.countdown-unit .num { font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:900; display:block; line-height:1; }
.countdown-unit .label { font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; opacity:0.8; }

/* ---- STICKY CTA ---- */
.sticky-cta { position:fixed; bottom:22px; right:22px; z-index:999; animation:slideInRight 0.5s ease 3s both; }
@keyframes slideInRight { from{transform:translateX(120px);opacity:0} to{transform:translateX(0);opacity:1} }
.sticky-cta a {
    display:flex; align-items:center; gap:7px;
    background:linear-gradient(135deg,var(--accent-warm),var(--accent));
    color:#fff; font-family:'Nunito',sans-serif; font-weight:900;
    font-size:0.9rem; text-decoration:none; padding:13px 22px;
    border-radius:40px; box-shadow:0 8px 28px rgba(255,140,120,0.45);
    border:2px solid rgba(255,255,255,0.3); transition:all 0.3s ease; white-space:nowrap;
}
.sticky-cta a:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 14px 40px rgba(255,140,120,0.6); color:#fff; }

/* ---- AURORA BG (for night section) ---- */
.aurora-bg-anim { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:28px; }
.aurora-wave { position:absolute; top:0; left:0; right:0; height:220px; animation:auroraWave 8s ease-in-out infinite alternate; }
.aurora-wave-1 { background:linear-gradient(to bottom,rgba(98,182,203,0.12),transparent); }
.aurora-wave-2 { height:180px; background:linear-gradient(to bottom,rgba(201,184,232,0.08),transparent); animation:auroraWave 11s ease-in-out infinite alternate-reverse; }
@keyframes auroraWave { 0%{transform:skewX(-5deg) translateX(-3%);opacity:0.5} 50%{opacity:1} 100%{transform:skewX(5deg) translateX(3%);opacity:0.7} }
.star-field {
    position:absolute; inset:0;
    background-image:
        radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,0.85) 0%,transparent 100%),
        radial-gradient(1px 1px at 30% 60%,rgba(255,255,255,0.55) 0%,transparent 100%),
        radial-gradient(1px 1px at 55% 15%,rgba(255,255,255,0.75) 0%,transparent 100%),
        radial-gradient(1px 1px at 75% 40%,rgba(255,255,255,0.65) 0%,transparent 100%),
        radial-gradient(1px 1px at 85% 80%,rgba(255,255,255,0.45) 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 20% 85%,rgba(255,255,255,0.75) 0%,transparent 100%),
        radial-gradient(1px 1px at 65% 70%,rgba(255,255,255,0.55) 0%,transparent 100%),
        radial-gradient(1px 1px at 90% 10%,rgba(255,255,255,0.85) 0%,transparent 100%),
        radial-gradient(1px 1px at 40% 45%,rgba(255,255,255,0.35) 0%,transparent 100%),
        radial-gradient(1px 1px at 15% 50%,rgba(255,255,255,0.6) 0%,transparent 100%),
        radial-gradient(1px 1px at 70% 25%,rgba(255,255,255,0.5) 0%,transparent 100%);
}

/* ---- FOOTER ---- */
footer {
    text-align:center; padding:60px 20px;
    background:linear-gradient(135deg,rgba(27,73,101,0.92),rgba(95,168,211,0.85));
    color:rgba(255,255,255,0.88); position:relative; overflow:hidden;
}
footer::before { content:''; position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=50&auto=format&fit=crop') center/cover; opacity:0.07; }
footer>*{position:relative;z-index:1;}
footer h3 { font-family:'Dancing Script',cursive; font-size:2.2rem; color:var(--blush); margin-bottom:6px; }
footer p { font-size:0.88rem; opacity:0.75; margin-top:5px; }
footer .footer-nav { display:flex; gap:12px; justify-content:center; margin:24px 0; flex-wrap:wrap; }

/* ---- ALLOCATION CARDS ---- */
.allocation-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin:26px 0; }
.allocation-card { background:rgba(255,255,255,0.82); backdrop-filter:blur(10px); border-radius:20px; padding:24px 16px; text-align:center; border:1px solid rgba(255,255,255,0.7); box-shadow:0 8px 25px rgba(0,0,0,0.04); transition:transform 0.3s ease; position:relative; overflow:hidden; }
.allocation-card::before { content:''; position:absolute; top:0;left:0;right:0; height:4px; }
.allocation-card:hover { transform:translateY(-5px); }
.allocation-card.camp::before  { background:linear-gradient(90deg,var(--primary),var(--primary-light)); }
.allocation-card.trans::before { background:linear-gradient(90deg,var(--secondary),#4A9CAE); }
.allocation-card.food::before  { background:linear-gradient(90deg,var(--accent-warm),var(--accent)); }
.allocation-card.act::before   { background:linear-gradient(90deg,var(--lavender),#a18cd1); }
.allocation-card.buffer::before{ background:linear-gradient(90deg,#A0AEC0,#CBD5E0); }
.allocation-card .percent { font-family:'Playfair Display',serif; font-size:2.3rem; font-weight:900; color:var(--primary-light); line-height:1; margin-bottom:5px; }
.allocation-card h4 { font-size:0.85rem; color:var(--dark); font-weight:800; margin-bottom:5px; }
.allocation-card .range { font-size:0.82rem; color:#666; font-weight:700; }

/* ---- MILESTONE TIMELINE ---- */
.milestone-strip { display:flex; gap:0; margin:28px 0; position:relative; overflow-x:auto; padding-bottom:8px; }
.milestone-strip::before { content:''; position:absolute; top:26px; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary-light),var(--accent),var(--lavender)); z-index:0; }
.milestone { flex:1; min-width:130px; text-align:center; position:relative; z-index:1; padding:0 8px; }
.milestone-dot { width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--primary-light); margin:0 auto 9px; position:relative; z-index:2; box-shadow:0 0 0 4px rgba(95,168,211,0.15); transition:transform 0.3s; }
.milestone.now .milestone-dot { background:var(--accent-warm); border-color:var(--accent-warm); box-shadow:0 0 0 6px rgba(255,140,120,0.2); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 6px rgba(255,140,120,0.2)} 50%{box-shadow:0 0 0 10px rgba(255,140,120,0.05)} }
.milestone-date { font-size:0.68rem; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; }
.milestone-label { font-size:0.76rem; color:#555; font-weight:600; line-height:1.3; }

/* ---- TABS ---- */
.tabs { display:flex; justify-content:center; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
.tab-btn { padding:12px 26px; background:rgba(255,255,255,0.62); backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,0.7); color:var(--primary); font-family:'Nunito',sans-serif; font-weight:800; font-size:0.9rem; border-radius:40px; cursor:pointer; transition:all 0.32s cubic-bezier(0.165,0.84,0.44,1); }
.tab-btn:hover { background:rgba(255,255,255,0.95); transform:translateY(-2px); }
.tab-btn.active { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; border-color:transparent; box-shadow:0 8px 22px rgba(27,73,101,0.28); }
.tab-content { display:none; }
.tab-content.active { display:block; animation:fadeUpIn 0.45s cubic-bezier(0.165,0.84,0.44,1) forwards; }
@keyframes fadeUpIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ---- SCENARIO BOX ---- */
.scenario-header { background:rgba(255,255,255,0.72); backdrop-filter:blur(10px); padding:28px 32px; border-radius:18px; margin-bottom:26px; border-left:5px solid var(--secondary); }
.scenario-header h3 { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--primary); margin-bottom:8px; }

/* ---- FORM FIELDS ---- */
.form-field { margin-bottom:15px; }
.form-field label { display:block; font-size:0.78rem; font-weight:800; color:#666; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px; }
.form-field input, .form-field select, .form-field textarea { width:100%; padding:10px 15px; border:1.5px solid rgba(95,168,211,0.28); border-radius:11px; font-family:'Nunito',sans-serif; font-size:0.93rem; background:rgba(255,255,255,0.9); color:var(--dark); outline:none; transition:border-color 0.25s; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(95,168,211,0.1); }
.form-field textarea { resize:vertical; min-height:65px; }

/* ---- DATE CARD ---- */
.date-card { background:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(255,205,178,0.28)); border-radius:22px; padding:36px; border:1px solid rgba(255,180,162,0.25); box-shadow:0 12px 35px rgba(255,140,120,0.08); position:relative; overflow:hidden; margin:22px 0; }
.date-card::before { content:''; position:absolute; top:0;left:0; width:5px; height:100%; background:linear-gradient(to bottom,var(--accent-warm),var(--lavender)); }
.date-badge { display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg,var(--accent-warm),var(--accent)); color:#fff; font-weight:800; font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase; padding:7px 16px; border-radius:28px; margin-bottom:16px; box-shadow:0 4px 12px rgba(255,140,120,0.28); }

/* ---- RSVP / WHO'S COMING ---- */
.rsvp-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:28px; }
.rsvp-form-box, .who-is-in-box { background:rgba(255,255,255,0.88); border-radius:18px; padding:28px; border:1px solid rgba(255,255,255,0.8); box-shadow:0 8px 25px rgba(0,0,0,0.04); }
.rsvp-form-box h4, .who-is-in-box h4 { font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--primary); margin-bottom:16px; font-weight:700; }
.in-count { font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:900; color:var(--accent-warm); line-height:1; margin:8px 0 3px; }
.in-names { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.in-name-tag { background:linear-gradient(135deg,rgba(95,168,211,0.12),rgba(201,184,232,0.12)); border:1px solid rgba(95,168,211,0.18); border-radius:18px; padding:4px 13px; font-size:0.82rem; font-weight:700; color:var(--primary); }
.vote-tally { margin-top:18px; }
.vote-tally-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; font-size:0.85rem; }
.vote-bar-wrap { flex:1; margin:0 10px; height:7px; background:rgba(0,0,0,0.06); border-radius:8px; overflow:hidden; }
.vote-bar { height:100%; border-radius:8px; background:linear-gradient(90deg,var(--primary-light),var(--accent)); transition:width 0.5s ease; }
.scenario-vote { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.vote-pill { flex:1; min-width:80px; padding:9px 7px; border:2px solid rgba(95,168,211,0.22); border-radius:11px; text-align:center; cursor:pointer; font-size:0.78rem; font-weight:800; color:#666; background:rgba(255,255,255,0.7); transition:all 0.22s; user-select:none; }
.vote-pill:hover { border-color:var(--primary-light); color:var(--primary); }
.vote-pill.selected { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(27,73,101,0.22); }
.deposit-box { background:linear-gradient(135deg,rgba(27,73,101,0.05),rgba(95,168,211,0.05)); border:1.5px dashed rgba(95,168,211,0.32); border-radius:14px; padding:18px; margin-top:16px; text-align:center; }
.deposit-box p { font-size:0.85rem; color:#555; margin-bottom:10px; line-height:1.6; }
.attendee-card { background:rgba(255,255,255,0.88); border:1px solid rgba(95,168,211,0.18); border-radius:14px; padding:13px 16px; min-width:150px; max-width:200px; box-shadow:0 4px 14px rgba(0,0,0,0.04); transition:transform 0.28s ease,box-shadow 0.28s ease; flex:0 0 auto; }
.attendee-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(95,168,211,0.14); }
.attendee-lead { font-family:'Playfair Display',serif; font-size:0.98rem; font-weight:700; color:var(--primary); margin-bottom:3px; }
.attendee-meta { font-size:0.72rem; color:#888; font-weight:600; margin-bottom:5px; }
.attendee-member-name { font-size:0.78rem; color:#555; padding:1px 0; font-weight:600; }
.attendee-member-name::before { content:'↳ '; color:var(--primary-light); }
.party-member-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.party-member-row input { margin-bottom:0 !important; flex:1; }
.remove-member { width:26px; height:26px; border-radius:50%; border:none; background:rgba(255,140,120,0.14); color:var(--accent-warm); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.2s; }
.remove-member:hover { background:rgba(255,140,120,0.28); }

/* ---- SCROLL DOTS ---- */
.scroll-dots { display:flex; justify-content:center; gap:6px; padding-top:5px; padding-bottom:8px; }
.scroll-dot { width:6px; height:6px; border-radius:50%; background:rgba(95,168,211,0.28); transition:background 0.28s,transform 0.28s; cursor:pointer; }
.scroll-dot.active { background:var(--primary-light); transform:scale(1.4); }

/* ---- PHOTO STRIP ---- */
.photo-strip-wrap { position:relative; overflow:hidden; margin:0 -44px; }
.photo-strip { display:flex; gap:18px; overflow-x:auto; padding:18px 44px 24px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(95,168,211,0.28) transparent; }
.photo-strip::-webkit-scrollbar { height:4px; }
.photo-strip::-webkit-scrollbar-track { background:transparent; }
.photo-strip::-webkit-scrollbar-thumb { background:rgba(95,168,211,0.35); border-radius:8px; }
.photo-card { flex:0 0 320px; scroll-snap-align:start; border-radius:22px; overflow:hidden; position:relative; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,0.07); transition:all 0.38s cubic-bezier(0.165,0.84,0.44,1); border:1px solid rgba(255,255,255,0.8); }
.photo-card:hover { transform:translateY(-9px) scale(1.02); box-shadow:0 22px 55px rgba(0,0,0,0.13); }
.photo-card img { width:100%; height:240px; object-fit:cover; transition:transform 0.55s ease; display:block; }
.photo-card:hover img { transform:scale(1.07); }
.photo-card-body { padding:22px; background:linear-gradient(to bottom,rgba(255,255,255,0.95),#fff); }
.photo-card-body h4 { font-family:'Playfair Display',serif; font-size:1.12rem; color:var(--primary); margin-bottom:7px; font-weight:700; }
.photo-card-body p { font-size:0.85rem; color:#666; line-height:1.58; margin-bottom:14px; height:52px; overflow:hidden; }

/* ---- CONTROL PANEL ---- */
.control-panel { background:linear-gradient(135deg,#1B4965 0%,#5FA8D3 50%,#62B6CB 100%); position:relative; overflow:hidden; color:#fff; padding:50px 44px; border-radius:28px; margin-bottom:50px; box-shadow:0 28px 70px rgba(27,73,101,0.32); border:1px solid rgba(255,255,255,0.18); }
.control-panel::before { content:''; position:absolute; top:-50%; left:-20%; width:60%; height:200%; background:radial-gradient(ellipse,rgba(255,255,255,0.1) 0%,transparent 65%); pointer-events:none; }
.control-panel-inner { position:relative; z-index:2; text-align:center; }
.control-panel h3 { font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:900; color:var(--blush); margin-bottom:8px; }
.control-panel p { font-size:1rem; color:rgba(255,255,255,0.85); max-width:680px; margin:0 auto 32px; line-height:1.78; }
.slider-row { display:flex; justify-content:center; align-items:center; gap:18px; margin-bottom:22px; flex-wrap:wrap; }
.slider-btn { width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,0.45); background:rgba(255,255,255,0.14); backdrop-filter:blur(10px); color:#fff; font-size:1.5rem; font-weight:900; cursor:pointer; transition:all 0.28s ease; display:flex; align-items:center; justify-content:center; }
.slider-btn:hover { background:rgba(255,180,162,0.38); border-color:var(--blush); transform:scale(1.1); }
input[type=range] { -webkit-appearance:none; width:340px; max-width:88vw; height:7px; background:rgba(255,255,255,0.22); border-radius:8px; outline:none; cursor:pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--blush); border:3px solid #fff; box-shadow:0 4px 14px rgba(255,140,120,0.45); cursor:pointer; transition:transform 0.2s; }
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.2); }
.traveler-display-pill { display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.3); backdrop-filter:blur(10px); border-radius:40px; padding:10px 28px; font-size:1.55rem; font-weight:900; color:#fff; }
.traveler-display-pill span { color:var(--blush); }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion:reduce) {
    .page-hero-bg, .particle, section, .photo-card, .allocation-card, .aurora-wave,
    .countdown-strip, .sticky-cta a { animation:none !important; transition:none !important; }
    section { opacity:1; transform:none; }
}

/* ---- PAGE NAV HINT (scroll to next/prev page) ---- */
.page-nav-hint {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    z-index: 900; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding-bottom: 18px; opacity: 0;
    transition: opacity 0.5s ease;
}
.page-nav-hint.visible { opacity: 1; }
.page-nav-hint span {
    color: rgba(255,255,255,0.7); font-size: 0.68rem; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.page-nav-hint::after {
    content: ''; width: 1px; height: 32px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent);
    animation: hintBounce 1.8s ease-in-out infinite;
}
@keyframes hintBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ---- PAGE TRANSITION ---- */
body { opacity: 0; transition: opacity 0.45s ease; }
body.page-ready { opacity: 1; }

/* ---- HAMBURGER NAV (mobile) ---- */
.nav-toggle {
    display: none; flex-direction: column; gap: 4.5px;
    background: none; border: none; cursor: pointer; padding: 5px;
    flex-shrink: 0; margin-left: 6px;
}
.nav-toggle span {
    display: block; width: 20px; height: 2px;
    background: rgba(255,255,255,0.88); border-radius: 2px;
    transition: all 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* ---- MOBILE ---- */
@media (max-width:768px) {
    /* Mobile nav: show logo + hamburger only; links collapse into dropdown */
    nav.float-nav {
        top: 12px; padding: 9px 16px;
        flex-wrap: wrap; gap: 0;
        border-radius: 18px; max-width: calc(100vw - 28px);
        width: auto;
    }
    nav.float-nav .nav-logo { font-size: 1rem; margin-right: auto; padding-right: 0; border-right: none; }
    nav.float-nav .nav-toggle { display: flex; }
    nav.float-nav .nav-links {
        display: none; width: 100%; flex-direction: column; gap: 4px;
        padding-top: 10px; margin-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.15);
    }
    nav.float-nav .nav-links.open { display: flex; }
    nav.float-nav .nav-links a { font-size: 0.88rem; padding: 9px 14px; border-radius: 12px; text-align: left; }

    .page-hero { height: 100svh; min-height: 480px; }
    .page-hero-content { padding: 0 22px 38px; }
    .page-hero-content h1 { font-size: clamp(1.7rem, 7vw, 2.5rem); }
    .page-hero-content p { font-size: 0.9rem; }
    section { padding: 26px 20px; border-radius: 20px; }
    .two-col { grid-template-columns: 1fr; }
    .rsvp-grid { grid-template-columns: 1fr; }
    .photo-strip { padding: 16px 20px 22px; }
    .photo-strip-wrap { margin: 0 -20px; }
    .control-panel { padding: 28px 20px; }
    .control-panel h3 { font-size: 1.45rem; }
    h2.section-title { font-size: 1.65rem; }
    input[type=range] { width: 200px; }
    th, td { padding: 10px 11px; font-size: 0.8rem; }
    .milestone-strip { padding-bottom: 12px; }
    .milestone { min-width: 100px; }
    .sticky-cta { bottom: 14px; right: 14px; }
    .sticky-cta a { font-size: 0.82rem; padding: 11px 16px; }
    .allocation-grid { grid-template-columns: repeat(2, 1fr); }
    .tabs { gap: 6px; }
    .tab-btn { font-size: 0.8rem; padding: 10px 14px; }
    table { font-size: 0.8rem; }
    .scenario-header { padding: 18px 20px; }
    .page-nav-hint { display: none; }
}