/* SECTIONS */

/* HERO */
.hero {
    padding: 0;
}
.hero--has-title {
    position: relative;
    aspect-ratio: 12 / 5;
    overflow: hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.hero--has-title .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero--has-title .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--has-title .container-fluid {
    position: relative;
    z-index: 2;
    height: 100%;
}

.hero--has-title .hero__content {
    height: 100%;
    display: flex;
    align-items: flex-end;      /* Bottom */
    justify-content: flex-start;/* Left */
    padding-bottom: var(--space-l);
    padding-left:var(--space-l);
}

.hero--has-title h1 {
    margin: 0;
    color: var(--white);
}

@media (max-width: 991.98px) {
    .hero--has-title .hero__content {
        padding-bottom: 25px;
        padding-left:15px;
    }
}

/* SPLIT CONTENT */

.section-split {
    --split-container-max: var(--container-max-xl);
    padding-block: 0;
}

@media (min-width: 1400px) {
    .section-split {
        --split-container-max: var(--container-max-xxl);
    }
}

/* .section-split__row {
    min-height: 28rem;
} */

.section-split__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--section-split-bg, var(--white));
    color: var(--section-split-color, var(--black));
}

.section-split__content a {
    color: inherit;
}

.section-split__content a:hover {
    color: inherit;
    opacity: 0.75;
}

.section-split__body {
    width: 100%;
    padding-block: var(--space-l);
    --split-gutter: clamp(1rem, 5vw, 3.75rem);
    --split-outer: max(0px, calc((100vw - var(--split-container-max)) / 2));
}

.section-split__row > :first-child .section-split__body {
    padding-left: max(var(--split-gutter), var(--split-outer));
    padding-right: var(--split-gutter);
}

.section-split__row > :last-child .section-split__body {
    padding-right: max(var(--split-gutter), var(--split-outer));
    padding-left: var(--split-gutter);
}

.section-split__body em {
    color: var(--primary);
}

.section-split__figure {
    height: 100%;
    margin: 0;
    min-height: inherit;
}

.section-split__figure img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .section-split__row {
        min-height: auto;
    }

    .section-split__body {
        padding-block: var(--space-m);
    }

    .section-split__row > :first-child .section-split__body,
    .section-split__row > :last-child .section-split__body {
        padding-inline: var(--split-gutter);
    }

    .section-split__figure {
        min-height: 16rem;
    }
    
    /* Reverse columns on mobile only */
    .section-split--reverse-mobile .section-split__row {
        flex-direction: column-reverse;
    }
}

/* MILESTONES */

.milestones {
    background-color: var(--grey-light);
    padding-inline: var(--space-m);
}

.milestones__title {
    text-align: center;
    margin-bottom: var(--space-m);
}

.milestones__content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    justify-content: center;
}

.milestones__item {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.milestones__item p {
    margin: 0;
    font-family: 'Pixelify Sans';
    color: var(--primary);
    font-size: 4rem;
    margin: 0;
    line-height: .75;
}

.milestones__item--big p {
    font-size: 7rem;
}

.milestones__item-label {
    text-transform: uppercase;
}

.milestones__item-number .odometer {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.milestones__item-number .odometer-digit-spacer {
    font-family: inherit;
    font-size: inherit;
}

@media (max-width: 991.98px) {
    .milestones {
        padding-inline: var(--space-s);
    }
    .milestones__content {
        row-gap: var(--space-s);
        column-gap: var(--space-l);
    }
    .milestones__item p {
        font-size: 3rem;
    }
    .milestones__item--big p {
        font-size: 4rem;
    }
}

/* CARDS */

.cards {
    background-color: var(--grey-light);
}

.cards__title {
    text-align: center;
    margin-bottom: var(--space-l);
}

.cards__title h2 {
    max-width: 20ch;
    margin: 0 auto;
}

.cards__item {
    border: 1px solid var(--primary);
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-m);
    background: var(--grey-light);
    min-height: min(18vw, 16rem);
}

.cards__item-front {
    backface-visibility: hidden;
    transition: transform 0.6s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-l);
    min-height: min(18vw, 16rem);

}
    .cards__item-front *{
        margin-bottom:0;
    }
    .cards__item-front > h3:first-child {
        color: var(--primary);
        margin-bottom:0;
        font-weight: bold;
    }

.cards__item-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    transform: translateY(100%);
    backface-visibility: hidden;
    transition: transform 0.6s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-l);
    min-height: min(18vw, 16rem);
}
    .cards__item-back *{
        margin-bottom:0;
    }

.cards__item:hover .cards__item-front {
    transform: translateY(-100%);
}

.cards__item:hover .cards__item-back {
    transform: translateY(0);
}

@media (max-width: 991.98px) {
    .cards__item {
        margin-bottom: var(--space-s);
    }
    .cards__item-back {
        position: relative;
        transform: translateY(0);
        height: auto;
    }

    .cards__item-front {
        padding: var(--space-s) var(--space-s) var(--space-xxs) var(--space-s);
        background-color: var(--white);
    }

    .cards__item-back {
        padding: var(--space-xxs) var(--space-s) var(--space-m) var(--space-s);
        background-color: var(--white);
    }
    .cards__item:hover .cards__item-front {
        transform: translateY(0);
    }
    
    .cards__item:hover .cards__item-back {
        transform: translateY(0);
    }
    
    .cards__title {
        margin-bottom: var(--space-m);
    }
    
    .cards__item-front p {
        display: none;
    }
}

/* CTA */

.cta {
    position: relative;
    overflow: hidden;
    background: var(--cta-bg);
    color: var(--cta-text);
    text-align: center;
}

/**
 * Existing image-background variant.
 * Only applied when there is an image and no video.
 */
.cta--has-bg-image {
    background-color: var(--cta-bg);
    background-image: var(--cta-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/**
 * Video background.
 */
.cta__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.cta__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/**
 * Keep the CTA content above the video.
 */
.cta > .container {
    position: relative;
    z-index: 1;
}

.cta h2 {
    color: var(--cta-title);
}

.cta__button {
    padding-top: var(--space-s);
}

.cta__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
}

.cta__text {
    max-width: 55rem;
}

.cta__text p:last-child {
    margin-bottom: 0;
}

/* NUMBERS */

.numbers {
    background-color: var(--grey-light);
}

.numbers__intro {
    text-align: center;
    margin-bottom: var(--space-l);
    margin-inline: auto;
    max-width: 55rem;
}

.numbers__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--white);
    aspect-ratio: 1/1;
    margin-bottom: var(--space-m);
}

.numbers__item-title {
    text-align: center;
    background-color: var(--primary);
    color: var(--white);
    padding: var(--space-xs);
    width: 100%;
}

.numbers__item-title h3 {
    font-family: 'Pixelify Sans', sans-serif;
    font-size: 4.6rem;
    line-height: 1;
    font-weight: normal;
    line-height: 1;
    margin-bottom: 0;
}

.numbers__item-content {
    text-align: center;
    padding: var(--space-m);
    width: 100%;
    text-transform: uppercase;
}

.numbers__item-footer {
    text-align: center;
    width: 100%;
    text-transform: uppercase;
}

.numbers__item--img {
    position: relative;
}

.numbers__item--img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .numbers__item-title h3 {
        font-family: 'Pixelify Sans', sans-serif;
        font-size: 3rem;
    }
    .numbers__item-content {
        padding: var(--space-s);
    }
    .numbers__item {
        margin-bottom: 1.5rem;
    }
}

/* FEATS */
.feats__intro h2 {
    padding-bottom: var(--space-m);
}

.feats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
}

.feats__item-title h3 {
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    font-weight: bold;
}

.feats__item-content {
    max-width: 55rem;
}

.feats__item-content em {
    color: var(--primary);
}


@media (max-width: 991.98px) {
    .feats__item {
        margin-bottom: var(--space-m);
        gap: var(--space-s);
    }
}

/* 2026 BG */
section.feat__bg {
    overflow: hidden;
}

.feat__bg .feats__item-img {
    position: relative;
}

.feat__bg .feats__item-img img {
    position: relative;
    z-index: 2;
}

.feat__bg .feats__item-img:after {
    content: url('../img/bdts-26-quantum.png');
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-30%, -50%) scale(.8);
    z-index: 1;
    mix-blend-mode: multiply;
}

.feat__bg .feats__item-img:before {
    content: url('../img/bdts-26-quantum.png');
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(30%, -50%) scale(.8);
    z-index: 1;
    mix-blend-mode: multiply;
}

section.card__bg {
    position: relative;
    overflow: hidden;
}

section.card__bg .cards__item-front {
    background: var(--grey-light);
}

section.card__bg .cards__item {
    z-index: 2;
}

.card__bg:after {
    content: url('../img/bdts-26-quantum.png');
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-70%, -50%);
    z-index: 0;
    mix-blend-mode: multiply;
}

.card__bg:before {
    content: url('../img/bdts-26-quantum.png');
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(70%, -50%);
    z-index: 0;
    mix-blend-mode: multiply;
}

@media (max-width: 991.98px) {
    .feat__bg .feats__item-img:after {
        left: 50%;
        transform: translate(-50%, -50%) scale(.35);
    }
    .feat__bg .feats__item-img:before {
        display: none;
    }
    section.card__bg .cards__item-front {
        background: var(--white);
    }
}

/* PAGE LEGAL */
article.page {
    max-width: 55rem;
    margin: 0 auto;
}

article.page h1 {
    font-family: 'Monument Extended', sans-serif;
    font-size: 3rem;
    line-height: 1.2;
    font-weight: bold;
    margin-block: var(--space-m);
    text-align: center;
}

@media (max-width: 991.98px) {
    article.page h1 {
        margin-top: 0;
        font-size: 1.75rem;
    }
}