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

:root {
    --text: #f2f2f2;
    --blue: #6EC1E4;
    --dark: #2B4080;
    --yellow: #FFD700;
    --coral: #FF6B6B;
    --mint: #00FFFF;
    --purple: #9B59B6;
    --orange: #CC5500;
    --magenta: #E91E63;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--blue);
    color: var(--text);
    overflow-x: hidden;
}

/* Header Container - Full Width */
.header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-container.header-scrolled {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    height: 80px;
    padding: 0 30px;
}

/* Navigation - Inside Header Container */
nav {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-container.header-scrolled nav {
    gap: 30px;
}

.header-container nav a {
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 2px;
    transition: all 0.3s;
    white-space: nowrap;
    mix-blend-mode: difference;
}

.header-container.header-scrolled nav a {
    color: var(--blue);
    mix-blend-mode: normal;
    font-size: 12px;
    letter-spacing: 1.5px;
}

.header-container.header-scrolled nav a:hover {
    color: var(--dark);
    letter-spacing: 3px;
}

nav a:hover {
    letter-spacing: 4px;
}

/* Header Social Links - Inside Header Container */
.header-social {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 50px;
}

.header-social a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s;
    mix-blend-mode: difference;
    font-size: 14px;
}

.header-social a:hover {
    background: var(--text);
    color: var(--blue);
    transform: translateY(-5px);
}

.header-container.header-scrolled .header-social a {
    border-color: var(--blue);
    color: var(--blue);
    mix-blend-mode: normal;
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.header-container.header-scrolled .header-social a:hover {
    background: var(--dark);
    border-color: var(--dark);
    color: white;
}

/* Logo - Inside Header Container */
.logo {
    display: flex;
    align-items: center;
    height: 50px;
}

.logo a {
    display: block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo a:hover {
    transform: scale(1.1) rotate(5deg);
}

.logo img {
    height: 50px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    transition: all 0.3s ease;
    mix-blend-mode: difference;
}

.header-container.header-scrolled .logo img {
    mix-blend-mode: normal;
    height: 35px;
}

.logo a:hover img {
    filter: drop-shadow(0 5px 15px rgba(108, 193, 228, 0.4));
}

/* Page Sections */
.section {
    min-height: 100vh;
    position: relative;
    display: none;
}

.section.active {
    display: block;
}

/* Global Footer */
.global-footer {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    color: var(--blue);
    text-align: center;
    padding: 15px 0;
    font-size: 0.85rem;
    font-weight: 300;
    position: relative;
    z-index: 10;
    margin-top: auto;
    border-top: 1px solid rgba(110, 193, 228, 0.2);
}

.global-footer p {
    margin: 0;
    opacity: 0.8;
}

/* Contact Footer */
.contact-footer {
    background: var(--dark);
    color: var(--text);
    padding: 60px 40px 40px;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

.contact-quick h4 {
    text-align: center;
    margin-bottom: 40px;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--text);
    text-transform: uppercase;
}

.contact-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-quick-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.contact-quick-item:hover {
    transform: translateY(-5px) rotate(1deg);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.contact-quick-item strong {
    display: block;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 15px;
    transform: rotate(-1deg);
    transition: color 0.3s ease;
}

.contact-quick-item:nth-child(1):hover strong {
    color: var(--coral);
}

.contact-quick-item:nth-child(2):hover strong {
    color: var(--yellow);
}

.contact-quick-item:nth-child(3):hover strong {
    color: var(--mint);
}

.contact-quick-item .contact-details {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.8;
}

.contact-quick-item .contact-details p {
    margin: 0 0 8px 0;
}

.contact-quick-item .contact-details p:last-child {
    margin-bottom: 0;
}

.contact-quick-item .contact-details p strong {
    font-weight: 600;
    opacity: 1;
}

/* Enhanced contact styling */
.contact-office-title {
    display: block;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 15px;
    transform: rotate(-1deg);
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.contact-position {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--text);
    opacity: 0.9;
    letter-spacing: 0.5px;
}

.contact-name {
    font-weight: 800;
    font-size: 1.1em;
    color: var(--text);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.contact-email {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    transition: all 0.3s ease;
}

.contact-email:hover {
    text-decoration-color: var(--text);
    color: var(--yellow);
    text-decoration-thickness: 2px;
}

.contact-phone {
    font-weight: 500;
    opacity: 0.85;
}

.contact-address {
    opacity: 0.75;
    font-size: 0.9em;
    line-height: 1.4;
}

/* Email CTA Button */
.contact-email-button {
    text-align: center;
    margin-bottom: 40px;
}

.email-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 15px 30px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: rotate(-1deg);
    position: relative;
    overflow: hidden;
}

.email-cta-button:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--yellow);
    color: var(--yellow);
    transform: rotate(0deg) translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.2);
}

.email-icon {
    font-size: 1.4rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.email-cta-button:hover .email-icon {
    background: var(--yellow);
    color: var(--dark);
    transform: rotate(360deg) scale(1.1);
}

.email-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

.email-cta-button:hover .email-text {
    letter-spacing: 1px;
}

/* Hide mobile social icons on desktop */
.mobile-social {
    display: none;
}

/* Menu Toggle */
.menu-toggle {
    position: fixed;
    top: 40px;
    right: 40px;
    width: 30px;
    height: 20px;
    z-index: 103;
    display: none;
    transition: none !important;
    transform: none !important;
}

/* Ensure menu toggle is always visible and never moves - override any nav-hidden class */
.menu-toggle,
.menu-toggle.nav-hidden,
header .menu-toggle,
header .menu-toggle.nav-hidden {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: fixed !important;
    top: 40px !important;
    right: 40px !important;
}

.menu-toggle span {
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--text);
    transition: all 0.3s;
}

.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(9px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-9px);
}

/* Hide mobile menu logo on desktop */
.mobile-menu-logo {
    display: none !important;
}

/* Responsive display utilities */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .contact-footer {
        padding: 40px 20px 30px;
        margin-top: 40px;
    }
    
    .contact-quick h4 {
        margin-bottom: 30px;
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .contact-quick-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .contact-quick-item {
        padding: 25px 20px;
    }
    
    .contact-quick-item strong {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        letter-spacing: 1px;
    }
    
    .contact-email-button {
        margin-bottom: 30px;
    }
    
    .email-cta-button {
        padding: 12px 25px;
        font-size: 1rem;
        gap: 10px;
    }
    
    .email-icon {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    /* Disable header scroll behavior on mobile */
    .header-container {
        background: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        height: 120px !important;
        padding: 0 40px !important;
    }

    /* Make mobile logo smaller with smooth opacity transition */
    .logo img {
        height: 35px !important;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .menu-toggle {
        display: block;
    }

    nav {
        position: fixed;
        left: -100%;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background: rgba(110, 193, 228, 0.95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: none !important;
        gap: 20px;
        transition: left 0.3s;
        z-index: 102;
        mix-blend-mode: normal;
        padding: 0 !important;
        height: 100vh !important;
    }
    
    /* Override any header container styles when mobile nav is active */
    nav.active {
        left: 0;
        padding: 0 !important;
        height: 100vh !important;
    }

    nav a {
        font-size: 2rem;
        color: white !important;
        mix-blend-mode: normal !important;
    }

    /* Mobile Menu Logo */
    .mobile-menu-logo {
        margin-bottom: 2rem;
        padding-top: 1rem;
        display: none;
    }

    nav .mobile-menu-logo {
        display: block;
    }

    .mobile-menu-logo a {
        display: block;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        mix-blend-mode: normal !important;
    }

    .mobile-menu-logo a:hover {
        transform: scale(1.1) rotate(5deg);
    }

    .mobile-only-logo {
        height: 40px;
        width: auto;
        max-width: 120px;
        object-fit: contain;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
        mix-blend-mode: normal !important;
        opacity: 1 !important;
    }

    /* Mobile Social Icons - Split over two lines */
    .mobile-social {
        margin-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        max-width: 150px;
    }

    .mobile-social a {
        width: 50px;
        height: 50px;
        border: 1px solid white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: white !important;
        font-size: 1.2rem;
        transition: all 0.3s;
    }

    .mobile-social a:hover {
        background: white;
        color: var(--dark) !important;
        transform: translateY(-5px);
    }

    /* Hide header social icons on mobile */
    .header-social {
        display: none;
    }

    /* Switch display utilities for mobile */
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }
}

/* ============================================
   NATIVE PLAYERS (assets/js/player.js)
   ============================================ */

/* Muted decorative background loop, sized to fill whatever box it is dropped
   into. player.js owns this element's opacity (it fades the loop in on the
   first decoded frame), so nothing here touches it. */
.abl-loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

/* Click-to-play player. The generated archive pages, the homepage slider, the
   archive grid and the news embeds all end up with this element, and its chrome
   is the browser's own control bar drawn inside the element along its bottom
   edge rather than floating over it. */
.abl-video {
    /* The letterbox is part of the element now. Painting it black keeps a
       container tinted for its poster state from showing through as coloured
       bars around a video that is not 16:9. */
    background: #000;
    /* Advisory: no shipping engine tints its media controls from either
       property yet. color-scheme already governs any scrollbar or form widget a
       UA draws inside the element, and mint is the site's interactive accent
       for the day a control bar starts honouring it. */
    color-scheme: dark;
    accent-color: var(--mint);
}

/* `controls` makes this element keyboard-focusable, and on a generated archive
   page it is the only interactive thing between the header and the footer, so
   the ring is never suppressed. Inset, because every container holding one of
   these clips its overflow and an outset ring would be cropped away. */
.abl-video:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: -3px;
}