﻿: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;
        object-position: center 3%;
    }

.home-centered-hero {
    padding: 4.5rem 0 6rem;
    background: var(--dm-invisible-grey);
    text-align: center;
}

.home-centered-hero-content {
    max-width: 70vw;
    margin-inline: auto;
}

.home-centered-hero h1 {
    max-width: 60vw;
    margin-inline: auto;
}

.home-centered-hero p {
    max-width: 60vw;
    margin-inline: auto;
}

@media (min-width:1100px)
{
    .home-centered-hero-content h1 {
        max-width: 800px;
        margin-inline: auto;

    }

    .home-centered-hero-content p {
        max-width: 660px;
        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: .5rem;
    font-size: 16px;
    font-weight:600;
    color: var(--dm-blue);
}

.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 {
    background: var(--dm-invisible-grey);
}

.home-story-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
}

.home-story-feature-image {
    width: 100%;
}

    .home-story-feature-image img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

.home-story-feature-content {
    max-width: 560px;
}

    .home-story-feature-content h2 {
        margin-bottom: 1.5rem;
    }

.home-story-quote {
    max-width: 980px;
    margin: 0 auto;
}

    .home-story-quote p {
        font-size: 1rem;
        line-height: 1.5;
        letter-spacing: -0.05em;
        margin-bottom: 1.5rem;
    }

    .home-story-quote footer {
        color: var(--dm-dark-grey);
    }

    .home-story-quote::before,
    .home-story-quote::after {
        content: none;
    }

    .home-story-quote p:first-of-type::before {
        content: "“";
        color: var(--dm-black);
        font-family: Georgia, serif;
        font-size: 1.8em;
        font-weight: 700;
        line-height: 0;
        vertical-align: -0.25em;
        margin-right: 0.15em;
    }

    .home-story-quote p:last-of-type::after {
        content: "”";
        color: var(--dm-black);
        font-family: Georgia, serif;
        font-size: 1.8em;
        font-weight: 700;
        line-height: 0;
        vertical-align: -0.25em;
        margin-left: 0.15em;
    }


/* Clinical */

.home-clinical-simple {
    background: var(--dm-white);
}

.home-section-centered {
    max-width: 70vw;
    margin: 0 auto 5rem;
    text-align: center;
}

    .home-section-centered p {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: left;
        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: 380px;
        margin-inline: auto;
        font-size: 14px;
        line-height: 1.55;
    }

    .home-clinical-simple-card .button {
        margin-top: .75rem;
    }

    .home-clinical-simple-card p {
        text-align:left;
    }
/* Responsive */
    @media (max-width: 1100px) {
        .home-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-story-feature-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .home-story-feature-image {
        max-width: 100%;
    }

    .home-story-feature-content {
        max-width: 100%;
    }

    .home-clinical-simple-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 700px) {
    .home-centered-hero {
        padding: 3rem 0 4rem;
    }


    .home-centered-hero-content {
        max-width: 80%;
        margin-inline: auto;
    }

    .home-centered-hero h1 {
        max-width: 640px;
        margin-inline: auto;
    }

    .home-centered-hero p {
        max-width: 640px;
        margin-inline: auto;
    }

    .home-section-centered {
        max-width: 80%;
        margin: 0 auto 5rem;
        text-align: center;
    }

   .home-process-grid {
        grid-template-columns: 1fr;
    }

    .home-story-feature-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .home-story-feature-image {
        max-width: 600px;
    }

    .home-story-feature-content {
        max-width: 680px;
    }
}



.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;
    }
