.f12-about {
    --about-bg: var(--f12-color-surface-page);
    --about-card: var(--f12-color-surface-card);
    --about-radius: var(--f12-space-6);
    --about-content-max: 70rem;
    --about-video-max-width: 67.5rem;
    --about-video-border-color: var(--f12-color-border-subtle);
    --about-video-shadow: var(--f12-shadow-feature);
    --about-video-bg: #0e0e0e;
    --about-video-overlay-top: rgba(0, 0, 0, 0.08);
    --about-video-overlay-bottom: rgba(0, 0, 0, 0.35);
    --about-motion-duration-media: var(--f12-duration-normal);
    --about-motion-duration-cta: var(--f12-duration-fast);
    --about-image-scale-hover: 1.035;
    --about-beliefs-shadow: var(--f12-shadow-feature);
    --about-beliefs-accent-shadow: var(--f12-shadow-accent);
    --about-beliefs-tab-width: clamp(140px, 24vw, 260px);
    --about-beliefs-tab-height: var(--f12-space-3);
    --about-beliefs-tab-offset: calc(var(--f12-space-3) * -0.5);
    --about-beliefs-padding: var(--f12-space-12);
    --about-beliefs-padding-mobile: var(--f12-space-6);
    --about-leaders-slide-height: clamp(15rem, 28vw, 26rem);
    --about-leaders-slide-height-tablet: clamp(13rem, 32vw, 22rem);
    --about-leaders-slide-height-mobile: clamp(10rem, 44vw, 17rem);
    --about-leaders-cta-offset-y: var(--f12-space-2);
    --about-leaders-cta-padding-block: calc(var(--f12-space-2) + var(--f12-space-0-5));
    --about-leaders-cta-padding-inline: var(--f12-space-4);
    --about-leaders-cta-border-color: rgba(255, 255, 255, 0.72);
    --about-leaders-cta-bg: rgba(18, 18, 18, 0.42);
    --about-leaders-cta-bg-hover: rgba(23, 23, 23, 0.64);
    --about-leaders-cta-color: var(--f12-color-brand-editorial-contrast);
    --about-leaders-cta-letter-spacing: 0.015em;
    --about-leaders-cta-shadow: var(--f12-shadow-overlay-pill);
    --about-leaders-cta-blur: 3px;
    --about-faq-media-col-desktop: 180px;
    --about-faq-media-col-tablet: 140px;
    --about-faq-copy-max: 56ch;

    background: var(--about-bg);
}

.f12-about .about-page {
    padding-block: var(--f12-space-12) 0;
}

.f12-about .about-page__container {
    width: min(100%, var(--about-content-max));
    max-width: var(--about-content-max);
    padding-inline: var(--f12-space-8);
}

.f12-about .about-hero-flow {
    --f12-stack-gap: var(--f12-space-12);
}

.f12-about .about-video {
    --f12-media-play-duration: 1.8s;
    --f12-media-play-border-color: var(--f12-color-border-on-overlay);
    --f12-media-play-bg: var(--f12-color-surface-overlay);
    --f12-media-play-color: var(--f12-color-text-on-overlay);
    --f12-media-play-shadow: var(--f12-shadow-overlay-soft);
    --f12-media-play-shadow-active: var(--f12-shadow-overlay-strong);
    --f12-media-play-glow-color: rgba(255, 255, 255, 0.28);
    --f12-media-play-ring-color: var(--f12-color-border-on-overlay-strong);
    --f12-media-play-glow-inset: calc(-1 * (var(--f12-space-2) + var(--f12-space-0-5)));
    --f12-media-play-ring-inset: calc(var(--f12-space-3) * -0.5);

    width: min(100%, var(--about-video-max-width));
    margin: 0 auto;
    display: block;
}

.f12-about .about-video__link,
.f12-about .about-video__embed {
    position: relative;
    display: block;
    width: 100%;
    margin-inline: auto;
    border-radius: var(--about-radius);
    overflow: hidden;
    border: 1px solid var(--about-video-border-color);
    box-shadow: var(--about-video-shadow);
    aspect-ratio: 16 / 9;
    background: var(--about-video-bg);
    text-decoration: none;
}

.f12-about .about-video__embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.f12-about .about-video__thumb {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform var(--about-motion-duration-media) var(--f12-ease-standard);
}

.f12-about .about-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        to top,
        var(--about-video-overlay-bottom),
        var(--about-video-overlay-top)
    );
}

.f12-about .about-video__link:hover img,
.f12-about .about-video__link:focus-within img {
    transform: scale(var(--about-image-scale-hover));
}

.f12-about .about-story-split {
    --f12-split-col-gap: var(--f12-space-16);
    --f12-split-row-gap: var(--f12-space-4);
}

.f12-about .about-card {
    background: var(--about-card);
    border-radius: var(--about-radius);
    border: 1px solid var(--f12-color-border-subtle);
    box-shadow: var(--f12-shadow-1);
    padding: var(--f12-space-8);
}

.f12-about .about-card--mission {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 var(--f12-space-8) 0 0;
    position: relative;
}

.f12-about .about-card--mission::after {
    content: "";
    position: absolute;
    top: var(--f12-space-2);
    bottom: var(--f12-space-2);
    right: calc(var(--f12-space-8) * -0.5);
    width: 1px;
    background: var(--f12-color-border-subtle);
    opacity: 0.9;
}

.f12-about .about-cta-inline {
    display: inline-flex;
    align-items: center;
}

.f12-about .about-cta-inline > .f12-btn {
    flex: 0 0 auto;
}

.f12-about .beliefs {
    position: relative;
    margin-inline: auto;
    scroll-margin-top: calc(var(--f12-space-12) + var(--f12-space-8));
    padding: var(--about-beliefs-padding);
    background: var(--about-card);
    border: 1px solid var(--f12-color-border-subtle);
    border-radius: var(--about-radius);
    box-shadow: var(--about-beliefs-shadow);
    overflow: visible;
}

.f12-about .beliefs::before,
.f12-about .beliefs::after {
    content: "";
    position: absolute;
    width: var(--about-beliefs-tab-width);
    height: var(--about-beliefs-tab-height);
    border-radius: var(--f12-radius-pill);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--f12-color-brand-editorial) 82%, white),
        color-mix(in srgb, var(--f12-color-brand-editorial) 88%, black)
    );
    box-shadow: var(--about-beliefs-accent-shadow);
    pointer-events: none;
}

.f12-about .beliefs::before {
    left: var(--f12-space-6);
    top: var(--about-beliefs-tab-offset);
}

.f12-about .beliefs::after {
    right: var(--f12-space-7);
    bottom: var(--about-beliefs-tab-offset);
}

.f12-about .beliefs__list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: var(--f12-space-3);
}

.f12-about .beliefs__content {
    padding-top: var(--f12-space-2);
}

.f12-about .leaders {
    width: 100%;
}

.f12-about .leaders-slider {
    width: 100%;
}

.f12-about .leaders__shell {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.f12-about .leaders__track {
    display: flex;
    gap: var(--f12-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: var(--f12-space-6);
    scroll-behavior: smooth;
    align-items: flex-end;
}

.f12-about .leaders__track.is-animating {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.f12-about .leaders__track::-webkit-scrollbar {
    display: none;
}

.f12-about .leaders__slide {
    flex: 0 0 auto;
    height: var(--about-leaders-slide-height);
    scroll-snap-align: start;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.f12-about .leaders__slide--cta {
    position: relative;
}

.f12-about .leaders__slide img {
    width: auto;
    max-width: none;
    display: block;
    height: 100%;
    transition: transform var(--about-motion-duration-media) var(--f12-ease-standard);
}

.f12-about .leaders__slide__cta {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, calc(-50% + var(--about-leaders-cta-offset-y)));
    opacity: 0;
    pointer-events: none;
    padding: var(--about-leaders-cta-padding-block) var(--about-leaders-cta-padding-inline);
    border-radius: var(--f12-radius-pill);
    border: 1px solid var(--about-leaders-cta-border-color);
    background: var(--about-leaders-cta-bg);
    color: var(--about-leaders-cta-color);
    text-decoration: none;
    font-size: var(--f12-font-size-sm);
    font-weight: var(--f12-font-weight-bold);
    line-height: 1;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: var(--about-leaders-cta-letter-spacing);
    box-shadow: var(--about-leaders-cta-shadow);
    backdrop-filter: blur(var(--about-leaders-cta-blur));
    transition:
        opacity var(--about-motion-duration-cta) var(--f12-ease-standard),
        transform var(--about-motion-duration-cta) var(--f12-ease-standard),
        background var(--about-motion-duration-cta) var(--f12-ease-standard);
}

.f12-about .leaders__slide--cta:hover .leaders__slide__cta,
.f12-about .leaders__slide--cta:focus-within .leaders__slide__cta {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.f12-about .leaders__slide__cta:hover,
.f12-about .leaders__slide__cta:focus-visible {
    background: var(--about-leaders-cta-bg-hover);
    color: var(--about-leaders-cta-color);
    text-decoration: none;
}

.f12-about .leaders__slide:hover img,
.f12-about .leaders__slide:focus-within img {
    transform: scale(var(--about-image-scale-hover));
}

.f12-about .faq-cta {
    display: grid;
    grid-template-columns: var(--about-faq-media-col-desktop) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--f12-space-8);
}

.f12-about .faq-cta__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--f12-radius-3);
    object-fit: cover;
    display: block;
}

.f12-about .faq-cta__content {
    max-width: var(--about-faq-copy-max);
    min-width: 0;
}

.f12-about .faq-cta .f12-btn {
    white-space: nowrap;
}

@media (max-width: 960px) {
    .f12-about .leaders__slide {
        height: var(--about-leaders-slide-height-tablet);
    }

    .f12-about .faq-cta {
        grid-template-columns: var(--about-faq-media-col-tablet) minmax(0, 1fr);
        align-items: flex-start;
    }

    .f12-about .faq-cta .about-cta-inline {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1024px) {
    .f12-about .about-story-split {
        --f12-split-row-gap: var(--f12-space-8);
        grid-template-areas:
            "media"
            "intro"
            "body"
            "cta";
    }

    .f12-about .about-card--mission {
        padding-right: 0;
    }

    .f12-about .about-card--mission::after {
        content: none;
    }

    .f12-about .about-story-split .f12-split-feature__intro {
        padding-top: var(--f12-space-8);
        border-top: 1px solid var(--f12-color-border-subtle);
    }
}

@media (max-width: 640px) {
    .f12-about .about-video {
        width: 100vw;
        max-width: none;
        margin-inline: calc(50% - 50vw);
    }

    .f12-about .about-video__link,
    .f12-about .about-video__embed {
        border-radius: 0;
    }

    .f12-about .beliefs {
        padding: var(--about-beliefs-padding-mobile);
    }

    .f12-about .faq-cta {
        grid-template-columns: 1fr;
    }

    .f12-about .faq-cta__image {
        max-width: var(--about-faq-media-col-tablet);
    }

    .f12-about .leaders__track {
        padding-inline: var(--f12-space-4);
    }

    .f12-about .leaders__slide {
        height: var(--about-leaders-slide-height-mobile);
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .f12-about .about-page__container {
        padding-inline: var(--f12-space-5);
    }

    .f12-about .beliefs {
        padding: var(--f12-space-10);
    }
}

@media (prefers-reduced-motion: reduce) {
    .f12-about .f12-media-play--pulse,
    .f12-about .f12-media-play--pulse::before,
    .f12-about .f12-media-play--pulse::after {
        animation: none;
    }

    .f12-about .about-video__thumb,
    .f12-about .leaders__slide img,
    .f12-about .leaders__slide__cta {
        transition: none;
    }

    .f12-about .about-video__link:hover img,
    .f12-about .about-video__link:focus-within img,
    .f12-about .leaders__slide:hover img,
    .f12-about .leaders__slide:focus-within img {
        transform: none;
    }

    .f12-about .leaders__track {
        scroll-behavior: auto;
    }
}
