/* --------------------------------------------- */
/* Layout                                        */
/* --------------------------------------------- */

.section {
    width: min(var(--max-width), calc(100% - 32px));
    margin: 0 auto;
    padding: 96px 0;
}

/* --------------------------------------------- */
/* Shared hero                                   */
/* --------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 56px;
    min-height: calc(100vh - 88px);
    padding-top: 76px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    max-width: 940px;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.hero-actions .btn {
    min-width: 240px;
}

/* --------------------------------------------- */
/* Page hero                                     */
/* --------------------------------------------- */

.page-hero {
    padding-top: 150px;
    padding-bottom: 88px;
}

.page-hero h1 {
    max-width: 940px;
    margin-top: 16px;
}

.page-hero .hero-lead {
    max-width: 720px;
    margin-top: 22px;
    color: var(--muted);
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.65;
}

/* --------------------------------------------- */
/* Intro / about sections                        */
/* --------------------------------------------- */

.intro,
.about-preview,
.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.intro p,
.about-preview p,
.about p {
    font-size: 19px;
}

/* --------------------------------------------- */
/* Section heading                               */
/* --------------------------------------------- */

.section-heading {
    max-width: 800px;
    margin-bottom: 38px;
}

/* --------------------------------------------- */
/* Split layouts                                 */
/* --------------------------------------------- */

.split,
.contact-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: start;
}

/* --------------------------------------------- */
/* Grids                                         */
/* --------------------------------------------- */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.service-grid {
    grid-template-columns: repeat(3, 1fr);
}


/* --------------------------------------------- */
/* Responsive                                    */
/* --------------------------------------------- */

@media (max-width: 980px) {
    .hero,
    .intro,
    .about-preview,
    .about,
    .split,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .cards-grid,
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero {
        min-height: auto;
        padding-top: 130px;
    }

    .page-hero {
        padding-top: 132px;
        padding-bottom: 72px;
    }
}

@media (max-width: 640px) {
    .section {
        width: min(var(--max-width), calc(100% - 24px));
        padding: 72px 0;
    }

    .hero {
        gap: 36px;
        padding-top: 116px;
    }

    .page-hero {
        padding-top: 118px;
        padding-bottom: 58px;
    }

    .page-hero h1 {
        margin-top: 12px;
    }

    .page-hero .hero-lead {
        font-size: 17px;
    }

    .intro,
    .about-preview,
    .about,
    .split,
    .contact-layout {
        gap: 32px;
    }

    .cards-grid,
    .service-grid {
        grid-template-columns: 1fr;
    }
}