/* ── Reset & Base ─────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --brand:       #DB0000;
            --brand-dark:  #6F0000;
            --brand-hover: #6F0000;
            --white:       #ffffff;
            --text:        #3a3a3a;
            --heading:     #555555;
            --subtext:     #555;
            --hero-overlay: rgba(0,0,0,0.52);
            --section-bg:  #f5f5f5;
            --divider:     #ddd;
            --max-width:   1200px;
            --nav-height:  80px;
        }

        html { font-size: 15px; scroll-behavior: smooth; }

        body {
            font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            color: var(--text);
            background: #fff;
            line-height: 1.65;
        }

        a { color: var(--brand); text-decoration: none; }
        a:hover, a:focus { color: var(--brand-hover); }

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

        /* ── Skip Link ───────────────────────────────── */
        .skip-link {
            position: absolute;
            left: -9999px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
        .skip-link:focus {
            position: fixed;
            top: 0; left: 0;
            width: auto; height: auto;
            padding: 0.5em 1em;
            background: var(--brand);
            color: #fff;
            z-index: 9999;
        }
       .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0;
        }
        /* ── Header / Nav ────────────────────────────── */
        #masthead {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 100;
            background: transparent;
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }
        #masthead.scrolled {
            background: rgba(255,255,255,0.97);
            box-shadow: 0 1px 6px rgba(0,0,0,0.12);
        }
        #masthead.scrolled .menu-link { color: var(--text); }
        #masthead.scrolled .menu-link:hover { color: var(--brand); }

        .main-header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 24px;
            height: var(--nav-height);
        }

        .site-logo img {
            width: 104px;
            height: auto;
            /* Ensure logo never clips out of nav bar */
            max-height: calc(var(--nav-height) - 16px);
            object-fit: contain;
        }

        /* Nav links */
        #primary-menu {
            list-style: none;
            display: flex;
            gap: 0;
        }
        .menu-link {
            display: block;
            padding: 0 18px;
            line-height: var(--nav-height);
            color: rgba(255,255,255,0.92);
            font-size: 0.933rem;
            font-weight: 500;
            transition: color 0.2s;
            white-space: nowrap;
        }
        .menu-link:hover, .menu-link:focus,
        .current-menu-item .menu-link { color: #fff; }
        #masthead.scrolled .current-menu-item .menu-link { color: var(--brand); }

        /* Mobile hamburger */
        .menu-toggle {
            display: none;
            background: transparent;
            border: 2px solid rgba(255,255,255,0.7);
            color: #fff;
            padding: 6px 10px;
            font-size: 1.1rem;
            cursor: pointer;
            border-radius: 3px;
            line-height: 1;
        }
        #masthead.scrolled .menu-toggle {
            border-color: var(--brand);
            color: var(--brand);
        }

        /* Mobile nav drawer */
        @media (max-width: 768px) {
            .menu-toggle { display: block; }
            #primary-menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: var(--nav-height);
                left: 0; right: 0;
                background: rgba(0,0,0,0.92);
                padding: 8px 0 16px;
            }
            #primary-menu.open { display: flex; }
            .menu-link {
                line-height: 1;
                padding: 14px 24px;
                color: rgba(255,255,255,0.9);
                border-bottom: 1px solid rgba(255,255,255,0.08);
            }
        }

        /* ── Hero Section ────────────────────────────── */
        #hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            /*
             * REPLACE THIS with your actual hero image.
             * Example: background-image: url('../images/hero.jpg');
             * The image should live in the same directory as index.html.
             */
            background-image: url('../images/Two-MMA-Competitors-In-Throw.jpg');
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;
            /* Fallback gradient shown when image is missing / loading */
            background-color: #1a2a3a;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: var(--hero-overlay);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 860px;
            padding: 120px 24px 60px;
            animation: fadeInUp 0.9s ease both;
        }

        .hero-eyebrow {
            font-family: 'Roboto Slab', serif;
            font-style: italic;
            font-size: 1.25rem;
            color: rgba(255,255,255,0.85);
            margin-bottom: 16px;
            letter-spacing: 0.01em;
        }

        .hero-title {
            font-family: 'Roboto Slab', serif;
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 700;
            color: #fff;
            line-height: 1.25;
            margin-bottom: 40px;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 40px;
        }

        /* ── Buttons ─────────────────────────────────── */
        .btn {
            display: inline-block;
            padding: 14px 36px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 3px;
            cursor: pointer;
            transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
            text-align: center;
            letter-spacing: 0.01em;
        }
        .btn:hover, .btn:focus { transform: scale(1.03); }

        .btn-primary {
            background: var(--brand);
            color: #fff;
            border: 2px solid var(--brand);
        }
        .btn-primary:hover, .btn-primary:focus {
            background: var(--brand-hover);
            border-color: var(--brand-hover);
            color: #fff;
        }

        .btn-outline {
            background: transparent;
            color: #fff;
            border: 2px solid rgba(255,255,255,0.8);
        }
        .btn-outline:hover, .btn-outline:focus {
            background: rgba(255,255,255,0.15);
            color: #fff;
            border-color: #fff;
        }

        /* Social icons in hero */
        .hero-social {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-bottom: 40px;
        }
        .hero-social a {
            color: rgba(255,255,255,0.8);
            font-size: 1.4rem;
            transition: color 0.2s, transform 0.2s;
        }
        .hero-social a:hover { color: #fff; transform: scale(1.15); }

        /* Bouncing down arrow */
        .scroll-arrow {
            display: inline-block;
            color: rgba(255,255,255,0.75);
            font-size: 1.8rem;
            animation: bounce 1.8s ease infinite;
            transition: color 0.2s;
        }
        .scroll-arrow:hover { color: #fff; }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50%       { transform: translateY(8px); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Section Shared ──────────────────────────── */
        section { padding: 80px 24px; }

        .section-inner {
            max-width: var(--max-width);
            margin: 0 auto;
        }

        .section-eyebrow {
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--brand);
            margin-bottom: 12px;
        }

        .section-title {
            font-family: 'Roboto Slab', serif;
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            font-weight: 700;
            color: var(--heading);
            margin-bottom: 24px;
            line-height: 1.3;
        }

        .section-title a { color: var(--heading); }
        .section-title a:hover { color: var(--brand); }

        /* ── Training Section ────────────────────────── */
        #training {
            background: #fff;
            text-align: center;
        }

        #training .section-inner {
            max-width: 780px;
        }

        #training p { color: var(--subtext); margin-bottom: 16px; font-size: 1.05rem; }
        #training p:last-of-type { margin-bottom: 0; }
        #training strong { color: var(--text); }

        .training-cta { margin: 36px 0 20px; }

        .link-more {
            display: inline-block;
            font-size: 0.95rem;
            color: var(--brand);
            margin-top: 12px;
        }
        .link-more:hover { color: var(--brand-dark); text-decoration: underline; }

        /* ── Details Section — Parallax Reveal ──────── */

        /*
         * Scroll-driven parallax container.
         * Height is set tall (400vh) so the sticky inner panel
         * has room to "scroll through" while the content stays fixed.
         * The extra scroll distance is what drives the reveal animation.
         */
        #details-scroll-track {
            position: relative;
            height: 400vh;       /* scrollable distance — tune if needed */
        }

        /*
         * The sticky panel pins itself to the viewport for the full
         * scroll distance of the track above.
         */
        #details {
            position: sticky;
            top: 0;
            height: 100vh;
            min-height: 600px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Background image — fixed within the sticky container */
        #details-bg {
            position: absolute;
            inset: 0;
            /*
             * REPLACE with your local image path, e.g. url('../images/details-bg.jpg')
             * background-attachment: fixed is intentional — creates the parallax
             * offset between the sticky panel and the background layer.
             */
            background-image: url('../images/Fist-Hitting-Red-Pad.jpg');
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;
            background-color: #1a1a1a; /* fallback while image loads */
        }

        /*
         * Overlay fades from nearly opaque → transparent as you scroll.
         * JS writes --details-opacity (0→1) based on scroll progress;
         * CSS converts that to an overlay alpha (0.85→0).
         */
        #details-overlay {
            position: absolute;
            inset: 0;
            background: rgba(245,245,245, var(--details-overlay-alpha, 0.88));
            transition: background 0.05s linear;
        }

        /* Content sits above background + overlay */
        #details .section-inner {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: var(--max-width);
            padding: 60px 24px;
        }

        .details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: start;
        }

        @media (max-width: 768px) {
            .details-grid { grid-template-columns: 1fr; }
            .details-cta-col { margin-top: 32px; }
            #details-scroll-track { height: 500vh; } /* more room on mobile for taller content */
            #details {
                 height: auto;
                 min-height: 100vh;
                 overflow-y: auto;
                 align-items: flex-start;
                 padding: 24px 0;
            }

            /* Pull content away from top/bottom edges */
            
            #details .section-inner {
                 padding-top: 32px;
                 padding-bottom: 32px;
            }

            #hero {
                 background-attachment: scroll;
                 background-size: cover;
                 background-position: 65% center;
                 background-repeat: no-repeat;
                 background-color: #1a2a3a;
             }

             #details-bg {
                 background-attachment: scroll;
                 background-size: cover;
                 background-position: 80% center;
                 background-repeat: no-repeat;
                 background-color: #1a1a1a;
            }
        }
      
        /* Landscape phones — viewport is wide but very short */
        @media (max-width: 900px) and (orientation: landscape) {
             #details-scroll-track { height: 500vh; }

             #details {
                height: auto;
                min-height: 100vh;
                overflow-y: auto;
                align-items: flex-start;
                padding: 20px 0;
             }

             #details .section-inner {
                padding-top: 28px;
                padding-bottom: 28px;
             }
        }

        .feature-list { list-style: none; }

        .feature-item {
            padding: 20px 0;
            border-bottom: 1px solid var(--divider);
            transition: border-color 0.4s ease;
        }
        .feature-item:last-child { border-bottom: none; }

        .feature-item h4 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 6px;
            transition: color 0.4s ease;
        }

        .feature-item p {
            color: var(--subtext);
            font-size: 0.97rem;
            transition: color 0.4s ease;
        }

        /* Text elements in the features column that need transitions */
        .details-features-col .section-eyebrow { transition: color 0.4s ease; }
        .details-features-col .section-title    { transition: color 0.4s ease; }

        /* .revealing class toggled by JS as image emerges — shifts all gray text to white */
        .details-features-col.revealing .section-eyebrow { color: #ffffff; }
        .details-features-col.revealing .section-title    { color: #ffffff; }
        .details-features-col.revealing .feature-item h4  { color: #ffffff; }
        .details-features-col.revealing .feature-item p   { color: rgba(255,255,255,0.85); }
        .details-features-col.revealing .feature-item     { border-color: rgba(255,255,255,0.25); }

        .details-cta-col {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: var(--brand);
            border-radius: 6px;
            padding: 48px 36px;
            color: #fff;
        }

        .details-quote {
            font-family: 'Roboto Slab', serif;
            font-style: italic;
            font-size: clamp(1.2rem, 2.5vw, 1.7rem);
            line-height: 1.45;
            margin-bottom: 36px;
            color: #fff;
        }

        .btn-white {
            background: #fff;
            color: var(--brand);
            border: 2px solid #fff;
        }
        .btn-white:hover, .btn-white:focus {
            background: transparent;
            color: #fff;
        }

        /* ── Footer ──────────────────────────────────── */
        #colophon {
            background: var(--brand-dark);
            color: rgba(255,255,255,0.7);
            font-size: 0.87rem;
            padding: 20px 24px;
            text-align: center;
        }
        #colophon a { color: rgba(255,255,255,0.85); }
        #colophon a:hover { color: #fff; }