/* --- PADEL LOGAN — SIGNATURE NAVY + TEAL COLOUR SYSTEM ───────────────────────────────
           Primary source: MGC logo is a clean black wordmark on white/transparent.
           Palette built from the Padel Logan email signature: navy #0F3B59 + teal #1E7BA6 + cool white.
        ──────────────────────────────────────────────────────────────────────── */
        :root {
            /* hero photo, held once as a variable and used by .hero */
            --hero-img: url('/assets/img/hero-poster.jpg');
            --hero-img: image-set(url('/assets/img/hero-poster.jpg') type('image/jpeg'));

            /* Brand blue — sampled from the Padel Logan logo (#0F3B59) */
            --mgc-black:    #0F3B59;   /* logo navy — the site blue */
            --mgc-ink:      #0F3B59;   /* logo navy — dark section background */

            /* Course greens — turf, fairway, padel court */
            --green-deep:   #0F3B59;   /* dark fairway */
            --green-mid:    #17567E;   /* course green */
            --green-court:  #1E6F94;   /* synthetic turf / padel court */
            --green-lt:     #2E93BE;   /* hover / accent */

            /* Whites & creams */
            --white:        #FFFFFF;
            --cream:        #EAF1F6;   /* warm off-white */
            --cream-dim:    rgba(234,241,246,0.95);

            /* Accent — logo blue (teal removed per brand) */
            /* Readable accent for text on the navy. --gold and --gold-lt were
               both set to the navy itself when the palette changed, so every
               text use of them rendered navy on navy and disappeared. */
            --accent-lt:    #9EC6DC;
            --gold:         #0F3B59;
            --gold-lt:      #0F3B59;

            /* Utility */
            --border-light: rgba(234,241,246,0.12);
            --border-dark:  rgba(17,17,17,0.12);
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            background: var(--mgc-ink);
            color: var(--cream);
            font-family: 'Montserrat', sans-serif;
            font-weight: 300;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        /* ── GRAIN ── */
        .grain {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            opacity: 0.028;
            pointer-events: none;
            z-index: 9999;
        }

        /* ── STICKY MOBILE CTA ── */
        .sticky-cta {
            display: none;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 300;
            background: var(--mgc-black);
            border-top: 1px solid var(--border-light);
            padding: 1rem 1.5rem;
        }

        .sticky-cta a {
            display: block;
            width: 100%;
            text-align: center;
            background: var(--gold);
            color: var(--mgc-black);
            font-family: 'Montserrat', sans-serif;
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            padding: 1rem;
            text-decoration: none;
        }

        @media (max-width: 600px) {
            .sticky-cta { display: block; }
            body { padding-bottom: 4.5rem; }
        }

        /* ── NAV ── */
        nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 200;
            padding: 1.5rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(to bottom, rgba(15,59,89,0.96) 0%, transparent 100%);
            transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
        }

        /* solid header once scrolled off the hero — keeps the white logo readable over white sections */
        nav.scrolled {
            background: var(--mgc-ink);
            box-shadow: 0 10px 30px -14px rgba(0,0,0,0.65);
            padding-top: 1rem; padding-bottom: 1rem;
        }

        .nav-brand {
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--white);
            /* REPLACE WITH: <img src="logo.svg" alt="Padel Logan" style="height:2rem;"> */
        }

        .nav-brand span { color: var(--accent-lt); font-weight: 500; }

        .nav-cta {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #ffffff;
            text-decoration: none;
            background: var(--gold);
            border: 1px solid var(--gold);
            padding: 0.6rem 1.5rem;
            transition: background 0.22s, color 0.22s, border-color 0.22s;
        }

        .nav-cta:hover {
            background: var(--green-deep);
            color: #ffffff;
            border-color: var(--green-deep);
        }

        /* ── HERO ── */
        .hero {
            position: relative;
            min-height: 100svh;
            display: flex;
            /* Copy sits at the bottom so the top of the frame stays clear.
               The drone shots are the best part of the video and the headline
               used to sit straight across them. */
            align-items: flex-end;
            overflow: hidden;
            background: var(--mgc-ink);

            /* ─── HERO BACKGROUND IMAGE ───────────────────────────────────────
               Save your court photo as courts-hero.jpg in the same Html Files
               folder as this HTML file. The gradient is a fallback if no image.
            ─────────────────────────────────────────────────────────────────── */
            background-image:
                var(--hero-img);
            background-size: cover;
            background-position: center 40%;
            background-repeat: no-repeat;
        }

        /* Dark overlay — keeps text readable over any photo */
        /* Sits behind .hero-overlay and .hero-glow, which supply the navy
           wash the headline needs for contrast. object-fit: cover matches the
           behaviour of the background photo it replaces. */
        .hero-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 40%;
            z-index: 0;
            pointer-events: none;
        }
        /* Anything the hero draws over the video needs to sit above it. */
        .hero-overlay, .hero-glow, .hero-court, .hero-content { z-index: 1; }
        @media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background:
                /* Strong at the bottom where the type sits, clearing to nothing
                   by halfway up. A light left wash keeps the copy legible
                   without greying out the whole shot. */
                linear-gradient(to top, rgba(10,43,66,0.92) 0%, rgba(10,43,66,0.72) 20%,
                                        rgba(15,59,89,0.28) 46%, rgba(15,59,89,0.06) 68%, transparent 100%),
                linear-gradient(to right, rgba(15,59,89,0.42) 0%, rgba(15,59,89,0.12) 45%, transparent 78%);
            pointer-events: none;
        }

        /* Subtle green tint layer */
        .hero-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 50% 60% at 15% 60%, rgba(15,59,89,0.35) 0%, transparent 60%);
            pointer-events: none;
        }

        /* Hide the SVG court diagram when a real photo is present.
           Remove this rule if you want both (e.g. during development with no image). */
        .hero-court {
            display: none;
        }

        .hero-court svg { width: 100%; height: auto; }

        .hero-content {
            position: relative;
            z-index: 2;
            padding: 5rem 2.5rem 4.5rem;
            max-width: 1140px;
            margin: 0 auto;
            width: 100%;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.68rem;
            font-weight: 500;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 1.6rem;
            opacity: 0;
            animation: fadeUp 0.8s ease 0.15s forwards;
        }

        .hero-eyebrow::before {
            content: '';
            display: inline-block;
            width: 2.2rem;
            height: 1px;
            background: var(--gold);
            opacity: 0.5;
        }

        .hero-title { line-height: 0.88; }

        .hero-serif {
            display: block;
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(3.2rem, 7.5vw, 7.5rem);
            font-weight: 300;
            font-style: normal;
            color: var(--cream);
            letter-spacing: 0.01em;
            opacity: 0;
            animation: fadeUp 0.85s ease 0.35s forwards;
        }

        .hero-block {
            display: block;
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(3.4rem, 12vw, 11.5rem);
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -0.03em;
            /* Solid, not outlined. The wordmark itself is solid white, and an
               outline over moving footage is the hardest thing on the page to
               read: the video shows through every letter. */
            color: var(--white);
            text-shadow: 0 0.12em 0.5em rgba(10,43,66,0.35);
            opacity: 0;
            animation: fadeUp 0.9s ease 0.5s forwards;
        }
        .hero-coming {
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(1.7rem, 4.6vw, 3.4rem);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            line-height: 1.05;
            color: var(--white);
            margin: 1rem 0 0.3rem;
            padding-bottom: 0.55rem;
            border-bottom: 3px solid var(--gold);
            opacity: 0;
            animation: fadeUp 0.9s ease 0.62s forwards;
        }

        .hero-sub {
            font-size: clamp(0.9rem, 1.8vw, 1.1rem);
            font-weight: 300;
            color: var(--cream);
            line-height: 1.75;
            max-width: 420px;
            margin: 2rem 0 2.8rem;
            opacity: 0;
            animation: fadeUp 0.9s ease 0.8s forwards;
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 2.5rem;
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeUp 0.9s ease 0.95s forwards;
        }

        .btn-gold {
            display: inline-block;
            position: relative;
            overflow: hidden;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #ffffff;
            background: var(--gold);
            padding: 1.05rem 2.6rem;
            text-decoration: none;
        }

        .btn-gold::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--gold-lt);
            transform: translateX(-101%);
            transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
        }

        .btn-gold:hover::after { transform: translateX(0); }
        .btn-gold span { position: relative; z-index: 1; }

        .hero-scroll-label {
            font-size: 0.62rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(234,241,246,0.78);
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .hero-scroll-label::after {
            content: '';
            display: block;
            width: 1px;
            height: 2.8rem;
            background: rgba(234,241,246,0.18);
            animation: scrollLine 2.2s ease infinite;
        }

        /* ── SOCIAL PROOF STRIP ── */
        .proof-strip {
            background: var(--mgc-black);
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            padding: 1.1rem 2.5rem;
        }

        .proof-inner {
            max-width: 1140px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3rem;
            flex-wrap: wrap;
        }

        .proof-item {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            font-size: 0.7rem;
            font-weight: 400;
            letter-spacing: 0.1em;
            color: rgba(234,241,246,0.78);
            white-space: nowrap;
        }

        .proof-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--gold);
            opacity: 0.6;
            flex-shrink: 0;
        }

        /* ── WHAT IS PADEL ── */
        .what-padel {
            background: var(--mgc-black);
            padding: 7rem 2.5rem;
        }

        .what-inner {
            max-width: 1140px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 6rem;
            align-items: center;
        }

        .what-left {}

        .what-h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2.4rem, 4.5vw, 4rem);
            font-weight: 300;
            line-height: 1.15;
            color: var(--white);
            margin-bottom: 1.4rem;
        }

        .what-h2 em { font-style: normal; color: var(--green-court); }

        .what-body {
            font-size: 0.9rem;
            line-height: 1.85;
            color: rgba(234,241,246,0.78);
            margin-bottom: 2rem;
        }

        .what-stats {
            display: flex;
            gap: 2.5rem;
        }

        .what-stat {}

        .what-stat-num {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.4rem;
            font-weight: 800;
            color: var(--white);
            line-height: 1;
        }

        .what-stat-num span { color: var(--accent-lt); }

        .what-stat-lbl {
            font-size: 0.7rem;
            color: rgba(234,241,246,0.78);
            letter-spacing: 0.06em;
            margin-top: 0.2rem;
        }

        .what-steps {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .what-step {
            display: flex;
            gap: 1.5rem;
            padding: 1.6rem 0;
            border-bottom: 1px solid var(--border-light);
        }

        .what-step:first-child { border-top: 1px solid var(--border-light); }

        .step-num {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.2rem;
            font-weight: 900;
            color: rgba(234,241,246,0.08);
            line-height: 1;
            min-width: 2.5rem;
            padding-top: 0.15rem;
        }

        .step-body {}

        .step-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--cream);
            margin-bottom: 0.35rem;
        }

        .step-desc {
            font-size: 0.82rem;
            line-height: 1.7;
            color: rgba(234,241,246,0.78);
        }

        /* ── FEATURES ── */
        .features {
            background: var(--cream);
            padding: 7rem 2.5rem;
            color: var(--mgc-black);
        }

        .features-inner { max-width: 1140px; margin: 0 auto; }

        .section-chip {
            display: block;
            font-size: 0.62rem;
            font-weight: 500;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--green-court);
            margin-bottom: 0.8rem;
        }

        .section-chip-dark {
            display: block;
            font-size: 0.62rem;
            font-weight: 500;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--accent-lt);
            margin-bottom: 0.8rem;
        }

        .features-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .features-h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2.4rem, 5vw, 4.2rem);
            font-weight: 300;
            line-height: 1.1;
            color: var(--green-deep);
        }

        .features-h2 em { font-style: normal; color: var(--green-court); }

        .features-aside {
            font-size: 0.8rem;
            color: rgba(17,17,17,0.72);
            max-width: 190px;
            text-align: right;
            line-height: 1.65;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: rgba(15,59,89,0.1);
        }

        .feat {
            background: var(--cream);
            padding: 2.8rem 2rem;
            position: relative;
            overflow: hidden;
            cursor: default;
        }

        .feat::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--green-deep);
            transform: translateY(101%);
            transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
            z-index: 0;
        }

        .feat:hover::before { transform: translateY(0); }
        .feat > * { position: relative; z-index: 1; }

        .feat-num {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            color: rgba(15,59,89,0.2);
            margin-bottom: 1.8rem;
            transition: color 0.35s;
        }

        .feat:hover .feat-num { color: rgba(30,123,166,0.4); }

        .feat-icon {
            width: 2.2rem;
            height: 2.2rem;
            margin-bottom: 1.4rem;
        }

        .feat-icon path, .feat-icon line, .feat-icon rect, .feat-icon circle, .feat-icon polyline {
            stroke: var(--green-court);
            fill: none;
            transition: stroke 0.35s;
        }

        .feat:hover .feat-icon path,
        .feat:hover .feat-icon line,
        .feat:hover .feat-icon rect,
        .feat:hover .feat-icon circle,
        .feat:hover .feat-icon polyline { stroke: var(--gold); }

        .feat-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.3rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--green-deep);
            margin-bottom: 0.7rem;
            transition: color 0.35s;
        }

        .feat:hover .feat-title { color: var(--cream); }

        .feat-desc {
            font-size: 0.82rem;
            line-height: 1.7;
            color: rgba(17,17,17,0.72);
            transition: color 0.35s;
        }

        .feat:hover .feat-desc { color: rgba(234,241,246,0.78); }

        /* ── ABOUT / LOCATION ── */
        .about {
            background: var(--green-deep);
            padding: 7rem 2.5rem;
            position: relative;
            overflow: hidden;
        }

        .about::after {
            content: 'PADEL';
            position: absolute;
            font-family: 'Montserrat', sans-serif;
            font-size: 28vw;
            font-weight: 900;
            line-height: 1;
            color: rgba(255,255,255,0.025);
            right: -4%;
            bottom: -12%;
            pointer-events: none;
            user-select: none;
            letter-spacing: -0.02em;
        }

        .about-inner {
            max-width: 1140px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 6rem;
            align-items: center;
        }

        .about-h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2.4rem, 4.5vw, 4rem);
            font-weight: 300;
            line-height: 1.18;
            color: var(--white);
            margin-bottom: 1.6rem;
        }

        .about-h2 em { font-style: normal; color: var(--accent-lt); }

        .about-body {
            font-size: 0.88rem;
            line-height: 1.85;
            color: var(--cream-dim);
            margin-bottom: 2.5rem;
        }

        .about-meta { display: flex; flex-direction: column; gap: 1rem; }

        .meta-row {
            display: flex;
            align-items: baseline;
            gap: 1.25rem;
            font-size: 0.8rem;
            color: rgba(234,241,246,0.78);
        }

        .meta-label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--accent-lt);
            min-width: 5.5rem;
        }

        .stats { display: flex; flex-direction: column; gap: 1.4rem; }

        .stat {
            border-left: 2px solid rgba(30,123,166,0.28);
            padding: 0.9rem 0 0.9rem 1.6rem;
        }

        .stat-num {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.8rem;
            font-weight: 800;
            color: var(--white);
            line-height: 1;
            margin-bottom: 0.2rem;
        }

        .stat-num sup {
            font-size: 1.8rem;
            color: var(--accent-lt);
            vertical-align: super;
        }

        .stat-lbl {
            font-size: 0.72rem;
            letter-spacing: 0.06em;
            color: rgba(234,241,246,0.78);
        }

        /* ── FAQ ── */
        .faq {
            background: var(--mgc-black);
            padding: 7rem 2.5rem;
        }

        .faq-inner {
            max-width: 780px;
            margin: 0 auto;
        }

        .faq-header {
            text-align: center;
            margin-bottom: 3.5rem;
        }

        .faq-h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2.2rem, 4vw, 3.5rem);
            font-weight: 300;
            color: var(--white);
        }

        .faq-h2 em { font-style: normal; color: var(--accent-lt); }

        .faq-list { display: flex; flex-direction: column; }

        .faq-item {
            border-bottom: 1px solid var(--border-light);
        }

        .faq-q {
            width: 100%;
            background: none;
            border: none;
            padding: 1.4rem 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            cursor: pointer;
            text-align: left;
            font-family: 'Montserrat', sans-serif;
            font-size: 1.05rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--cream);
            transition: color 0.2s;
        }

        .faq-q:hover { color: var(--accent-lt); }

        .faq-icon {
            width: 1.2rem;
            height: 1.2rem;
            flex-shrink: 0;
            border: 1px solid rgba(234,241,246,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            color: var(--accent-lt);
            transition: transform 0.25s, border-color 0.2s;
        }

        .faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--gold); }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
        }

        .faq-a-inner {
            padding: 0 0 1.4rem;
            font-size: 0.87rem;
            line-height: 1.8;
            color: rgba(234,241,246,0.78);
        }

        .faq-item.open .faq-a { max-height: 300px; }

        /* ── WAITLIST ── */
        .waitlist {
            background: var(--mgc-ink);
            padding: 8rem 2.5rem;
            position: relative;
            overflow: hidden;
        }

        .wl-court-bg {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.045;
            pointer-events: none;
        }

        .wl-court-bg svg { width: 75%; max-width: 850px; height: auto; }

        .wl-inner {
            position: relative;
            z-index: 2;
            max-width: 580px;
            margin: 0 auto;
            text-align: center;
        }

        .wl-eyebrow {
            display: inline-block;
            font-size: 0.62rem;
            font-weight: 500;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            /* base is for light grounds; navy sections override below */
            color: rgba(15,59,89,0.82);
            margin-bottom: 1.2rem;
        }

        .wl-h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2.8rem, 6vw, 5.2rem);
            font-weight: 300;
            line-height: 1.1;
            color: var(--white);
            margin-bottom: 1rem;
        }

        .wl-h2 em { font-style: normal; color: var(--accent-lt); }

        .wl-sub {
            font-size: 0.88rem;
            color: var(--cream-dim);
            line-height: 1.75;
            margin-bottom: 0.75rem;
        }

        .wl-urgency {
            display: inline-block;
            font-size: 0.65rem;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--green-court);
            border: 1px solid rgba(30,111,148,0.3);
            padding: 0.35rem 0.85rem;
            margin-bottom: 2.5rem;
        }

        .wl-form {
            display: flex;
            max-width: 480px;
            margin: 0 auto;
        }

        .wl-input {
            flex: 1;
            padding: 1.05rem 1.3rem;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border-light);
            border-right: none;
            color: var(--cream);
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 300;
            outline: none;
            transition: border-color 0.25s, background 0.25s;
            min-width: 0;
        }

        .wl-input::placeholder { color: rgba(234,241,246,0.78); }

        .wl-input:focus {
            border-color: rgba(30,123,166,0.5);
            background: rgba(255,255,255,0.07);
        }

        .wl-btn {
            padding: 1.05rem 2rem;
            background: var(--gold);
            border: 1px solid var(--gold);
            color: var(--mgc-black);
            font-family: 'Montserrat', sans-serif;
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.25s, border-color 0.25s;
        }

        .wl-btn:hover { background: var(--gold-lt); border-color: var(--gold-lt); }

        .wl-success {
            display: none;
            padding: 1.3rem 2rem;
            border: 1px solid rgba(30,111,148,0.4);
            background: rgba(30,111,148,0.1);
            color: var(--cream);
            font-size: 0.85rem;
            line-height: 1.6;
            max-width: 480px;
            margin: 0 auto;
        }

        .wl-success strong { color: var(--mgc-black); }

        .wl-fine {
            margin-top: 1rem;
            font-size: 0.62rem;
            color: rgba(15,59,89,0.70);
            letter-spacing: 0.06em;
        }

        /* ── FOOTER ── */
        footer {
            background: var(--mgc-black);
            border-top: 1px solid var(--border-light);
            padding: 3rem 2.5rem 2rem;
        }

        .footer-row {
            max-width: 1140px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        .footer-brand {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(234,241,246,0.78);
            /* REPLACE WITH: <img src="logo.svg" alt="Padel Logan" style="height:1.8rem;"> */
        }

        .footer-brand strong { color: var(--accent-lt); font-weight: 500; }

        .footer-links {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 2rem;
        }

        .footer-links a {
            font-size: 0.68rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(234,241,246,0.85);
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-links a:hover { color: var(--accent-lt); }

        .footer-social { display: flex; gap: 0.6rem; }

        .footer-social a {
            width: 2.1rem;
            height: 2.1rem;
            border: 1px solid var(--border-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(234,241,246,0.75);
            text-decoration: none;
            transition: border-color 0.22s, color 0.22s;
        }

        .footer-social a:hover { border-color: var(--gold); color: var(--accent-lt); }

        .footer-mgc {
            max-width: 1140px;
            margin: 2rem auto 0;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(234,241,246,0.06);
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.68rem;
            color: rgba(234,241,246,0.8);
            letter-spacing: 0.05em;
        }

        .footer-mgc-divider {
            width: 1px;
            height: 1rem;
            background: rgba(234,241,246,0.12);
        }

        .footer-base {
            max-width: 1140px;
            margin: 1rem auto 0;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.5rem;
            font-size: 0.62rem;
            color: rgba(234,241,246,0.78);
            letter-spacing: 0.06em;
        }

        /* ── GOLD RULE DIVIDER ── */
        .gold-rule {
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(30,123,166,0.25), transparent);
        }

        /* ── SCROLL REVEAL ── */
        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }

        .reveal.visible { opacity: 1; transform: translateY(0); }
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }

        /* ── KEYFRAMES ── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(22px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes scrollLine {
            0%, 100% { opacity: 0.18; transform: scaleY(1); }
            50%       { opacity: 0.55; transform: scaleY(1.4); }
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 960px) {
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .features-header, .faq-header { flex-direction: column; align-items: flex-start; }
            .features-aside { text-align: left; }
            .about-inner, .what-inner { grid-template-columns: 1fr; gap: 3.5rem; }
            .about::after { font-size: 40vw; }
        }

        @media (max-width: 600px) {
            nav { padding: 1.2rem 1.5rem; }
            /* Bottom aligned now, so the big top padding goes. The extra
               bottom padding clears the fixed Book/Subscribe bar. */
            .hero-content { padding: 4rem 1.5rem 7rem; }

            /* The copy stack measured 103% of the phone viewport, so it covered
               the video completely. These three trims give the footage room
               without touching the wording or the type sizes. */
            .hero-eyebrow { margin-bottom: 1rem; }
            .hero-sub { margin-top: 1.1rem; margin-bottom: 1.6rem; }
            /* Hide only the newsletter link, which is duplicated in the pop up
               and its own section. Book a Court and View Memberships both stay,
               since they are the two things a visitor came to do. */
            .hero-actions a[href="#newsletter"] { display: none; }
            .hero-court { display: none; }
            .features, .about, .waitlist, .faq, .what-padel { padding: 5rem 1.5rem; }
            .features-grid { grid-template-columns: 1fr; }
            .wl-form { flex-direction: column; }
            .wl-input { border-right: 1px solid var(--border-light); }
            footer { padding: 2.5rem 1.5rem 1.5rem; }
            .footer-row { flex-direction: column; align-items: flex-start; }
            .proof-inner { gap: 1.5rem; justify-content: flex-start; }
            .what-stats { gap: 2rem; }
        }
    
        /* ── LOGO IMAGES ── */
        .nav-logo  { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }
        .footer-logo { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.95; }
        @media (max-width: 600px) { .nav-logo { height: 25px; } }

        /* ── LOCATION / MAP ── */
        .location {
            background: var(--mgc-black);
            padding: 7rem 2.5rem;
            border-top: 1px solid var(--border-light);
        }
        .location-inner {
            max-width: 1140px; margin: 0 auto;
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 4rem; align-items: center;
        }
        .loc-h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2.3rem, 4.5vw, 3.8rem);
            font-weight: 300; line-height: 1.12;
            color: var(--white); margin-bottom: 1.4rem;
        }
        .loc-h2 em { font-style: normal; color: var(--white); }
        .location .wl-eyebrow { color: var(--white); }
        .loc-body { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.8; margin-bottom: 2rem; max-width: 46ch; }
        .loc-meta { display: flex; flex-direction: column; gap: 1.1rem; }
        .loc-row { display: flex; gap: 0.9rem; align-items: flex-start; font-size: 0.88rem; color: var(--cream); }
        .loc-row svg { width: 18px; height: 18px; fill: var(--gold-lt); flex-shrink: 0; margin-top: 2px; }
        .loc-row a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 1px; }
        .loc-row a:hover { color: var(--accent-lt); }
        .loc-row .loc-label { display: block; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin-bottom: 0.25rem; }

        .loc-map { border-radius: 4px; overflow: hidden; border: 1px solid var(--border-light); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); }
        .loc-map-frame { position: relative; aspect-ratio: 4 / 3; background: var(--green-deep); }
        .loc-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
        .loc-map-label { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.3rem; background: var(--mgc-ink); border-top: 1px solid var(--border-light); }
        .loc-map-label svg { width: 22px; height: 22px; fill: var(--gold-lt); flex-shrink: 0; }
        .loc-map-label strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); line-height: 1.2; }
        .loc-map-label .loc-map-addr { display: block; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--cream-dim); margin-top: 2px; }

        /* ── CONTACT ── */
        .contact {
            background: var(--mgc-ink);
            padding: 7rem 2.5rem;
            border-top: 1px solid var(--border-light);
            position: relative;
        }
        .contact-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; }
        .contact-h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(2.3rem, 4.5vw, 3.8rem); font-weight: 300; line-height: 1.12; color: var(--white); margin-bottom: 1.4rem; }
        .contact-h2 em { font-style: normal; color: var(--accent-lt); }
        .contact-body { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.8; margin-bottom: 2.4rem; max-width: 40ch; }
        .contact-details { display: flex; flex-direction: column; gap: 1.6rem; }
        .contact-detail { display: flex; gap: 1rem; align-items: center; }
        .contact-detail svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.5; flex-shrink: 0; }
        .contact-detail-label { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(15,59,89,0.82); margin-bottom: 0.25rem; }
        .contact-detail a { font-size: 0.98rem; color: var(--cream); text-decoration: none; transition: color 0.2s; }
        .contact-detail a:hover { color: var(--accent-lt); }

        .contact-form { display: flex; flex-direction: column; gap: 1rem; }
        .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .cf-input, .cf-textarea {
            width: 100%; padding: 0.95rem 1.2rem;
            background: rgba(255,255,255,0.05); border: 1px solid var(--border-light);
            color: var(--cream); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 300;
            outline: none; transition: border-color 0.25s, background 0.25s;
        }
        .cf-input::placeholder, .cf-textarea::placeholder { color: rgba(234,241,246,0.78); }
        .cf-input:focus, .cf-textarea:focus { border-color: rgba(30,123,166,0.5); background: rgba(255,255,255,0.07); }
        .cf-textarea { resize: vertical; min-height: 140px; }
        .cf-btn {
            align-self: flex-start; padding: 1.05rem 2.6rem; background: var(--gold); border: 1px solid var(--gold);
            color: var(--mgc-black); font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 500;
            letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background 0.25s, border-color 0.25s;
        }
        .cf-btn:hover { background: var(--gold-lt); border-color: var(--gold-lt); }
        .cf-success { display: none; padding: 1.3rem 2rem; border: 1px solid rgba(30,111,148,0.4); background: rgba(30,111,148,0.1); color: var(--cream); font-size: 0.85rem; line-height: 1.6; }
        .cf-success strong { color: var(--mgc-black); }

        @media (max-width: 860px) {
            .location-inner, .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
            .loc-map { order: -1; }
            .location, .contact { padding: 5rem 1.5rem; }
        }
        @media (max-width: 520px) {
            .cf-row { grid-template-columns: 1fr; }
        }

        /* ── ALTERNATING SECTION BACKGROUNDS — white / blue / white / blue ──
           hero(image) → newsletter(WHITE) → location(blue) → contact(WHITE) → footer(blue).
           Placed after all section rules so it wins the cascade. */
        .waitlist, .contact { background: var(--white); border-top: none; }
        .waitlist .wl-court-bg { filter: invert(1); opacity: 0.05; }
        .waitlist .wl-h2, .contact .contact-h2 { color: var(--green-deep); }
        .waitlist .wl-sub, .contact .contact-body { color: #47586A; }
        .contact .contact-detail a { color: var(--green-deep); }
        .wl-input, .cf-input, .cf-textarea {
            background: #F2F5F8; border-color: rgba(15,59,89,0.18); color: var(--green-deep);
        }
        .wl-input::placeholder, .cf-input::placeholder, .cf-textarea::placeholder { color: rgba(15,59,89,0.42); }
        .wl-input:focus, .cf-input:focus, .cf-textarea:focus { border-color: var(--gold); background: #ffffff; }
        .wl-btn, .cf-btn { color: #ffffff; }

        /* ── MOBILE: show all content immediately ───────────────────────────────
           On mobile the scroll-reveal + entrance animations were leaving content
           at opacity:0. Force everything visible so the page matches desktop. */
        @media (max-width: 900px) {
            .reveal { opacity: 1 !important; transform: none !important; }
            .hero-eyebrow, .hero-serif, .hero-block, .hero-coming,
            .hero-sub, .hero-actions, .hero-title {
                opacity: 1 !important;
                animation: none !important;
            }
        }
        /* Hide the redundant nav button on phones (a sticky Subscribe bar already shows),
           which also stops the logo + button from overflowing the header. */
        @media (max-width: 600px) {
            .nav-cta { display: none; }
        }

        /* ── CTAs: WHITE background, logo-blue writing (teal removed) ────────────
           Placed last so it wins the cascade. */
        .nav-cta, .btn-gold, .wl-btn, .cf-btn, .sticky-cta a {
            background: #ffffff;
            color: var(--green-deep);
            border: 1.5px solid var(--green-deep);
        }
        .nav-cta:hover, .wl-btn:hover, .cf-btn:hover, .sticky-cta a:hover {
            background: var(--green-deep);
            color: #ffffff;
            border-color: var(--green-deep);
        }
        /* hero button uses a slide-in overlay for hover → invert to blue fill */
        .btn-gold::after { background: var(--green-deep); }
        .btn-gold:hover span { color: #ffffff; }

        /* keep accents visible on the DARK/blue sections (blue-on-blue would vanish) → white */
        .hero-eyebrow::before { background: var(--white); }
        .hero-coming { border-bottom-color: var(--white); }
        .footer-links a:hover { color: var(--white); }
        .footer-social a:hover { color: var(--white); border-color: var(--white); }
        .loc-row svg, .loc-map-label svg { fill: var(--white); }
        .loc-row a:hover { color: var(--white); }

        /* urgency badge sits on a white section → logo blue */
        .wl-urgency { color: var(--green-deep); border-color: rgba(15,59,89,0.35); }

        /* ── NAV: Memberships link sits beside the Subscribe button ──
           Stays visible on phones, where .nav-cta is hidden. */
        .nav-right { display: flex; align-items: center; gap: 1.6rem; }
        .nav-link {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em;
            text-transform: uppercase; color: rgba(255,255,255,0.9);
            text-decoration: none; white-space: nowrap; transition: color 0.2s;
        }
        .nav-link:hover { color: #ffffff; }
        @media (max-width: 600px) { .nav-right { gap: 1rem; } }

        /* ── HERO: secondary Memberships button ── */
        .btn-hero-ghost {
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em;
            text-transform: uppercase; text-decoration: none;
            color: #ffffff; background: transparent;
            border: 1.5px solid rgba(255,255,255,0.55);
            padding: 1.05rem 2.6rem;
            transition: background 0.25s, color 0.25s, border-color 0.25s;
        }
        .btn-hero-ghost:hover { background: #ffffff; color: var(--green-deep); border-color: #ffffff; }

        /* the hero Memberships button is the commercial CTA, so it carries a
           bloom and a lift to sit above the secondary newsletter action */
        .hero-actions .btn-gold {
            font-size: 0.85rem; font-weight: 600; padding: 1.3rem 3.2rem;
            box-shadow: 0 0 44px -10px rgba(190,232,255,0.9);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .hero-actions .btn-gold:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 68px -6px rgba(190,232,255,1);
        }
        /* nav Memberships button: solid, and kept visible on phones */
        nav .nav-cta {
            font-weight: 600;
            box-shadow: 0 0 26px -10px rgba(190,232,255,0.9);
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-actions .btn-gold:hover { transform: none; }
        }
        @media (max-width: 600px) {
            .hero-actions { gap: 1rem; }
            .btn-gold, .btn-hero-ghost { flex: 1 1 100%; text-align: center; }
            .hero-scroll-label { display: none; }

            /* The wide wordmark leaves no room for text links beside it —
               the logo links home and the sticky bar carries both CTAs. */
            .nav-link { display: none; }

            /* Sticky bar: Memberships + Subscribe, side by side */
            .sticky-cta { display: flex; gap: 0.6rem; padding: 0.85rem 1rem; }
            .sticky-cta a { padding: 0.9rem 0.5rem; font-size: 0.72rem; letter-spacing: 0.1em; }
            .sticky-cta .sticky-alt {
                background: transparent; color: #ffffff; border: 1.5px solid rgba(255,255,255,0.55);
            }
        }

        /* Footer credit row was pushing 14px past the viewport on phones */
        .footer-mgc { flex-wrap: wrap; }

        /* Responsive hero art. The photo sits under an 80-93% navy overlay, so it
           compresses hard with no visible change (max channel difference 11/255).
           Phones get the 800px WebP at 72KB in place of a 257KB 1280px JPEG.
           The plain url() line stays first as the fallback for anything without
           image-set(); browsers that understand it take the second declaration. */
        @media (max-width: 800px) {
            :root {
                --hero-img: url('/assets/img/hero-poster-mobile.jpg');
                --hero-img: image-set(url('/assets/img/hero-poster-mobile.jpg') type('image/jpeg'));
            }
        }

        /* ═══════════════════════════════════════════════════════════════
           PHOTO RAIL + HOMEPAGE SECTIONS (added with the Sept 2026 shoot)
           ═══════════════════════════════════════════════════════════════ */

        /* Full bleed rail of photos that drifts sideways. The cards sit at
           alternating heights so the row reads as floating rather than as a
           filmstrip glued to the section edge. */
        .shots {
            background: var(--mgc-black);
            padding: 3.5rem 0 4rem;
            overflow: hidden;
        }
        .shots-track {
            display: flex;
            width: max-content;
            animation: shots-drift 70s linear infinite;
        }
        .shots:hover .shots-track { animation-play-state: paused; }
        .shots-row {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding-right: 0.9rem;
            margin: 0;
            list-style: none;
        }
        .shots-row li { flex: 0 0 auto; }
        .shots-row li:nth-child(odd) img  { transform: translateY(-1.1rem); }
        .shots-row li:nth-child(even) img { transform: translateY(1.1rem); }
        .shots-row img {
            display: block;
            height: 19rem;
            width: auto;
            object-fit: cover;
            border-radius: 3px;
            box-shadow: 0 1.2rem 2.5rem rgba(0,0,0,0.35);
        }
        @keyframes shots-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* Reduced motion, or no JS animation wanted: the rail becomes a
           normal horizontal scroller the visitor drives themselves. */
        @media (prefers-reduced-motion: reduce) {
            .shots { overflow-x: auto; }
            .shots-track { animation: none; }
            .shots-row li:nth-child(odd) img,
            .shots-row li:nth-child(even) img { transform: none; }
        }

        /* the numbered steps in What is padel */
        .what-step-n {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            color: var(--accent-lt);
            padding-top: 0.28rem;
            flex-shrink: 0;
        }
        .what-step-h {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.15rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 0.4rem;
        }
        .what-step p {
            font-size: 0.85rem;
            line-height: 1.8;
            color: rgba(234,241,246,0.78);
            margin: 0;
        }

        /* facility cards. .features-grid already supplies the 1px rule grid,
           so each card only needs its own ground and padding. */
        .fcard {
            background: var(--cream);
            padding: 2.4rem 1.8rem 2.6rem;
        }
        .fcard-k {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            color: rgba(17,17,17,0.72);
        }
        .fcard h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.02rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--green-deep);
            margin: 0.9rem 0 0.7rem;
        }
        .fcard p {
            font-size: 0.85rem;
            line-height: 1.8;
            color: rgba(17,17,17,0.72);
            margin: 0;
        }
        .features-shot { margin: 3.5rem 0 0; }
        .features-shot img {
            display: block;
            width: 100%;
            height: clamp(16rem, 34vw, 26rem);
            object-fit: cover;
            border-radius: 3px;
        }

        /* Two frames, because the offer is two clubs: the courts and the
           course. One padel photo alone undersold the golf half. */
        .about-shot { display: grid; gap: 0.75rem; margin: 0; }
        .about-shot img {
            display: block;
            width: 100%;
            height: clamp(9.5rem, 19vw, 15.5rem);
            object-fit: cover;
            border-radius: 3px;
        }
        .about-cta { margin-top: 2.2rem; display: inline-block; }

        @media (max-width: 900px) {
            .shots-row img { height: 14rem; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .shots { padding: 2.5rem 0 3rem; }
            .shots-row img { height: 11rem; }
            .shots-row li:nth-child(odd) img,
            .shots-row li:nth-child(even) img { transform: none; }
            .features-grid { grid-template-columns: 1fr; }
            .what-stats { flex-wrap: wrap; gap: 1.5rem 2rem; }
            /* Copy first on phones, photos after it. The heading and the
               offer should be the first thing read, not two images the
               visitor has to scroll past. */
            .about-shot { order: 1; }
        }

        /* --gold resolves to the site navy (#0F3B59), a leftover from the
           original green-and-gold palette. Anything styled with it on a navy
           ground renders navy on navy and vanishes. These three did: both
           section eyebrows, the units in the stat row, and the italic half of
           the memberships heading. */
        .what-padel .wl-eyebrow,
        .about .wl-eyebrow { color: rgba(234,241,246,0.78); }
        .what-stat-num span { color: rgba(234,241,246,0.78); font-size: 1.15rem; }
        .about-h2 em { color: var(--green-court); }