.matra-homepage {
    --home-width: 88rem;
    --home-gutter: clamp(1.25rem, 4.5vw, 5rem);
    --home-space: clamp(3.5rem, 7.5vw, 8rem);
    --hero-text: var(--brand-white);
    --hero-shade: rgba(11, 49, 52, .94);
}

.matra-homepage .wrap {
    width: min(calc(100% - 2 * var(--home-gutter)), var(--home-width));
}

.matra-homepage header .bar { padding-block: 1.15rem; }
.matra-homepage .brand { font-size: 1rem; font-weight: 500; }
.matra-homepage nav { gap: .5rem clamp(.75rem, 2vw, 2rem); }
.matra-homepage nav a { text-decoration: none; padding-block: .4rem; }
.matra-homepage nav a:hover { text-decoration: underline; }
.matra-homepage section { padding-block: var(--home-space); }
.matra-homepage h2 { max-width: 22ch; letter-spacing: -.04em; }
.matra-homepage h3,
.matra-homepage summary { font-weight: 500; }

.matra-homepage .hero {
    padding: 0;
    background: var(--brand-teal);
    color: var(--hero-text);
}

.matra-homepage .matra-hero-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.matra-hero-copy {
    width: min(calc(100% - 2 * var(--home-gutter)), var(--home-width));
    margin-inline: auto;
    padding-block: clamp(3rem, 6vw, 7rem);
}

.matra-homepage .matra-hero-grid h1 {
    max-width: 15ch;
    font-size: clamp(2.65rem, 6.1vw, 7rem);
    font-weight: 400;
    line-height: .99;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.matra-hero-copy > p:not(.eyebrow) { max-width: 45ch; }

.matra-homepage .hero .cta {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: .65rem 1.15rem;
    border-color: var(--brand-ivory);
    background: var(--brand-ivory);
    color: var(--brand-teal);
    text-decoration: none;
}

.matra-homepage .hero .cta:hover {
    background: var(--brand-white);
    border-color: var(--brand-white);
}

.matra-homepage .hero .cta:focus-visible {
    outline-color: var(--hero-text);
}

.matra-homepage .hero figcaption {
    padding: .7rem var(--home-gutter);
    color: var(--hero-text);
}

.matra-project-meta { font-size: .875rem; font-weight: 500; }
.matra-homepage .matra-project-grid { grid-template-columns: minmax(0, 1fr); }
.matra-homepage .matra-project-image figcaption { font-weight: 400; }

.matra-homepage #services { border-top: 1px solid var(--line); }
.matra-homepage #services .grid { gap: 0; }
.matra-homepage #services article {
    border: 0;
    border-top: 1px solid var(--line);
    padding: 1.4rem 0;
}

.matra-homepage #faq summary { padding-block: .2rem; }

@media (min-width: 56rem) {
    .matra-homepage .matra-hero-grid {
        grid-template-areas: "hero";
        min-height: clamp(34rem, 51vw, 55rem);
        align-items: end;
        position: relative;
        isolation: isolate;
    }

    .matra-homepage .hero .matra-project-image {
        grid-area: hero;
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .matra-homepage .hero .matra-project-image img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .matra-homepage .hero .matra-project-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--hero-shade) 0%, var(--hero-shade) 33%, transparent 76%);
    }

    .matra-homepage .hero figcaption {
        position: absolute;
        z-index: 1;
        right: var(--home-gutter);
        bottom: 1rem;
        padding: .35rem .65rem;
        background: var(--brand-teal);
    }

    .matra-hero-copy { grid-area: hero; padding-bottom: clamp(5rem, 8vw, 9rem); }

    .matra-homepage .matra-project-grid {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
        align-items: start;
    }

    .matra-homepage .matra-project-grid figure:first-child { grid-row: span 2; }

    .matra-homepage #services article { padding-inline: 1.5rem; }
    .matra-homepage #services article:first-child { padding-left: 0; }
    .matra-homepage #services article + article { border-left: 1px solid var(--line); }
}