/* =========================================================
   STRATHROY-CARADOC CANADA DAY
   Brand assets: scd-horizontal-fullcolour.svg
   Brand colors: #ed1c24 (red), #231f20 (charcoal), #FFFFFF
   Brand typography: Montserrat (display), Inter (body)
   ========================================================= */

:root {
    --canada-red: #ed1c24;          /* exact brand red */
    --canada-red-deep: #c4151c;     /* darker for depth */
    --canada-red-bright: #ff2a30;   /* slightly brighter for highlights */
    --charcoal: #231f20;            /* exact brand charcoal */
    --charcoal-soft: #3a3536;
    --white: #FFFFFF;
    --off-white: #FAF6F2;
    --warm-cream: #FFF8F0;
    --soft-gray: #6E6669;
    --border-gray: #E8E0DE;
    --maple-shadow: rgba(237, 28, 36, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* =========================================================
   ACCESSIBILITY — skip link + focus indicators
   ========================================================= */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--charcoal);
    color: var(--white);
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
    z-index: 1000;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 16px;
    outline: 3px solid var(--canada-red);
    outline-offset: 3px;
}

/* Universal focus-visible — clear, brand-aligned ring for keyboard users only */
*:focus { outline: none; }

a:focus-visible,
button:focus-visible,
.cta-button:focus-visible,
.logo-link:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--canada-red);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Hero CTAs sit on a dark gradient — invert the ring for visibility */
.hero a:focus-visible {
    outline-color: var(--white);
}

/* Get Involved sits on dark charcoal — use bright red ring */
.get-involved a:focus-visible {
    outline-color: var(--canada-red-bright);
}

/* Footer is dark charcoal — use bright red ring */
.footer a:focus-visible {
    outline-color: var(--canada-red-bright);
}

/* =========================================================
   REDUCED MOTION — respect user's OS preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable the floating leaves animation entirely */
    .floating-leaves .leaf { display: none; }

    /* Hide the hero p5.js canvas so the aurora / particle animation doesn't render */
    #hero-canvas-container { display: none; }

    /* Stop the scroll cue bounce */
    .scroll-cue { animation: none; }

    /* Stop card hover transforms */
    .sponsor-card:hover,
    .vendor-card:hover,
    .event-card:hover,
    .involve-card:hover {
        transform: none;
    }
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: var(--charcoal);
    line-height: 1.6;
    background-color: var(--off-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; font-family: inherit; }

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

/* =========================================================
   HEADER — centered logo, split nav (left + right)
   ========================================================= */
.header {
    background: var(--white);
    color: var(--charcoal);
    padding: 1.35rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(35, 31, 32, 0.08);
    border-bottom: 1px solid var(--border-gray);
}

.header-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}

.logo-link {
    justify-self: center;
    display: block;
}

.brand-logo {
    height: 125px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

.brand-logo:hover { transform: translateY(-1px); }

.nav {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    /* Visually align with the "STRATHROY-CARADOC CANADA DAY" text in the logo
       (logo SVG has more whitespace above the brand name than below) */
    transform: translateY(22px);
}
.nav-left { justify-self: end; }
.nav-right { justify-self: start; }

/* =========================================================
   HAMBURGER BUTTON — hidden on desktop, visible on mobile
   ========================================================= */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 102;
    justify-self: end;
}

.hamburger-line {
    display: block;
    position: absolute;
    left: 8px;
    width: 28px;
    height: 3px;
    background: var(--canada-red);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.hamburger-line:nth-child(1) { top: 13px; }
.hamburger-line:nth-child(2) { top: 21px; }
.hamburger-line:nth-child(3) { top: 29px; }

/* Animated X when menu is open */
.hamburger.is-open .hamburger-line:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}
.hamburger.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger.is-open .hamburger-line:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}

/* =========================================================
   MOBILE MENU — slides down beneath header
   ========================================================= */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--white);
    border-top: 1px solid var(--border-gray);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.mobile-menu:not([hidden]) {
    display: flex;
}

.mobile-menu.is-open {
    max-height: 500px;
}

.mobile-menu a {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--charcoal);
    padding: 1.2rem 1rem;
    border-bottom: 1px solid var(--border-gray);
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-menu a:last-child { border-bottom: none; }

.mobile-menu a:hover,
.mobile-menu a:focus-visible {
    background: var(--off-white);
    color: var(--canada-red);
}

.mobile-menu-cta {
    background: var(--canada-red) !important;
    color: var(--white) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.mobile-menu-cta:hover,
.mobile-menu-cta:focus-visible {
    background: var(--canada-red-bright) !important;
    color: var(--white) !important;
}

.mobile-menu-cta .cta-leaf {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.nav a {
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    transition: color 0.3s ease;
    padding: 4px 0;
}

.nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--canada-red);
    transition: width 0.3s ease;
}

.nav a:hover { color: var(--canada-red); }
.nav a:hover::after { width: 100%; }

/* =========================================================
   HERO — generative canvas + brand-bold typography
   ========================================================= */
.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #14060A 0%, #3F0B0E 50%, #6F1118 100%);
    color: var(--white);
    text-align: center;
}

#hero-canvas-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

#hero-canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    padding: 80px 24px;
}

.hero-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1.5rem;
    opacity: 0.85;
}

.hero-tagline-leaf {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin: 0 0.8rem;
    fill: var(--canada-red);
}

.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.4rem, 7vw, 6.5rem);
    font-weight: 900;
    line-height: 0.95;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 30px rgba(0,0,0,0.5);
    letter-spacing: -2px;
    text-transform: uppercase;
}

.hero-title .accent {
    color: var(--canada-red-bright);
    text-shadow: 0 0 30px rgba(237, 28, 36, 0.4), 0 4px 20px rgba(0,0,0,0.6);
}

.hero-date-row {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 0.7rem 1.6rem;
    border: 2px solid var(--white);
    border-radius: 50px;
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,0.2);
}

.hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    margin-bottom: 2.5rem;
    opacity: 0.92;
    font-weight: 300;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    background: var(--canada-red);
    color: var(--white);
    padding: 18px 44px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(237, 28, 36, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.cta-button:hover {
    background: var(--canada-red-bright);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(237, 28, 36, 0.55);
}

.cta-button.secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    box-shadow: none;
}

.cta-button.secondary:hover {
    background: var(--white);
    color: var(--canada-red);
    border-color: var(--white);
}

.cta-leaf {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.scroll-cue {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.7;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* =========================================================
   COUNTDOWN — pure brand red with white text
   ========================================================= */
.countdown {
    background: var(--canada-red);
    color: var(--white);
    padding: 3.5rem 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.countdown::before,
.countdown::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 240px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='580 0 132 105'%3E%3Cpath d='M669.03,93.97c-.49-1.46,0-2.95,1.48-3.94l28.04-23.61-5.91-2.94c-2.46-.97-1.97-2.46-1-5.91l4.43-16.24-16.22,3.47c-.86,0-1.54-.19-2.02-.49-.38-.24-.65-.54-.8-.86-.1-.21-2.58-8.01-2.58-8.01l-12.79,14.76c-1.99,2.44-5.42,2.44-4.45-2.96l5.42-30.5-7.39,3.94c-.88.44-1.96.28-2.88-.02-1.2-.4-2.19-1.27-2.78-2.4l-9.59-18.25-10.32,19.68c-.99,2.48-2.96,1.97-5.42.99l-7.37-3.94,5.89,30.5c1,5.4-2.94,5.4-4.41,2.96l-13.3-14.76s-1.99,7.62-2.04,7.74c-.3.85-1.6,1.62-2.88,1.62l-16.24-3.47,4.45,16.24c.97,3.45,1.46,4.93-.99,5.91l-5.91,2.94,28.04,23.61c.99.99,1.97,2.48,1.48,3.94l-2.46,8.37c4.13-.43,15-.67,26.69-.72v7.81h9.58v-7.81c11.58.05,22.39.29,26.69.72l-2.46-8.37Z' fill='white' fill-opacity='0.09'/%3E%3C/svg%3E") repeat;
    background-size: 70px 70px;
    pointer-events: none;
}

.countdown::before { left: 0; }
.countdown::after { right: 0; transform: scaleX(-1); }

.countdown-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    opacity: 0.92;
    margin-bottom: 1.4rem;
    font-weight: 700;
}

.countdown-grid {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.countdown-item {
    text-align: center;
    min-width: 90px;
}

.countdown-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--white);
    letter-spacing: -2px;
}

.countdown-unit {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    opacity: 0.85;
    margin-top: 0.5rem;
    font-weight: 600;
}

/* =========================================================
   SECTIONS
   ========================================================= */
.sponsors, .vendors, .events, .about {
    padding: 110px 20px;
    position: relative;
}

.sponsors { background: var(--white); }
.vendors { background: var(--off-white); }
.events { background: var(--white); }
.about { background: var(--warm-cream); }

.section-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--canada-red);
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 900;
    text-align: center;
    margin-bottom: 0.7rem;
    color: var(--charcoal);
    line-height: 1.05;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.section-title .accent {
    color: var(--canada-red);
}

.section-subtitle {
    text-align: center;
    color: var(--soft-gray);
    font-size: 1.1rem;
    margin-bottom: 3.5rem;
    font-weight: 400;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.section-divider::before,
.section-divider::after {
    content: '';
    height: 2px;
    width: 60px;
    background: var(--canada-red);
}

.section-divider-leaf {
    width: 36px;
    height: 36px;
    fill: var(--canada-red);
}

/* =========================================================
   ABOUT SECTION
   ========================================================= */
.about-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.about-text {
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--charcoal);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.about-quote {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    color: var(--canada-red);
    padding: 2.2rem 0;
    border-top: 3px solid var(--canada-red);
    border-bottom: 3px solid var(--canada-red);
    margin: 2.8rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

.non-profit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--charcoal);
}

.non-profit-badge .pill {
    background: var(--canada-red);
    color: var(--white);
    padding: 0.4rem 0.9rem;
    border-radius: 3px;
    letter-spacing: 2px;
}

/* =========================================================
   GRID LAYOUTS
   ========================================================= */
.grid { display: grid; gap: 2rem; margin-top: 2rem; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* =========================================================
   SPONSOR CARDS
   ========================================================= */
.sponsor-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.sponsor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--canada-red);
    transition: width 0.4s ease;
}

.sponsor-card:hover::before { width: 100%; }

.sponsor-card:hover {
    border-color: var(--canada-red);
    box-shadow: 0 12px 30px var(--maple-shadow);
    transform: translateY(-6px);
}

.sponsor-logo {
    width: 100%;
    height: 120px;
    background: var(--off-white);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B8B0B2;
    margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
}

.sponsor-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='580 0 132 105'%3E%3Cpath d='M669.03,93.97c-.49-1.46,0-2.95,1.48-3.94l28.04-23.61-5.91-2.94c-2.46-.97-1.97-2.46-1-5.91l4.43-16.24-16.22,3.47c-.86,0-1.54-.19-2.02-.49-.38-.24-.65-.54-.8-.86-.1-.21-2.58-8.01-2.58-8.01l-12.79,14.76c-1.99,2.44-5.42,2.44-4.45-2.96l5.42-30.5-7.39,3.94c-.88.44-1.96.28-2.88-.02-1.2-.4-2.19-1.27-2.78-2.4l-9.59-18.25-10.32,19.68c-.99,2.48-2.96,1.97-5.42.99l-7.37-3.94,5.89,30.5c1,5.4-2.94,5.4-4.41,2.96l-13.3-14.76s-1.99,7.62-2.04,7.74c-.3.85-1.6,1.62-2.88,1.62l-16.24-3.47,4.45,16.24c.97,3.45,1.46,4.93-.99,5.91l-5.91,2.94,28.04,23.61c.99.99,1.97,2.48,1.48,3.94l-2.46,8.37c4.13-.43,15-.67,26.69-.72v7.81h9.58v-7.81c11.58.05,22.39.29,26.69.72l-2.46-8.37Z' fill='%23ed1c24' fill-opacity='0.05'/%3E%3C/svg%3E") center/70px no-repeat;
}

.sponsor-card p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--charcoal);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================================
   SPONSOR TIERS — Title / Hero / Builder / Neighbour
   ========================================================= */
.sponsor-tier {
    margin-bottom: 4rem;
}

.sponsor-tier:last-child { margin-bottom: 2rem; }

.tier-header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}

.tier-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--charcoal);
    letter-spacing: -0.3px;
    text-align: center;
}

.tier-amount {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--canada-red);
    padding: 0.3rem 0.8rem;
    border: 2px solid var(--canada-red);
    border-radius: 3px;
}

/* --- TIER 1: Title Sponsor --- */
.sponsor-tier--title {
    margin-top: 1rem;
    margin-bottom: 5rem;
    padding-bottom: 3rem;
    border-bottom: 2px solid var(--border-gray);
}

.sponsor-tier--title .tier-label {
    font-size: 0.85rem;
    letter-spacing: 4px;
    color: var(--canada-red);
    margin-bottom: 1.2rem;
    text-align: center;
    display: block;
}

/* Filled Title Sponsor card */
.title-sponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--white) 0%, #fff8f8 100%);
    border: 3px solid var(--canada-red);
    border-radius: 6px;
    padding: 3rem 2rem;
    min-height: 200px;
    max-width: 720px;
    margin: 0 auto;
    transition: all 0.35s ease;
    position: relative;
    box-shadow: 0 12px 30px var(--maple-shadow);
    overflow: hidden;
}

.title-sponsor-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: var(--canada-red);
}

.title-sponsor-card::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 160px;
    height: 160px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='580 0 132 105'%3E%3Cpath d='M669.03,93.97c-.49-1.46,0-2.95,1.48-3.94l28.04-23.61-5.91-2.94c-2.46-.97-1.97-2.46-1-5.91l4.43-16.24-16.22,3.47c-.86,0-1.54-.19-2.02-.49-.38-.24-.65-.54-.8-.86-.1-.21-2.58-8.01-2.58-8.01l-12.79,14.76c-1.99,2.44-5.42,2.44-4.45-2.96l5.42-30.5-7.39,3.94c-.88.44-1.96.28-2.88-.02-1.2-.4-2.19-1.27-2.78-2.4l-9.59-18.25-10.32,19.68c-.99,2.48-2.96,1.97-5.42.99l-7.37-3.94,5.89,30.5c1,5.4-2.94,5.4-4.41,2.96l-13.3-14.76s-1.99,7.62-2.04,7.74c-.3.85-1.6,1.62-2.88,1.62l-16.24-3.47,4.45,16.24c.97,3.45,1.46,4.93-.99,5.91l-5.91,2.94,28.04,23.61c.99.99,1.97,2.48,1.48,3.94l-2.46,8.37c4.13-.43,15-.67,26.69-.72v7.81h9.58v-7.81c11.58.05,22.39.29,26.69.72l-2.46-8.37Z' fill='%23ed1c24' fill-opacity='0.08'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
}

.title-sponsor-name {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: var(--charcoal);
    line-height: 1;
    margin-bottom: 0.9rem;
    position: relative;
    z-index: 1;
}

.title-sponsor-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--soft-gray);
    position: relative;
    z-index: 1;
}

/* --- TIER 2: Hometown Hero (large cards) --- */
.sponsor-tier--hero .tier-label { font-size: 1.6rem; }

.sponsor-grid--hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.sponsor-card--hero {
    background: var(--white);
    border: 2px solid var(--canada-red);
    border-radius: 4px;
    padding: 2rem 1.5rem;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.sponsor-card--hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--canada-red);
}

.sponsor-card--hero:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px var(--maple-shadow);
}

.sponsor-card--hero .sponsor-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* --- TIER 3: Community Builder (medium cards) --- */
.sponsor-tier--builder .tier-label { font-size: 1.3rem; }

.sponsor-grid--builder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
}

.sponsor-card--builder {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-left: 4px solid var(--canada-red);
    border-radius: 4px;
    padding: 1.5rem 1.2rem;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
}

.sponsor-card--builder:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(35,31,32,0.1);
    border-color: var(--canada-red);
}

.sponsor-card--builder .sponsor-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.sponsor-card--builder em {
    display: block;
    font-style: normal;
    font-weight: 500;
    color: var(--soft-gray);
    font-size: 0.78rem;
    margin-top: 0.2rem;
    text-transform: none;
    letter-spacing: 0;
}

/* --- TIER 4: Good Neighbour (smaller, lighter cards) --- */
.sponsor-tier--neighbour .tier-label { font-size: 1.15rem; }

.sponsor-grid--neighbour {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
}

.sponsor-card--neighbour {
    background: var(--off-white);
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    padding: 1.1rem 1rem;
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
}

.sponsor-card--neighbour:hover {
    transform: translateY(-3px);
    background: var(--white);
    border-color: var(--canada-red);
    box-shadow: 0 8px 18px rgba(35,31,32,0.08);
}

.sponsor-card--neighbour .sponsor-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

/* =========================================================
   VENDOR CARDS
   ========================================================= */
.vendor-card {
    background: var(--white);
    border-radius: 4px;
    padding: 2rem;
    box-shadow: 0 2px 14px rgba(35, 31, 32, 0.06);
    transition: all 0.35s ease;
    border-top: 4px solid var(--canada-red);
    position: relative;
}

.vendor-card::after {
    content: '';
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='580 0 132 105'%3E%3Cpath d='M669.03,93.97c-.49-1.46,0-2.95,1.48-3.94l28.04-23.61-5.91-2.94c-2.46-.97-1.97-2.46-1-5.91l4.43-16.24-16.22,3.47c-.86,0-1.54-.19-2.02-.49-.38-.24-.65-.54-.8-.86-.1-.21-2.58-8.01-2.58-8.01l-12.79,14.76c-1.99,2.44-5.42,2.44-4.45-2.96l5.42-30.5-7.39,3.94c-.88.44-1.96.28-2.88-.02-1.2-.4-2.19-1.27-2.78-2.4l-9.59-18.25-10.32,19.68c-.99,2.48-2.96,1.97-5.42.99l-7.37-3.94,5.89,30.5c1,5.4-2.94,5.4-4.41,2.96l-13.3-14.76s-1.99,7.62-2.04,7.74c-.3.85-1.6,1.62-2.88,1.62l-16.24-3.47,4.45,16.24c.97,3.45,1.46,4.93-.99,5.91l-5.91,2.94,28.04,23.61c.99.99,1.97,2.48,1.48,3.94l-2.46,8.37c4.13-.43,15-.67,26.69-.72v7.81h9.58v-7.81c11.58.05,22.39.29,26.69.72l-2.46-8.37Z' fill='%23ed1c24' fill-opacity='0.18'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: all 0.3s ease;
}

.vendor-card:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='580 0 132 105'%3E%3Cpath d='M669.03,93.97c-.49-1.46,0-2.95,1.48-3.94l28.04-23.61-5.91-2.94c-2.46-.97-1.97-2.46-1-5.91l4.43-16.24-16.22,3.47c-.86,0-1.54-.19-2.02-.49-.38-.24-.65-.54-.8-.86-.1-.21-2.58-8.01-2.58-8.01l-12.79,14.76c-1.99,2.44-5.42,2.44-4.45-2.96l5.42-30.5-7.39,3.94c-.88.44-1.96.28-2.88-.02-1.2-.4-2.19-1.27-2.78-2.4l-9.59-18.25-10.32,19.68c-.99,2.48-2.96,1.97-5.42.99l-7.37-3.94,5.89,30.5c1,5.4-2.94,5.4-4.41,2.96l-13.3-14.76s-1.99,7.62-2.04,7.74c-.3.85-1.6,1.62-2.88,1.62l-16.24-3.47,4.45,16.24c.97,3.45,1.46,4.93-.99,5.91l-5.91,2.94,28.04,23.61c.99.99,1.97,2.48,1.48,3.94l-2.46,8.37c4.13-.43,15-.67,26.69-.72v7.81h9.58v-7.81c11.58.05,22.39.29,26.69.72l-2.46-8.37Z' fill='%23ed1c24'/%3E%3C/svg%3E");
    transform: rotate(15deg) scale(1.15);
}

.vendor-card:hover {
    box-shadow: 0 12px 30px var(--maple-shadow);
    transform: translateY(-6px);
    border-top-width: 6px;
}

.vendor-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: 0.6rem;
    padding-right: 36px;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}

.vendor-category {
    font-family: 'Montserrat', sans-serif;
    color: var(--canada-red);
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.vendor-description {
    color: var(--soft-gray);
    line-height: 1.65;
    font-size: 0.95rem;
}

/* =========================================================
   EVENTS GRID
   ========================================================= */
/* =========================================================
   EVENTS — Clean vertical list (replaces former card grid)
   ========================================================= */
.events-list {
    max-width: 720px;
    margin: 0 auto;
}

.event-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 2rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--border-gray);
    align-items: baseline;
}

.event-row:first-child { padding-top: 0; }
.event-row:last-child { border-bottom: none; }

.event-time {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--canada-red);
    letter-spacing: 1px;
    text-align: right;
    white-space: nowrap;
}

.event-time--range {
    font-size: 0.92rem;
    line-height: 1.25;
}

.event-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    color: var(--charcoal);
}

.event-description {
    color: var(--soft-gray);
    line-height: 1.65;
    font-size: 0.97rem;
}

.event-description strong { color: var(--charcoal); }

/* Pill badges for activities under Gates Open */
.activity-pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0.85rem;
    padding: 0;
}

.activity-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--warm-cream);
    border: 1px solid var(--border-gray);
    color: var(--charcoal);
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.activity-pill::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--canada-red);
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-pill:hover {
    border-color: var(--canada-red);
    background: rgba(237, 28, 36, 0.05);
    transform: translateY(-1px);
}

/* =========================================================
   INLINE CTAs — small conversion prompts at end of sections
   ========================================================= */
.inline-cta {
    margin-top: 3rem;
    text-align: center;
    padding: 2rem;
    background: var(--warm-cream);
    border: 2px dashed var(--canada-red);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.inline-cta p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sponsors .inline-cta { background: var(--off-white); }
.vendors .inline-cta { background: var(--white); }

/* =========================================================
   GET INVOLVED SECTION — three-card CTA hub
   ========================================================= */
.get-involved {
    padding: 110px 20px;
    background: linear-gradient(135deg, var(--charcoal) 0%, #3a2628 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.get-involved::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='580 0 132 105'%3E%3Cpath d='M669.03,93.97c-.49-1.46,0-2.95,1.48-3.94l28.04-23.61-5.91-2.94c-2.46-.97-1.97-2.46-1-5.91l4.43-16.24-16.22,3.47c-.86,0-1.54-.19-2.02-.49-.38-.24-.65-.54-.8-.86-.1-.21-2.58-8.01-2.58-8.01l-12.79,14.76c-1.99,2.44-5.42,2.44-4.45-2.96l5.42-30.5-7.39,3.94c-.88.44-1.96.28-2.88-.02-1.2-.4-2.19-1.27-2.78-2.4l-9.59-18.25-10.32,19.68c-.99,2.48-2.96,1.97-5.42.99l-7.37-3.94,5.89,30.5c1,5.4-2.94,5.4-4.41,2.96l-13.3-14.76s-1.99,7.62-2.04,7.74c-.3.85-1.6,1.62-2.88,1.62l-16.24-3.47,4.45,16.24c.97,3.45,1.46,4.93-.99,5.91l-5.91,2.94,28.04,23.61c.99.99,1.97,2.48,1.48,3.94l-2.46,8.37c4.13-.43,15-.67,26.69-.72v7.81h9.58v-7.81c11.58.05,22.39.29,26.69.72l-2.46-8.37Z' fill='%23ed1c24' fill-opacity='0.06'/%3E%3C/svg%3E") -50px -30px / 200px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='580 0 132 105'%3E%3Cpath d='M669.03,93.97c-.49-1.46,0-2.95,1.48-3.94l28.04-23.61-5.91-2.94c-2.46-.97-1.97-2.46-1-5.91l4.43-16.24-16.22,3.47c-.86,0-1.54-.19-2.02-.49-.38-.24-.65-.54-.8-.86-.1-.21-2.58-8.01-2.58-8.01l-12.79,14.76c-1.99,2.44-5.42,2.44-4.45-2.96l5.42-30.5-7.39,3.94c-.88.44-1.96.28-2.88-.02-1.2-.4-2.19-1.27-2.78-2.4l-9.59-18.25-10.32,19.68c-.99,2.48-2.96,1.97-5.42.99l-7.37-3.94,5.89,30.5c1,5.4-2.94,5.4-4.41,2.96l-13.3-14.76s-1.99,7.62-2.04,7.74c-.3.85-1.6,1.62-2.88,1.62l-16.24-3.47,4.45,16.24c.97,3.45,1.46,4.93-.99,5.91l-5.91,2.94,28.04,23.61c.99.99,1.97,2.48,1.48,3.94l-2.46,8.37c4.13-.43,15-.67,26.69-.72v7.81h9.58v-7.81c11.58.05,22.39.29,26.69.72l-2.46-8.37Z' fill='%23ed1c24' fill-opacity='0.06'/%3E%3C/svg%3E") right -30px bottom -40px / 220px no-repeat;
    pointer-events: none;
}

.get-involved .container { position: relative; z-index: 1; }
.get-involved .section-title { color: var(--white); }
.get-involved .section-title .accent { color: var(--canada-red-bright); }
.get-involved .section-subtitle { color: rgba(255,255,255,0.78); }
.get-involved .section-eyebrow { color: var(--canada-red-bright); }
.get-involved .section-divider::before,
.get-involved .section-divider::after { background: var(--canada-red-bright); }
.get-involved .section-divider-leaf { fill: var(--canada-red-bright); }

.involve-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

/* Get Involved: 2x2 grid on tablet so the 4 cards don't orphan one card on its own row */
@media (max-width: 1100px) {
    .involve-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .involve-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.involve-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.35s ease;
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
}

.involve-card:hover {
    background: rgba(237, 28, 36, 0.08);
    border-color: var(--canada-red);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(237, 28, 36, 0.25);
}

.involve-icon {
    width: 48px;
    height: 48px;
    fill: var(--canada-red-bright);
    margin: 0 auto 1.2rem;
    display: block;
}

.involve-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 1rem;
}

.involve-description {
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 1.8rem;
    flex-grow: 1;
}

.involve-card .cta-button { align-self: center; }

.cta-button-small {
    padding: 13px 28px;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
}

/* =========================================================
   FLAG STRIP — red-white-red between sections
   ========================================================= */
.flag-strip {
    height: 16px;
    background: linear-gradient(90deg,
        var(--canada-red) 0%, var(--canada-red) 25%,
        var(--white) 25%, var(--white) 75%,
        var(--canada-red) 75%, var(--canada-red) 100%);
    position: relative;
}

/* Removed .flag-strip::after — the small center maple leaf at this scale
   visually read like a stuck mouse cursor against the off-white background.
   The strip itself stays as a red divider. */

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    background: var(--charcoal);
    color: var(--white);
    padding: 4.5rem 20px 1.5rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--canada-red);
}

.footer-brand {
    margin-bottom: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.footer-leaf {
    width: 56px;
    height: 56px;
    color: var(--canada-red);
    fill: currentColor;
    display: block;
}

.footer-brand-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.92;
    max-width: 100%;
    line-height: 1.3;
    text-align: center;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
}

.footer-social-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.7);
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.3s ease;
}

.social-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--white);
    transition: fill 0.3s ease;
}

.social-icon:hover,
.social-icon:focus-visible {
    background: var(--canada-red);
    border-color: var(--canada-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(237,28,36,0.4);
}

.social-handle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.5px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.footer-section h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: var(--canada-red-bright);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-section h4::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='580 0 132 105'%3E%3Cpath d='M669.03,93.97c-.49-1.46,0-2.95,1.48-3.94l28.04-23.61-5.91-2.94c-2.46-.97-1.97-2.46-1-5.91l4.43-16.24-16.22,3.47c-.86,0-1.54-.19-2.02-.49-.38-.24-.65-.54-.8-.86-.1-.21-2.58-8.01-2.58-8.01l-12.79,14.76c-1.99,2.44-5.42,2.44-4.45-2.96l5.42-30.5-7.39,3.94c-.88.44-1.96.28-2.88-.02-1.2-.4-2.19-1.27-2.78-2.4l-9.59-18.25-10.32,19.68c-.99,2.48-2.96,1.97-5.42.99l-7.37-3.94,5.89,30.5c1,5.4-2.94,5.4-4.41,2.96l-13.3-14.76s-1.99,7.62-2.04,7.74c-.3.85-1.6,1.62-2.88,1.62l-16.24-3.47,4.45,16.24c.97,3.45,1.46,4.93-.99,5.91l-5.91,2.94,28.04,23.61c.99.99,1.97,2.48,1.48,3.94l-2.46,8.37c4.13-.43,15-.67,26.69-.72v7.81h9.58v-7.81c11.58.05,22.39.29,26.69.72l-2.46-8.37Z' fill='%23ff2a30'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.footer-section p {
    color: rgba(255,255,255,0.78);
    font-size: 0.92rem;
    line-height: 1.7;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    letter-spacing: 0.5px;
}

.footer-bottom .non-profit-mini {
    display: inline-block;
    background: var(--canada-red);
    color: var(--white);
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-left: 0.5rem;
}

/* Floating background leaves */
.floating-leaves {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.floating-leaves .leaf {
    position: absolute;
    width: 28px;
    height: 28px;
    opacity: 0;
    animation: float-down linear infinite;
}

@keyframes float-down {
    0% { transform: translateY(-50px) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.45; }
    90% { opacity: 0.45; }
    100% { transform: translateY(110vh) translateX(50px) rotate(360deg); opacity: 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    /* Mobile header: logo left, hamburger right */
    .header-content {
        grid-template-columns: 1fr auto;
        gap: 1rem;
    }
    .logo-link { justify-self: start; }
    .nav-left, .nav-right { display: none; }
    .hamburger { display: block; }
    .brand-logo { height: auto; max-height: 72px; max-width: 100%; width: auto; }
    /* Reset the desktop nav translation so mobile dropdown sits flush */
    .nav { transform: none; }
    .grid-4, .grid-3 { grid-template-columns: 1fr; }
    .hero { min-height: 80vh; }
    .countdown-grid { gap: 1.4rem; }
    .countdown-number { font-size: 2.4rem; }
    .hero-tagline { font-size: 0.65rem; letter-spacing: 3px; }
}

@media (max-width: 480px) {
    .hero { min-height: 75vh; }
    .hero-content { padding: 50px 20px; max-width: 100%; }
    /* Mobile: let logo scale by width so it never overflows narrow viewports */
    .brand-logo {
        height: auto;
        max-height: 40px;
        max-width: 100%;
        width: auto;
    }
    /* Mobile: shrink hero typography so "STRATHROY-CARADOC" fits at 320-480px */
    .hero-tagline {
        font-size: 0.6rem;
        letter-spacing: 2px;
        margin-bottom: 1rem;
    }
    .hero-title {
        font-size: clamp(1.4rem, 7.5vw, 2.2rem);
        letter-spacing: -1px;
        line-height: 1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    .hero-date-row { font-size: 0.85rem; letter-spacing: 1.5px; }
    .hero-subtitle { font-size: 0.95rem; line-height: 1.5; }
    .cta-button { padding: 14px 32px; font-size: 0.8rem; letter-spacing: 1.5px; }
    .sponsors, .vendors, .events, .about { padding: 70px 20px; }
    .nav { gap: 0.8rem; }
    .nav a { font-size: 0.72rem; letter-spacing: 1px; }
    .countdown-grid { gap: 0.8rem; }
    .countdown-item { min-width: 65px; }
    .countdown-number { font-size: 1.9rem; }
    /* Mobile: tighter events list */
    .event-row {
        grid-template-columns: 100px 1fr;
        gap: 1rem;
        padding: 1.25rem 0;
    }
    .event-time { font-size: 0.92rem; }
    .event-time--range { font-size: 0.78rem; }
    .event-title { font-size: 1rem; }
    .event-description { font-size: 0.92rem; }
    .activity-pill { font-size: 0.72rem; padding: 0.4rem 0.7rem; }
}

/* Very narrow phones (iPhone SE / older Androids ~380px): tighten activity pills more */
@media (max-width: 380px) {
    .activity-pill { font-size: 0.65rem; padding: 0.35rem 0.6rem; letter-spacing: 0.3px; gap: 0.35rem; }
    .activity-pill::before { width: 8px; height: 8px; }
    .activity-pills { gap: 0.4rem; }
}

/* =========================================================
   ESSENTIALS STRIP — high-signal answer block below countdown
   ========================================================= */
.essentials {
    background: var(--charcoal);
    color: var(--white);
    padding: 28px 20px;
    border-top: 3px solid var(--canada-red);
    border-bottom: 3px solid var(--canada-red);
}

.essentials-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

.essential-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 0 8px;
}

.essential-item + .essential-item {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.essential-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--canada-red-bright);
    font-weight: 700;
}

.essential-value {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    line-height: 1.3;
}

/* =========================================================
   FAQ — visible answer-engine-friendly Q&A list
   ========================================================= */
.faq {
    padding: 110px 20px;
    background: var(--off-white);
    position: relative;
}

.faq-list {
    max-width: 820px;
    margin: 3rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.faq-item[open] {
    border-color: var(--canada-red);
    box-shadow: 0 4px 18px rgba(237, 28, 36, 0.08);
}

.faq-question {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.4rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--charcoal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: "+";
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--canada-red);
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-question::after {
    content: "−";
    transform: rotate(0deg);
}

.faq-answer {
    padding: 0 1.4rem 1.25rem;
    color: var(--soft-gray);
    font-family: 'Inter', sans-serif;
    font-size: 0.98rem;
    line-height: 1.65;
}

.faq-answer a {
    color: var(--canada-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-answer strong {
    color: var(--charcoal);
    font-weight: 600;
}

/* =========================================================
   LOCATION — map + directions
   ========================================================= */
.location {
    padding: 110px 20px;
    background: var(--white);
    position: relative;
}

.location-content {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 3rem auto 0;
    align-items: stretch;
}

.location-map {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(35, 31, 32, 0.12);
    min-height: 380px;
}

.location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
}

.location-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    font-family: 'Inter', sans-serif;
    color: var(--charcoal);
    line-height: 1.6;
}

.location-details p { font-size: 1rem; }

.location-details strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--canada-red);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 4px;
}

.location-details .cta-button {
    align-self: flex-start;
    margin-top: 0.5rem;
}

/* About section — proceeds line emphasis */
.about-proceeds {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(237, 28, 36, 0.06);
    border-left: 3px solid var(--canada-red);
    border-radius: 0 8px 8px 0;
}

.about-proceeds strong { color: var(--canada-red-deep); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {
    .essentials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .essential-item:nth-child(odd) { border-left: none; }
    .essential-item:nth-child(2),
    .essential-item:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, 0.18); }
    .essential-item:nth-child(3),
    .essential-item:nth-child(4) { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }

    .location-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .location-map, .location-map iframe { min-height: 300px; }
}

@media (max-width: 480px) {
    .faq, .location { padding: 70px 20px; }
    .essentials-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .essential-item { border-left: none !important; padding: 0.6rem 0; }
    .essential-item + .essential-item { border-top: 1px solid rgba(255, 255, 255, 0.18); }
    .faq-question { font-size: 0.95rem; padding: 1rem 1.1rem; }
    .faq-answer { padding: 0 1.1rem 1rem; font-size: 0.94rem; }
}

/* =========================================================
   SAVE THE DATE — single Add to Calendar CTA
   ========================================================= */
.save-the-date {
    background: var(--warm-cream);
    padding: 48px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border-gray);
}

.save-the-date-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--canada-red);
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: block;
}

.save-the-date-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--charcoal);
    margin-bottom: 1.4rem;
    letter-spacing: -0.3px;
    line-height: 1.15;
}

.save-the-date-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--canada-red);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 16px var(--maple-shadow);
    transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.save-the-date-cta:hover {
    transform: translateY(-2px);
    background: var(--canada-red-deep);
    box-shadow: 0 6px 20px var(--maple-shadow);
}

.save-the-date-cta .cal-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .save-the-date { padding: 36px 20px; }
    .save-the-date-cta { padding: 0.95rem 1.6rem; font-size: 0.82rem; letter-spacing: 1.2px; }
}