.aboutv2-concept-page.hero-fade .concept-hero {
    background: transparent;
    height: 100dvh;
    margin-bottom: 0;
    min-height: 650px;
    pointer-events: none;
    position: sticky;
    top: 0;
    z-index: 2;
}

.aboutv2-page.aboutv2-concept-page.hero-fade .header.transparent-bg.transparent-header {
    background:
        linear-gradient(rgba(255, 255, 255, var(--about-header-white-alpha)), rgba(255, 255, 255, var(--about-header-white-alpha))),
        linear-gradient(to bottom, rgba(0, 0, 0, var(--about-header-dark-alpha)) 0%, rgba(0, 0, 0, 0) 100%);
    isolation: isolate;
    transition: height var(--transition-duration) var(--transition-ease);
}

.aboutv2-concept-page.hero-fade .header > .logo {
    filter: invert(var(--about-header-logo-invert));
    transition: none;
}

/* Once the hero reveal has cleared the header, let its gradient and controls
   follow the surface underneath it. Two stacked gradients make the switch
   between black and white feel continuous instead of flashing. */
.aboutv2-page.aboutv2-index-page .header.is-index-surface {
    background: transparent !important;
    isolation: isolate;
}

.aboutv2-page.aboutv2-index-page .header.is-index-surface::before,
.aboutv2-page.aboutv2-index-page .header.is-index-surface::after {
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 320ms cubic-bezier(.22, 1, .36, 1);
    z-index: 0;
}

.aboutv2-page.aboutv2-index-page .header.is-index-surface::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
    opacity: 0;
}

.aboutv2-page.aboutv2-index-page .header.is-index-surface::after {
    background: #fff;
    opacity: 1;
}

.aboutv2-page.aboutv2-index-page .header.is-index-surface-dark::before { opacity: 1; }
.aboutv2-page.aboutv2-index-page .header.is-index-surface-dark::after { opacity: 0; }

.aboutv2-page.aboutv2-index-page .header.is-index-surface > .logo,
.aboutv2-page.aboutv2-index-page .header.is-index-surface > .menu {
    position: relative;
    z-index: 1;
}

.aboutv2-page.aboutv2-index-page.hero-fade .header.is-index-surface > .logo {
    filter: invert(var(--about-header-logo-invert));
    transition: filter 260ms ease;
}

.aboutv2-page.aboutv2-index-page.hero-fade .header.is-index-surface .about-menu__toolbar .about-menu__icon,
.aboutv2-page.aboutv2-index-page.hero-fade .header.is-index-surface .about-menu__toolbar .about-menu__toggle,
.aboutv2-page.aboutv2-index-page.hero-fade .header.is-index-surface .about-menu__toolbar .about-menu__language-toggle {
    color: var(--about-header-fg);
    transition: color 260ms ease;
}

.aboutv2-page.aboutv2-index-page .header.is-index-surface-light {
    --about-header-fg: #080808 !important;
    --about-header-logo-invert: 0 !important;
}

.aboutv2-page.aboutv2-index-page .header.is-index-surface-dark {
    --about-header-fg: #fff !important;
    --about-header-logo-invert: 1 !important;
}

.aboutv2-concept-page.hero-fade .transparent-header .about-menu__toolbar .about-menu__icon,
.aboutv2-concept-page.hero-fade .transparent-header .about-menu__toolbar .about-menu__toggle,
.aboutv2-concept-page.hero-fade .transparent-header .about-menu__toolbar .about-menu__language-toggle {
    color: var(--about-header-fg);
    transition: none;
}

.aboutv2-page.aboutv2-concept-page.hero-fade .club-content-layer {
    background: #fff;
    /* Let the first section enter through the reveal before the hero has
       completely cleared, avoiding a full empty white viewport. */
    padding-top: max(300px, 40dvh);
    position: relative;
    z-index: 1;
}

.aboutv2-concept-page.hero-fade .concept-hero::before,
.aboutv2-concept-page.hero-fade .concept-hero::after {
    content: none;
}

.concept-hero__reveal {
    --concept-hero-split-top: 35%;
    --concept-hero-split-bottom: 35%;
    --concept-hero-image-scale: 1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--concept-hero-split-top), 0 var(--concept-hero-split-top), 0 var(--concept-hero-split-bottom), 100% var(--concept-hero-split-bottom), 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% var(--concept-hero-split-top), 0 var(--concept-hero-split-top), 0 var(--concept-hero-split-bottom), 100% var(--concept-hero-split-bottom), 100% 100%, 0 100%);
    inset: 0;
    isolation: isolate;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.concept-hero__reveal::after {
    background: rgba(0, 0, 0, .28);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.aboutv2-concept-page.hero-fade .concept-hero .club-hero__image.is-visible {
    opacity: 1 !important;
}

.aboutv2-concept-page.hero-fade .concept-hero .club-hero__image {
    transform: scale(var(--concept-hero-image-scale));
    transform-origin: center;
    will-change: transform;
    z-index: 0;
}

.aboutv2-concept-page.hero-fade .concept-hero .club-hero__title {
    opacity: 1 !important;
}

.aboutv2-concept-page.hero-fade .concept-hero .club-hero__title h1 {
    color: #fff !important;
}

.concept-hero .club-hero__title {
    padding-bottom: clamp(280px, 31vh, 350px);
    padding-top: 0;
    transform: none;
    z-index: 3;
}

.concept-hero .club-hero__title h1 {
    display: grid;
    font-size: clamp(72px, 7vw, 142px);
    position: relative;
}

.concept-hero__title-copy {
    color: #fff;
    display: block;
    grid-area: 1 / 1;
    will-change: clip-path, transform;
}

.concept-hero__title-copy--top {
    -webkit-clip-path: inset(0 0 50% 0);
    clip-path: inset(0 0 50% 0);
    transform: translateY(var(--concept-hero-title-top-y, 0px));
}

.concept-hero__title-copy--bottom {
    -webkit-clip-path: inset(50% 0 0 0);
    clip-path: inset(50% 0 0 0);
    transform: translateY(var(--concept-hero-title-bottom-y, 0px));
}

.concept-hero__title-accessible {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

.concept-hero__media {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.concept-hero__video {
    height: 100%;
    inset: 0;
    object-fit: cover;
    opacity: 0;
    position: absolute;
    transition: opacity 420ms ease;
    width: 100%;
}

.concept-hero__video.is-active {
    opacity: 1;
}

.concept-hero__topics {
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    display: grid;
    gap: clamp(8px, .8vw, 14px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    left: 0;
    margin: 0 auto;
    max-width: 1440px;
    padding: 0 clamp(24px, 4vw, 72px) calc(clamp(24px, 3vh, 42px) + clamp(90px, 7vw, 120px) - 75px);
    position: absolute;
    right: 0;
    opacity: var(--concept-hero-topics-opacity, 1);
    pointer-events: auto;
    transform: translateY(var(--concept-hero-topics-y, 0px));
    transition: none;
    will-change: opacity, transform;
    z-index: 4;
}

.concept-hero__topics.is-reveal-hidden {
    pointer-events: none;
}

.concept-hero__topics::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 46%, rgba(0, 0, 0, .86) 100%);
    content: "";
    bottom: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: -120px;
    transform: translateX(-50%);
    width: 100vw;
    z-index: 0;
}

.concept-hero__topic,
.concept-hero__topic:link,
.concept-hero__topic:visited {
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: clamp(240px, 26vh, 290px);
    padding: clamp(28px, 3vh, 36px) clamp(24px, 2.4vw, 38px) clamp(22px, 2.5vh, 30px);
    position: relative;
    transition: background-color 260ms ease, transform 260ms ease;
    z-index: 1;
}

.concept-hero__topic h2 {
    color: inherit;
    font-size: clamp(30px, 2.25vw, 46px);
    font-weight: 300;
    letter-spacing: -.025em;
    line-height: .9;
    margin: 0 0 16px;
    max-width: 9ch;
    text-transform: uppercase;
}

.concept-hero__topic p {
    font-size: clamp(13px, .92vw, 16px);
    font-weight: 300;
    line-height: 1.35;
    margin: 0 0 18px;
    max-width: 30ch;
}

.concept-hero__topic > span {
    align-items: center;
    display: flex;
    font-size: clamp(11px, .78vw, 14px);
    font-weight: 500;
    gap: 10px;
    margin-top: auto;
    text-transform: uppercase;
}

.concept-hero__topic b {
    font-size: 20px;
    font-weight: 400;
    transition: transform 260ms ease;
}

.concept-hero__topic:hover,
.concept-hero__topic:focus-visible,
.concept-hero__topic.is-active {
    background: #fff;
    color: #080808;
}

.concept-hero__topic:hover b,
.concept-hero__topic:focus-visible b {
    transform: translateX(8px);
}

.concept-hero__topic:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

@media (max-width: 1000px) {
    .concept-hero .club-hero__title {
        align-items: flex-start;
        padding-top: 150px;
    }

    .concept-hero .club-hero__title h1 {
        font-size: clamp(64px, 10vw, 100px);
    }

    .concept-hero__topic h2 {
        font-size: clamp(26px, 3.4vw, 36px);
    }

    .concept-hero__topic p {
        font-size: 13px;
    }
}

@media (max-width: 700px) {
    .aboutv2-page.aboutv2-concept-page .concept-hero {
        height: 100dvh;
        min-height: 620px;
    }

    .aboutv2-page.aboutv2-concept-page.hero-fade .club-content-layer {
        padding-top: max(220px, 35dvh);
    }

    .concept-hero .club-hero__title {
        align-items: flex-start;
        height: 42svh;
        inset: 0 0 auto;
        padding: 120px 24px 20px;
    }

    .concept-hero .club-hero__title h1 {
        font-size: clamp(56px, 18vw, 82px);
    }

    .concept-hero__topics {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 16px 18px;
        position: absolute;
        top: auto;
    }

    .concept-hero__topic,
    .concept-hero__topic:link,
    .concept-hero__topic:visited {
        min-height: 235px;
        padding: 24px 18px 20px;
    }

    .concept-hero__topic h2 {
        font-size: clamp(27px, 8.2vw, 36px);
        margin-bottom: 12px;
    }

    .concept-hero__topic p {
        font-size: 12px;
        line-height: 1.35;
    }

    .concept-hero__topic > span {
        font-size: 10px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .aboutv2-concept-page.hero-fade .concept-hero {
        height: auto;
        min-height: 100svh;
        position: relative;
    }

    .aboutv2-page.aboutv2-concept-page.hero-fade .club-content-layer {
        padding-top: 0;
    }

    .concept-hero__reveal {
        -webkit-clip-path: none;
        clip-path: none;
    }

    .concept-hero__topics {
        opacity: 1;
        transform: none;
    }

    .concept-hero__video {
        display: none;
    }
}

/* One responsive V2 homepage: concept presentation on larger screens and the
   original card-led presentation on phones, using the same hero image. */
.responsive-home-page .home-mobile-only {
    display: none;
}

.responsive-home-page .club-hero__hitarea {
    display: none;
}

@media (max-width: 700px) {
    .responsive-home-page .concept-desktop-only {
        display: none !important;
    }

    .responsive-home-page .home-mobile-only {
        display: flex;
    }

    .responsive-home-page .club-hero__hitarea {
        display: block;
    }

    .responsive-home-page section.home-mobile-only {
        display: grid;
    }

    .responsive-home-page .concept-hero {
        pointer-events: auto;
    }

    .responsive-home-page .concept-hero__reveal {
        -webkit-clip-path: none;
        clip-path: none;
    }

    .responsive-home-page .concept-hero .home-mobile-only.club-hero__title {
        align-items: center;
        height: auto;
        inset: 0;
        justify-content: center;
        padding: 100px 24px 50px;
        transform: none;
    }
}
.responsive-home-page .club-final__about-button,
.responsive-home-page .club-final__about-button:link,
.responsive-home-page .club-final__about-button:visited {
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    color: #080808;
    display: inline-flex;
    font-size: var(--club-card-cta-size);
    font-weight: 600;
    justify-content: center;
    min-height: 60px;
    min-width: min(100%, 360px);
    padding: 18px 24px;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.responsive-home-page .club-final__about-button:hover,
.responsive-home-page .club-final__about-button:focus-visible {
    background: var(--club-gold);
    color: #080808;
    transform: translateY(-2px);
}

@media (max-width: 700px) {
    .responsive-home-page .club-final__about-button {
        width: 100%;
    }
}