/* ==========================================================
   WHOLISTIC CARE PROFESSIONALS
   REFERRAL PAGE
========================================================== */

.referral-hero *,
.referral-process *,
.referral-information *,
.referral-form-section *,
.referral-direct * {
    box-sizing: border-box;
}


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

.referral-hero {
    position: relative;

    overflow: hidden;

    padding:
        160px 5% 65px;

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


.referral-hero-meta {
    display: flex;

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

    gap: 30px;

    margin-bottom: 85px;
}


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

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

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


.referral-hero-grid {
    display: grid;

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

    gap: 80px;

    align-items: end;
}


.referral-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;
}


.referral-hero h1 em {
    display: block;

    color:
        var(--wcp-sage);

    font-weight: 400;
}


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

    padding-bottom: 8px;
}


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

    color:
        var(--wcp-muted);

    font-size: 16px;

    line-height: 1.7;
}


.referral-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;
}


.referral-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;
}


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

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


/* HERO STRIP */

.referral-hero-strip {
    display: grid;

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

    margin-top: 100px;

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


.referral-hero-strip > div {
    min-height: 110px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 22px;

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


.referral-hero-strip > div:first-child {
    border-left:
        1px solid rgba(7,29,85,.1);
}


.referral-hero-strip span {
    color:
        var(--wcp-sage);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.referral-hero-strip strong {
    color:
        var(--wcp-forest-deep);

    font-size:
        clamp(16px,1.5vw,21px);

    line-height: 1.1;

    font-weight: 550;
}


/* ORBITS */

.referral-orbit {
    position: absolute;

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

    border-radius: 50%;

    pointer-events: none;
}


.referral-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);
}


.referral-orbit-two {
    width: 160px;
    height: 160px;

    left: -90px;
    bottom: -70px;
}


/* ==========================================================
   REFERRAL PROCESS
========================================================== */

.referral-process {
    padding:
        145px 5%;

    background: #ffffff;
}


.referral-process-heading {
    margin-bottom: 90px;
}


.referral-process-heading-grid {
    display: grid;

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

    gap: 80px;

    align-items: end;
}


.referral-process-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;
}


.referral-process-heading h2 em {
    display: block;

    color:
        var(--wcp-sage);

    font-weight: 400;
}


.referral-process-heading-grid > p {
    max-width: 430px;

    margin: 0;

    color:
        var(--wcp-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* PATH */

.referral-process-path {
    position: relative;

    display: grid;

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

    gap: 35px;

    padding-top: 45px;
}


.referral-process-line {
    position: absolute;

    top: 65px;
    left: 20px;
    right: 20px;

    height: 1px;

    background:
        rgba(7,29,85,.12);
}


.referral-process-path article {
    position: relative;

    z-index: 2;
}


.referral-process-marker {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    margin-bottom: 38px;

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

    border-radius: 50%;

    background: white;

    color:
        var(--wcp-muted);

    font-size: 8px;

    font-weight: 700;

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


.referral-process-path article:hover
.referral-process-marker {
    transform:
        scale(1.1);

    background:
        var(--wcp-sage);

    color: white;
}


.referral-process-final {
    background:
        var(--wcp-sage);

    border-color:
        var(--wcp-sage);

    color: white;
}


.referral-process-path small {
    display: block;

    margin-bottom: 10px;

    color:
        var(--wcp-sage);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.referral-process-path h3 {
    min-height: 58px;

    max-width: 215px;

    margin:
        0 0 13px;

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

    font-size:
        clamp(20px,1.8vw,27px);

    line-height: 1.05;

    letter-spacing: -.03em;

    font-weight: 550;
}


.referral-process-path p {
    max-width: 210px;

    margin: 0;

    color:
        var(--wcp-muted);

    font-size: 10px;

    line-height: 1.6;
}


/* ==========================================================
   INFORMATION
========================================================== */

.referral-information {
    padding:
        145px 5%;

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

    color: white;
}


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


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


.referral-information-heading {
    display: grid;

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

    gap: 80px;

    align-items: end;

    margin-bottom: 75px;
}


.referral-information-heading h2 {
    max-width: 950px;

    margin: 0;

    color: white;

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

    line-height: .94;

    letter-spacing: -.065em;

    font-weight: 600;
}


.referral-information-heading h2 em {
    display: block;

    color:
        var(--wcp-sage);

    font-weight: 400;
}


.referral-information-heading > p {
    max-width: 430px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.7;
}


/* INFORMATION CARDS */

.referral-information-grid {
    display: grid;

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

    grid-template-rows:
        340px 340px;

    gap: 14px;
}


.referral-info {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    overflow: hidden;

    padding: 30px;

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

    border-radius: 25px;

    background:
        rgba(255,255,255,.045);
}


.referral-info-featured {
    grid-row:
        1 / 3;

    padding: 40px;

    background:
        var(--wcp-forest);

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


.referral-info-blue {
    grid-column:
        2 / 4;

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


.referral-info-number {
    position: absolute;

    top: 26px;
    right: 27px;

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

    font-size: 9px;

    font-weight: 700;
}


.referral-info-label {
    display: block;

    margin-bottom: 10px;

    color:
        var(--wcp-sage);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.referral-info h3 {
    max-width: 430px;

    margin:
        0 0 14px;

    color: white;

    font-size:
        clamp(25px,2.5vw,37px);

    line-height: 1.03;

    letter-spacing: -.04em;

    font-weight: 500;
}


.referral-info h3 em {
    display: block;

    color:
        var(--wcp-sage);

    font-weight: 400;
}


.referral-info-featured h3 {
    max-width: 540px;

    font-size:
        clamp(42px,4.5vw,67px);
}


.referral-info p {
    max-width: 390px;

    margin: 0;

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

    font-size: 11px;

    line-height: 1.6;
}


.referral-info-featured p {
    max-width: 470px;

    font-size: 13px;
}


/* ==========================================================
   REFERRAL FORM
========================================================== */

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

    background:
        #f4f7f9;

    scroll-margin-top: 110px;
}


.referral-form-layout {
    display: grid;

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

    gap: 80px;

    align-items: start;
}


/* INTRO */

.referral-form-intro {
    position: sticky;

    top: 130px;
}


.referral-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;
}


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

    color:
        var(--wcp-sage);

    font-weight: 400;
}


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

    margin: 0;

    color:
        var(--wcp-muted);

    font-size: 14px;

    line-height: 1.75;
}


/* SECURITY NOTE */

.referral-security-note {
    max-width: 520px;

    display: grid;

    grid-template-columns:
        38px 1fr;

    gap: 15px;

    align-items: start;

    margin-top: 35px;

    padding-top: 28px;

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


.referral-security-note > span {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(227,30,43,.08);

    color:
        var(--wcp-accent);

    font-size: 11px;

    font-weight: 700;
}


.referral-security-note strong {
    display: block;

    margin-bottom: 6px;

    color:
        var(--wcp-text);

    font-size: 11px;

    font-weight: 700;
}


.referral-security-note p {
    margin: 0;

    color:
        var(--wcp-muted);

    font-size: 10px;

    line-height: 1.6;
}


/* FORM CARD */

.referral-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);
}


/* FORM SECTION HEADING */

.referral-form-section-heading {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 30px;

    padding-bottom: 22px;

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


.referral-form-section-heading > span {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    color: white;

    font-size: 8px;

    font-weight: 700;
}


.referral-form-section-heading small {
    display: block;

    margin-bottom: 4px;

    color:
        var(--wcp-sage);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.referral-form-section-heading strong {
    display: block;

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

    font-size: 19px;

    line-height: 1.1;

    letter-spacing: -.02em;

    font-weight: 600;
}


.referral-form-second {
    margin-top: 45px;
}


/* ==========================================================
   FORM FIELDS
========================================================== */

.referral-field-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}


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


.referral-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;
}


.referral-field input,
.referral-field select,
.referral-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;
}


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

    padding:
        0 16px;
}


.referral-field textarea {
    min-height: 190px;

    padding: 16px;

    resize: vertical;

    line-height: 1.6;
}


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


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

    background: white;

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


/* SELECT ARROW */

.referral-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;
}


/* FIELD HELP */

.referral-field-help {
    display: block;

    max-width: 600px;

    margin-top: 9px;

    color:
        var(--wcp-muted);

    font-size: 9px;

    line-height: 1.55;
}


/* HONEYPOT */

.referral-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 STATUS
========================================================== */

.referral-form-status {
    margin:
        10px 0 28px;

    padding:
        16px 18px;

    border-radius: 13px;

    font-size: 11px;

    line-height: 1.55;
}


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

    background:
        #e8f5fb;

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


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

    background:
        #fff2f3;

    color:
        #8b1821;
}


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

.referral-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);
}


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

    margin: 0;

    color:
        var(--wcp-muted);

    font-size: 9px;

    line-height: 1.55;
}


.referral-form-bottom button {
    min-width: 175px;
    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;
}


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

    background:
        var(--wcp-forest);

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


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

    transition:
        transform .25s ease;
}


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


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

.referral-direct {
    padding:
        25px 5% 30px;

    background: #ffffff;
}


.referral-direct-shell {
    position: relative;

    min-height: 590px;

    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(330px,.85fr);

    gap: 80px;

    align-items: end;

    overflow: hidden;

    padding: 48px;

    border-radius: 32px;

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

    color: white;
}


.referral-direct-shell::after {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    right: -240px;
    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;
}


.referral-direct-shell > div {
    position: relative;

    z-index: 2;
}


.referral-direct-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;
}


.referral-direct h2 {
    max-width: 760px;

    margin:
        0 0 28px;

    color: white;

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

    line-height: .89;

    letter-spacing: -.07em;

    font-weight: 600;
}


.referral-direct h2 em {
    display: block;

    color:
        var(--wcp-sage);

    font-weight: 400;
}


.referral-direct-shell
> div:first-child
> p {
    max-width: 550px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.7;
}


/* DIRECT ACTIONS */

.referral-direct-actions {
    display: flex;

    flex-direction: column;

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


.referral-direct-actions a {
    position: relative;

    min-height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        20px 50px 20px 0;

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

    color:
        white !important;

    text-decoration: none !important;

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


.referral-direct-actions a:hover {
    padding-left: 15px;

    background:
        rgba(255,255,255,.035);
}


.referral-direct-actions small {
    display: block;

    margin-bottom: 7px;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.referral-direct-actions strong {
    color: white;

    font-size:
        clamp(18px,2vw,27px);

    line-height: 1.15;

    letter-spacing: -.025em;

    font-weight: 500;
}


.referral-direct-actions a > span {
    position: absolute;

    right: 10px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--wcp-sage);

    font-size: 18px;
}


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

@media (max-width: 950px) {

    /* HERO */

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

        gap: 35px;
    }


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


    .referral-hero-strip {
        grid-template-columns:
            1fr 1fr;
    }


    .referral-hero-strip
    > div:nth-child(3) {
        border-left:
            1px solid
            rgba(7,29,85,.1);
    }


    /* PROCESS */

    .referral-process-heading-grid,
    .referral-information-heading {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .referral-process-path {
        display: block;

        padding-left: 20px;
    }


    .referral-process-line {
        top: 10px;
        bottom: 10px;

        left: 40px;
        right: auto;

        width: 1px;
        height: auto;
    }


    .referral-process-path article {
        display: grid;

        grid-template-columns:
            42px 1fr;

        gap: 30px;

        margin-bottom: 55px;
    }


    .referral-process-marker {
        margin: 0;
    }


    .referral-process-path h3 {
        min-height: 0;

        max-width: 500px;
    }


    .referral-process-path p {
        max-width: 500px;
    }


    /* INFO */

    .referral-information-grid {
        grid-template-columns:
            1fr 1fr;

        grid-template-rows: auto;
    }


    .referral-info-featured {
        grid-column:
            1 / 3;

        grid-row: auto;

        min-height: 540px;
    }


    .referral-info {
        min-height: 330px;
    }


    .referral-info-blue {
        grid-column:
            1 / 3;
    }


    /* FORM */

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

        gap: 60px;
    }


    .referral-form-intro {
        position: relative;

        top: auto;

        max-width: 750px;
    }


    /* DIRECT */

    .referral-direct-shell {
        grid-template-columns: 1fr;

        gap: 65px;
    }

}


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

@media (max-width: 650px) {

    /* HERO */

    .referral-hero {
        padding:
            125px 18px 55px;
    }


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


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


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


    .referral-hero-strip {
        grid-template-columns: 1fr;

        margin-top: 70px;
    }


    .referral-hero-strip > div,
    .referral-hero-strip
    > div:first-child,
    .referral-hero-strip
    > div:nth-child(3) {
        min-height: 90px;

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


    /* PROCESS */

    .referral-process {
        padding:
            90px 18px;
    }


    .referral-process-heading {
        margin-bottom: 65px;
    }


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


    .referral-process-path {
        padding-left: 5px;
    }


    .referral-process-line {
        left: 25px;
    }


    .referral-process-path article {
        grid-template-columns:
            42px 1fr;

        gap: 20px;
    }


    /* INFORMATION */

    .referral-information {
        padding:
            90px 18px;
    }


    .referral-information-heading {
        margin-bottom: 50px;
    }


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


    .referral-information-grid {
        display: flex;

        flex-direction: column;

        gap: 13px;
    }


    .referral-info,
    .referral-info-featured,
    .referral-info-blue {
        min-height: 350px;

        padding: 27px;

        border-radius: 22px;
    }


    .referral-info-featured {
        min-height: 520px;
    }


    .referral-info-featured h3 {
        font-size:
            clamp(39px,12vw,55px);
    }


    /* FORM */

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


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


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


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

        border-radius: 23px;
    }


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

        gap: 0;
    }


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


    .referral-form-second {
        margin-top: 38px;
    }


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

        flex-direction: column;
    }


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


    /* DIRECT */

    .referral-direct {
        padding:
            10px 18px 20px;
    }


    .referral-direct-shell {
        min-height: 680px;

        padding: 30px;

        border-radius: 24px;
    }


    .referral-direct h2 {
        font-size:
            clamp(50px,15vw,70px);
    }


    .referral-direct-actions a {
        min-height: 110px;
    }

}


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

@media (max-width: 430px) {

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


    .referral-direct-shell {
        padding:
            27px 23px;
    }

}


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

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

    outline-offset: 3px;
}


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

    .referral-scroll-link span,
    .referral-process-marker,
    .referral-form-bottom button,
    .referral-form-bottom button span,
    .referral-direct-actions a {
        transition: none;
    }

}

/* ==========================================================
   REFERRAL — MOBILE FINAL POLISH
========================================================== */

@media (max-width: 650px) {

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

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

        padding:
            125px 18px 65px;
    }

    .referral-hero-meta {
        margin-bottom: 45px;
    }

    .referral-hero-grid {
        gap: 28px;
    }

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

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

        line-height: .91;

        letter-spacing: -.06em;
    }

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

        padding-bottom: 0;
    }

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

        font-size: 14px;

        line-height: 1.7;
    }


    /* AUDIENCE STRIP */

    .referral-hero-strip {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 8px;

        margin-top: 45px;

        border-top: 0;
    }

    .referral-hero-strip > div,
    .referral-hero-strip > div:first-child,
    .referral-hero-strip > div:nth-child(3) {
        min-height: 95px !important;

        height: auto !important;

        padding: 16px;

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

        border-radius: 15px;

        background:
            rgba(255,255,255,.6);
    }

    .referral-hero-strip strong {
        font-size: 14px;

        line-height: 1.15;
    }


    /* ======================================================
       REFERRAL JOURNEY
    ====================================================== */

    .referral-process {
        padding:
            80px 18px;
    }

    .referral-process-heading {
        margin-bottom: 55px;
    }

    .referral-process-heading-grid {
        gap: 25px;
    }

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

        line-height: .94;
    }

    .referral-process-heading-grid > p {
        font-size: 13px;

        line-height: 1.7;
    }

    .referral-process-path {
        padding-left: 0;
    }

    .referral-process-line {
        left: 21px;
    }

    .referral-process-path article {
        grid-template-columns:
            42px 1fr;

        gap: 18px;

        min-height: 0 !important;

        height: auto !important;

        margin-bottom: 36px;
    }

    .referral-process-path article:last-child {
        margin-bottom: 0;
    }

    .referral-process-path h3 {
        min-height: 0;

        margin-bottom: 8px;

        font-size:
            clamp(21px, 6.5vw, 28px);
    }

    .referral-process-path p {
        font-size: 10.5px;

        line-height: 1.6;
    }


    /* ======================================================
       BEFORE REFERRING
    ====================================================== */

    .referral-information {
        padding:
            80px 18px;
    }

    .referral-information-heading {
        gap: 25px;

        margin-bottom: 45px;
    }

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

        line-height: .93;
    }

    .referral-information-heading > p {
        font-size: 13px;

        line-height: 1.7;
    }

    .referral-information-grid {
        gap: 10px;
    }

    .referral-info,
    .referral-info-featured,
    .referral-info-blue {
        min-height: 0 !important;

        height: auto !important;

        padding:
            28px 24px;

        border-radius: 21px;
    }

    .referral-info-featured {
        min-height: 390px !important;
    }

    .referral-info:not(
        .referral-info-featured
    ) {
        min-height: 230px !important;
    }

    .referral-info h3 {
        font-size:
            clamp(27px, 8vw, 37px);
    }

    .referral-info-featured h3 {
        font-size:
            clamp(40px, 11vw, 53px);
    }


    /* ======================================================
       FORM INTRO
    ====================================================== */

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

    .referral-form-layout {
        gap: 40px;
    }

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

        line-height: .94;
    }

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

        line-height: 1.7;
    }

    .referral-security-note {
        margin-top: 28px;

        padding-top: 22px;
    }


    /* ======================================================
       FORM CARD
    ====================================================== */

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

        padding:
            28px 20px;

        border-radius: 22px;
    }

    .referral-form-section-heading {
        margin-bottom: 25px;

        padding-bottom: 18px;
    }

    .referral-form-second {
        margin-top: 38px;
    }

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

    .referral-field {
        width: 100%;

        margin-bottom: 20px;
    }

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

        font-size: 16px;
    }

    /*
       Keep form controls at 16px on mobile.
       This also avoids unwanted input zoom on iPhones.
    */

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

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

    .referral-field-help {
        font-size: 9px;

        line-height: 1.55;
    }

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

        align-items: stretch;

        gap: 22px;
    }

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

        min-height: 56px;

        justify-content: space-between;
    }


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

    .referral-direct {
        padding:
            10px 18px 20px;
    }

    .referral-direct-shell {
        min-height: auto !important;

        padding:
            42px 27px;

        gap: 45px;

        border-radius: 24px;
    }

    .referral-direct h2 {
        font-size:
            clamp(48px, 14vw, 65px);

        line-height: .92;
    }

    .referral-direct-shell
    > div:first-child
    > p {
        font-size: 13px;

        line-height: 1.7;
    }

    .referral-direct-actions a {
        min-height: 95px;

        padding:
            18px 40px 18px 0;
    }

    .referral-direct-actions strong {
        font-size:
            clamp(18px, 5.5vw, 24px);

        overflow-wrap: anywhere;
    }

}