/* =========================================================
   Omnia HST: Site Stylesheet
   No frameworks. ~15kb target.
========================================================= */

:root {
    --c-bg:        #0d0f0e;
    --c-bg-soft:   #131816;
    --c-panel:     #181d1b;
    --c-panel-2:   #1f2522;
    --c-line:      #2a312d;
    --c-text:      #e8ece9;
    --c-muted:     #9aa39c;
    --c-faint:     #6c7670;
    --c-brand:     #1f6f3c;        /* brand base (overridden by omnia.css) */
    --c-brand-2:   #2dba63;        /* highlight green */
    --c-accent:    #c9a24a;        /* gold accent (matches old badge) */
    --c-danger:    #b03a2e;
    --c-warn:      #d4a017;

    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 28px;

    --t-fast: 160ms;
    --t-med:  280ms;
    --t-slow: 480ms;
    --e: cubic-bezier(.2,.7,.2,1);

    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2);
    --shadow-2: 0 4px 14px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.32);

    --container: 1180px;
}

* { box-sizing: border-box; }
/* Visually hide while remaining accessible to screen readers and SEO auditors */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.6;
    overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-brand-2); text-decoration: none; transition: color var(--t-fast) var(--e); }
a:hover { color: var(--c-accent); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 22px; }

/* Type */
h1, h2, h3, h4 { font-family: 'Manrope', 'Inter', system-ui, sans-serif; line-height: 1.15; margin: 0 0 .55em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5.4vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1em; color: var(--c-text); }
.lead { font-size: 1.15rem; color: var(--c-muted); }
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    color: var(--c-accent);
    font-weight: 600;
    margin-bottom: .8rem;
}

.muted { color: var(--c-muted); }
.center { text-align: center; }

/* ---------- Prose, plain variant ----------
   .prose (see omnia.css) already gets first-line paragraph indent plus an
   automatic drop cap on its opening paragraph - reserved for genuine
   feature/editorial content (bios, origin stories, articles).
   .prose-plain gives the same paragraph indent WITHOUT the drop cap, for
   long-form text that should read as plain prose: legal pages, policy
   text, and similar. */
.prose-plain p { text-indent: 2em; }
.prose-plain > p:first-of-type,
.prose-plain p:has(.btn) { text-indent: 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .55em;
    padding: .85em 1.6em;
    border-radius: 999px;
    font-weight: 600;
    font-size: .98rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--t-fast) var(--e), background var(--t-fast) var(--e), border-color var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e), color var(--t-fast) var(--e);
    line-height: 1;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(45,186,99,.25);
}
.btn-primary:hover { color:#fff; box-shadow: 0 10px 26px rgba(45,186,99,.35); }
.btn-ghost {
    background: transparent;
    border-color: rgba(255,255,255,.40);
    color: var(--c-text);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn-gold {
    background: linear-gradient(135deg, #c9a24a 0%, #f3cf72 100%);
    color: #1a1a1a;
}
.btn-block { width: 100%; justify-content: center; }

/* ---------- Accessibility ---------- */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--c-brand-2); color: #fff; padding: .8em 1.4em;
    z-index: 9999; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Top Bar ---------- */
.topbar {
    background: linear-gradient(90deg, #06090f 0%, #0c1220 50%, #06090f 100%);
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(201,162,74,.20);
    font-size: .82rem;
    color: rgba(180,190,210,.75);
    letter-spacing: .01em;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top:7px; padding-bottom:7px; gap:1rem; flex-wrap: wrap; }
.topbar a { color: rgba(180,190,210,.75); }
.topbar a:hover { color: #c9a24a; }
.topbar strong { color: rgba(220,228,240,.9); }

/* ---------- Navbar ---------- */
.nav {
    position: sticky; top: 0;
    /* Definitive dark gradient — unaffected by page background color */
    background:
        linear-gradient(180deg, #0a1020 0%, #0d1428 60%, #0a1020 100%);
    backdrop-filter: saturate(200%) blur(18px);
    -webkit-backdrop-filter: saturate(200%) blur(18px);
    border-bottom: 2px solid rgba(201,162,74,.30);
    box-shadow:
        0 1px 0 rgba(201,162,74,.15),
        0 8px 32px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.06);
    z-index: 100;
    transition: background var(--t-med) var(--e), border-color var(--t-med) var(--e), box-shadow var(--t-med) var(--e);
}
/* Scan-line texture overlay */
.nav::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(
        0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 5px
    );
    z-index: 0;
}
.nav.is-scrolled {
    background: linear-gradient(180deg, #060c18 0%, #0a1022 100%);
    box-shadow: 0 12px 36px rgba(0,0,0,.65), 0 1px 0 rgba(201,162,74,.22);
    border-bottom-color: rgba(201,162,74,.40);
}
.nav-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 6px 22px; max-width: var(--container); margin: 0 auto; transition: padding var(--t-med) var(--e); }
.nav.is-scrolled .nav-inner { padding-top: 4px; padding-bottom: 4px; }
.nav-brand { display: flex; align-items: center; gap: .8rem; color: var(--c-text); font-weight: 700; letter-spacing: -.01em; }
.nav-brand img {
    height: 104px; width: auto;
    transition: height var(--t-med) var(--e), transform var(--t-fast) var(--e);
    filter: drop-shadow(0 3px 12px rgba(45,186,99,.30)) drop-shadow(0 0 6px rgba(0,0,0,.8));
}
.nav.is-scrolled .nav-brand img { height: 72px; }

/* ── Logo scale ──────────────────────────────────────────────────────────────
   This used to be one fixed 130px for every screen. The mark is the brand and
   it should be big on a desktop, but on a phone the only thing anyone came for
   is below the fold, and every pixel of masthead is a pixel of broadcast pushed
   off the screen. Stepped down by width, with the scrolled state following.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1140px) {
    .nav-brand img            { height: 88px; }
    .nav.is-scrolled .nav-brand img { height: 62px; }
}
@media (max-width: 700px) {
    .nav-brand img            { height: 62px; }
    .nav.is-scrolled .nav-brand img { height: 50px; }
    /* The bar itself closes up around the smaller mark. */
    .nav-inner                { padding: 4px 14px; gap: .7rem; }
    .nav.is-scrolled .nav-inner { padding-top: 3px; padding-bottom: 3px; }
}
@media (max-width: 400px) {
    .nav-brand img            { height: 54px; }
    .nav.is-scrolled .nav-brand img { height: 46px; }
    .nav-inner                { padding: 4px 11px; }
}
.nav-brand:hover img { transform: scale(1.04); }
.nav-brand:hover { color: var(--c-text); }
.site-footer .nav-brand img {
    height: 96px; width: auto; max-width: 100%;
    filter: var(--brand-glow, drop-shadow(0 4px 14px rgba(45,186,99,.25)));
    transition: none;
}
.site-footer .nav-brand { margin-bottom: .6rem; }

.nav-links { display: flex; align-items: center; gap: .1rem; flex-wrap: nowrap; }.nav-links a {
    color: var(--nav-link-color, var(--c-text));
    padding: .6em 1em;
    border-radius: var(--r-sm);
    font-weight: 500;
    font-size: .95rem;
    position: relative;
    white-space: nowrap;
}

/* ── Full-nav link metrics ────────────────────────────────────────────────────
   Tightened padding and type for the whole desktop range.

   THIS MUST STAY BELOW the .nav-links a block above. It used to sit ABOVE it,
   scoped 961-1200px, where it silently did nothing at all: both selectors are
   plain `.nav-links a`, so the later declaration wins and the base padding of
   .6em 1em was what actually rendered. Moving it here is what finally makes the
   ten-item row fit; putting it back above would re-break the nav without any
   visible warning.

   The upper bound is gone for the same reason: .nav-inner is capped, the row is
   nowrap, so the links must fit at EVERY desktop width - a wider monitor grants
   no extra room on its own. */
@media (min-width: 961px) {
    .nav-links a { padding: .55em .6em; font-size: .9rem; }
    /* The two CTAs are the widest items in the row, so trimming their side
       padding and leading margin buys back the most space for the least
       visible change. */
    .nav-links a.nav-cta { padding: .55em .8em; margin-left: .3rem; }
}
.nav-links a:hover {
    color: var(--nav-link-hover-text, var(--c-brand-2));
    background: var(--nav-link-hover-bg, rgba(45,186,99,.08));
}
.nav-links a.is-active {
    color: var(--c-brand-2);
    background: rgba(45,186,99,.14);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(45,186,99,.28), 0 0 10px rgba(45,186,99,.08);
}
.nav-links .has-sub { position: relative; }
/* Built for every dropdown but only ever shown in the mobile panel - the
   desktop menu opens on hover and needs no button. */
.nav-sub-toggle { display: none; }
.nav-links .sub {
    position: absolute; top: 100%; left: 0;
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: .35rem;
    min-width: 230px;
    box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--t-fast) var(--e), transform var(--t-fast) var(--e), visibility var(--t-fast) var(--e);
}
.nav-links .has-sub:hover .sub,
.nav-links .has-sub:focus-within .sub {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-links .sub a { display:block; padding: .5em .8em; }
.nav-cta { margin-left: .4rem; }
/* The dark-red CTA button is .btn-primary (gradient bg, color:#fff). The
   generic .nav-links a:hover rule below uses the `background:` shorthand,
   which wipes the gradient (background-image gets reset) and also re-colors
   the text via --nav-link-hover-text. Both effects make the phone number
   illegible on hover. Pin the CTA's gradient, white text, and a slight
   lift-on-hover so it still feels interactive. */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus,
.nav-links a.nav-cta:active {
    color: #fff;
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%);
}
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus {
    filter: brightness(1.12);
    box-shadow: 0 6px 18px rgba(102, 0, 0, .35);
}

/* ── Red Devil Sports Network button ──────────────────────────────────────────
   Sits beside the Listen / Watch Live CTA and goes to reddevilsports.net. It
   wears the RDSN red rather than the OnWard brand gradient on purpose: it leaves
   this site, and a button that leaves should not look identical to one that does
   not. Three classes deep so it outranks the .nav-links a.nav-cta gradient rule
   above without needing !important. ─────────────────────────────────────────── */
.nav-links a.nav-cta.nav-cta--rdsn,
.nav-links a.nav-cta.nav-cta--rdsn:hover,
.nav-links a.nav-cta.nav-cta--rdsn:focus,
.nav-links a.nav-cta.nav-cta--rdsn:active {
    color: #fff;
    background: linear-gradient(135deg, #d81f31 0%, #8f121f 100%);
    border: 1px solid rgba(255,255,255,.14);
}
.nav-links a.nav-cta.nav-cta--rdsn:hover,
.nav-links a.nav-cta.nav-cta--rdsn:focus {
    filter: brightness(1.12);
    box-shadow: 0 6px 18px rgba(216, 31, 49, .38);
}

.nav-toggle {
    display: none; cursor: pointer; font-size: 1.1rem;
    background: linear-gradient(145deg, #1e2840, #131c30);
    border: 1px solid rgba(201,162,74,.35);
    color: #c9a24a;
    padding: .45em .6em;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    transition: background .15s, border-color .15s, box-shadow .15s;
    line-height: 1;
}
.nav-toggle:hover {
    background: linear-gradient(145deg, #263050, #1a2440);
    border-color: rgba(201,162,74,.65);
    box-shadow: 0 4px 14px rgba(201,162,74,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ---------- Hero "High School Scores" CTA ----------
   Carries the scoreboard's own green so it reads as the live-data action instead
   of a third identical outline button. */
.hero-scores-cta {
    background: linear-gradient(145deg, #00e87a, #04b862);
    color: #04210f;
    border: 1px solid rgba(120,255,190,.45);
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(0,232,122,.28), inset 0 1px 0 rgba(255,255,255,.3);
}
.hero-scores-cta:hover,
.hero-scores-cta:focus-visible {
    color: #04210f;
    filter: brightness(1.07);
    box-shadow: 0 6px 22px rgba(0,232,122,.38), inset 0 1px 0 rgba(255,255,255,.4);
}
/* ── Red Devil Sports Network hero button ─────────────────────────────────────
   Goes to reddevilsports.net. RDSN red rather than the OnWard gold of the two
   buttons beside it, because it is a different destination and should not be
   mistaken for another page of this site. ──────────────────────────────────── */
.hero-rdsn-cta {
    /* Light stop is the RDSN brand red exactly. It started a shade brighter
       (#e8253a), which put white label text at 4.41:1 - under the 4.5 AA floor
       at this size. The brand value measures 5.05:1 and is more correct anyway. */
    background: linear-gradient(145deg, #d81f31, #94121f);
    color: #fff;
    border: 1px solid rgba(255,150,160,.42);
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(216,31,49,.32), inset 0 1px 0 rgba(255,255,255,.26);
}
.hero-rdsn-cta:hover,
.hero-rdsn-cta:focus-visible {
    color: #fff;
    filter: brightness(1.08);
    box-shadow: 0 6px 22px rgba(216,31,49,.44), inset 0 1px 0 rgba(255,255,255,.34);
}

@media (max-width: 640px) {
    /* Front of the queue and full width on phones: these are the two fastest
       routes to live data and should not be the third and fourth things a thumb
       finds. Scores first, then Red Devil Sports directly under it. */
    .cta-row .hero-scores-cta,
    .cta-row .hero-rdsn-cta {
        width: 100%;
        justify-content: center;
        /* Taller than the shared .btn padding gives (32px) - these are the primary
           thumb targets on a phone, so they get a proper 46px. Scoped to these
           buttons so the rest of the site's buttons are untouched. */
        min-height: 46px;
        align-items: center;
        font-size: 1.02rem;
    }
    .cta-row .hero-scores-cta { order: -2; }
    .cta-row .hero-rdsn-cta   { order: -1; }
}

/* ---------- Mobile "Scores" shortcut in the nav bar ----------
   Desktop hides it: the full nav already has the link, and the bar should not
   carry a duplicate. It only appears once the links collapse behind the
   hamburger, which is exactly when the shortcut earns its place. */
.nav-scores { display: none; }

/* 1100px, not 960px. The nav bar needs roughly 1095px for the brand, the full
   link row and the CTA. At 960px it was already overflowing the viewport and
   forcing a horizontal scrollbar in the 960-1095px band - a pre-existing bug,
   made more visible by the longer "Listen / Watch Live" label. Collapsing to
   the hamburger before the content outgrows the bar fixes both. */
/* Collapse to the hamburger at 1140px rather than 1100px.
   BUDGET: .nav-links measures 1039px with the tightened metrics above and ten
   items in the row. The space available to it is the viewport (capped by
   .nav-inner at --container, 1180px) minus 44px of padding and the 24px brand
   gap - so 1032px at the old 1100px breakpoint, 7px short, which cropped the
   last CTA rather than wrapping. 1140px leaves roughly 34px of slack at the
   narrowest full-nav width.
   If nav labels are lengthened in Admin -> Navigation Manager, re-measure
   .nav-links against that budget: the row is nowrap and crops silently. */
@media (max-width: 1140px) {
    .nav-links { display: none; }
    .nav-toggle { display: inline-flex; }

    .nav-scores {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .38em;
        margin-left: auto;        /* pushes the pair to the right of the logo */
        margin-right: .5rem;
        /* Sized for a thumb, not a mouse pointer. Padding alone left it 26px
           tall; min-height/min-width bring it to a comfortable tap target. */
        min-height: 40px;
        min-width: 44px;
        padding: 0 .85em 0 .72em;
        font-size: .84rem;
        font-weight: 800;
        letter-spacing: .02em;
        text-decoration: none;
        white-space: nowrap;
        color: #0b1220;
        background: linear-gradient(145deg, #ffd35c, #c9a24a);
        border: 1px solid rgba(255,226,150,.5);
        border-radius: 999px;
        box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
        transition: transform .14s, box-shadow .14s, filter .14s;
    }
    .nav-scores:hover,
    .nav-scores:focus-visible {
        color: #0b1220;
        filter: brightness(1.06);
        box-shadow: 0 3px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
    }
    .nav-scores:active { transform: translateY(1px); }
    .nav-scores__ico { font-size: .95em; line-height: 1; }

    /* Already on the scoreboard: keep it visible but stop it shouting. */
    .nav-scores.is-current {
        color: #ffd35c;
        background: rgba(201,162,74,.14);
        border-color: rgba(201,162,74,.45);
        box-shadow: none;
    }

    /* Only genuinely tiny screens drop the word. The first cut of this used
       380px, which hid the label on a stock 375px iPhone - the single most
       common phone width - leaving a bare icon exactly where the label matters
       most. There is ~168px of clear bar between the logo and the hamburger at
       375px, so the text fits comfortably; 330px is the real squeeze point. */
    @media (max-width: 330px) {
        .nav-scores { padding: 0 .6em; }
        .nav-scores__txt { display: none; }
    }
    .nav.is-open .nav-links {
        display: flex; flex-direction: column; align-items: stretch;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--c-panel);
        border-top: 1px solid var(--c-line);
        padding: 1rem; gap: .25rem;

        /* ── THE PANEL HAS TO BE ITS OWN SCROLL CONTAINER ────────────────────
           Without these three lines the menu is an absolutely positioned box
           with no height limit: a list longer than the screen simply runs off
           the bottom with no way to reach it, and a finger dragged across it
           scrolls the PAGE behind instead - which is exactly what was reported.

           max-height stops it at the bottom of the screen, measuring down from
           the bottom edge of the nav bar. --om-nav-h is published by site.js on
           open because that bar changes height when it condenses on scroll
           (116px down to 62px), so a hard-coded number would be wrong half the
           time. dvh is listed after vh so a phone that supports it wins: with
           plain vh the panel is sized to the address-bar-retracted viewport and
           its last item hides behind the browser chrome.

           overscroll-behavior: contain is what stops the page moving. It blocks
           scroll CHAINING - reaching the end of the menu no longer hands the
           gesture to the document - and it does that even when the menu is short
           enough not to scroll at all. */
        max-height: calc(100vh  - var(--om-nav-h, 116px));
        max-height: calc(100dvh - var(--om-nav-h, 116px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;   /* momentum on older iOS */
        overscroll-behavior: contain;
    }
    /* ── One rhythm for every row ────────────────────────────────────────────
       The dropdown parents are <div class="has-sub"> wrapping an <a>, while the
       plain items ARE the <a>. Those two were not building the same box: the
       plain links measured 50px tall, but a .has-sub wrapper collapsed to 26px
       while the link inside it rendered 45px and overflowed - so Services and
       About sat on top of each other and the column looked ragged.

       The cause is the anchor's display. As an inline box its vertical padding
       paints but contributes nothing to the parent's height, so the wrapper only
       ever counted the 26px line box. Making both the wrapper and its anchor
       block-level means every row measures the same way, and the flex `gap` then
       does what it was always supposed to. */
    .nav.is-open .nav-links > a,
    .nav.is-open .nav-links > .has-sub > a { display: block; padding: .85em 1em; }
    .nav.is-open .nav-links > .has-sub    { display: block; position: relative; }
    .nav.is-open .nav-links .sub a        { padding: .6em 1em; }

    /* An even 6px between every row. The old value was .25rem but the
       overlapping boxes above were eating most of it, which is why the spacing
       read as random rather than tight. */
    .nav.is-open .nav-links { gap: 6px; }

    /* The two call-to-action buttons are the one place a bigger gap is wanted -
       they are a different kind of thing from the nav links. Given a rule of
       their own rather than an inherited margin so the separation is deliberate
       and equal above both. */
    .nav.is-open .nav-links .nav-cta { margin: 0; }
    .nav.is-open .nav-links .nav-cta:first-of-type { margin-top: .7rem; }
    /* ── Mobile sub-menus: COLLAPSED until tapped ────────────────────────────
       These used to be forced permanently open here - opacity:1, visibility:
       visible - so every child of every dropdown was stacked into the panel the
       moment the hamburger was pressed. That is what made the menu 1147px tall
       on a 700px screen: not a long menu, an entirely expanded one.

       Now each parent gets its own caret button (built by site.js) and starts
       shut, so opening the hamburger shows the top level only. */
    .nav-links .sub {
        position: static; transform: none; box-shadow: none;
        padding-left: 1rem; border: none; background: transparent;
        opacity: 1; visibility: visible;
        display: none;                    /* the collapse */
    }
    .nav-links .has-sub.is-open > .sub { display: block; }

    /* The caret is its own tap target, deliberately. The parent is a real link
       to a real page (/rdsn, /services), and hijacking it to mean "expand"
       would take that page away from anyone on a phone. Tap the label to go,
       tap the caret to open. */
    .nav-links .has-sub > a::after { content: ''; }
    .nav-sub-toggle {
        position: absolute; top: 0; right: 0;
        display: flex; align-items: center; justify-content: center;
        width: 46px; padding: .85em 0;
        background: none; border: 0; cursor: pointer;
        color: inherit; font-size: 1rem; line-height: 1.2;
        opacity: .7;
    }
    .nav-sub-toggle::before { content: '▾'; transition: transform .2s ease; }
    .has-sub.is-open > .nav-sub-toggle::before { transform: rotate(180deg); }
    .nav-sub-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -3px; }
    .nav-cta { margin: .5rem 0 0; }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    padding: 130px 0 100px;
}
.hero-slides { position: absolute; inset: 0; z-index: -3; }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.4s ease, transform 9s linear;
    filter: var(--hero-slide-filter, none);
}
.hero-slide.is-active { opacity: 1; transform: scale(1.0); }
.hero-veil {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: var(--hero-veil,
        linear-gradient(180deg, rgba(8,10,9,.55) 0%, rgba(8,10,9,.72) 40%, rgba(8,10,9,.92) 100%),
        linear-gradient(90deg, rgba(8,10,9,.65) 0%, rgba(8,10,9,.2) 50%, rgba(8,10,9,.55) 100%)
    );
}
.hero-glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--hero-glow,
        radial-gradient(50% 70% at 12% 30%, rgba(45,186,99,.22), transparent 60%),
        radial-gradient(40% 60% at 90% 70%, rgba(201,162,74,.18), transparent 65%)
    );
    animation: heroGlow 12s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    0%   { opacity: .85; transform: translate3d(0,0,0); }
    100% { opacity: 1;   transform: translate3d(0,-1%,0); }
}

.hero-content {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
}
.hero-text { max-width: 640px; }
.hero h1 {
    color: var(--hero-text, #fff);
    max-width: 18ch; font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    line-height: 1.05; letter-spacing: -.02em;
    text-shadow: 0 1px 0 var(--hero-text-emphasis, transparent);
}
.hero h1 .accent {
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 50%, var(--c-accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.hero .lead { max-width: 56ch; font-size: 1.2rem; color: var(--hero-lead-text, #d8ddd9); }
.hero .eyebrow { color: var(--hero-eyebrow-text, var(--c-accent)); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: .6em; }
/* Google rating badge */
.gbadge {
    display: inline-flex; align-items: center; gap: .55rem;
    margin: .9rem 0 .2rem;
    padding: .5em .9em;
    background: var(--gbadge-bg, linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%));
    border: 1px solid var(--gbadge-border, rgba(255,255,255,.14));
    border-radius: 999px;
    color: var(--gbadge-text, #fff);
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: transform var(--t-fast) var(--e), border-color var(--t-fast) var(--e), background var(--t-fast) var(--e);
}
.gbadge:hover {
    transform: translateY(-1px);
    border-color: var(--c-accent);
    color: var(--gbadge-text, #fff);
    background: var(--gbadge-bg-hover, rgba(255,255,255,.08));
}
.gbadge-stars { color: #f0a500; letter-spacing: 1px; font-size: 1.05rem; }
.gbadge-num { font-weight: 800; font-size: 1rem; color: var(--gbadge-text, #fff); }
.gbadge-text { color: var(--gbadge-text-muted, rgba(255,255,255,.75)); font-size: .85rem; }
@media (max-width: 480px) {
    .gbadge { padding: .4em .7em; flex-wrap: wrap; }
    .gbadge-text { font-size: .78rem; }
    .gbadge-num { font-size: .92rem; }
    .hero { min-height: auto; padding: 100px 0 70px; }
    .hero h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
    .hero .lead { font-size: 1rem; }
    .hero-card { padding: 1.3rem 1.2rem; }
    .hero-card .big-phone { font-size: 1.35rem; }
}
.gbadge::before {
    content: ""; display: inline-block;
    width: 18px; height: 18px; flex: none;
    background: conic-gradient(from 0deg, #4285f4 0% 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75% 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px rgba(13,15,14,.95);
    position: relative;
}

.dot-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-brand-2);
    box-shadow: 0 0 0 0 rgba(45,186,99,.8);
    animation: dotPulse 1.6s ease-out infinite;
}
@keyframes dotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(45,186,99,.8); }
    100% { box-shadow: 0 0 0 14px rgba(45,186,99,0); }
}

.btn-glow {
    position: relative;
    box-shadow:
        0 8px 24px rgba(45,186,99,.4),
        0 0 0 0 rgba(45,186,99,.7);
    animation: btnGlow 2.4s ease-out infinite;
}
@keyframes btnGlow {
    0%   { box-shadow: 0 8px 24px rgba(45,186,99,.4), 0 0 0 0 rgba(45,186,99,.55); }
    70%  { box-shadow: 0 8px 24px rgba(45,186,99,.4), 0 0 0 14px rgba(45,186,99,0); }
    100% { box-shadow: 0 8px 24px rgba(45,186,99,.4), 0 0 0 0 rgba(45,186,99,0); }
}

.trust-row {
    display: flex; flex-wrap: wrap; gap: .6rem 1rem;
    margin-top: 2.4rem;
    color: var(--hero-trust-text, #cfd6d1);
    font-size: .95rem;
    font-weight: 600;
}
.trust-row span {
    display: inline-flex; align-items: center; gap: .45em;
    padding: .35em .8em .35em .55em;
    background: var(--hero-trust-pill-bg, transparent);
    border: 1px solid var(--hero-trust-pill-border, transparent);
    border-radius: 999px;
    color: var(--hero-trust-text, #cfd6d1);
    backdrop-filter: blur(4px);
}
.trust-row span::before {
    content: "✓"; color: var(--hero-trust-check-text, #fff); font-weight: 800; font-size: .75em;
    width: 1.3em; height: 1.3em; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%);
    display: grid; place-items: center;
    flex: none;
}

/* Hero info card (glass) */
.hero-card {
    background: var(--hero-card-bg, linear-gradient(160deg, rgba(20,28,24,.78) 0%, rgba(20,28,24,.55) 100%));
    color: var(--hero-card-text, #fff);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--hero-card-border, rgba(255,255,255,.12));
    border-radius: 20px;
    padding: 1.8rem 1.7rem;
    box-shadow: var(--hero-card-shadow, 0 24px 60px rgba(0,0,0,.5)), 0 0 0 1px var(--hero-card-ring, rgba(45,186,99,.08));
    position: relative;
    overflow: hidden;
}
.hero-card::before {
    content:""; position: absolute; top:-1px; left:0; right:0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-brand-2), var(--c-accent), transparent);
    opacity: .7;
}
.hero-card-head { display: flex; align-items: center; gap: .9rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hero-card-divider, rgba(255,255,255,.08)); margin-bottom: 1rem; }
.hero-card-logo { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: var(--hero-card-logo-bg, rgba(255,255,255,.04)); padding: 4px; }
.hero-card-head strong { display: block; color: var(--hero-card-text, #fff); font-size: 1.05rem; line-height: 1.1; }
.hero-card-head small { display: block; color: var(--hero-card-text-muted, rgba(255,255,255,.7)); font-size: .78rem; letter-spacing: .04em; margin-top: 2px; }
.hero-card ul { list-style: none; padding: 0; margin: 0; }
.hero-card li { display: flex; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--hero-card-divider, rgba(255,255,255,.06)); }
.hero-card li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-card .ic { font-size: 1.15rem; flex: none; width: 1.6rem; text-align: center; color: var(--hero-card-text, #fff); }
.hero-card li strong { display: block; color: var(--hero-card-text, #fff); font-size: .98rem; line-height: 1.25; }
.hero-card li span { display: block; color: var(--hero-card-text-muted, rgba(255,255,255,.7)); font-size: .82rem; margin-top: 2px; }
.hero-card .big-phone {
    font-family: 'Manrope', sans-serif;
    color: var(--hero-card-phone, var(--c-brand-2)); font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em;
    transition: color .2s;
}
.hero-card .big-phone:hover { color: var(--c-accent); }

@media (max-width: 980px) {
    .hero-content { grid-template-columns: 1fr; }
    .hero-card { max-width: 460px; }
}

/* Hero dots & scroll cue */
.hero-dots {
    position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
    display: flex; gap: .5rem; z-index: 5;
}
.hero-dot {
    width: 30px; height: 4px; border-radius: 2px; border: 0;
    background: rgba(255,255,255,.25); cursor: pointer;
    transition: background .25s, transform .25s;
}
.hero-dot.is-on { background: var(--c-brand-2); transform: scaleX(1.4); }

.hero-scroll {
    position: absolute; right: 28px; bottom: 24px; z-index: 5;
    width: 28px; height: 44px; border: 2px solid rgba(255,255,255,.35);
    border-radius: 14px;
}
.hero-scroll span {
    display: block; width: 4px; height: 8px; background: #fff; border-radius: 2px;
    margin: 6px auto 0; animation: scrollDot 2s infinite;
}
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@media (max-width: 600px) { .hero-scroll { display: none; } }

/* ---------- Sections ---------- */
section { padding: 84px 0; position: relative; }
section.alt { background: var(--c-bg-soft); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--e), transform .8s var(--e); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ---------- Service cards (image-dominant) ---------- */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.4rem;
}
.svc-card {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    isolation: isolate;
    transition: transform var(--t-med) var(--e), box-shadow var(--t-med) var(--e), border-color var(--t-med) var(--e);
}
.svc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(45,186,99,.5);
    box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(45,186,99,.25);
}
.svc-card .ph { position: absolute; inset: 0; z-index: -2; }
.svc-card .ph img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s var(--e), filter var(--t-med) var(--e);
    filter: saturate(.95) brightness(.85);
}
.svc-card:hover .ph img { transform: scale(1.08); filter: saturate(1.1) brightness(.95); }
.svc-card .ph::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(13,15,14,.05) 0%, rgba(13,15,14,.55) 55%, rgba(13,15,14,.95) 100%),
        radial-gradient(60% 80% at 50% 100%, rgba(45,186,99,.15), transparent 70%);
}
.svc-card .body {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.5rem 1.5rem 1.6rem;
    transform: translateY(28px);
    transition: transform var(--t-med) var(--e);
}
.svc-card:hover .body { transform: translateY(0); }
.svc-card .tag-line {
    color: var(--c-brand-2); font-size: .72rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: .35rem;
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--t-med) var(--e), transform var(--t-med) var(--e);
}
.svc-card:hover .tag-line { opacity: 1; transform: translateY(0); }
.svc-card h3 { color: #fff; margin-bottom: .55rem; font-size: 1.45rem; line-height: 1.1; }
.svc-card p {
    color: rgba(255,255,255,.78); font-size: .94rem; margin: 0 0 1rem;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height var(--t-med) var(--e), opacity var(--t-med) var(--e), margin var(--t-med) var(--e);
}
.svc-card:hover p { max-height: 100px; opacity: 1; }
.svc-card .arrow {
    color: var(--c-brand-2); font-weight: 600; font-size: .95rem;
    display: inline-flex; align-items: center; gap: .5em;
    transition: gap var(--t-fast) var(--e);
}
.svc-card:hover .arrow { gap: 1em; }
.svc-card .stretched { position: absolute; inset: 0; z-index: 1; }

/* Decorative top-corner badge inside card */
.svc-card .corner {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(13,15,14,.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.1);
    display: grid; place-items: center; font-size: 1.4rem;
    transition: transform var(--t-fast) var(--e), background var(--t-fast) var(--e);
}
.svc-card:hover .corner { background: rgba(45,186,99,.18); transform: scale(1.08) rotate(-4deg); }

/* ---------- Trust strip ---------- */
.trust-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.trust-strip .item { text-align: center; }
.trust-strip .item .v { font-family: 'Manrope', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--c-brand-2); line-height: 1; }
.trust-strip .item .l { color: var(--c-muted); font-size: .9rem; margin-top: .35rem; }

/* ---------- Feature splits ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.split.reverse { grid-template-columns: 1fr 1.05fr; }
.split.reverse > .text { order: 2; }
.split .media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-2); position: relative; }
.split .media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--t-slow) var(--e); }
.split .media:hover img { transform: scale(1.04); }
@media (max-width: 880px) {
    .split, .split.reverse { grid-template-columns: 1fr; }
    .split.reverse > .text { order: 0; }
}

/* ---------- Problem / Solution strip ---------- */
.ps-strip {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem;
    align-items: center;
    background: linear-gradient(135deg, #1f6f3c 0%, #2dba63 100%);
    border-radius: var(--r-xl);
    padding: 2.4rem;
    color: #fff;
}
.ps-strip .arr { font-size: 2rem; opacity: .8; }
.ps-strip h3, .ps-strip .ps-title {
    color: #fff;
    margin: 0 0 .4em;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    line-height: 1.2;
}
.ps-strip p { color: rgba(255,255,255,.9); margin: 0; }
@media (max-width: 760px) {
    .ps-strip { grid-template-columns: 1fr; text-align: center; }
    .ps-strip .arr { transform: rotate(90deg); justify-self: center; }
}

/* ---------- Areas ---------- */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .8rem;
}
.area-chip {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 1rem 1.2rem;
    color: var(--c-text);
    transition: all var(--t-fast) var(--e);
    display: flex; align-items: center; justify-content: space-between;
}
.area-chip:hover { background: rgba(45,186,99,.08); border-color: var(--c-brand-2); color: var(--c-brand-2); transform: translateY(-2px); }
.area-chip .arr { opacity: .55; transition: transform var(--t-fast) var(--e); }
.area-chip:hover .arr { transform: translateX(4px); opacity: 1; }

/* ---------- Jingle panel ---------- */
.jingle {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    isolation: isolate;
    padding: 3.4rem 2.4rem;
    background: linear-gradient(135deg, #0d2a18 0%, #163d24 50%, #1f6f3c 100%);
    box-shadow: var(--shadow-2);
}
.jingle::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: var(--jingle-bg);
    background-size: cover; background-position: center;
    opacity: .14; mix-blend-mode: lighten;
}
.jingle-inner { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.jingle .pulse {
    width: 110px; height: 110px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(255,255,255,.25);
    display: grid; place-items: center;
    color: #fff; font-size: 2.2rem;
    position: relative;
}
.jingle .pulse::before, .jingle .pulse::after {
    content:""; position: absolute; inset: -2px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.4);
    animation: pulseRing 2.6s var(--e) infinite;
}
.jingle .pulse::after { animation-delay: 1.3s; }
@keyframes pulseRing {
    0% { transform: scale(.95); opacity: .8; }
    100% { transform: scale(1.6); opacity: 0; }
}
.jingle h2 { color: #fff; }
.jingle .player {
    margin-top: 1rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: rgba(0,0,0,.32);
    backdrop-filter: blur(8px);
    padding: 1rem 1.2rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,.12);
}
.jingle audio { width: 100%; max-width: 380px; }
.jingle .player .tt { color: rgba(255,255,255,.85); font-weight: 500; font-size: .92rem; }
@media (max-width: 720px) {
    .jingle-inner { grid-template-columns: 1fr; text-align: center; }
    .jingle .pulse { margin: 0 auto; }
}

/* ---------- Before/After gallery ---------- */
.ba-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.6rem;
}
.ba-card {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t-med) var(--e), border-color var(--t-med) var(--e), box-shadow var(--t-med) var(--e);
}
.ba-card:hover { transform: translateY(-4px); border-color: rgba(45,186,99,.45); box-shadow: var(--shadow-2); }
.ba-frame {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    background: #000; user-select: none;
}
.ba-frame img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    pointer-events: none;
}
.ba-after  { z-index: 1; }
.ba-before { z-index: 2; clip-path: inset(0 50% 0 0); }
.ba-frame:has(.ba-range) .ba-before { clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); }
.ba-handle {
    position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%);
    width: 2px; background: #fff; z-index: 3; pointer-events: none;
    box-shadow: 0 0 10px rgba(0,0,0,.4);
    transform: translateX(-50%);
}
.ba-handle span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.4);
    display: grid; place-items: center;
}
.ba-handle span::before, .ba-handle span::after {
    content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
    border-top: 2px solid #0d0f0e; border-right: 2px solid #0d0f0e;
}
.ba-handle span::before { left: 7px; transform: translateY(-50%) rotate(-135deg); }
.ba-handle span::after  { right: 7px; transform: translateY(-50%) rotate(45deg); }
.ba-range {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: ew-resize; z-index: 4;
}
.ba-label {
    position: absolute; top: 14px;
    padding: .35em .8em; border-radius: 999px;
    font-size: .68rem; font-weight: 800; letter-spacing: .15em;
    color: #fff;
    z-index: 3; pointer-events: none;
}
.ba-l-before { left: 14px;  background: rgba(176,58,46,.85); }
.ba-l-after  { right: 14px; background: rgba(31,111,60,.85); }
.ba-card figcaption {
    padding: 1rem 1.2rem 1.2rem;
}
.ba-card figcaption strong { display: block; color: var(--c-text); font-size: 1.05rem; margin-bottom: .25rem; }
.ba-card figcaption span   { color: var(--c-muted); font-size: .92rem; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    margin-bottom: .7rem;
    overflow: hidden;
    transition: border-color var(--t-fast) var(--e);
}
.faq-item:hover { border-color: rgba(45,186,99,.35); }
.faq-q {
    width: 100%; text-align: left;
    padding: 1.1rem 1.3rem;
    background: none; border: 0; color: var(--c-text);
    font-size: 1.02rem; font-weight: 600;
    cursor: pointer;
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    font-family: inherit;
}
.faq-q .ic {
    flex: none; width: 28px; height: 28px;
    border-radius: 50%; background: rgba(45,186,99,.12);
    display: grid; place-items: center;
    color: var(--c-brand-2); transition: transform var(--t-fast) var(--e);
    font-weight: 700;
}
.faq-item.is-open .faq-q .ic { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 1.3rem 1.2rem; color: var(--c-muted); }
.faq-a p:last-child { margin-bottom: 0; }
.faq-item.is-open .faq-a { display: block; }

/* ---------- Reviews ---------- */
.review-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.3rem;
}
.review {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 1.6rem 1.4rem;
    transition: transform var(--t-med) var(--e), border-color var(--t-med) var(--e);
    position: relative;
}
.review:hover { transform: translateY(-4px); border-color: rgba(45,186,99,.4); }
.review .stars { color: var(--c-accent); margin-bottom: .8rem; }
.review p { color: var(--c-text); font-size: .96rem; }
.review .who { color: var(--c-muted); font-size: .87rem; margin-top: 1rem; }
.review .who strong { color: var(--c-text); display: block; }

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.4rem; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.info-card {
    background: var(--c-panel); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: 1.8rem;
}
.info-card .row { display: flex; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--c-line); }
.info-card .row:last-child { border-bottom: 0; }
.info-card .row .ico { color: var(--c-brand-2); font-size: 1.2rem; flex: none; width: 1.4rem; }
.info-card .row strong { display: block; color: var(--c-text); }
.info-card .row span { color: var(--c-muted); font-size: .92rem; }

.form-card {
    background: var(--c-panel); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: 1.8rem;
}
.field { margin-bottom: 1.1rem; }
.field label { display:block; margin-bottom: .35rem; font-size: .9rem; color: var(--c-muted); }
.field input, .field textarea, .field select {
    width: 100%; padding: .8em 1em;
    border: 1px solid var(--c-line); background: var(--c-bg);
    color: var(--c-text); border-radius: var(--r-md);
    font: inherit;
    transition: border-color var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e);
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: 0; border-color: var(--c-brand-2);
    box-shadow: 0 0 0 3px rgba(45,186,99,.18);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.captcha-row { display: flex; align-items: center; gap: .8rem; }
.captcha-row .q { color: var(--c-muted); font-weight: 600; flex: 1; }

.form-success {
    padding: 1.2rem;
    background: rgba(45,186,99,.1);
    border: 1px solid rgba(45,186,99,.4);
    border-radius: var(--r-md);
    color: var(--c-brand-2);
    margin-bottom: 1rem;
}
.form-error {
    padding: 1rem;
    background: rgba(176,58,46,.12);
    border: 1px solid rgba(176,58,46,.4);
    border-radius: var(--r-md);
    color: #ef7269;
    margin-bottom: 1rem;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--footer-bg, #0a0c0b);
    color: var(--footer-text, var(--c-text));
    border-top: 1px solid var(--footer-border, var(--c-line));
    padding: 70px 0 30px;
}
.site-footer a { color: var(--footer-link, var(--c-muted)); }
.site-footer a:hover { color: var(--c-accent); }
.site-footer .footer-col-title {
    color: var(--footer-text, var(--c-text));
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .8rem;
    letter-spacing: .01em;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.6rem; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--c-text); font-size: 1rem; margin-bottom: 1rem; }
.footer-grid a, .footer-grid p { color: var(--c-muted); font-size: .92rem; }
.footer-grid a { display: block; padding: .25em 0; }
.footer-grid a:hover { color: var(--c-brand-2); }
.footer-bottom {
    border-top: 1px solid var(--c-line);
    padding-top: 1.4rem;
    color: var(--c-faint); font-size: .85rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer-bottom a { color: var(--c-muted); }
.footer-bottom a:hover { color: var(--c-brand-2); }

/* ---------- Footer contrast ----------
   The footer panel is ALWAYS dark - a photo background with a translucent
   black card sitting on top of it - but the rules above borrow --c-muted and
   --c-faint, which follow the page palette and resolve to DARK grey (#4d564f /
   #76807a) here. That put near-black column links, the address block and the
   bottom bar on a near-black card: unreadable.

   The footer therefore gets its own light ramp instead of body-text variables.
   Declared after the rules it corrects, and matched on .site-footer so it
   out-specifies the .footer-grid / .footer-bottom selectors above. */
.site-footer,
.site-footer p,
.site-footer strong,
.site-footer .footer-col-title,
.site-footer .footer-grid p,
.site-footer .footer-grid a,
.site-footer .footer-grid h4,
.site-footer .footer-bottom,
.site-footer .footer-bottom div,
.site-footer .footer-bottom span,
.site-footer .footer-bottom a { color: #fff; }

/* Hover stays an accent so links still read as links rather than plain text. */
.site-footer a:hover,
.site-footer .footer-grid a:hover,
.site-footer .footer-bottom a:hover { color: var(--c-accent); }

/* The panel is translucent, so how dark the backdrop is depends on whatever
   part of the photo sits behind a given line. A soft shadow keeps white text
   off the lighter patches of the stadium image without tinting the text. */
.site-footer .footer-grid,
.site-footer .footer-bottom { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }

/* ---------- Page hero (interior pages) ----------
   Sub-page hero panels (Service Areas, Brands, About, Gallery, etc.). They
   were eating ~50% of the first viewport on desktop and even more on mobile;
   we don't need that much real estate for a section header. Vertical padding
   and the H1 font size are halved here so the band introduces the page
   without dominating it. Inline H1 styles on individual pages don't set
   font-size, so this clamp wins. */
.page-hero {
    /* !important here because each sub-page sets inline padding:3rem 0
       (or 3.5rem); inline style beats class rules without !important. */
    padding: 70px 0 35px !important;
    position: relative; isolation: isolate; overflow: hidden;
}
.page-hero::before {
    content:""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(50% 80% at 70% 20%, rgba(45,186,99,.18), transparent 70%),
        linear-gradient(180deg, var(--c-bg-soft), var(--c-bg));
}
.page-hero h1 { max-width: 24ch; font-size: clamp(1.4rem, 3vw, 1.9rem) !important; line-height: 1.15 !important; }
.page-hero .lead { max-width: 64ch; font-size: .98rem; }
.page-hero .eyebrow { font-size: .72rem !important; }
.page-hero .breadcrumb { font-size: .78rem; margin-bottom: .5rem !important; }
@media (max-width: 600px) {
    .page-hero { padding: 36px 0 22px !important; }
    .page-hero h1 { font-size: clamp(1.2rem, 5vw, 1.55rem) !important; }
    .page-hero .lead { font-size: .92rem; }
}
.breadcrumb { color: var(--c-muted); font-size: .85rem; margin-bottom: 1rem; }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-brand-2); }

/* ---------- Service detail layout ---------- */
.svc-detail { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 880px) { .svc-detail { grid-template-columns: 1fr; } }
.svc-sidebar {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    position: sticky; top: 90px;
}
.svc-sidebar h4 { margin-bottom: 1rem; }
.svc-sidebar a {
    display: block; padding: .55em .75em; border-radius: var(--r-sm);
    color: var(--c-muted); font-size: .94rem;
}
.svc-sidebar a:hover, .svc-sidebar a.is-active { background: rgba(45,186,99,.08); color: var(--c-brand-2); }

.checklist { list-style: none; padding: 0; margin: 1rem 0; }
.checklist li { padding: .5em 0 .5em 1.8em; position: relative; color: var(--c-text); }
.checklist li::before {
    content: "✓"; position: absolute; left: 0; top: .55em;
    width: 1.2em; height: 1.2em; border-radius: 50%;
    background: rgba(45,186,99,.15); color: var(--c-brand-2);
    display: grid; place-items: center; font-weight: 700; font-size: .8em;
}

/* ---------- Blog list ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.5rem; }
.post-card {
    background: var(--c-panel); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); overflow: hidden;
    transition: transform var(--t-med) var(--e), border-color var(--t-med) var(--e);
}
.post-card:hover { transform: translateY(-4px); border-color: rgba(45,186,99,.4); }
.post-card .ph { aspect-ratio: 16/10; overflow: hidden; }
.post-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--e); }
.post-card:hover .ph img { transform: scale(1.05); }
.post-card .body { padding: 1.2rem 1.3rem 1.4rem; }
.post-card h3 { font-size: 1.15rem; }
.post-card .meta { color: var(--c-faint); font-size: .82rem; margin-bottom: .5rem; }
.post-card p { color: var(--c-muted); font-size: .93rem; margin-bottom: .7rem; }

/* ---------- Misc utilities ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.divider { height: 1px; background: var(--c-line); margin: 2rem 0; }
.tag { display:inline-block; padding: .25em .7em; border-radius: 999px; background: rgba(45,186,99,.08); color: var(--c-brand-2); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Prose typography ---------- */
.prose p { text-indent: 2em; }
/* No indent immediately after a heading; the heading already marks the start */
.prose h1 + p,
.prose h2 + p,
.prose h3 + p,
.prose h4 + p { text-indent: 0; }
/* No indent on lead / class-bearing paragraphs */
.prose p.lead,
.prose p:first-of-type { text-indent: 0; }

/* Drop cap: opt-in with .prose.drop-cap on the container */
.prose.drop-cap > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: .8;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    color: var(--c-brand-2);
    margin: .08em .14em 0 0;
    padding: 0;
}

/* ==========================================================
   Schedule — public page + homepage panel
   Variables: --sch-color set inline per event type
========================================================== */

/* ── Page hero ─────────────────────────────────────────── */
.sch-page-hero {
    padding: 4.5rem 0 3rem;
    background: linear-gradient(160deg, var(--c-bg-soft) 0%, var(--c-bg) 100%);
    border-bottom: 1px solid var(--c-line);
    text-align: center;
}
.sch-page-hero h1 { margin-bottom: .4rem; }
.sch-page-hero .lead { color: var(--c-muted); max-width: 58ch; margin: .6rem auto 0; }
.sch-page-intro { color: var(--c-muted); max-width: 64ch; margin: .9rem auto 0; font-size: .97rem; }

/* ── Section wrapper ────────────────────────────────────── */
.sch-section { padding: 3.5rem 0; }
.sch-section--past { background: var(--c-bg-soft); }

/* Section label with pulse dot */
.sch-section-label {
    display: flex; align-items: center; gap: .6rem;
    font-size: .82rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--c-muted);
    margin-bottom: 1.6rem;
}
.sch-section-label__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--c-line); flex: none;
}
.sch-section-label__dot--live {
    background: var(--c-brand-2);
    box-shadow: 0 0 0 0 rgba(45,186,99,.5);
    animation: sch-pulse 2.2s ease-out infinite;
}
@keyframes sch-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(45,186,99,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(45,186,99,0); }
    100% { box-shadow: 0 0 0 0 rgba(45,186,99,0); }
}

/* ── Event list ─────────────────────────────────────────── */
.sch-list { display: flex; flex-direction: column; gap: 1.4rem; }

/* ── Full event card ────────────────────────────────────── */
.sch-card {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--t-med) var(--e), box-shadow var(--t-med) var(--e), transform var(--t-med) var(--e);
}
.sch-card:hover {
    border-color: rgba(45,186,99,.3);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    transform: translateY(-2px);
}
.sch-card--past { pointer-events: none; }
.sch-card--past:hover { transform: none; box-shadow: none; }

.sch-card__img { position: relative; }
.sch-card__img img {
    width: 100%; max-height: 320px; object-fit: cover; display: block;
}

.sch-card__body {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0;
}

/* Date column */
.sch-card__date-col {
    display: flex; align-items: flex-start; justify-content: center;
    padding: 1.4rem .6rem 1.4rem 1.2rem;
}
.sch-date-block {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(31,111,60,.14);
    background: color-mix(in srgb, var(--sch-color, var(--c-brand)) 14%, transparent);
    border: 1px solid rgba(31,111,60,.30);
    border: 1px solid color-mix(in srgb, var(--sch-color, var(--c-brand)) 30%, transparent);
    border-radius: var(--r-md);
    padding: .6rem .55rem;
    min-width: 58px;
    text-align: center;
    position: relative;
}
.sch-date-block__month {
    font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--sch-color, var(--c-brand-2));
    line-height: 1;
}
.sch-date-block__day {
    font-size: 2.2rem; font-weight: 900; line-height: 1;
    color: var(--c-text); font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}
.sch-date-block__year {
    font-size: .68rem; color: var(--c-muted); line-height: 1; margin-top: .1em;
}

/* Info column */
.sch-card__info { padding: 1.4rem 1.4rem 1.4rem .6rem; }
.sch-card__title {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    margin: .4rem 0 .65rem; color: var(--c-text); line-height: 1.2;
}
.sch-card__when, .sch-card__loc {
    display: flex; align-items: flex-start; gap: .45rem;
    color: var(--c-muted); font-size: .92rem; margin: 0 0 .4rem;
    flex-wrap: wrap;
}
.sch-card__when svg, .sch-card__loc svg { flex: none; margin-top: .18em; }
.sch-card__loc a { color: var(--c-brand-2); }
.sch-addr { display: block; color: var(--c-faint); font-size: .85rem; margin-top: .15rem; }
.sch-card__desc { color: var(--c-muted); font-size: .94rem; margin: .6rem 0 .9rem; line-height: 1.6; }
.sch-ticket-btn { font-size: .9rem; padding: .55em 1.3em; margin-top: .3rem; }

/* Type pill */
.sch-type-pill {
    display: inline-block; font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; border-radius: 999px;
    padding: .22em .75em; line-height: 1.4;
    margin-bottom: .5rem;
}

/* Badges */
.sch-badge {
    position: absolute; top: 12px; right: 12px;
    font-size: .68rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; border-radius: 999px;
    padding: .25em .8em; z-index: 2;
}
.sch-badge--today { background: var(--c-brand-2); color: #fff; }
.sch-badge--past  { background: rgba(255,255,255,.15); color: var(--c-muted); }
.sch-badge--inline { position: static; margin-bottom: .3rem; display: inline-block; }

/* ── Empty state ─────────────────────────────────────────── */
.sch-empty {
    text-align: center; padding: 3.5rem 1rem;
    background: var(--c-panel); border: 1px dashed var(--c-line);
    border-radius: var(--r-lg);
}
.sch-empty__icon { font-size: 3rem; margin-bottom: .8rem; }
.sch-empty h3 { color: var(--c-text); margin-bottom: .4rem; }
.sch-empty p  { color: var(--c-muted); margin: 0; }

/* ── Homepage panel ─────────────────────────────────────── */
.sch-home-section {
    padding: 4rem 0;
    background: linear-gradient(175deg, var(--c-bg) 0%, var(--c-bg-soft) 55%, var(--c-panel) 100%);
}
.sch-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.3rem;
}
.sch-home-card {
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color var(--t-med) var(--e), box-shadow var(--t-med) var(--e), transform var(--t-med) var(--e);
    position: relative;
}
.sch-home-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-line);
    transition: border-color var(--t-med) var(--e);
    pointer-events: none;
}
.sch-home-card:hover {
    border-color: rgba(45,186,99,.4);
    box-shadow: 0 12px 36px rgba(0,0,0,.4);
    transform: translateY(-4px);
}
.sch-home-card__img img {
    width: 100%; height: 170px; object-fit: cover; display: block;
}
.sch-home-card__date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1rem .5rem .5rem;
    background: rgba(31,111,60,.12);
    background: color-mix(in srgb, var(--sch-color, var(--c-brand)) 12%, transparent);
    border-bottom: 1px solid rgba(31,111,60,.20);
    border-bottom: 1px solid color-mix(in srgb, var(--sch-color, var(--c-brand)) 20%, transparent);
}
.sch-home-card__month {
    font-size: .65rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--sch-color, var(--c-brand-2)); line-height: 1;
}
.sch-home-card__day {
    font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--c-text);
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}
.sch-home-card__body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.sch-home-card__title {
    font-size: 1.07rem; font-weight: 700; color: var(--c-text);
    margin: .3rem 0 .2rem; line-height: 1.25;
}
.sch-home-card__meta {
    display: flex; align-items: flex-start; gap: .4rem;
    color: var(--c-muted); font-size: .86rem; margin: 0; flex-wrap: wrap;
}
.sch-home-card__meta svg { flex: none; margin-top: .15em; }

/* ── Mobile overrides ───────────────────────────────────── */
@media (max-width: 640px) {
    .sch-card__body { grid-template-columns: 64px 1fr; }
    .sch-card__date-col { padding: 1rem .4rem 1rem .8rem; }
    .sch-date-block { min-width: 50px; padding: .5rem .4rem; }
    .sch-date-block__day { font-size: 1.7rem; }
    .sch-card__info { padding: 1rem 1rem 1rem .4rem; }
    .sch-card__title { font-size: 1.05rem; }
    .sch-home-grid { grid-template-columns: 1fr; }
    .sch-home-card__date { flex-direction: row; gap: .5rem; padding: .7rem 1rem; }
    .sch-home-card__day { font-size: 1.8rem; }
}

/* ==========================================================
   Schedule — football-specific enhancements
   (complements existing .sch-* classes above)
========================================================== */

/* ── Football page hero ─────────────────────────────────── */
.sch-fb-hero {
    padding: 5rem 0 3.5rem;
    background: linear-gradient(155deg, #0a0c0b 0%, #0f1210 40%, #1a0303 100%);
    border-bottom: 3px solid #b03a2e;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sch-fb-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(176,58,46,.18) 0%, transparent 70%);
    pointer-events: none;
}
.sch-fb-hero h1 { color: #fff; position: relative; }
.sch-fb-hero .lead { color: rgba(255,255,255,.75); position: relative; }
.sch-season-badge {
    display: inline-flex; gap: .6rem; align-items: center;
    background: rgba(176,58,46,.18); border: 1px solid rgba(176,58,46,.45);
    border-radius: 999px; padding: .35em 1em;
    font-size: .82rem; font-weight: 700; letter-spacing: .1em;
    color: #e8a09a; margin-bottom: 1.2rem;
    position: relative;
}

/* ── View toggle ─────────────────────────────────────────── */
.sch-view-toggle {
    display: flex; gap: .5rem;
    background: var(--c-panel); border: 1px solid var(--c-line);
    border-radius: 999px; padding: .25rem;
    margin: 0 auto 2.5rem;
    width: fit-content;
}
.sch-view-btn {
    padding: .5em 1.4em; border-radius: 999px; border: 0;
    font-size: .9rem; font-weight: 600; cursor: pointer;
    background: transparent; color: var(--c-muted);
    transition: background var(--t-fast) var(--e), color var(--t-fast) var(--e);
    font-family: inherit;
}
.sch-view-btn.is-active {
    background: var(--c-danger); color: #fff;
    box-shadow: 0 2px 8px rgba(176,58,46,.3);
}

/* ── Next game spotlight ─────────────────────────────────── */
.sch-next-spot {
    background: linear-gradient(135deg, rgba(176,58,46,.12) 0%, rgba(201,162,74,.06) 100%);
    border: 2px solid rgba(176,58,46,.4);
    border-radius: var(--r-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.sch-next-spot::before {
    content: 'NEXT GAME';
    position: absolute; top: 0; left: 0;
    background: var(--c-danger); color: #fff;
    font-size: .65rem; font-weight: 900; letter-spacing: .15em;
    padding: .3em .9em;
    border-bottom-right-radius: var(--r-md);
}
.sch-next-spot__inner {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 1.5rem; align-items: center; margin-top: .5rem;
}
.sch-next-spot__date {
    text-align: center;
    background: var(--c-danger); border-radius: var(--r-md);
    padding: .8rem 1.1rem; min-width: 72px;
    color: #fff;
}
.sch-next-spot__day { font-size: 2.8rem; font-weight: 900; line-height: 1; font-family: 'Manrope','Inter',sans-serif; }
.sch-next-spot__mon { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.sch-next-spot__yr  { font-size: .7rem; opacity: .8; }
.sch-next-spot__info h2 { font-size: clamp(1.2rem,2.5vw,1.8rem); color: #fff; margin: 0 0 .4rem; }
.sch-next-spot__meta { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .9rem; color: var(--c-muted); margin-top: .4rem; }
.sch-next-spot__meta span { display: flex; align-items: center; gap: .3rem; }
.sch-next-spot__ctas { display: flex; flex-direction: column; gap: .6rem; }

/* ── Game status badges ─────────────────────────────────── */
.sch-status {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; border-radius: 999px;
    padding: .2em .7em; line-height: 1.6; white-space: nowrap;
}
.sch-status--scheduled  { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.sch-status--live       { background: rgba(176,58,46,.2); color: #f87171; border: 1px solid rgba(176,58,46,.5);
    animation: sch-pulse-badge 1.8s ease-out infinite; }
.sch-status--completed  { background: rgba(45,186,99,.12); color: #4ade80; border: 1px solid rgba(45,186,99,.3); }
.sch-status--postponed  { background: rgba(212,160,23,.12); color: #facc15; border: 1px solid rgba(212,160,23,.3); }
.sch-status--canceled   { background: rgba(100,116,139,.1); color: var(--c-faint); border: 1px solid var(--c-line); }
@keyframes sch-pulse-badge {
    0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.5); }
    50%      { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
}

/* ── Game card (list view) ──────────────────────────────── */
.sch-game-card {
    background: var(--c-panel); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); overflow: hidden;
    transition: border-color var(--t-med) var(--e), transform var(--t-med) var(--e), box-shadow var(--t-med) var(--e);
    display: grid; grid-template-columns: 90px 1fr;
}
.sch-game-card:hover:not(.sch-game-card--bye) {
    border-color: rgba(176,58,46,.35);
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    transform: translateY(-2px);
}
.sch-game-card--home   { border-left: 4px solid var(--c-brand); }
.sch-game-card--away   { border-left: 4px solid var(--c-danger); }
.sch-game-card--neutral{ border-left: 4px solid var(--c-accent); }
.sch-game-card--next   { border-color: rgba(201,162,74,.5); box-shadow: 0 0 0 2px rgba(201,162,74,.15); }
.sch-game-card--completed { opacity: .78; }
.sch-game-card--bye    { background: var(--c-bg-soft); border-style: dashed; opacity: .6; }
.sch-game-card--championship { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent), 0 8px 28px rgba(201,162,74,.2); }

.sch-game-card__date {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    padding: 1.2rem .6rem;
    background: var(--c-bg-soft);
    border-right: 1px solid var(--c-line);
    position: relative;
}
.sch-game-card__num {
    font-size: .62rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--c-faint);
    margin-bottom: .3rem;
}
.sch-game-card__mon { font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--c-danger); letter-spacing: .08em; }
.sch-game-card__day { font-size: 2rem; font-weight: 900; line-height: 1; color: var(--c-text); font-family: 'Manrope','Inter',sans-serif; }
.sch-game-card__dow { font-size: .65rem; color: var(--c-muted); margin-top: .2rem; }

.sch-game-card__body { padding: 1.1rem 1.3rem; }
.sch-game-card__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.sch-game-card__title { font-size: clamp(1rem,2vw,1.25rem); font-weight: 700; color: var(--c-text); margin: 0 0 .4rem; line-height: 1.2; }
.sch-game-card__title--canceled { text-decoration: line-through; color: var(--c-faint); }
.sch-game-card__detail { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; font-size: .88rem; color: var(--c-muted); margin: .3rem 0; }
.sch-game-card__detail span { display: flex; align-items: center; gap: .35rem; }
.sch-game-card__score {
    display: inline-block; font-size: 1.1rem; font-weight: 800;
    color: var(--c-brand-2); background: rgba(45,186,99,.1);
    border: 1px solid rgba(45,186,99,.25); border-radius: var(--r-md);
    padding: .3em .9em; margin-top: .5rem;
}
.sch-game-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.sch-game-card__desc { color: var(--c-muted); font-size: .9rem; margin: .6rem 0 0; line-height: 1.6; }

/* Region + special note badges */
.sch-badge-region {
    background: rgba(124,58,237,.12); color: #a78bfa;
    border: 1px solid rgba(124,58,237,.3); font-size: .65rem;
    font-weight: 800; letter-spacing: .1em; border-radius: 999px;
    padding: .18em .65em; text-transform: uppercase;
}
.sch-badge-note {
    background: rgba(201,162,74,.12); color: var(--c-accent);
    border: 1px solid rgba(201,162,74,.3); font-size: .65rem;
    font-weight: 700; border-radius: 999px; padding: .18em .65em;
}
.sch-badge-champ {
    background: rgba(201,162,74,.15); color: var(--c-accent);
    border: 1px solid rgba(201,162,74,.4); font-size: .68rem;
    font-weight: 800; letter-spacing: .08em; border-radius: 999px;
    padding: .2em .7em; text-transform: uppercase;
}
.sch-badge-playoff {
    background: rgba(124,58,237,.12); color: #c4b5fd;
    border: 1px solid rgba(124,58,237,.3); font-size: .65rem;
    font-weight: 800; border-radius: 999px; padding: .18em .65em;
    text-transform: uppercase;
}

/* ── Home/Away labels ────────────────────────────────────── */
.sch-loc-home    { color: var(--c-brand-2); }
.sch-loc-away    { color: #f87171; }
.sch-loc-neutral { color: var(--c-accent); }

/* ── Calendar view ───────────────────────────────────────── */
.sch-cal-wrap { display: none; }
.sch-cal-wrap.is-active { display: block; }
.sch-list-wrap.is-hidden { display: none; }

.sch-cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.5rem; }
.sch-cal-month { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.sch-cal-month__head {
    background: var(--c-danger); color: #fff;
    padding: .7rem 1.1rem; font-weight: 800; font-size: .95rem;
    letter-spacing: .04em;
}
.sch-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.sch-cal-dow {
    text-align: center; font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--c-faint); padding: .5rem .2rem;
    border-bottom: 1px solid var(--c-line);
}
.sch-cal-cell {
    aspect-ratio: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: .3rem .1rem;
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    position: relative; cursor: default;
}
.sch-cal-cell:nth-child(7n) { border-right: 0; }
.sch-cal-cell--empty { background: var(--c-bg); }
.sch-cal-cell--game { cursor: pointer; }
.sch-cal-cell--game:hover { background: rgba(176,58,46,.08); }
.sch-cal-cell__num { font-size: .72rem; font-weight: 600; color: var(--c-muted); line-height: 1; margin-bottom: .15rem; }
.sch-cal-cell--today .sch-cal-cell__num { color: var(--c-brand-2); font-weight: 900; }
.sch-cal-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-danger); flex: none;
}
.sch-cal-dot--away    { background: #60a5fa; }
.sch-cal-dot--neutral { background: var(--c-accent); }
.sch-cal-cell__opp {
    font-size: .52rem; font-weight: 700; color: var(--c-muted);
    text-align: center; line-height: 1.2; margin-top: .1rem;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   Broadcast Archive — public pages
═══════════════════════════════════════════════════════════ */
.arc-hero {
    padding: 5rem 0 3.5rem;
    background: linear-gradient(155deg, #07090b 0%, #0d1017 40%, #0f0a1a 100%);
    border-bottom: 3px solid var(--c-accent);
    text-align: center;
    position: relative; overflow: hidden;
}
.arc-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(201,162,74,.12) 0%, transparent 65%);
    pointer-events: none;
}
.arc-hero h1 { color: #fff; position: relative; }
.arc-hero .lead { color: rgba(255,255,255,.7); max-width: 62ch; margin: .6rem auto 0; position: relative; }

.arc-broadcaster-strip {
    display: flex; align-items: center; gap: 1rem;
    background: rgba(201,162,74,.08); border: 1px solid rgba(201,162,74,.2);
    border-radius: var(--r-lg); padding: 1rem 1.4rem;
    margin: 2rem auto 0; max-width: 640px; position: relative;
}
.arc-broadcaster-strip img {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; border: 2px solid rgba(201,162,74,.4);
}
.arc-broadcaster-strip__name { font-weight: 700; color: var(--c-text); font-size: 1.05rem; }
.arc-broadcaster-strip__role { color: var(--c-muted); font-size: .88rem; }

/* Season tabs */
.arc-tabs {
    display: flex; gap: .5rem; flex-wrap: wrap;
    padding: 0; margin: 0 0 2rem; list-style: none;
}
.arc-tab {
    padding: .5em 1.3em; border-radius: 999px;
    border: 1px solid var(--c-line); background: var(--c-panel);
    color: var(--c-muted); font-weight: 600; font-size: .9rem;
    cursor: pointer; transition: all var(--t-fast) var(--e);
}
.arc-tab:hover, .arc-tab.is-active {
    background: var(--c-accent); color: #1a1a1a; border-color: var(--c-accent);
}

/* Filter bar */
.arc-filter-bar { display: flex; gap: .8rem; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; }
.arc-search {
    flex: 1; min-width: 200px; max-width: 320px;
    padding: .65em 1em; border: 1px solid var(--c-line);
    background: var(--c-panel); color: var(--c-text); border-radius: 999px;
    font: inherit; font-size: .92rem;
}
.arc-search:focus { outline: 0; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(201,162,74,.15); }
.arc-sort { padding: .6em 1em; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-text); border-radius: var(--r-md); font: inherit; font-size: .9rem; }

/* Broadcast grid */
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.3rem; }
.arc-card {
    background: var(--c-panel); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color var(--t-med) var(--e), transform var(--t-med) var(--e), box-shadow var(--t-med) var(--e);
}
.arc-card:hover { border-color: rgba(201,162,74,.35); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.4); }
.arc-card--championship { border-color: var(--c-accent); box-shadow: 0 0 0 1px rgba(201,162,74,.3), 0 8px 28px rgba(201,162,74,.15); }
.arc-card--featured::before {
    content: '⭐ FEATURED';
    display: block; background: var(--c-accent); color: #1a1a1a;
    font-size: .62rem; font-weight: 900; letter-spacing: .14em;
    padding: .3em 1em; text-align: center;
}
.arc-card__img { position: relative; }
.arc-card__img img { width: 100%; height: 180px; object-fit: cover; display: block; }
.arc-card__img-placeholder {
    width: 100%; height: 140px;
    background: linear-gradient(135deg, #0d0f0e 0%, #1a0303 100%);
    display: flex; align-items: center; justify-content: center;
}
.arc-card__img-placeholder img { width: 80px; opacity: .35; }
.arc-card__badges {
    position: absolute; top: 10px; left: 10px;
    display: flex; flex-direction: column; gap: .3rem;
}
.arc-card__body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.arc-card__season { font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }
.arc-card__date   { font-size: .82rem; color: var(--c-muted); }
.arc-card__title  { font-size: 1.05rem; font-weight: 700; color: var(--c-text); line-height: 1.25; margin: .1rem 0 .3rem; }
.arc-card__score  { font-size: .88rem; font-weight: 700; color: var(--c-brand-2); }
.arc-card__desc   { font-size: .87rem; color: var(--c-muted); line-height: 1.55; flex: 1; }
.arc-card__actions { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }

/* Broadcast detail page */
.arc-detail { padding: 3rem 0; }
.arc-detail__breadcrumb { font-size: .85rem; color: var(--c-muted); margin-bottom: 1.5rem; }
.arc-detail__breadcrumb a { color: var(--c-brand-2); }
.arc-detail__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.arc-detail__title { font-size: clamp(1.7rem,3.5vw,2.5rem); color: var(--c-text); margin: .4rem 0 1rem; }
.arc-detail__meta { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; margin-bottom: 2rem; }
.arc-detail__meta dt { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-faint); }
.arc-detail__meta dd { font-size: .95rem; color: var(--c-muted); margin-left: 0; margin-bottom: .4rem; }
.arc-detail__score-banner {
    background: rgba(45,186,99,.1); border: 1px solid rgba(45,186,99,.25);
    border-radius: var(--r-md); padding: .8rem 1.2rem; margin-bottom: 1.5rem;
    font-size: 1.15rem; font-weight: 800; color: var(--c-brand-2);
}
.arc-detail__description { color: var(--c-muted); line-height: 1.75; font-size: 1rem; }
.arc-detail__description p { margin-bottom: 1em; }
.arc-detail__share { display: flex; gap: .7rem; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; }
.arc-detail__share-label { font-size: .85rem; color: var(--c-muted); font-weight: 600; }
.arc-related { padding: 3rem 0; background: var(--c-bg-soft); }
.arc-related h2 { font-size: 1.4rem; margin-bottom: 1.5rem; }
.arc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.arc-nav__card {
    background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-lg);
    padding: 1rem 1.2rem; text-decoration: none;
    transition: border-color var(--t-fast) var(--e);
    display: flex; flex-direction: column; gap: .2rem;
}
.arc-nav__card:hover { border-color: rgba(201,162,74,.35); color: var(--c-text); }
.arc-nav__dir { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--c-faint); }
.arc-nav__title { font-size: .95rem; font-weight: 600; color: var(--c-text); line-height: 1.3; }
.arc-nav__prev { text-align: left; }
.arc-nav__next { text-align: right; }

/* ==========================================================
   Branded Audio Player — .om-player
========================================================== */
.om-player { font-family: 'Inter', system-ui, sans-serif; }
.om-player__shell {
    background: linear-gradient(135deg, #0f1210 0%, #1a0c0c 100%);
    border: 1px solid rgba(201,162,74,.25);
    border-radius: var(--r-xl);
    padding: 1.4rem 1.6rem 1.2rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
    position: relative;
}
.om-player--playing .om-player__shell { border-color: rgba(201,162,74,.5); }

.om-player__top {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 1.1rem; gap: 1rem;
}
.om-player__meta { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.om-player__label {
    font-size: .65rem; font-weight: 900; letter-spacing: .18em;
    text-transform: uppercase; color: var(--c-accent);
}
.om-player__title {
    font-size: 1.05rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.om-player__season { font-size: .82rem; color: rgba(255,255,255,.5); }

.om-player__speed {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-sm); padding: .3em .7em;
    font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.7);
    cursor: pointer; font-family: inherit;
    transition: background var(--t-fast) var(--e);
}
.om-player__speed:hover { background: rgba(255,255,255,.16); color: #fff; }

.om-player__controls {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.om-player__play {
    width: 52px; height: 52px; border-radius: 50%; border: 0;
    background: var(--c-accent); color: #1a1a1a;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex: none;
    box-shadow: 0 4px 14px rgba(201,162,74,.35);
    transition: transform var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e);
}
.om-player__play:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(201,162,74,.5); }
.om-player__play svg { width: 22px; height: 22px; }
.om-player__play polygon { transform: translateX(1px); }

.om-player__skip {
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.65);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex: none;
    transition: background var(--t-fast) var(--e), color var(--t-fast) var(--e);
}
.om-player__skip:hover { background: rgba(255,255,255,.14); color: #fff; }
.om-player__skip svg { width: 20px; height: 20px; }

.om-player__time-wrap {
    display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0;
}
.om-player__elapsed, .om-player__remaining {
    font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.55);
    font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;
}

.om-player__progress {
    flex: 1; height: 20px;
    display: flex; align-items: center; cursor: pointer;
    position: relative;
}
.om-player__track {
    width: 100%; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,.1); position: relative;
}
.om-player__filled {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--c-danger) 0%, var(--c-accent) 100%);
    width: 0; position: absolute; left: 0; top: 0;
    transition: width .1s linear;
}
.om-player__thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; position: absolute;
    top: 50%; transform: translate(-50%, -50%);
    left: 0; box-shadow: 0 1px 4px rgba(0,0,0,.5);
    transition: left .1s linear, transform var(--t-fast) var(--e);
    pointer-events: none;
}
.om-player__progress:hover .om-player__thumb { transform: translate(-50%, -50%) scale(1.3); }

.om-player__vol-wrap {
    display: flex; align-items: center; gap: .4rem;
    flex: none;
}
.om-player__mute {
    width: 28px; height: 28px; background: none; border: 0;
    color: rgba(255,255,255,.5); cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--t-fast) var(--e);
}
.om-player__mute:hover { color: #fff; }
.om-player__mute svg { width: 18px; height: 18px; }
.om-player__vol-range {
    width: 72px; accent-color: var(--c-accent);
    height: 3px; cursor: pointer;
}
.om-player__dl {
    font-size: .9rem; color: rgba(255,255,255,.5); text-decoration: none;
    padding: .3rem .5rem; border-radius: var(--r-sm);
    transition: color var(--t-fast) var(--e);
}
.om-player__dl:hover { color: var(--c-accent); }
.om-player__loading {
    font-size: .82rem; color: rgba(255,255,255,.4);
    text-align: center; padding: .3rem 0; position: absolute;
    bottom: .6rem; left: 50%; transform: translateX(-50%);
}

/* Mobile player */
@media (max-width: 580px) {
    .om-player__controls { gap: .5rem; }
    .om-player__vol-wrap { display: none; }
    .om-player__time-wrap { gap: .4rem; }
    .om-player__play { width: 46px; height: 46px; }
    .sch-next-spot__inner { grid-template-columns: auto 1fr; }
    .sch-next-spot__ctas { grid-column: 1/-1; flex-direction: row; }
    .arc-nav { grid-template-columns: 1fr; }
    .sch-game-card { grid-template-columns: 70px 1fr; }
    .sch-game-card__day { font-size: 1.5rem; }
}

/* ---------- Print ---------- */
@media print {
    .nav, .topbar, .jingle, .site-footer, .nav-toggle { display: none; }
    body { color: #000; background: #fff; }
}

/* ============================================================
   LIGHT-TEXT LEGIBILITY (sitewide)
   Any text whose own colour is light always carries a drop shadow so it
   stays readable over photos, gradients, glass panels and mid-tone
   backgrounds. Classes are applied by assets/js/text-legibility.js, which
   measures each element's computed colour with the same perceived-luminance
   test used by overrides_is_light_color() in includes/overrides.php, so
   CSS-coloured text and Visual-Editor-coloured text behave the same way.
   Elements that already have a text-shadow are left alone by the script.
   ============================================================ */
.om-lit        { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.30); }
.om-lit-strong { text-shadow: 0 2px 4px rgba(0,0,0,.60), 0 0 14px rgba(0,0,0,.35); }
.om-lit-soft   { text-shadow: 0 1px 2px rgba(0,0,0,.50); }

/* Buttons carry their own fill, so keep theirs tighter and less smoky. */
.btn.om-lit, .btn.om-lit-strong, .btn.om-lit-soft { text-shadow: 0 1px 2px rgba(0,0,0,.45); }

/* The counterpart to .om-lit: text-shadow INHERITS, so dark text sitting inside
   any shadowed ancestor - a hero, a glass panel, a maroon section, a Visual
   Editor override - picks up a black halo it has no use for. On light text a
   halo buys contrast; on near-black text on a white card it just blurs the
   glyphs. text-legibility.js stamps this on any element whose own text is dark
   and whose computed text-shadow is not none.

   !important because the shadows it has to beat are themselves often
   !important (VE overrides emit that way). */
.om-unlit { text-shadow: none !important; }

/* ============================================================================
   REPEATING-COMPONENT TEMPLATE STYLES
   ----------------------------------------------------------------------------
   WHY THIS BLOCK EXISTS
   Admin-generated repeating records (schedule games, broadcast archive cards,
   gallery items) must inherit their appearance from the COMPONENT, never from
   per-record edits. Previously the look came from a mix of:
     1. these component classes,
     2. a global Visual-Editor override `main { color:#000 !important }`, and
     3. per-card VE overrides pinned to a:nth-of-type(N).
   Because (3) is positional, adding one new record shifted every later card
   onto the wrong colour, which is why each new item had to be recoloured by
   hand. Those per-card patches have been removed and their intent promoted
   here.

   THE RULE THAT MAKES THIS ROBUST
   Every text element of a repeating component declares its OWN colour. A
   declaration on the element always beats an inherited value, so a global
   forced text colour on an ancestor (however important) can no longer leak in.
   No !important is needed anywhere below.

   Values are the CURRENT design, read from the live computed styles - not new
   colours. Change a variable here and every existing AND future record follows.
   ============================================================================ */
:root {
    /* Broadcast archive cards (homepage + /broadcasts) */
    --arc-card-bg:        var(--c-panel);
    --arc-card-border:    var(--c-line);
    --arc-season-color:   var(--c-accent);
    --arc-title-color:    var(--c-text);
    --arc-date-color:     var(--c-muted);
    --arc-score-color:    var(--c-brand-2);
    --arc-desc-color:     var(--c-muted);

    /* Schedule - list/grid game cards */
    --sched-card-bg:      var(--c-panel);
    --sched-card-border:  var(--c-line);
    --sched-title-color:  var(--c-text);
    --sched-meta-color:   var(--c-muted);
    --sched-accent-color: var(--c-accent);

    /* Schedule - "Upcoming" spotlight (sits on a dark band) */
    --upcoming-title-color:     #e8ece9;
    --upcoming-venue-color:     rgba(232,236,233,.72);
    --upcoming-kickoff-color:   #c9a24a;
    --upcoming-broadcast-color: rgba(232,236,233,.62);
    --upcoming-datehero-color:  #ffffff;
    --upcoming-label-color:     var(--c-danger);
}

/* ---- Broadcast archive card ------------------------------------------------
   Applies to every card, existing and future. */
.arc-card               { background: var(--arc-card-bg); border-color: var(--arc-card-border); }
.arc-card__body         { color: var(--arc-title-color); }
.arc-card__season       { color: var(--arc-season-color); }
.arc-card__title        { color: var(--arc-title-color); }
.arc-card__date         { color: var(--arc-date-color); }
.arc-card__score        { color: var(--arc-score-color); }
.arc-card__desc         { color: var(--arc-desc-color); }

/* ---- Schedule game card (list + grid) ---- */
.sch-home-card                { background: var(--sched-card-bg); }
.sch-home-card__title         { color: var(--sched-title-color); }
.sch-home-card__meta          { color: var(--sched-meta-color); }
.sch-card__title              { color: var(--sched-title-color); }
.sch-card__meta,
.sch-card__venue,
.sch-card__time               { color: var(--sched-meta-color); }

/* ---- Schedule "Upcoming" spotlight ----
   Each line declares its own colour so nothing inherits a forced value. */
.sch-next-spotlight-label     { color: var(--upcoming-label-color); }
.sch-next-detail__opp         { color: var(--upcoming-title-color); }
.sch-next-detail__venue       { color: var(--upcoming-venue-color); }
.sch-next-detail__time        { color: var(--upcoming-kickoff-color); }
.sch-next-detail__radio       { color: var(--upcoming-broadcast-color); }
.sch-next-date-hero,
.sch-next-date-hero__month,
.sch-next-date-hero__day,
.sch-next-date-hero__dow      { color: var(--upcoming-datehero-color); }

/* ---- Gallery card (homepage) ---- */
.om-gal-cap__t                { color: var(--c-text); }
.om-gal-cap__c                { color: var(--c-muted); }

/* ---- Per-item overrides still win ----
   The Visual Editor writes a positional selector for one specific node, which
   is more specific than these single-class rules, so a deliberate one-off tweak
   to an individual record continues to take precedence. Shared style is the
   default; individual override remains possible.
   ============================================================================ */

/* ---- Top-level nav link colour comes from the COMPONENT ---------------------
   The nav bar is dark, so its top-level links must be light. That colour used
   to come only from per-link Visual Editor overrides pinned to
   nav > a:nth-of-type(N) - so any newly added nav item (e.g. Gallery) rendered
   dark-on-dark until it was hand-recoloured, and inserting a link mid-list
   re-pointed every later override onto the wrong anchor.
   Declaring it here means new nav items are correct automatically.
   Dropdown items (.sub a) are excluded - they sit on light panels and keep
   their own dark text. The admin "Nav link text color" setting still wins,
   as it emits !important. */
.nav .nav-links > a { color: var(--nav-top-link-color, #fff); }
.nav .nav-links > .has-sub > a { color: var(--nav-top-link-color, #fff); }

/* ============================================================================
   MOBILE FOOTER COMPACTION
   The footer ran ~1440px (nearly two full screens) on a 375px phone: 70px of
   top padding, a 100px logo, and 23 links at desktop line-height stacked in a
   narrow 2-up grid.

   Deliberately CSS-only - the markup is NOT restructured. The owner's Visual
   Editor overrides address footer blocks positionally
   (footer > div:nth-of-type(1) > ... > div:nth-of-type(N)), so converting the
   columns to <details> accordions would re-index those selectors and wreck the
   saved footer colours. Tightening type, spacing and the logo achieves the same
   goal with zero structural risk.
   ============================================================================ */
@media (max-width: 700px) {
    .site-footer { padding: 26px 0 16px; }

    /* Logo: 100px -> 56px */
    .site-footer .nav-brand img { height: 56px !important; }
    .site-footer .nav-brand { margin-bottom: .2rem; }

    /* Brand blurb: smaller and tighter, still fully readable */
    .footer-grid > div:first-child p { font-size: .82rem; line-height: 1.5; margin: .5rem 0; }

    /* Two columns, tighter gutters.
       minmax(0,1fr), not 1fr: a bare 1fr floors at min-content, so a long link
       label pushes the track wider than the container and the column clips. */
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }

    /* Column headings */
    .site-footer .footer-col-title { font-size: .78rem; margin-bottom: .3rem; letter-spacing: .04em; }

    /* The big win: 23 links at a compact rhythm instead of desktop spacing */
    .footer-grid a { font-size: .82rem; padding: .12em 0; line-height: 1.35; }
    .footer-grid p { font-size: .82rem; }

    /* Bottom bar: wrap tightly instead of one item per line */
    .footer-bottom { padding-top: .9rem; font-size: .76rem; }
    .footer-bottom > * { margin: 0; }
    .footer-bottom a { padding: .1em .35em; }

    /* The accessibility widget floats bottom-right - keep the last row clear of it */
    .footer-bottom { padding-right: 3.2rem; }
}

/* Very small phones: stack the blocks full-width, but flow each link list
   into TWO internal columns. An 8-link list becomes 4 rows instead of 8, which
   is where most of the leftover height was. Uses the full 375px width per
   block, so each link still gets ~165px - wider than the old 2-up grid gave
   it. The column heading spans both sub-columns. */
@media (max-width: 560px) {
    /* One full-width block per section. Was fighting an !important 2-up rule in
     omnia.css, which meant phones kept a two-track grid AND split each track
     into two more text columns - four narrow columns in ~337px, which is what
     clipped the right-hand labels. The !important is gone, so this now wins.

     The internal column-count is also gone. Two text columns inside a
     full-width block raises the block min-content width, and combined with the
     grid it was the second half of the same overflow. Full-width links read
     better on a phone and each still gets the whole 337px. */
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .footer-grid > div:not(:first-child) {
        column-count: initial;
        column-gap: normal;
    }
    .footer-grid > div:not(:first-child) > .footer-col-title {
        column-span: all;
        -webkit-column-span: all;
        margin-bottom: .35rem;
    }
    .footer-grid a { font-size: .82rem; break-inside: avoid; }
}

/* Footer overflow guard. The footer holds ~23 links plus a phone number and a
   review CTA; any one long unbroken label used to be able to force a grid track
   wider than the viewport. min-width:0 lets the flex/grid children shrink, and
   overflow-wrap breaks a genuinely unbreakable string instead of clipping it. */
.site-footer .footer-grid > div { min-width: 0; }
.site-footer .footer-grid a,
.site-footer .footer-grid p { overflow-wrap: anywhere; }

/* "Leave us a review" footer CTA - reads as an invitation, not another nav link.
   Was gold (--c-accent). Now white with the rest of the footer; the underline
   and bold weight carry the CTA emphasis that the colour used to.
   To put the gold back, swap the colour below for var(--c-accent). */
.site-footer .footer-review-link { color: #fff !important; text-decoration: underline; text-underline-offset: .18em; }
.site-footer .footer-review-link:hover { color: var(--c-accent) !important; text-decoration: underline; }

/* ==========================================================================
   CLIENT LOGO RAIL  -  includes/brand_scroller.php
   A continuous marquee of advertiser logos under the trust strip.

   The whole effect is ONE transform animation on ONE element. No JavaScript,
   nothing repaints, and the track is a single composited layer sliding
   sideways - see the file header for why the list is printed twice.
   ========================================================================== */
/* THE BAND IS DARK ON PURPOSE.

   It used to be transparent over a 2.8%-white gradient, which was written for a
   dark section - and the page around it is rgb(247,249,246). On that near-white
   the gradient was invisible, and so were half the logos: client artwork
   arrives as white-background JPEGs and pale line work (a grey wordmark, a thin
   legal-firm crest), and pale-on-near-white is nothing at all. The drop-shadow
   below was doing the same job in reverse - a black smudge intended to lift a
   logo off a dark ground, smeared across white.

   Going dark solves the pale logos and gives the eyebrow's gold something to
   sit on, but on its own it would trade one problem for another: the
   white-background logos would become bright rectangles floating on black. So
   the band went dark AND every logo got a white card (.brand-rail__item). Both
   halves are needed - one without the other looks worse than what was here.

   Slate rather than another red: the trust strip immediately above is burgundy,
   and two saturated bands stacked fight each other. */
.brand-rail {
    position: relative;
    padding: 2.1rem 0 2.3rem;
    background: linear-gradient(180deg, #121a21 0%, #0b1016 55%, #121a21 100%);
    border-top: 1px solid rgba(201,162,74,.28);
    border-bottom: 1px solid rgba(201,162,74,.28);
    overflow: hidden;
}
.brand-rail__eyebrow {
    margin: 0 0 1.15rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-accent);
}

/* The window the track slides behind. The mask feathers both ends so logos
   dissolve at the edges instead of being guillotined by the viewport - the
   detail that makes a marquee read as continuous rather than as a clipped box.
   Browsers without mask-image simply get hard edges, which is fine.

   It feathers to transparent, revealing whatever is behind - which is the
   band's own gradient on .brand-rail, not this element. */
.brand-rail__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.brand-rail__track {
    display: flex;
    width: max-content;
    animation: brandRail var(--br-dur, 30s) linear infinite;
}
/* -50% is exactly one copy of the list. At that point copy 2 sits where copy 1
   began, so the reset to 0 lands on an identical frame. Seamless structurally,
   not by tuning. */
@keyframes brandRail {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Hovering stops the rail so a logo can actually be looked at. This IS the
   hover affordance for the cards - they deliberately have no lift of their own,
   because a per-card transition stops the logos painting (see .brand-rail__item). */
.brand-rail__viewport:hover .brand-rail__track { animation-play-state: paused; }

.brand-rail__set {
    display: flex;
    align-items: center;
    /* Was 3.4rem, when the gap was the only thing separating one logo from the
       next. The cards below provide their own padding, so the same optical
       spacing now needs far less air between them. */
    gap: 1.5rem;
    margin: 0;
    padding: 0 1.7rem;
    list-style: none;
}

/* EACH LOGO GETS A WHITE CARD.

   Client logos arrive in two incompatible forms and always will: transparent
   PNG/WebP, and artwork with a white background baked into the image. Nothing
   can be done about that at upload time without editing a paying advertiser's
   mark. The card makes the difference invisible - a baked-white logo merges
   into its card, a transparent one is composited onto the same white - so the
   row reads as one consistent set of objects instead of a mix of floating
   marks and stray rectangles.

   Fixed height, flexible width: a square badge and a long wordmark then occupy
   cards of the same stature, which is what stops a rail like this looking
   ragged. min-width keeps a very narrow mark from producing a sliver of a card.

   The inset ring is a hairline, not a border: a real 1px border on a white card
   against a dark band reads as a hard frame. */
.brand-rail__item {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    min-width: 156px;
    padding: .8rem 1.15rem;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.08),
        0 6px 16px rgba(0,0,0,.34);

    /* ── IF THE CARDS EVER RUN BLANK, IT IS THE IMAGES, NOT THIS CSS ────────
       This rail once scrolled as a row of empty white boxes. It looked exactly
       like a compositing failure - a big translate3d-animated layer under a
       mask, with rounded, shadowed children - and the shadow, the radius and
       the mask were each removed in turn on the strength of screenshots that
       seemed to clear them. None of them was the cause. Every one of those
       screenshots was taken on a page whose logos had already decoded from
       earlier scrolling, so anything looked like a fix.

       The cause was decoding="async" on the logos. An image that is loaded,
       sized and complete still paints NOTHING until its first decode finishes,
       and on the old transparent rail that gap was invisible - a gap on a gap.
       Put a white card behind it and the same moment reads as an empty box.
       Calling img.decode() on all of them filled every card at once, with the
       shadow, the radius and the mask all present.

       The fix is in includes/brand_scroller.php. Leave this CSS alone. */
}

/* Logos arrive at every size and on every background. Capping the HEIGHT and
   letting width follow keeps a long wordmark and a square badge reading as the
   same visual weight, which is what stops a rail like this looking ragged.
   Explicit height on the <img> too, so a lazy-loaded logo cannot reflow the row
   as it lands. */
.brand-rail__item img {
    height: 64px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    display: block;
    /* Client logos stay in FULL COLOUR - these are paying advertisers and a
       greyscale-until-hover treatment quietly devalues what they bought.

       NO drop-shadow. There was one, to lift a logo off a dark ground; the logo
       now sits on a white card, where a black shadow is just dirt around the
       artwork - and on a baked-white logo it outlined the image's own rectangle
       instead of its mark. The card's shadow does the lifting. */
    transition: transform .25s var(--e, ease);
}

/* The link fills its card, so the whole card is the click target rather than
   just the pixels of the logo. */
.brand-rail__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

@media (max-width: 900px) {
    .brand-rail { padding: 1.7rem 0 1.8rem; }
    .brand-rail__set { gap: 1.1rem; padding: 0 1.2rem; }
    .brand-rail__item { height: 78px; min-width: 128px; padding: .65rem .9rem; border-radius: 10px; }
    .brand-rail__item img { height: 50px; max-width: 150px; }
}
@media (max-width: 560px) {
    .brand-rail__set { gap: .85rem; }
    .brand-rail__item { height: 66px; min-width: 108px; padding: .55rem .75rem; border-radius: 9px; }
    .brand-rail__item img { height: 42px; max-width: 126px; }
    .brand-rail__eyebrow { font-size: .66rem; letter-spacing: .12em; }
}

/* The site's opt-out is the accessibility widget's Pause Motion toggle, never
   the OS media query - see assets/js/motion-policy.js. Paused rather than
   hidden: the logos are content, and a client who paid to be on this page must
   still be on it when somebody turns motion off. It becomes a static,
   horizontally scrollable row. */
html.acc-pause-motion .brand-rail__track { animation: none; }
html.acc-pause-motion .brand-rail__viewport { overflow-x: auto; }
html.acc-pause-motion .brand-rail__set:nth-child(2) { display: none; }

/* A linked logo. The cursor and the lift on hover are the only affordance -
   anything more (a border, an external-link glyph) turns an advertiser rail
   into a row of buttons. Focus IS drawn, and clearly, because a keyboard user
   has no hover to fall back on. */
/* Offset pulled in from 6px: the ring used to have to clear a bare logo, and
   now has to sit just outside a card with its own rounded edge. Further out and
   it collides with the next card. */
.brand-rail__link:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 12px;
}