/* ═══════════════════════════════════════════════════════════════════════
   RememberEvent — shared marketing skeleton
   Third brand palette: Classic (cream / charcoal / gold). LIGHT theme.
   Derived from the gallery theming engine's `classic` preset so the
   marketing chrome and the (Slice 2) demo speak the same colour language.
   The chrome palette is FIXED — only the Slice 2 demo mini-gallery re-themes.
   Static HTML/CSS/JS, no build step. Edit directly.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --primary: #b8923f;          /* gold */
    --primary-dark: #a07d31;
    --primary-light: rgba(184, 146, 63, 0.10);
    --primary-border: rgba(184, 146, 63, 0.28);
    --ink: #2c2a26;              /* charcoal — headings / dark accent */
    --bg: #f7f3ea;              /* page cream */
    --surface: #fffdf8;          /* cards */
    --surface-hover: #fbf6ea;
    --hero-bg: #f1ead9;
    --text-primary: #2c2a26;
    --text-secondary: #5a564e;
    --text-muted: #8a8270;
    --border-subtle: #e8e0cf;
    --on-primary: #2c2a26;       /* dark text on gold (preset onPrimary) */
}

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

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ═══════════ NAVIGATION ═══════════ */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 16px 0;
    background: rgba(247, 243, 234, 0.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
}
.nav-content {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
    display: flex; justify-content: space-between; align-items: center;
}
.logo { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: -0.5px; }
.logo-accent { color: var(--primary); }
.logo-tagline { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 2px; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.3s; }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active-page { color: var(--primary); }
.nav-cta {
    background: var(--primary) !important; color: var(--on-primary) !important;
    padding: 8px 20px; border-radius: 8px; font-weight: 700 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(184, 146, 63, 0.3); }
.mobile-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }

/* Nav dropdown — "Events We Serve" */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 500;
    color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px;
    transition: color 0.3s;
}
.nav-dropdown-toggle:hover, .nav-dropdown-toggle[aria-expanded="true"] { color: var(--text-primary); }
.nav-dropdown-caret { font-size: 0.7rem; transition: transform 0.2s; }
.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 180px;
    background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 8px; box-shadow: 0 12px 30px rgba(44, 42, 38, 0.14);
    display: none; flex-direction: column; gap: 2px; z-index: 1001;
}
/* transparent bridge so the hover gap doesn't close the menu */
.nav-dropdown-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown-menu.open { display: flex; }
.nav-dropdown-menu a { padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; color: var(--text-secondary); white-space: nowrap; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { background: var(--hero-bg); color: var(--ink); outline: none; }
.nav-dropdown-menu a.active-page { color: var(--primary-dark); font-weight: 600; }

/* ═══════════ BUTTONS ═══════════ */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 10px; font-weight: 700;
    font-size: 1rem; text-decoration: none; transition: all 0.3s;
    cursor: pointer; border: none; font-family: 'DM Sans', sans-serif;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(184, 146, 63, 0.3); }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-subtle); }
.btn-secondary:hover { border-color: var(--text-muted); background: var(--surface); }
.btn-dark { background: var(--ink); color: #fdfbf5; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(44, 42, 38, 0.22); }

/* ═══════════ HERO ═══════════ */
.hero {
    min-height: 100vh; display: flex; align-items: center;
    padding-top: 120px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--hero-bg) 0%, var(--bg) 100%);
}
.hero::before {
    content: ''; position: absolute; top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(184, 146, 63, 0.10) 0%, transparent 70%);
    pointer-events: none;
}
.hero-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary-light); border: 1px solid var(--primary-border);
    padding: 6px 16px; border-radius: 50px; font-size: 0.8rem;
    color: var(--primary-dark); font-weight: 600; margin-bottom: 24px;
}
/* Per-page planner eyebrow (vertical pages) — gold audience signal above the headline.
   Sized up for prominence but kept well below the 3.4rem serif headline so it stays
   secondary. DM Sans tops out at 700, so the extra weight comes from the larger size. */
.hero-kicker {
    display: inline-block; font-size: 1.25rem; font-weight: 700;
    color: var(--primary-dark); text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 16px; line-height: 1.2;
}
.hero h1 {
    font-family: 'Playfair Display', serif; font-size: 3.4rem;
    font-weight: 800; line-height: 1.08; margin-bottom: 18px; letter-spacing: -1px;
    color: var(--ink);
}
.hero-subtitle {
    font-size: 1.12rem; color: var(--text-secondary);
    margin-bottom: 32px; max-width: 520px; line-height: 1.7;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* ═══════════ GALLERY MOCK (hero visual — placeholder for Slice 2 live demo) ═══════════ */
.gallery-mock {
    background: var(--surface); border-radius: 22px; padding: 16px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 30px 60px rgba(44, 42, 38, 0.14);
    max-width: 380px; margin: 0 auto; width: 100%;
}
.gallery-mock-header { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; }
.gallery-mock-logo {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.1rem;
}
.gallery-mock-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem; color: var(--ink); }
.gallery-mock-sub { font-size: 0.72rem; color: var(--text-muted); }
.gallery-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }
.gallery-tile.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery-tile-badge {
    position: absolute; bottom: 6px; left: 6px; font-size: 0.62rem; font-weight: 600;
    color: #fff; background: rgba(0,0,0,0.35); padding: 2px 7px; border-radius: 20px;
}
.gallery-mock-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 2px; }
.gallery-mock-foot span { font-size: 0.72rem; color: var(--text-muted); }

/* ═══════════ SECTIONS ═══════════ */
.section { padding: 96px 0; border-top: 1px solid var(--border-subtle); }
.section-header { text-align: center; margin-bottom: 56px; }
.section-label {
    display: inline-block; font-size: 0.8rem; font-weight: 700;
    color: var(--primary-dark); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px;
}
.section-header h2 {
    font-family: 'Playfair Display', serif; font-size: 2.4rem;
    font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px; color: var(--ink);
}
.section-header p { color: var(--text-secondary); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* ═══════════ HOW IT WORKS (home only) ═══════════ */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card {
    text-align: center; padding: 34px 24px; background: var(--surface);
    border-radius: 16px; border: 1px solid var(--border-subtle); transition: all 0.3s;
}
.step-number {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--primary); color: var(--on-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.15rem; margin: 0 auto 16px;
}
.step-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.step-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }

/* ═══════════ TAILORED BENEFIT (the one per-page differentiator) ═══════════ */
.tailored { background: var(--hero-bg); }
.tailored-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tailored-copy h2 {
    font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700;
    color: var(--ink); margin-bottom: 16px; letter-spacing: -0.5px; line-height: 1.15;
}
.tailored-copy p { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 16px; }
.tailored-list { list-style: none; }
.tailored-list li {
    display: flex; gap: 12px; align-items: flex-start; padding: 10px 0;
    font-size: 0.95rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle);
}
.tailored-list li:last-child { border-bottom: none; }
.tailored-list .check { color: var(--primary-dark); font-weight: 800; flex-shrink: 0; }
.tailored-panel {
    background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: 18px; padding: 32px; box-shadow: 0 20px 50px rgba(44,42,38,0.10);
}
.tailored-panel h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--ink); margin-bottom: 10px; }
.tailored-panel p { font-size: 0.92rem; color: var(--text-secondary); }
.tailored-stat { font-family: 'Playfair Display', serif; font-size: 2.6rem; font-weight: 800; color: var(--primary-dark); }

/* Resell pitch (home) — 4-up card row */
.resell-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.resell-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 28px; }
.resell-card h4 { font-size: 1.05rem; color: var(--ink); margin-bottom: 8px; }
.resell-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }

/* ═══════════ FEATURES ═══════════ */
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feature-card {
    display: flex; align-items: flex-start; gap: 16px; padding: 24px;
    background: var(--surface); border-radius: 16px;
    border: 1px solid var(--border-subtle); transition: all 0.3s;
}
.feature-card:hover { border-color: var(--primary-border); background: var(--surface-hover); }
.feature-icon-box {
    font-size: 1.6rem; flex-shrink: 0; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-light); border-radius: 12px;
}
.feature-card h4 { margin-bottom: 4px; font-size: 0.98rem; color: var(--ink); }
.feature-card p { font-size: 0.87rem; color: var(--text-secondary); line-height: 1.5; }

/* ═══════════ PRICING ═══════════ */
.pricing-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 720px; margin: 0 auto; }
.pricing-card {
    padding: 36px 32px; background: var(--surface); border-radius: 18px;
    border: 1px solid var(--border-subtle); text-align: center; position: relative;
}
.pricing-card.featured { border-color: var(--primary); box-shadow: 0 16px 40px rgba(184,146,63,0.16); }
.pricing-flag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: var(--on-primary); font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; padding: 5px 14px; border-radius: 20px;
}
.pricing-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.pricing-price { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 800; color: var(--ink); }
.pricing-price small { font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.pricing-period { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 22px; }
.pricing-features { list-style: none; text-align: left; margin-bottom: 26px; }
.pricing-features li {
    padding: 9px 0; font-size: 0.88rem; color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle); display: flex; align-items: flex-start; gap: 8px;
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-check { color: var(--primary-dark); font-weight: 700; flex-shrink: 0; }
.pricing-note { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 22px; }

/* ═══════════ SAMPLE IT (demo shell — interactivity lands in Slice 2) ═══════════ */
.sample { background: var(--hero-bg); }
.sample-shell {
    max-width: 720px; margin: 0 auto; text-align: center;
    background: var(--surface); border: 1px dashed var(--primary-border);
    border-radius: 20px; padding: 48px 32px;
}
.sample-shell .sample-kicker { font-size: 0.8rem; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 2px; }
.sample-shell h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--ink); margin: 10px 0 12px; }
.sample-shell p { color: var(--text-secondary); font-size: 1rem; max-width: 520px; margin: 0 auto 24px; }
.sample-soon { font-size: 0.8rem; color: var(--text-muted); margin-top: 16px; }

/* ═══════════ CTA / CONTACT ═══════════ */
.cta-section { padding: 84px 0; text-align: center; border-top: 1px solid var(--border-subtle); }
.cta-section h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; margin-bottom: 12px; color: var(--ink); }
.cta-section p { color: var(--text-secondary); margin-bottom: 28px; font-size: 1rem; }
.contact-box { max-width: 480px; margin: 0 auto 28px; }
.contact-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.contact-form input, .contact-form textarea {
    padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: 10px; color: var(--text-primary); font-size: 1rem; width: 100%;
    box-sizing: border-box; font-family: 'DM Sans', sans-serif;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-success {
    display: none; text-align: center; padding: 28px 20px; background: var(--surface);
    border: 1px solid var(--border-subtle); border-radius: 12px;
}

/* ═══════════ LEGAL PAGES (privacy / tos) ═══════════ */
.legal-content { padding: 120px 0 60px; }
.legal-content .container { max-width: 800px; }
.legal-content h1 { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.legal-content .effective-date { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 40px; }
.legal-content h2 { font-size: 1.3rem; font-weight: 700; color: var(--primary-dark); margin-top: 36px; margin-bottom: 12px; }
.legal-content h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-top: 20px; margin-bottom: 8px; }
.legal-content p { color: var(--text-secondary); margin-bottom: 16px; line-height: 1.8; }
.legal-content ul { color: var(--text-secondary); margin-bottom: 16px; padding-left: 24px; line-height: 1.8; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--primary-dark); }
.legal-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.legal-content th, .legal-content td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 0.9rem; }
.legal-content th { color: var(--ink); font-weight: 600; }
@media (max-width: 768px) {
    .legal-content h1 { font-size: 1.8rem; }
    .legal-content table { font-size: 0.8rem; }
}

/* ═══════════ FOOTER ═══════════ */
footer { padding: 40px 0; border-top: 1px solid var(--border-subtle); }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-copyright { color: var(--text-muted); font-size: 0.8rem; line-height: 1.6; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; transition: color 0.3s; }
.footer-links a:hover { color: var(--text-secondary); }

/* ═══════════ SCROLL-REVEAL ANIMATIONS (progressive enhancement) ═══════════ */
.js-anims .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js-anims .fade-up.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
    .hero-badge, .hero-kicker, .hero h1, .hero-subtitle, .hero-buttons {
        opacity: 0; animation: heroFadeUp 0.8s ease forwards;
    }
    .hero-badge, .hero-kicker { animation-delay: 0.05s; }
    .hero h1 { animation-delay: 0.15s; }
    .hero-subtitle { animation-delay: 0.4s; }
    .hero-buttons { animation-delay: 0.55s; }
    @keyframes heroFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

    .hero .gallery-mock { animation: heroFloat 6s ease-in-out infinite; }
    @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    .feature-card, .step-card, .resell-card, .pricing-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }
    .feature-card:hover, .step-card:hover, .resell-card:hover, .pricing-card:hover {
        transform: translateY(-4px); box-shadow: 0 14px 32px rgba(184, 146, 63, 0.16);
    }
}
@media (prefers-reduced-motion: reduce) {
    .js-anims .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═══════════ MOBILE ═══════════ */
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .nav-links { display: none; }
    .nav-links.active {
        display: flex; flex-direction: column; position: absolute;
        top: 60px; left: 0; right: 0; background: rgba(247, 243, 234, 0.98);
        padding: 24px; gap: 20px; border-bottom: 1px solid var(--border-subtle);
    }
    .mobile-toggle { display: block; }
    /* Dropdown collapses into the hamburger column as a labelled group: a muted
       "Events We Serve ▾" heading with the three verticals nested on a left rail. */
    .nav-links.active .nav-dropdown { width: 100%; }
    .nav-links.active .nav-dropdown-toggle {
        width: 100%; justify-content: flex-start; gap: 6px; pointer-events: none;
        color: var(--text-muted); font-size: 0.75rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 1.5px;
    }
    .nav-links.active .nav-dropdown-caret { display: inline; font-size: 0.6rem; }
    .nav-links.active .nav-dropdown-menu {
        position: static; display: flex; box-shadow: none; border: none;
        background: transparent; min-width: 0;
        margin: 8px 0 4px 6px; padding: 2px 0 2px 14px;
        border-left: 2px solid var(--border-subtle); gap: 6px;
    }
    .nav-links.active .nav-dropdown-menu::before { display: none; }
    .nav-links.active .nav-dropdown-menu a { padding: 4px 0; }
    .hero { min-height: auto; padding: 120px 0 60px; }
    .hero-layout { grid-template-columns: 1fr; gap: 40px; }
    .hero h1 { font-size: 2.4rem; }
    .hero-badge { font-size: 0.85rem; }
    .hero-buttons { justify-content: flex-start; }
    .gallery-mock { order: 2; }
    .steps-grid { grid-template-columns: 1fr; }
    .tailored-layout { grid-template-columns: 1fr; gap: 32px; }
    .resell-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .feature-card { align-items: flex-start; }
    .pricing-layout { grid-template-columns: 1fr; }
    .section { padding: 72px 0; }
    .section-header h2 { font-size: 1.8rem; }
    .footer-content { flex-direction: column; text-align: center; }
}