/* Block: hero-intro */
.hero-intro {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Figma opens on a 969px band under the header; cap it so tall screens
       do not push the logo strip out of reach. */
    min-height: min(72vh, calc(780 * var(--tgc-u)));
    padding: calc(calc(60 * var(--tgc-u)) + var(--tgc-header-h)) 0 calc(96 * var(--tgc-u));
    text-align: center;
}

.hero-intro__inner {
    position: relative;
    z-index: 1;
    max-width: calc(960 * var(--tgc-u));
    margin: 0 auto;
    padding: 0 var(--tgc-gutter);
}

.hero-intro .wordmark {
    justify-content: center;
}

.hero-intro__title {
    margin: calc(34 * var(--tgc-u)) auto 0;
    max-width: calc(900 * var(--tgc-u));
    font-family: var(--tgc-font-display);
    font-size: calc(34 * var(--tgc-ut));
    font-weight: 300;
    line-height: 1.34;
    letter-spacing: -0.01em;
    color: var(--tgc-ink);
    text-wrap: balance;
}

.hero-intro__title strong {
    font-weight: 600;
}

/*
 * The second statement, with the follow line under it. In the flow under the
 * headline by default; once scripts/tgc-home.js is running it sits over the
 * headline instead and the two trade places as --swap runs from 0 to 1.
 */
.hero-intro__second {
    margin: calc(48 * var(--tgc-u)) auto 0;
    max-width: calc(1500 * var(--tgc-u));
    padding: 0 var(--tgc-gutter);
    font-family: var(--tgc-font-display);
    /* A step under the 60 display size: with the follow line it is six or
       seven lines, and at full display size it crowded the screen. Phones
       have their own size below. */
    font-size: calc(50 * var(--tgc-ut));
    font-weight: 400;
    line-height: 1.167;
    color: var(--tgc-ink);
    text-wrap: balance;
}

/* Same voice as the statement it finishes, so it reads as one run of copy;
   the heading tag is for the outline, not for a different look. */
.hero-intro__follow {
    margin-top: calc(44 * var(--tgc-u));
    font: inherit;
    color: inherit;
    text-wrap: balance;
}

/*
 * Swapping. The two share one grid cell rather than the statement being
 * absolutely placed over the headline, so the hero is as tall as the longer
 * of the pair: the statement and its follow line always fit between the
 * header and the logo strip, instead of spilling down over the logos.
 */
.tgc-hero-swap .hero-intro__inner {
    display: grid;
    width: 100%;
    max-width: calc(1500 * var(--tgc-u));
}

.tgc-hero-swap .hero-intro__first,
.tgc-hero-swap .hero-intro__second {
    grid-area: 1 / 1;
    align-self: center;
}

/* The headline is gone before the statement arrives, so the two never sit
   half-faded on top of each other. */
.tgc-hero-swap .hero-intro__first {
    opacity: clamp(0, 1 - var(--swap, 0) * 2.4, 1);
    transform: translate3d(0, calc(var(--swap, 0) * -90px), 0);
}

.tgc-hero-swap .hero-intro__second {
    margin: 0;
    padding: 0;
    opacity: clamp(0, (var(--swap, 0) - 0.42) / 0.5, 1);
    transform: translate3d(0, calc((1 - var(--swap, 0)) * 70px), 0);
    pointer-events: none;
}

@media (max-width: 768px) {
    .hero-intro {
        min-height: min(64vh, 520px);
        padding: calc(32px + var(--tgc-header-h)) 0 56px;
    }

    .hero-intro__title {
        font-size: calc(24 * var(--tgc-ut));
        margin-top: calc(24 * var(--tgc-u));
    }

    /* A step under the h2 size: with the follow line the statement is two
       paragraphs, and both have to clear the header and still leave the logo
       strip on screen in a phone's toolbar-shortened viewport. */
    .hero-intro__second {
        padding: 0 20px;
        font-size: calc(28 * var(--tgc-ut));
    }

    .hero-intro__follow {
        margin-top: 18px;
    }
}