/* Custom Fonts for Header & Footer */


/* Custom Fonts */
/* ===== CUSTOM FONTS ===== */

/* 88Sans Clean - Regular */
@font-face {
    font-family: '88Sans';
    src: url('fonts/88Sans-Clean.woff2') format('woff2'),
        url('fonts/88Sans-Clean.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 88Sans Grit - Regular */
@font-face {
    font-family: '88Sans Grit';
    src: url('fonts/88Sans-Grit.woff2') format('woff2'),
        url('fonts/88Sans-Grit.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* PP Formula Condensed Bold */
@font-face {
    font-family: 'PP Formula';
    src: url('fonts/PPFormula-CondensedBold.woff2') format('woff2'),
        url('fonts/PPFormula-CondensedBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* PP Formula Extended Bold */
@font-face {
    font-family: 'PP Formula Extended';
    src: url('fonts/PPFormula_ExtBold_ALT.woff2') format('woff2'),
        url('fonts/PPFormula_ExtBold_ALT.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* PP Formula Extended Regular */
@font-face {
    font-family: 'PP Formula Extended';
    src: url('fonts/PPFormula_ExtReg_ALT.woff2') format('woff2'),
        url('fonts/PPFormula_ExtReg_ALT.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* PP Formula Extended Bold Italic */
@font-face {
    font-family: 'PP Formula Extended';
    src: url('fonts/PPFormula_ExtBoldItalic_ALT.woff2') format('woff2'),
        url('fonts/PPFormula_ExtBoldItalic_ALT.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* PP Formula Extended Regular Italic */
@font-face {
    font-family: 'PP Formula Extended';
    src: url('fonts/PPFormula_ExtRegItalic_ALT.woff2') format('woff2'),
        url('fonts/PPFormula_ExtRegItalic_ALT.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ================= 2026-09-15 font loading (FOUT) ================= */

/* Every brand @font-face uses font-display: swap, and 37 declarations named a brand face
   with NO fallback - so until the webfont arrived the browser used its DEFAULT family,
   which is Times. That is the serif flash being reported.

   These fallbacks are local Arial rescaled to the same text width as each brand face
   (ratios measured live against Arial at 200px), so the pre-swap paint is sans-serif AND
   close to the final width, which keeps the swap from reflowing. Browsers without
   size-adjust simply get Arial, still far better than Times. */
@font-face {
    font-family: "88Sans Grit Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
    size-adjust: 69.5%;
}

@font-face {
    font-family: "88Sans Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
    size-adjust: 65.5%;
}

@font-face {
    font-family: "PP Formula Ext Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
    size-adjust: 129.2%;
}

@font-face {
    font-family: "PP Formula Cond Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
    size-adjust: 66.2%;
}




/* Scoped styles for template-home page */

/* Header */
header#header.header-kh .u-header__section {
    background-color: transparent !important;
}

header#header.header-kh.legacy-page-templates .u-header__section {
    background-color: #040E1F !important;
}

header#header.header-kh .u-header__section .navbar-nav a {
    color: #FFF !important;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 27.2px;
    /* 170% */
}

header#header.header-kh .u-header__section .navbar-nav .u-header__sub-menu a {
    color: #5a5757 !important;
    font-size: 10px;
}

header#header.header-kh .u-header__section .container {
    max-width: 1240px;
}


header#header.header-kh .header-top {
    z-index: 10;
    position: relative;
}

header#header.header-kh .header-top .container {
    max-width: 1220px;
}

header#header.header-kh .header-top #homeMegaMenu.nav-link.newlink {
    color: #FFF;
    font-family: "PP Formula", "PP Formula Cond Fallback", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 27.2px;
    /* 113.333% */
}

header#header.header-kh .header-top .btn-blue-100 {
    color: #FFF;
    text-align: center;
    font-family: 'SequelSans-Regular', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 162;
    line-height: 24px;
    /* 150% */
    display: flex;
    gap: 10px;
}

/* ---- 2026-09-10: legacy pages ---------------------------------------------
   The new header is sitewide, but legacy pages keep a WHITE header band, so the
   white nav links were invisible. Restore the live production colour #5A5757.
   Once scrolled the bar turns #040E1F, so white is correct again there.
   The new brand typeface stays on the nav - only the colour changes. */
/* Brief: fonts updated site-wide. Apply the brand faces to legacy pages too -
   body copy in PP Formula Extended, display headings in 88Sans. */
body.body-kh-legacy {
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
}

body.body-kh-legacy h1,
body.body-kh-legacy h2,
body.body-kh-legacy h3,
body.body-kh-legacy h4,
body.body-kh-legacy h5,
body.body-kh-legacy h6 {
    font-family: "88Sans", "88Sans Fallback", sans-serif;
}

header#header.header-kh.u-scrolled .u-header__section {
    background-color: #040E1F !important;
}

/* Reset and Base Styles */
.template-home-wrap * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.template-home-wrap {
    font-family: "88Sans", "88Sans Fallback", sans-serif;
    line-height: 1.6;
    color: #333;
    /* 2026-09-16: the -170px !important pull-up lived here and overrode the inline
       margin-top the theme sets on <main> to compensate for the sticky header (0 at the
       top, 170px once fixed). That is what made the page jump ~170px on every sticky
       transition. The pull-up now sits on .hero inside a flow-root, below. */
}

/* Removed 2026-09-10: this rule hit EVERY page (header.php adds .body-kh to <body>),
   shifting ~23 legacy templates 170px under the header. Redundant too -
   .template-home-wrap above already sets the same margin-top on the new pages. */

.template-home-wrap .kh-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 20px;
}



.template-home-wrap a {
    text-decoration: none;
    color: inherit;
}

.template-home-wrap ul {
    list-style: none;
}

/* Hero Section */
.template-home-wrap .hero {
    position: relative;
    height: 87vh;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.template-home-wrap .hero-video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    overflow: hidden;
}

.template-home-wrap #hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    /* 16:9 aspect ratio */
    min-height: 100vh;
    min-width: 177.77vh;
    /* 16:9 aspect ratio */
    transform: translate(-50%, -50%);
}

.template-home-wrap .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.template-home-wrap .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.template-home-wrap .hero-title {
    margin-bottom: 40px;
    max-width: 900px;
}

.template-home-wrap .hero-text-image {
    width: 100%;
    height: 289px;
    object-fit: contain;
    filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.8));
}

.template-home-wrap .play-button {
    background-color: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s;
    text-transform: uppercase;
    border: none;

    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 58.056px;
    /* 263.889% */
    letter-spacing: 4.4px;
    gap: 24px;
}


.template-home-wrap .play-icon-img {
    width: 52px;
    height: 52px;
}

/* Game Day Section */
.template-home-wrap .game-day {
    padding: 0px;
    margin-top: -126px;
    position: relative;
    z-index: 10;
}

.template-home-wrap .section-title {
    text-align: center;
    color: white;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 22px;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.template-home-wrap .cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Figma 12074:3486 - row 1135 wide, two 555 cards, 25px gap */
    gap: 25px;
    max-width: 1135px;
    margin: 0 auto;
}

.template-home-wrap .kh-card {
    background-color: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
    display: flex;
    flex-direction: row;
    border-radius: 14.985px;
    border: 1.249px solid #FFF;
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(4.869999885559082px);
}

.template-home-wrap .kh-card-image {
    /* Figma 12074:3488 - 151px column, full card height. height:auto + stretch so the
       image always fills the card even if the text makes it taller. */
    width: 151px;
    min-width: 151px;
    overflow: hidden;
    height: auto;
    align-self: stretch;
}

.template-home-wrap .kh-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-home-wrap .kh-card-content {
    /* Figma 12074:3489 - padding 25/37, gap 12 */
    padding: 25px 37px;
    text-align: left;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.template-home-wrap .kh-card-content h3 {
    color: #FFF;
    font-family: "88Sans", "88Sans Fallback", sans-serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    /* Figma: 45px type in a 32px box */
    line-height: 0.71;
    /* 40.5px */
    letter-spacing: 2.25px;
    text-transform: uppercase;
}

.template-home-wrap .kh-card-content p {
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 180%;
    /* 25.2px */
}

.template-home-wrap .kh-btn-explore {
    border-radius: 62.436px;
    background: #D22730;
    display: flex;
    padding: 12.487px 26px;
    justify-content: center;
    align-items: center;
    gap: 12.487px;
    color: #FFF;
    text-align: center;

    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 10px;
    /* Figma: 35px button = 10px text + 12/12 padding */
    /* 10.8px */
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.template-home-wrap .kh-btn-explore:hover {
    background-color: #b81519;
}

.template-home-wrap .kh-btn-explore svg {
    transform: rotate(90deg);
    width: 12px;
    height: 16px;
    margin-top: -3px;
}

/* Countdown Section */
.template-home-wrap .countdown {
    background-color: #141821;
    background-image: url('section-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    text-align: center;
    min-height: 386px;
    align-items: center;
    display: flex;
    margin-top: -105px;
    padding-top: 100px;
}

.template-home-wrap .countdown-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.template-home-wrap .countdown-text-left,
.template-home-wrap .countdown-text-right {

    color: #FFF;
    font-family: "88Sans", "88Sans Fallback", sans-serif;
    font-size: 61px;
    font-style: normal;
    font-weight: 400;
    line-height: 81%;
    /* 49.41px */
    text-transform: uppercase;
}

.template-home-wrap .countdown-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
}

/* 2026-09-10: live countdown figure. Mirrors the 365.svg treatment. */
.template-home-wrap .countdown-days {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Figma 12074:3557 "Timer": 211x155, r=8.12, stroke 2.03, padding 18/30 */
    border: 2px solid #FFF;
    border-radius: 8px;
    padding: 18px 30px;
    min-width: 211px;
    min-height: 155px;
    color: #FFF;
}

.template-home-wrap .countdown-days .cd-num {
    font-family: "88Sans Grit", "88Sans Grit Fallback", sans-serif;
    font-size: 120px;
    /* Figma: the "365" text box is 150x84 on 120px type */
    line-height: 107px;
    letter-spacing: 0;
    height: 84px;
    color: #FFF;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.template-home-wrap .countdown-days small {
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 5.4px;
    line-height: 1.39;
    margin-top: 16px;
}

.template-home-wrap .countdown-image {
    width: 180px;
    height: auto;
    display: block;
}

/* Social Follow */
.template-home-wrap .social-follow {
    background-color: #0032A0;
    color: white;
    padding: 50px 0;
}

.template-home-wrap .social-follow .kh-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
}

.template-home-wrap .follow-title {
    color: #FFF;
    font-family: "88Sans", "88Sans Fallback", sans-serif;
    font-size: 56.06px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.template-home-wrap .follow-text {
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 180%;
    /* 21.6px */
}

.template-home-wrap .social-icons {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.template-home-wrap .social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, opacity 0.3s;
}

.template-home-wrap .social-icons a img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.template-home-wrap .social-icons a i {
    font-size: 30px;
}

.template-home-wrap .social-icons a:hover {
    transform: scale(1.1);
    opacity: 0.8;
    color: #fff;
}

/* Partners */
.partners {
    background-color: #f5f5f5;
    padding: 30px 0;
}

.partners-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
}

.partner-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    /* 2026-09-10: was 0 40px, which pushed the partners row 59px past the viewport
       and put a horizontal scrollbar on EVERY page (this footer is sitewide). */
    padding: 0 24px;
    min-width: 0;
    border-right: 1px solid #00144C;
}

.partner-category:last-child {
    border-right: none;
}

.partner-category:first-child {
    border-right: none;
}

.category-title {
    color: #000;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 6px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    align-self: flex-start;
}

.category-logos {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}

.category-logos a {
    display: inline-block;
    flex-shrink: 0;
}

.category-logos img {
    height: 60px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s, transform 0.3s;
    display: block;
}

.category-logos a:hover img {
    opacity: 1;
    transform: scale(1.05);
}

/* 2026-09-10: keep the partners row inside the viewport on narrower screens */
@media (max-width: 1280px) {
    .partners-grid {
        flex-wrap: wrap;
        gap: 16px 0;
    }

    .partner-category {
        padding: 0 16px;
    }

    .category-logos {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Newsletter */
.newsletter {
    background-color: #040E1F;
    padding: 70px 0;
}

.newsletter-content {
    max-width: 1140px;
    margin: 0 auto;
}

.newsletter-content h2 {
    color: white;
    font-family: "PP Formula", "PP Formula Cond Fallback", sans-serif;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.newsletter-content p {
    color: #ccc;
    font-family: "88Sans", "88Sans Fallback", sans-serif;
    font-size: 13px;
    margin-bottom: 30px;
    line-height: 1.7;
}

.newsletter-form {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr auto;
    gap: 15px;
    margin-bottom: 20px;
}

.kh-form-input {
    padding: 15px;
    border: 1px solid #444;
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 4px;
    font-size: 14px;
}

.kh-form-input::placeholder {
    color: #888;
}

.kh-btn-subscribe {
    background-color: #E31B23;
    color: white;
    font-family: "PP Formula", "PP Formula Cond Fallback", sans-serif;
    border: none;
    padding: 15px 32px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s;
    text-transform: uppercase;
}

.kh-btn-subscribe:hover {
    background-color: #b81519;
}

.kh-form-consent {
    color: #999;
    font-size: 12px;
}

.kh-form-consent label {
    display: flex;
    gap: 10px;
    align-items: start;
}

.kh-form-consent input[type="checkbox"] {
    margin-top: 3px;
}

.kh-form-consent a {
    color: #0066B3;
    text-decoration: underline;
}

/* ===== FOOTER SECTION ===== */

footer .kh-f-logo-wrap {
    align-self: flex-end;
}



.kh-footer {
    background-color: #0f1419;
    color: white;
    padding: 60px 0 30px;
}

.kh-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.kh-footer-logo {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
}

.kh-footer-contact {
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
}

.kh-footer-contact p {
    margin-bottom: 8px;
}

.kh-footer-contact a {
    color: #999;
    transition: color 0.3s;
}

.kh-footer-contact a:hover {
    color: white;
}

.kh-footer-copyright {
    color: #666;
    font-size: 13px;
    margin-bottom: 10px;
}

.kh-footer-legal {
    font-size: 13px;
}

.kh-footer-legal a {
    color: #999;
    transition: color 0.3s;
}

.kh-footer-legal a:hover {
    color: white;
}

.kh-footer-col h4 {
    color: white;
    font-family: "PP Formula", "PP Formula Cond Fallback", sans-serif;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.kh-footer-col ul li {
    margin-bottom: 12px;
}

.kh-footer-col ul li a {
    color: #999;
    font-size: 14px;
    transition: color 0.3s;
}

.kh-footer-col ul li a:hover {
    color: white;
}

.kh-our-exclusives-form .gform_heading {
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
}

.kh-our-exclusives-form .gform_heading .gform_title {
    width: 260px;
    color: #FFF;

    font-family: "88Sans", "88Sans Fallback", sans-serif;
    font-size: 45.057px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.kh-our-exclusives-form .gform_heading .gform_description {
    width: calc(100% - 260px - 23px);
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 21.6px */
    max-width: 502px;
}

.kh-our-exclusives-form .gform-body input {
    border-radius: 3.289px;
    border: 0.822px solid #E3E6F0;
    background: transparent;
    color: #fff !important;
    color: #757575;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    height: 37px;
}

.kh-our-exclusives-form .gform-body .name_first {
    padding-right: 12px !important;
}

.kh-our-exclusives-form .gform_button {
    display: none !important;
}

.kh-our-exclusives-form .oe-form-btn {
    display: flex;
    height: 37px;
    padding: 13.156px 19.733px;
    justify-content: center;
    align-items: center;
    gap: 8.222px;
    border-radius: 6.578px;
    background: #D22730;
    color: #E5E5E5;
    text-align: center;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    cursor: pointer;
}

.kh-our-exclusives-form .oe-consent input {
    width: 12px;
    height: 12px;
}

.kh-our-exclusives-form .oe-consent .gform-field-label {
    color: #CCC;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.kh-our-exclusives-form .oe-consent .gform-field-label a {
    color: #1C6BE1;
    text-decoration: none;
}

.kh-our-exclusives-form .oe-consent .ginput_container {
    display: flex;
    gap: 10px;
}

.kh-our-exclusives-form .oe-consent .gfield_required {
    display: none !important;
}

.kh-footer-wrap>.container {
    max-width: 1260px;
    padding: 0px 20px;
}

.kh-footer-wrap .kh-f-logo {
    width: 75px;
}

.kh-footer-wrap .cpt {
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 162;
    line-height: 20px;
}

#chatbot-chat {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .template-home-wrap .hero-title {
        max-width: 700px;
    }

    .template-home-wrap .cards-wrapper {
        grid-template-columns: 1fr;
    }

    .template-home-wrap .countdown-content {
        flex-direction: column;
        gap: 30px;
    }

    .template-home-wrap .newsletter-content {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .template-home-wrap .hero {
        height: 400px;
    }

    .template-home-wrap .hero-title {
        max-width: 90%;
    }

    .template-home-wrap .social-follow .kh-container {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .template-home-wrap .follow-title {
        font-size: 28px;
    }

    .template-home-wrap .social-icons {
        justify-content: center;
    }

    .template-home-wrap .newsletter-form {
        grid-template-columns: 1fr;
    }

    .template-home-wrap .countdown-text-left,
    .template-home-wrap .countdown-text-right {
        font-size: 24px;
    }

    .template-home-wrap .countdown-image {
        width: 120px;
    }
}

/* Video Modal Popup */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, color 0.2s;
}

.video-modal-close:hover {
    transform: scale(1.1);
    color: #E31B23;
}

.video-modal-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.video-modal-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .video-modal-content {
        width: 95%;
    }

    .video-modal-close {
        top: -35px;
        font-size: 32px;
    }
}

/* Membership */
.template-home-wrap .hero-title h1 {
    color: #FFF;
    text-align: center;
    font-family: "88Sans Grit", "88Sans Grit Fallback", sans-serif;
    font-size: 227.626px;
    font-style: normal;
    font-weight: 400;
    line-height: 79%;
    /* 179.825px */
    text-transform: uppercase;
    margin-top: 100px;
}

.template-membership-wrap .m-already-member {
    padding: 32px 0px;
    width: 100%;
    background: #0032A0;
}

.template-membership-wrap .m-already-member .mam-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    max-width: 1260px;
    margin: 0px auto;
}

.template-membership-wrap .m-already-member .mam-wrap h2 {
    color: #FFF;
    font-family: "88Sans", "88Sans Fallback", sans-serif;
    font-size: 65px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.template-membership-wrap .m-already-member .mam-wrap p {
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 180%;
    /* 32.4px */
}

.template-membership-wrap .m-already-member .mam-wrap a {
    display: flex;
    padding: 17px 36px;
    justify-content: center;
    align-items: center;
    gap: 12.487px;
    border-radius: 8px;
    background: #D22730;
    color: #FFF;
    text-align: center;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 90%;
    /* 14.4px */
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.template-membership-wrap .kh-choose-membership {
    background-image: url('section-bg3.png');
    background-position: center;
    background-size: cover;
    padding: 92px 0px 0px;
}

.template-membership-wrap .kh-choose-membership .cm-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    max-width: 1260px;
    margin: 0px auto;
    gap: 80px;
}

.template-membership-wrap .kh-choose-membership .cm-wrap h3 {
    color: #FFF;

    font-family: "88Sans", "88Sans Fallback", sans-serif;
    font-size: 41px;
    font-style: normal;
    font-weight: 400;
    line-height: 90%;
    /* 36.9px */
    letter-spacing: 1.23px;
    text-transform: uppercase;
}

.template-membership-wrap .kh-choose-membership .cm-wrap h2 {
    color: #FFF;
    font-family: "88Sans Grit", "88Sans Grit Fallback", sans-serif;
    font-size: 88px;
    font-style: normal;
    font-weight: 400;
    line-height: 81%;
    /* 71.28px */
    text-transform: uppercase;
    margin-bottom: 18px;
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(1) {
    width: 310px;
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(1) p {
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(1) img {
    margin-bottom: 30px;
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2) {
    width: calc(100% - 310px - 80px);
    gap: 24px;
    display: flex;
    flex-wrap: wrap;
}


.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div {
    width: calc(50% - 12px);
    border-radius: 14.985px;
    border: 1.249px solid #FFF;
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(4.869999885559082px);
    overflow: hidden;
    transition: transform 0.3s;
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div:hover {
    transform: translateY(-10px);
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: center;
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div .cm-desc {
    padding: 24px;
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div .cm-desc p {
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 180%;
    /* 25.2px */
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div .cm-desc .selectfield {
    color: #FFF;
    text-align: center;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 90%;
    /* 10.8px */
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 62.436px;
    background: #D22730;
    padding: 12px 26px;
    border: none;
    margin-top: 12px;
    display: inline-block;
}


.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div .cm-desc .selectfield-link {
    background: transparent;
    border: none;
    color: #FFF;
    text-align: center;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 0;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 62.436px;
    background: #D22730;
    padding: 12px 26px;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div .cm-desc .selectfield-link svg {
    height: 16px;
    width: 12px;
}

.template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div .cm-desc .selectfield-link svg path {
    fill: #fff;
}


.cm-countdown {
    display: flex;
    gap: 38px;
    color: #FFF;
    font-family: "88Sans", "88Sans Fallback", sans-serif;
    font-size: 110.049px;
    font-style: normal;
    font-weight: 400;
    line-height: 81%;
    text-transform: uppercase;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-bottom: 80px;
}

.cm-countdown img {
    height: 151px;
}

.cm-countdown .cm-c-wrap {
    display: flex;
    gap: 12px;
}

.cm-countdown .cm-c-wrap .cm-c-comma {
    align-self: flex-end;
}

.kh-choose-membership .cm-events {
    padding: 50px 0px;
    background-color: #ECECEC;
    margin-top: 80px;
    position: relative;
}

.kh-choose-membership .cm-events .cm-e-arrow {
    width: 39px;
    height: 39px;
    transform: rotate(45deg);
    position: absolute;
    top: -20px;
    left: 50%;
    background: #ECECEC;
}

.kh-choose-membership .cm-events h2 {
    color: #000;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 81%;
    /* 11.34px */
    letter-spacing: 2.8px;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-align: center;
}

.kh-choose-membership .cm-events .cm-e-wrap {
    display: flex;
    gap: 24px;
    max-width: 1260px;
    padding: 0px 20px;
    margin: auto;
}

.kh-choose-membership .cm-events .cm-e-wrap>div {
    width: calc(50% - 12px);
    background-color: #001469;
    border-radius: 18px;
    padding: 42px;
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 18px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-position: center;
    background-size: cover;
}

/* 2026-09-11: odd/even so the background alternates across EVERY card in a row,
   not just the first two. */
.kh-choose-membership .cm-events .cm-e-wrap>div:nth-child(odd) {
    background-image: url('card-bg.webp');
}

.kh-choose-membership .cm-events .cm-e-wrap>div:nth-child(even) {
    background-image: url('card-bg-2.webp');
}

.kh-choose-membership .cm-events .cm-e-wrap>div p {
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-subtitle {
    /* 2026-09-10: eyebrow sat hard against the product title */
    display: block;
    margin-bottom: 14px;
    color: #FFF;
    text-align: center;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 90%;
    /* 10.8px */
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.kh-choose-membership .cm-events .cm-e-wrap h3 {
    color: #FFF;
    width: 100%;
    font-family: "88Sans Grit", "88Sans Grit Fallback", sans-serif;
    font-size: 52px;
    font-style: normal;
    font-weight: 400;
    line-height: 80%;
    /* 41.6px */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kh-choose-membership .cm-events .cm-e-wrap h3 div {
    display: flex;
    flex-direction: column;
}

.kh-choose-membership .cm-events .cm-e-wrap h3 div>span {
    color: #FFF;
    text-align: center;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: right;
}

.kh-choose-membership .cm-events .cm-e-wrap h3 div>b {
    color: #FFF;
    text-align: center;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-divider {
    width: 100%;
    overflow: hidden;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-desc {
    margin-top: 22px;
    margin-bottom: 22px;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-list {
    display: flex;
    padding: 26px 34px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(5px);
    padding: 26px 34px;
    width: 100%;
    margin-top: 22px;
    margin-bottom: 32px;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-list h4 {
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-list ul {
    margin-top: 12px;
    width: 100%;
    gap: 12px;
    display: flex;
    flex-direction: column;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-list ul li {
    color: #FFF;
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-list ul li>span {
    max-width: 240px;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-secure {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

/* Added 2026-09-10: "Flexible payment options available" line under each CTA (copy doc) */
.kh-choose-membership .cm-events .cm-e-wrap .cm-e-flexible {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.75;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-pay {
    display: flex;
    padding: 12px 24px 9px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: #D22730;
    margin-top: auto;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-pay:hover {
    color: #D22730;
    background: #fff;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-pay.cm-e-blue {
    background: #0032A0;
}

.kh-choose-membership .cm-events .cm-e-wrap .cm-e-pay.cm-e-blue:hover {
    background: #fff;
     color: #0032A0;
}

/* ==========================================================================
   MOBILE / RESPONSIVE  —  added 2026-09-10
   Built against the locked mobile frames:
     Homepage        V7 Mobile            12074:3632  (450w)
     Membership hub  V7 Mobile            12084:5628  (450w)
     Belong All Season                    12239:5229  (450w)
   The design frames are 450px wide, so 767px is the phone breakpoint and
   1024px stays the tablet step.
   ========================================================================== */

/* The other pathway tile, rendered after the cards. Desktop never shows it. */
.cm-tile-mobile {
    display: none;
}

@media (max-width: 767px) {

    /* ---- header / top bar : count on its own line, buttons centred below ---- */
    /* count on its own line, then the buttons stay in ONE row (per the mobile frame) */
    header#header.header-kh .header-top .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        text-align: center;
    }

    header#header.header-kh .header-top .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 6px;
        width: 100%;
    }

    header#header.header-kh .header-top .nav-item {
        flex: 0 1 auto;
    }

    header#header.header-kh .header-top #homeMegaMenu.nav-link.newlink {
        font-size: 18px;
        text-align: center;
    }

    header#header.header-kh .header-top .btn-blue-100 {
        font-size: 13px;
        padding: 8px 12px;
    }

    header#header.header-kh .u-header__section {
        background-color: #040E1F !important;
        border: none;
    }

    /* ---- hero ---- */
    /* the -170px desktop pull-up puts the hero under the logo on a phone */
    /* 2026-09-11 item 1: the -60px pull-up left a 29px band (y60-89) where only the
       white body painted, between the red stripe and the hero. Sit the hero directly
       below the header instead, as the V7 Mobile frame shows. */
    .template-home-wrap,
    .body-kh-new main {
        margin-top: 0 !important;
    }

    .template-home-wrap .hero {
        height: 62vh;
        min-height: 430px;
        padding-top: 70px;
    }

    .template-home-wrap .hero-title {
        margin-bottom: 24px;
        max-width: 92%;
    }

    .template-home-wrap .hero-text-image {
        width: auto;
        max-width: 86%;
        height: auto;
        max-height: 130px;
    }

    .template-home-wrap .hero-title h1 {
        font-size: 84px;
        margin-top: 40px;
    }

    .template-home-wrap .play-button {
        font-size: 16px;
        gap: 14px;
        letter-spacing: 2.5px;
    }

    .template-home-wrap .play-icon-img {
        width: 40px;
        height: 40px;
    }

    /* ---- game day cards : stacked, image left, circular arrow CTA ---- */
    .template-home-wrap .game-day {
        margin-top: -70px;
    }

    .template-home-wrap .cards-wrapper {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .template-home-wrap .kh-btn-explore svg {
        margin-top: 1px;
        margin-left: -17px;
    }

    .template-home-wrap .kh-card-image {
        width: 96px;
        min-width: 96px;
        height: auto;
    }

    .template-home-wrap .kh-card-content {
        padding: 14px 16px;
        justify-content: center;
        gap: 4px;
        flex: 1;
    }

    .template-home-wrap .kh-card-content h3 {
        font-size: 28px;
    }

    .template-home-wrap .kh-card-content p {
        font-size: 12px;
        line-height: 150%;
    }

    /* the mobile frame replaces the text pill with a round red arrow */
    .template-home-wrap .kh-btn-explore {
        font-size: 0;
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border-radius: 50%;
        align-self: flex-end;
        margin-top: 6px;
    }

    .template-home-wrap .kh-btn-explore::after {
        /* content: "\2192"; */
        font-size: 18px;
        line-height: 1;
        color: #FFF;
    }

    /* ---- countdown ---- */
    /* 2026-09-11 client: the -105px desktop pull-up made the countdown overlap the
       Membership/Hospitality tiles on phones. */
    .template-home-wrap .countdown {
        min-height: 0;
        margin-top: 0;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .template-home-wrap .countdown-content {
        flex-direction: column;
        gap: 18px;
    }

    .template-home-wrap .countdown-text-left,
    .template-home-wrap .countdown-text-right {
        font-size: 40px;
        text-align: center;
    }

    .template-home-wrap .countdown-number {
        width: 140px;
    }

    .template-home-wrap .countdown-image {
        width: 140px;
    }

    .template-home-wrap .countdown-days {
        min-width: 140px;
        padding: 8px 16px 5px;
    }

    .template-home-wrap .countdown-days .cd-num {
        font-size: 64px;
    }

    /* ---- follow us ---- */
    .template-home-wrap .social-follow {
        padding: 34px 0;
    }

    .template-home-wrap .follow-title {
        font-size: 42px;
        text-align: center;
    }

    .template-home-wrap .follow-text {
        text-align: center;
    }

    /* ---- partners ---- */
    .partners {
        padding: 22px 0;
    }

    .partners-grid {
        flex-wrap: wrap;
        gap: 14px 0;
    }

    .partner-category {
        padding: 0 12px;
        border-right: none;
    }

    .category-logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    .category-logos img {
        height: 40px;
        max-width: 74px;
    }

    .category-title {
        align-self: center;
        font-size: 7px;
    }

    /* ---- footer newsletter ---- */
    .kh-our-exclusives-form .gform_heading {
        gap: 10px;
    }

    .kh-our-exclusives-form .gform_heading .gform_title {
        width: 100%;
        font-size: 36px;
    }

    .kh-our-exclusives-form .gform_heading .gform_description {
        width: 100%;
    }

    .kh-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .kh-footer-wrap .kh-f-logo {
        width: 120px;
    }

    /* ---- membership : heading + tiles stack full width ---- */
    .template-membership-wrap .kh-choose-membership {
        padding: 48px 0 0;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap {
        gap: 28px;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(1) {
        width: 100%;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2) {
        width: 100%;
        gap: 16px;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div {
        width: 100%;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap h2 {
        font-size: 54px;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap h3 {
        font-size: 28px;
    }

    /* tile becomes a short image-left row, matching the mobile frame */
    .template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div {
        display: flex;
        align-items: stretch;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div img {
        width: 108px;
        min-width: 108px;
        height: auto;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div .cm-desc {
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
    }

    /* round arrow instead of the VIEW OPTIONS pill */
    .template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div .cm-desc .selectfield-link {
        font-size: 0;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        align-self: flex-end;
        justify-content: center;
        gap: 0;
        margin-top: 6px;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap>div:nth-child(2)>div .cm-desc .selectfield-link svg {
        height: 14px;
        width: 11px;
        margin-left: -3px;
    }

    .kh-choose-membership .cm-events .cm-e-accordion .cm-e-item .cm-ei-content {
        max-height: 100%;
        overflow: unset;
    }

    /* active tile above the cards, the other one below (see .cm-tile-mobile) */
    .cm-tiles.has-active .cm-tile:not(.is-active) {
        display: none;
    }

    .cm-tile-mobile {
        display: block;
        background: #0A1428;
        padding: 22px 20px 30px;
    }

    .cm-tile-mobile .cm-tile {
        display: flex;
        align-items: stretch;
        border-radius: 14.985px;
        border: 1.249px solid #FFF;
        background: rgba(0, 0, 0, 0.20);
        overflow: hidden;
    }

    .cm-tile-mobile .cm-tile img {
        width: 108px;
        min-width: 108px;
        height: auto;
        object-fit: cover;
    }

    .cm-tile-mobile .cm-tile .cm-desc {
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
    }

    .cm-tile-mobile .cm-tile .cm-desc h3 {
        color: #FFF;
        font-family: "88Sans", "88Sans Fallback", sans-serif;
        font-size: 28px;
        line-height: 90%;
        text-transform: uppercase;
    }

    .cm-tile-mobile .cm-tile .cm-desc p {
        color: #FFF;
        font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
        font-size: 12px;
    }

    .cm-tile-mobile .cm-tile .cm-desc .selectfield-link {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        background: #D22730;
        align-self: flex-end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        margin-top: 6px;
    }

    .cm-tile-mobile .cm-tile .cm-desc .selectfield-link svg {
        height: 14px;
        width: 11px;
    }

    .cm-tile-mobile .cm-tile .cm-desc .selectfield-link svg path {
        fill: #FFF;
    }

    /* ---- membership product cards : one per row ---- */
    .kh-choose-membership .cm-events {
        padding: 34px 0;
        margin-top: 50px;
    }

    .kh-choose-membership .cm-events .cm-e-wrap {
        flex-direction: column;
        gap: 16px;
    }

    .kh-choose-membership .cm-events .cm-e-wrap>div {
        width: 100%;
        padding: 24px;
    }

    .kh-choose-membership .cm-events h2 {
        font-size: 12px;
        letter-spacing: 2px;
        margin-bottom: 24px;
        padding: 0 20px;
    }

    .kh-choose-membership .cm-events .cm-e-divider svg {
        width: 100%;
    }

    /* ---- already a member ---- */
    .template-membership-wrap .m-already-member .mam-wrap {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }

    .template-membership-wrap .m-already-member .mam-wrap h2 {
        font-size: 44px;
    }

    .template-membership-wrap .m-already-member .mam-wrap p {
        font-size: 15px;
    }

    /* ---- member count block ---- */
    .cm-countdown {
        font-size: 52px;
        gap: 14px;
        padding-bottom: 44px;
        flex-wrap: wrap;
    }

    .cm-countdown img {
        height: 68px;
    }

    .cm-countdown .cm-c-wrap {
        gap: 5px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .template-home-wrap .hero-title h1 {
        font-size: 66px;
    }

    .template-home-wrap .countdown-text-left,
    .template-home-wrap .countdown-text-right {
        font-size: 32px;
    }

    .template-membership-wrap .kh-choose-membership .cm-wrap h2 {
        font-size: 44px;
    }

    .cm-countdown {
        font-size: 40px;
    }

    .cm-countdown img {
        height: 52px;
    }

    .kh-footer-grid {
        grid-template-columns: 1fr;
    }
}

/* 2026-09-10: "View Options" links to #game-day so the page opens with
   CHOOSE YOUR GAME DAY EXPERIENCE at the top. Offset clears the sticky header. */
.kh-choose-membership .cm-events[id="game-day"] {
    scroll-margin-top: 96px;
}

/* 2026-09-10: ~80px of breathing room under the last footer links, per the design. */
.kh-footer-wrap {
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    .kh-footer-wrap {
        padding-bottom: 56px;
    }

    .kh-choose-membership .cm-events[id="game-day"] {
        scroll-margin-top: 76px;
    }
}

/* 2026-09-11: the divider SVGs are hardcoded width="510" but the BYW cards are only
   ~391px wide, so they overflowed by up to 177px and ran across adjacent content.
   Make every card divider scale to its container. */
.kh-choose-membership .cm-events .cm-e-divider,
.kh-choose-membership .cm-events .cm-e-divider svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* 2026-09-11: EXPLORE OPTIONS must be auto width, not stretched to the column.
   The Membership card was rendering 323px against Hospitality at 221px. */
.template-home-wrap .kh-btn-explore {
    align-self: flex-start;
    width: auto;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .template-home-wrap .kh-btn-explore {
        align-self: flex-end;
    }
}

/* 2026-09-11: the product h3 is a flex row (title | FROM $x) with a 52px title.
   On a 353px card the title cannot shrink, so the price was pushed 12-16px past the
   card edge and clipped. Let it wrap and scale the title down on phones. */
@media (max-width: 767px) {
    .kh-choose-membership .cm-events .cm-e-wrap h3 {
        font-size: 34px;
        flex-wrap: wrap;
        gap: 4px 10px;
        min-width: 0;
    }

    .kh-choose-membership .cm-events .cm-e-wrap h3 div {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .kh-choose-membership .cm-events .cm-e-wrap h3 div>b {
        font-size: 22px;
    }
}

/* ---- 2026-09-11 client mobile fixes -------------------------------------- */
@media (max-width: 767px) {

    /* wrapped heading lines were crowding at the desktop line-height */
    .template-home-wrap .section-title {
        line-height: 1.4;
    }

    /* the vw/vh cover trick over-scales on narrow tall viewports, so the hero video
       looked zoomed and soft. Cover by WIDTH on phones instead. */
    /* 2026-09-11 CORRECTION: the previous rule made the iframe PORTRAIT (393x699),
       so YouTube letterboxed its 16:9 video inside it - that was the black gap above
       the hero. The iframe must stay 16:9 and be scaled until it covers the hero on
       BOTH axes. aspect-ratio + min-width/min-height sizes against the CONTAINER,
       which vw/vh units cannot do. */
    .template-home-wrap #hero-video {
        width: auto;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        aspect-ratio: 16 / 9;
    }

    .template-home-wrap .hero-video-wrapper {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: none;
        overflow: hidden;
    }
}

@media (min-width: 1080px) {
    #footerLanguage {
        display: none;
    }
}

/* ================= 2026-09-11 client items 1-8 ================= */

/* item 4: nothing painted behind the tiles below the hero, so the white body showed
   through. Give the new-design pages the dark base the design uses. */
.template-home-wrap {
    background-color: #040E1F;
}

@media (max-width: 767px) {

    /* item 5: the tile CTA was pinned bottom-right. The design centres a solid red
       circle vertically against the text block, on the right. */
    .template-home-wrap .kh-card-content {
        position: relative;
        padding-right: 62px;
    }

    .template-home-wrap .kh-btn-explore {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        align-self: auto;
        background: #D22730;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* item 6: base line-height is 81%, so wrapped lines collided */
    .kh-choose-membership .cm-events h2 {
        line-height: 1.4;
    }

    /* item 7: the tick wrapped onto its own line because the text span filled the row.
       Keep it a single nowrap row: text left, tick right. */
    /* must match the specificity of ".cm-e-wrap .cm-e-list ul li", which sets
       flex-wrap: wrap and was winning. */
    .kh-choose-membership .cm-events .cm-e-wrap .cm-e-list ul li {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .kh-choose-membership .cm-events .cm-e-wrap .cm-e-list ul li>span {
        flex: 1 1 auto;
        min-width: 0;
    }

    .kh-choose-membership .cm-events .cm-e-wrap .cm-e-list ul li>svg {
        flex: 0 0 auto;
    }

    /* item 5 (membership tiles): same centred red circle treatment */
    .cm-tile .cm-desc .selectfield-link,
    .cm-tile-mobile .cm-tile .cm-desc .selectfield-link {
        align-items: center;
        justify-content: center;
        background: #D22730;
    }
}

/* 2026-09-11 item 3: rotate prompt under the modal video, per the design.
   Portrait phones only - pointless in landscape or on desktop. */
.video-modal-rotate {
    display: none;
}

@media (max-width: 767px) and (orientation: portrait) {
    .video-modal-rotate {
        display: block;
        margin: 18px auto 0;
        text-align: center;
        color: #FFF;
        font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
    }
}

/* ===== 2026-09-11 round 2 ===== */

/* item 2: the sticky header covered the top of a card when it was scrolled to.
   Give the cards and accordion rows a scroll offset clearing the header. */
.kh-choose-membership .cm-events .cm-e-wrap>div,
.kh-choose-membership .cm-events .cm-e-accordion .cm-e-item {
    scroll-margin-top: 180px;
}

@media (max-width: 767px) {

    .kh-choose-membership .cm-events .cm-e-wrap>div,
    .kh-choose-membership .cm-events .cm-e-accordion .cm-e-item {
        scroll-margin-top: 160px;
    }
}

/* 2026-09-11 item 3: Figma chevron on the pathway tiles.
   Base SVG points UP. Active/expanded tile -> down (180deg).
   Inactive/collapsed tile -> right (90deg). */
.cm-tile .cm-desc .selectfield-link .kh-chev,
.cm-tile-mobile .cm-tile .cm-desc .selectfield-link .kh-chev {
    display: block;
    color: #FFF;
    transition: transform 0.3s ease;
    transform: rotate(90deg);
}

.cm-tile.is-active .cm-desc .selectfield-link .kh-chev {
    transform: rotate(180deg);
}

.cm-tile .cm-desc .selectfield-link,
.cm-tile-mobile .cm-tile .cm-desc .selectfield-link {
    align-items: center;
    justify-content: center;
}

/* 2026-09-11: footer subscribe form on phones.
   The form sits in a Bootstrap .col-8 that stays 8/12 on mobile (225px), while the
   Gravity Forms reCAPTCHA widget is a fixed 304px - it pushed 59px past the viewport
   on staging/prod, which have reCAPTCHA enabled on form 128. Give the column the full
   width and clamp the widget. */
@media (max-width: 767px) {
    .kh-footer-wrap .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .kh-our-exclusives-form .ginput_recaptcha {
        max-width: 100%;
        overflow: hidden;
    }

    .kh-our-exclusives-form .ginput_recaptcha>div {
        transform: scale(0.86);
        transform-origin: left top;
    }
}
/* ================= 2026-09-13 hero still image ================= */

/* The hero can now show a still instead of the film. The still needs none of the
   16:9 letterbox maths the iframe needs, so it simply covers the wrapper. */
.template-home-wrap .hero-still {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ================= 2026-09-13 client items 3, 8, 9 ================= */

/* --- item 3: hero vertical spacing ---------------------------------------------------
   The header is absolutely positioned over the hero, but the hero centred its content in
   the FULL hero box, so the wordmark ended up 2px under the nav. Figma centres the content
   in the area BELOW the header: 253px above the wordmark and 283px below PLAY FILM.
   Those exact gaps need a 1077px hero, which is taller than a laptop viewport, so the hero
   now fills the viewport and keeps the Figma proportions inside it.
   Scoped to min-width 769px: the phone rules below 768px already set their own padding. */
@media (min-width: 769px) {
    .template-home-wrap .hero {
        height: 100vh;
        min-height: 780px;
        /* clears the overlaying header (180px tall, hero starts 10px down) */
        padding-top: 170px;
    }
}

/* --- item 8: sponsor strip ------------------------------------------------------------
   The label lost its typeface on legacy-template pages, where a later stylesheet won on
   font-family. Name the full path so the Figma face holds everywhere. Figma: PP Formula
   Extended Bold, 6px, 8px line box. */
.partners .partner-category h3.category-title,
.partners .partner-category .category-title {
    font-family: "PP Formula Extended", "PP Formula Ext Fallback", sans-serif;
    font-size: 6px;
    font-weight: 700;
    line-height: 8px;
    letter-spacing: normal;
    color: #000;
    margin: 0;
    text-transform: uppercase;
    align-self: flex-start;
}

/* The strip ran ~30px past the viewport at 1440 once the James Place logo took it to 15
   logos, which put a horizontal scrollbar on every page. Tighten the gaps so it fits. */
@media (min-width: 1281px) {
    .partners .partner-category {
        padding: 0 16px;
    }

    .partners .category-logos {
        gap: 14px;
    }
}

/* --- item 9: member count-up ----------------------------------------------------------
   The digits were ~1.9MB of hand-traced grit SVG, which stalled the main thread whenever
   they were touched and made the count jump straight to the total. They are now WebP tiles
   at 2x (87KB for all ten), so the count is a plain src swap. Digits 3, 4, 6 and 7 are the
   original artwork rasterised, so the number at rest is unchanged; 0, 1, 2, 5, 8 and 9 are
   rebuilt from the 88Sans Grit font inside the same tile frame. No CSS needed. */

/* The membership h1 carried margin-top:100px to dodge the nav that used to overlap it.
   The hero now reserves that space with padding-top, so the old offset only pushed the
   block low: 157px above it and 64px below. Drop it so the content centres again. */
@media (min-width: 769px) {
    .template-home-wrap .hero-title h1 {
        margin-top: 0;
    }
}

/* ================= 2026-09-14 client items ================= */

/* --- nav: more space between the links, closer to Figma ------------------------------
   The <li> sit flush against each other; the visible gap comes only from each link's
   14px side padding, so two labels were 28px apart. 19px per side makes it 38px.
   Desktop only: below 1200px the row has no width to spare, and under 992px the nav
   collapses to the hamburger anyway. */
@media (min-width: 1200px) {

    #navBar .u-header__navbar-nav > li > .u-header__nav-link,
    #navBar .u-header__navbar-nav > li > .nav-link {
        padding-left: 19px;
        padding-right: 19px;
    }
}

/* --- footer typography on legacy-template pages --------------------------------------
   The footer is sitewide, but `body.body-kh-legacy` sets the page font to PP Formula
   Extended and every heading to 88Sans, and the footer INHERITED both. So /contact/ and
   friends drew the footer in the wrong faces while the new pages were right. The sizes
   already matched - the wider face just read as larger. Restore what the new pages
   compute. The subscribe form sets its own faces explicitly and is unaffected. */
body.body-kh-legacy footer,
body.body-kh-legacy .kh-footer-wrap,
body.body-kh-legacy .partners {
    font-family: 'SequelSans-Regular', 'Arial', 'Helvetica Neue', sans-serif;
}

body.body-kh-legacy footer h1,
body.body-kh-legacy footer h2,
body.body-kh-legacy footer h3,
body.body-kh-legacy footer h4,
body.body-kh-legacy footer h5,
body.body-kh-legacy footer h6 {
    font-family: 'SequelSans-HeadlineBold', 'Arial', 'Helvetica Neue', sans-serif;
}

/* --- sponsor strip: close the last 18px of overflow ---------------------------------
   Above 1280px the gaps were already tightened, but between 1281px and ~1440px the row
   still ran ~18px past the viewport, which put a horizontal scrollbar on a 1366 laptop.
   Squeeze the padding and gaps a little further in that band only. */
@media (min-width: 1281px) and (max-width: 1439px) {

    .partners .partner-category {
        padding: 0 12px;
    }

    .partners .category-logos {
        gap: 11px;
    }

    /* the row must stay on one line above 1280px, so cap the widest logos a little */
    .partners .category-logos img {
        max-width: 74px;
    }
}

/* ================= 2026-09-14 client round 2 ================= */

/* --- all pages: the pale line under the sticky nav ---------------------------------
   The base theme puts border-bottom: 1px solid #E3E6F0 on .u-header__section. Against
   the dark header that reads as a white hairline. */
header#header.header-kh .u-header__section {
    border-bottom: 0;
}

/* --- homepage: countdown hidden but its background kept ----------------------------
   Turning the toggle off used to remove the whole band. The section now always renders
   so the texture survives; only the contents come out and the band gets shorter. */
.template-home-wrap .countdown.is-collapsed {
    /* 2026-09-16: the band between the game-day cards and FOLLOW US.
       🔴 Desktop pulls this section up with margin-top:-105px, so min-height does NOT
       equal the visible gap there - the gap is (min-height - 105). Dropping it to 110
       left only 5px on desktop while mobile (no negative margin) got a comfortable 110.
       So it is per breakpoint now: 150 -> 45px visible on desktop, was 65px at 170. */
    min-height: 150px;
}

@media (max-width: 767px) {

    .template-home-wrap .countdown.is-collapsed {
        /* no negative margin here, so this IS the visible gap */
        min-height: 110px;
    }
}

/* --- homepage mobile: three utility buttons on one row -----------------------------
   Figma V7 Mobile: the member count sits centred on its own row, then My Account /
   Merch / Tickets share a single 365x40 row. The wrap rules here were inert because
   .container is a block, so the buttons wrapped onto two lines. */
@media (max-width: 767px) {

    header#header.header-kh .header-top .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    header#header.header-kh .header-top #homeMegaMenu.nav-link.newlink {
        flex: 0 0 100%;
        /* .nav-link is a flex box, so text-align alone does not centre it */
        justify-content: center;
        text-align: center;
    }

    header#header.header-kh .header-top .btn-blue-100 {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 12px;
        padding: 8px 10px;
        gap: 6px;
    }
}

/* Merch is a phone-only button; the desktop bar keeps the two it has today. */
header#header.header-kh .header-top .kh-merch-btn {
    display: none;
}

@media (max-width: 767px) {

    header#header.header-kh .header-top .kh-merch-btn {
        display: flex;
    }
}

/* --- homepage mobile: centre the chevron in the round CTA --------------------------
   font-size:0 hides the label but the flex gap it left still pushed the arrow right,
   and a -17px nudge over-corrected it. Remove the label from layout instead. */
@media (max-width: 767px) {

    .template-home-wrap .kh-btn-explore {
        gap: 0;
    }

    .template-home-wrap .kh-btn-explore span {
        display: none;
    }

    .template-home-wrap .kh-btn-explore svg {
        margin: 0;
    }
}

/* --- mobile menu: TRAVEL HUB wrapped to two lines and indented ---------------------
   The <a> was only 109px wide inside a 363px <li>, so the longest label broke. */
@media (max-width: 991px) {

    header#header.header-kh #navBar .navbar-nav > li > .u-header__nav-link {
        width: 100%;
        white-space: nowrap;
    }
}

/* --- footer mobile: smaller badge, and air before OUR EXCLUSIVES ------------------- */
@media (max-width: 767px) {

    .kh-footer-wrap .kh-f-logo {
        width: 72px;
    }

    .kh-footer-wrap .kh-f-logo-wrap {
        margin-bottom: 24px;
    }
}

/* --- legacy pages: page titles in the grit face, much larger ----------------------- */
body.body-kh-legacy .section-hero h1 {
    font-family: "88Sans Grit", "88Sans Grit Fallback", sans-serif;
    font-size: 64px;
    line-height: 1.05;
}

@media (max-width: 767px) {

    body.body-kh-legacy .section-hero h1 {
        font-size: 40px;
    }
}

/* ================= 2026-09-15 client round 3 ================= */

/* --- hero content box was shrink-to-fit on phones -----------------------------------
   .hero-content is a flex item with auto width, so it sized to its contents instead of
   the viewport. Two symptoms from the one cause: the homepage wordmark sat ~16px left of
   centre, and the membership <h1> was squeezed to a 174px column that broke BE PART OF IT
   onto three lines. Give the box a definite width and centre the title inside it. */
@media (max-width: 767px) {

    .template-home-wrap .hero-content {
        width: 100%;
    }

    .template-home-wrap .hero-title {
        margin-left: auto;
        margin-right: auto;
    }

    /* Figma V7 Mobile draws this at 140px on a 450 frame (line-height 111), full bleed on
       two lines. 31vw keeps that ratio on any phone; the cap stops it growing past the
       drawn size on a large tablet. */
    .template-home-wrap .hero-title h1 {
        font-size: min(31vw, 140px);
        line-height: 0.79;
    }
}

/* --- footer subscribe form: First name narrower than Last name ----------------------
   Gravity Forms pads .name_first to make the gutter when the two sit side by side. They
   stack on a phone, so that padding just made the first input 12px short. */
@media (max-width: 767px) {

    .kh-our-exclusives-form .ginput_complex > span {
        padding-left: 0;
        padding-right: 0;
    }

    .kh-our-exclusives-form .ginput_complex > span input {
        width: 100%;
    }
}

/* ================= 2026-09-15 client round 3b ================= */

/* --- footer subscribe block sat indented on phones ----------------------------------
   The logo and the form are a col-3 / col-9 pair, and those Bootstrap classes carry no
   breakpoint, so the two stayed side by side on a phone. That pushed OUR EXCLUSIVES and
   the fields to x=116 while every other footer item lines up at x=20. Stack them so the
   form picks up the same column padding as the links below. */
@media (max-width: 767px) {

    .kh-footer-wrap .kh-f-logo-wrap,
    .kh-footer-wrap .kh-f-logo-wrap + div {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- First name was 12px narrower than Last name ------------------------------------
   Gravity Forms pads .name_first to form the gutter between the two when they sit side
   by side. They stack on a phone, so the padding just shortened the first input. The
   earlier attempt lost on specificity, hence the longer selector. */
@media (max-width: 767px) {

    /* Gravity Forms sets this gutter with !important, so match it. */
    .kh-our-exclusives-form .gform_wrapper .ginput_complex span.name_first,
    .kh-our-exclusives-form .gform_wrapper .ginput_complex span.name_last {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .kh-our-exclusives-form .gform_wrapper .ginput_complex > span > input {
        width: 100%;
    }
}

/* ================= 2026-09-15 card title hover ================= */

/* The two homepage card titles became links so the whole card points at one URL. That made
   them pick up the theme link hover, turning them green (rgb(22,134,82)). The design has
   them plain white at every state, so inherit the heading colour instead of changing. */
.template-home-wrap .kh-card-content h3 a,
.template-home-wrap .kh-card-content h3 a:link,
.template-home-wrap .kh-card-content h3 a:visited,
.template-home-wrap .kh-card-content h3 a:hover,
.template-home-wrap .kh-card-content h3 a:focus,
.template-home-wrap .kh-card-content h3 a:active {
    color: inherit;
    text-decoration: none;
}

/* ================= 2026-09-16 lightbox size ================= */

/* The PLAY FILM lightbox filled nearly the whole screen (90% wide, up to 1200px). Bring it
   in a little on desktop. The phone rule already caps it at 95% so it is left alone. The
   height cap keeps it inside short viewports, where aspect-ratio alone would push the close
   button off screen. */
@media (min-width: 769px) {

    .video-modal-content {
        width: 78%;
        max-width: 900px;
        max-height: 76vh;
    }
}

/* ================= 2026-09-16 sticky header + tablet tally ================= */

/* --- the scroll flash and content jump -----------------------------------------------
   The theme makes the header position:fixed once you scroll, and compensates by setting an
   inline margin-top on <main> (0 at the top, 170px once fixed) so the page does not move.
   `.template-home-wrap { margin-top: -170px !important }` overrode that compensation, so
   every sticky transition shifted the page by ~170px - the jump. The pull-up only ever
   existed to slide the hero under the transparent header, so move it to the hero itself and
   let the theme do its job. Net movement across the transition is now 1px. */
@media (min-width: 768px) {

    .template-home-wrap {
        /* flow-root keeps the hero pull-up INSIDE main. Without it the negative margin
           collapses through main and lands in exactly the same place as before. No
           margin-top here on purpose: the theme sets it inline and we must not fight it. */
        display: flow-root;
    }

    .template-home-wrap > .hero {
        margin-top: -170px;
    }
}

/* The utility bar was toggled with display:none/block, which cannot animate, so the header
   height snapped 169px <-> 106px on every direction change. Collapse it instead. */
@media (min-width: 768px) {

    header#header.header-kh .header-top {
        overflow: hidden;
        max-height: 120px;
        transition: max-height 0.3s ease-in-out,
            padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
    }

    /* 2026-09-16: fade the CONTENT, never the red band. #header itself paints nothing
       (rgba(0,0,0,0)) and body is white, so an opacity fade on .header-top showed the
       white page straight through it for 300ms - that was the flash. The band now stays
       opaque and rolls up; only the buttons and the tally fade. */
    header#header.header-kh .header-top > .container {
        transition: opacity 0.2s ease-in-out;
    }

    header#header.header-kh.u-scrolled .header-top {
        display: block;
        max-height: 0;
        /* max-height does not clip padding, so the bar kept a 20px sliver without this */
        padding-top: 0;
        padding-bottom: 0;
    }

    header#header.header-kh.u-scrolled .header-top > .container {
        opacity: 0;
    }

    header#header.header-kh.u-scrolled.nav-down .header-top {
        max-height: 120px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    header#header.header-kh.u-scrolled.nav-down .header-top > .container {
        opacity: 1;
        /* hold back 100ms so the tally and buttons fade in as the band opens,
           not before there is room for them */
        transition-delay: 0.1s;
    }
}

/* --- member tally overflowed at tablet widths ----------------------------------------
   The digit tiles stay 151px tall until 767px, so at 820px the JOIN / 33,746 / MEMBERS row
   ran 152px past the viewport. Step it down across the tablet band. */
@media (min-width: 768px) and (max-width: 1024px) {

    .cm-countdown {
        font-size: 64px;
        gap: 16px;
        flex-wrap: wrap;
    }

    .cm-countdown img {
        height: 84px;
    }

    .cm-countdown .cm-c-wrap {
        gap: 6px;
    }

    .cm-countdown .cm-c-anim {
        font-size: 120px;
        line-height: 84px;
        height: 84px;
        letter-spacing: 6px;
    }
}

/* --- mobile: the same jump, different cause ------------------------------------------
   The theme only compensates for the sticky header from the lg breakpoint up (its class is
   u-header--sticky-top-lg), yet it still switches the header to position:fixed on a phone.
   The header therefore leaves the flow with nothing replacing it, and the page jumps up by
   the full header height. Put that height back while it is fixed. mobile sticky compensation

   The two bands are measured, not guessed: the header is 174px from 375px up, and 220px at
   360px where the utility bar wraps to two rows. The header keeps its normal static/fixed
   behaviour - only the replacement space is added - so the blast radius is small. */
@media (max-width: 767px) {

    header#header.header-kh.u-scrolled ~ main {
        margin-top: 174px !important;
    }
}

@media (max-width: 374px) {

    header#header.header-kh.u-scrolled ~ main {
        margin-top: 220px !important;
    }
}

/* The utility bar collapse, on phones too, so the header does not snap between heights. */
@media (max-width: 767px) {

    header#header.header-kh .header-top {
        overflow: hidden;
        /* 2026-09-16: a transition FROM max-height:none is not animatable, so the collapse
           snapped 73px in one frame while the reappear animated fine. Give it a concrete
           start value just above the natural height (93px at 375px and up). */
        max-height: 110px;
        transition: max-height 0.3s ease-in-out,
            padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
    }

    /* 2026-09-16: fade the CONTENT, never the red band. #header itself paints nothing
       (rgba(0,0,0,0)) and body is white, so an opacity fade on .header-top showed the
       white page straight through it for 300ms - that was the flash. The band now stays
       opaque and rolls up; only the buttons and the tally fade. */
    header#header.header-kh .header-top > .container {
        transition: opacity 0.2s ease-in-out;
    }

    header#header.header-kh.u-scrolled .header-top {
        display: block;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    header#header.header-kh.u-scrolled .header-top > .container {
        opacity: 0;
    }

    header#header.header-kh.u-scrolled.nav-down .header-top {
        max-height: 110px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    header#header.header-kh.u-scrolled.nav-down .header-top > .container {
        opacity: 1;
        /* hold back 100ms so the tally and buttons fade in as the band opens,
           not before there is room for them */
        transition-delay: 0.1s;
    }
}

/* At 360px the utility bar wraps to two rows, so the bar is 139px tall and a 110px
   ceiling would clip it when open. Raise it for that band only. */
@media (max-width: 374px) {

    header#header.header-kh .header-top,
    header#header.header-kh.u-scrolled.nav-down .header-top {
        max-height: 160px;
    }
}

/* --- 2026-09-16: the white flash behind the nav -------------------------------------
   <main> IS .template-home-wrap. The theme sets its inline margin-top to 170px one paint
   BEFORE it takes the header out of flow, so for that paint the hero drops BELOW the
   header and the white body sits behind the still-transparent nav strip. The strip then
   fades transparent -> #040E1F over 300ms, so the white stays on screen for the whole
   fade rather than a single frame - that is the flash.
   Fix: put an opaque navy layer behind the header for as long as it is scrolled. At rest
   there is no layer, so the hero still shows through the transparent header exactly as
   before. z-index:-1 keeps it inside the header's stacking context, so it sits behind the
   red bar and the nav but still in front of the page. */
header#header.header-kh.u-scrolled::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #040E1F;
    z-index: -1;
    pointer-events: none;
}

/* --- 2026-09-16: the hamburger felt slow to open -----------------------------------
   Bootstrap animates #navBar's height with `transition: height .35s ease`. `ease` is
   slow to start, so for ~180ms after the tap almost nothing moves and the menu reads as
   unresponsive. Measured from the touch: click handler +32ms, menu class change +37ms
   (so the JS is not the problem), but the items were not visible until +218ms and the
   menu only settled at +450ms. Shorten it and start fast instead of slow.
   navbar-expand-lg collapses below 992px, so scope it to that band. */
@media (max-width: 991px) {

    #navBar.collapsing {
        transition: height 0.15s ease-out;
    }
}

/* --- 2026-09-16: tile title + image link to the same place as VIEW OPTIONS ----------
   display:contents on the image wrapper keeps the <img> the DIRECT child of .cm-tile, so
   the desktop 100% x 160 crop and the 108px mobile flex child both still apply and the
   layout is byte-for-byte unchanged. A plain wrapper would have added an inline gap on
   desktop and become the flex child on mobile, losing the 108px min-width.
   The title link inherits the heading colour at EVERY state - the brief is explicit that
   nothing may change on hover. */
.cm-tile .kh-tile-imglink {
    display: contents;
}

.cm-tile .cm-desc h3 .kh-tile-titlelink,
.cm-tile .cm-desc h3 .kh-tile-titlelink:link,
.cm-tile .cm-desc h3 .kh-tile-titlelink:visited,
.cm-tile .cm-desc h3 .kh-tile-titlelink:hover,
.cm-tile .cm-desc h3 .kh-tile-titlelink:focus,
.cm-tile .cm-desc h3 .kh-tile-titlelink:active {
    color: inherit;
    text-decoration: none;
}

/* --- 2026-09-17: the note at the base of each product is fine print ------------------
   "Game redemption opens in February 2027 and is subject to availability." and "Ticket
   redemption subject to availability." sat at the card's inherited size, so they read as
   importantly as the product copy. Drop them to fine print.
   The "Flexible payment options available." line above them stays at 12px on purpose -
   the brief is explicit that it matters more. */
.kh-choose-membership .cm-events .cm-e-wrap .cm-e-note-below {
    font-size: 10px;
    line-height: 1.4;
    opacity: 0.7;
}

/* --- 2026-09-16: space under the subscribe confirmation ------------------------------
   The Our Exclusives confirmation replaces a 182px form with 82px of text, so the footer
   link row jumped straight up under it - measured gap 0 at 1440. Put some of that back.
   Phones already keep a 48px gap because the footer stacks, so this is desktop only. */
@media (min-width: 768px) {

    .kh-our-exclusives-form .gform_confirmation_wrapper {
        padding-bottom: 40px;
    }
}