/* ============================================================
   PUBLIC SITE LAYOUT
   ------------------------------------------------------------
   Extracted verbatim from app.blade.php, where it lived
   as an inline <style> block in the document head.

   Load order matters and is unchanged: vendor CSS, then
   css/responsive.css (the fluid type and image-card layer),
   then this file, then each page's @push('styles').
   ============================================================ */

        /* ========================================
           CSS VARIABLES & RESET
        ======================================== */
        :root {
            --primary: #8B4513;
            --primary-dark: #6B3410;
            --primary-light: #A55D2E;
            --primary-rgb: 139, 69, 19;
            --secondary: #DAA520;
            --secondary-dark: #B8860B;
            --secondary-light: #E5B73B;
            --secondary-rgb: 218, 165, 32;
            --accent: #228B22;
            --accent-dark: #1B6B1B;
            --accent-light: #2E8B57;
            --dark: #2C1810;
            --darker: #1A0E08;
            --light: #FDF5E6;
            --light-bg: #FFF8E7;
            --gray: #5C4033;
            --gray-light: #F3F4F6;
            --gray-border: #E5E7EB;
            --white: #FFFFFF;
            --black: #000000;

            --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            --gradient-dark: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
            --gradient-radial: radial-gradient(circle at 30% 50%, rgba(139, 69, 19, 0.1) 0%, transparent 100%);

            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
            --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
            --shadow-hover: 0 20px 40px rgba(139, 69, 19, 0.2);

            --transition-fast: all 0.2s ease;
            --transition-base: all 0.3s ease;
            --transition-slow: all 0.5s ease;

            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --radius-2xl: 32px;
            --radius-3xl: 40px;

            /* Aliases. This layout names its tokens --primary / --secondary,
               the three portal layouts name theirs --primary-color /
               --secondary-color, and shared code (the navbar partial, the
               mobile menu rules below) reaches for the second spelling.
               An undefined var() is invalid at computed-value time, so those
               declarations were silently resolving to inherit/currentColor
               rather than the brand colours. Defining both spellings keeps a
               shared partial correct under any layout. */
            --primary-color: var(--primary);
            --secondary-color: var(--secondary);
            --accent-color: var(--accent);
        }

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

        /* Prevent horizontal overflow at the root — body alone isn't enough on iOS Safari */
        html {
            overflow-x: hidden;
            max-width: 100%;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--light);
            color: var(--dark);
            overflow-x: hidden;
            max-width: 100%;
            line-height: 1.6;
            scroll-behavior: smooth;
        }

        main {
            overflow-x: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }

        /* ========================================
           CUSTOM SCROLLBAR
        ======================================== */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--light-bg);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gradient-primary);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--gradient-dark);
        }

        /* ========================================
           SELECTION STYLING
        ======================================== */
        ::selection {
            background: var(--secondary);
            color: var(--white);
        }

        /* ========================================
           TYPOGRAPHY
        ======================================== */
        .text-gradient {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .text-shadow-sm {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .text-shadow-md {
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
        }

        .text-shadow-lg {
            text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* ========================================
           BUTTONS
        ======================================== */
        .btn-primary-custom {
            background: var(--gradient-primary);
            border: none;
            color: var(--white);
            padding: 12px 28px;
            border-radius: 50px;
            font-weight: 600;
            transition: var(--transition-base);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .btn-primary-custom::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-dark);
            transition: left 0.4s ease;
            z-index: -1;
        }

        .btn-primary-custom:hover::before {
            left: 0;
        }

        .btn-primary-custom:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            color: var(--white);
        }

        .btn-outline-custom {
            border: 2px solid var(--primary);
            color: var(--primary);
            background: transparent;
            padding: 10px 26px;
            border-radius: 50px;
            font-weight: 600;
            transition: var(--transition-base);
        }

        .btn-outline-custom:hover {
            background: var(--gradient-primary);
            color: var(--white);
            transform: translateY(-3px);
            border-color: transparent;
        }

        /* ========================================
           NAVIGATION — fully responsive
        ======================================== */
        .navbar {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            padding: 0.75rem 0;
            transition: var(--transition-base);
            box-shadow: var(--shadow-sm);
            z-index: 1030;
        }

        .navbar.scrolled {
            padding: 0.4rem 0;
            box-shadow: var(--shadow-lg);
        }

        /* Always keep brand + toggler on one row */
        .navbar > .container,
        .navbar > .container-fluid {
            flex-wrap: nowrap !important;
            align-items: center;
        }

        /* ── Brand ── */
        .navbar-brand {
            font-family: 'Playfair Display', serif;
            font-weight: 800;
            /* Fluid: 0.65rem floor → scales with vw → 1.3rem ceiling */
            font-size: clamp(0.65rem, 3.5vw, 1.3rem);
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            /* Let brand compress when space is tight */
            flex: 0 1 auto;
            min-width: 0;
            max-width: calc(100% - 58px); /* always leave room for toggler */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            gap: 0.4rem !important;
            padding-right: 0.25rem;
            transition: var(--transition-base);
        }

        .navbar-brand:hover { transform: scale(1.02); }

        /* Logo image inside brand */
        .navbar-brand .site-logo,
        .navbar-brand img {
            max-height: 42px;
            width: auto;
            flex-shrink: 0;
            /* Reset gradient clip so image shows normally */
            -webkit-text-fill-color: initial;
            transition: var(--transition-base);
        }

        .navbar.scrolled .navbar-brand img { max-height: 38px; }

        /* Toggler stays compact and never wraps */
        .navbar-toggler {
            flex-shrink: 0;
            border-color: rgba(139, 69, 19, 0.3);
            padding: 0.3rem 0.55rem;
        }

        .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.2);
        }

        /* ── Nav links ── */
        .nav-link {
            color: var(--dark) !important;
            font-weight: 500;
            margin: 0 0.3rem;
            position: relative;
            transition: var(--transition-base);
            padding: 0.5rem 0.75rem !important;
        }

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

        .nav-link:hover::after,
        .nav-link.active::after { width: 80%; }

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

        /* ── Buttons ── */
        .btn-nav {
            background: var(--gradient-primary);
            color: white !important;
            border-radius: 50px;
            padding: 0.45rem 1.25rem !important;
            transition: var(--transition-base);
        }

        .btn-nav:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .btn-nav::after { display: none; }

        .btn-primary-custom {
            background: var(--gradient-primary);
            border: none;
            color: white;
            padding: 7px 18px;
            border-radius: 50px;
            font-weight: 500;
            font-size: 0.9rem;
            white-space: nowrap;
            transition: var(--transition-base);
        }

        .btn-primary-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(139, 69, 19, 0.3);
            color: white;
        }

        .member-badge-exco {
            background: linear-gradient(135deg, #DAA520, #8B4513);
            color: white;
            padding: 2px 7px;
            border-radius: 50px;
            font-size: 0.68rem;
            font-weight: 600;
        }

        /* ── Dropdowns ── */
        .dropdown-menu {
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-radius: 12px;
            margin-top: 10px;
            animation: navFadeDown 0.25s ease;
        }

        @keyframes navFadeDown {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .dropdown-item { padding: 10px 18px; transition: all 0.2s ease; }
        .dropdown-item:hover { background: rgba(139,69,19,0.05); padding-left: 22px; }
        .dropdown-header { background: var(--gradient-primary); color: white; border-radius: 12px 12px 0 0; }

        /* ── Progress bar ── */
        .progress-bar-container {
            position: absolute; bottom: 0; left: 0; right: 0;
            height: 3px; background: rgba(0,0,0,0.05);
        }

        .progress-bar {
            height: 100%; width: 0;
            background: var(--gradient-primary);
            transition: width 0.3s ease;
        }

        /* ── Notification badge pulse ── */
        /* Fallback hero helper */
        .min-h-hero { min-height: 75vh; }

        @keyframes pulse {
            0%,100% { transform: scale(1);   opacity: 1; }
            70%      { transform: scale(1.2); opacity: 0.8; }
        }

        .position-absolute .badge { animation: pulse 1.5s infinite; }

        /* ── Notification / Message panel (always white, any screen size) ── */
        .navbar-panel {
            background: white !important;
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        /* ── Mobile top-bar icon button ── */
        .navbar-mobile-icon {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(139,69,19,0.06);
            color: var(--dark) !important;
            font-size: 1rem;
            text-decoration: none;
            transition: background 0.2s;
        }
        .navbar-mobile-icon:hover { background: rgba(139,69,19,0.12); }

        /* ── Mobile compact Join button ── */
        .btn-sm-nav {
            padding: 5px 12px;
            font-size: 0.8rem;
        }

        /* ── Mobile collapsed menu components ── */
        .mobile-user-card {
            background: linear-gradient(135deg, rgba(139,69,19,0.04) 0%, rgba(218,165,32,0.07) 100%);
            border: 1px solid rgba(139,69,19,0.12);
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 8px;
            text-decoration: none;
        }

        .mobile-section-label {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #aaa;
            padding: 10px 4px 4px;
        }

        .mobile-menu-group {
            background: rgba(0,0,0,0.02);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .mobile-menu-danger-group {
            background: rgba(220,53,69,0.03);
            border-color: rgba(220,53,69,0.1);
        }

        .mobile-menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            transition: background 0.15s;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

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

        .mobile-menu-item:hover, .mobile-menu-item:active {
            background: rgba(139,69,19,0.05);
            color: var(--primary-color);
        }

        .mobile-menu-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: rgba(139,69,19,0.08);
            color: var(--primary-color);
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        .mobile-menu-item-danger { color: #dc3545 !important; }
        .mobile-menu-item-danger .mobile-menu-icon {
            background: rgba(220,53,69,0.08);
            color: #dc3545;
        }
        .mobile-menu-item-danger:hover { background: rgba(220,53,69,0.06) !important; }

        .mobile-guest-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 4px 0 8px;
        }

        .mobile-btn-login {
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            border-radius: 50px;
            padding: 10px 20px;
            font-weight: 600;
            text-align: center;
        }
        .mobile-btn-login:hover {
            background: rgba(139,69,19,0.06);
            color: var(--primary-color);
        }

        .mobile-btn-join {
            border-radius: 50px;
            padding: 10px 20px;
            text-align: center;
        }

        /* ══════════════════════════════════════
           TABLET (< 992px) — collapsed menu
        ══════════════════════════════════════ */
        @media (max-width: 991.98px) {
            .navbar { padding: 0.6rem 0; }

            .navbar-brand img { max-height: 34px; }

            /* The menu overlays BELOW the bar instead of being part of it.
               In normal flow this panel is a child of the navbar, so opening
               it grew the navbar itself: the bar's white background and its
               shadow stretched down the whole height of the menu, pushing the
               hero out of view. Positioning it absolutely against .navbar —
               the nearest positioned ancestor, since Bootstrap's .fixed-top
               sets position: fixed — keeps the bar one constant height no
               matter how long the menu is. */
            .navbar-collapse {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 5;                 /* above the load progress bar */
                margin: 0.5rem 0.75rem 0;   /* clear of the bar and the screen edges */
                padding: 1rem;
                background: white;
                border: 1px solid rgba(0, 0, 0, 0.06);
                border-radius: 14px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.12);
                /* Never taller than the space left under the bar. dvh second so
                   browsers that support it discount mobile Safari's chrome;
                   the rest keep the vh value. */
                max-height: calc(100vh - 6rem);
                max-height: calc(100dvh - 6rem);
                overflow-x: hidden;
            }

            /* Only scroll once open. During Bootstrap's .collapsing step the
               panel needs overflow: hidden for the height transition, and
               .show beats .collapsing on specificity. */
            .navbar-collapse.show {
                overflow-y: auto;
                overscroll-behavior: contain;
            }

            .nav-link { margin: 0; padding: 0.6rem 0.75rem !important; }
            .nav-link::after { display: none; }

            /* Only nav dropdowns inside the collapse go transparent/flat;
               notification & message panels (outside collapse) keep their white card style */
            .navbar-collapse .dropdown-menu {
                box-shadow: none;
                padding-left: 1rem;
                border: none;
                background: transparent;
                animation: none;
                margin-top: 0;
            }

            .navbar-collapse .dropdown-item { padding: 0.45rem 0.75rem; }
            .navbar-collapse .dropdown-item:hover { padding-left: 1rem; }

            /* Active nav link highlight in collapsed mobile menu */
            .navbar-collapse .nav-link.active {
                color: var(--primary) !important;
                background: rgba(139, 69, 19, 0.07);
                border-radius: 8px;
                font-weight: 600;
            }

        }

        /* ══════════════════════════════════════
           MOBILE (< 576px) — small phones
        ══════════════════════════════════════ */
        @media (max-width: 575.98px) {
            .navbar { padding: 0.5rem 0; }

            .navbar-brand img { max-height: 28px; }

            .btn-primary-custom {
                padding: 5px 12px;
                font-size: 0.8rem;
            }

            /* Compact mobile icon button on small phones */
            .navbar-mobile-icon { width: 34px; height: 34px; font-size: 0.95rem; }
        }

        /* ══════════════════════════════════════
           XSMALL (< 360px) — very small phones
        ══════════════════════════════════════ */
        @media (max-width: 359.98px) {
            .navbar-brand img { max-height: 22px; }
            .navbar-brand { gap: 0.25rem !important; }
            /* Shrink Join/Login button text */
            .btn-primary-custom { padding: 4px 8px; font-size: 0.75rem; }
        }

        /* ========================================
           HERO SLIDER - FULLY RESPONSIVE
        ======================================== */
        .hero-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        /* Desktop Hero Slider */
        .hero-swiper {
            width: 100%;
            height: 85vh;
            min-height: 520px;
        }

        .hero-swiper .swiper-slide {
            position: relative;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .hero-swiper .swiper-slide::before {
            content: '';
            position: absolute;
            inset: 0;
            /* Single gradient overlay — image url() is set on the element itself */
            background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.1) 100%);
            z-index: 1;
        }

        /* Ensure text content sits above the overlay */
        .hero-swiper .swiper-slide .container {
            position: relative;
            z-index: 2;
        }

        .slide-content {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .slide-title {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .slide-subtitle {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            opacity: 0.95;
        }

        .slide-description {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            max-width: 600px;
        }

        .btn-slide {
            display: inline-block;
            background: white;
            color: var(--primary);
            padding: 12px 35px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition-base);
        }

        .btn-slide:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            color: var(--primary-dark);
        }

        .btn-slide-outline {
            background: transparent;
            border: 2px solid white;
            color: white;
            margin-left: 15px;
        }

        .btn-slide-outline:hover {
            background: white;
            color: var(--primary);
        }

        /* Swiper Navigation */
        .swiper-button-next,
        .swiper-button-prev {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            transition: var(--transition-base);
            color: white;
        }

        .swiper-button-next:hover,
        .swiper-button-prev:hover {
            background: var(--gradient-primary);
        }

        .swiper-button-next:after,
        .swiper-button-prev:after {
            font-size: 1.2rem;
        }

        .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: white;
            opacity: 0.5;
        }

        .swiper-pagination-bullet-active {
            background: var(--secondary);
            opacity: 1;
        }

        /* Scroll Indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            cursor: pointer;
            text-align: center;
        }

        .mouse {
            width: 30px;
            height: 50px;
            border: 2px solid white;
            border-radius: 20px;
            position: relative;
            margin: 0 auto 10px;
        }

        .wheel {
            width: 4px;
            height: 8px;
            background: white;
            border-radius: 2px;
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            animation: scrollWheel 1.5s infinite;
        }

        @keyframes scrollWheel {
            0% {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }

            100% {
                opacity: 0;
                transform: translateX(-50%) translateY(15px);
            }
        }

        .arrow-down {
            animation: bounce 2s infinite;
        }

        .arrow-down i {
            color: white;
            font-size: 1rem;
            opacity: 0.8;
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(5px);
            }
        }

        /* ========================================
           RESPONSIVE HERO SLIDER BREAKPOINTS
        ======================================== */
        /* Desktop Large (1400px and above) */
        @media (min-width: 1400px) {
            .slide-title {
                font-size: 5rem;
            }

            .slide-subtitle {
                font-size: 1.8rem;
            }

            .slide-description {
                font-size: 1.2rem;
            }
        }

        /* Desktop (1200px - 1399px) */
        @media (min-width: 1200px) and (max-width: 1399px) {
            .slide-title {
                font-size: 4rem;
            }

            .slide-subtitle {
                font-size: 1.4rem;
            }
        }

        /* Tablet Landscape (992px - 1199px) */
        @media (min-width: 992px) and (max-width: 1199px) {
            .hero-swiper {
                height: 80vh;
                min-height: 480px;
            }

            .slide-title {
                font-size: 3.2rem;
            }

            .slide-subtitle {
                font-size: 1.2rem;
            }

            .slide-description {
                font-size: 1rem;
            }
        }

        /* Tablet Portrait (768px - 991px) */
        @media (min-width: 768px) and (max-width: 991px) {
            .hero-swiper {
                height: 72vh;
                min-height: 420px;
            }

            .slide-title {
                font-size: 2.5rem;
            }

            .slide-subtitle {
                font-size: 1rem;
            }

            .slide-description {
                font-size: 0.9rem;
                max-width: 90%;
            }

            .btn-slide {
                padding: 10px 25px;
                font-size: 0.9rem;
            }

            .swiper-button-next,
            .swiper-button-prev {
                width: 40px;
                height: 40px;
            }

            .swiper-button-next:after,
            .swiper-button-prev:after {
                font-size: 1rem;
            }
        }

        /* Mobile Landscape (576px - 767px) */
        @media (min-width: 576px) and (max-width: 767px) {
            .hero-swiper {
                height: 65vh;
                min-height: 380px;
            }

            .slide-title {
                font-size: 2rem;
            }

            .slide-subtitle {
                font-size: 0.9rem;
            }

            .slide-description {
                font-size: 0.85rem;
                margin-bottom: 1.5rem;
            }

            .btn-slide {
                padding: 8px 20px;
                font-size: 0.85rem;
            }

            .swiper-button-next,
            .swiper-button-prev {
                display: none;
            }

            .scroll-indicator {
                display: none;
            }
        }

        /* Mobile Portrait (below 576px) */
        @media (max-width: 575px) {
            .hero-swiper {
                height: 62vh;
                min-height: 380px;
            }

            .slide-title {
                font-size: 1.6rem;
            }

            .slide-subtitle {
                font-size: 0.85rem;
            }

            .slide-description {
                font-size: 0.8rem;
                max-width: 100%;
                margin-bottom: 1.5rem;
            }

            .slide-buttons {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .btn-slide {
                padding: 10px 20px;
                font-size: 0.85rem;
                width: 100%;
                text-align: center;
            }

            .btn-slide-outline {
                margin-left: 0;
            }

            .swiper-button-next,
            .swiper-button-prev {
                display: none;
            }

            .scroll-indicator {
                display: none;
            }

            .swiper-pagination-bullet {
                width: 8px;
                height: 8px;
            }
        }

        /* Extra Small Mobile (below 400px) */
        @media (max-width: 400px) {
            .hero-swiper { height: 58vh; min-height: 340px; }

            .slide-title { font-size: 1.4rem; }
            .slide-subtitle { font-size: 0.8rem; }
            .slide-description { font-size: 0.75rem; }
            .btn-slide { padding: 8px 15px; font-size: 0.8rem; }
        }

        /* ========================================
           STATS STRIP
        ======================================== */
        .stats-strip {
            background: var(--gradient-primary);
            position: relative;
            z-index: 5;
        }

        .strip-item {
            padding: 28px 20px;
            text-align: center;
            color: white;
            border-right: 1px solid rgba(255,255,255,0.15);
            transition: background 0.3s ease;
        }

        .strip-item:last-child { border-right: none; }
        .strip-item:hover { background: rgba(0,0,0,0.15); }

        .strip-icon {
            font-size: 1.6rem;
            opacity: 0.85;
            margin-bottom: 8px;
        }

        .strip-number {
            font-size: clamp(1.5rem, 4vw, 2.2rem);
            font-weight: 800;
            font-family: 'Playfair Display', serif;
            line-height: 1;
            margin-bottom: 4px;
        }

        .strip-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.85;
            font-weight: 600;
        }

        @media (max-width: 767.98px) {
            .strip-item {
                padding: 20px 10px;
                border-right: 1px solid rgba(255,255,255,0.15);
                border-bottom: 1px solid rgba(255,255,255,0.15);
            }
            /* 2×2 grid on mobile — remove right border on even items */
            .strip-item:nth-child(2),
            .strip-item:nth-child(4) { border-right: none; }
            .strip-item:nth-child(3),
            .strip-item:nth-child(4) { border-bottom: none; }

            .strip-icon { font-size: 1.3rem; }
            .strip-number { font-size: 1.6rem; }
            .strip-label { font-size: 0.68rem; }
        }

        /* ========================================
           SECTION STYLES
        ======================================== */
        .section-padding {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        @media (max-width: 575.98px) {
            .section-title { margin-bottom: 30px; }
            .section-subtitle { font-size: 0.9rem; margin-top: 12px; }
        }

        .section-title .badge {
            background: var(--gradient-primary) !important;
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 1rem;
            display: inline-block;
        }

        .section-title h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            color: var(--primary);
            margin-bottom: 15px;
        }

        .section-title .divider {
            width: 80px;
            height: 4px;
            background: var(--gradient-primary);
            margin: 0 auto;
            border-radius: 2px;
        }

        .section-subtitle {
            color: var(--gray);
            font-size: 1.1rem;
            max-width: 700px;
            margin: 20px auto 0;
        }

        /* ========================================
           ORGANISATION ACHIEVEMENT CARDS
        ======================================== */
        .achievement-card {
            background: white;
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(0,0,0,0.05);
            transition: var(--transition-base);
            display: flex;
            flex-direction: column;
        }
        .achievement-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-xl);
        }
        /* aspect-ratio instead of a fixed 220px: the frame now scales with the
           column, so a 3-up desktop grid and a 1-up phone column both get a
           correctly proportioned image rather than a letterbox or a tall crop. */
        .achievement-img-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: #f8f5f0;
        }
        .achievement-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            /* contain, not cover: certificates and award photos must not be
               cropped. The frame's background fills whatever is left over. */
            object-fit: contain;
            object-position: center;
            display: block;
            transition: transform 0.4s ease;
        }
        .achievement-card:hover .achievement-img { transform: scale(1.04); }
        .achievement-img-overlay {
            position: absolute;
            inset: 0;
            background: rgba(139,69,19,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.2);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .achievement-card:hover .achievement-img-overlay { opacity: 1; }
        /* The empty-state icon sits on the same cream background as the frame,
           so it needs the brand brown — white was invisible here. */
        .achievement-img-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--gradient-primary);
            color: rgba(255,255,255,0.75);
        }
        .achievement-img-placeholder i {
            font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3rem);
        }
        .achievement-body {
            padding: 24px;
            flex: 1;
        }
        .achievement-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .achievement-text {
            color: var(--gray);
            font-size: 0.92rem;
            line-height: 1.65;
            margin: 0;
        }

        /* ========================================
           FEATURE CARDS
        ======================================== */
        .feature-card {
            background: white;
            border-radius: var(--radius-xl);
            padding: 30px;
            text-align: center;
            transition: var(--transition-base);
            height: 100%;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl);
            border-color: transparent;
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            transition: var(--transition-base);
        }

        .feature-card:hover .feature-icon {
            transform: rotateY(360deg);
        }

        .feature-icon i {
            font-size: 35px;
            color: white;
        }

        .feature-card h4 {
            color: var(--primary);
            margin-bottom: 15px;
            font-size: 1.3rem;
        }

        .feature-card p {
            color: var(--gray);
            margin-bottom: 0;
            line-height: 1.6;
        }

        /* ========================================
           STATS CARDS
        ======================================== */
        .stats-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-2xl);
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

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

        .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .stat-label {
            color: var(--primary);
            text-transform: uppercase;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 1px;
        }

        /* ========================================
           EXECUTIVE CARDS
        ======================================== */
        .executive-card {
            background: white;
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: var(--transition-base);
            height: 100%;
            box-shadow: var(--shadow-sm);
        }

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

        .executive-image-wrapper {
            position: relative;
            /* 4:5 rather than a 1:1 square. Member photos are portraits, and
               `cover` has to discard whatever does not fit: a 3:4 photo loses
               about a quarter of its height to a square frame, against about
               6% here. Changing the anchor only moves which end is lost — a
               taller frame is what actually stops faces being cut. */
            padding-top: 125%;
            overflow: hidden;
            /* Shown only while the photo loads or if it fails. */
            background: #f5f0e8;
        }

        .executive-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Fills the frame edge to edge so the photo spans the full card
               width. A crop is unavoidable in a fixed square: a portrait
               photo is taller than it is wide, so something has to go.
               Anchored to the top rather than centred, because a centred
               crop takes an equal slice off the top and the bottom and the
               top of a portrait is the subject's head. Cropping from the
               bottom instead loses torso, which nobody misses. */
            object-fit: cover;
            object-position: center top;
            transition: var(--transition-base);
        }

        .executive-card:hover .executive-image {
            /* Grow from the top edge. With the default centre origin the
               zoom pushed the top of the photo out of the frame, so heads
               were clipped on hover even with the crop anchored to the top. */
            transform-origin: center top;
            transform: scale(1.1);
        }

        .executive-info {
            padding: 20px;
            text-align: center;
        }

        .executive-name {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 5px;
        }

        .executive-title {
            color: var(--secondary);
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        /* ========================================
           EVENT CARDS
        ======================================== */
        .event-card {
            background: white;
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: var(--transition-base);
            height: 100%;
            box-shadow: var(--shadow-sm);
        }

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

        .event-date {
            background: var(--gradient-primary);
            padding: 20px;
            text-align: center;
            color: white;
        }

        .event-day {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
        }

        .event-month {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Year under the month, quieter than it so the day stays the focus */
        .event-year {
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 1px;
            opacity: 0.85;
            margin-top: 2px;
        }

        .event-content {
            padding: 20px;
        }

        .event-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
        }

        .event-description {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .event-meta {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .event-meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.85rem;
            color: var(--gray);
        }

        .event-meta-item i {
            color: var(--secondary);
        }

        .event-link {
            color: var(--secondary);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition-base);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .event-link:hover {
            color: var(--primary);
            gap: 12px;
        }

        /* ========================================
           CTA SECTION
        ======================================== */
        .cta-section {
            background: var(--gradient-primary);
            padding: 100px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .cta-title {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 800;
            color: white;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .cta-subtitle {
            color: rgba(255, 255, 255, 0.9);
            max-width: 600px;
            margin: 0 auto 2rem;
            position: relative;
            z-index: 1;
        }

        .btn-cta {
            background: white;
            color: var(--primary);
            padding: 12px 35px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition-base);
            display: inline-block;
            position: relative;
            z-index: 1;
        }

        .btn-cta:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            color: var(--primary-dark);
        }

        .btn-cta-outline {
            background: transparent;
            border: 2px solid white;
            color: white;
            margin-left: 15px;
        }

        .btn-cta-outline:hover {
            background: white;
            color: var(--primary);
        }

        /* ========================================
           FOOTER
        ======================================== */
        .footer {
            background: var(--dark);
            color: white;
            padding: 60px 0 30px;
            position: relative;
        }

        .footer-logo {
            font-size: 1.8rem;
            font-weight: 800;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
            display: inline-block;
        }

        .footer-logo img {
            max-height: 50px;
            width: auto;
            display: block;
            /* Reset gradient clip so image renders normally */
            -webkit-text-fill-color: initial;
        }

        .footer-text {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }

        .footer-title {
            color: var(--secondary);
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

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

        .footer-links li {
            margin-bottom: 0.8rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: var(--transition-base);
            font-size: 0.9rem;
        }

        .footer-links a:hover {
            color: var(--secondary);
            padding-left: 5px;
        }

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

        .footer-contact li {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .footer-contact i {
            color: var(--secondary);
            width: 20px;
        }

        .footer-social {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .footer-social a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: var(--transition-base);
        }

        .footer-social a:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }

        .footer-bottom {
            margin-top: 50px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.85rem;
        }

        .footer-bottom a {
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            transition: var(--transition-base);
        }

        .footer-bottom a:hover {
            color: var(--secondary);
        }

        /* Footer newsletter form */
        .footer-newsletter-input {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-right: none;
            color: white;
            border-radius: 50px 0 0 50px;
            padding: 10px 18px;
        }

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

        .footer-newsletter-input:focus {
            background: rgba(255, 255, 255, 0.12);
            border-color: var(--secondary);
            color: white;
            box-shadow: none;
            outline: none;
        }

        .footer-newsletter-btn {
            background: var(--secondary);
            border: none;
            color: white;
            border-radius: 0 50px 50px 0;
            padding: 10px 18px;
            transition: var(--transition-base);
        }

        .footer-newsletter-btn:hover {
            background: var(--secondary-dark);
            color: white;
        }

        /* ========================================
           RESPONSIVE SECTION BREAKPOINTS
        ======================================== */
        /* Tablet (768px - 991px) */
        @media (max-width: 991.98px) {
            .section-padding {
                padding: 70px 0;
            }

            .stat-number {
                font-size: 2rem;
            }

            .feature-card {
                padding: 25px;
            }

            .feature-icon {
                width: 70px;
                height: 70px;
            }

            .feature-icon i {
                font-size: 28px;
            }
        }

        /* Mobile (576px - 767px) */
        @media (max-width: 767.98px) {
            .section-padding {
                padding: 50px 0;
            }

            .stats-card {
                padding: 20px;
            }

            .stat-number {
                font-size: 1.5rem;
            }

            .stat-label {
                font-size: 0.7rem;
            }

            .feature-card {
                padding: 20px;
            }

            .feature-icon {
                width: 60px;
                height: 60px;
                margin-bottom: 20px;
            }

            .feature-icon i {
                font-size: 24px;
            }

            .feature-card h4 {
                font-size: 1.1rem;
            }

            .executive-name {
                font-size: 0.9rem;
            }

            .executive-title {
                font-size: 0.75rem;
            }

            .event-title {
                font-size: 1rem;
            }

            .footer {
                padding: 40px 0 20px;
            }
        }

        /* Small Mobile (below 576px) */
        @media (max-width: 575.98px) {
            .section-padding {
                padding: 40px 0;
            }

            .section-title {
                margin-bottom: 40px;
            }

            .section-title h2 {
                font-size: 1.8rem;
            }

            .btn-cta {
                padding: 10px 25px;
                font-size: 0.9rem;
            }

            /* Remove left margin so stacked buttons don't overflow */
            .btn-cta-outline,
            .btn-slide-outline {
                margin-left: 0;
            }

            .footer-title {
                margin-top: 30px;
            }
        }

        /* ========================================
           ANIMATIONS        ======================================== */
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .fade-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* ========================================
           UTILITY CLASSES
        ======================================== */
        .bg-primary-gradient {
            background: var(--gradient-primary);
        }

        .bg-dark-gradient {
            background: var(--gradient-dark);
        }

        .overflow-hidden {
            overflow: hidden;
        }

        .position-relative {
            position: relative;
        }

        .z-index-1 {
            z-index: 1;
        }

        .z-index-2 {
            z-index: 2;
        }

        .cursor-pointer {
            cursor: pointer;
        }