/* ==========================================================================
   PopUp Sports - Global Styles
   ========================================================================== */

/* Collapse any Elementor section that contains only the now-empty header widget */
.elementor-section:has(.elementor-widget-popup_sports_header_navbar) {
    display: none !important;
}

/* Mobile/tablet: full-width buttons, centered text, arrow pinned right — ALL pus- buttons */
@media (max-width: 1100px) {
    .pus-btn,
    .pus-ah__cta, .pus-ar__cta, .pus-bs__cta, .pus-btm__cta,
    .pus-ch__cta, .pus-ct__cta, .pus-eh__cta, .pus-evbe__cta,
    .pus-evh__cta, .pus-evpu__cta, .pus-gs__cta, .pus-hs__cta,
    .pus-lu__cta, .pus-ms__cta, .pus-os__cta, .pus-pk__cta,
    .pus-rc__cta, .pus-rsh__cta, .pus-sh__cta, .pus-svp__cta,
    .pus-un__cta, .pus-pu__cta, .pus-be__cta, .pus-cta__cta,
    .pus-svc-cta__cta, .pus-evcta__cta, .pus-rsc__cta,
    .pus-rslu__cta, .pus-faq__cta, .pus-cf__submit,
    .pus-ie__cta, .pus-es__cta, .pus-tm__cta, .pus-aw__cta {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 58px !important;
        box-sizing: border-box !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 64px 0 20px !important;
        gap: 0 !important;
    }
    .pus-btn > span:first-child,
    .pus-ah__cta > span:first-child, .pus-ar__cta > span:first-child,
    .pus-bs__cta > span:first-child, .pus-btm__cta > span:first-child,
    .pus-ch__cta > span:first-child, .pus-ct__cta > span:first-child,
    .pus-eh__cta > span:first-child, .pus-evbe__cta > span:first-child,
    .pus-evh__cta > span:first-child, .pus-evpu__cta > span:first-child,
    .pus-gs__cta > span:first-child, .pus-hs__cta > span:first-child,
    .pus-lu__cta > span:first-child, .pus-ms__cta > span:first-child,
    .pus-os__cta > span:first-child, .pus-pk__cta > span:first-child,
    .pus-rc__cta > span:first-child, .pus-rsh__cta > span:first-child,
    .pus-sh__cta > span:first-child, .pus-svp__cta > span:first-child,
    .pus-un__cta > span:first-child, .pus-pu__cta > span:first-child,
    .pus-be__cta > span:first-child, .pus-cta__cta > span:first-child,
    .pus-svc-cta__cta > span:first-child, .pus-evcta__cta > span:first-child,
    .pus-rsc__cta > span:first-child, .pus-rslu__cta > span:first-child,
    .pus-faq__cta > span:first-child, .pus-ie__cta > span:first-child,
    .pus-es__cta > span:first-child, .pus-tm__cta > span:first-child,
    .pus-aw__cta > span:first-child {
        display: block !important;
        width: 100% !important;
        padding-right: 26px !important;
        padding-left: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    .pus-btn__arrow,
    [class*="__cta-arrow"],
    [class*="__submit-arrow"] {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }
}

/* Mobile: hide ONLY specific decorative elements (no broad attribute selectors) */
@media (max-width: 768px) {
    .pus-h__sticker,
    .pus-h__arrows,
    .pus-h__deco-overlay,
    .pus-h__bokeh,
    .pus-ie__topright-dots,
    .pus-ie__topright-balls,
    .pus-ie__bg-dots,
    .pus-ie__sports {
        display: none !important;
    }
    /* Hide CTA button in header on mobile (it's inside the hamburger overlay).
       Stronger selector to beat the universal [class*="__cta"] rule. */
    body .pus-gh a.pus-gh__cta,
    body a.pus-gh__cta,
    .pus-gh > .pus-gh__inner > a.pus-gh__cta { display: none !important; }

    /* Prevent any content from overflowing the viewport horizontally */
    html, body { overflow-x: hidden !important; max-width: 100vw; margin: 0 !important; padding: 0 !important; }
.wp-site-blocks > *:first-child, main > *:first-child, .site-content > *:first-child { margin-top: 0 !important; }
/* Pull hero up to cover any remaining gap from page wrapper — all devices */
.pus-h, .pus-ah, .pus-ch, .pus-rsh, .pus-evh, .pus-eh, .pus-sh, .pus-cn {
    margin-top: -10px !important;
}
/* Also strip parent Elementor/section wrapper top padding above heroes */
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element > .elementor-widget-container > .pus-h),
.elementor-section:has(.pus-h),
.elementor-section:has(.pus-ah),
.elementor-section:has(.pus-ch),
.elementor-section:has(.pus-rsh),
.elementor-section:has(.pus-evh),
.elementor-section:has(.pus-eh),
.elementor-section:has(.pus-sh),
.elementor-section:has(.pus-cn) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
    .pus-h, .pus-ah, .pus-ch, .pus-rsh, .pus-evh, .pus-eh, .pus-sh, .pus-cn,
    .pus-ie, .pus-mb, .pus-lu, .pus-pkg, .pus-bks, .pus-bgg, .pus-mts,
    .pus-osr, .pus-rsp, .pus-wsa, .pus-fxp, .pus-tm, .pus-pk, .pus-svp,
    .pus-pu, .pus-evpu, .pus-be, .pus-evbe, .pus-os, .pus-es,
    .pus-cta, .pus-svc-cta, .pus-evcta, .pus-rsc, .pus-cp, .pus-fr,
    .pus-rslu, .pus-faq, .pus-cf {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    /* Headings shouldn't overflow */
    .pus-h__heading, .pus-ah__heading, .pus-ch__heading, .pus-rsh__heading,
    .pus-evh__heading, .pus-eh__heading, .pus-sh__heading, .pus-cn__heading,
    .pus-ie__heading, .pus-mb__heading, .pus-lu__heading, .pus-pkg__heading,
    .pus-tm__eyebrow, .pus-faq__heading, .pus-cta__heading, .pus-svc-cta__heading,
    .pus-ms__heading, .pus-ar__heading, .pus-aw__heading {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
    }
}

/* Mobile/tablet uniform horizontal page padding — desktop untouched */
@media (max-width: 1100px) {
    :root { --pus-page-x: 40px; }
    /* Interactive section: strip Elementor wrapper padding so panel goes full-bleed */
    .elementor-section:has(.pus-ie),
    .elementor-section:has(.pus-ie) > .elementor-container,
    .elementor-section:has(.pus-ie) .elementor-column,
    .elementor-section:has(.pus-ie) .elementor-widget-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Strip Elementor wrapper padding only from pus- sections */
    .elementor-section:has([class^="pus-"]) > .elementor-container,
    .elementor-section:has([class^="pus-"]) .elementor-column,
    .elementor-section:has([class^="pus-"]) .elementor-widget-wrap,
    .elementor-section:has([class^="pus-"]) .elementor-column-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Override every widget's own clamp(56px,7.5vw,180px) side padding with --pus-page-x — OUTER sections only */
    .pus-ms, .pus-lu, .pus-pk, .pus-tm, .pus-cta, .pus-svc-cta,
    .pus-evcta, .pus-rsc, .pus-rslu, .pus-faq, .pus-cf,
    .pus-es, .pus-pu, .pus-be, .pus-evpu, .pus-os, .pus-svp,
    .pus-fr, .pus-ab, .pus-ar, .pus-aw, .pus-at, .pus-btm,
    .pus-cp, .pus-cn, .pus-ah, .pus-ch, .pus-rsh, .pus-evh,
    .pus-eh, .pus-sh,
    .pus-gs, .pus-bs, .pus-hs {
        padding-left: var(--pus-page-x) !important;
        padding-right: var(--pus-page-x) !important;
    }
    /* Inner wrappers should have NO padding (outer handles it) */
    [class^="pus-"][class$="__inner"],
    [class*=" pus-"][class$="__inner"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Hide header CTA on tablet — hamburger takes over */
    body .pus-gh a.pus-gh__cta,
    body a.pus-gh__cta,
    .pus-gh > .pus-gh__inner > a.pus-gh__cta { display: none !important; }
    .pus-gh__burger { display: block; }
    /* Apply uniform side padding to inner wrappers AND outer sections (both, since some widgets pad outer) */
    .pus-ah, .pus-ch, .pus-rsh, .pus-evh, .pus-eh, .pus-h, .pus-sh, .pus-cn,
    .pus-mb, .pus-lu, .pus-pkg, .pus-bks, .pus-bgg, .pus-mts,
    .pus-osr, .pus-rsp, .pus-wsa, .pus-fxp,
    .pus-rslu, .pus-faq, .pus-cf, .pus-tm, .pus-pk, .pus-svp,
    .pus-pu, .pus-evpu, .pus-be, .pus-evbe, .pus-os, .pus-es,
    .pus-cta, .pus-svc-cta, .pus-evcta, .pus-rsc, .pus-cp, .pus-fr,
    .pus-ms, .pus-ar, .pus-aw, .pus-mt, .pus-btm,
    .pus-ah__inner, .pus-ch__inner, .pus-rsh__inner, .pus-evh__inner,
    .pus-eh__inner, .pus-h__inner, .pus-h__wrap, .pus-sh__inner, .pus-cn__inner,
    .pus-cp__inner, .pus-cf__inner, .pus-tm__inner, .pus-pk__inner, .pus-svp__inner,
    .pus-pu__inner, .pus-evpu__inner, .pus-be__inner, .pus-evbe__inner,
    .pus-os__inner, .pus-es__inner, .pus-cta__inner, .pus-svc-cta__inner,
    .pus-evcta__inner, .pus-rsc__inner, .pus-rslu__inner, .pus-faq__inner,
    .pus-fr__inner, .pus-mb__inner, .pus-ie__inner, .pus-lu__inner,
    .pus-pkg__inner, .pus-bks__inner, .pus-bgg__inner, .pus-mts__inner,
    .pus-osr__inner, .pus-rsp__inner, .pus-wsa__inner, .pus-fxp__inner,
    .pus-ms__inner, .pus-ar__inner, .pus-aw__inner, .pus-mt__inner, .pus-btm__inner,
    .pus-gh__inner {
        padding-left: var(--pus-page-x) !important;
        padding-right: var(--pus-page-x) !important;
    }
    /* When both outer + inner have the var, the inner should be 0 to avoid doubling */
    .pus-ah .pus-ah__inner, .pus-ch .pus-ch__inner, .pus-rsh .pus-rsh__inner,
    .pus-evh .pus-evh__inner, .pus-eh .pus-eh__inner, .pus-h .pus-h__inner,
    .pus-h .pus-h__wrap, .pus-sh .pus-sh__inner, .pus-cn .pus-cn__inner,
    .pus-cp .pus-cp__inner, .pus-cf .pus-cf__inner, .pus-tm .pus-tm__inner,
    .pus-pk .pus-pk__inner, .pus-svp .pus-svp__inner, .pus-pu .pus-pu__inner,
    .pus-evpu .pus-evpu__inner, .pus-be .pus-be__inner, .pus-evbe .pus-evbe__inner,
    .pus-os .pus-os__inner, .pus-es .pus-es__inner, .pus-cta .pus-cta__inner,
    .pus-svc-cta .pus-svc-cta__inner, .pus-evcta .pus-evcta__inner,
    .pus-rsc .pus-rsc__inner, .pus-rslu .pus-rslu__inner, .pus-faq .pus-faq__inner,
    .pus-fr .pus-fr__inner, .pus-mb .pus-mb__inner, .pus-ie .pus-ie__inner,
    .pus-lu .pus-lu__inner, .pus-pkg .pus-pkg__inner, .pus-bks .pus-bks__inner,
    .pus-bgg .pus-bgg__inner, .pus-mts .pus-mts__inner, .pus-osr .pus-osr__inner,
    .pus-rsp .pus-rsp__inner, .pus-wsa .pus-wsa__inner, .pus-fxp .pus-fxp__inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 900px)  { :root { --pus-page-x: 32px; } }
@media (max-width: 640px)  { :root { --pus-page-x: 16px; } }
@media (max-width: 420px)  { :root { --pus-page-x: 12px; } }

/* 2560+: every content wrapper site-wide centered at 1992px max-width.
   Section roots get zero side padding so __inner auto-centering wins. */
@media (min-width: 2560px) {
    /* Strip Elementor wrapper padding too — it adds extra inset */
    body .elementor-section,
    body .elementor-container,
    body .elementor-column,
    body .elementor-column-wrap,
    body .elementor-element-populated,
    body .elementor-widget-wrap,
    body .elementor-widget-container,
    body .e-con,
    body .e-con-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Strip section-root side padding (let __inner control content width) */
    .pus-gh, .pus-h, .pus-ah, .pus-ch, .pus-rsh, .pus-evh, .pus-eh, .pus-sh, .pus-cn,
    .pus-fr,
    .pus-ms, .pus-lu, .pus-pk, .pus-tm, .pus-cta, .pus-ct, .pus-svc-cta,
    .pus-evcta, .pus-rsc, .pus-rslu, .pus-faq, .pus-cf,
    .pus-es, .pus-pu, .pus-be, .pus-evpu, .pus-os, .pus-svp,
    .pus-ab, .pus-ar, .pus-aw, .pus-at, .pus-btm,
    .pus-cp, .pus-gs, .pus-bs, .pus-hs,
    .pus-mb, .pus-pkg, .pus-bks, .pus-bgg, .pus-mts, .pus-mt,
    .pus-osr, .pus-rsp, .pus-wsa, .pus-fxp, .pus-evbe,
    .pus-rsg, .pus-un, .pus-rc, .pus-svc-testimonials, .pus-events-cta,
    .pus-events-levelup, .pus-all-sizes, .pus-booking-steps, .pus-testimonials {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Inner content wrappers: 1992px max-width, auto-centered */
    .pus-gh__inner, .pus-h__wrap, .pus-h__content, .pus-fr__inner,
    [class$="__inner"], [class$="__panel"]:not(.pus-ie__panel),
    [class$="__wrap"], [class$="__container"] {
        max-width: 1992px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Special: pus-ie__panel keeps full-bleed bg; force gutter via padding so __inner sits 1992-centered */
    .pus-ie { padding: 0 !important; }
    .pus-ie__panel {
        max-width: 100% !important;
        padding-left: calc((100vw - 1992px) / 2) !important;
        padding-right: calc((100vw - 1992px) / 2) !important;
    }
    .pus-ie__inner {
        max-width: 100% !important;
        margin: 0 !important;
    }
}



/* Hero positioning — apply only at tablet/mobile, not desktop */
@media (max-width: 1100px) {
    .pus-h, .pus-ah, .pus-ch, .pus-rsh, .pus-evh, .pus-eh, .pus-sh, .pus-cn {
        margin-top: -10px !important;
        position: relative;
    }
    .elementor-section:has(.pus-h),
    .elementor-section:has(.pus-ah),
    .elementor-section:has(.pus-ch),
    .elementor-section:has(.pus-rsh),
    .elementor-section:has(.pus-evh),
    .elementor-section:has(.pus-eh),
    .elementor-section:has(.pus-sh),
    .elementor-section:has(.pus-cn) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Kill WP block-theme global padding and any auto-rendered page title so
   full-bleed Elementor sections sit flush to the viewport edges. */
:root {
    --wp--style--root--padding-left: 0px !important;
    --wp--style--root--padding-right: 0px !important;
    --wp--style--root--padding-top: 0px !important;
    --wp--style--root--padding-bottom: 0px !important;
}
.wp-site-blocks,
.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.wp-block-post-title,
.wp-block-template-part .wp-block-post-title,
header.entry-header,
.entry-header > .wp-block-post-title {
    display: none !important;
}

/* Allow hero athletes image to extend past section edges on the right */
.pus-ah { overflow: visible !important; }
.pus-ah__visual { overflow: visible !important; }


/* Services page — Packages section: hockey player instead of baseball */
.page-id-8 .pus-pk__player {
    content: url('../images/packages/player-hockey.png') !important;
}

/* Resources page — Testimonials section: dark grunge bg */
.page-id-10 .pus-tm {
    background: #00003b url('../images/resources-hero/testimonials-bg.png') center center / cover no-repeat !important;
    color: #ffffff !important;
}
.page-id-10 .pus-tm__eyebrow { color: #ffffff !important; }
.page-id-10 .pus-tm__intro { color: rgba(255,255,255,0.85) !important; }

/* Events page — Events of All Sizes section: blue cards, white text */
.page-id-9 .pus-es { background: #ffffff !important; }
.page-id-9 .pus-es__bg { display: none !important; }
.page-id-9 .pus-es__card {
    background: #0000D4 !important;
    border-color: transparent !important;
    box-shadow: 0 8px 30px rgba(0,0,212,0.15) !important;
}
.page-id-9 .pus-es__card-icon img {
    filter: brightness(0) invert(1) !important;
}
.page-id-9 .pus-es__card-icon { color: #ffffff !important; }
.page-id-9 .pus-es__card-icon svg,
.page-id-9 .pus-es__card-icon svg path {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
}
.page-id-9 .pus-es__card-title { color: #ffffff !important; }

/* Events page — flip POP UP UNFORGETTABLE player horizontally */
.page-id-9 .pus-evpu__player {
    transform: scaleX(-1) !important;
}
.page-id-9 .pus-es__card-body { color: rgba(255,255,255,0.9) !important; }


/* ==========================================================================
   RESPONSIVE OVERRIDES (Tablet ≤1024px, Mobile ≤768px, Small ≤480px)
   ========================================================================== */

/* Tablet: ≤1024px ------------------------------------------------------- */
@media (max-width: 1024px) {
    /* All hero sections: drop oversized min-heights (padding handled by --pus-page-x) */
    .pus-ah, .pus-ch, .pus-rsh, .pus-evh, .pus-eh, .pus-h, .pus-sh, .pus-cn {
        min-height: auto !important;
    }
    /* Force 2-col grids to stack early */
    .pus-pk__grid, .pus-svp__grid, .pus-evpu__grid, .pus-pu__grid,
    .pus-be__grid, .pus-evbe__grid, .pus-os__grid,
    .pus-tm__grid, .pus-cf__card, .pus-cta__grid, .pus-svc-cta__grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet hero spacing: extra top padding so hero content clears the fixed header */
@media (max-width: 1100px) {
    .pus-ah__inner, .pus-ch__inner, .pus-rsh__inner, .pus-evh__inner,
    .pus-eh__inner, .pus-h__inner, .pus-h__wrap, .pus-sh__inner {
        padding-top: clamp(110px, 14vw, 160px) !important;
    }
}

/* Mobile + small tablet: ≤768px ----------------------------------------- */
@media (max-width: 768px) {
    /* Hero sections: shorter, single column, athlete image flows naturally */
    .pus-ah, .pus-ch, .pus-rsh, .pus-evh, .pus-eh, .pus-h, .pus-sh {
        min-height: auto !important;
    }
    .pus-ah__inner, .pus-ch__inner, .pus-rsh__inner, .pus-evh__inner,
    .pus-eh__inner, .pus-h__inner, .pus-sh__inner {
        grid-template-columns: 1fr !important;
        padding-top: clamp(110px, 14vw, 160px) !important;
        gap: 24px !important;
    }
    /* Hero text: kill bottom padding so visual sits below text cleanly */
    .pus-ah__text, .pus-ch__text, .pus-rsh__text, .pus-evh__text,
    .pus-eh__text, .pus-h__text {
        padding-bottom: 24px !important;
    }
    /* Hero athletes/visuals: contain within section, no negative margins */
    .pus-ah__athletes, .pus-ch__athletes, .pus-rsh__athletes,
    .pus-evh__athletes, .pus-eh__athletes {
        margin-bottom: 0 !important;
        max-height: 60vh !important;
        width: auto !important;
        max-width: 100% !important;
    }
    .pus-ah__visual, .pus-ch__visual, .pus-rsh__visual,
    .pus-evh__visual, .pus-eh__visual {
        justify-content: center !important;
        align-items: center !important;
    }

    /* Services hero: athlete absolutely positioned — bring back into flow */
    .pus-sh {
        height: auto !important;
        max-height: none !important;
        padding-bottom: clamp(40px, 8vw, 80px) !important;
    }
    .pus-sh__visual {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 24px !important;
    }
    .pus-sh__visual img {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        object-fit: contain !important;
    }

    /* Home hero: kill 100vh that breaks short mobile screens */
    .pus-h { min-height: auto !important; }
    .pus-h__athletes {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-top: 24px !important;
    }

    /* Hero typography: shrink headings */
    .pus-ah__heading, .pus-ch__heading, .pus-rsh__heading,
    .pus-evh__heading, .pus-eh__heading, .pus-h__heading,
    .pus-sh__heading {
        font-size: clamp(36px, 9vw, 56px) !important;
        line-height: 1.05 !important;
    }
    .pus-cn__heading {
        font-size: clamp(40px, 10vw, 64px) !important;
    }

    /* Packages — kill oversized min-height + absolute positioning */
    .pus-pk__visual, .pus-svp__visual {
        min-height: auto !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    .pus-pk__visual > *, .pus-svp__visual > * {
        max-width: 90% !important;
        max-height: 90% !important;
    }

    /* Side-by-side text+image sections: natural stacking */
    .pus-pu__visual, .pus-evpu__visual, .pus-be__visual, .pus-evbe__visual,
    .pus-os__visual, .pus-cta__visual, .pus-svc-cta__visual {
        margin-top: 32px !important;
    }
    .pus-pu__visual img, .pus-evpu__visual img, .pus-be__visual img,
    .pus-evbe__visual img, .pus-os__visual img,
    .pus-cta__visual img, .pus-svc-cta__visual img {
        max-width: 100% !important;
        height: auto !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        top: auto !important;
    }

    /* Testimonials: kill negative-margin overlap */
    .pus-tm__grid { gap: 0 !important; }
    .pus-tm__review {
        margin-left: 0 !important;
        margin-top: -32px !important;
        min-height: auto !important;
    }

    /* Resources Level Up — single column */
    .pus-rslu__cards { grid-template-columns: 1fr !important; }
    .pus-rslu__card { aspect-ratio: 4 / 3 !important; }

    /* FAQ — single column */
    .pus-faq__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .pus-faq__visual { display: none !important; }

    /* Contact form */
    .pus-cf__card {
        grid-template-columns: 1fr !important;
        padding: clamp(24px, 5vw, 40px) !important;
        gap: 32px !important;
    }
    .pus-cf__form { grid-template-columns: 1fr !important; }
    .pus-cf__heading { margin-bottom: 28px !important; }

    /* Events of All Sizes — single column */
    .pus-es__grid { grid-template-columns: 1fr !important; gap: 16px !important; }

    /* Footer */
    .pus-fr__grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }

    /* Content/policy pages — vertical only; horizontal handled by --pus-page-x */
    .pus-cn { padding-top: clamp(80px, 14vw, 120px) !important; padding-bottom: clamp(40px, 6vw, 60px) !important; }
    .pus-cp { padding-top: clamp(40px, 7vw, 60px) !important; padding-bottom: clamp(40px, 7vw, 60px) !important; }
    .pus-cp__inner h2 { font-size: clamp(22px, 5vw, 28px) !important; }
    .pus-cp__inner h3 { font-size: clamp(17px, 4vw, 20px) !important; margin-top: 24px !important; }
    .pus-cp__inner p, .pus-cp__inner li { font-size: 15px !important; }

    /* Section headings — generic shrink */
    .pus-pk__heading, .pus-svp__heading, .pus-pu__heading, .pus-evpu__heading,
    .pus-be__heading, .pus-evbe__heading, .pus-os__heading, .pus-rslu__heading,
    .pus-tm__eyebrow, .pus-faq__heading, .pus-es__title, .pus-cta__heading,
    .pus-svc-cta__heading {
        font-size: clamp(28px, 7vw, 42px) !important;
        line-height: 1.1 !important;
    }

    /* Buttons — slightly smaller pills */
    .pus-h__cta, .pus-ah__cta, .pus-ch__cta, .pus-rsh__cta,
    .pus-evh__cta, .pus-eh__cta, .pus-cf__submit, .pus-cta__cta,
    .pus-svc-cta__cta {
        font-size: 14px !important;
        padding: 8px 8px 8px 24px !important;
    }
}

/* Small mobile: ≤480px -------------------------------------------------- */
@media (max-width: 480px) {
    /* Footer collapses to single column (horizontal padding from --pus-page-x) */
    .pus-fr__grid { grid-template-columns: 1fr !important; }
    .pus-fr { padding-top: 48px !important; padding-bottom: 24px !important; }

    /* Headings: even smaller */
    .pus-ah__heading, .pus-ch__heading, .pus-rsh__heading,
    .pus-evh__heading, .pus-eh__heading, .pus-h__heading,
    .pus-sh__heading {
        font-size: clamp(30px, 9vw, 44px) !important;
    }
    .pus-cn__heading { font-size: clamp(34px, 10vw, 52px) !important; }

    /* Body text */
    .pus-ah__desc, .pus-ch__desc, .pus-rsh__desc, .pus-evh__desc,
    .pus-eh__desc, .pus-h__sub, .pus-sh__desc, .pus-cn__desc {
        font-size: 15px !important;
    }

    /* Contact form padding */
    .pus-cf__card { padding: 24px 20px !important; }
    .pus-cf__heading { font-size: 32px !important; }

    /* Resources Level Up cards: smaller meta */
    .pus-rslu__card-title { font-size: 18px !important; }

    /* Header on tiny screens */
    .pus-nav__cta-text { display: none !important; }
}

/* Prevent any horizontal scroll regardless of device */
html, body { overflow-x: hidden !important; }


/* ==========================================================================
   TAGLINE TYPING EFFECT — for "Pop Up. Step In. Play." (Rocklist Brush)
   ========================================================================== */

.pus-typing { min-height: 1.2em; }
.pus-typing__text {
    display: inline;
    font-family: 'Rocklist Brush', 'Playfair Display', Georgia, serif !important;
    color: inherit;
    white-space: pre;
}
.pus-typing__caret { display: none !important; }
.pus-typing--done .pus-typing__caret { animation-duration: 0.7s; }
.pus-typing__caret--hide { opacity: 0 !important; }
@keyframes pusTypingBlink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pus-typing__caret { animation: none; opacity: 0; }
}


/* ==========================================================================
   UNIVERSAL BUTTON — match home-hero CTA exactly
   Applies to every widget's CTA so all pill buttons look identical site-wide
   ========================================================================== */

/* Canonical button — applies to ANY element with a __cta or __submit class
   plus the explicit .pus-btn, regardless of widget prefix */
.pus-btn,
[class*="__cta"]:not([class*="__cta-"]):not([class*="__cta_"]),
[class*="__submit"]:not([class*="__submit-"]):not([class*="__submit_"]) {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 10px 10px 10px 40px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #1C1BFF, #0F0ED9) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Poppins', -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-transform: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: transform .25s ease !important;
    filter: none !important;
}

/* Hover overlay (gradient swap) — broad attribute selector */
.pus-btn::before,
[class*="__cta"]:not([class*="__cta-"]):not([class*="__cta_"])::before,
[class*="__submit"]:not([class*="__submit-"]):not([class*="__submit_"])::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #002BFF, #041267);
    opacity: 0;
    transition: opacity .5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

.pus-btn:hover::before,
[class*="__cta"]:not([class*="__cta-"]):not([class*="__cta_"]):hover::before,
[class*="__submit"]:not([class*="__submit-"]):not([class*="__submit_"]):hover::before { opacity: 1 !important; }

/* Universal hover — gradient swap + tiny expand + smooth transition */
.pus-btn,
[class*="__cta"]:not([class*="__cta-"]):not([class*="__cta_"]),
[class*="__submit"]:not([class*="__submit-"]):not([class*="__submit_"]) {
    transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s, background .35s !important;
}
.pus-btn:hover,
[class*="__cta"]:not([class*="__cta-"]):not([class*="__cta_"]):hover,
[class*="__submit"]:not([class*="__submit-"]):not([class*="__submit_"]):hover {
    transform: scale(1.04) !important;
    filter: none !important;
    background: linear-gradient(90deg, #1C1BFF, #0F0ED9) !important;
}

/* Arrow circle stays white on hover (preserve background-image) */
.pus-btn:hover .pus-btn__arrow,
[class*="__cta"]:not([class*="__cta-"]):not([class*="__cta_"]):hover [class*="__cta-arrow"],
[class*="__submit"]:not([class*="__submit-"]):not([class*="__submit_"]):hover [class*="__submit-arrow"] {
    background-color: #fff !important;
}

/* All inner content above the ::before overlay */
.pus-btn > *,
[class*="__cta"]:not([class*="__cta-"]):not([class*="__cta_"]) > *,
[class*="__submit"]:not([class*="__submit-"]):not([class*="__submit_"]) > * {
    position: relative;
    z-index: 1;
}

/* The arrow circle — every CTA arrow + submit arrow site-wide */
.pus-btn__arrow,
[class*="__cta-arrow"],
[class*="__submit-arrow"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    flex-shrink: 0 !important;
    position: relative;
    z-index: 2;
}

/* Arrow icon */
.pus-btn__arrow img,
.pus-btn__arrow svg,
.pus-btn__arrow svg,
.pus-btn__arrow img,
[class*="__cta-arrow"] svg,
[class*="__cta-arrow"] img,
[class*="__submit-arrow"] svg,
[class*="__submit-arrow"] img {
    width: 16px !important;
    height: 16px !important;
    stroke: #0706c4 !important;
    fill: none !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* ==========================================================================
   UNIFIED HEADER — match home-hero's inline navbar exactly
   Applied to header-navbar widget so inner pages look identical
   ========================================================================== */

.pus-hd { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; background: transparent !important; z-index: 50 !important; }
.pus-hd__inner {
    max-width: 1992px !important;
    margin: 0 auto !important;
    padding: clamp(20px, 2.4vw, 36px) clamp(56px, 7.5vw, 180px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}
.pus-hd__logo img {
    height: clamp(56px, 5.4vw, 84px) !important;
    width: auto !important;
}
.pus-hd__menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(24px, 3.4vw, 60px) !important;
}
.pus-hd__menu a {
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Poppins', -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    opacity: 0.92 !important;
    transition: opacity .2s ease !important;
}
.pus-hd__menu a:hover { opacity: 1 !important; }

/* Force header CTA to drop the 200px min-width so it sizes like the hero btn */
.pus-hd__cta { min-width: 0 !important; justify-content: flex-start !important; }

/* Inner-page headers sit on dark hero — give them solid text */
.pus-hd[data-theme="solid"] { background: #00003b !important; }

/* Sticky/scrolled state — glassy blue, smaller logo, smooth transition */
.pus-hd,
.pus-h__hd-wrap,
.pus-h__nav {
    transition: background .3s ease, backdrop-filter .3s ease, padding .3s ease, box-shadow .3s ease !important;
}
.pus-hd.is-stuck,
body.pus-scrolled .pus-hd,
body.pus-scrolled .pus-h__nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(0, 0, 65, 0.72) !important;
    backdrop-filter: saturate(180%) blur(14px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 30, 0.18) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 2147483646 !important;
    animation: pusHdSlide .35s cubic-bezier(.4, 0, .2, 1) !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Cap athletes/visual stacking when sticky header is active so they never rise above it */
body.pus-scrolled .pus-h__athletes,
body.pus-scrolled .pus-ah__athletes,
body.pus-scrolled .pus-ch__athletes,
body.pus-scrolled .pus-rsh__athletes,
body.pus-scrolled .pus-evh__athletes,
body.pus-scrolled .pus-eh__athletes,
body.pus-scrolled .pus-sh__visual,
body.pus-scrolled .pus-sh__visual img,
body.pus-scrolled .pus-h__sticker {
    z-index: 1 !important;
}

/* Inner-page header — __inner gets the site padding, max-width centers content */
body.pus-scrolled .pus-hd { padding: 0 !important; }
body.pus-scrolled .pus-hd .pus-hd__inner {
    padding: clamp(10px, 1.2vw, 16px) clamp(56px, 7.5vw, 180px) !important;
    max-width: 1992px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Home hero nav — no __inner wrapper, so the bar IS the padded inner.
   Apply matching padding directly; do NOT use max-width+margin on a fixed el. */
body.pus-scrolled .pus-h__nav {
    padding: clamp(10px, 1.2vw, 16px) clamp(56px, 7.5vw, 180px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
body.pus-scrolled .pus-hd__logo img,
body.pus-scrolled .pus-h__logo img {
    height: clamp(38px, 3.6vw, 52px) !important;
    transition: height .3s ease !important;
}
body.pus-scrolled .pus-hd__cta,
body.pus-scrolled .pus-h__nav .pus-btn {
    padding: 8px 8px 8px 24px !important;
    font-size: 14px !important;
    transition: padding .3s ease, font-size .3s ease !important;
}
body.pus-scrolled .pus-hd__cta-arrow,
body.pus-scrolled .pus-h__nav .pus-btn__arrow {
    width: 36px !important;
    height: 36px !important;
    transition: width .3s ease, height .3s ease !important;
}
@keyframes pusHdSlide {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Header responsive */
@media (max-width: 1024px) {
    .pus-hd__menu { display: none !important; }
}
@media (max-width: 640px) {
    .pus-hd__cta {
        padding: 8px !important;
        gap: 0 !important;
    }
    .pus-hd__cta > span:not(.pus-hd__cta-arrow) { display: none !important; }
    .pus-btn { padding: 8px !important; gap: 0 !important; }
    .pus-btn > span:first-child,
    .pus-cta__cta > span:first-child,
    .pus-svc-cta__cta > span:first-child { /* keep label visible on body buttons */ }
}



/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */

:root {
    /* Colors - Primary */
    --pus-color-primary-bg: #080034;
    --pus-color-secondary-bg: #0D0057;
    --pus-color-accent: #3A1AFF;
    --pus-color-accent-hover: #2A0EDF;
    --pus-color-accent-light: #4D33FF;
    --pus-color-white: #FFFFFF;
    --pus-color-light-text: #E0E0E0;
    --pus-color-body-dark: #1A1A2E;
    --pus-color-card-bg: #0F0066;
    --pus-color-border: rgba(255, 255, 255, 0.1);
    --pus-color-border-light: rgba(255, 255, 255, 0.15);
    --pus-color-overlay: rgba(8, 0, 52, 0.7);
    --pus-color-overlay-heavy: rgba(8, 0, 52, 0.85);
    --pus-color-black: #000000;
    --pus-color-success: #00C853;
    --pus-color-error: #FF1744;

    /* Fonts */
    --pus-font-heading: 'Acumin Variable', 'Arial Narrow', Arial, sans-serif;
    --pus-font-body: 'PP Mori', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pus-font-script: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* Font Sizes */
    --pus-fs-hero: clamp(3rem, 6vw, 5.5rem);
    --pus-fs-h1: clamp(2.5rem, 5vw, 4.5rem);
    --pus-fs-h2: clamp(2rem, 4vw, 3.5rem);
    --pus-fs-h3: clamp(1.5rem, 3vw, 2.25rem);
    --pus-fs-h4: clamp(1.25rem, 2vw, 1.75rem);
    --pus-fs-h5: clamp(1.1rem, 1.5vw, 1.375rem);
    --pus-fs-body: 1rem;
    --pus-fs-body-lg: 1.125rem;
    --pus-fs-body-sm: 0.875rem;
    --pus-fs-caption: 0.75rem;
    --pus-fs-tagline: clamp(1.25rem, 2.5vw, 2rem);

    /* Font Weights */
    --pus-fw-extralight: 200;
    --pus-fw-regular: 400;
    --pus-fw-semibold: 600;
    --pus-fw-bold: 700;
    --pus-fw-extrabold: 800;

    /* Spacing */
    --pus-space-xs: 0.25rem;
    --pus-space-sm: 0.5rem;
    --pus-space-md: 1rem;
    --pus-space-lg: 1.5rem;
    --pus-space-xl: 2rem;
    --pus-space-2xl: 3rem;
    --pus-space-3xl: 4rem;
    --pus-space-4xl: 5rem;
    --pus-space-5xl: 6rem;
    --pus-space-section-y: clamp(60px, 8vw, 120px);
    --pus-space-section-y-sm: clamp(40px, 6vw, 80px);

    /* Layout */
    --pus-container-max: 1400px;
    --pus-container-wide: 1728px;
    --pus-container-narrow: 960px;
    --pus-container-padding: clamp(16px, 4vw, 40px);

    /* Border Radius */
    --pus-radius-sm: 4px;
    --pus-radius-md: 8px;
    --pus-radius-lg: 12px;
    --pus-radius-xl: 16px;
    --pus-radius-2xl: 24px;
    --pus-radius-pill: 999px;
    --pus-radius-circle: 50%;

    /* Shadows */
    --pus-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --pus-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --pus-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --pus-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
    --pus-shadow-glow: 0 0 30px rgba(58, 26, 255, 0.3);

    /* Transitions */
    --pus-transition-fast: 0.15s ease;
    --pus-transition-base: 0.3s ease;
    --pus-transition-slow: 0.5s ease;
    --pus-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Scale */
    --pus-z-base: 1;
    --pus-z-dropdown: 100;
    --pus-z-sticky: 200;
    --pus-z-header: 500;
    --pus-z-overlay: 900;
    --pus-z-modal: 1000;
}


/* --------------------------------------------------------------------------
   Reset / Base Styles (scoped to .pus- prefix)
   -------------------------------------------------------------------------- */

[class*="pus-"] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[class*="pus-"] *,
[class*="pus-"] *::before,
[class*="pus-"] *::after {
    box-sizing: border-box;
}

[class*="pus-"] img {
    max-width: 100%;
    height: auto;
    display: block;
}

[class*="pus-"] a {
    text-decoration: none;
    color: inherit;
    transition: color var(--pus-transition-base);
}

[class*="pus-"] ul,
[class*="pus-"] ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

[class*="pus-"] button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

[class*="pus-"] input,
[class*="pus-"] textarea,
[class*="pus-"] select {
    font-family: var(--pus-font-body);
    font-size: var(--pus-fs-body);
}


/* --------------------------------------------------------------------------
   Container Classes
   -------------------------------------------------------------------------- */

.pus-container {
    width: 100%;
    max-width: var(--pus-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pus-container-padding);
    padding-right: var(--pus-container-padding);
}

.pus-container--wide {
    max-width: var(--pus-container-wide);
}

.pus-container--narrow {
    max-width: var(--pus-container-narrow);
}

.pus-container--full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* --------------------------------------------------------------------------
   Section Padding Utilities
   -------------------------------------------------------------------------- */

.pus-section {
    padding-top: var(--pus-space-section-y);
    padding-bottom: var(--pus-space-section-y);
}

.pus-section--sm {
    padding-top: var(--pus-space-section-y-sm);
    padding-bottom: var(--pus-space-section-y-sm);
}

.pus-section--no-top {
    padding-top: 0;
}

.pus-section--no-bottom {
    padding-bottom: 0;
}

.pus-section--dark {
    background-color: var(--pus-color-primary-bg);
    color: var(--pus-color-white);
}

.pus-section--navy {
    background-color: var(--pus-color-secondary-bg);
    color: var(--pus-color-white);
}

.pus-section--accent {
    background-color: var(--pus-color-accent);
    color: var(--pus-color-white);
}

.pus-section--white {
    background-color: var(--pus-color-white);
    color: var(--pus-color-body-dark);
}


/* --------------------------------------------------------------------------
   Typography Utilities
   -------------------------------------------------------------------------- */

.pus-heading {
    font-family: var(--pus-font-heading);
    font-weight: var(--pus-fw-extrabold);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--pus-color-white);
}

.pus-heading--hero {
    font-size: var(--pus-fs-hero);
    line-height: 0.95;
}

.pus-heading--h1 {
    font-size: var(--pus-fs-h1);
}

.pus-heading--h2 {
    font-size: var(--pus-fs-h2);
}

.pus-heading--h3 {
    font-size: var(--pus-fs-h3);
}

.pus-heading--h4 {
    font-size: var(--pus-fs-h4);
}

.pus-heading--h5 {
    font-size: var(--pus-fs-h5);
}

.pus-heading--dark {
    color: var(--pus-color-body-dark);
}

.pus-heading--accent {
    color: var(--pus-color-accent);
}

.pus-tagline {
    font-family: var(--pus-font-script);
    font-style: italic;
    font-weight: var(--pus-fw-regular);
    font-size: var(--pus-fs-tagline);
    line-height: 1.3;
    color: var(--pus-color-white);
}

.pus-tagline--sm {
    font-size: clamp(1rem, 2vw, 1.5rem);
}

.pus-tagline--accent {
    color: var(--pus-color-accent);
}

.pus-body-text {
    font-family: var(--pus-font-body);
    font-weight: var(--pus-fw-regular);
    font-size: var(--pus-fs-body);
    line-height: 1.7;
    color: var(--pus-color-light-text);
}

.pus-body-text--lg {
    font-size: var(--pus-fs-body-lg);
}

.pus-body-text--sm {
    font-size: var(--pus-fs-body-sm);
}

.pus-body-text--dark {
    color: var(--pus-color-body-dark);
}

.pus-label {
    font-family: var(--pus-font-body);
    font-weight: var(--pus-fw-semibold);
    font-size: var(--pus-fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--pus-color-accent);
}


/* --------------------------------------------------------------------------
   Button Styles
   -------------------------------------------------------------------------- */

.pus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pus-space-sm);
    font-family: var(--pus-font-body);
    font-weight: var(--pus-fw-semibold);
    font-size: var(--pus-fs-body);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 32px;
    border-radius: var(--pus-radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--pus-transition-smooth);
    white-space: nowrap;
    text-decoration: none;
}

.pus-btn-primary {
    background-color: var(--pus-color-accent);
    color: var(--pus-color-white);
    border-color: var(--pus-color-accent);
}

.pus-btn-primary:hover {
    background-color: var(--pus-color-accent-hover);
    border-color: var(--pus-color-accent-hover);
    box-shadow: var(--pus-shadow-glow);
    transform: translateY(-2px);
}

.pus-btn-primary:active {
    transform: translateY(0);
}

.pus-btn-secondary {
    background-color: transparent;
    color: var(--pus-color-white);
    border-color: var(--pus-color-white);
}

.pus-btn-secondary:hover {
    background-color: var(--pus-color-white);
    color: var(--pus-color-primary-bg);
}

.pus-btn-outline {
    background-color: transparent;
    color: var(--pus-color-accent);
    border-color: var(--pus-color-accent);
}

.pus-btn-outline:hover {
    background-color: var(--pus-color-accent);
    color: var(--pus-color-white);
}

.pus-btn-white {
    background-color: var(--pus-color-white);
    color: var(--pus-color-primary-bg);
    border-color: var(--pus-color-white);
}

.pus-btn-white:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.pus-btn--lg {
    padding: 18px 42px;
    font-size: var(--pus-fs-body-lg);
}

.pus-btn--sm {
    padding: 10px 24px;
    font-size: var(--pus-fs-body-sm);
}

/* Arrow circle icon for CTA buttons */
.pus-btn__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--pus-radius-circle);
    background-color: rgba(255, 255, 255, 0.2);
    transition: all var(--pus-transition-smooth);
    flex-shrink: 0;
}

.pus-btn:hover .pus-btn__arrow {
    background-color: rgba(255, 255, 255, 0.35);
    transform: translateX(4px);
}

.pus-btn__arrow svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* --------------------------------------------------------------------------
   Common Card Styles
   -------------------------------------------------------------------------- */

.pus-card {
    background-color: var(--pus-color-card-bg);
    border-radius: var(--pus-radius-lg);
    padding: var(--pus-space-2xl);
    border: 1px solid var(--pus-color-border);
    transition: all var(--pus-transition-smooth);
    overflow: hidden;
}

.pus-card:hover {
    border-color: var(--pus-color-border-light);
    transform: translateY(-4px);
    box-shadow: var(--pus-shadow-lg);
}

.pus-card--dark {
    background-color: var(--pus-color-primary-bg);
}

.pus-card--accent {
    background-color: var(--pus-color-accent);
    border-color: var(--pus-color-accent);
}

.pus-card--no-hover:hover {
    transform: none;
    box-shadow: none;
}

.pus-card__image {
    border-radius: var(--pus-radius-md);
    overflow: hidden;
    margin-bottom: var(--pus-space-lg);
}

.pus-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--pus-transition-slow);
}

.pus-card:hover .pus-card__image img {
    transform: scale(1.05);
}

.pus-card__title {
    font-family: var(--pus-font-heading);
    font-weight: var(--pus-fw-bold);
    font-size: var(--pus-fs-h4);
    text-transform: uppercase;
    color: var(--pus-color-white);
    margin-bottom: var(--pus-space-sm);
}

.pus-card__text {
    font-family: var(--pus-font-body);
    font-size: var(--pus-fs-body);
    line-height: 1.7;
    color: var(--pus-color-light-text);
}


/* --------------------------------------------------------------------------
   Gradient Overlays for Hero Sections
   -------------------------------------------------------------------------- */

.pus-overlay {
    position: relative;
}

.pus-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.pus-overlay > * {
    position: relative;
    z-index: 2;
}

.pus-overlay--gradient::before {
    background: linear-gradient(
        180deg,
        rgba(8, 0, 52, 0.3) 0%,
        rgba(8, 0, 52, 0.6) 50%,
        rgba(8, 0, 52, 0.95) 100%
    );
}

.pus-overlay--gradient-left::before {
    background: linear-gradient(
        90deg,
        rgba(8, 0, 52, 0.9) 0%,
        rgba(8, 0, 52, 0.5) 50%,
        rgba(8, 0, 52, 0.1) 100%
    );
}

.pus-overlay--gradient-right::before {
    background: linear-gradient(
        270deg,
        rgba(8, 0, 52, 0.9) 0%,
        rgba(8, 0, 52, 0.5) 50%,
        rgba(8, 0, 52, 0.1) 100%
    );
}

.pus-overlay--dark::before {
    background: var(--pus-color-overlay);
}

.pus-overlay--heavy::before {
    background: var(--pus-color-overlay-heavy);
}


/* --------------------------------------------------------------------------
   Grid Utilities
   -------------------------------------------------------------------------- */

.pus-grid {
    display: grid;
    gap: var(--pus-space-2xl);
}

.pus-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.pus-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.pus-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.pus-grid--6 {
    grid-template-columns: repeat(6, 1fr);
}

.pus-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.pus-flex {
    display: flex;
}

.pus-flex--center {
    align-items: center;
    justify-content: center;
}

.pus-flex--between {
    align-items: center;
    justify-content: space-between;
}

.pus-flex--column {
    flex-direction: column;
}

.pus-flex--wrap {
    flex-wrap: wrap;
}

.pus-flex--gap-sm {
    gap: var(--pus-space-sm);
}

.pus-flex--gap-md {
    gap: var(--pus-space-md);
}

.pus-flex--gap-lg {
    gap: var(--pus-space-lg);
}

.pus-flex--gap-xl {
    gap: var(--pus-space-xl);
}

.pus-flex--gap-2xl {
    gap: var(--pus-space-2xl);
}


/* --------------------------------------------------------------------------
   Miscellaneous Utilities
   -------------------------------------------------------------------------- */

.pus-text-center {
    text-align: center;
}

.pus-text-left {
    text-align: left;
}

.pus-text-right {
    text-align: right;
}

.pus-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.pus-mb-sm { margin-bottom: var(--pus-space-sm); }
.pus-mb-md { margin-bottom: var(--pus-space-md); }
.pus-mb-lg { margin-bottom: var(--pus-space-lg); }
.pus-mb-xl { margin-bottom: var(--pus-space-xl); }
.pus-mb-2xl { margin-bottom: var(--pus-space-2xl); }
.pus-mb-3xl { margin-bottom: var(--pus-space-3xl); }

.pus-mt-sm { margin-top: var(--pus-space-sm); }
.pus-mt-md { margin-top: var(--pus-space-md); }
.pus-mt-lg { margin-top: var(--pus-space-lg); }
.pus-mt-xl { margin-top: var(--pus-space-xl); }
.pus-mt-2xl { margin-top: var(--pus-space-2xl); }

.pus-hidden {
    display: none !important;
}

.pus-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.pus-divider {
    width: 100%;
    height: 1px;
    background-color: var(--pus-color-border);
    border: none;
    margin: var(--pus-space-2xl) 0;
}


/* --------------------------------------------------------------------------
   Responsive Breakpoints
   -------------------------------------------------------------------------- */

/* Large Desktop (max-width: 1200px) */
@media (max-width: 1200px) {
    .pus-grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .pus-grid--6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet Landscape (max-width: 992px) */
@media (max-width: 992px) {
    .pus-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pus-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pus-grid--6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pus-section {
        padding-top: clamp(40px, 6vw, 80px);
        padding-bottom: clamp(40px, 6vw, 80px);
    }
}

/* Tablet Portrait (max-width: 768px) */
@media (max-width: 768px) {
    .pus-grid--2 {
        grid-template-columns: 1fr;
    }

    .pus-grid--3 {
        grid-template-columns: 1fr;
    }

    .pus-grid--4 {
        grid-template-columns: 1fr;
    }

    .pus-grid--6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pus-btn {
        padding: 12px 28px;
    }

    .pus-btn--lg {
        padding: 14px 32px;
    }

    .pus-card {
        padding: var(--pus-space-xl);
    }

    .pus-text-center-mobile {
        text-align: center;
    }
}

/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
    .pus-grid--6 {
        grid-template-columns: 1fr;
    }

    .pus-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }

    .pus-card {
        padding: var(--pus-space-lg);
    }

    .pus-section {
        padding-top: clamp(32px, 5vw, 60px);
        padding-bottom: clamp(32px, 5vw, 60px);
    }
}

/* Site-wide: replace inline straight-arrow SVGs in CTA circles with the diagonal cta-arrow.svg
   Skip header CTA (.pus-gh__cta-arrow) — it already uses an <img> with the correct arrow. */
[class$="__cta-arrow"]:not(.pus-gh__cta-arrow) > svg { display: none !important; }
[class$="__cta-arrow"]:not(.pus-gh__cta-arrow):not(:has(> img)) {
    background-image: url('../images/hero/cta-arrow.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 50% 50% !important;
}

/* 1101–1440: vertically center hero text in all hero sections */
@media (min-width: 1101px) and (max-width: 1440px) {
    .pus-h__wrap, .pus-ah__inner, .pus-ch__inner, .pus-rsh__inner,
    .pus-evh__inner, .pus-eh__inner, .pus-sh__inner {
        align-items: center !important;
    }
    .pus-h__content, .pus-ah__text, .pus-ch__text, .pus-rsh__text,
    .pus-evh__text, .pus-eh__text, .pus-sh__text {
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Mobile only: tighter button padding (40px left → 10px) */
@media (max-width: 1100px) {
    .pus-btn,
    [class*="__cta"]:not([class*="__cta-"]):not([class*="__cta_"]),
    [class*="__submit"]:not([class*="__submit-"]):not([class*="__submit_"]) {
        padding: 10px 10px 10px 10px !important;
        gap: 20px !important;
    }
}