.about-section-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-section-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.about-section-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.18);
    border-radius: var(--border-radius-md);
    pointer-events: none;
    z-index: 2;
}
/* About Section Two-Column Layout */
.about-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

.about-section-image-col {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}

.about-section-image {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    object-fit: cover;
}

.about-section-content-col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

@media (max-width: 991px) {
    .about-section-grid {
        grid-template-columns: 1fr;
    }
    .about-section-image-col {
        margin-bottom: 2rem;
    }
}
.story-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.story-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: block;
    position: relative;
    z-index: 1;
}

.story-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
        background: rgba(0,0,0,0.55);
    border-radius: var(--border-radius-md);
    pointer-events: none;
    z-index: 2;
}

.story-hero-logo-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    border-radius: var(--border-radius-md);
    pointer-events: none;
    z-index: 2;
    background: rgba(0,0,0,0.5);
    border-radius: var(--border-radius-md);
    pointer-events: none;
    z-index: 2;
}
.story-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.story-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: block;
}


/**
 * Main Stylesheet
 * B2BCarShows Website
 *
 * Typography: Font families come from CSS variables only.
 * - variables.css sets :root { --font-heading, --font-body } (defaults).
 * - dynamic-css.php overrides them from Settings → Typography (loads after this file).
 * Do not add hardcoded font-family for site text; use var(--font-heading) or var(--font-body).
 */

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    font-family: var(--font-body);
    /* scroll-behavior: smooth removed — it creates perceived scroll delay on desktop/tablet.
       Smooth scrolling is handled programmatically via JS window.scrollTo where needed. */
    /* Prevent iOS text size adjustment - vendor prefix required */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* overflow-x: hidden moved to .main-content (as overflow-x: clip) to avoid creating a scroll container on body */
}

/* Loading state */
body:not(.loaded) {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

body.loaded {
    opacity: 1;
}

/* Touch device optimizations */
.touch-device * {
    -webkit-tap-highlight-color: transparent;
}

/* Touch feedback (no inline styles): quick transition on press, standard on release */
.btn, .hero-flag-item, .gallery-item, .instagram-card {
    transition: transform 0.3s ease;
}
.touch-feedback-press {
    transition: transform 0.1s ease;
}

.touch-device button,
.touch-device .btn,
.touch-device a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}


/* Typography: H1/H2 use --font-heading, rest use --font-body (set in variables.css + dynamic-css.php) */
h1, h2 {
    font-family: var(--font-heading) !important;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

/* Hero title (H1) uses heading font */
h1.hero-title,
.hero-title,
h1.hero-title * {
    font-family: var(--font-heading) !important;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    font-family: var(--font-body);
    margin-bottom: var(--spacing-md);
}

/* Body/description text: one block, uses --font-body from Settings → Typography */
.section-description,
.page-subtitle,
.hero-description,
.event-timeline-title,
.event-card-content h3,
.event-timeline-meta,
.event-timeline-meta-item,
.event-timeline-meta-item span,
.event-card-meta,
.event-card-content p,
.btn-event-timeline,
.btn,
.btn-primary,
.btn-merch-shop,
.btn-secondary-light,
.experience-disclaimer,
.merch-card-label,
.merch-hero-label,
.instagram-follow-label,
.instagram-follow-username,
.newsletter-description,
.newsletter-input,
.newsletter-button,
.site-footer .footer-description,
.site-footer .footer-heading,
.site-footer .footer-links,
.site-footer .footer-links a,
.site-footer .footer-copyright,
.site-footer .footer-contact,
.site-footer .footer-contact a,
.site-footer .footer-contact span,
.story-paragraph,
.story-body-copy .story-paragraph {
    font-family: var(--font-body) !important;
}

a {
    color: var(--color-primary-red);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-red-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    width: 100%;
}

/* Responsive Container Padding */
@media (min-width: 480px) {
    .container {
        padding: 0 var(--container-padding-tablet);
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--container-padding-desktop);
    }
}

@media (min-width: 1440px) {
    .container {
        padding: 0 var(--container-padding-large);
    }
}

@media (min-width: 1920px) {
    .container {
        padding: 0 var(--container-padding-xlarge);
    }
}

/* Header Styles */
.main-header {
    background-color: transparent;
    color: var(--color-text-light);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-modal) + 5);
    transition: background-color var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base);
}

.main-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
    z-index: -1;
    opacity: 1;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.main-header.scrolled::before {
    opacity: 0;
}

.main-header.scrolled {
    background-color: rgba(0, 0, 0, 0.95);
    box-shadow: var(--shadow-md);
    position: fixed;
    backdrop-filter: blur(10px);
}

.header-container {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--container-padding-mobile);
    z-index: 1;
    width: 100%;
}

@media (min-width: 480px) {
    .header-container {
        padding: var(--spacing-md) var(--container-padding-tablet);
    }
}

@media (min-width: 768px) {
    .header-container {
        padding: var(--spacing-md) var(--container-padding-desktop);
    }
}

.header-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    z-index: 1;
    background-color: #000000 !important;
    background: #000000 !important;
    border-radius: 8px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid rgba(0, 191, 255, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 12px rgba(0, 191, 255, 0.25),
                0 0 25px rgba(0, 191, 255, 0.15);
}

.logo-section {
    flex-shrink: 0;
    position: relative;
    z-index: calc(var(--z-modal) + 10);
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
}

/* Adjust logo section gap on mobile when social icons are hidden */
@media (max-width: 767px) {
    .logo-section {
        gap: 0;
    }
    
    .header-content {
        background-color: #000000 !important;
        background: #000000 !important;
        border-radius: 8px;
        border: 1px solid rgba(0, 191, 255, 0.5);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                    0 0 25px rgba(0, 191, 255, 0.5),
                    0 0 50px rgba(0, 191, 255, 0.3),
                    0 0 75px rgba(0, 191, 255, 0.2);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

.logo-link {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
}

.logo-image {
    height: 50px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

.social-icons-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.social-icon-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.social-icon-link:hover {
    transform: scale(1.1);
}

.social-icon {
    height: 22px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Navigation */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.nav-link {
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-weight: 900;
    font-size: 0.9375rem;
    line-height: 1.8;
    padding: var(--spacing-xs) var(--spacing-xs);
    transition: color var(--transition-fast);
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.nav-link:hover {
    color: var(--color-primary-red);
}

.nav-link.active {
    color: var(--color-primary-red);
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background-color: var(--color-primary-red);
}

/* Desktop: show text only for nav links, icon only for login */
.nav-link .nav-link-icon {
    display: none;
}

.nav-link-login .nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-link-login .nav-link-text {
    display: none;
}

.nav-drawer-footer {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    position: relative;
    z-index: calc(var(--z-modal) + 10);
    margin-left: var(--spacing-lg);
}

.global-logo-section {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.global-logo-image {
    height: 42px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text-light);
    font-size: var(--font-size-xl);
    cursor: pointer;
    padding: var(--spacing-sm);
    z-index: calc(var(--z-modal) + 10);
    position: relative;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle:active {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
}

.mobile-menu-toggle:focus {
    outline: 2px solid var(--color-primary-red);
    outline-offset: 2px;
}

/* Ensure mobile menu toggle is hidden on desktop */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden;
    }
}

/* Tablet portrait: 768px-1023px — compact horizontal nav */
@media (min-width: 768px) and (max-width: 1023px) {
    .header-content {
        height: var(--header-height);
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .logo-section {
        gap: 0;
    }

    .logo-image {
        height: 46px;
        max-width: 150px;
    }

    .social-icons-container {
        display: none !important;
    }

    .main-navigation {
        display: flex;
        flex: 1;
        justify-content: flex-end;
    }

    .nav-menu {
        gap: 0;
    }

    .nav-link {
        font-size: 0.75rem;
        padding: var(--spacing-xs) 0.375rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .global-logo-image {
        height: 36px;
        max-width: 90px;
    }

    .header-actions {
        gap: var(--spacing-xs);
    }
}

/* Tablet landscape / Small desktop: 1024px-1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
    .logo-image {
        height: 42px;
        max-width: 170px;
    }

    .social-icons-container {
        display: none !important;
    }

    .logo-section {
        gap: 0;
    }

    .nav-link {
        font-size: 0.8125rem;
        padding: var(--spacing-xs) var(--spacing-xs);
        font-weight: 800;
    }

    .nav-menu {
        gap: 0;
    }

    .global-logo-image {
        height: 36px;
        max-width: 120px;
    }
}

/* Medium desktop: 1280px-1439px — show social icons, slightly compact */
@media (min-width: 1280px) and (max-width: 1439px) {
    .logo-section {
        gap: var(--spacing-md);
    }

    .social-icon {
        height: 20px;
    }

    .nav-link {
        font-size: 0.875rem;
        padding: var(--spacing-xs) var(--spacing-xs);
    }

    .global-logo-image {
        height: 40px;
        max-width: 150px;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    line-height: 1.5;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus {
    outline: 2px solid var(--color-primary-red);
    outline-offset: 2px;
}

.btn-primary {
    background-color: var(--color-primary-red);
    color: var(--color-text-light);
    border-color: var(--color-primary-red);
}

.btn-primary:hover {
    background-color: var(--color-primary-red-dark);
    border-color: var(--color-primary-red-dark);
    color: var(--color-text-light);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-light);
    border-color: var(--color-text-light);
    backdrop-filter: blur(5px);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-primary-black);
    border-color: rgba(255, 255, 255, 0.9);
}

/* Secondary button variant for light backgrounds */
.btn-secondary-light {
    background-color: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-dark);
}

.btn-secondary-light:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.btn-shop {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.shopee-icon-btn {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* Hero Section */
.hero-section {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--color-text-light);
    text-align: left;
    overflow: hidden;
    padding-top: var(--header-height-mobile);
}

@media (min-width: 768px) {
    .hero-section {
        padding-top: var(--header-height);
        min-height: 100vh;
    }
}

.hero-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background: #0a0a0a;
}

.hero-video-element {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    opacity: 1;
}

/* Hide all video controls */
.hero-video-element::-webkit-media-controls {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-enclosure {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-panel {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-play-button {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-start-playback-button {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-timeline {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-current-time-display {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-mute-button {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-volume-slider {
    display: none !important;
}

.hero-video-element::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Video controls hidden via attributes; no pseudo-elements used for compatibility */

/* Ensure no controls show on hover or interaction */
.hero-video-element:focus {
    outline: none;
}

.hero-video-element:hover::-webkit-media-controls {
    display: none !important;
}

.hero-video-element:hover::-webkit-media-controls-panel {
    display: none !important;
}

/* Additional hiding for all browsers */
video.hero-video-element {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

video.hero-video-element[controls] {
    display: none;
}

/* Hide any overlay controls */
.hero-video-background video::before,
.hero-video-background video::after {
    display: none !important;
}

/* Completely hide video element controls attribute */
.hero-video-element[controls],
.hero-video-element[controls="true"],
.hero-video-element[controls=""] {
    pointer-events: none;
}

.hero-video-element[controls]::-webkit-media-controls {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Prevent right-click context menu on video */
.hero-video-element {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (min-aspect-ratio: 16/9) {
    .hero-video-element {
        height: 56.25vw;
    }
}

@media (max-aspect-ratio: 16/9) {
    .hero-video-element {
        width: 177.78vh;
    }
}

/* YouTube Embed Styles */
.hero-youtube-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.hero-youtube-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%) translateZ(0);
    transform: translate(-50%, -50%) translateZ(0);
    border: none;
    z-index: 0;
    display: block;
    visibility: visible;
    opacity: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    filter: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Hide YouTube UI elements */
.hero-youtube-iframe {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hero-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.4s ease;
}

.hero-video-poster--hidden {
    opacity: 0;
    pointer-events: none;
}

.hero-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.hero-video-play-btn:hover {
    background: rgba(220, 7, 7, 0.9);
    transform: scale(1.05);
}

.hero-video-play-btn:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.hero-video-play-icon {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent currentColor;
}

.hero-video-play-btn--hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height-mobile));
}

@media (min-width: 768px) {
    .hero-container {
        min-height: calc(100vh - var(--header-height));
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (min-width: 480px) {
    .hero-container {
        padding: 0 var(--container-padding-tablet);
    }
}

@media (min-width: 768px) {
    .hero-container {
        padding: 0 var(--container-padding-desktop);
    }
}

.hero-content {
    padding: calc(var(--spacing-3xl) + var(--spacing-lg)) 0 var(--spacing-3xl);
    text-align: left;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    max-width: 100%;
    width: 100%;
}

.hero-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    margin-top: 0;
    line-height: 1;
    font-weight: 900;
    font-family: var(--font-heading) !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    align-self: flex-start;
}

.hero-title-image {
    max-width: 35%;
    min-width: 250px;
    height: auto;
    width: auto;
    display: block;
    margin-left: 0;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    transform: none;
    filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
    align-self: flex-start;
}

/* Keep image left-aligned on desktop */
@media (min-width: 768px) {
    .hero-title-image {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .hero-title {
        align-items: flex-start !important;
    }
    
    .hero-content {
        align-items: flex-start !important;
    }
}

/* Center image only on very small mobile screens */
@media (max-width: 479px) {
    .hero-title-image {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-title {
        align-items: center;
    }
}

.hero-year,
h1.hero-title .hero-year,
.hero-title .hero-year {
    font-size: 10rem;
    color: #ffffff;
    font-family: var(--font-heading) !important;
    font-weight: 950;
    font-style: italic;
    font-stretch: condensed;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 0.15rem;
    display: block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.hero-b2b-wrapper {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    line-height: 1;
    margin-bottom: 0;
}

.hero-b2b,
h1.hero-title .hero-b2b,
.hero-title .hero-b2b {
    display: inline-flex;
    align-items: baseline;
    font-size: 9rem;
    font-family: var(--font-heading) !important;
    font-weight: 950;
    font-style: italic;
    font-stretch: condensed;
    letter-spacing: 0.05em;
    line-height: 1;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.hero-b,
h1.hero-title .hero-b,
.hero-title .hero-b {
    color: #ffffff;
    display: inline-block;
    font-weight: 950;
    font-family: var(--font-heading) !important;
}

.hero-number,
h1.hero-title .hero-number,
.hero-title .hero-number {
    color: #DC143C;
    font-size: 10rem;
    font-family: var(--font-heading) !important;
    font-weight: 950;
    font-style: italic;
    font-stretch: condensed;
    position: relative;
    top: 0;
    margin: 0 0.05em;
    display: inline-block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


.hero-vibes {
    display: block;
    height: auto;
    max-width: 400px;
    width: auto;
    margin-left: 3.8rem;
    margin-top: -2.5rem;
    filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.6));
}

.hero-description {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-2xl);
    max-width: 600px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-start;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* Hero country flags bar */
.hero-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    margin-top: auto;
    z-index: 2;
}

/* hero-section, hero-container, hero-flags mobile overrides moved to single location
   in the "Mobile/Tablet Combined" @media block at ~line 3364 */

@media (min-width: 480px) {
    .hero-flags {
        right: var(--container-padding-tablet);
    }
}

@media (min-width: 768px) {
    .hero-flags {
        right: var(--container-padding-desktop);
        bottom: 3rem;
        gap: 1rem;
    }
}

.hero-flag-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-fast);
}

.hero-flag-item:hover {
    transform: translateY(-3px);
}

.hero-flag {
    width: 50px;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.hero-flag-item:hover .hero-flag {
    transform: scale(1.1);
}

.hero-flag-name {
    font-size: 0.625rem;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
    .hero-flag {
        width: 60px;
    }
    
    .hero-flag-name {
        font-size: 0.5625rem;
    }
}

/* Story Section */
.story-section {
    background-color: #1e1e1e;
    color: var(--color-text-light);
    padding: var(--spacing-3xl) 0;
    position: relative;
    width: 100%;
}

.story-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    width: 100%;
}

@media (min-width: 480px) {
    .story-container {
        padding: 0 var(--container-padding-tablet);
    }
}

@media (min-width: 768px) {
    .story-container {
        padding: 0 var(--container-padding-desktop);
    }
}

.story-content-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
}

@media (min-width: 768px) {
    .story-content-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--spacing-xl);
        align-items: start;
    }
}

.story-left-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.story-subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: #cccccc;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-xs);
}

.story-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    line-height: 1.1;
    margin: 0;
    font-family: var(--font-body);
}

@media (min-width: 768px) {
    .story-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .story-title {
        font-size: 4rem;
    }
}

.story-paragraph {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: #cccccc;
    line-height: 1.6;
    margin: 0;
}

.story-paragraph-left {
    margin-top: var(--spacing-sm);
}

.story-image-column {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.story-image-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
}

.story-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.story-right-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
}

.story-navigation {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-bottom: var(--spacing-sm);
}

@media (max-width: 767px) {
    .story-navigation {
        justify-content: flex-start;
        margin-top: var(--spacing-md);
    }
}

.story-nav-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    font-size: 1.5rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.story-nav-button:hover {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.story-nav-button:active {
    transform: scale(0.95);
}

.story-nav-button:focus {
    outline: 2px solid var(--color-text-light);
    outline-offset: 2px;
}

.story-paragraph-right {
    margin-top: 0;
}

/* Our Story hero: full background image, two-column layout */
.story-section-hero {
    background-color: #0d0d0d;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.story-section-hero .story-container {
    position: relative;
    z-index: 1;
}



.story-content-wrapper-two-col {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .story-content-wrapper-two-col {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-3xl);
        align-items: stretch;
    }
    .story-left-column,
    .story-right-column {
        height: 100%;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
    .story-image-wrapper {
        height: 100%;
        min-height: 100%;
        margin-top: 0;
        max-height: none;
    }
    .story-image {
        height: 100%;
        min-height: 100%;
        max-height: none;
    }
}

.story-brand-line {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 var(--spacing-xs) 0;
}

.story-section-hero .story-title {
    margin: 0;
    color: var(--color-text-light);
}

.story-team-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-md) 0;
    font-family: var(--font-body);
    line-height: 1.2;
}

@media (min-width: 768px) {
    .story-team-title {
        font-size: var(--font-size-3xl);
    }
}

.story-team-role {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--spacing-xs) 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.story-team-image-placeholder {
    margin-top: var(--spacing-lg);
    width: 100%;
    aspect-ratio: 4 / 3;
    max-width: 320px;
    background-color: rgba(255, 255, 255, 0.08);
    background-image: url('../images/background/our-story.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-md);
}

.story-left-column-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-hero-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.story-hero-logo-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .story-hero-logo-image {
        max-width: 85%;
    }
}

@media (min-width: 1024px) {
    .story-hero-logo-image {
        max-width: 80%;
    }
}

.story-right-column-copy {
    gap: var(--spacing-lg);
}

.story-body-copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.story-body-copy .story-paragraph {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    max-width: 100%;
}

/* Story Timeline Slider */
.story-timeline-wrapper {
    width: 100%;
    padding: var(--spacing-2xl) 0;
    margin-top: var(--spacing-3xl);
}

.story-timeline-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    display: flex;
    flex-direction: column;
}

.story-timeline-labels {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.6fr;
    align-items: flex-start;
    padding: 0 var(--spacing-sm);
    z-index: 2;
    margin-bottom: var(--spacing-xl);
}

.story-timeline-line-wrapper {
    position: relative;
    width: 100%;
    min-height: 24px;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
}

.story-timeline-line {
    position: absolute;
    top: 50%;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%);
    z-index: 1;
}

.story-timeline-nodes {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.6fr;
    align-items: center;
    width: 100%;
    z-index: 2;
    min-height: 24px;
}

.story-timeline-node {
    position: relative;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    justify-self: center;
    margin: 0 auto;
}

.story-timeline-node-ring {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background-color: transparent;
    transition: all var(--transition-base);
}

.story-timeline-node-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all var(--transition-base);
}

.story-timeline-node-glow {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    opacity: 0;
    transition: all var(--transition-base);
}

.story-timeline-node-active .story-timeline-node-ring {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-text-light);
    border-color: var(--color-text-light);
}

.story-timeline-node-active .story-timeline-node-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-text-light);
}

.story-timeline-node-active .story-timeline-node-glow {
    opacity: 1;
    animation: timeline-glow-pulse 2s ease-in-out infinite;
}


.story-timeline-node:hover .story-timeline-node-ring {
    border-color: rgba(255, 255, 255, 0.7);
}

.story-timeline-node:hover .story-timeline-node-dot {
    background-color: rgba(255, 255, 255, 0.5);
}

.story-timeline-node-compact {
    justify-self: center;
}

.story-timeline-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-body);
    text-align: center;
    transition: all var(--transition-base);
    user-select: none;
    cursor: pointer;
    justify-self: center;
    line-height: 1.2;
}

.story-timeline-label-active {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
}

.story-timeline-label-empty {
    visibility: hidden;
}

.story-timeline-label-compact {
    justify-self: center;
}

.story-timeline-label:hover {
    color: rgba(255, 255, 255, 0.8);
}

@keyframes timeline-glow-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.3;
    }
}

/* Timeline Responsive Styles */
@media (max-width: 768px) {
    .story-timeline-container {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .story-timeline-node {
        width: 10px;
        height: 10px;
    }
    
    .story-timeline-node-ring {
        width: 10px;
        height: 10px;
        border-width: 1px;
    }
    
    .story-timeline-node-dot {
        width: 5px;
        height: 5px;
    }
    
    .story-timeline-node-active .story-timeline-node-ring {
        width: 14px;
        height: 14px;
    }
    
    .story-timeline-node-active .story-timeline-node-dot {
        width: 7px;
        height: 7px;
    }
    
    .story-timeline-node-glow {
        width: 20px;
        height: 20px;
    }
    
    .story-timeline-label {
        font-size: var(--font-size-sm);
    }
    
    .story-timeline-label-active {
        font-size: var(--font-size-base);
    }
    
    .story-timeline-labels {
        margin-top: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .story-timeline-wrapper {
        padding: var(--spacing-xl) 0;
        margin-top: var(--spacing-2xl);
    }
    
    .story-timeline-container {
        padding: var(--spacing-md) var(--spacing-xs);
    }
    
    .story-timeline-label {
        font-size: var(--font-size-xs);
    }
    
    .story-timeline-label-active {
        font-size: var(--font-size-sm);
    }
}

/* Events Section */
.events-section {
    padding: var(--spacing-3xl) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 5.5rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary-red);
    overflow-wrap: break-word;
    word-break: break-word;
}

.section-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.event-card {
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    -webkit-tap-highlight-color: transparent;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.event-card:active {
    transform: translateY(-2px) scale(0.98);
}

.event-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--color-gray-light);
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-content {
    padding: var(--spacing-lg);
}

.event-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.event-meta i {
    color: var(--color-primary-red);
    margin-right: var(--spacing-xs);
}

.event-description {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.event-actions {
    margin-top: var(--spacing-md);
}

.section-footer {
    text-align: center;
}

/* Stats Section */
.stats-section {
    background: var(--color-bg-secondary);
    padding: var(--spacing-3xl) 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-2xl);
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-red);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Footer */
.site-footer {
    background-color: var(--color-primary-black);
    color: var(--color-text-light);
    padding: var(--spacing-2xl) 0 var(--spacing-md);
    margin-top: var(--spacing-3xl);
    position: relative;
    width: 100%;
    overflow: hidden;
    box-shadow: inset 0 1px 0 0 rgba(221, 7, 7, 0.3);
}

/* Remove footer top margin when sponsor section is present */
body.has-sponsor-section footer.site-footer,
body.has-sponsor-section .site-footer,
body:has(.sponsor-section) footer.site-footer,
body:has(.sponsor-section) .site-footer {
    margin-top: 0 !important;
}

/* Remove footer top margin for country pages */
body.country-page footer.site-footer,
body.country-page .site-footer {
    margin-top: 0 !important;
}

@media (min-width: 768px) {
    .site-footer {
        padding-top: var(--spacing-3xl);
        padding-bottom: var(--spacing-xl);
        padding-left: 0;
        padding-right: 0;
    }
}


.footer-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    width: 100%;
    position: relative;
    z-index: 1;
}

@media (min-width: 480px) {
    .footer-container {
        padding: 0 var(--container-padding-tablet);
    }
}

@media (min-width: 768px) {
    .footer-container {
        padding: 0 var(--container-padding-desktop);
    }
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    margin-top: 0;
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 2fr;
        gap: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
        margin-top: 0;
    }
}

.footer-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.footer-brand {
    max-width: 100%;
}

@media (min-width: 1024px) {
    .footer-brand {
        max-width: 350px;
    }
}

.footer-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary-red);
    letter-spacing: -0.02em;
    line-height: 1.3;
    font-family: var(--font-body);
}

.footer-logo-image {
    max-width: 200px;
    height: auto;
    display: block;
}

@media (min-width: 768px) {
    .footer-title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-md);
    }
}

.footer-description {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-md);
    max-width: 100%;
}

.footer-heading {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-light);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .footer-heading {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-xs);
    }
}

.footer-contact-heading {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

@media (min-width: 1024px) {
    .footer-contact-heading {
        margin-top: 0;
    }
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-xs);
}

.footer-links li:last-child {
    margin-bottom: 0;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    transition: color var(--transition-fast);
    display: inline-block;
}

.footer-links a:hover {
    color: var(--color-primary-red);
}

/* Social Links */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: all var(--transition-base);
    text-decoration: none;
    font-size: var(--font-size-base);
}

.social-link i {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 1.375rem;
}

.social-link:hover {
    background-color: var(--color-primary-red);
    border-color: var(--color-primary-red);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(221, 7, 7, 0.3);
}

.social-link:focus {
    outline: 2px solid var(--color-primary-red);
    outline-offset: 2px;
}

.shopee-logo-footer {
    width: 70%;
    height: 70%;
    object-fit: contain;
    padding: 0.2rem;
}

.social-link-shopee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Footer Contact */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact li:last-child {
    margin-bottom: 0;
}

.footer-contact i {
    color: var(--color-primary-red);
    width: 18px;
    min-width: 18px;
    font-size: var(--font-size-base);
    margin-top: 2px;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.footer-contact li i.fab {
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free";
    font-weight: 400;
    color: #ffffff;
    font-size: 1.25rem;
    width: 22px;
    min-width: 22px;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--transition-fast);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.footer-contact span {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Newsletter */
.newsletter-description {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

.newsletter-form {
    margin-bottom: var(--spacing-md);
}

.newsletter-input-group {
    display: flex;
    gap: var(--spacing-xs);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xs);
    transition: all var(--transition-fast);
}

.newsletter-input-group:focus-within {
    border-color: var(--color-primary-red);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(221, 7, 7, 0.1);
}

.newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    outline: none;
    font-family: var(--font-body);
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-button {
    background-color: var(--color-primary-red);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    font-size: var(--font-size-sm);
}

.newsletter-button:hover {
    background-color: var(--color-primary-red-dark);
    transform: scale(1.05);
}

.newsletter-button:active {
    transform: scale(0.98);
}

.newsletter-button i {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.newsletter-message {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    font-weight: 500;
}

.newsletter-message-show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.newsletter-message-icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.newsletter-message-text {
    flex: 1;
}

.newsletter-message-success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.08) 100%);
    color: #28a745;
    border: 2px solid rgba(40, 167, 69, 0.4);
    border-left: 4px solid #28a745;
}

.newsletter-message-success .newsletter-message-icon {
    color: #28a745;
}

.newsletter-message-error {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.08) 100%);
    color: #dc3545;
    border: 2px solid rgba(220, 53, 69, 0.4);
    border-left: 4px solid #dc3545;
}

.newsletter-message-error .newsletter-message-icon {
    color: #dc3545;
}

.footer-contact-info {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

/* Footer Bottom */
.footer-bottom {
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
    .footer-bottom {
        padding-top: var(--spacing-lg);
        margin-top: var(--spacing-xl);
    }
}

.footer-bottom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .footer-bottom-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-copyright {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

@media (min-width: 768px) {
    .footer-bottom-links {
        justify-content: flex-end;
        width: auto;
    }
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
    color: var(--color-primary-red);
}

.footer-separator {
    color: rgba(255, 255, 255, 0.3);
    font-size: var(--font-size-sm);
}

.footer-payment-methods {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

@media (min-width: 768px) {
    .footer-payment-methods {
        justify-content: flex-end;
        width: auto;
    }
}

.payment-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-xl);
    transition: opacity var(--transition-base);
    height: 26px;
    width: 48px;
    padding: 0;
    margin: 0;
}

.payment-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: opacity var(--transition-base);
    border-radius: 5px;
}

.payment-method-gcash .payment-logo,
.payment-method-paypal .payment-logo,
.payment-method-emt .payment-logo {
    border-radius: 5px;
}

.footer-payment-methods .payment-method-visa,
.footer-payment-methods .payment-method-mastercard,
.footer-payment-methods .payment-method-gcash,
.footer-payment-methods .payment-method-paypal,
.footer-payment-methods .payment-method-emt {
    height: 34px;
    width: 52px;
    background-color: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
}

.payment-method:hover .payment-logo {
    opacity: 0.8;
}

.payment-method:hover {
    opacity: 0.8;
}


.footer-admin-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-admin-link:hover {
    color: var(--color-primary-red);
}

/* Footer cover image (after footer, covers container) */
.footer-cover {
    width: 100%;
    overflow: hidden;
    display: block;
    line-height: 0;
}

.footer-cover-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Home page: remove white border lines from body sections (footer keeps its borders) */
body.home-page main .events-timeline-section,
body.home-page main .experience-section,
body.home-page main .official-merch-section,
body.home-page main .youtube-videos-section,
body.home-page main .autour-japan-section,
body.home-page main .about-section,
body.home-page main .sponsor-section,
body.home-page main .hero-section {
    border: none;
}

body.home-page main .events-timeline-header,
body.home-page main .events-tabs {
    border-bottom: none;
}

/* Sponsor section – single banner image */
.sponsor-section {
    width: 100%;
    background-color: var(--color-bg-primary);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-2xl);
    overflow: hidden;
}

.sponsor-section-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    width: 100%;
    text-align: center;
}

.sponsor-section .section-title.sponsor-section-title {
    margin-bottom: var(--spacing-sm);
    text-align: center;
    font-weight: 900;
    font-style: italic;
    font-synthesis: weight;
    -webkit-text-stroke: 0.03em currentColor;
    paint-order: stroke fill;
    text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor, 0 0.5px 0 currentColor, 0 -0.5px 0 currentColor, 1px 0 0 currentColor, -1px 0 0 currentColor, 0 1px 0 currentColor, 0 -1px 0 currentColor;
}

.sponsor-banner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.sponsor-banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

@media (min-width: 480px) {
    .sponsor-section-inner {
        padding: 0 var(--container-padding-tablet);
    }
}

@media (min-width: 768px) {
    .sponsor-section-inner {
        padding: 0 var(--container-padding-desktop);
    }

    .sponsor-section {
        padding-top: var(--spacing-3xl);
        padding-bottom: var(--spacing-2xl);
    }

    .sponsor-section .section-title.sponsor-section-title {
        margin-bottom: var(--spacing-md);
    }
}

/* Responsive Design - Mobile First */

/* Mobile: 320px - 479px – refinements only (drawer layout is in max-width: 767px) */
@media (max-width: 479px) {
    :root {
        --header-height: var(--header-height-mobile);
    }
    
    .header-content {
        height: var(--header-height-mobile);
        padding: var(--spacing-xs) var(--spacing-sm);
        background-color: #000000 !important;
        background: #000000 !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .logo-image {
        height: 50px;
        max-width: 180px;
    }
    
    .social-icon {
        height: 24px;
    }
    
    .social-icons-container {
        display: none !important;
    }
    
    .global-logo-section {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: var(--spacing-sm);
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }
    
    .header-actions {
        gap: var(--spacing-xs);
        position: relative;
        z-index: calc(var(--z-modal) + 10);
        flex-wrap: nowrap;
    }
    
    .header-actions .btn {
        position: relative;
        z-index: calc(var(--z-modal) + 10);
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
        min-height: 36px;
        white-space: nowrap;
        flex-shrink: 1;
    }
    
    .shopee-icon-btn {
        width: 16px;
        height: 16px;
    }
    
    .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    /* Mobile Footer */
    .site-footer {
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-sm);
        padding-left: 0;
        padding-right: 0;
    }
    
    .footer-content {
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .footer-column {
        margin-bottom: var(--spacing-xs);
    }
    
    .footer-brand {
        margin-bottom: var(--spacing-sm);
    }
    
    .footer-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-xs);
    }
    
    .footer-logo-image {
        max-width: 130px;
        margin-bottom: var(--spacing-xs);
    }
    
    .footer-heading {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-xs);
        margin-top: var(--spacing-xs);
    }
    
    .footer-description {
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-sm);
        line-height: 1.5;
    }
    
    .footer-contact-info {
        margin-bottom: var(--spacing-sm);
    }
    
    .footer-contact li {
        font-size: var(--font-size-xs);
        margin-bottom: 0.375rem;
        line-height: 1.4;
    }
    
    .footer-contact li i {
        font-size: 0.75rem;
        width: 14px;
    }
    
    .footer-contact li i.fab {
        font-size: 1.125rem;
        width: 20px;
        min-width: 20px;
        color: #ffffff;
    }
    
    .footer-links li {
        margin-bottom: 0.375rem;
    }
    
    .footer-links a {
        font-size: var(--font-size-xs);
        line-height: 1.4;
    }
    
    .social-links {
        gap: var(--spacing-xs);
        margin-top: var(--spacing-sm);
    }
    
    .social-link {
        width: 36px;
        height: 36px;
        min-width: 44px;
        min-height: 44px;
        font-size: var(--font-size-sm);
    }
    
    .newsletter-description {
        margin-bottom: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
    
    .newsletter-form {
        margin-bottom: var(--spacing-sm);
    }
    
    .newsletter-input-group {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .newsletter-input {
        min-height: 44px;
        font-size: var(--font-size-sm);
    }
    
    .newsletter-button {
        width: 100%;
        min-height: 44px;
        font-size: var(--font-size-sm);
    }
    
    .footer-bottom {
        padding-top: var(--spacing-sm);
        margin-top: var(--spacing-md);
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .footer-bottom-links {
        justify-content: center;
        gap: var(--spacing-xs);
    }
    
    .footer-bottom-links a {
        font-size: var(--font-size-xs);
    }
    
    .footer-copyright {
        font-size: var(--font-size-xs);
        line-height: 1.3;
    }
    
    .footer-payment-methods {
        gap: 3px !important;
        justify-content: center;
    }
    
    .payment-method {
        font-size: var(--font-size-base);
        height: 24px;
        width: 44px;
    }
    
    .hero-title {
        margin-bottom: var(--spacing-md);
    }
    
    .hero-title-image {
        max-width: 90%;
        min-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-title {
        align-items: center;
    }
    
    .hero-description {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-lg);
        line-height: 1.6;
    }
    
    .hero-content {
        padding: calc(var(--spacing-2xl) + var(--spacing-md)) 0 var(--spacing-lg);
    }
    
    .events-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .section-title,
    .experience-header .section-title,
    .sponsor-section .section-title.sponsor-section-title {
        font-size: 3.75rem;
    }
    
    .sponsor-section .section-title.sponsor-section-title {
        font-size: var(--font-size-xl);
        line-height: 1.2;
    }
}

/* Tablet: 480px - 767px */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --header-height: var(--header-height-mobile);
    }
    
    .header-content {
        height: var(--header-height-mobile);
        padding: var(--spacing-xs) var(--spacing-sm);
        background-color: #000000 !important;
        background: #000000 !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .logo-image {
        height: 60px;
        max-width: 220px;
    }
    
    .social-icon {
        height: 28px;
    }
    
    .social-icons-container {
        display: none !important;
    }
    
    .global-logo-section {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: var(--spacing-sm);
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }
    
    .header-actions {
        gap: var(--spacing-sm);
        position: relative;
        z-index: calc(var(--z-modal) + 10);
        flex-wrap: nowrap;
    }
    
    .header-actions .btn {
        position: relative;
        z-index: calc(var(--z-modal) + 10);
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-sm);
        min-height: 38px;
        white-space: nowrap;
        flex-shrink: 1;
    }
    
    .shopee-icon-btn {
        width: 18px;
        height: 18px;
    }
    
    .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    .hero-title {
        margin-bottom: var(--spacing-md);
    }
    
    .hero-title-image {
        max-width: 80%;
        min-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-title {
        align-items: center;
    }
    
    .hero-description {
        font-size: var(--font-size-lg);
    }
    
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
}

/* Mobile/Tablet Combined: up to 767px */
@media (max-width: 767px) {
    html {
        /* Prevent iOS text size adjustment - vendor prefix required */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* overflow-x: hidden removed from body - causes scroll-container issues.
           .main-content uses overflow-x: clip to prevent horizontal overflow
           without creating a scroll container (unlike hidden). */
        touch-action: manipulation;
    }
    
    /* Hide social icons and global logo on mobile */
    .social-icons-container {
        display: none !important;
    }
    
    .global-logo-section {
        display: none !important;
    }
    
    /* Ensure burger menu is always visible on mobile */
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    /* Center hero title image (b2b-global-vibes) on mobile; prevent overlap with header */
    .hero-content {
        align-items: center;
        padding-top: var(--spacing-xl);
        justify-content: center;
    }
    
    .hero-title {
        align-items: center;
        align-self: center;
        text-align: center;
        margin-top: 0 !important;
    }
    
    .hero-title-image {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        transform: none !important;
        align-self: center;
    }
    
    /* Ensure header stays on top when menu is open */
    .main-header {
        z-index: calc(var(--z-modal) + 5);
    }
    
    /* Prevent body scroll when mobile menu is open; top from --menu-scroll-y (set via JS) */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        top: var(--menu-scroll-y, 0);
        left: 0;
        width: 100%;
    }
    
    body.menu-open .main-header {
        z-index: calc(var(--z-modal) + 5);
    }
    
    body.menu-open .header-content {
        background: linear-gradient(135deg, #0d0d0d 0%, #1a0a0a 100%) !important;
        border-color: rgba(221, 7, 7, 0.4);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(221, 7, 7, 0.15);
    }
    
    /* Mobile nav drawer: hide horizontal nav, show as full-screen drawer when .active (480px–767px and below) */
    .main-navigation {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        background-color: #000000;
        background: #000000;
        padding-top: calc(var(--header-height-mobile) + max(var(--spacing-xl), env(safe-area-inset-top, 0px)));
        padding-left: max(var(--spacing-lg), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-lg), env(safe-area-inset-right, 0px));
        padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom, 0px));
        z-index: var(--z-modal);
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity var(--transition-base), transform var(--transition-base);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .main-navigation.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }
    
    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        flex: 0 0 auto;
    }
    
    .nav-item {
        width: 100%;
    }
    
    .nav-item-login {
        margin-left: 0;
    }
    
    .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: var(--spacing-lg) var(--spacing-md);
        font-size: 1.25rem;
        min-height: 56px;
        border-radius: var(--border-radius-md);
        transition: all var(--transition-base);
        -webkit-tap-highlight-color: transparent;
        gap: var(--spacing-md);
        color: var(--color-text-light);
    }
    
    .nav-link-login {
        display: flex;
        align-items: center;
        min-height: 56px;
    }
    
    .nav-link .nav-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        min-width: 1.5rem;
        font-size: 1.25rem;
        color: var(--color-text-light);
        transition: color var(--transition-base);
    }
    
    .nav-link.active,
    .nav-link.active .nav-link-icon {
        color: var(--color-primary-red);
    }
    
    .nav-link .nav-link-text {
        flex: 1;
    }
    
    .nav-link-login .nav-link-text {
        display: inline;
    }
    
    .nav-link:active {
        background-color: rgba(255, 255, 255, 0.1);
        transform: scale(0.98);
    }
    
    .nav-link.active::after {
        display: none;
    }
    
    .nav-drawer-footer {
        display: block;
        margin-top: auto;
        padding-top: var(--spacing-2xl);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
    }
    
    .nav-drawer-footer-label {
        font-size: var(--font-size-sm);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.6);
        margin: 0 0 var(--spacing-md);
    }
    
    .nav-drawer-social-links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-md);
        align-items: center;
    }
    
    .nav-drawer-social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        transition: background var(--transition-base), transform var(--transition-base);
        -webkit-tap-highlight-color: transparent;
    }
    
    .nav-drawer-social-link:hover,
    .nav-drawer-social-link:focus {
        background: rgba(221, 7, 7, 0.25);
        transform: scale(1.05);
    }
    
    .nav-drawer-social-link:active {
        transform: scale(0.98);
    }
    
    .nav-drawer-social-link img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }
    
    .hero-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero-content {
        order: 1;
        padding: calc(var(--spacing-2xl) + var(--spacing-md)) 0 var(--spacing-lg);
    }
    
    .hero-description {
        max-width: 100%;
        font-size: var(--font-size-lg);
        line-height: 1.6;
        margin-bottom: var(--spacing-lg);
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-md);
        order: 2;
        margin-bottom: var(--spacing-md);
    }
    
    .hero-actions .btn {
        width: 100%;
        max-width: 100%;
        min-height: 52px;
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        padding: var(--spacing-md) var(--spacing-xl);
    }
    
    .hero-section {
        position: relative;
    }
    
    .hero-container {
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    /* hero-flags position overridden to relative in "Hero Flags - Improved Mobile Layout" block below */
    
    /* Improve touch targets for all interactive elements */
    a, button, input, select, textarea {
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Better form inputs on mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: var(--spacing-md);
        border-radius: var(--border-radius-md);
        min-height: 48px;
    }
    
    /* Better card spacing */
    .event-card,
    .event-timeline-card {
        margin-bottom: var(--spacing-lg);
    }
    
    /* Improve section spacing */
    section {
        padding-left: var(--container-padding-mobile);
        padding-right: var(--container-padding-mobile);
    }
    
    .container {
        padding-left: var(--container-padding-mobile);
        padding-right: var(--container-padding-mobile);
    }
    
    /* Prevent horizontal overflow and improve text wrapping */
    .section-title,
    .page-title,
    .hero-description,
    .footer-heading,
    .footer-copyright,
    .footer-bottom-links a {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .main-content {
        overflow-x: clip;
    }
}

/* Small Mobile: up to 479px - Additional overrides */
@media (max-width: 479px) {
    html {
        font-size: 14px;
    }
    
    .header-actions .btn {
        display: none;
    }
    
    .header-actions .btn:last-child {
        display: inline-flex;
    }
    
    /* Better hero section on small mobile */
    .hero-section {
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: var(--spacing-xl);
    }
    
    .hero-content {
        padding: var(--spacing-xl) 0;
        text-align: center;
    }
    
    .hero-title {
        align-items: center;
        text-align: center;
    }
    
    .hero-title-image {
        max-width: 95%;
        min-width: 240px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-title {
        align-items: center;
        text-align: center;
    }
    
    .hero-description {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-md);
        text-align: center;
        max-width: 100%;
    }
    
    .hero-flag {
        width: 45px;
    }
    
    .hero-flag-name {
        font-size: 0.5625rem;
    }
    
    /* Improve section titles */
    .section-title,
    .experience-header .section-title,
    .sponsor-section .section-title.sponsor-section-title {
        font-size: 3rem;
        line-height: 1.1;
    }
    
    .sponsor-section .section-title.sponsor-section-title {
        font-size: var(--font-size-2xl);
        line-height: 1.2;
    }
    
    /* Better spacing for cards */
    .event-card,
    .event-timeline-card {
        margin-bottom: var(--spacing-md);
    }
    
    /* Improve button spacing */
    .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        min-height: 48px;
    }
}

/* Tablet Landscape & Desktop: 768px and up */
@media (min-width: 768px) {
    .main-navigation {
        display: flex;
    }
    
    .mobile-menu-toggle {
        display: none;
    }
    
    /* Ensure image is left-aligned and vertically centered on desktop */
    .hero-title-image {
        margin-left: 0 !important;
        margin-right: auto !important;
        margin-top: 0;
        transform: none;
    }
    
    .hero-title {
        align-items: flex-start !important;
        margin-top: 0;
    }
    
    .hero-content {
        align-items: flex-start !important;
        justify-content: center;
    }
    
    .events-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Large Desktop: 1440px and up */
@media (min-width: 1440px) {
    .hero-title-image {
        max-width: 42%;
        margin-top: 0;
        transform: none;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .hero-title {
        align-items: flex-start !important;
    }
    
    .hero-content {
        align-items: flex-start !important;
    }
    
    .hero-description {
        max-width: 900px;
    }
    
    .events-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: var(--spacing-2xl);
    }
}

/* Page Header Section - Prevents header overlap (uniform height across all pages) */
.page-header-section {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%) !important;
    background-color: #000000 !important;
    position: relative;
    color: var(--color-text-light);
    padding-top: calc(var(--header-height-mobile) + var(--spacing-lg)) !important;
    padding-bottom: var(--spacing-2xl) !important;
    text-align: left;
    min-height: 240px !important;
}

.page-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(26, 26, 26, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%) !important;
    z-index: 0;
    pointer-events: none;
}

.page-header-section .container {
    position: relative;
    z-index: 1;
    margin-top: var(--spacing-2xl);
    text-align: left;
}

@media (min-width: 768px) {
    .page-header-section .container {
        margin-top: var(--spacing-3xl);
    }
}

@media (max-width: 480px) {
    .page-header-section .container {
        margin-top: var(--spacing-xl);
    }
}

@media (min-width: 768px) {
    .page-header-section {
        background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%) !important;
        background-color: #000000 !important;
        padding-top: calc(var(--header-height) + var(--spacing-xl)) !important;
        padding-bottom: var(--spacing-2xl) !important;
        min-height: 280px !important;
    }
}

@media (max-width: 480px) {
    .page-header-section {
        background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%) !important;
        background-color: #000000 !important;
        padding-top: calc(var(--header-height-mobile) + var(--spacing-lg)) !important;
        padding-bottom: var(--spacing-2xl) !important;
        min-height: 220px !important;
    }
    

    
    .page-subtitle {
        font-size: var(--font-size-base);
    }
}

.page-title {
    font-size: calc(var(--font-size-5xl) * 1.18);
    font-weight: 900;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light);
    font-family: var(--font-heading);
    text-transform: uppercase;
    text-align: left;
    font-style: italic;
    font-variation-settings: 'slnt' 10;
}

.page-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    text-align: left;
}

/* Main Content - Ensure proper spacing when header is fixed */
.main-content {
    position: relative;
    overflow-x: clip;
}

/* Ensure first section in main-content has proper spacing if it's not hero or page-header */
/* This handles sections like auth-section, contact-section, etc. */
.main-content > section:first-child:not(.hero-section):not(.page-header-section):not(.story-section-hero) {
    padding-top: calc(var(--header-height-mobile) + var(--spacing-2xl));
    margin-top: 0;
}

@media (min-width: 768px) {
    .main-content > section:first-child:not(.hero-section):not(.page-header-section):not(.story-section-hero) {
        padding-top: calc(var(--header-height) + var(--spacing-3xl));
    }
}

@media (max-width: 480px) {
    .main-content > section:first-child:not(.hero-section):not(.page-header-section):not(.story-section-hero) {
        padding-top: calc(var(--header-height-mobile) + var(--spacing-xl));
    }
}

/* Official Merch Section - Home Page Layout */
.official-merch-section {
    background-color: #ffffff;
    padding: 0;
    padding-bottom: var(--spacing-xl);
    width: 100%;
    position: relative;
}

.merch-hero-banner {
    position: relative;
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.official-merch-section .merch-hero-banner {
    justify-content: flex-start;
    background-color: #000000;
}

.merch-hero-banner-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 3.5rem 1rem 0 4rem;
    box-sizing: border-box;
    z-index: 2;
}

.merch-hero-banner-logo {
    height: auto;
    max-height: 260px;
    width: auto;
    max-width: 48%;
    object-fit: contain;
    object-position: left top;
    transform: translate(1.5rem, 1.5rem);
}

.merch-hero-banner-right {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 2rem 0 1rem;
    box-sizing: border-box;
    z-index: 2;
}

.merch-hero-banner-image {
    height: 100%;
    width: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: right bottom;
    transform: translate(-62%, 22%) scale(1.32);
}

.merch-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/merch/merch-background.webp');
}

.official-merch-section .merch-hero-background {
    background-image: none;
    background-color: #000000;
}

.merch-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 5%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.merch-hero-content {
    padding: 3rem 0;
    text-align: left;
    width: auto;
    max-width: 100%;
}

.official-merch-section .merch-hero-content,
.official-merch-section .merch-hero-label,
.official-merch-section .merch-hero-title {
    text-align: left;
}

.official-merch-section .btn-merch-shop {
    align-self: flex-start;
}

.merch-hero-label {
    font-family: var(--font-body);
    display: block;
    font-size: 2.75rem;
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #ffffff;
    paint-order: stroke fill;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8), -1px -1px 2px rgba(255,255,255,0.8);
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.merch-hero-title {
    font-family: var(--font-heading);
    font-size: 7rem;
    font-weight: 900;
    color: #000000;
    -webkit-text-stroke: 2px #ffffff;
    paint-order: stroke fill;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.8), -2px -2px 4px rgba(255,255,255,0.8);
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    line-height: 1;
}

.btn-merch-shop {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: #dc143c;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-merch-shop:hover {
    background: #b71c1c;
    color: #ffffff;
    transform: translateY(-1px);
}

.merch-cards-wrapper {
    max-width: var(--container-max-width);
    margin: -4rem auto 3rem;
    padding: 2rem 5%;
    position: relative;
    z-index: 3;
    background-color: #ffffff;
}

.merch-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.merch-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
}

.merch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.merch-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.merch-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: none;
}

.merch-card:hover .merch-card-image img {
    transform: none;
}

.merch-card-label,
.official-merch-section .merch-card .merch-card-label {
    display: block;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
    color: #1a1a1a;
    padding: 1rem 0.5rem 0;
    padding-left: 0.75rem;
    font-family: var(--font-body);
}

@media (max-width: 992px) {
    .merch-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .official-merch-section {
        padding: 0;
        padding-bottom: var(--spacing-lg);
    }
    
    .merch-hero-banner {
        min-height: 320px;
    }
    
    .merch-hero-banner-left {
        padding: 2.5rem 1rem 0;
        justify-content: center;
        align-items: center;
    }
    
    .merch-hero-banner-logo {
        max-height: 260px;
        max-width: 75%;
        transform: none;
        object-position: center;
    }
    
    .merch-hero-banner-right {
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    
    .merch-hero-banner-image {
        display: none;
    }
    
    .merch-hero-inner {
        padding: 0 var(--spacing-lg);
    }
    
    .merch-hero-title {
        font-size: 4rem;
    }
    
    .merch-cards-wrapper {
        margin-top: -3rem;
        margin-bottom: 2rem;
        padding: 1.25rem 0.75rem;
    }
    
    .merch-cards-container {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .merch-card {
        padding: 0;
        border-radius: 8px;
    }

    .merch-card-image {
        aspect-ratio: 16 / 10;
        border-radius: 8px 8px 0 0;
    }

    .merch-card-image img {
        object-fit: cover;
    }

    .merch-card-label,
    .official-merch-section .merch-card .merch-card-label {
        font-size: 1.25rem;
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .merch-hero-banner {
        min-height: 280px;
    }
    
    .merch-hero-banner-left {
        padding: 2rem 0.5rem 0;
        justify-content: center;
        align-items: center;
    }
    
    .merch-hero-banner-logo {
        max-height: 200px;
        max-width: 85%;
        transform: none;
        object-position: center;
    }
    
    .merch-hero-banner-right {
        align-items: center;
        justify-content: center;
        padding: 0.75rem;
    }
    
    .merch-hero-banner-image {
        display: none;
    }
    
    .merch-hero-inner {
        padding: 0 var(--spacing-lg);
    }
    
    .merch-hero-title {
        font-size: 3.25rem;
    }
    
    .merch-cards-wrapper {
        margin-top: -2rem;
        padding: 1rem 0.5rem;
    }
}

/* YouTube Videos Section (homepage, after merch) */
.youtube-videos-section {
    padding: var(--spacing-3xl) 0;
    background-color: #000;
}

.youtube-videos-section::before,
.youtube-videos-section::after {
    display: none !important;
}

.youtube-videos-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

.youtube-videos-section .youtube-videos-section-title {
    font-family: var(--font-heading);
    font-style: italic;
    color: #fff;
    margin-bottom: 0;
}

.youtube-videos-section .youtube-videos-explore-link {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
    border-bottom: 2px solid #e00;
    transition: opacity 0.2s ease;
}

.youtube-videos-explore-link:hover {
    opacity: 0.8;
}

.youtube-videos-rows-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
}

.youtube-videos-rows-wrap::before,
.youtube-videos-rows-wrap::after,
.youtube-videos-row::before,
.youtube-videos-row::after {
    display: none !important;
}

.youtube-videos-rows {
    margin-bottom: var(--spacing-2xl);
}

.youtube-videos-row {
    overflow: hidden;
    margin-bottom: 1.75rem;
    contain: paint;
}

.youtube-videos-row:last-child {
    margin-bottom: 0;
}

.youtube-videos-row-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.75rem;
    width: 200%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.youtube-videos-row .youtube-video-card {
    flex: 0 0 calc((100% - 12.25rem) / 8);
    min-width: 0;
}

@keyframes youtube-slide-left {
    0% { transform: translateX(0) translateZ(0); }
    100% { transform: translateX(-50%) translateZ(0); }
}

@keyframes youtube-slide-right {
    0% { transform: translateX(-50%) translateZ(0); }
    100% { transform: translateX(0) translateZ(0); }
}

.youtube-videos-row-inner--left {
    animation: youtube-slide-left 40s linear infinite;
}

.youtube-videos-row-inner--right {
    animation: youtube-slide-right 40s linear infinite;
}

.youtube-videos-section .youtube-video-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-color: #000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.youtube-videos-section .youtube-video-card:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.youtube-video-thumb-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #1a1a1a;
}

.youtube-video-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
}

.youtube-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.youtube-video-play-icon::after {
    content: "";
    margin-left: 4px;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
}

.youtube-video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1rem 1.25rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.youtube-video-overlay-location {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.youtube-video-overlay-date {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
}

.youtube-video-embed-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #000;
}

.youtube-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtube-videos-cta-wrap {
    text-align: center;
}

.youtube-videos-section .youtube-videos-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.youtube-videos-playlist-fallback {
    margin-bottom: var(--spacing-2xl);
}

.youtube-videos-playlist-fallback .youtube-playlist-embed-wrap {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background-color: #000;
}

.youtube-videos-empty-hint {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-sm);
    margin: 0;
    padding: var(--spacing-lg) 0;
}

.youtube-videos-empty-hint a {
    color: #fff;
    text-decoration: underline;
}

.youtube-videos-fallback {
    text-align: center;
    padding: var(--spacing-2xl);
    background-color: var(--color-bg-secondary, #0f0f0f);
    border-radius: 8px;
}

.youtube-videos-fallback-text {
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
}

.youtube-videos-fallback .youtube-videos-cta {
    display: inline-flex;
}

@media (max-width: 1024px) {
    .youtube-videos-row .youtube-video-card {
        flex: 0 0 calc((100% - 10.5rem) / 8);
    }
}

@media (max-width: 768px) {
    .youtube-videos-row-inner {
        gap: 1rem;
        width: 300%;
    }

    .youtube-videos-row .youtube-video-card {
        flex: 0 0 calc((100% - 7rem) / 6);
    }

    .youtube-video-overlay-location {
        font-size: 0.9375rem;
    }

    .youtube-video-overlay-date {
        font-size: 0.75rem;
    }

    .youtube-video-play-icon {
        width: 40px;
        height: 40px;
    }

    .youtube-video-play-icon::after {
        border-width: 7px 0 7px 13px;
    }
}

@media (max-width: 480px) {
    .youtube-videos-section {
        padding: var(--spacing-2xl) 0;
    }

    .youtube-videos-row-inner {
        width: 400%;
        gap: 0.75rem;
    }

    .youtube-videos-row .youtube-video-card {
        flex: 0 0 calc((100% - 3rem) / 4);
    }

    .youtube-video-overlay {
        padding: 0.5rem;
    }

    .youtube-video-overlay-location {
        font-size: 0.75rem;
    }

    .youtube-video-overlay-date {
        font-size: 0.625rem;
    }
}

/* AUTOUR JAPAN Section (after Past Videos) */
.autour-japan-section {
    position: relative;
    padding: var(--spacing-3xl) 0;
    background-color: #0a0a0a;
    overflow: hidden;
}

/* Remove gap between Past Videos and Autour Japan; balance top and bottom padding */
.youtube-videos-section + .autour-japan-section {
    margin-top: calc(-2 * var(--spacing-3xl));
    padding-top: var(--spacing-3xl);
}

.autour-japan-section-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("../images/autourjapan/IMG_9153.webp"), url("../images/autour/2.webp");
    background-size: cover, cover;
    background-position: center, center;
    background-blend-mode: overlay;
    opacity: 0.12;
}

.autour-japan-container {
    position: relative;
    z-index: 1;
}

.autour-japan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    min-height: 500px;
}

.autour-japan-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.autour-japan-logo-wrap {
    margin-bottom: var(--spacing-xl);
}

.autour-japan-logo {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    object-fit: contain;
}

.autour-japan-tagline {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-style: italic;
    font-size: clamp(1.15rem, 1.4vw, 1.5rem);
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1.65;
    margin-bottom: var(--spacing-xl);
}

.autour-japan-cta-wrap {
    display: flex;
    justify-content: flex-end;
}

.autour-japan-cta {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-style: italic;
    font-size: var(--font-size-xl);
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 2px solid #e00;
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
}

.autour-japan-cta:hover {
    opacity: 0.85;
}

.autour-japan-collage {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.autour-japan-collage-item {
    position: absolute;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.autour-japan-collage-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* All collage items: same size, no tilt */
/* Item 1: 4.webp — top left */
.autour-japan-collage-item--1 {
    width: 36%;
    aspect-ratio: 4 / 3;
    top: 0;
    left: 0;
    z-index: 2;
}

/* Item 2: 6.webp — top right */
.autour-japan-collage-item--2 {
    width: 36%;
    aspect-ratio: 4 / 3;
    top: 0;
    right: 0;
    z-index: 2;
}

/* Item 3: 1.webp — top center, slightly lower between 4 & 6 */
.autour-japan-collage-item--3 {
    width: 36%;
    aspect-ratio: 4 / 3;
    top: 8%;
    left: 32%;
    z-index: 3;
}

/* Item 4: 5.webp — center left */
.autour-japan-collage-item--4 {
    width: 36%;
    aspect-ratio: 4 / 3;
    top: 40%;
    left: 4%;
    z-index: 4;
}

/* Item 5: 3.webp — center right */
.autour-japan-collage-item--5 {
    width: 36%;
    aspect-ratio: 4 / 3;
    top: 38%;
    right: 2%;
    z-index: 3;
}

/* Item 6: 2.webp — bottom center, sent to back */
.autour-japan-collage-item--6 {
    width: 36%;
    aspect-ratio: 4 / 3;
    bottom: 0;
    left: 32%;
    z-index: 1;
}

@media (max-width: 1024px) {
    .autour-japan-grid {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: var(--spacing-2xl);
    }

    .autour-japan-content {
        max-width: 100%;
        text-align: center;
    }

    .autour-japan-logo-wrap {
        display: flex;
        justify-content: center;
    }

    .autour-japan-cta-wrap {
        justify-content: center;
    }

    .autour-japan-collage {
        min-height: 420px;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .autour-japan-section {
        padding: var(--spacing-2xl) 0;
    }

    .autour-japan-collage {
        min-height: 360px;
    }

    .autour-japan-collage-item--3 { left: 30%; }
    .autour-japan-collage-item--6 { left: 30%; }
}

@media (max-width: 480px) {
    .autour-japan-tagline {
        font-size: var(--font-size-sm);
    }

    .autour-japan-collage {
        min-height: 300px;
    }

    .autour-japan-collage-item { width: 38%; }
    .autour-japan-collage-item--3 { left: 28%; }
    .autour-japan-collage-item--6 { left: 28%; }
}

/* ============================================================
   About Section
   ============================================================ */
.about-section {
    position: relative;
    padding: var(--spacing-3xl) 0;
    overflow: hidden;
}

.about-section-bg {
    position: absolute;
    inset: 0;
    background: url("../images/background/about-bg.webp") center / cover no-repeat;
    z-index: 0;
}

.about-section-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1;
}

.about-section-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.about-card {
    width: 100%;
    max-width: 820px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-xl);
}

.about-card-header {
    margin-bottom: var(--spacing-lg);
}

.about-card-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
}

.about-card-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary-red);
    flex-shrink: 0;
}

.about-card-logo-inline {
    display: inline;
    height: 2.8em;
    width: auto;
    vertical-align: baseline;
    object-fit: contain;
    margin-right: 0.45em;
}

.about-card-text {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-style: italic;
    font-size: clamp(2rem, 3.2vw, 3.5rem);
    line-height: 1.7;
    color: #fff;
    letter-spacing: 0.01em;
}

.about-card-highlight {
    color: var(--color-primary-red);
}

.about-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-xl);
}

.about-card-cta {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-style: italic;
    font-size: var(--font-size-base);
    letter-spacing: 0.08em;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 3px solid var(--color-primary-red);
    padding-bottom: 3px;
    transition: opacity var(--transition-fast);
}

.about-card-cta:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .about-section {
        padding: var(--spacing-2xl) 0;
    }

    .about-card {
        padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    }

}

@media (max-width: 480px) {
    .about-card {
        padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
        border-radius: var(--border-radius-md);
    }

    .about-card-text {
        font-size: var(--font-size-3xl);
    }

    .about-card-cta {
        font-size: var(--font-size-sm);
    }
}

/* What You Will Experience Section */
.experience-section {
    padding: var(--spacing-3xl) 0;
    background-color: #ffffff;
}

.experience-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.experience-header .section-title {
    color: #1a1a1a;
    font-size: 6rem;
    font-weight: 950;
}

.experience-section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
}

.experience-section-title .experience-title-image {
    height: 1em;
    min-height: 130px;
    width: auto;
    max-height: 165px;
    object-fit: contain;
    vertical-align: middle;
}

.experience-section-title .experience-title-text {
    display: inline;
    font-family: var(--font-heading);
    font-weight: 900;
    font-style: italic;
    font-synthesis: weight;
    -webkit-text-stroke: 0.03em currentColor;
    paint-order: stroke fill;
    text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor, 0 0.5px 0 currentColor, 0 -0.5px 0 currentColor, 1px 0 0 currentColor, -1px 0 0 currentColor, 0 1px 0 currentColor, 0 -1px 0 currentColor;
}

.experience-section-title .experience-title-text:last-child {
    margin-left: -0.15em;
}

.experience-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.experience-carousel-container {
    overflow: hidden;
    width: 100%;
}

.experience-carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

.experience-carousel-slide {
    flex: 0 0 25%;
    min-width: 25%;
    padding: 0 0.5rem;
    position: relative;
}

.vibes-carousel {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 560px;
    max-height: 720px;
    overflow: hidden;
    border-radius: 12px;
}

.vibes-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    display: block;
}

.experience-carousel-slide-title {
    margin: 0.75rem 0 0;
    padding: 0;
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-body);
}

.experience-disclaimer {
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: var(--spacing-2xl) 0 0;
    padding: 0;
    line-height: 1.5;
}

@media (max-width: 1200px) {
    .experience-carousel-slide {
        flex: 0 0 33.333%;
        min-width: 33.333%;
    }
}

@media (max-width: 768px) {
    .experience-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .experience-header {
        margin-bottom: var(--spacing-xl);
    }
    
    .experience-header .section-title.experience-section-title {
        font-size: 3rem;
        line-height: 1.1;
    }
    
    .experience-section-title .experience-title-image {
        height: auto !important;
        min-height: 52px !important;
        max-height: 68px !important;
    }
    
    .experience-carousel-slide {
        flex: 0 0 100%;
        min-width: 100%;
    }
    
    .vibes-carousel {
        min-height: 420px;
    }
    
    .experience-carousel-slide-title {
        font-size: 0.9rem;
    }
    
    .experience-disclaimer {
        font-size: 1rem;
        margin-top: var(--spacing-xl);
    }
}

@media (max-width: 480px) {
    .vibes-carousel {
        min-height: 360px;
    }
    
    .experience-disclaimer {
        font-size: 0.9375rem;
        margin-top: var(--spacing-lg);
    }
}

/* Instagram Follow Section */
.instagram-follow-section {
    background-color: #ffffff;
    padding-top: var(--spacing-3xl);
    padding-bottom: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
}

.instagram-follow-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.instagram-follow-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
    gap: 0;
}

.instagram-follow-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.instagram-follow-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.instagram-follow-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: #E4405F;
}

.instagram-follow-username {
    font-size: 3.25rem;
    font-weight: 900;
    color: #000000;
    margin: 0;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-decoration: none;
    line-height: 1.1;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.instagram-follow-username:hover {
    color: #333333;
    opacity: 0.9;
}

.instagram-follow-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: #000000;
    margin: 0;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: -0.5px;
}

.btn-instagram-follow {
    background-color: #000000;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000000;
}

.btn-instagram-follow:hover {
    background-color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.instagram-cards-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    width: 100%;
    margin: 0;
    margin-bottom: 0;
    padding: 0;
    padding-bottom: 0;
}

.instagram-cards-grid:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.instagram-card {
    background-color: #f5f5f5;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.instagram-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.instagram-card-header {
    padding: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.instagram-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.instagram-profile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #d0d0d0;
    border: 1.5px solid #ffffff;
    flex-shrink: 0;
}

.instagram-username {
    font-size: 0.75rem;
    font-weight: 600;
    color: #000000;
    font-family: var(--font-body);
}

.instagram-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #e0e0e0;
    position: relative;
    background-image: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
}

.instagram-image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.instagram-card-image:has(img[src=""]) {
    background-image: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
}

.instagram-card-footer {
    padding: 0.625rem;
    padding-bottom: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0;
}

.instagram-card-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.instagram-stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #333333;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-body);
}

.instagram-stat i {
    font-size: 0.875rem;
    color: #666666;
}

.instagram-stat-count {
    font-weight: 600;
    color: #000000;
}

.instagram-card-text {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #333333;
    margin: 0;
    font-family: var(--font-body);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Instagram Section Responsive */
@media (max-width: 1440px) {
    .instagram-cards-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 0;
    }
}

@media (max-width: 1024px) {
    .instagram-cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
}

@media (max-width: 768px) {
    .instagram-follow-section {
        padding-top: var(--spacing-2xl);
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .instagram-follow-header {
        flex-direction: column;
        align-items: center;
    }
    
    .instagram-follow-header-left {
        align-items: flex-start;
    }
    
    .instagram-follow-label {
        font-size: 1rem;
    }
    
    .instagram-follow-username {
        font-size: var(--font-size-2xl);
    }
    
    .instagram-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
    
    .instagram-card {
        max-width: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    
    .instagram-card:active {
        transform: scale(0.98);
    }
}

@media (max-width: 480px) {
    .instagram-follow-section {
        padding-top: var(--spacing-xl);
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .instagram-follow-label {
        font-size: 0.875rem;
    }
    
    .instagram-follow-username {
        font-size: var(--font-size-xl);
    }
    
    .instagram-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
    
    .instagram-card-header {
        padding: 0.5rem;
    }
    
    .instagram-card-footer {
        padding: 0.5rem;
    }
}

/* Events Timeline Section */
.events-timeline-section {
    padding: var(--spacing-3xl) 0;
    background: #000000;
}

.events-timeline-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.events-timeline-header .section-title {
    color: #ffffff;
    font-weight: 900;
    font-style: italic;
    font-synthesis: weight;
    -webkit-text-stroke: 0.03em currentColor;
    paint-order: stroke fill;
    text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor, 0 0.5px 0 currentColor, 0 -0.5px 0 currentColor, 1px 0 0 currentColor, -1px 0 0 currentColor, 0 1px 0 currentColor, 0 -1px 0 currentColor;
}

.events-tabs {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--spacing-md);
}

.events-tab {
    background: transparent;
    border: none;
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-body);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.events-tab::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primary-red);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.events-tab.active {
    color: var(--color-primary-red);
}

.events-tab.active::after {
    transform: scaleX(1);
}

.events-tab:hover {
    color: var(--color-primary-red);
}

.events-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in;
    overflow: visible;
}

.events-tab-content.active {
    display: block;
    overflow: visible;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Events Slider Styles */
.events-slider-wrapper {
    position: relative;
    margin-bottom: var(--spacing-2xl);
    padding: 0 40px;
    overflow: visible;
    max-width: 100%;
}

.events-timeline-section .container {
    max-width: 1640px;
}

.events-slider-container {
    position: relative;
    overflow: hidden;
    margin: 0.75rem 0;
    padding: 0;
    border-radius: var(--border-radius-lg);
}

.events-slider-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1a1a1a;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 1.125rem;
    padding: 0;
}

.events-slider-arrow:hover {
    background-color: #333333;
    color: #ffffff;
    transform: scale(1.1);
}

.events-slider-arrow:active {
    transform: scale(0.95);
}

.events-slider-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.events-slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    align-items: stretch;
    padding: 0.75rem 0;
    margin: 0;
}

/* Cloned slides for infinite scroll - no display:contents so clones stay real flex items */
.events-slider-slide {
    flex: 0 0 25%;
    min-width: 0;
    padding: 0 var(--spacing-xs);
    box-sizing: border-box;
    display: flex;
    height: auto;
    align-items: stretch;
    flex-shrink: 0;
}


.events-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    flex-wrap: nowrap;
    min-height: 20px;
}

.events-slider-dots-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.events-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    padding: 0;
    outline: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    /* Increase touch target area while keeping visual size small */
    position: relative;
}

.events-slider-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.events-slider-dot:hover {
    background: var(--color-primary-red);
    transform: scale(1.2);
}

.events-slider-dot:active {
    transform: scale(0.9);
}

.events-slider-dot.active {
    background: var(--color-primary-red);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border-color: var(--color-primary-red);
}

/* Legacy grid support - keep for fallback */
.events-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.event-timeline-card {
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(0, 191, 255, 0.25);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
                0 0 15px rgba(0, 191, 255, 0.2),
                0 0 30px rgba(0, 191, 255, 0.1);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 480px;
    margin: 0.75rem 0;
    -webkit-tap-highlight-color: transparent;
}

.event-timeline-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 191, 255, 0.5);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15),
                0 0 25px rgba(0, 191, 255, 0.4),
                0 0 50px rgba(0, 191, 255, 0.25),
                0 0 75px rgba(0, 191, 255, 0.15);
}

.event-timeline-card:active {
    transform: translateY(-4px) scale(0.98);
}

.event-timeline-image {
    position: relative;
    width: 100%;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    overflow: hidden;
    background: var(--color-gray-light);
    flex-shrink: 0;
}

.event-timeline-image img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display: block;
}

.event-timeline-card:hover .event-timeline-image img {
    transform: scale(1.1);
}

.event-timeline-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-body);
}

.event-timeline-badge-upcoming {
    background: var(--color-primary-red);
    color: var(--color-text-light);
}

.event-timeline-badge-past {
    background: var(--color-gray-medium);
    color: var(--color-text-light);
}

.event-timeline-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.event-timeline-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-body);
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card-content .event-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.event-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    min-height: 1.5em;
}

.event-timeline-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

.event-timeline-meta-item i {
    color: var(--color-primary-red);
    font-size: var(--font-size-base);
}

.event-timeline-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
    flex: 1;
    font-family: var(--font-body);
    min-height: 4.5em;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-timeline-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: auto;
    flex-shrink: 0;
}

.btn-event-timeline {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-base);
    text-align: center;
    flex: 1;
    font-family: var(--font-body);
    border: 2px solid var(--color-primary-black);
    color: var(--color-text-light);
    background: var(--color-primary-black);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.btn-event-timeline:hover {
    background: var(--color-primary-red);
    border-color: var(--color-primary-red);
    color: var(--color-text-light);
    transform: translateY(-2px);
}

.btn-event-timeline:active {
    transform: scale(0.98);
}

.btn-event-timeline-primary {
    background: var(--color-primary-red);
    color: var(--color-text-light);
    border-color: var(--color-primary-red);
}

.btn-event-timeline-primary:hover {
    background: var(--color-primary-red-dark);
    border-color: var(--color-primary-red-dark);
    color: var(--color-text-light);
}

.btn-event-timeline-register {
    background: transparent;
    color: var(--color-primary-red, #dd0707);
    border-color: var(--color-primary-red, #dd0707);
    white-space: nowrap;
}

.btn-event-timeline-register:hover {
    background: var(--color-primary-red, #dd0707);
    color: var(--color-text-light);
    border-color: var(--color-primary-red, #dd0707);
}

.events-timeline-empty {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
}

.events-timeline-empty i {
    font-size: var(--font-size-5xl);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
    display: block;
}

@media (max-width: 768px) {
    .events-slider-wrapper {
        padding: 0 0.75rem;
    }

    .events-slider-container {
        margin: 0.75rem 0;
        padding: 0;
    }
    
    .events-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .events-slider-slide {
        padding: 0 0.25rem;
        flex: 0 0 100%;
    }
    
    .event-timeline-card {
        min-height: 380px;
        margin: 0.5rem 0;
    }
    
    .events-timeline-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .events-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        padding: 0 var(--spacing-md);
    }
    
    .events-tab {
        width: 100%;
        max-width: 100%;
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
        -webkit-tap-highlight-color: transparent;
    }
    
    .events-tab:active {
        transform: scale(0.98);
    }
    
    .event-timeline-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .btn-event-timeline {
        width: 100%;
        min-height: 48px;
    }
    
    .events-slider-dots {
        margin-top: var(--spacing-md);
        gap: var(--spacing-sm);
        min-height: 16px;
        flex-wrap: nowrap;
    }

    .events-slider-dots-inner {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }
    
    .events-slider-dot {
        width: 5px;
        height: 5px;
        min-width: 5px;
        min-height: 5px;
        border-width: 0;
    }
    
    .events-slider-dot.active {
        width: 5px;
        height: 5px;
    }
    
    .events-slider-dot::before {
        width: 32px;
        height: 32px;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .events-slider-slide {
        flex: 0 0 50%;
    }
    
    .event-timeline-card {
        min-height: 400px;
        margin: 0.75rem 0;
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .event-timeline-card {
        min-height: 470px;
        margin: 0.75rem 0;
    }
}

@media (min-width: 1440px) {
    .events-slider-slide {
        flex: 0 0 25%;
        padding: 0 var(--spacing-sm);
    }
    
    .event-timeline-card {
        min-height: 500px;
        margin: 0.75rem 0;
    }
}

/* Contact Modal Styles */
.contact-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-modal.active {
    display: flex;
    opacity: 1;
}

.contact-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(1px);
    z-index: 1;
}

.contact-modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 850px;
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: row;
    z-index: 2;
    border: none;
    isolation: isolate;
}

.contact-modal.active .contact-modal-content {
    transform: scale(1);
}

.contact-modal-body {
    display: flex;
    flex: 1;
    overflow: visible;
    min-height: 320px;
}

.contact-modal-left {
    flex: 0 0 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 12px 0 0 12px;
    z-index: 3;
    margin-left: -1px;
    margin-top: -1px;
    margin-bottom: -1px;
    min-width: calc(50% + 1px);
    min-height: calc(100% + 2px);
}

.contact-modal-left-content {
    background: #000000;
    padding: 1.75rem 2rem;
    color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    border-radius: 8px;
    min-height: 0;
}

.contact-modal-left-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.contact-modal-left-image {
    width: auto;
    max-width: 260px;
    height: auto;
    display: block;
}

.contact-modal-left-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
    font-family: var(--font-body);
    line-height: 1.3;
}

.contact-modal-left-info {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1.25rem;
}

.contact-modal-left-info li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    color: #fff;
    font-size: 0.9375rem;
}

.contact-modal-left-info li i {
    width: 20px;
    min-width: 20px;
    font-size: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-modal-left-info li a {
    color: #fff;
    text-decoration: none;
    transition: color var(--transition-fast);
    flex: 1;
}

.contact-modal-left-info li a:hover {
    color: #DC143C;
}

.contact-modal-left-info li span {
    color: #fff;
    flex: 1;
}

.contact-modal-left-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

.contact-modal-left-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, 0.1);
}

.contact-modal-left-social a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.contact-modal-shopee-link {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

.contact-modal-shopee-link:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.contact-modal-shopee-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.contact-modal-right {
    flex: 0 0 50%;
    padding: 1.75rem;
    overflow: visible;
    background: #fafafa;
    display: flex;
    flex-direction: column;
}

.contact-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    width: 100%;
    position: relative;
}

.contact-modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin: 0;
    font-family: var(--font-heading);
    flex: 1;
}

.contact-modal-close {
    background: #e0e0e0;
    border: 2px solid #999;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
    padding: 0;
    flex-shrink: 0;
    margin-left: 1rem;
    position: relative;
    z-index: 10;
}

.contact-modal-close:hover {
    background: #d0d0d0;
    border-color: #666;
    color: #000;
}


.contact-modal-message {
    display: none;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.contact-modal-message-success {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid #28a745;
}

.contact-modal-message-error {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid #dc3545;
}

.contact-modal-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
}

.contact-modal-form .form-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.contact-modal-form .form-group {
    margin-bottom: 0.875rem;
    flex: 1;
}

.contact-modal-form .form-group.full-width {
    flex: 1 1 100%;
}

.contact-modal-form .form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    color: #333;
    font-size: 0.8125rem;
    font-family: var(--font-body);
}

.contact-modal-form .form-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
    background: #fff;
    color: #333;
}

.contact-modal-form .form-input::placeholder {
    color: #999;
    font-size: 0.875rem;
}

.contact-modal-form .form-input:focus {
    outline: none;
    border-color: #666;
}

.contact-modal-form select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.5rem;
    cursor: pointer;
}

.contact-modal-form select.form-input:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.contact-modal-form textarea.form-input {
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-body);
}

.contact-modal-footer {
    margin-top: auto;
    padding-top: 1rem;
}

.contact-modal-footer .btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: #1e3a5f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
}

.contact-modal-footer .btn:hover {
    background: #1a2f4d;
}

.contact-modal-footer .btn i {
    font-size: 1rem;
}

@media (max-width: 768px) {
    .contact-modal {
        padding: 1rem;
    }
    
    .contact-modal-content {
        max-height: 95vh;
        max-width: 100%;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .contact-modal-body {
        flex-direction: column;
        min-height: auto;
        overflow: visible;
    }
    
    .contact-modal-left {
        flex: 0 0 auto;
        min-height: auto;
        padding: 1rem;
        border-radius: 12px 12px 0 0;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        min-width: 100%;
    }
    
    .contact-modal-left-content {
        padding: 1.25rem;
        border-radius: 8px;
        justify-content: flex-start;
    }

    .contact-modal-left-logo {
        margin-bottom: 1rem;
    }

    .contact-modal-left-image {
        max-width: 140px;
    }
    
    .contact-modal-left-title {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }
    
    .contact-modal-left-info {
        margin-bottom: 1.25rem;
    }
    
    .contact-modal-left-info li {
        font-size: 0.875rem;
        margin-bottom: 1rem;
        gap: 1rem;
    }
    
    .contact-modal-left-social {
        margin-top: 1rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .contact-modal-left-social a {
        width: 32px;
        height: 32px;
    }
    
    .contact-modal-left-social .contact-modal-shopee-icon {
        width: 18px;
        height: 18px;
    }
    
    .contact-modal-header {
        margin-bottom: 1.25rem;
    }
    
    .contact-modal-title {
        font-size: 1.25rem;
    }
    
    .contact-modal-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.5rem;
        margin-left: 0.75rem;
        background: #e0e0e0;
        border: 2px solid #999;
        color: #333;
    }
    
    .contact-modal-right {
        flex: 1;
        padding: 1.25rem;
        overflow: visible;
    }
    
    .contact-modal-form {
        overflow: visible;
    }
    
    .contact-modal-form .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .contact-modal-form .form-group {
        margin-bottom: 0.875rem;
    }
    
    .contact-modal-footer .btn {
        width: 100%;
    }
    
    .contact-modal-footer .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .contact-modal {
        padding: 0.5rem;
    }
    
    .contact-modal-left {
        padding: 0.75rem;
        overflow: visible;
    }
    
    .contact-modal-left-content {
        overflow: visible;
        padding: 1rem;
    }

    .contact-modal-left-logo {
        margin-bottom: 0.75rem;
    }

    .contact-modal-left-image {
        max-width: 120px;
    }
    
    .contact-modal-left-title {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }
    
    .contact-modal-left-info li {
        font-size: 0.8125rem;
        margin-bottom: 0.875rem;
        gap: 0.875rem;
    }
    
    .contact-modal-left-social {
        margin-top: 0.875rem;
        gap: 0.5rem;
    }
    
    .contact-modal-left-social a {
        width: 30px;
        height: 30px;
    }
    
    .contact-modal-right {
        padding: 1rem;
    }
    
    .contact-modal-title {
        font-size: 1.125rem;
    }
}

/* Contact Info Cards */
.contact-info-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.contact-info-card {
    background: var(--color-bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform var(--transition-fast);
}

.contact-info-card:hover {
    transform: translateY(-5px);
}

.contact-info-icon {
    width: 60px;
    height: 60px;
    background: rgba(220, 20, 60, 0.1);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    font-size: var(--font-size-xl);
    color: var(--color-primary-red);
}

.contact-info-card h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.contact-info-card p {
    color: var(--color-text-secondary);
    margin: 0;
}

.contact-info-card a {
    color: var(--color-primary-red);
    text-decoration: none;
}

.contact-info-card a:hover {
    text-decoration: underline;
}

.contact-info-container-centered {
    max-width: 800px;
    margin: 0 auto;
}

.contact-info-actions {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .contact-info-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

/* FAQ Styles */
.faq-section {
    padding: var(--spacing-3xl) 0;
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-group {
    margin-bottom: var(--spacing-3xl);
}

.faq-group-title {
    font-size: var(--font-size-2xl);
    color: var(--color-primary-red);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-border);
    font-family: var(--font-heading);
}

.faq-item {
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question {
    padding: var(--spacing-lg);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.faq-question h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
}

.faq-question i {
    color: var(--color-primary-red);
    transition: transform var(--transition-fast);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 var(--spacing-lg);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.faq-answer p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin: 0;
}

.faq-answer a {
    color: var(--color-primary-red);
    text-decoration: none;
}

.faq-answer a:hover {
    text-decoration: underline;
}

.faq-cta {
    text-align: center;
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-3xl);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-lg);
}

.faq-cta h2 {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.faq-cta p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* FAQ Responsive */
@media (max-width: 768px) {
    .faq-section {
        padding: var(--spacing-2xl) 0;
    }

    .faq-group {
        margin-bottom: var(--spacing-2xl);
    }

    .faq-group-title {
        font-size: var(--font-size-xl);
    }

    .faq-question {
        padding: var(--spacing-md);
        min-height: 44px;
    }

    .faq-question h3 {
        font-size: var(--font-size-base);
    }

    .faq-answer {
        padding: 0 var(--spacing-md);
    }

    .faq-item.active .faq-answer {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }

    .faq-cta {
        padding: var(--spacing-xl);
        margin-top: var(--spacing-2xl);
    }
}

@media (max-width: 480px) {
    .faq-group-title {
        font-size: var(--font-size-lg);
    }

    .faq-question h3 {
        font-size: var(--font-size-sm);
    }

    .faq-cta {
        padding: var(--spacing-lg);
    }

    .faq-cta h2 {
        font-size: var(--font-size-xl);
    }

    .faq-cta p {
        font-size: var(--font-size-sm);
    }
}

/* Sponsors Page Styles */
.sponsors-section {
    padding: var(--spacing-3xl) 0;
}

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-xl) * 1.5);
    row-gap: calc(var(--spacing-2xl) * 1.2);
    max-width: 1400px;
    margin: 0 auto;
}

.sponsor-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sponsor-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.sponsor-item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 120px;
}

@media (max-width: 768px) {
    .sponsors-section {
        padding: var(--spacing-2xl) 0;
    }

    .sponsors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .sponsor-item img {
        max-height: 100px;
    }
}

@media (max-width: 480px) {
    .sponsors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .sponsor-item {
        padding: var(--spacing-md);
    }

    .sponsor-item img {
        max-height: 80px;
    }
}

/* Legal Pages Styles */
.legal-section {
    padding: var(--spacing-3xl) 0;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-bg-primary);
    padding: var(--spacing-3xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.legal-content h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-primary-red);
}

.last-updated {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2xl);
    font-style: italic;
}

.legal-content section {
    margin-bottom: var(--spacing-2xl);
}

.legal-content h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-border);
}

.legal-content p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.legal-content ul {
    margin-left: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

.legal-content li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.8;
}

.legal-content a {
    color: var(--color-primary-red);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .legal-content {
        padding: var(--spacing-xl);
    }
    
    .legal-content h1 {
        font-size: var(--font-size-3xl);
    }
    
    .legal-content h2 {
        font-size: var(--font-size-xl);
    }
}

/* Country Pages Styles */
.country-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.country-header .page-subtitle {
    text-align: center !important;
}

.country-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.country-flag-large {
    width: 120px;
    height: auto;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    display: block;
}

.country-section {
    padding: var(--spacing-3xl) 0;
}

.country-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-3xl);
}

.country-intro h2 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary-red);
    margin-bottom: var(--spacing-lg);
}

.country-intro p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.country-events-section {
    margin-bottom: var(--spacing-3xl);
}

.country-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.country-event-card {
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.country-event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.country-event-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.country-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.country-event-card:hover .country-event-image img {
    transform: scale(1.1);
}

.country-event-content {
    padding: var(--spacing-lg);
}

.country-event-content h3 {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.country-event-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.country-event-meta span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.country-event-meta i {
    color: var(--color-primary-red);
}

/* Country event typography: :root defaults (Australia, USA, NZ, Singapore).
   Canada, Japan, Philippines have explicit blocks for consistent Helvetica + black date/month.
   To add a new country: add body.country-page-{slug} block and set variables. */
body.country-page-canada {
    --country-event-font-day: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    --country-event-font-month: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    --country-event-font-name: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    --country-event-color-day: #1a1a1a;
    --country-event-color-month: #000000;
    --country-event-name-gradient: linear-gradient(180deg, #FE0465 0%, #FE0465 30%, #5B7FFF 70%, #5B7FFF 100%);
    --country-event-country-gradient: linear-gradient(180deg, #7B9AFF 0%, #90A5FD 50%, #5B7FFF 100%);
}

body.country-page-japan {
    --country-event-font-day: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    --country-event-font-month: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    --country-event-font-name: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    --country-event-color-day: #1a1a1a;
    --country-event-color-month: #000000;
    --country-event-name-gradient: linear-gradient(180deg, #FE0465 0%, #FE0465 40%, #E0308A 100%);
    --country-event-country-gradient: linear-gradient(180deg, #7B9AFF 0%, #90A5FD 50%, #5B7FFF 100%);
}

body.country-page-philippines {
    --country-event-font-name: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    --country-event-name-gradient: linear-gradient(180deg, #FE0465 0%, #FE0465 30%, #70D6FF 70%, #70D6FF 100%);
    --country-event-country-gradient: linear-gradient(180deg, #7B9AFF 0%, #90A5FD 50%, #5B7FFF 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COUNTRY EVENTS LIST VIEW (Schedule Style)
   ═══════════════════════════════════════════════════════════════════════════════ */

.country-events-list-section {
    padding: var(--spacing-2xl) 0 var(--spacing-3xl);
    background: transparent;
}

.events-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 700px;
    margin: 2rem auto 0;
    padding-bottom: var(--spacing-2xl);
}

.event-schedule-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 1.5rem;
    text-decoration: none;
    padding: 0;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.event-schedule-item:hover {
    transform: translateX(10px);
    opacity: 0.85;
}

.event-schedule-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
}

.event-schedule-day {
    font-family: 'Luckiest Guy', var(--country-event-font-day) !important;
    font-size: 3rem;
    font-weight: 700;
    color: var(--country-event-color-day);
    line-height: 1;
    margin-bottom: 0;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

.event-schedule-month {
    font-family: 'Luckiest Guy', var(--country-event-font-month) !important;
    font-size: 2rem;
    font-weight: 400;
    color: var(--event-schedule-month-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: -0.5rem;
}

.event-schedule-name {
    font-family: var(--country-event-font-name) !important;
    font-size: 4.5rem;
    background: var(--country-event-name-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-style: italic;
    filter: drop-shadow(2px 2px 0 #FFFFFF) drop-shadow(-2px -2px 0 #FFFFFF) drop-shadow(2px -2px 0 #FFFFFF) drop-shadow(-2px 2px 0 #FFFFFF) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.85)) drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.6));
    letter-spacing: 0.02em;
    text-transform: lowercase;
    margin-top: auto;
    margin-bottom: auto;
    white-space: nowrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .events-schedule-list {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .event-schedule-item {
        grid-template-columns: 70px 1fr;
        gap: 1rem;
    }
    
    
    .event-schedule-day {
        font-size: 2.2rem;
    }
    
    .event-schedule-month {
        font-size: 0.9rem;
    }
    
    .event-schedule-name {
        font-size: 3.5rem;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .event-schedule-item {
        grid-template-columns: 60px 1fr;
        gap: 0.75rem;
    }
    
    .event-schedule-day {
        font-size: 1.8rem;
    }
    
    .event-schedule-name {
        font-size: clamp(1.75rem, 8vw, 3rem);
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* Philippines schedule: direct overrides (screenshot design – Helvetica, solid black) */
/* Philippines: keep overflow/padding for L clipping fix; date/month use :root (Helvetica) like Canada */
.country-flags-section-philippines .event-schedule-item {
    overflow: visible;
}

.country-flags-section-philippines .event-schedule-day,
.country-flags-section-philippines .event-schedule-month {
    color: #000000;
}

.country-flags-section-philippines .event-schedule-name {
    text-transform: capitalize;
    padding-left: 0.25em;
    overflow: visible;
}

.country-flags-section-philippines .roadtour-heading {
    color: #ffffff;
    -webkit-text-stroke: 2px #000000;
    paint-order: stroke fill;
    text-shadow: 3px 3px 0 #000000, -3px -3px 0 #000000, 3px -3px 0 #000000, -3px 3px 0 #000000, 0 3px 0 #000000, 0 -3px 0 #000000, 3px 0 0 #000000, -3px 0 0 #000000;
}

/* Country Navigation Section */
.country-nav-section {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
}

/* Country Flags Body Section */
.country-flags-section {
    padding: var(--spacing-3xl) 0 0;
    background: var(--color-bg-primary);
    min-height: 500px;
}

.country-flags-section > .container {
    width: 100%;
    overflow: visible;
}

@media (max-width: 768px) {
    .country-flags-section {
        min-height: 350px;
        padding: var(--spacing-2xl) 0 0;
    }
}

/* Country Flags Section Backgrounds */
.country-flags-section-canada,
.country-flags-section-australia,
.country-flags-section-japan,
.country-flags-section-philippines,
.country-flags-section-usa,
.country-flags-section-new-zealand,
.country-flags-section-singapore {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Overlay only on top (flags area) */
.country-flags-section-canada::before,
.country-flags-section-australia::before,
.country-flags-section-japan::before,
.country-flags-section-philippines::before,
.country-flags-section-usa::before,
.country-flags-section-new-zealand::before,
.country-flags-section-singapore::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
    z-index: 0;
}

.country-flags-section-canada .container,
.country-flags-section-australia .container,
.country-flags-section-japan .container,
.country-flags-section-philippines .container,
.country-flags-section-usa .container,
.country-flags-section-new-zealand .container,
.country-flags-section-singapore .container {
    position: relative;
    z-index: 1;
}

/* Individual Country Background Images */
.country-flags-section-canada {
    background-image: url('../images/flags/bg - canada.webp');
}

.country-flags-section-australia {
    background-image: url('../images/flags/bg - australia.webp');
}

.country-flags-section-japan {
    background-image: url('../images/flags/bg - japan.webp');
}

.country-flags-section-philippines {
    background-image: url('../images/flags/bg - philippines.webp');
    background-position: center top;
}

.country-flags-section-usa {
    background-image: url('../images/flags/bg - usa.webp');
}

.country-flags-section-new-zealand {
    background-image: url('../images/flags/bg - new zealand.webp');
}

.country-flags-section-singapore {
    background-image: url('../images/flags/bg - singapore.webp');
}

/* Roadtour Title Section */
.roadtour-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
}

.roadtour-heading {
    font-size: 4.5rem;
    font-weight: 900;
    color: #000000;
    font-family: var(--font-heading);
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 0.15em;
}

.roadtour-leaf-icon {
    width: 70px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25rem;
}

.roadtour-philippine-star-icon {
    width: 70px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25rem;
}

@media (max-width: 1024px) {
    .roadtour-heading {
        font-size: 3rem;
    }
    
    .roadtour-leaf-icon,
    .roadtour-philippine-star-icon {
        width: 50px;
    }
}

@media (max-width: 768px) {
    .roadtour-heading {
        font-size: 2.5rem;
        text-align: center;
    }
    
    .roadtour-leaf-icon,
    .roadtour-philippine-star-icon {
        width: 40px;
    }
}

@media (max-width: 480px) {
    .roadtour-heading {
        font-size: 1.75rem;
    }
    
    .roadtour-leaf-icon,
    .roadtour-philippine-star-icon {
        width: 30px;
    }
}

/* Japan: red circle in title (Hinomaru-style) */
.roadtour-japan-circle {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF0100;
    margin: 0 0.25rem;
    vertical-align: middle;
}

@media (min-width: 769px) {
    .roadtour-japan-circle {
        width: 52px;
        height: 52px;
        margin: 0 0.4rem;
    }
}

@media (min-width: 1024px) {
    .story-content-wrapper-two-col {
        grid-template-columns: 60% 40%;
    }
}
    }
}

/* Japan poster layout: date + city/country (no Hinomaru) */
.country-flags-section-japan-poster,
.country-flags-section-japan-poster .container {
    overflow: visible;
}

.country-flags-section-japan-poster .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 10rem;
}

.country-flags-section .country-nav-container {
    align-self: stretch;
}

.japan-poster-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 2rem auto var(--spacing-2xl);
    padding: 0 5rem 0 2rem;
    overflow: visible;
}

.japan-poster {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) 4rem var(--spacing-2xl) var(--spacing-2xl);
    overflow: visible;
}

.japan-poster-date {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 0.5rem;
    margin-bottom: 1.5rem;
}

.japan-poster-day {
    font-family: 'Luckiest Guy', var(--country-event-font-day);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--country-event-color-day);
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow:
        1px 1px 0 #FFFFFF,
        -1px -1px 0 #FFFFFF,
        1px -1px 0 #FFFFFF,
        -1px 1px 0 #FFFFFF,
        2px 2px 0 rgba(0, 0, 0, 0.15);
}

.japan-poster-month {
    font-family: 'Luckiest Guy', var(--country-event-font-month);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--event-schedule-month-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow:
        1px 1px 0 #FFFFFF,
        -1px -1px 0 #FFFFFF,
        1px -1px 0 #FFFFFF,
        -1px 1px 0 #FFFFFF,
        2px 2px 0 rgba(0, 0, 0, 0.15);
}

.japan-poster-location {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    overflow: visible;
    padding: 0 4rem 0 1rem;
}

.japan-poster-city {
    font-family: var(--font-venue), var(--country-event-font-name);
    font-size: 9rem;
    font-weight: 700;
    font-style: italic;
    background: var(--country-event-name-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(2px 2px 0 #FFFFFF) drop-shadow(-2px -2px 0 #FFFFFF) drop-shadow(2px -2px 0 #FFFFFF) drop-shadow(-2px 2px 0 #FFFFFF) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.85)) drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.6));
    letter-spacing: 0.02em;
    text-transform: capitalize;
    line-height: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-right: 3rem;
}

.japan-poster-country {
    font-family: var(--font-venue), var(--country-event-font-name);
    font-size: 7rem;
    font-weight: 700;
    font-style: italic;
    background: var(--country-event-country-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(2px 2px 0 #FFFFFF) drop-shadow(-2px -2px 0 #FFFFFF) drop-shadow(2px -2px 0 #FFFFFF) drop-shadow(-2px 2px 0 #FFFFFF) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.85)) drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.6));
    letter-spacing: 0.02em;
    text-transform: capitalize;
    line-height: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-right: 3rem;
}

@media (max-width: 768px) {
    .country-flags-section-japan-poster .container {
        padding-right: 6rem;
    }
    
    .japan-poster-link {
        padding: 0 3rem 0 1.5rem;
    }
    
    .japan-poster {
        padding: var(--spacing-xl) 2.5rem var(--spacing-xl) var(--spacing-xl);
    }
    
    .japan-poster-location {
        padding: 0 2.5rem 0 1rem;
    }
    
    .japan-poster-city,
    .japan-poster-country {
        padding-right: 2rem;
    }
    
    .japan-poster-day {
        font-size: 2rem;
    }
    
    .japan-poster-month {
        font-size: 1rem;
    }
    
    .japan-poster-city {
        font-size: 6.5rem;
    }
    
    .japan-poster-country {
        font-size: 5rem;
    }
}

@media (max-width: 480px) {
    .country-flags-section-japan-poster .container {
        padding-right: 4rem;
    }
    
    .japan-poster-link {
        padding: 0 2rem 0 1rem;
    }
    
    .japan-poster {
        padding: var(--spacing-lg) 1.5rem var(--spacing-lg) var(--spacing-md);
    }
    
    .japan-poster-location {
        padding: 0 1.5rem 0 0.5rem;
    }
    
    .japan-poster-city,
    .japan-poster-country {
        padding-right: 1.5rem;
    }
    
    .japan-poster-city {
        font-size: clamp(3rem, 14vw, 5rem);
    }
    
    .japan-poster-country {
        font-size: clamp(2.5rem, 11vw, 4rem);
    }
}

@media (max-width: 360px) {
    .country-flags-section-japan-poster .container {
        padding-right: 3rem;
    }
    
    .japan-poster-link {
        padding: 0 1.5rem 0 0.75rem;
    }
    
    .japan-poster {
        padding: var(--spacing-md) 1rem var(--spacing-md) var(--spacing-sm);
    }
    
    .japan-poster-location {
        padding: 0 1rem 0 0.5rem;
    }
    
    .japan-poster-city,
    .japan-poster-country {
        padding-right: 1rem;
    }
    
    .japan-poster-city {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }
    
    .japan-poster-country {
        font-size: clamp(2rem, 10vw, 3.25rem);
    }
}

.country-nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
}

.country-nav-item {
    display: block;
    transition: transform var(--transition-fast);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.country-nav-item:hover {
    transform: translateY(-3px);
}

.country-nav-flag {
    width: 50px;
    height: auto;
    display: block;
    border-radius: var(--border-radius-sm);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: filter var(--transition-fast), transform var(--transition-fast);
}

.country-nav-item:hover .country-nav-flag {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .country-nav-section {
        margin-top: var(--spacing-xl);
        padding-top: var(--spacing-lg);
    }
    
    .country-nav-container {
        gap: var(--spacing-sm);
    }
    
    .country-nav-flag {
        width: 40px;
    }
}

@media (max-width: 480px) {
    .country-nav-container {
        gap: var(--spacing-xs);
    }
    
    .country-nav-flag {
        width: 35px;
    }
}

.no-events-message {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
}

.no-events-message p {
    font-size: var(--font-size-lg);
}

/* Details Coming Soon Section - Australia */
.details-coming-soon-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: var(--spacing-3xl) var(--spacing-3xl);
    position: relative;
    width: 100%;
    overflow: visible;
}

.details-coming-soon-content {
    position: relative;
    z-index: 1;
    text-align: center;
    overflow: visible;
}

.details-coming-soon-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    overflow: visible;
    padding: 2rem;
}

.details-word,
.coming-word,
.soon-word {
    font-family: var(--font-venue), var(--font-body);
    font-weight: 700;
    font-style: italic;
    display: block;
    text-align: center;
    line-height: 1;
    transform: rotate(-2deg);
    position: relative;
    overflow: visible;
    padding: 0.5rem 2rem;
    margin: 0;
}

.details-word {
    font-size: 6rem;
    color: #FF007E;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    transform: rotate(-2deg);
    filter: drop-shadow(2px 2px 0 #FFFFFF) drop-shadow(-2px -2px 0 #FFFFFF) drop-shadow(2px -2px 0 #FFFFFF) drop-shadow(-2px 2px 0 #FFFFFF) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.85)) drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.6));
}

.coming-word {
    font-size: 6rem;
    color: #F246A8;
    background: linear-gradient(180deg, #F246A8 0%, #68B5FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    transform: rotate(1deg);
    filter: drop-shadow(2px 2px 0 #FFFFFF) drop-shadow(-2px -2px 0 #FFFFFF) drop-shadow(2px -2px 0 #FFFFFF) drop-shadow(-2px 2px 0 #FFFFFF) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.85)) drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.6));
}

.soon-word {
    font-size: 6rem;
    color: #68B5FE;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    transform: rotate(-1deg);
    filter: drop-shadow(2px 2px 0 #FFFFFF) drop-shadow(-2px -2px 0 #FFFFFF) drop-shadow(2px -2px 0 #FFFFFF) drop-shadow(-2px 2px 0 #FFFFFF) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.85)) drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.6));
}

@media (max-width: 1024px) {
    .details-coming-soon-section {
        overflow: visible;
    }
    
    .details-coming-soon-text {
        padding: 1.75rem;
        gap: 0.2rem;
    }
    
    .details-word,
    .coming-word,
    .soon-word {
        font-size: 5rem;
        padding: 0.5rem 1.75rem;
    }
}

@media (max-width: 768px) {
    .details-coming-soon-section {
        min-height: 400px;
        padding: var(--spacing-2xl) var(--spacing-lg);
        overflow: visible;
    }
    
    .details-coming-soon-text {
        padding: 1.5rem;
        gap: 0.15rem;
    }
    
    .details-word,
    .coming-word,
    .soon-word {
        font-size: 4rem;
        padding: 0.4rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .details-coming-soon-section {
        min-height: 350px;
        padding: var(--spacing-xl) var(--spacing-md);
        overflow: visible;
    }
    
    .details-coming-soon-text {
        gap: 0.1rem;
        padding: 1rem;
    }
    
    .details-word,
    .coming-word,
    .soon-word {
        font-size: 3rem;
        padding: 0.3rem 1rem;
    }
}

@media (max-width: 768px) {
    .country-events-grid {
        grid-template-columns: 1fr;
    }
    
    .country-title-wrapper {
        gap: var(--spacing-sm);
    }
    
    .country-flag-large {
        width: 100px;
    }
    

}

/* Lucide Icons Styles */
i[data-lucide] {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

i[data-lucide] svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}


/* Form Input Styles */
.form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary-red);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-body);
}

/* Gallery Section Styles */
.gallery-section {
    padding: var(--spacing-3xl) 0;
    padding-bottom: calc(var(--spacing-3xl) + 2rem);
    background: var(--color-bg-primary);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.gallery-item {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
    aspect-ratio: 4 / 3;
    min-height: 200px;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.gallery-item-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: var(--color-bg-secondary, #e8e8e8);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gallery-item-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display: block;
    z-index: 0;
}

.gallery-item-image--error img {
    opacity: 0.15;
}

.gallery-item-image--error::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    background: var(--color-text-muted, #6b7280);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 48px 48px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: 48px 48px;
    z-index: 0;
}

.gallery-item:hover .gallery-item-image img {
    transform: scale(1.1);
}

.gallery-item-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    min-height: 0;
    max-height: 42%;
    padding: var(--spacing-lg);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 1;
    transition: opacity var(--transition-base);
    z-index: 1;
    pointer-events: none;
}

.gallery-item-overlay .gallery-item-view {
    pointer-events: auto;
}

.gallery-item-info {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
    min-height: 0;
    overflow: hidden;
    flex-shrink: 1;
}

.gallery-item-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-xs) 0;
    font-family: var(--font-body);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
}

.gallery-item-event {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-family: var(--font-body);
}

.gallery-item-facebook-link {
    display: inline-block;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-family: var(--font-body);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.gallery-item-facebook-link:hover {
    color: var(--color-text-light);
}

.gallery-item-view {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.gallery-item-view:hover {
    background: var(--color-primary-red);
    color: var(--color-text-light);
    transform: scale(1.1);
}

.gallery-item-view:active {
    transform: scale(0.95);
}

.no-images {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-secondary);
}

/* Gallery pagination: horizontal row, page numbers stay in one line */
.gallery-pagination {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    width: 100%;
}

.gallery-pagination-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.gallery-pagination-item {
    margin: 0;
    display: inline-block;
}

.gallery-pagination-link,
.gallery-pagination-current {
    display: inline-block;
    min-width: 2.5rem;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-body);
    text-decoration: none;
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary, #f3f4f6);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--border-radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.gallery-pagination-link:hover {
    background-color: var(--color-primary-red);
    color: var(--color-text-light);
    border-color: var(--color-primary-red);
}

.gallery-pagination-current {
    background-color: var(--color-primary-red);
    color: var(--color-text-light);
    border-color: var(--color-primary-red);
    cursor: default;
}

/* .gallery-pagination-info removed */

/* Override-proof: keep pagination horizontal and styled (scoped to gallery) */
.gallery-section .gallery-pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.gallery-section .gallery-pagination-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery-section .gallery-pagination-item {
    display: inline-block;
    margin: 0;
}
.gallery-section .gallery-pagination-link,
.gallery-section .gallery-pagination-current {
    display: inline-block;
    min-width: 2.25rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: #1f2937;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
}
.gallery-section .gallery-pagination-link:hover {
    background-color: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.gallery-section .gallery-pagination-current {
    background-color: #dc2626;
    color: #fff;
    border-color: #dc2626;
    cursor: default;
}

.no-images i {
    font-size: var(--font-size-5xl);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
    display: block;
}

.no-images h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-body);
}

.no-images p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

/* Lightbox Modal Styles */
.lightbox-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.lightbox-modal.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-info {
    margin-top: var(--spacing-lg);
    text-align: center;
    color: var(--color-text-light);
    max-width: 800px;
}

.lightbox-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-sm) 0;
    font-family: var(--font-body);
}

.lightbox-description {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-family: var(--font-body);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #000000;
    color: #000000;
    font-size: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    backdrop-filter: blur(10px);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lightbox-close:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.15);
}

.lightbox-next:hover {
    transform: translateY(-50%) scale(1.15);
}

.lightbox-close:active {
    transform: scale(0.95);
}

.lightbox-prev:active {
    transform: translateY(-50%) scale(0.95);
}

.lightbox-next:active {
    transform: translateY(-50%) scale(0.95);
}

.lightbox-close {
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 10;
}

.lightbox-prev {
    left: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-modal.active .lightbox-prev,
.lightbox-modal.active .lightbox-next {
    transform: translateY(-50%);
}

/* Gallery Responsive */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .gallery-section {
        padding: var(--spacing-2xl) 0;
        padding-bottom: calc(var(--spacing-2xl) + 1.5rem);
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .gallery-section .gallery-pagination {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    /* .gallery-pagination-info removed */
    
    .gallery-section .gallery-pagination-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .lightbox-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .lightbox-image {
        max-height: 70vh;
    }
    
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .lightbox-close {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
    }
    
    .lightbox-prev {
        left: var(--spacing-sm);
    }
    
    .lightbox-next {
        right: var(--spacing-sm);
    }
    
    .lightbox-title {
        font-size: var(--font-size-xl);
    }
    
    .lightbox-description {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .gallery-item {
        aspect-ratio: 4 / 3;
    }
    
    .gallery-section {
        padding-bottom: calc(var(--spacing-2xl) + 1rem);
    }
    
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
        width: 44px;
        height: 44px;
        font-size: 1.125rem;
    }
}

/* Our Story Page Styles - Legacy styles removed, using new story-section implementation above */

/* Mission & Vision Section */
.mission-vision {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
}

.mission-card,
.vision-card {
    background: var(--color-bg-primary);
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 2px solid transparent;
}

.mission-card:hover,
.vision-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-red);
}

.mission-icon,
.vision-icon {
    width: 80px;
    height: 80px;
    background: rgba(221, 7, 7, 0.1);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
    font-size: var(--font-size-3xl);
    color: var(--color-primary-red);
    transition: all var(--transition-base);
}

.mission-card:hover .mission-icon,
.vision-card:hover .vision-icon {
    background: var(--color-primary-red);
    color: var(--color-text-light);
    transform: scale(1.1);
}

.mission-card h3,
.vision-card h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-body);
}

.mission-card p,
.vision-card p {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    margin: 0;
}

/* Values Section */
.values-section {
    margin-bottom: var(--spacing-3xl);
    text-align: center;
}

.values-section .section-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-red);
    margin-bottom: var(--spacing-2xl);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.value-item {
    background: var(--color-bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 2px solid transparent;
}

.value-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-red);
}

.value-item i {
    font-size: var(--font-size-3xl);
    color: var(--color-primary-red);
    margin-bottom: var(--spacing-md);
    display: block;
    transition: transform var(--transition-base);
}

.value-item:hover i {
    transform: scale(1.2);
}

.value-item h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-body);
}

.value-item p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    margin: 0;
}

/* Timeline Section */
.timeline-section {
    margin-bottom: var(--spacing-3xl);
    text-align: center;
}

.timeline-section .section-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-red);
    margin-bottom: var(--spacing-2xl);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timeline {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: var(--spacing-xl) 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-border);
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    position: relative;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-year {
    flex: 0 0 150px;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-red);
    text-align: center;
    font-family: var(--font-body);
    padding: var(--spacing-md);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 2;
}

.timeline-content {
    flex: 1;
    padding: var(--spacing-lg);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    margin: 0 var(--spacing-lg);
    text-align: left;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.timeline-item:nth-child(odd) .timeline-content {
    text-align: left;
}

.timeline-item:nth-child(even) .timeline-content {
    text-align: right;
}

.timeline-content:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.timeline-content h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-body);
}

.timeline-content p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    margin: 0;
}

/* Our Story Responsive Styles */
@media (max-width: 1024px) {
    .mission-vision {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .values-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-lg);
    }
    
    .timeline::before {
        left: 30px;
    }
    
    .timeline-item {
        flex-direction: row !important;
        padding-left: 60px;
    }
    
    .timeline-year {
        position: absolute;
        left: 0;
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-base);
        padding: var(--spacing-xs);
    }
    
    .timeline-content {
        margin-left: var(--spacing-lg);
        margin-right: 0;
        text-align: left !important;
    }
}

@media (max-width: 768px) {
    .mission-card,
    .vision-card {
        padding: var(--spacing-xl);
    }
    
    .mission-icon,
    .vision-icon {
        width: 60px;
        height: 60px;
        font-size: var(--font-size-2xl);
    }
    
    .mission-card h3,
    .vision-card h3 {
        font-size: var(--font-size-xl);
    }
    
    .values-section .section-title,
    .timeline-section .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .values-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .value-item {
        padding: var(--spacing-lg);
    }
    
    .value-item i {
        font-size: var(--font-size-2xl);
    }
    
    .timeline {
        padding: var(--spacing-lg) 0;
    }
    
    .timeline-item {
        padding-left: 50px;
        margin-bottom: var(--spacing-xl);
    }
    
    .timeline-year {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-sm);
    }
    
    .timeline-content {
        padding: var(--spacing-md);
        margin-left: var(--spacing-md);
    }
    
    .timeline-content h4 {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 480px) {
    
    .mission-card,
    .vision-card {
        padding: var(--spacing-lg);
    }
    
    .mission-icon,
    .vision-icon {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-xl);
    }
    
    .values-section .section-title,
    .timeline-section .section-title {
        font-size: var(--font-size-xl);
    }
    
    .value-item {
        padding: var(--spacing-md);
    }
    
    .timeline-item {
        padding-left: 40px;
    }
    
    .timeline-year {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-xs);
    }
    
    .timeline-content {
        padding: var(--spacing-sm);
        margin-left: var(--spacing-sm);
    }
}

/* ========================================
   Error Pages (403, 404, 500)
   ======================================== */

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    text-align: center;
    padding: 2rem;
}

.error-content {
    max-width: 600px;
}

.error-code {
    font-size: 8rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 1rem;
    font-family: var(--font-body);
}

.error-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

.error-message {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-btn-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: var(--color-primary);
    color: var(--color-text-light);
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.error-btn-home:hover {
    background: var(--color-primary-dark);
}

.error-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: transparent;
    color: var(--color-text-primary);
    text-decoration: none;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.error-btn-back:hover {
    background: var(--color-primary);
    color: var(--color-text-light);
}

@media (max-width: 768px) {
    .error-code {
        font-size: 5rem;
    }
    
    .error-title {
        font-size: 1.5rem;
    }
    
    .error-message {
        font-size: 1rem;
    }
}

/* ========================================
   Nav Login Icon
   ======================================== */

.nav-item-login {
    margin-left: 2rem;
}

.nav-link-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem !important;
}

.nav-link-login .nav-link-icon,
.nav-link-login svg {
    width: 20px;
    height: 20px;
    font-size: 1.125rem;
    transition: color 0.3s ease;
}

.nav-link-login:hover .nav-link-icon,
.nav-link-login:hover svg {
    color: var(--color-primary-red);
}

/* ========================================
   Login Modal
   ======================================== */

.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-modal.active {
    display: flex;
}

.login-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.login-modal-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    font-family: var(--font-body);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: loginModalSlideIn 0.3s ease-out;
}

@keyframes loginModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.login-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    font-family: var(--font-heading);
}

.login-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

.login-modal-close svg {
    width: 20px;
    height: 20px;
}

.login-modal-body {
    padding: 2rem 1.5rem;
}

.login-modal-logo {
    text-align: center;
    margin-bottom: 1rem;
}

.login-modal-logo img {
    max-width: 180px;
    height: auto;
}

.login-modal-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

.login-modal-message {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    display: none;
}

.login-modal-message.success {
    display: block;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.login-modal-message.error {
    display: block;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.login-modal-form .form-group {
    margin-bottom: 1.25rem;
}

.login-modal-form .form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.form-input-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input-icon > svg:first-child,
.form-input-icon > i:first-child {
    position: absolute;
    left: 1rem;
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.form-input-icon .form-input {
    padding-left: 2.75rem;
    padding-right: 3rem;
}

.form-password-toggle {
    position: absolute;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.form-password-toggle:hover {
    color: var(--color-text-primary);
}

.form-password-toggle svg {
    width: 18px;
    height: 18px;
}

.login-modal-footer {
    margin-top: 1.5rem;
}

.login-modal-form .btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 5px;
    border: 2px solid transparent;
    background: linear-gradient(var(--color-primary-red), var(--color-primary-red)) padding-box,
                linear-gradient(135deg, #9ca3af, #d1d5db, #6b7280, #9ca3af) border-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    color: var(--color-text-light);
}

.login-modal-form .btn-block:hover {
    background: linear-gradient(var(--color-primary-red-dark), var(--color-primary-red-dark)) padding-box,
                linear-gradient(135deg, #9ca3af, #d1d5db, #6b7280, #9ca3af) border-box;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

.login-modal-form .btn-block svg {
    width: 18px;
    height: 18px;
}

.login-modal-form .btn-block.loading {
    pointer-events: none;
    opacity: 0.7;
}

@media (max-width: 480px) {
    .login-modal-content {
        max-width: 100%;
        margin: 0.5rem;
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
    }
    
    .login-modal-body {
        padding: 1.5rem 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE APP-LIKE EXPERIENCE ENHANCEMENTS
   Added for better mobile UX with native app feel
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Safe Area Insets for Modern Phones (Notch, Home Indicator) */
@supports (padding: max(0px)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top, 0px);
        --safe-area-inset-right: env(safe-area-inset-right, 0px);
        --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
        --safe-area-inset-left: env(safe-area-inset-left, 0px);
    }
}

/* Mobile-specific body styles for app-like feel */
@media (max-width: 767px) {
    html {
        overscroll-behavior-y: auto;
        height: auto;
        min-height: 100%;
        /* Do NOT set overflow-x: hidden on html for mobile.
           It creates a new scroll container on iOS Safari, breaking touch scrolling.
           .main-content { overflow-x: clip } handles horizontal overflow instead (clip does not
           create a scroll container unlike hidden). */
    }
    
    body {
        /* Do NOT set any explicit overflow on body for mobile.
           Let html/body overflow default to auto so the viewport handles scrolling.
           .main-content has overflow-x: clip to prevent horizontal overflow without creating a scroll container. */
        overscroll-behavior-y: auto;
        height: auto;
        min-height: 100%;
        touch-action: manipulation;
    }
    
    /* Apply safe area padding to main header */
    .main-header {
        padding-top: max(0px, env(safe-area-inset-top, 0px));
    }
    
    .main-header.scrolled {
        padding-top: max(0px, env(safe-area-inset-top, 0px));
    }
    
    /* Footer safe area padding */
    .site-footer {
        padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom, 0px));
    }
}

/* Enhanced Touch Targets and Feedback */
@media (max-width: 767px) {
    /* Minimum touch target size (44px as per Apple HIG) */
    .btn,
    button,
    a.btn,
    .social-link,
    .filter-group select,
    .form-input,
    .gallery-item-view,
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Sidebar nav links keep 56px height (do not override) */
    .main-navigation .nav-link {
        min-height: 56px;
    }
    
    /* Larger tap targets for common elements */
    .hero-flag-item {
        min-height: 48px;
        padding: var(--spacing-xs);
        -webkit-tap-highlight-color: transparent;
    }
    
    .hero-flag-item:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
    
    /* Enhanced button feedback */
    .btn:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }
    
    /* Card tap feedback */
    .event-timeline-card:active,
    .gallery-item:active,
    .instagram-card:active {
        transform: scale(0.98);
        transition: transform 0.15s ease;
    }
}

/* Hero Flags - Improved Mobile Layout (Bottom-Right) */
@media (max-width: 767px) {
    .hero-flags {
        position: absolute;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        top: auto;
        background: transparent;
        padding: 0;
        justify-content: center;
        gap: 0.4rem;
        z-index: 10;
        max-width: 85%;
        width: auto;
        margin-top: 0;
        flex-wrap: nowrap;
    }
    
    .hero-flag-item {
        flex: 0 0 auto;
    }
    
    .hero-flag {
        width: 30px;
        height: auto;
        border-radius: 3px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .hero-flag-name {
        font-size: 0.375rem;
        margin-top: 1px;
    }
    
    .hero-container {
        padding-bottom: var(--spacing-xl);
    }
}

/* Instagram Grid - Swipeable Cards for Mobile */
@media (max-width: 767px) {
    .instagram-cards-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: var(--spacing-sm);
        padding: 0 var(--spacing-sm);
    }
    
    .instagram-cards-grid::-webkit-scrollbar {
        display: none;
    }
    
    .instagram-card {
        flex: 0 0 calc(50% - var(--spacing-xs));
        scroll-snap-align: start;
        aspect-ratio: 1;
        min-width: 150px;
    }
}

@media (max-width: 479px) {
    .instagram-card {
        flex: 0 0 75%;
        min-width: 200px;
    }
}

/* Events Slider - Enhanced Mobile Touch */
@media (max-width: 767px) {
    .events-slider-slide {
        -webkit-tap-highlight-color: transparent;
    }
    
    .event-timeline-card {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Modal Improvements for Mobile */
@media (max-width: 767px) {
    /* Contact Modal - Full Screen on Mobile */
    .contact-modal {
        padding: 0;
        align-items: flex-end;
    }
    
    .contact-modal-content {
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        max-width: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    
    .contact-modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .contact-modal-right {
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom, 0px));
    }
    
    /* Login Modal - Centered Card */
    .login-modal {
        padding: var(--spacing-md);
        padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom, 0px));
    }
    
    .login-modal-content {
        border-radius: var(--border-radius-lg);
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }
    
    /* Lightbox - Full Screen for Mobile */
    .lightbox-modal {
        padding: 0;
    }
    
    .lightbox-content {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
    }
    
    .lightbox-image {
        max-height: calc(100vh - 150px);
        max-height: calc(100dvh - 150px);
        border-radius: 0;
    }
    
    .lightbox-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
        padding: var(--spacing-xl) var(--spacing-md);
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom, 0px));
        margin: 0;
    }
    
    .lightbox-close {
        top: max(var(--spacing-md), env(safe-area-inset-top, 0px));
        right: var(--spacing-md);
    }
}

/* Country Flags Section - Better Mobile Layout */
@media (max-width: 767px) {
    .country-nav-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) 0;
        justify-content: flex-start;
    }
    
    .country-nav-container::-webkit-scrollbar {
        display: none;
    }
    
    .country-nav-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    
    .country-nav-flag {
        width: 50px;
        height: auto;
    }
}

/* Pull-to-Refresh Style Visual Hint */
@media (max-width: 767px) {
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        background: linear-gradient(180deg, var(--color-primary-red) 0%, transparent 100%);
        opacity: 0;
        pointer-events: none;
        z-index: 9999;
        transition: height 0.2s ease, opacity 0.2s ease;
    }
}

/* Smooth Scrolling Sections */
@media (max-width: 767px) {
    section {
        scroll-margin-top: var(--header-height-mobile);
    }
}

/* Better Form Experience on Mobile */
@media (max-width: 767px) {
    /* Prevent zoom on input focus (iOS) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* Better input styling for mobile */
    .form-input,
    .admin-form-input,
    .admin-form-select,
    .admin-form-textarea {
        padding: var(--spacing-md);
        border-radius: var(--border-radius-md);
        border: 2px solid var(--color-border);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    
    .form-input:focus,
    .admin-form-input:focus,
    .admin-form-select:focus,
    .admin-form-textarea:focus {
        border-color: var(--color-primary-red);
        box-shadow: 0 0 0 3px rgba(221, 7, 7, 0.1);
        outline: none;
    }
}

/* Skeleton Loading States */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Hide scrollbars but keep functionality (utility class) */
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Scroll Indicator for Horizontal Scrollable Areas */
@media (max-width: 767px) {
    .scroll-hint {
        position: relative;
    }
    
    .scroll-hint::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, var(--color-bg-primary));
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    
    .scroll-hint.scrolled-end::after {
        opacity: 0;
    }
}

/* Better Active States for Touch */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices - remove hover effects, enhance active states */
    .btn:hover {
        transform: none;
    }
    
    .btn:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }
    
    .nav-link:hover {
        color: inherit;
    }
    
    .nav-link:active {
        color: var(--color-primary-red);
    }
    
}

/* Reduced Motion Preferences */
@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;
    }
}

/* Entry validation (QR code target page) */
.entry-validation-section {
    padding-top: calc(var(--header-height-mobile, 70px) + 3rem);
    padding-bottom: 3rem;
    min-height: 50vh;
}

@media (min-width: 768px) {
    .entry-validation-section {
        padding-top: calc(var(--header-height, 80px) + 4rem);
    }
}

.entry-validation-inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.entry-validation-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border, #e8e8e8);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.entry-validation-valid {
    border-color: #10b981;
    background: linear-gradient(to bottom, rgba(16, 185, 129, 0.04), transparent);
}

.entry-validation-invalid {
    border-color: #ef4444;
    background: linear-gradient(to bottom, rgba(239, 68, 68, 0.04), transparent);
}

.entry-validation-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #10b981;
    opacity: 0.9;
}

.entry-validation-invalid .entry-validation-icon {
    background: #ef4444;
}

.entry-validation-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.entry-validation-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.entry-validation-event,
.entry-validation-venue {
    font-size: 1rem;
    color: var(--color-text-secondary, #555);
    margin-bottom: 0.25rem;
}

.entry-validation-type {
    font-size: 0.875rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.entry-validation-badge {
    display: inline-block;
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-weight: 500;
}

.entry-validation-paid {
    background: #d1fae5;
    color: #065f46;
}

.entry-validation-unpaid {
    background: #fef3c7;
    color: #92400e;
}

.entry-validation-text {
    margin-top: 0.75rem;
    color: var(--color-text-secondary, #555);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE FIXES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Contact Modal - Mobile Landscape: scrollable full-screen */
@media (max-width: 767px) and (orientation: landscape) {
    .contact-modal {
        padding: 0;
        align-items: stretch;
    }

    .contact-modal-content {
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        max-width: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .contact-modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        min-height: 0;
    }

    .contact-modal-left {
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;
    }

    .contact-modal-right {
        flex: 0 0 auto;
        overflow: visible;
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    }

    .contact-modal-form {
        overflow: visible;
    }

    .contact-modal-form textarea.form-input {
        min-height: 60px;
    }

    .contact-modal-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.5rem;
        position: sticky;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 20;
    }
}

/* Landscape larger phones (landscape with height < 500px) */
@media (max-height: 500px) and (orientation: landscape) {
    .contact-modal-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .contact-modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .contact-modal-left-logo {
        margin-bottom: 0.5rem;
    }

    .contact-modal-left-image {
        max-width: 100px;
    }

    .contact-modal-left-content {
        padding: 0.75rem;
    }

    .contact-modal-left-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .contact-modal-left-info li {
        margin-bottom: 0.5rem;
        font-size: 0.75rem;
    }
}

/* Hero Flags - Mobile Landscape: bottom-right, smaller */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-flags {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        left: auto;
        top: auto;
        justify-content: flex-end;
        gap: 0.375rem;
        max-width: 50%;
        width: auto;
        margin-top: 0;
        padding: 0;
        flex-wrap: wrap;
    }

    .hero-flag {
        width: 28px;
        height: auto;
        border-radius: 3px;
    }

    .hero-flag-name {
        font-size: 0.4375rem;
        margin-top: 1px;
    }

    .hero-flag-item {
        min-height: auto;
        padding: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TABLET (iPad) PORTRAIT FIXES - Flags positioning
   ═══════════════════════════════════════════════════════════════════════════════ */

/* iPad portrait: 768px - 1024px in portrait orientation */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .hero-title-image {
        max-width: 55% !important;
        min-width: 380px;
    }

    .hero-flags {
        position: absolute;
        bottom: 2rem;
        right: 2rem;
        left: auto;
        top: auto;
        justify-content: flex-end;
        gap: 0.75rem;
        max-width: none;
        width: auto;
        flex-wrap: nowrap;
    }

    .hero-flag {
        width: 48px;
        height: auto;
    }

    .hero-flag-name {
        font-size: 0.5rem;
    }

    .hero-flag-item {
        gap: 0.15rem;
    }

    .experience-section-title .experience-title-image {
        height: auto !important;
        min-height: 70px !important;
        max-height: 90px !important;
    }

    .experience-header .section-title.experience-section-title {
        font-size: 4rem !important;
        gap: 0.15em !important;
    }

    .experience-section-title .experience-title-text:last-child {
        margin-left: -0.2em;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LARGE SCREEN SPACING - Professional standard spacing for 1440px+ and 1920px+
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Large Desktops (1440px+) */
@media (min-width: 1440px) {
    .story-container {
        padding: 0 var(--container-padding-large);
    }

    .footer-container {
        padding: 0 var(--container-padding-large);
    }

    .sponsor-section-inner {
        padding: 0 var(--container-padding-large);
    }

    .events-timeline-section {
        padding: 5rem 0;
    }

    .experience-section {
        padding: 5rem 0;
    }

    .youtube-videos-section {
        padding: 5rem 0;
    }

    .story-section {
        padding: 5rem 0;
    }

    .story-section-hero {
        padding: 5rem 0;
    }

    .gallery-section {
        padding: 5rem 0;
        padding-bottom: calc(5rem + 2rem);
    }

    .sponsor-section {
        margin-top: var(--spacing-2xl);
        padding-top: 3.5rem;
        padding-bottom: 3rem;
    }

    .site-footer {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
    }

    .page-header-section {
        min-height: 320px !important;
        padding-bottom: 3rem !important;
    }
}

/* Extra Large Desktops / Big Screens (1920px+) */
@media (min-width: 1920px) {
    .story-container {
        padding: 0 var(--container-padding-xlarge);
    }

    .footer-container {
        padding: 0 var(--container-padding-xlarge);
    }

    .sponsor-section-inner {
        padding: 0 var(--container-padding-xlarge);
    }

    .events-timeline-section {
        padding: 6rem 0;
    }

    .experience-section {
        padding: 6rem 0;
    }

    .youtube-videos-section {
        padding: 6rem 0;
    }

    .story-section {
        padding: 6rem 0;
    }

    .story-section-hero {
        padding: 6rem 0;
    }

    .gallery-section {
        padding: 6rem 0;
        padding-bottom: calc(6rem + 2rem);
    }

    .sponsor-section {
        margin-top: var(--spacing-3xl);
        padding-top: 4rem;
        padding-bottom: 3.5rem;
    }

    .site-footer {
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    .page-header-section {
        min-height: 360px !important;
        padding-bottom: 3.5rem !important;
    }

    .events-timeline-header {
        margin-bottom: 3.5rem;
    }

    .experience-header {
        margin-bottom: 3.5rem;
    }
}