:root {
    --top-bar-height: 85px;
    --row-max-width: 77.875rem;
    --column-inline-padding: 0.9375rem;
    --shadow-100: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-300: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-400: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --shadow-700: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    --shadow-900: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    --brand-clr-appleone: hsla(115, 32%, 45%, 1);
    --brand-clr-allstem: hsla(160, 100%, 16%, 1);
    --brand-clr-allswell: hsla(176, 37%, 36%, 1);
    --brand-clr-agileone: hsla(29, 79%, 60%, 1);
    --brand-clr-allsource: var(--brand-clr-agileone);
    --brand-clr-actonegvt: hsla(188, 24%, 58%, 1);
    --primary-400: var(--brand-clr-appleone);
    --neutral-100: hsla(0, 0%, 100%, 1);
    --neutral-400: hsla(0, 0%, 62%, 1);
    --neutral-700: hsla(139, 2%, 35%, 1);
    --neutral-900: hsla(0, 0%, 10%, 1);
}

.clr-neutral--100 {
    color: var(--neutral-100) !important;
}

.bg-primary--400 {
    background-color: var(--primary-400) !important;
}

.box-shadow--100 {
    box-shadow: var(--shadow-100);
}

.box-shadow--300 {
    box-shadow: var(--shadow-300);
}

.box-shadow--400 {
    box-shadow: var(--shadow-400);
}

.box-shadow--700 {
    box-shadow: var(--shadow-700);
}

.box-shadow--900 {
    box-shadow: var(--shadow-900);
}

.pg-landing .section-hero {
    background: url(/sourcewell/imgs/sourcewell-hero-img.jpg) no-repeat center center;
    background-size: cover;
    margin-top: var(--top-bar-height);
    min-height: 51.45vw;
    display: grid;
    align-content: end;
}

.padding-block--32 {
    padding-block: 2rem;
}

.pg-landing .row {
    max-width: var(--row-max-width);
}

.pg-landing--sourcewell .section-hero {
    margin-top: var(--top-bar-height);
    min-height: 51.45vw;
    display: grid;
    align-content: end;
}


.pg-landing .heading {
    font-family: "Montserrat",Segoe,"Segoe UI",Optima,Arial,Sans-Serif;
    font-weight: 700;
    font-style: normal;
    text-wrap: balance;
}

.heading--hero {
    font-size: clamp(1.625rem, 5.5vw + -0.025rem, 4.375rem);
    line-height: 1;
    color: var(--neutral-700);
}

@media (max-width:26.25em){
    .heading--hero{
        color:var(--neutral-900);
        text-shadow:var(--shadow-100);
    }
}

.heading--hero small {
    font-size: .71em;
    font-weight: 400;
    display: block;
    line-height: 1.2;
    color: var(--brand-clr-appleone);
}
.pg-landing .heading--secondary {
    font-size: clamp(2rem, 1vw + 1.7rem, 2.5rem);
}

.pg-landing p, .pg-landing li {
    font-size: clamp(1rem, 0.5vw + 0.85rem, 1.25rem);
    line-height: clamp(1.7rem, 0.35vw + 1.595rem, 1.875rem);
    margin-bottom:1.5em;
    color: #58595B;
}

    .pg-landing [class^="clr-"] li{
        color:inherit;
    }

    .section-hero--overlay {
        border-image: fill 1 linear-gradient(hsl(0 0% 62% / 0) 32%,hsl(0 0% 100% / 1) 78%)
    }

.services {
    background-color: hsl(0deg 0% 100% / 21.18%);
    box-shadow: var(--shadow-100);
    border-radius: 10px;
    padding: 2rem clamp(1.5rem, 3vw + 0.6rem, 3rem);
    display: grid;
    gap: 3rem;
    margin-top: .5rem;
    overflow: hidden;
    
}
.services__heading {
    font-family: "Montserrat",Segoe,"Segoe UI",Optima,Arial,Sans-Serif;
    font-size: clamp(1.5rem, 0.675vw + 1.325rem, 2rem);
    line-height: clamp(1.95rem, 0.337vw + 1.863rem, 2.2rem);
    grid-column: 1/-1;
}

.service-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 1rem;
    border: 2px solid var(--brand-clr-appleone);
    width: 300px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-100);
}

.service-card__img {
    width: 100%;
}

.service-card__link {
    padding: .5em 1.5em;
    font-size: 1.0rem;
    background-color: hsl(0deg 0% 100% / 50%);
    border-radius: 999px;
    border: 1px solid #e7e7e7;
    box-shadow: var(--shadow-100);
    width: 100%;
    text-align:center;
    transition: box-shadow .3s cubic-bezier(.25,.8,.25,1), color .25s ease-in-out, border-color .3s cubic-bezier(.25,.8,.25,1), background-color .3s cubic-bezier(.25,.8,.25,1) !important;
}

    .service-card__link:is(:hover,:focus,:active) {
        box-shadow: var(--shadow-300);
        color: var(--neutral-100);
        background-color: var(--brand-clr-appleone);
        border-color: #bedbab;
    }

    @media (min-width:45em) {
        .services {
        grid-template-columns: repeat(2, 1fr);
    }
}

.section-contact {
    position: relative;
    padding: 2rem var(--column-inline-padding);
}

.section-contact__form-container {
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid hsla(220, 2%, 35%, 1);
    box-shadow: var(--shadow-300);
    padding: 3rem 3.625rem;
}

    .section-contact__form-container:has(.mktoForm:focus-within) {
        box-shadow: var(--shadow-700);
    }

@media (min-width:37.5rem) {
    .section-contact {
        display: grid;
        grid-template-columns: minmax(var(--column-inline-padding),1fr) minmax(0,calc(var(--row-max-width)/4)) minmax(0,calc(var(--row-max-width)/4)) minmax(0,calc(var(--row-max-width)/2)) minmax(var(--column-inline-padding),1fr);
        grid-template-rows: 82px 1fr 70px;
        margin-block: 3rem;
        padding: 0;
    }

    .section-contact__img {
        position: relative;
        grid-row: 2/3;
        grid-column: 3/6;
        filter: initial;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;  
    }

    .section-contact__form-container {
        grid-row: 1/4;
        grid-column: 2/4;
    }
}

@media screen and (max-width:640px) {
    .mktoForm .mktoFormCol {
        width: 100% !important
    }
}


.mktoForm {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1rem;
    row-gap: 1.75rem;
    width: 100% !important;
}

.pg-landing .mktoForm .mktoGutter {
    display: none !important;
}


    /*.mktoFormRow:nth-of-type(3), .mktoFormRow:nth-of-type(6) {
    grid-column: 1 / span 2;
}*/
    .mktoForm .mktoFormCol {
        float: none !important;
        width: 100%;
        margin-bottom: 0 !important;
    }

.mktoFieldWrap {
    position: relative;
    float: none !important;
}

.mktoField {
    width: 100% !important;
}

.floating-labels .mktoField::placeholder {
    color: transparent;
}

.floating-labels .mktoLabel {
    font-size: clamp(0.75rem, 0.462vw + 0.63rem, 1rem);
    font-weight: 500 !important;
    color: #58595b;
    float: none !important;
    display: flex;
    row-gap: .5em;
    position: absolute;
    top: 25px;
    left: .5em;
    /*transform: translateX(-50%);*/
    transform-origin: left center;
    transition: transform 250ms ease-in-out, left 500ms ease-in;
    width: max-content !important;
    align-items: center;
    padding-top: 0 !important;
}

.mktoFieldWrap select {
    margin-top: 1.25em !important;
}

    .mktoFieldWrap select ~ .mktoLabel {
        top: -.25em;
        font-size: clamp(0.75rem, 0.231vw + 0.69rem, 0.875rem);
    }

.floating-labels .mktoForm textarea[rows="2"] ~ .mktoLabel {
    top: 60%;
}

.mktoLabel .mktoAsterix {
    color: indianred;
    font-weight: 600;
}

.mktoFormRow .mktoFormCol .mktoFieldWrap input:not([type="checkbox"],[type="radio"]) {
    padding: .5em .25em;
    font-size: clamp(0.75rem, 0.462vw + 0.63rem, 1rem);
    min-height: auto;
    height: auto;
    border: 1px solid hsla(220, 2%, 35%, 1);
}

.floating-labels .mktoField:not(select):focus ~ .mktoLabel,
.floating-labels .mktoField:not(:placeholder-shown,select) ~ .mktoLabel {
    transform: translateY(-150%) scale(0.80);
    /*left: 0;*/
    opacity: .75;
}

.mktoButtonRow {
    margin-top: 0 !important;
}

.mktoButtonWrap {
    margin-left: 0 !important;
}

.pg-landing--sourcewell .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
    background-image: none;
    border: 0;
    font-size: clamp(1rem, 0.462vw + 0.88rem, 1.25rem);
    background-color: var(--brand-clr-appleone);
    padding: .5em;
    transition: background-color .25s ease-out
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:is(:hover,:focus) {
    border: none !important;
    background-color: #58595b;
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active {
    background-image: none !important;
    background-color: hsl(188deg 17.54% 19.55%) !important;
}


@media (orientation: landscape) {
    .pg-landing--sourcewell .section-hero {
        min-height: 30.45vw;
        background-position-y: top;
    }
}