.section-builder-hero-view .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}

.hero-simple {
    position: relative;
    overflow: hidden;
    min-height: 665px;
    padding: 0;
    background: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    isolation: isolate;
}

.hero-simple__grid {
    position: relative;
    min-height: 100vh;
}

.hero-simple__content,
.hero-simple__pattern {
    grid-column: 1 / -1;
}

.hero-simple__content {
    position: absolute;
    left: 50%;
    top: 50.1%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.375rem;
    /* Wide enough for the About subtitle to hold one line at 40px (761px). */
    width: min(100%, 800px);
    transform: translate(-50%, -50%);
}

.hero-simple__title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5.3vw, var(--text-display));
    font-weight: var(--fw-bold);
    line-height: var(--lh-display);
    letter-spacing: 0;
    max-width: none;
}

/* Children only: the accent word is a span inside the em and has to stay on
   its line. */
.hero-simple__title > em,
.hero-simple__title > span {
    display: block;
}

.hero-simple__title em {
    font-style: italic;
}

.hero-simple__accent {
    color: var(--color-accent-01);
}

/* Sized in em so the logo scales with the title lines under it. The viewBox is
   cut to the ink, so this width is the visible width. The margin is small
   because the title's line box already holds space above its letters. */
.hero-simple--wordmark {
    --hero-simple-wordmark-ems: 7.2625;
}

.hero-simple__wordmark {
    display: block;
    width: calc(var(--hero-simple-wordmark-ems) * 1em);
    max-width: 100%;
    height: auto;
    aspect-ratio: 185.6829 / 33.4197;
    margin: 0 auto 0.05em;
}

.hero-simple__subtitle {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: clamp(1.75rem, 2.65vw, var(--text-title3));
    font-weight: var(--fw-medium);
    line-height: var(--lh-title3);
    letter-spacing: 0;
}

.hero-simple__pattern {
    position: absolute;
    display: block;
    left: 50%;
    bottom: -8rem;
    z-index: 1;
    width: 522px;
    height: 522px;
    transform: translateX(-50%);
    opacity: 0.65;
    pointer-events: none;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .hero-simple {
        min-height: 560px;
    }

    .hero-simple__grid {
        min-height: 78vh;
    }
}

@media (max-width: 768px) {
    .hero-simple {
        min-height: 520px;
    }

    .hero-simple__grid {
        min-height: 72vh;
    }

    .hero-simple__content {
        width: min(100%, calc(100vw - 2rem));
    }

    .hero-simple__title {
        font-size: clamp(2.75rem, 15vw, 4.5rem);
    }

    /* The logo and the line under it read as one lockup, so on phones the pair
       shrinks together until the logo fits, instead of the line breaking
       under a logo already at full width. */
    .hero-simple--wordmark .hero-simple__title {
        font-size: min(
            clamp(2.75rem, 15vw, 4.5rem),
            (100vw - 2 * var(--container-pad)) / var(--hero-simple-wordmark-ems)
        );
    }

    .hero-simple__subtitle {
        font-size: clamp(1.375rem, 7vw, 2rem);
    }

    .hero-simple__pattern {
        bottom: -5rem;
        width: min(430px, 112vw);
        height: auto;
        aspect-ratio: 1;
    }
}