﻿:root {
    --dm-black: #1E1E1E;
    --dm-dark-grey: #828282;
    --dm-medium-grey: #D1D1D1;
    --dm-light-grey: #EDEDED;
    --dm-invisible-grey: #F9F9F9;
    --dm-white: #FFFFFF;
    --dm-blue: #284B8F;
    --dm-blue-hover: #1F3F7A;
    --container: 1360px;
    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    --space-xxl: 10rem;
}



/* Home alternative */

.home-top-image {
    width: 100%;
    background: var(--dm-light-grey);
}

    .home-top-image img {
        width: 100%;
        height: clamp(260px, 32vw, 430px);
        object-fit: cover;
    }

.home-centered-hero {
    padding: 4.5rem 0 6rem;
    background: var(--dm-invisible-grey);
    text-align: center;
}

.home-centered-hero-content {
    max-width: 720px;
    margin-inline: auto;
}

.home-centered-hero h1 {
    max-width: 640px;
    margin-inline: auto;
}

.home-centered-hero p {
    max-width: 640px;
    margin-inline: auto;
}

.home-centered-hero .actions {
    justify-content: center;
}

/* Workflow */

.home-workflow-visual {
    background: var(--dm-white);
}

.home-workflow-intro {
    margin-bottom: 4rem;
}

    .home-workflow-intro .section-content .button {
        margin-top: .5rem;
    }

.home-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.home-process-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 1.5rem;
}

.home-process-number {
    display: block;
    margin-bottom: .75rem;
    font-size: 13px;
    color: var(--dm-dark-grey);
}

.home-process-card h3 {
    margin-bottom: .75rem;
    font-size: 20px;
    font-weight: 500;
}

.home-process-card p {
    font-size: 14px;
    line-height: 1.55;
}

/* Story feature */

.home-story-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--dm-invisible-grey);
}

.home-story-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    max-height: 680px!important;
    object-fit: cover;
}

.home-story-feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 560px;
    padding: 6rem 4rem;
}

    .home-story-feature-content h2 {
        margin-bottom: 1.5rem;
    }

/* Clinical */

.home-clinical-simple {
    background: var(--dm-white);
}

.home-section-centered {
    max-width: 680px;
    margin: 0 auto 5rem;
    text-align: center;
}

    .home-section-centered p {
        margin-bottom: 2rem;
    }

.home-clinical-simple-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.home-clinical-simple-card {
    text-align: center;
}

    .home-clinical-simple-card img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        margin-bottom: 2rem;
    }

    .home-clinical-simple-card h3 {
        margin-bottom: 1rem;
        font-size: 20px;
        font-weight: 500;
    }

    .home-clinical-simple-card p {
        max-width: 280px;
        margin-inline: auto;
        font-size: 14px;
        line-height: 1.55;
    }

    .home-clinical-simple-card .button {
        margin-top: .75rem;
    }

/* Responsive */

@media (max-width: 1100px) {
    .home-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-story-feature {
        grid-template-columns: 1fr;
    }

    .home-story-feature-image img {
        min-height: auto;
        aspect-ratio: 16 / 9;
    }

    .home-story-feature-content {
        max-width: none;
        padding: 4rem 2rem;
    }

    .home-clinical-simple-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 700px) {
    .home-centered-hero {
        padding: 3rem 0 4rem;
    }

    .home-process-grid {
        grid-template-columns: 1fr;
    }

    .home-story-feature-content {
        padding: 3rem 1.5rem;
    }
}



.home-quote {
    max-width: 980px;
    margin: 0 auto;
    padding-left: 2rem;
    border-left: 5px solid var(--dm-blue);
    border-radius: 5px;
}

    .home-quote p {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
