/* hero mission — bold color panel with a photo beside the headline */
.hero-mission__panel {
    isolation: isolate;
}

.hero-mission__img.hero-mission__img {
    object-fit: cover;
}

.hero-mission__title {
    letter-spacing: -0.02em;
}

/* features units — icon cards beside a side heading on a deep primary panel */
.features-units__title {
    letter-spacing: -0.02em;
}

.features-units__badge {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
}

.features-units__text {
    font-size: 0.875rem;
    line-height: 1.625;
}

.features-units__card {
    transition: transform 200ms ease;
}

.features-units__card:hover {
    transform: translateY(-0.25rem);
}

/* cta panel — tinted split promo with a framed photo and two decorative dots */
.cta-panel__text,
.cta-panel__media {
    min-width: 0;
}

.cta-panel__frame {
    aspect-ratio: 4 / 3;
}

.cta-panel__img.cta-panel__img {
    object-fit: cover;
}

.cta-panel__dot {
    flex: none;
    pointer-events: none;
}

.cta-panel__dot--large {
    width: 5rem;
    height: 5rem;
    transform: translate(-1rem, -1rem);
}

.cta-panel__dot--small {
    z-index: 1;
    width: 3.5rem;
    height: 3.5rem;
    transform: translate(1rem, 1rem);
}

@media (max-width: 767.98px) {
    .cta-panel__dot {
        display: none;
    }
}

/* faq questions — hairline accordion with two decorative circles */
.faq-questions__circle {
    pointer-events: none;
}

.faq-questions__circle--top {
    width: 10rem;
    height: 10rem;
    transform: translate(2rem, -2rem);
}

.faq-questions__circle--bottom {
    width: 6rem;
    height: 6rem;
    transform: translate(-1.5rem, 1.5rem);
}

.faq-questions__list details > summary {
    list-style: none;
}

.faq-questions__list details > summary::-webkit-details-marker {
    display: none;
}

.faq-questions__toggle {
    width: 100%;
    text-align: left;
}

.faq-questions__chevron {
    transition: transform 200ms ease;
}

.faq-questions__item details[open] .faq-questions__chevron {
    transform: rotate(180deg);
}

/* cta band — tilted photos flanking a centered closing heading */
.cta-band__photo {
    width: 20rem;
    pointer-events: none;
}

.cta-band__photo--left {
    left: -2.5rem;
    transform: rotate(-8deg);
}

.cta-band__photo--right {
    right: -2.5rem;
    transform: rotate(6deg);
}

.cta-band__img.cta-band__img {
    object-fit: contain;
}

@media (max-width: 1199.98px) {
    .cta-band__photo {
        display: none !important;
    }
}