/* ==========================================================
   WHOLISTIC CARE PROFESSIONALS
   CONTACT PAGE
========================================================== */

.contact-hero *,
.contact-options *,
.contact-direct *,
.contact-form-section *,
.contact-next * {
    box-sizing: border-box;
}


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

.contact-hero {
    position: relative;
    overflow: hidden;

    padding: 160px 5% 110px;

    background:
        linear-gradient(
            135deg,
            #fafaf7 0%,
            #f5f8fa 48%,
            #edf6fa 100%
        );
}


.contact-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 85px;
}


.contact-page-index {
    color: var(--wcp-muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.contact-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(300px, .6fr);

    gap: 80px;

    align-items: end;
}


.contact-hero h1 {
    max-width: 1000px;

    margin: 0;

    color: var(--wcp-forest-deep);

    font-size:
        clamp(68px, 8vw, 120px);

    line-height: .87;
    letter-spacing: -.075em;
    font-weight: 600;
}


.contact-hero h1 em {
    display: block;

    color: var(--wcp-sage);

    font-weight: 400;
}


.contact-hero-copy {
    max-width: 430px;

    padding-bottom: 8px;
}


.contact-hero-copy p {
    margin: 0 0 30px;

    color: var(--wcp-muted);

    font-size: 16px;
    line-height: 1.7;
}


.contact-scroll-link {
    display: inline-flex;
    align-items: center;

    gap: 24px;

    color: var(--wcp-forest) !important;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none !important;
}


.contact-scroll-link span {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(7,29,85,.12);

    border-radius: 50%;

    transition:
        transform .25s ease,
        background .25s ease;
}


.contact-scroll-link:hover span {
    transform: translateY(4px);

    background:
        rgba(47,164,215,.08);
}


/* HERO ORBITS */

.contact-orbit {
    position: absolute;

    border:
        1px solid rgba(47,164,215,.11);

    border-radius: 50%;

    pointer-events: none;
}


.contact-orbit-one {
    width: 600px;
    height: 600px;

    right: -330px;
    top: -230px;

    box-shadow:
        0 0 0 90px rgba(47,164,215,.022),
        0 0 0 180px rgba(47,164,215,.014);
}


.contact-orbit-two {
    width: 170px;
    height: 170px;

    left: -100px;
    bottom: -60px;
}


/* ==========================================================
   CONTACT OPTIONS
========================================================== */

.contact-options {
    padding: 145px 5%;

    background: #ffffff;

    scroll-margin-top: 110px;
}


.contact-options-heading {
    display: grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(300px,.55fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 75px;
}


.contact-options-heading h2 {
    max-width: 900px;

    margin: 0;

    color: var(--wcp-forest-deep);

    font-size:
        clamp(52px,5.8vw,88px);

    line-height: .94;
    letter-spacing: -.065em;
    font-weight: 600;
}


.contact-options-heading h2 em {
    display: block;

    color: var(--wcp-sage);

    font-weight: 400;
}


.contact-options-heading > p {
    max-width: 430px;

    margin: 0;

    color: var(--wcp-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* OPTION GRID */

.contact-options-grid {
    display: grid;

    grid-template-columns:
        1.2fr .8fr .8fr;

    min-height: 570px;

    gap: 15px;
}


.contact-option {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    overflow: hidden;

    padding: 32px;

    border:
        1px solid rgba(7,29,85,.07);

    border-radius: 27px;

    background: #f5f6f7;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.contact-option:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 50px
        rgba(7,29,85,.07);
}


.contact-option-featured {
    padding: 40px;

    background:
        var(--wcp-forest-deep);

    border-color:
        var(--wcp-forest-deep);

    color: white;
}


.contact-option-blue {
    background: #e8f5fb;

    border-color:
        rgba(47,164,215,.12);
}


.contact-option-number {
    position: absolute;

    top: 27px;
    right: 28px;

    color:
        rgba(7,29,85,.28);

    font-size: 9px;
    font-weight: 700;
}


.contact-option-featured
.contact-option-number {
    color:
        rgba(255,255,255,.4);
}


.contact-option-icon {
    position: absolute;

    top: 32px;
    left: 32px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 14px;

    background:
        rgba(255,255,255,.07);

    color: var(--wcp-sage);

    font-size: 18px;
}


.contact-option-label {
    display: block;

    margin-bottom: 10px;

    color: var(--wcp-sage);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.contact-option h3 {
    max-width: 430px;

    margin: 0 0 16px;

    color: var(--wcp-forest-deep);

    font-size:
        clamp(30px,3vw,45px);

    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 550;
}


.contact-option-featured h3 {
    max-width: 520px;

    color: white;

    font-size:
        clamp(45px,4.5vw,68px);
}


.contact-option h3 em {
    display: block;

    color: var(--wcp-sage);

    font-weight: 400;
}


.contact-option p {
    max-width: 400px;

    margin: 0 0 24px;

    color: var(--wcp-muted);

    font-size: 11px;
    line-height: 1.65;
}


.contact-option-featured p {
    max-width: 470px;

    color:
        rgba(255,255,255,.53);

    font-size: 13px;
}


.contact-option a {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 17px;

    color:
        var(--wcp-forest) !important;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none !important;
}


.contact-option-featured a {
    color: white !important;
}


.contact-option a span {
    transition:
        transform .25s ease;
}


.contact-option a:hover span {
    transform:
        translateX(4px);
}


/* ==========================================================
   DIRECT CONTACT
========================================================== */

.contact-direct {
    padding: 20px 5% 145px;

    background: #ffffff;
}


.contact-direct-shell {
    padding: 50px;

    overflow: hidden;

    border-radius: 31px;

    background:
        var(--wcp-forest-deep);

    color: white;
}


.contact-light-label {
    color:
        rgba(255,255,255,.5);
}


.contact-light-label span {
    background:
        var(--wcp-sage);
}


.contact-direct-heading {
    max-width: 900px;

    margin-bottom: 70px;
}


.contact-direct-heading h2 {
    margin: 0;

    color: white;

    font-size:
        clamp(52px,5.8vw,88px);

    line-height: .94;
    letter-spacing: -.065em;
    font-weight: 600;
}


.contact-direct-heading h2 em {
    display: block;

    color: var(--wcp-sage);

    font-weight: 400;
}


/* CONTACT DETAILS */

.contact-direct-grid {
    display: grid;

    grid-template-columns:
        .8fr 1.4fr 1fr;

    border-top:
        1px solid rgba(255,255,255,.1);

    border-left:
        1px solid rgba(255,255,255,.1);
}


.contact-direct-item {
    position: relative;

    min-height: 260px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 28px;

    border-right:
        1px solid rgba(255,255,255,.1);

    border-bottom:
        1px solid rgba(255,255,255,.1);

    color: white !important;

    text-decoration: none !important;

    transition:
        background .3s ease;
}


a.contact-direct-item:hover {
    background:
        rgba(47,164,215,.07);
}


.contact-direct-number {
    position: absolute;

    top: 25px;
    right: 25px;

    color:
        rgba(255,255,255,.28);

    font-size: 8px;
    font-weight: 700;
}


.contact-direct-item small {
    display: block;

    margin-bottom: 10px;

    color: var(--wcp-sage);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.contact-direct-item strong {
    max-width: 500px;

    color: white;

    font-size:
        clamp(20px,2.2vw,31px);

    line-height: 1.2;
    letter-spacing: -.03em;
    font-weight: 500;

    overflow-wrap: anywhere;
}


.contact-direct-item i {
    position: absolute;

    top: 25px;
    left: 27px;

    color:
        rgba(255,255,255,.4);

    font-size: 15px;

    font-style: normal;
}


/* ==========================================================
   CONTACT FORM
========================================================== */

.contact-form-section {
    padding: 145px 5%;

    background: #f4f7f9;

    scroll-margin-top: 110px;
}


.contact-form-layout {
    display: grid;

    grid-template-columns:
        minmax(300px,.7fr)
        minmax(0,1.3fr);

    gap: 80px;

    align-items: start;
}


/* LEFT */

.contact-form-intro {
    position: sticky;

    top: 130px;
}


.contact-form-intro h2 {
    max-width: 650px;

    margin: 0 0 28px;

    color: var(--wcp-forest-deep);

    font-size:
        clamp(52px,5.6vw,84px);

    line-height: .94;
    letter-spacing: -.065em;
    font-weight: 600;
}


.contact-form-intro h2 em {
    display: block;

    color: var(--wcp-sage);

    font-weight: 400;
}


.contact-form-intro > p {
    max-width: 500px;

    margin: 0;

    color: var(--wcp-muted);

    font-size: 14px;
    line-height: 1.75;
}


/* PRIVACY NOTE */

.contact-form-note {
    max-width: 500px;

    display: grid;

    grid-template-columns:
        35px 1fr;

    gap: 14px;

    align-items: start;

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid rgba(7,29,85,.09);
}


.contact-form-note > span {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(47,164,215,.1);

    color: var(--wcp-sage);

    font-size: 11px;
    font-weight: 700;
}


.contact-form-note p {
    margin: 3px 0 0;

    color: var(--wcp-muted);

    font-size: 10px;
    line-height: 1.55;
}


/* FORM CARD */

.contact-form-card {
    padding:
        clamp(35px,5vw,65px);

    border:
        1px solid rgba(7,29,85,.07);

    border-radius: 30px;

    background: white;

    box-shadow:
        0 20px 60px
        rgba(7,29,85,.055);
}


.contact-field-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}


.contact-field {
    margin-bottom: 25px;
}


.contact-field label {
    display: flex;

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

    gap: 10px;

    margin-bottom: 9px;

    color: var(--wcp-text);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .04em;
}


.contact-field label span {
    color: var(--wcp-muted);

    font-size: 8px;
    font-weight: 500;

    letter-spacing: .04em;
}


/* INPUTS */

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

    border:
        1px solid rgba(7,29,85,.11);

    border-radius: 14px;

    outline: none;

    background: #f8fafb;

    color: var(--wcp-text);

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.contact-field input,
.contact-field select {
    min-height: 56px;

    padding:
        0 16px;
}


.contact-field textarea {
    min-height: 180px;

    padding:
        16px;

    resize: vertical;

    line-height: 1.6;
}


.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
    border-color:
        rgba(47,164,215,.32);
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color:
        var(--wcp-sage);

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(47,164,215,.08);
}


/* SELECT */

.contact-field select {
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--wcp-muted) 50%
        ),
        linear-gradient(
            135deg,
            var(--wcp-muted) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px) 25px,
        calc(100% - 15px) 25px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;

    padding-right: 45px;
}


/* HONEYPOT */

.contact-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
}


/* =========================
   FORM BOTTOM
========================================================== */

.contact-form-bottom {
    display: flex;

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

    gap: 35px;

    margin-top: 10px;

    padding-top: 28px;

    border-top:
        1px solid rgba(7,29,85,.08);
}


.contact-form-bottom p {
    max-width: 430px;

    margin: 0;

    color: var(--wcp-muted);

    font-size: 9px;

    line-height: 1.55;
}


.contact-form-bottom button {
    min-width: 165px;
    min-height: 55px;

    display: inline-flex;

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

    gap: 30px;

    padding:
        0 19px;

    border: 0;

    border-radius: 14px;

    background:
        var(--wcp-forest-deep);

    color: white;

    font-family: inherit;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.contact-form-bottom button:hover {
    transform:
        translateY(-3px);

    background:
        var(--wcp-forest);

    box-shadow:
        0 12px 30px
        rgba(7,29,85,.13);
}


.contact-form-bottom button span {
    font-size: 16px;

    transition:
        transform .25s ease;
}


.contact-form-bottom button:hover span {
    transform:
        translateX(4px);
}


/* ==========================================================
   NEXT STEPS CTA
========================================================== */

.contact-next {
    padding:
        25px 5% 30px;

    background: #ffffff;
}


.contact-next-shell {
    position: relative;

    min-height: 540px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    padding: 48px;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            var(--wcp-forest-deep),
            var(--wcp-forest)
        );

    color: white;
}


.contact-next-shell::after {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    right: -230px;
    top: -280px;

    border:
        1px solid
        rgba(47,164,215,.15);

    border-radius: 50%;

    box-shadow:
        0 0 0 90px
        rgba(47,164,215,.025),
        0 0 0 180px
        rgba(47,164,215,.018);

    pointer-events: none;
}


.contact-next-shell > div:first-child {
    position: relative;

    z-index: 2;

    max-width: 900px;
}


.contact-next-shell > div:first-child > span {
    display: block;

    margin-bottom: 20px;

    color:
        var(--wcp-sage);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.contact-next-shell h2 {
    max-width: 850px;

    margin: 0;

    color: white;

    font-size:
        clamp(55px,6.5vw,96px);

    line-height: .89;

    letter-spacing: -.07em;

    font-weight: 600;
}


.contact-next-shell h2 em {
    display: block;

    color:
        var(--wcp-sage);

    font-weight: 400;
}


.contact-next-actions {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 950px) {

    /* HERO */

    .contact-hero-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .contact-hero-copy {
        max-width: 650px;
    }


    /* OPTIONS */

    .contact-options-heading {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .contact-options-grid {
        grid-template-columns:
            1fr 1fr;

        min-height: auto;
    }


    .contact-option-featured {
        grid-column:
            1 / 3;

        min-height: 550px;
    }


    .contact-option:not(
        .contact-option-featured
    ) {
        min-height: 360px;
    }


    /* DIRECT CONTACT */

    .contact-direct-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .contact-direct-item:last-child {
        grid-column:
            1 / 3;
    }


    /* FORM */

    .contact-form-layout {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .contact-form-intro {
        position: relative;

        top: auto;

        max-width: 750px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    /* HERO */

    .contact-hero {
        padding:
            125px 18px 80px;
    }


    .contact-hero-meta {
        margin-bottom: 55px;
    }


    .contact-page-index {
        display: none;
    }


    .contact-hero h1 {
        font-size:
            clamp(58px,17vw,80px);
    }


    /* OPTIONS */

    .contact-options {
        padding:
            90px 18px;
    }


    .contact-options-heading {
        margin-bottom: 50px;
    }


    .contact-options-heading h2 {
        font-size:
            clamp(46px,14vw,64px);
    }


    .contact-options-grid {
        display: flex;

        flex-direction: column;

        gap: 13px;
    }


    .contact-option,
    .contact-option-featured,
    .contact-option-blue {
        min-height: 360px;

        padding: 27px;

        border-radius: 22px;
    }


    .contact-option-featured {
        min-height: 520px;
    }


    .contact-option-featured h3 {
        font-size:
            clamp(40px,12vw,56px);
    }


    /* DIRECT CONTACT */

    .contact-direct {
        padding:
            10px 18px 90px;
    }


    .contact-direct-shell {
        padding:
            35px 27px;

        border-radius: 24px;
    }


    .contact-direct-heading {
        margin-bottom: 50px;
    }


    .contact-direct-heading h2 {
        font-size:
            clamp(46px,14vw,64px);
    }


    .contact-direct-grid {
        grid-template-columns: 1fr;
    }


    .contact-direct-item,
    .contact-direct-item:last-child {
        grid-column: auto;

        min-height: 210px;
    }


    .contact-direct-item strong {
        font-size:
            clamp(20px,6vw,27px);
    }


    /* FORM */

    .contact-form-section {
        padding:
            90px 18px;
    }


    .contact-form-layout {
        gap: 50px;
    }


    .contact-form-intro h2 {
        font-size:
            clamp(46px,14vw,64px);
    }


    .contact-form-card {
        padding:
            32px 22px;

        border-radius: 23px;
    }


    .contact-field-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .contact-field {
        margin-bottom: 22px;
    }


    .contact-field input,
    .contact-field select {
        min-height: 54px;
    }


    .contact-form-bottom {
        align-items: flex-start;

        flex-direction: column;
    }


    .contact-form-bottom button {
        width: 100%;
    }


    /* NEXT */

    .contact-next {
        padding:
            10px 18px 20px;
    }


    .contact-next-shell {
        min-height: 620px;

        padding: 30px;

        border-radius: 24px;
    }


    .contact-next-shell h2 {
        font-size:
            clamp(48px,14vw,68px);
    }


    .contact-next-actions {
        flex-direction: column;
    }


    .contact-next-actions
    .wcp-final-primary,
    .contact-next-actions
    .wcp-final-secondary {
        width: 100%;

        justify-content:
            space-between;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    .contact-form-card {
        padding:
            28px 18px;
    }


    .contact-direct-shell {
        padding:
            30px 22px;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible,
.contact-form-bottom button:focus-visible {
    outline:
        3px solid rgba(47,164,215,.25);

    outline-offset: 3px;
}


@media (prefers-reduced-motion: reduce) {

    .contact-scroll-link span,
    .contact-option,
    .contact-option a span,
    .contact-direct-item,
    .contact-field input,
    .contact-field select,
    .contact-field textarea,
    .contact-form-bottom button,
    .contact-form-bottom button span {
        transition: none;
    }

}

/* ==========================================================
   FORM STATUS
========================================================== */

.contact-form-status {
    margin-bottom: 28px;

    padding: 16px 18px;

    border-radius: 13px;

    font-size: 11px;

    line-height: 1.55;
}


.contact-form-status.is-success {
    border:
        1px solid rgba(47,164,215,.18);

    background:
        #e8f5fb;

    color:
        var(--wcp-forest-deep);
}


.contact-form-status.is-error {
    border:
        1px solid rgba(227,30,43,.15);

    background:
        #fff2f3;

    color:
        #8b1821;
}

/* ==========================================================
   CONTACT — MOBILE FINAL POLISH
========================================================== */

@media (max-width: 650px) {

    /* ------------------------------------------------------
       HERO
    ------------------------------------------------------ */

    .contact-hero {
        min-height: auto !important;

        padding:
            125px 18px 75px;
    }


    .contact-hero-grid {
        gap: 30px;
    }


    .contact-hero h1 {
        max-width: 100%;

        font-size:
            clamp(52px, 15vw, 68px);

        line-height: .91;

        letter-spacing: -.06em;
    }


    .contact-hero-copy {
        max-width: 100%;

        padding-bottom: 0;
    }


    .contact-hero-copy p {
        margin-bottom: 25px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* ------------------------------------------------------
       CONTACT OPTIONS
    ------------------------------------------------------ */

    .contact-options {
        padding:
            80px 18px;
    }


    .contact-options-heading {
        margin-bottom: 45px;
    }


    .contact-options-heading h2 {
        font-size:
            clamp(47px, 13vw, 62px);

        line-height: .94;
    }


    .contact-options-grid {
        gap: 12px;
    }


    .contact-option,
    .contact-option-featured,
    .contact-option-blue {
        min-height: 0 !important;

        height: auto !important;

        padding:
            30px 25px;

        border-radius: 22px;
    }


    .contact-option-featured {
        min-height: 430px !important;
    }


    .contact-option:not(
        .contact-option-featured
    ) {
        min-height: 270px !important;
    }


    .contact-option h3 {
        font-size:
            clamp(30px, 9vw, 41px);

        line-height: 1;
    }


    .contact-option-featured h3 {
        font-size:
            clamp(42px, 12vw, 55px);
    }


    /* ------------------------------------------------------
       DIRECT CONTACT
       FIX THE OVERLAPPING EMAIL
    ------------------------------------------------------ */

    .contact-direct {
        padding:
            10px 18px 80px;
    }


    .contact-direct-shell {
        padding:
            35px 24px;

        border-radius: 24px;
    }


    .contact-direct-heading {
        margin-bottom: 45px;
    }


    .contact-direct-heading h2 {
        font-size:
            clamp(46px, 13vw, 61px);

        line-height: .93;
    }


    .contact-direct-grid {
        display: flex !important;

        flex-direction: column;

        width: 100%;

        border-left: 0;
    }


    .contact-direct-item,
    .contact-direct-item:last-child {
        position: relative;

        grid-column: auto;

        width: 100%;

        min-width: 0;

        min-height: 0 !important;

        height: auto !important;

        display: block;

        padding:
            28px 15px 28px 0;

        border-right: 0;
    }


    .contact-direct-number {
        top: 28px;
        right: 5px;
    }


    .contact-direct-item i {
        position: static;

        display: block;

        margin-bottom: 20px;
    }


    .contact-direct-item small {
        position: static !important;

        display: block;

        margin-bottom: 10px;
    }


    .contact-direct-item strong {
        position: static !important;

        display: block;

        width: 100% !important;
        max-width: 100%;

        height: auto !important;

        margin: 0;

        transform: none !important;

        font-size:
            clamp(18px, 5.5vw, 24px);

        line-height: 1.3;

        letter-spacing: -.02em;

        white-space: normal;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* ------------------------------------------------------
       FORM INTRO
    ------------------------------------------------------ */

    .contact-form-section {
        padding:
            80px 18px;
    }


    .contact-form-layout {
        gap: 42px;
    }


    .contact-form-intro h2 {
        font-size:
            clamp(47px, 13vw, 62px);

        line-height: .94;
    }


    .contact-form-intro > p {
        font-size: 13px;

        line-height: 1.7;
    }


    .contact-form-note {
        margin-top: 28px;

        padding-top: 22px;
    }


    /* ------------------------------------------------------
       FORM
    ------------------------------------------------------ */

    .contact-form-card {
        width: 100%;

        padding:
            28px 20px;

        border-radius: 22px;
    }


    .contact-field-row {
        display: block;
    }


    .contact-field {
        width: 100%;

        margin-bottom: 20px;
    }


    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        width: 100%;
        max-width: 100%;

        font-size: 16px;
    }


    /*
       16px is intentional:
       prevents iOS Safari zooming into fields.
    */

    .contact-field input,
    .contact-field select {
        min-height: 54px;
    }


    .contact-field textarea {
        min-height: 160px;
    }


    .contact-form-bottom {
        flex-direction: column;

        align-items: stretch;

        gap: 22px;
    }


    .contact-form-bottom button {
        width: 100%;

        min-height: 56px;

        justify-content: space-between;
    }


    /* ------------------------------------------------------
       FINAL CTA
    ------------------------------------------------------ */

    .contact-next {
        padding:
            10px 18px 20px;
    }


    .contact-next-shell {
        min-height: auto !important;

        padding:
            42px 27px;

        border-radius: 24px;
    }


    .contact-next-shell h2 {
        font-size:
            clamp(47px, 13.5vw, 63px);

        line-height: .92;
    }


    .contact-next-actions {
        display: flex;

        flex-direction: column;

        gap: 9px;

        margin-top: 35px;
    }


    .contact-next-actions a,
    .contact-next-actions
    .wcp-final-primary,
    .contact-next-actions
    .wcp-final-secondary {
        width: 100%;

        min-height: 55px;

        justify-content: space-between;
    }

}