/**
Theme Name: lindarufaro
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lindarufaro
Template: astra
*/

/* =============================================================
   EVENT PAGE — "Jesus & Me" Live Recording
   Premium design: deep red / gold aesthetic, micro animations
   ============================================================= */

/* ── CSS Custom Properties ── */
:root {
    --ep-gold:        #B8860B;
    --ep-gold-light:  #D4AF37;
    --ep-gold-dark:   #8B6914;
    --ep-red:         #8B0000;
    --ep-crimson:     #C0392B;
    --ep-dark:        #FFFFFF;
    --ep-dark-2:      #F8F6F3;
    --ep-dark-3:      #F0EDE8;
    --ep-text:        #1A1A1A;
    --ep-text-muted:  #5C5C5C;
    --ep-border:      rgba(184,134,11,0.3);
    --ep-grad-hero:   linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,246,243,0.95) 55%, rgba(240,237,232,0.9) 100%);
    --ep-grad-gold:   linear-gradient(90deg, #8B6914 0%, #D4AF37 50%, #8B6914 100%);
    --ep-grad-card:   linear-gradient(145deg, #FFFFFF 0%, #F8F6F3 100%);
    --ep-radius:      12px;
    --ep-transition:  0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset / Scope ── */
.event-page *,
.event-page *::before,
.event-page *::after { box-sizing: border-box; margin: 0; padding: 0; }

.event-page {
    background: var(--ep-dark);
    color: var(--ep-text);
    font-family: 'Georgia', 'Times New Roman', serif;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Hero section dark theme overrides - keep text light on dark hero */
.ep-hero {
    color: #F5ECD7;
}

.ep-hero__title-me {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

.ep-hero__label {
    color: #D4AF37;
}

.ep-hero__title-and {
    color: #B09060;
    -webkit-text-fill-color: #B09060;
}

.ep-hero__badge {
    color: #FFFFFF !important;
    background: rgba(192,57,43,0.25);
}

.ep-hero__meta .ep-meta-chip {
    color: #F5ECD7;
    background: rgba(255,255,255,0.06);
}

.ep-hero__meta .ep-meta-chip svg {
    color: #D4AF37;
}

.ep-hero__scroll-cue {
    border-color: rgba(212,175,55,0.5);
}

.ep-hero__scroll-cue span {
    background: #D4AF37;
}

/* Navbar in hero section - white text on dark background */
.ep-nav {
    --nav-text-color: #FFFFFF;
    --nav-text-hover: #080608;
}

.ep-nav__link {
    color: var(--nav-text-color) !important;
}

/* Scrolled navbar - dark text on white background */
.ep-nav--scrolled {
    --nav-text-color: #1A1A1A;
    --nav-text-hover: #080608;
}

.ep-nav--scrolled .ep-nav__link {
    color: var(--nav-text-color) !important;
}

.ep-nav__link:hover,
.ep-nav__link--active {
    color: var(--nav-text-hover) !important;
}

/*
 * ASTRA FULL-WIDTH LAYOUT
 *
 * The PHP filters in functions.php set:
 *   astra_page_layout        → 'no-sidebar'     (body class: ast-no-sidebar)
 *   astra_get_content_layout → 'page-builder'   (body class: ast-page-builder-template)
 *
 * Astra's own stylesheet already handles most of this via those body classes.
 * The rules below are a documented safety net per wpastra.com/docs.
 */

/* Hide Astra header & footer chrome on the event page */
.ast-page-builder-template.page-template-template-event #masthead,
.ast-page-builder-template.page-template-template-event #colophon,
.ast-page-builder-template.page-template-template-event .site-above-header-wrap,
.ast-page-builder-template.page-template-template-event .site-below-header-wrap,
.ast-page-builder-template.page-template-template-event .ast-breadcrumbs-wrap { display: none !important; }

/* ============================================================
   CUSTOM NAVIGATION - Premium Navbar
   ============================================================ */
.ep-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: all 0.4s ease;
    background: transparent;
}

.ep-nav--scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ep-border);
    padding: 12px 0;
}

.ep-nav__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.ep-nav__logo {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}
.ep-nav__logo:hover { transform: scale(1.05); }

.ep-nav__logo img {
    height: 50px;
    width: auto;
    filter: brightness(1.1);
    transition: filter 0.3s ease;
}
.ep-nav__logo:hover img { filter: brightness(1.3); }

/* Navigation Menu */
.ep-nav__menu {
    display: flex !important;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ep-nav__link {
    display: block;
    padding: 12px 24px !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.ep-nav__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #9B7D1A 0%, #FFD700 50%, #9B7D1A 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: 30px;
}

.ep-nav__link:hover,
.ep-nav__link--active {
    color: #080608 !important;
}
.ep-nav__link:hover::before,
.ep-nav__link--active::before {
    opacity: 1;
}

/* Scrolled navbar - dark text on white background */
.ep-nav--scrolled .ep-nav__link {
    color: #1A1A1A !important;
}

.ep-nav--scrolled .ep-nav__link:hover,
.ep-nav--scrolled .ep-nav__link--active {
    color: #080608 !important;
}

/* Mobile Toggle */
.ep-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--ep-border);
    border-radius: 8px;
    cursor: pointer;
    gap: 6px;
    padding: 0;
    transition: all 0.3s ease;
}

.ep-nav__toggle:hover {
    border-color: var(--ep-gold);
    background: rgba(212, 175, 55, 0.1);
}

.ep-nav__toggle-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ep-gold);
    border-radius: 1px;
    transition: all 0.3s ease;
}

.ep-nav__toggle[aria-expanded="true"] .ep-nav__toggle-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.ep-nav__toggle[aria-expanded="true"] .ep-nav__toggle-line:nth-child(2) {
    opacity: 0;
}
.ep-nav__toggle[aria-expanded="true"] .ep-nav__toggle-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Navbar spacing adjustments for hero sections */
.ep-hero,
.sp-hero {
    padding-top: 100px;
}

/* Force navbar consistency across all pages */
.ep-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

.ep-nav__container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Ensure nav menu displays correctly on all pages */
#ep-nav-menu,
.ep-nav__menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 768px) {
    #ep-nav-menu,
    .ep-nav__menu {
        display: none !important;
    }
    #ep-nav-menu.ep-nav__menu--open,
    .ep-nav__menu.ep-nav__menu--open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .ep-nav__toggle {
        display: flex;
    }
    
    .ep-nav__menu {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        flex-direction: column;
        padding: 24px;
        gap: 8px;
        border-bottom: 1px solid rgba(184, 134, 11, 0.3);
        border-top: 1px solid rgba(184, 134, 11, 0.1);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        transform: translateY(-150%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .ep-nav__menu--open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .ep-nav__menu--open .ep-nav__link {
        color: #1A1A1A !important;
    }

    .ep-nav__menu--open .ep-nav__link:hover,
    .ep-nav__menu--open .ep-nav__link--active {
        color: #080608 !important;
    }

    .ep-nav__link {
        width: 100%;
        text-align: center;
        padding: 16px 24px;
    }
    
    .ep-nav__logo img {
        height: 40px;
    }
    
    .ep-hero,
    .sp-hero {
        padding-top: 90px;
    }
}

/* Safety net: ensure no container constraints remain */
.ast-page-builder-template #primary,
.ast-page-builder-template .content-area {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.ast-page-builder-template .entry-content,
.ast-page-builder-template .ast-article-single {
    padding: 0 !important;
    margin: 0 !important;
}

html, body {
    background: #FFFFFF;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Force site container to full width */
#site-content, #content, .site-content, .site-content-contain,
.ast-page-builder-template .site-content,
.ast-page-builder-template #page {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Container ── */
.ep-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--delay, 0s);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Shared Button ── */
.ep-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 40px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--ep-transition), box-shadow var(--ep-transition), background var(--ep-transition);
    white-space: nowrap;
}
.ep-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.ep-btn--primary {
    background: var(--ep-crimson);
    color: #fff;
    border: 2px solid transparent;
}
.ep-btn--primary:hover {
    background: transparent;
    border-color: var(--ep-gold);
    color: var(--ep-gold);
    transform: scale(1.04);
    box-shadow: 0 0 28px rgba(184,134,11,0.3);
}
.ep-btn--outline {
    background: transparent;
    color: var(--ep-gold-dark);
    border: 2px solid var(--ep-gold);
}
.ep-btn--outline:hover {
    background: var(--ep-gold);
    color: #FFFFFF;
    transform: scale(1.04);
    box-shadow: 0 0 28px rgba(184,134,11,0.3);
}
.ep-btn--gold {
    background: var(--ep-grad-gold);
    color: var(--ep-dark);
    border: 2px solid transparent;
}
.ep-btn--gold:hover {
    transform: scale(1.05);
    box-shadow: 0 0 36px rgba(255,215,0,0.6);
}
.ep-btn--full { width: 100%; justify-content: center; }

/* ── Section Titles ── */
.ep-section-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    background: var(--ep-grad-gold);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}
.ep-section-title--left { text-align: left; }

@keyframes shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.ep-hero {
    position: relative;
    height: 100svh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ep-hero__bg {
    position: absolute;
    inset: -10%;
    background-size: cover;
    background-position: center top;
    filter: brightness(0.35) saturate(0.6);
    will-change: transform;
    transition: transform 0.1s linear;
}

.ep-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #080608 0%, #2D0005 55%, #0A0005 100%);
    opacity: 0.75;
}

.ep-hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Individual particles injected via JS get this base style */
.ep-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--ep-gold-light);
    opacity: 0;
    animation: float-particle var(--dur, 6s) ease-in-out var(--del, 0s) infinite;
}
@keyframes float-particle {
    0%   { opacity: 0; transform: translateY(0) scale(0.5); }
    20%  { opacity: 0.7; }
    80%  { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(-120px) scale(1.2); }
}

.ep-hero__content {
    position: relative;
    z-index: 2;
    padding: 120px 24px 80px;
    max-width: 680px;
    margin-left: max(5vw, 24px);
}

.ep-hero__label {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ep-gold);
    margin-bottom: 16px;
}

.ep-hero__title {
    font-size: clamp(3.5rem, 9vw, 8rem);
    line-height: 1;
    font-weight: 900;
    margin-bottom: 24px;
    display: block;
}
.ep-hero__title-jesus {
    display: block;
    background: var(--ep-grad-gold);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
    /*
     * background-clip:text clips to the element's content box.
     * The J glyph has a descender that extends below the baseline.
     * Padding-bottom extends the content box so the clip includes the full J curve.
     * Overflow:visible ensures the padded area paints outside the line box.
     */
    padding: 0.05em 0.06em 0.18em 0.06em;
    overflow: visible;
    display: inline-block;
}
.ep-hero__title-and {
    display: block;
    font-size: 0.45em;
    color: var(--ep-text-muted);
    letter-spacing: 0.1em;
    font-style: italic;
    -webkit-text-fill-color: var(--ep-text-muted);
    padding-left: 4px;
    /* Clear the J's padding-bottom so & sits flush */
    margin-top: -0.3em;
    position: relative;
    z-index: 1;
}

/* Ensure text remains dark on light backgrounds */
.ep-hero__badge,
.ep-hero__subtitle,
.ep-countdown__label,
.ep-detail-card__value,
.ep-about__body,
.ep-ticket-card__perks li,
.ep-outlets__title,
.ep-outlet,
.ep-cta__sub,
.ep-section-title,
.ep-section-title--left {
    color: var(--ep-text);
}
.ep-hero__title-me {
    display: block;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-style: italic;
}

.ep-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(192,57,43,0.1);
    border: 1px solid var(--ep-crimson);
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #1A1A1A;
    margin-bottom: 28px;
}
.ep-hero__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4040;
    animation: pulse-dot 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.6; }
}

.ep-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
}
.ep-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(184,134,11,0.08);
    border: 1px solid var(--ep-border);
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 0.875rem;
    color: var(--ep-text);
}
.ep-meta-chip svg { width: 15px; height: 15px; color: var(--ep-gold-dark); }

/* Performer image — right-aligned decorative element */
.ep-hero__performer {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 95%;
    max-width: 50%;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    mask-image: linear-gradient(to right, transparent 0%, black 25%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%);
    overflow: hidden;
}
.ep-hero__performer-img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 0 40px rgba(184,134,11,0.2));
}

/* Scroll cue arrow */
.ep-hero__scroll-cue {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 28px;
    height: 46px;
    border: 2px solid rgba(184,134,11,0.4);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
    text-decoration: none;
}
.ep-hero__scroll-cue span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ep-gold-dark);
    animation: scroll-dot 1.8s ease infinite;
}
@keyframes scroll-dot {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(16px); }
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.ep-countdown {
    background: var(--ep-dark-2);
    border-top: 1px solid var(--ep-border);
    border-bottom: 1px solid var(--ep-border);
    padding: 48px 24px;
    text-align: center;
}
.ep-countdown__label {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ep-text-muted);
    margin-bottom: 24px;
}
.ep-countdown__timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ep-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}
.ep-countdown__num {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1;
    background: var(--ep-grad-gold);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
    font-variant-numeric: tabular-nums;
}
.ep-countdown__lbl {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ep-text-muted);
    margin-top: 4px;
}
.ep-countdown__sep {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    color: var(--ep-gold);
    padding-bottom: 20px;
}

/* ============================================================
   EVENT DETAILS
   ============================================================ */
.ep-details {
    padding: 100px 0;
    background: var(--ep-dark);
}
.ep-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 56px;
}
.ep-detail-card {
    background: var(--ep-grad-card);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 36px 28px;
    text-align: center;
    transition: transform var(--ep-transition), border-color var(--ep-transition), box-shadow var(--ep-transition);
}
.ep-detail-card:hover {
    transform: translateY(-6px);
    border-color: var(--ep-gold);
    box-shadow: 0 8px 40px rgba(184,134,11,0.15);
}
.ep-detail-card__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 20px;
    background: rgba(184,134,11,0.1);
    border: 1px solid var(--ep-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-gold-dark);
}
.ep-detail-card__icon svg { width: 24px; height: 24px; }
.ep-detail-card__title {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ep-text-muted);
    margin-bottom: 10px;
}
.ep-detail-card__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ep-text);
    line-height: 1.5;
}

/* ============================================================
   ABOUT THE NIGHT
   ============================================================ */
.ep-about {
    padding: 100px 0;
    background: var(--ep-dark-2);
    border-top: 1px solid var(--ep-border);
    border-bottom: 1px solid var(--ep-border);
}
.ep-about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.ep-about__body {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ep-text-muted);
    margin-bottom: 20px;
}
.ep-about__body em { color: var(--ep-gold-dark); font-style: italic; }
.ep-about__text .ep-btn { margin-top: 16px; }
.ep-about__image { position: relative; }
.ep-about__image-frame {
    position: relative;
    border-radius: var(--ep-radius);
    overflow: hidden;
    border: 1px solid var(--ep-border);
    aspect-ratio: 3/4;
    background: var(--ep-dark-3);
}
.ep-about__image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s ease;
}
.ep-about__image-frame:hover img { transform: scale(1.04); }
.ep-about__image-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(139,0,0,0.15) 0%, transparent 50%);
    pointer-events: none;
}

/* ============================================================
   TICKET PRICING
   ============================================================ */
.ep-tickets {
    padding: 100px 0;
    background: var(--ep-dark);
}
.ep-tickets__sub {
    text-align: center;
    color: var(--ep-text-muted);
    font-size: 0.95rem;
    margin-bottom: 56px;
    letter-spacing: 0.05em;
}
.ep-tickets__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    max-width: 760px;
    margin: 0 auto 64px;
}
.ep-ticket-card {
    position: relative;
    background: var(--ep-grad-card);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 48px 36px 36px;
    text-align: center;
    transition: transform var(--ep-transition), box-shadow var(--ep-transition), border-color var(--ep-transition);
    overflow: hidden;
}
.ep-ticket-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(184,134,11,0.05) 0%, transparent 60%);
    pointer-events: none;
}
.ep-ticket-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 60px rgba(184,134,11,0.12);
    border-color: var(--ep-gold);
}
.ep-ticket-card--premium {
    border-color: var(--ep-gold);
    background: linear-gradient(145deg, #FFFFFF 0%, #F8F6F3 100%);
}
.ep-ticket-card--premium:hover {
    box-shadow: 0 16px 60px rgba(184,134,11,0.2);
    border-color: var(--ep-gold-dark);
}
.ep-ticket-card__ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--ep-crimson);
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 7px;
}
.ep-ticket-card__ribbon--gold {
    background: var(--ep-grad-gold);
    color: var(--ep-dark);
}
.ep-ticket-card__price {
    font-size: clamp(3.5rem, 7vw, 5rem);
    font-weight: 900;
    line-height: 1;
    color: var(--ep-gold-dark);
    margin: 16px 0 28px;
}
.ep-ticket-card__currency {
    font-size: 0.45em;
    vertical-align: super;
    color: var(--ep-gold);
}
.ep-ticket-card__perks {
    list-style: none;
    margin-bottom: 32px;
    text-align: left;
}
.ep-ticket-card__perks li {
    padding: 8px 0;
    font-size: 0.92rem;
    color: var(--ep-text-muted);
    border-bottom: 1px solid rgba(184,134,11,0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ep-ticket-card__perks li::before {
    content: '✦';
    color: var(--ep-gold-dark);
    font-size: 0.6rem;
    flex-shrink: 0;
}

/* Ticket outlets */
.ep-outlets {
    text-align: center;
    margin-top: 16px;
    padding: 36px;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background: var(--ep-grad-card);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.ep-outlets__title {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ep-text-muted);
    margin-bottom: 20px;
}
.ep-outlets__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}
.ep-outlet {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ep-text);
    background: rgba(184,134,11,0.08);
    border: 1px solid var(--ep-border);
    border-radius: 40px;
    padding: 10px 24px;
    transition: border-color var(--ep-transition), background var(--ep-transition);
}
.ep-outlet:hover {
    border-color: var(--ep-gold);
    background: rgba(184,134,11,0.15);
}

/* ============================================================
   FLYER GALLERY
   ============================================================ */
.ep-gallery {
    padding: 100px 0;
    background: var(--ep-dark-2);
    border-top: 1px solid var(--ep-border);
}
.ep-gallery__sub {
    text-align: center;
    color: var(--ep-text-muted);
    font-size: 0.95rem;
    margin-bottom: 56px;
}
.ep-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

@media (max-width: 1024px) {
    .ep-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }
}

@media (max-width: 768px) {
    .ep-gallery__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}
.ep-gallery__item {
    border-radius: var(--ep-radius);
    overflow: hidden;
    border: 1px solid var(--ep-border);
    margin: 0;
    transition: transform var(--ep-transition), box-shadow var(--ep-transition), border-color var(--ep-transition);
    align-self: center;
    background: var(--ep-dark-3);
}
.ep-gallery__item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 60px rgba(184,134,11,0.2);
    border-color: var(--ep-gold);
}
.ep-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   CTA STRIP
   ============================================================ */
.ep-cta {
    position: relative;
    padding: 100px 0;
    background: var(--ep-dark-3);
    border-top: 1px solid var(--ep-border);
    text-align: center;
    overflow: hidden;
}
.ep-cta__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(184,134,11,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.ep-cta__inner { position: relative; z-index: 1; }
.ep-cta__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    margin-bottom: 16px;
    background: var(--ep-grad-gold);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3.5s linear infinite;
}
.ep-cta__sub {
    color: var(--ep-text-muted);
    font-size: 1rem;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 900px) {
    .ep-about__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .ep-about__image { order: -1; max-width: 360px; margin: 0 auto; }
    .ep-section-title--left { text-align: center; }
}

@media (max-width: 768px) {
    .ep-hero__performer { display: none; }
    .ep-hero__content {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        text-align: center;
        padding: 100px 24px 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .ep-hero__meta {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .ep-hero__label { text-align: center; }
    .ep-hero__title { text-align: center; }
    .ep-hero__badge { text-align: center; }
    /* Address chip on its own line */
    .ep-meta-chip--address {
        width: auto;
        max-width: 100%;
    }
    .ep-countdown__timer { gap: 4px; }
    .ep-countdown__unit { min-width: 60px; }
    .ep-tickets__grid { grid-template-columns: 1fr; max-width: 380px; }
}

@media (max-width: 480px) {
    .ep-detail-card { padding: 28px 20px; }
    .ep-ticket-card { padding: 48px 24px 28px; }
    .ep-btn { padding: 12px 24px; font-size: 0.92rem; }
    .ep-hero__title { font-size: clamp(3rem, 16vw, 5rem); }
    .ep-hero__content { padding: 80px 20px 100px; }
    .ep-hero__meta { gap: 10px; }
    .ep-meta-chip {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
    .ep-countdown__sep { display: none; }
    .ep-countdown__timer { gap: 16px; }
}

/* ============================================================
   GALLERY — Click overlay & natural aspect ratios
   ============================================================ */
.ep-gallery__item {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Each image shows at its own natural aspect ratio — no forced crop */
.ep-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}
.ep-gallery__item:hover img { transform: scale(1.03); }

.ep-gallery__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--ep-transition);
    border-radius: var(--ep-radius);
}
.ep-gallery__overlay svg {
    width: 40px;
    height: 40px;
    color: var(--ep-gold-dark);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}
.ep-gallery__item:hover .ep-gallery__overlay,
.ep-gallery__item:focus .ep-gallery__overlay { opacity: 1; }
.ep-gallery__item:focus { outline: 2px solid var(--ep-gold); outline-offset: 4px; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.ep-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ep-lightbox[hidden] { display: none; }

.ep-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.95);
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.ep-lightbox__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: min(90vw, 900px);
    max-height: 90svh;
    animation: lb-in 0.25s ease;
}
@keyframes lb-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.ep-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(90svh - 100px);
    width: auto;
    height: auto;
    border-radius: var(--ep-radius);
    border: 1px solid var(--ep-border);
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8);
}

.ep-lightbox__close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(184,134,11,0.1);
    border: 1px solid var(--ep-border);
    color: var(--ep-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ep-transition);
    padding: 0;
}
.ep-lightbox__close:hover { background: var(--ep-crimson); color: #fff; }
.ep-lightbox__close svg { width: 18px; height: 18px; }

.ep-lightbox__download {
    font-size: 0.9rem;
    padding: 10px 28px;
    flex-shrink: 0;
}

/* ============================================================
   SPONSORSHIP PAGE - Premium Advertising Template
   Luxury design with parallax, glow effects, and micro-animations
   ============================================================ */

/* Hide Astra header & footer chrome on the sponsor page */
.ast-page-builder-template.page-template-template-advertising #masthead,
.ast-page-builder-template.page-template-template-advertising #colophon,
.ast-page-builder-template.page-template-template-advertising .site-above-header-wrap,
.ast-page-builder-template.page-template-template-advertising .site-below-header-wrap,
.ast-page-builder-template.page-template-template-advertising .ast-breadcrumbs-wrap { display: none !important; }

/* ── CSS Variables for Sponsor Page ── */
:root {
    --sp-gold:        #B8860B;
    --sp-gold-light:  #D4AF37;
    --sp-gold-dark:   #8B6914;
    --sp-platinum:    #C0C0C0;
    --sp-silver:      #A8A8A8;
    --sp-red:         #8B0000;
    --sp-crimson:     #C0392B;
    --sp-dark:        #FFFFFF;
    --sp-dark-2:      #F8F6F3;
    --sp-dark-3:      #F0EDE8;
    --sp-text:        #1A1A1A;
    --sp-text-muted:  #5C5C5C;
    --sp-border:      rgba(184,134,11,0.3);
    --sp-grad-gold:   linear-gradient(135deg, #8B6914 0%, #D4AF37 50%, #8B6914 100%);
    --sp-grad-plat:   linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 50%, #A8A8A8 100%);
    --sp-transition:  0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset / Scope ── */
.sponsor-page *,
.sponsor-page *::before,
.sponsor-page *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sponsor-page {
    background: var(--sp-dark);
    color: var(--sp-text);
    font-family: 'Georgia', 'Times New Roman', serif;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Hero section dark theme overrides for sponsor page - keep text light on dark hero */
.sp-hero {
    color: #F5ECD7;
}

.sp-hero__title-sub {
    color: #FFFFFF;
    text-shadow: 0 0 60px rgba(212,175,55,0.3);
}

.sp-hero__badge {
    color: #FFFFFF !important;
    background: rgba(192,57,43,0.2);
}

.sp-hero .sp-meta-chip {
    color: #F5ECD7;
    background: rgba(255,255,255,0.05);
}

.sp-hero .sp-meta-chip:hover {
    background: rgba(212,175,55,0.1);
}

.sp-hero .sp-meta-chip svg {
    color: #D4AF37;
}

.sp-hero__title-amp {
    color: #B09060;
}

.sp-hero__subtitle {
    color: #B09060;
}

.sp-hero__label {
    color: #D4AF37;
}

.sp-hero__scroll-cue {
    border-color: rgba(212,175,55,0.4);
}

.sp-hero__scroll-line {
    background: #D4AF37;
}

.sp-hero__image-glow {
    background: radial-gradient(ellipse, rgba(212,175,55,0.3) 0%, transparent 70%);
}

.sp-hero__img {
    filter: drop-shadow(0 0 60px rgba(212,175,55,0.25));
}

/* Sponsor page navbar inherits same behavior - uses .ep-nav class */

.sp-section-subtitle,
.sp-letter__body p,
.sp-letter__continuation-content p,
.sp-tier__feature,
.sp-tier__currency,
.sp-cta__text,
.sp-contact-link__text {
    color: var(--sp-text-muted);
}

.sp-letter__signoff,
.sp-letter__signoff strong,
.sp-tier__amount,
.sp-section-title,
.sp-cta__title,
.sp-letter__salutation {
    color: var(--sp-text);
}

.sp-letter__body strong {
    color: var(--sp-text);
}

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

/* ── Shared Buttons ── */
.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 50px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--sp-transition);
    white-space: nowrap;
    border: 2px solid transparent;
}
.sp-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.sp-btn--primary {
    background: var(--sp-crimson);
    color: #fff;
    box-shadow: 0 4px 20px rgba(192,57,43,0.3);
}
.sp-btn--primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(184,134,11,0.3);
    border-color: var(--sp-gold);
    background: transparent;
    color: var(--sp-gold);
}

.sp-btn--gold {
    background: var(--sp-grad-gold);
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(184,134,11,0.25);
}
.sp-btn--gold:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 40px rgba(184,134,11,0.35);
}

.sp-btn--large {
    padding: 20px 48px;
    font-size: 1.1rem;
}

/* ── Section Headers ── */
.sp-section-header {
    text-align: center;
    margin-bottom: 64px;
}

.sp-section-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    background: var(--sp-grad-gold);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
    margin-bottom: 12px;
}

.sp-section-subtitle {
    font-size: 1.1rem;
    color: var(--sp-text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Scroll Reveal Animation ── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   HERO SECTION - Cinematic
   ============================================================ */
.sp-hero {
    position: relative;
    height: 100svh;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sp-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) saturate(0.6);
    transform: scale(1.1);
    will-change: transform;
}

.sp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8,6,8,0.95) 0%, rgba(45,0,5,0.8) 50%, rgba(10,0,5,0.9) 100%);
}

.sp-hero__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(8,6,8,0.6) 100%);
    pointer-events: none;
}

.sp-hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.sp-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--sp-gold-light);
    border-radius: 50%;
    opacity: 0;
    animation: float-particle var(--dur, 8s) ease-in-out var(--del, 0s) infinite;
}

@keyframes float-particle {
    0%   { opacity: 0; transform: translateY(0) scale(0.3); }
    15%  { opacity: 0.8; }
    85%  { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-150px) scale(1); }
}

.sp-hero__content {
    position: relative;
    z-index: 2;
    padding: 100px 24px;
    max-width: 680px;
    margin-left: max(5vw, 24px);
}

.sp-hero__label {
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sp-gold);
    margin-bottom: 20px;
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--sp-border);
    border-radius: 30px;
}

.sp-hero__title {
    font-size: clamp(4rem, 12vw, 9rem);
    line-height: 0.9;
    font-weight: 900;
    margin-bottom: 16px;
}

.sp-hero__title-main {
    display: block;
    background: var(--sp-grad-gold);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
    /*
     * Fix for J descender being cut off:
     * The J glyph extends below baseline, so we extend
     * the content box with padding and allow overflow
     */
    padding: 0.05em 0.06em 0.18em 0.06em;
    overflow: visible;
    display: inline-block;
}

.sp-hero__title-amp {
    display: block;
    font-size: 0.35em;
    color: var(--sp-text-muted);
    font-style: italic;
    margin: -0.2em 0;
    padding-left: 0.1em;
}

.sp-hero__title-sub {
    display: block;
    color: #fff;
    font-style: italic;
    text-shadow: 0 0 60px rgba(212,175,55,0.3);
}

.sp-hero__subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--sp-text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.sp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(192,57,43,0.2);
    border: 1px solid var(--sp-crimson);
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 32px;
}

.sp-hero__badge-pulse {
    width: 8px;
    height: 8px;
    background: #ff4040;
    border-radius: 50%;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

.sp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.sp-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--sp-border);
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.9rem;
    color: var(--sp-text);
    transition: all var(--sp-transition);
}
.sp-meta-chip:hover {
    border-color: var(--sp-gold);
    background: rgba(184,134,11,0.12);
    transform: translateY(-2px);
}
.sp-meta-chip svg { width: 16px; height: 16px; color: var(--sp-gold-dark); }

/* Hero Image - Floating Effect */
.sp-hero__image {
    position: absolute;
    right: 5%;
    bottom: 0;
    height: 85%;
    max-width: 45%;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    animation: float-image 6s ease-in-out infinite;
}

@keyframes float-image {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.sp-hero__img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 0 60px rgba(212,175,55,0.25));
}

.sp-hero__image-glow {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 40%;
    background: radial-gradient(ellipse, rgba(184,134,11,0.15) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
}

.sp-hero__img {
    filter: drop-shadow(0 0 40px rgba(184,134,11,0.15));
}

/* Scroll Cue */
.sp-hero__scroll-cue {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 30px;
    height: 50px;
    border: 2px solid rgba(184,134,11,0.35);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--sp-transition);
}
.sp-hero__scroll-cue:hover { border-color: var(--sp-gold); }

.sp-hero__scroll-line {
    width: 2px;
    height: 12px;
    background: var(--sp-gold-dark);
    margin-top: 8px;
    border-radius: 1px;
    animation: scroll-line 1.8s ease infinite;
}

@keyframes scroll-line {
    0% { opacity: 1; transform: translateY(0); height: 12px; }
    50% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(20px); height: 4px; }
}

/* ============================================================
   LETTER SECTION
   ============================================================ */
.sp-letter {
    padding: 120px 0;
    background: var(--sp-dark);
    position: relative;
}

.sp-letter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sp-border), transparent);
}

.sp-letter__frame {
    background: var(--sp-dark-3);
    border: 1px solid var(--sp-border);
}

.sp-letter__highlight {
    background: linear-gradient(135deg, rgba(184,134,11,0.08) 0%, rgba(192,57,43,0.05) 100%);
    border: 1px solid var(--sp-border);
    color: var(--sp-gold-dark);
}

.sp-letter__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 60px;
}

.sp-letter__content {
    max-width: 600px;
}

.sp-letter__salutation {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--sp-gold);
    display: block;
    margin-bottom: 32px;
    line-height: 1.3;
}

.sp-letter__body p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--sp-text-muted);
    margin-bottom: 24px;
}

.sp-letter__body strong {
    color: var(--sp-text);
    font-weight: 600;
}

.sp-letter__body em {
    color: var(--sp-gold);
    font-style: italic;
}

.sp-letter__highlight {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(192,57,43,0.1) 100%);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    padding: 24px 28px;
    margin-top: 32px;
    font-size: 1.1rem;
    color: var(--sp-gold);
}
.sp-letter__highlight svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Letter Visual */
.sp-letter__visual {
    position: relative;
}

.sp-letter__frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.sp-letter__frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}
.sp-letter__frame:hover img { transform: scale(1.03); }

.sp-letter__frame-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(139,0,0,0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* Letter Continuation */
.sp-letter__continuation {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid var(--sp-border);
}

.sp-letter__continuation p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--sp-text-muted);
    margin-bottom: 28px;
}

.sp-letter__signoff {
    font-size: 1.3rem;
    color: var(--sp-text);
    margin-top: 40px;
}
.sp-letter__signoff strong {
    color: var(--sp-gold);
    display: block;
    margin-top: 8px;
    font-size: 1.5rem;
}

/* Continuation Section - Mirrored Layout with Image Left */
.sp-letter__continuation {
    max-width: 100%;
    margin: 0;
    text-align: left;
    padding-top: 60px;
    border-top: 1px solid var(--sp-border);
}

.sp-letter__continuation-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.sp-letter__continuation-visual {
    order: -1;
}

.sp-letter__continuation-visual .sp-letter__frame {
    max-width: 400px;
    margin: 0;
}

.sp-letter__continuation-content {
    max-width: 600px;
}

.sp-letter__continuation-content p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--sp-text-muted);
    margin-bottom: 28px;
    text-align: left;
}

.sp-letter__continuation-content .sp-letter__signoff {
    text-align: left;
    margin-top: 40px;
    border-top: none;
    padding-top: 0;
}

/* ============================================================
   SPONSORSHIP TIERS
   ============================================================ */
.sp-tiers {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--sp-dark) 0%, var(--sp-dark-2) 100%);
    position: relative;
}

.sp-tiers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sp-border), transparent);
}

.sp-tiers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

/* Tier Cards */
.sp-tier {
    position: relative;
    background: linear-gradient(145deg, #FFFFFF 0%, #F8F6F3 100%);
    border: 1px solid var(--sp-border);
    border-radius: 20px;
    padding: 40px 30px;
    overflow: hidden;
    transition: all var(--sp-transition);
}

.sp-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--sp-grad-gold);
    transform: scaleX(0);
    transition: transform var(--sp-transition);
}

.sp-tier:hover {
    transform: translateY(-12px);
    border-color: var(--sp-gold);
    box-shadow: 0 30px 80px rgba(184,134,11,0.15);
}
.sp-tier:hover::before { transform: scaleX(1); }

/* Silver Tier */
.sp-tier--silver { border-color: rgba(168,168,168,0.4); }
.sp-tier--silver .sp-tier__badge { background: linear-gradient(135deg, #A0A0A0, #D0D0D0); color: #FFFFFF; }
.sp-tier--silver .sp-tier__check { background: rgba(168,168,168,0.15); color: #888888; }

/* Gold Tier - Featured */
.sp-tier--gold {
    border-color: var(--sp-gold);
    transform: scale(1.05);
    z-index: 2;
    background: linear-gradient(145deg, #FFFFFF 0%, #F5F0E8 100%);
}
.sp-tier--gold .sp-tier__badge { background: var(--sp-grad-gold); color: #FFFFFF; }
.sp-tier--gold .sp-tier__check { background: rgba(184,134,11,0.15); color: var(--sp-gold-dark); }
.sp-tier--gold .sp-tier__shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(184,134,11,0.08) 50%, transparent 70%);
    animation: shine 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Platinum Tier */
.sp-tier--platinum { border-color: rgba(192,192,192,0.4); }
.sp-tier--platinum .sp-tier__badge { background: var(--sp-grad-plat); color: #444444; }
.sp-tier--platinum .sp-tier__check { background: rgba(192,192,192,0.15); color: #888888; }

.sp-tier__glow {
    background: radial-gradient(circle at center, rgba(184,134,11,0.1) 0%, transparent 70%);
}

.sp-tier__header {
    border-bottom: 1px solid var(--sp-border);
}

.sp-tier__feature {
    border-bottom: 1px solid rgba(184,134,11,0.1);
}

.sp-tier__glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, rgba(212,175,55,0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--sp-transition);
    pointer-events: none;
}
.sp-tier:hover .sp-tier__glow { opacity: 1; }

.sp-tier__header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-tier__badge {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.sp-tier__price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.sp-tier__currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--sp-text-muted);
    margin-top: 8px;
}

.sp-tier__amount {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--sp-text);
    line-height: 1;
}

.sp-tier__feature--highlight {
    color: var(--sp-gold-dark);
}

.sp-tier__features {
    list-style: none;
}

.sp-tier__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    font-size: 0.95rem;
    color: var(--sp-text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sp-tier__feature:last-child { border-bottom: none; }

.sp-tier__feature--highlight {
    color: var(--sp-gold);
    font-weight: 600;
}

.sp-tier__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sp-tier__check svg { width: 14px; height: 14px; }

/* ============================================================
   IMPACT STATS
   ============================================================ */
.sp-impact {
    padding: 100px 0;
    background: var(--sp-dark);
    position: relative;
}

.sp-impact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sp-border), transparent);
}

.sp-impact__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.sp-stat {
    padding: 30px;
    border: 1px solid var(--sp-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(28,5,8,0.5) 0%, rgba(17,3,8,0.5) 100%);
    transition: all var(--sp-transition);
}
.sp-stat:hover {
    border-color: var(--sp-gold);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(212,175,55,0.15);
}

.sp-stat__number {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 900;
    background: var(--sp-grad-gold);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 12px;
}

.sp-stat__icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 12px;
    color: var(--sp-gold);
}
.sp-stat__icon svg { width: 100%; height: 100%; }

.sp-stat__label {
    font-size: 0.9rem;
    color: var(--sp-text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ============================================================
   CTA / CONTACT SECTION
   ============================================================ */
.sp-cta {
    position: relative;
    padding: 140px 0;
    text-align: center;
    overflow: hidden;
}

.sp-cta__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.85) saturate(0.8);
}

.sp-cta__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--sp-dark) 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.9) 70%, var(--sp-dark) 100%);
}

.sp-contact-link {
    background: rgba(184,134,11,0.08);
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
}

.sp-contact-link:hover {
    border-color: var(--sp-gold);
    background: rgba(184,134,11,0.12);
}

.sp-cta__content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.sp-cta__title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    margin-bottom: 20px;
    background: var(--sp-grad-gold);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

.sp-cta__text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--sp-text-muted);
    margin-bottom: 40px;
}

.sp-cta__contact {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.sp-contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sp-text);
    text-decoration: none;
    padding: 16px 28px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--sp-border);
    border-radius: 50px;
    transition: all var(--sp-transition);
}
.sp-contact-link:hover {
    border-color: var(--sp-gold);
    background: rgba(212,175,55,0.1);
    transform: translateY(-3px);
}

.sp-contact-link__icon {
    width: 20px;
    height: 20px;
    color: var(--sp-gold);
}
.sp-contact-link__icon svg { width: 100%; height: 100%; }

.sp-contact-link__text {
    font-size: 1rem;
    font-weight: 600;
}

/* ============================================================
   IMAGE GALLERY - Infinite Scroll
   ============================================================ */
.sp-gallery {
    padding: 60px 0;
    background: var(--sp-dark-2);
    overflow: hidden;
}

.sp-gallery__track {
    display: flex;
    gap: 24px;
    animation: gallery-scroll 30s linear infinite;
    width: max-content;
}

.sp-gallery__track:hover {
    animation-play-state: paused;
}

@keyframes gallery-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sp-gallery__item {
    flex-shrink: 0;
    width: 300px;
    height: 380px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    transition: all var(--sp-transition);
    background: var(--sp-dark-3);
}

.sp-gallery__item:hover {
    transform: scale(1.05);
    border-color: var(--sp-gold);
    box-shadow: 0 20px 50px rgba(184,134,11,0.15);
}

.sp-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.sp-gallery__item:hover img { transform: scale(1.1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .sp-tiers__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .sp-tier--gold { transform: scale(1); }
    .sp-hero__image { display: none; }
    .sp-hero__content {
        margin: 0 auto;
        text-align: center;
    }
    .sp-hero__meta { justify-content: center; }
    .sp-letter__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .sp-letter__visual { order: -1; max-width: 400px; margin: 0 auto; }
    .sp-letter__continuation-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .sp-letter__continuation-visual {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }
    .sp-letter__continuation-content {
        text-align: center;
    }
    .sp-letter__continuation-content p,
    .sp-letter__continuation-content .sp-letter__signoff {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .sp-hero { min-height: auto; padding: 80px 0; }
    .sp-hero__content { padding: 60px 20px; }
    .sp-hero__title { font-size: clamp(3rem, 14vw, 5rem); }
    .sp-hero__meta {
        flex-direction: column;
        align-items: center;
    }
    .sp-meta-chip--loc { width: auto; }
    .sp-letter { padding: 80px 0; }
    .sp-impact__grid { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
    .sp-cta__contact { flex-direction: column; gap: 16px; align-items: center; }
    .sp-contact-link { width: 100%; max-width: 300px; justify-content: center; }
    .sp-gallery__item { width: 250px; height: 320px; }
}