.container {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
}
/* ========================================
   GLOBAL LAYOUT
======================================== */

.container {
    width: min(calc(100% - 2.5rem), var(--container-width));

    margin-inline: auto;
}

.section {
    padding-block: var(--section-padding);
}

.section-light {
    background: var(--color-background-light);
}

.section-heading {
    max-width: 700px;

    margin-bottom: 3rem;
}

.section-heading.centered {
    margin-inline: auto;

    text-align: center;
}

.section-action {
    margin-top: 2rem;

    text-align: center;
}


/* ========================================
   HERO
======================================== */

.hero {
    padding-block: 5.5rem;

    background: linear-gradient(
        90deg,
        var(--color-primary-light) 0%,
        #ffffff 45%,
        #ffffff 100%
    );
}

.hero-grid {
    display: grid;

    grid-template-columns: 1fr 1.05fr;

    align-items: center;

    gap: 3.5rem;
}

.hero-content {
    max-width: 600px;
}

.hero-lead {
    max-width: 560px;

    margin-bottom: 2rem;

    color: var(--color-text-light);

    font-size: 1.1rem;
}

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 1rem;
}


/* ========================================
   BENEFITS
======================================== */

.benefit-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 0;
}

.benefit-card {
    padding: 1.25rem 1.5rem;

    text-align: center;

    border-right: 1px solid var(--color-border);
}

.benefit-card:last-child {
    border-right: none;
}

.benefit-card p {
    margin-bottom: 0;

    color: var(--color-text-light);

    font-size: 0.9rem;
}


/* ========================================
   SERVICES
======================================== */

.service-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;
}


/* ========================================
   RESOURCES
======================================== */

.resource-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 1rem;
}


/* ========================================
   PUBLICATIONS
======================================== */

.publication-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;
}


/* ========================================
   PATHART
======================================== */

.pathart-grid {
    display: grid;

    grid-template-columns: 1.1fr 1fr;

    align-items: center;

    gap: 4rem;
}

.pathart-content {
    max-width: 550px;
}

.pathart-content p:not(.eyebrow) {
    margin-bottom: 2rem;

    color: var(--color-text-light);
}


/* ========================================
   CONTACT CTA
======================================== */

.contact-cta {
    padding-block: 3.5rem;

    border-top: 1px solid var(--color-border);
}

.contact-cta-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 3rem;
}

.contact-cta-inner h2 {
    margin-bottom: 0.6rem;

    font-size: 2rem;
}

.contact-cta-inner p:last-child {
    max-width: 650px;

    margin-bottom: 0;

    color: var(--color-text-light);
}


/* ========================================
   FOOTER
======================================== */

.footer-grid {
    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;

    gap: 4rem;

    padding-block: 4rem;
}

.footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding-block: 1.5rem;

    border-top: 1px solid var(--color-border);
}
/* ========================================
   SERVICES PAGE
======================================== */


/* Services Hero */

.services-hero {
	padding-block: 5rem;
	background: var(--color-background-light);
}

.services-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	align-items: center;
	gap: 4rem;
}

.services-hero-content {
	max-width: 600px;
}

.services-hero-lead {
	max-width: 560px;
	margin-bottom: 2rem;

	color: var(--color-text-light);

	font-size: 1.05rem;
}

.services-hero-image {
	width: 100%;
	overflow: hidden;
}

.services-hero-image img {
	display: block;

	width: 100%;
	height: 400px;

	object-fit: cover;
}


/* Individual Services */

.service-detail-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;

	align-items: center;

	gap: 5rem;
}

.service-detail-reverse {
	grid-template-columns: 1.1fr 0.9fr;
}

.service-detail-image {
	overflow: hidden;
}

.service-detail-image img {
	display: block;

	width: 100%;
	height: 360px;

	object-fit: cover;
}

.service-detail-content {
	max-width: 600px;
}


/* Additional Services */

.additional-service-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	gap: 1.25rem;
}


/* Turnaround */

.turnaround-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	max-width: 1000px;

	margin-inline: auto;
}


/* FAQ */

.services-faq-grid {
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;

	align-items: center;

	gap: 5rem;

	max-width: 1000px;

	margin-inline: auto;
}


/* CTA */

.services-cta {
	padding-block: 3rem;

	border-top: 1px solid var(--color-border);
}

.services-cta-inner {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 3rem;
}

.services-cta-content {
	display: flex;

	align-items: center;

	gap: 1.5rem;
}

.services-cta-content h2 {
	margin-bottom: 0.4rem;

	font-size: 1.6rem;
}

.services-cta-content p {
	margin-bottom: 0;

	color: var(--color-text-light);
}