/* Contact page: use the same image-led composition as the sign-in page. */
body:has(.contact-page) .main { padding-block: 0; }
body:has(.contact-page) { background: var(--ui-background); }
.contact-page {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, .96fr) minmax(44rem, 1.04fr);
    width: 100vw;
    max-width: none;
    min-height: max(70rem, calc(100vh - 6rem));
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background-color: #0b5b3b;
    background-image: url('../img/contact-cta-background-v2.webp');
    background-position: center;
    background-size: cover;
    box-shadow: none;
}
.contact-page .contact-inline-back { top: clamp(1.6rem, 3vw, 3.2rem); }
.contact-page .contact-intro {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: clamp(8rem, 10vw, 12rem) clamp(2.4rem, 5vw, 8rem) clamp(5rem, 7vw, 8rem);
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(3, 50, 33, .84), rgba(3, 50, 33, .26));
    box-shadow: none;
}
.contact-page .contact-intro-content { width: min(100%, 56rem); }
.contact-page .contact-intro h1 {
    max-width: 52rem;
    margin-bottom: 1.6rem;
    color: #fff;
    font-size: clamp(3.2rem, 4.4vw, 5.6rem);
    letter-spacing: -.045em;
    line-height: 1.04;
}
.contact-page .contact-intro > .contact-intro-content > p:not(.section-eyebrow) {
    max-width: 47rem;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(1.6rem, 1.7vw, 2rem);
    line-height: 1.6;
}
.contact-page .contact-intro .section-eyebrow { color: #f8dfaa; font-size: 1.3rem; letter-spacing: .14em; }
.contact-page .contact-intro-points { gap: 1.2rem; margin-top: 2.8rem; color: #fff; font-size: 1.55rem; font-weight: 650; }
.contact-page .contact-intro-points span::before { width: 2.6rem; height: 2.6rem; margin-right: 1rem; color: #0a6745; background: #fffdf8; }
.contact-page .contact-privacy-note {
    max-width: 48rem;
    margin-top: 3.2rem;
    padding-top: 1.8rem;
    border-top-color: rgba(255, 255, 255, .34);
    color: rgba(255, 255, 255, .82) !important;
    font-size: 1.3rem !important;
    line-height: 1.55;
}
.contact-page .contact-form-panel {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: clamp(3rem, 6vw, 8rem) clamp(2.4rem, 4vw, 6rem);
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(246, 251, 247, .12), rgba(246, 251, 247, .72));
    box-shadow: none;
}
.contact-page .contact-form-card {
    width: 100%;
    max-width: 64rem;
    margin: 0;
    padding: clamp(2.4rem, 3.2vw, 4rem);
    background: rgba(255, 255, 255, .97);
    border: 1px solid #e5ece4;
    border-radius: 1.8rem;
    box-shadow: 0 1.8rem 4.2rem rgba(23, 53, 42, .16);
}
.contact-page .contact-form-heading { margin-bottom: 2.2rem; }
.contact-page .contact-form-heading .section-eyebrow { color: var(--color-physio-green); font-size: 1.2rem; letter-spacing: .12em; }
.contact-page .contact-form-heading h2 { margin-bottom: .7rem; color: var(--color-physio-green-dark); font-size: clamp(2.8rem, 3vw, 4rem); letter-spacing: -.04em; }
.contact-page .contact-form-heading p:not(.section-eyebrow) { color: #60786c; font-size: 1.35rem; line-height: 1.5; }
.contact-page .contact-form label { color: #14392c; font-size: 1.3rem; font-weight: 750; }
.contact-page .contact-form input,
.contact-page .contact-form select,
.contact-page .contact-form textarea {
    background: #fbfefc;
    border-color: #c8ddd0;
    border-radius: 1rem;
}
.contact-page .contact-form input:focus,
.contact-page .contact-form select:focus,
.contact-page .contact-form textarea:focus {
    background: #fff;
    border-color: var(--color-physio-green);
    box-shadow: 0 0 0 .3rem rgba(25, 135, 81, .14);
}
.contact-page .contact-form textarea { min-height: 11rem; }
.contact-page .contact-form-choice-help { color: #60786c; font-size: 1.2rem; line-height: 1.45; }
.contact-page .contact-submit {
    min-height: 4.8rem;
    border: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, #086746, #198751);
    box-shadow: 0 .8rem 1.6rem rgba(9, 103, 70, .18);
    font-size: 1.5rem;
}
.contact-page .contact-submit:hover,
.contact-page .contact-submit:focus-visible { background: linear-gradient(135deg, #075333, #0e7548); transform: translateY(-1px); }
@media (max-width: 960px) {
    .contact-page { grid-template-columns: 1fr; min-height: auto; }
    .contact-page .contact-intro { min-height: 46rem; padding: 8rem 2.4rem 4rem; }
    .contact-page .contact-form-panel { padding: 3rem 1.2rem 4rem; background: rgba(246, 251, 247, .92); }
    .contact-page .contact-form-card { max-width: 66rem; }
}
@media (max-width: 600px) {
    .contact-page .contact-intro { min-height: 40rem; padding: 7.2rem 2rem 3.2rem; background: linear-gradient(90deg, rgba(3,50,33,.74), rgba(3,50,33,.22)); }
    .contact-page .contact-intro h1 { font-size: 3.4rem; }
    .contact-page .contact-intro-points { gap: .8rem; margin-top: 2rem; font-size: 1.3rem; }
    .contact-page .contact-intro-points span::before { width: 2.2rem; height: 2.2rem; margin-right: .7rem; }
    .contact-page .contact-form-panel { padding: 2rem 1.2rem 3.2rem; }
    .contact-page .contact-form-card { padding: 2rem 1.6rem; border-radius: 1.2rem; }
    .contact-page .contact-name-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Public contact form: progressive two-step layout with a simple left slide. */
.contact-page { overflow-anchor: none; }
.contact-page .contact-form-panel {
    padding-top: clamp(2rem, 4vw, 5rem);
    transition: padding .45s ease, background .45s ease;
}
.contact-form-steps {
    width: 100%;
    overflow: clip;
    transition: height .45s ease;
}
.contact-form-step-track {
    display: flex;
    width: 300%;
    align-items: flex-start;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.contact-form-step {
    flex: 0 0 33.333333%;
    min-width: 0;
    box-sizing: border-box;
}
.contact-form-step[aria-hidden="true"] { pointer-events: none; }
.contact-form-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: 2rem;
    color: #6a8175;
    font-size: 1.2rem;
    font-weight: 700;
}
.contact-form-step-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 4.6rem;
    margin: 0;
    padding: 1rem 1.8rem;
    line-height: 1.2;
    text-align: center;
}
.contact-form-step-actions-next { justify-content: flex-end; }
.contact-form-step-actions-next > span,
.contact-form-step-actions-back > span { margin-right: auto; }
.contact-page #has-medicare-label,
.contact-page .booking-choice-panel:has(.booking-calendar),
.contact-page .booking-choice-panel:has(.booking-time-grid),
.contact-page .appointment-reason-field { scroll-margin-top: 8rem; }
.contact-page-step-two .contact-form-step-track { transform: translateX(-33.333333%); }
.contact-page-step-three .contact-form-step-track { transform: translateX(-66.666667%); }
:is(.contact-page-step-two, .contact-page-step-three) .contact-intro {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 50%;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
}
:is(.contact-page-step-two, .contact-page-step-three) .page-back-button {
    visibility: visible;
    pointer-events: auto;
}
.contact-request-choice-field {
    margin-top: 1.6rem;
}
.contact-request-choice-label {
    display: block;
    margin-bottom: .8rem;
    color: #0a3f30;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
}
.contact-request-choice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}
.contact-request-choice-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.8rem;
    box-sizing: border-box;
    padding: .9rem 1.1rem;
    border: 2px solid #c5ded0;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .92);
    color: #0b4f37;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.contact-request-choice-option:hover {
    border-color: #0e8b5b;
    transform: translateY(-1px);
}
.contact-request-choice-option.is-selected {
    border-color: #0e8b5b;
    background: #e8f5ed;
    box-shadow: 0 0 0 3px rgba(14, 139, 91, .14);
}
.contact-request-choice-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.contact-request-choice-option:focus-within {
    outline: 3px solid rgba(14, 139, 91, .3);
    outline-offset: 2px;
}
.contact-request-choice-field .error-message {
    margin-top: .45rem;
}
:is(.contact-page-step-two, .contact-page-step-three) .contact-form-panel {
    grid-column: 1 / -1;
    padding-inline: clamp(2rem, 8vw, 12rem);
    background: rgba(246, 251, 247, .78);
}
:is(.contact-page-step-two, .contact-page-step-three) .contact-form-card {
    max-width: 92rem;
    transition: max-width .45s ease;
}
@media (max-width: 960px) {
    .contact-page-step-two .contact-intro { width: 100%; }
    .contact-page-step-two .contact-form-panel { grid-column: 1; }
}
@media (max-width: 600px) {
    .contact-page .contact-form-panel { padding-top: 2rem; }
    .contact-form-step-actions .btn { min-height: 4.4rem; padding-inline: 1.4rem; }
    .contact-page-step-two .contact-form-panel { padding-inline: 1.2rem; }
}

/* Keep the compact first step within one desktop viewport without sacrificing legibility. */
@media (min-width: 961px) {
    .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) {
        min-height: calc(100dvh - 6rem);
        height: calc(100dvh - 6rem);
    }
    .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-panel {
        padding-top: clamp(1.2rem, 3vh, 2.4rem);
        padding-bottom: clamp(1.2rem, 2vh, 2rem);
    }
    .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-card {
        padding: clamp(2rem, 2.6vh, 3.4rem);
    }
    .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-heading {
        margin-bottom: 1.4rem;
    }
    .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-step .input {
        margin-bottom: 1rem;
    }
    .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-request-choice-field {
        margin-top: 1rem;
    }
    .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-request-choice-option {
        min-height: 4.1rem;
        padding-block: .7rem;
    }
    .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-step-actions {
        margin-top: 1rem;
    }
    .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-step-actions .btn {
        min-height: 4rem;
        padding-block: .8rem;
    }

    /* Appointment step: guide the user down the left column, then finish on the right. */
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        column-gap: clamp(1.6rem, 2.5vw, 3.2rem);
        align-items: start;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions {
        grid-column: 1 / -1;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field {
        grid-column: 1;
        min-width: 0;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields {
        grid-column: 1 / -1;
        min-width: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(1.6rem, 2.5vw, 3.2rem);
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #request-description {
        grid-column: 2;
        grid-row: 2 / span 2;
        min-width: 0;
        align-self: start;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-submit {
        grid-column: 2;
        align-self: end;
        width: 100%;
        margin-top: 1.2rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-planner {
        margin-block: 1rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-selection-flow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.2rem;
        align-items: start;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-selection-flow > .booking-choice-panel {
        min-width: 0;
        padding-block: 1rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-selection-flow > .booking-choice-panel:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 3;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-selection-flow > .booking-choice-panel:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-selection-flow > .booking-choice-panel:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-selection-flow > .booking-choice-panel:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-therapist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) .booking-results {
        margin-top: 1rem;
        padding-top: 1rem;
    }
}

/* The form context is already clear after step one, so remove the repeated
   page heading from the appointment and details steps. */
.contact-page-step-two .contact-form-heading,
.contact-page-step-three .contact-form-heading {
    display: none;
}

.appointment-summary {
    margin: 0 0 2rem;
    padding: 1.5rem 1.6rem 1.6rem;
    border: 1px solid var(--color-physio-green-border);
    border-left: .45rem solid var(--color-physio-green);
    border-radius: 1rem;
    background: linear-gradient(135deg, #f2fbf5 0%, #ffffff 100%);
    box-shadow: 0 .8rem 2rem rgba(23, 53, 42, .08);
}

.appointment-summary h3 {
    margin: 0 0 1.25rem;
    color: var(--color-physio-green-dark);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.appointment-summary dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin: 0;
}

.appointment-summary dl > div {
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid rgba(199, 229, 208, .9);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .82);
}

.appointment-summary dt {
    color: #527064;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.appointment-summary dd {
    margin: .4rem 0 0;
    color: var(--color-physio-green-dark);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Keep compact two-option groups aligned with the form content instead of
   centering them in the available width. */
.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field .contact-choice-options,
.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .contact-choice-options {
    justify-content: flex-start;
    margin-inline: 0;
}

@media (max-width: 600px) {
    .appointment-summary dl {
        grid-template-columns: 1fr;
    }
}

/* Final desktop reset: the appointment step stays a simple, wide,
   single-column form. This intentionally comes after the older layout rules
   so no previous two-column placement can win in the cascade. */
@media (min-width: 961px) {
    .contact-page-step-two .contact-form-card {
        max-width: 140rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) {
        display: block !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions-appointment-next {
        display: block !important;
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields {
        margin: 1.4rem 0 0;
        padding: 0;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > *,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .input:has(#appointment-reason) {
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
        padding-right: 0;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 1rem;
        align-items: start;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel {
        display: block;
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .booking-therapist-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .booking-time-grid {
        grid-template-columns: 1fr;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(1),
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(3) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(4) {
        grid-column: 2 !important;
        grid-row: auto !important;
    }
}

/* Keep time choices compact: a time label does not need a full-width card. */
@media (min-width: 961px) {
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-time-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: .6rem !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-time-grid button {
        min-height: 3.6rem !important;
        height: auto !important;
        padding: .55rem .7rem !important;
        font-size: 1.2rem !important;
        line-height: 1.2;
    }

    /* JS wraps the date and time panels together; span that wrapper across
       the outer flow grid so its own two-column layout uses the full width. */
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-date-time-grid {
        grid-column: 1 / -1 !important;
        width: 100%;
        min-width: 0;
    }
}

/* Final alignment for the compact appointment-mode, Medicare, and service
   choice groups. */
.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field .contact-choice-options,
.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .contact-choice-options {
    justify-content: flex-start !important;
    margin-inline: 0 !important;
}

/* Keep the two-choice questions compact and centered instead of stretching
   each option across the full form width. */
.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field .contact-choice-options,
.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .contact-choice-options {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    width: min(100%, 46rem);
    margin-inline: auto;
    gap: 1rem;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field .contact-choice-option,
.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .contact-choice-option {
    flex: 0 1 18rem;
    width: 18rem;
    max-width: calc(50% - .5rem);
    min-height: 4.6rem;
    padding: .9rem 1.2rem;
}

@media (max-width: 600px) {
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field .contact-choice-options,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .contact-choice-options {
        width: 100%;
        gap: .7rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field .contact-choice-option,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .contact-choice-option {
        flex-basis: 0;
        width: auto;
    }
}

/* Appointment step typography: one clear hierarchy for every field,
   heading and selectable option. Keep this final so legacy layout overrides
   cannot reintroduce mixed sizes or weights. */
.contact-page-step-two .contact-form-step[data-contact-step="2"] {
    color: #14392c;
    font-size: 1.6rem;
    line-height: 1.45;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] > .contact-form-step-actions {
    margin-block: 0 2rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .contact-choice-label,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .input > label,
.contact-page-step-two .contact-form-step[data-contact-step="2"] > #appointment-fields > .contact-choice-field .contact-choice-label {
    margin-bottom: .8rem;
    color: #14392c;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.35;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] > #appointment-fields > legend {
    margin: 0 0 1.8rem;
    color: #0a3f30;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.15;
}

/* Keep the appointment-mode heading at the same visual level as the
   Preferred appointment heading below it. */
.contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-location-label {
    margin-bottom: 1.8rem;
    color: #0a3f30;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.15;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .contact-choice-options,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-priority-options {
    gap: 1rem;
}

/* Keep the priority choices compact and centered, matching the other
   two-option controls instead of stretching them across the form. */
.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-priority-options {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    width: min(100%, 46rem);
    margin-inline: auto;
    gap: 1rem;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-priority-options label {
    flex: 0 1 18rem;
    width: 18rem;
    max-width: calc(50% - .5rem);
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .contact-choice-option,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-priority-options label {
    min-height: 4.8rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Match the priority choices to the custom button controls while keeping
   the native radio semantics available to keyboard and assistive users. */
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-priority-options label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: .9rem 1.2rem;
    border: 2px solid #c5ded0;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .92);
    color: #0b4f37;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease,
        box-shadow .2s ease, transform .2s ease;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-priority-options label input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-priority-options label:has(input:checked) {
    border-color: var(--color-physio-green);
    background: #e8f5ed;
    color: #075333;
    box-shadow: 0 0 0 .3rem rgba(25, 135, 81, .12);
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-priority-options label:has(input:focus-visible) {
    outline: 3px solid var(--color-physio-green-focus);
    outline-offset: 3px;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-priority-options label:hover {
    border-color: var(--color-physio-green);
    transform: translateY(-1px);
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-planner {
    margin-top: 2.6rem;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-planner-heading {
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.8rem;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-planner-heading .section-eyebrow {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: .12em;
    line-height: 1.25;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-planner-heading h3 {
    margin: 0;
    color: #0a3f30;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.15;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-choice-panel {
    margin: 0;
    padding-block: 1.2rem;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-choice-panel h4,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-results-heading h4 {
    margin: 0 0 1rem;
    color: #0a3f30;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.3;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-therapist-grid button,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-time-grid button,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-date-trigger {
    font-size: 1.45rem;
    font-weight: 650;
    line-height: 1.3;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-therapist-grid button strong,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-time-grid button strong {
    font-size: inherit;
    font-weight: 700;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-results-heading span,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-time-legend,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-step-availability,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-empty-result {
    color: #60786c;
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.45;
}

.contact-page-step-two .contact-form-step[data-contact-step="2"] .input input,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .input select,
.contact-page-step-two .contact-form-step[data-contact-step="2"] .input textarea {
    font-size: 1.55rem;
    line-height: 1.35;
}

@media (max-width: 600px) {
    .contact-page-step-two .contact-form-step[data-contact-step="2"] .contact-choice-option,
    .contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-priority-options label {
        min-height: 4.5rem;
        font-size: 1.4rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-priority-options {
        width: 100%;
        gap: .7rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-priority-options label {
        flex-basis: 0;
        width: auto;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"] > #appointment-fields > legend,
    .contact-page-step-two .contact-form-step[data-contact-step="2"] .booking-planner-heading h3 {
        font-size: 2rem;
    }
}

@media (min-width: 961px) {
    /* Last cascade guard: keep every booking-planner panel in the same
       single vertical column as the rest of the appointment form. */
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow {
        display: block !important;
        grid-template-columns: none !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(1),
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(2),
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(3),
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(4) {
        display: block !important;
        width: 100%;
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (min-width: 961px) {
    /* Match the earlier high-specificity selectors while restoring a true
       vertical booking flow. */
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow {
        display: block !important;
        grid-template-columns: none !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(1),
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(2),
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(3),
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(4) {
        display: block;
        width: 100%;
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* The appointment step is intentionally a straightforward single-column
   form.  Keep this final reset after the previous desktop experiments so no
   two-column placement can leak back into the page. */
@media (min-width: 961px) {
    .contact-page-step-two .contact-form-card {
        max-width: 140rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) {
        display: block !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions-appointment-next {
        display: block !important;
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields {
        margin: 1.4rem 0 0;
        padding: 0;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > *,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .input:has(#appointment-reason) {
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
        padding-right: 0;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 1rem;
        align-items: start;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel {
        display: block;
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .booking-therapist-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .booking-time-grid {
        grid-template-columns: 1fr;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(1),
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(3) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(4) {
        grid-column: 2 !important;
        grid-row: auto !important;
    }
}

/* Final desktop composition for appointment step: keep the form split down
   the middle, with the early questions on the left and the appointment
   details continuing in the right column. */
@media (min-width: 961px) {
    .contact-page-step-two .contact-form-card {
        max-width: 132rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) {
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        column-gap: clamp(2.4rem, 3.5vw, 5.6rem);
        row-gap: 0;
        align-items: start;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-top: 0;
        margin-bottom: 1.2rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        padding-right: clamp(1.2rem, 2vw, 3rem);
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields {
        grid-column: 1 / -1;
        grid-row: 3;
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        column-gap: clamp(2.4rem, 3.5vw, 5.6rem);
        row-gap: .8rem;
        min-width: 0;
        margin: 0;
        padding: 1.4rem 0 0;
        border: 0;
        border-top: 1px solid rgba(14, 77, 49, .18);
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > legend {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: .2rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .contact-choice-field:has(#has-medicare-toggle) {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        padding-right: clamp(1.2rem, 2vw, 3rem);
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > #medicare-fields-container {
        grid-column: 1;
        grid-row: 3;
        min-width: 0;
        padding-right: clamp(1.2rem, 2vw, 3rem);
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > #booking-slot-status {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        margin: .2rem 0 .3rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner {
        grid-column: 2;
        grid-row: 3 / span 3;
        min-width: 0;
        margin: 0;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow {
        display: block;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-choice-panel {
        padding-block: .8rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-therapist-grid,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-therapist-grid button,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-time-grid button {
        padding: .8rem 1rem;
        font-size: 1.25rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .input:has(#appointment-reason) {
        grid-column: 1;
        grid-row: 4;
        min-width: 0;
        padding-right: clamp(1.2rem, 2vw, 3rem);
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions-appointment-next {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 1rem;
    }
}

@media (min-width: 961px) {
    /* Put the appointment journey into two readable columns on larger screens. */
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        row-gap: 1.2rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions {
        grid-row: 1;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field {
        grid-row: 2;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #request-description {
        grid-column: 2;
        grid-row: 2 / span 2;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields {
        grid-row: 3;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-submit {
        grid-row: 3;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions-appointment-next {
        grid-column: 1 / -1;
        grid-row: 4;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > legend {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .contact-choice-field:has(#has-medicare-toggle) {
        grid-column: 1;
        grid-row: 2;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > #medicare-fields-container {
        grid-column: 1;
        grid-row: 3;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > #booking-slot-status {
        grid-column: 1 / -1;
        grid-row: 4;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner {
        grid-column: 1 / -1;
        grid-row: 5;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .input:has(#appointment-reason) {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Use two direct-choice controls for the appointment mode and Medicare question. */
.contact-page .contact-choice-field {
    position: relative;
    margin-bottom: 1.4rem;
}
.contact-page .contact-choice-field > .input {
    margin: 0;
}
.contact-page .contact-choice-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.contact-page .contact-choice-label {
    display: block;
    margin-bottom: .7rem;
    color: #14392c;
    font-size: 1.3rem;
    font-weight: 750;
}
.contact-page .contact-choice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.contact-page .contact-choice-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.8rem;
    margin: 0;
    padding: 1rem 1.2rem;
    color: #14392c;
    background: #fbfefc;
    border: 2px solid #c8ddd0;
    border-radius: 1rem;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.contact-page .contact-choice-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.contact-page .contact-choice-option.is-selected {
    color: #075333;
    background: #e8f5ed;
    border-color: var(--color-physio-green);
    box-shadow: 0 0 0 .3rem rgba(25, 135, 81, .12);
}
.contact-page .contact-choice-option:has(input:focus-visible) {
    outline: 3px solid var(--color-physio-green-focus);
    outline-offset: 3px;
}
.contact-page .contact-choice-option:hover {
    border-color: var(--color-physio-green);
    transform: translateY(-1px);
}
@media (max-width: 600px) {
    .contact-page .contact-choice-options { gap: .7rem; }
    .contact-page .contact-choice-option { min-height: 4.4rem; padding-inline: .8rem; font-size: 1.1rem; }
}

/* The final desktop step-two override must come after the legacy placement
   rules above so the form remains a true left/right split. */
@media (min-width: 961px) {
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) {
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        column-gap: clamp(2.4rem, 3.5vw, 5.6rem);
        row-gap: 0;
        align-items: start;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-top: 0;
        margin-bottom: 1.2rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        padding-right: clamp(1.2rem, 2vw, 3rem);
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields {
        grid-column: 1 / -1;
        grid-row: 3;
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        column-gap: clamp(2.4rem, 3.5vw, 5.6rem);
        row-gap: .8rem;
        min-width: 0;
        margin: 0;
        padding: 1.4rem 0 0;
        border: 0;
        border-top: 1px solid rgba(14, 77, 49, .18);
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > legend {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: .2rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .contact-choice-field:has(#has-medicare-toggle) {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        padding-right: clamp(1.2rem, 2vw, 3rem);
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > #medicare-fields-container {
        grid-column: 1;
        grid-row: 3;
        min-width: 0;
        padding-right: clamp(1.2rem, 2vw, 3rem);
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > #booking-slot-status {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        margin: .2rem 0 .3rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner {
        grid-column: 2;
        grid-row: 3 / span 3;
        min-width: 0;
        margin: 0;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-selection-flow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 1rem;
        align-items: start;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-choice-panel {
        padding-block: .8rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 3;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-therapist-grid,
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-therapist-grid button,
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .booking-planner .booking-time-grid button {
        padding: .8rem 1rem;
        font-size: 1.25rem;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"] #appointment-fields > .input:has(#appointment-reason) {
        grid-column: 1;
        grid-row: 4;
        min-width: 0;
        padding-right: clamp(1.2rem, 2vw, 3rem);
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions-appointment-next {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 1rem;
    }
}

@media (min-width: 961px) {
    /* Match the specificity of the earlier :has() rules so the compact
       nested split is the one that actually wins in the cascade. */
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow {
        display: block !important;
        grid-template-columns: none !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-therapist-grid,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-time-grid,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .contact-choice-options,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field .contact-choice-options {
        grid-template-columns: 1fr !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 / span 3 !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .contact-choice-field:has(#has-medicare-toggle) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > #medicare-fields-container {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > #booking-slot-status {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner {
        grid-column: 2 !important;
        grid-row: 3 / span 3 !important;
    }
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .input:has(#appointment-reason) {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }
}

/* Final desktop reset: the appointment step stays a simple, wide,
   single-column form. This intentionally comes after the older layout rules
   so no previous two-column placement can win in the cascade. */
@media (min-width: 961px) {
    .contact-page-step-two .contact-form-card {
        max-width: 140rem;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) {
        display: block !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-location-field,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > .contact-form-step-actions-appointment-next {
        display: block !important;
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields {
        display: block !important;
        width: 100%;
        margin: 1.4rem 0 0;
        padding: 0;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > *,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner,
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .input:has(#appointment-reason) {
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
        padding-right: 0;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .booking-selection-flow {
        display: block !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .booking-selection-flow > .booking-choice-panel {
        display: block;
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-therapist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields .booking-time-grid {
        grid-template-columns: 1fr;
    }

    /* Split the date and time sections across the two desktop columns while
       keeping the therapist and priority sections full width above them. */
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 1rem;
        align-items: start;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel {
        display: block;
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(1),
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(3) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-selection-flow > .booking-choice-panel:nth-child(4) {
        grid-column: 2 !important;
        grid-row: auto !important;
    }
}

/* Final compact time choices for the right-hand time section. */
@media (min-width: 961px) {
    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-time-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: .6rem !important;
    }

    .contact-page-step-two .contact-form-step[data-contact-step="2"]:has(#appointment-fields:not([hidden])) > #appointment-fields > .booking-planner .booking-time-grid button {
        min-height: 3.6rem !important;
        height: auto !important;
        padding: .55rem .7rem !important;
        font-size: 1.2rem !important;
        line-height: 1.2;
    }
}

/* Let step one grow with its form, including large text and browser zoom. */
@media(min-width:961px){html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three){height:auto;min-height:calc(100dvh - 6rem);align-items:stretch}.contact-page .contact-form-panel{min-width:0}}