/* Shared contact journey: compact entry, spacious appointment and review steps. */
html body .contact-page {
    min-height: calc(100dvh - 52px);
    height: auto;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}
html body .contact-shell.contact-page:not(.contact-page-step-two):not(.contact-page-step-three) {
    min-height: calc(100dvh - 52px);
}
html body .contact-page .contact-form-heading { display: block; margin-bottom: 20px; }
html body .contact-page .contact-form-heading h2 {
    margin: 8px 0 0;
    font-size: max(28px, 2.8rem);
    line-height: 1.2;
    letter-spacing: -.02em;
}
html body .contact-page .contact-flow-progress {
    margin: 0;
    color: var(--button-text);
    font-size: max(14px, 1.4rem);
    font-weight: 650;
    line-height: 1.5;
}
html body .contact-page [data-contact-flow-description] {
    margin: 12px 0 0;
    color: var(--ui-muted);
    font-size: max(16px, 1.6rem);
    line-height: 1.5;
}
html body .contact-page .contact-collection-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: #edf6f0;
    color: #526b5e;
    font-size: max(14px, 1.4rem);
    line-height: 1.5;
}
html body .contact-page .contact-collection-notice svg { flex-shrink: 0; margin-top: 2px; }
html body .contact-page .contact-privacy-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 20px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--ui-line);
}
html body .contact-page .contact-privacy-links :is(a, button) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ui-muted);
    font-size: max(14px, 1.4rem);
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
    text-underline-offset: .25em;
}
html body .contact-page .contact-privacy-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: max-content;
    max-width: 100%;
}
html body .contact-page .contact-privacy-actions :is(a, button) {
    justify-content: center;
    text-align: center;
    width: 100%;
    min-width: 0;
}
@media (min-width: 961px) {
    html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-panel { padding: 12px 32px; }
    html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-card { padding: 20px 24px; }
    html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-heading { margin-bottom: 12px; }
    html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) [data-contact-flow-description] { display: none; }
    html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-privacy-links { margin-top: 12px; padding-top: 8px; }
    html body .contact-page .contact-form-step[data-contact-step='1'] .input { margin-bottom: 12px; }
    html body .contact-page .contact-form-step[data-contact-step='1'] label { margin-bottom: 6px; }
    html body .contact-page .contact-form-step[data-contact-step='1'] .contact-request-choice-field { margin-top: 8px; }
    html body .contact-page .contact-form-step[data-contact-step='1'] .contact-form-step-actions { margin-top: 12px; }
    html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three) .contact-form-step-actions .btn { min-height: 44px; }
}
html body .contact-page .contact-form-steps { height: auto !important; overflow: visible; }
html body .contact-page .contact-form-step-track { display: block; width: 100%; transform: none; transition: none; }
html body .contact-page .contact-form-step { width: 100%; min-width: 0; }
html body .contact-page .contact-form-step[hidden] { display: none !important; }
html body .contact-page [data-contact-progress] { display: none; }
html body .contact-page .contact-form :is(label, .contact-choice-label, .contact-request-choice-label) {
    font-size: max(16px, 1.6rem);
    line-height: 1.5;
    font-weight: 600;
}
html body .contact-page .contact-form :is(input:not([type='radio']):not([type='hidden']), textarea) {
    font-size: max(16px, 1.6rem);
    line-height: 1.5;
}
html body .contact-page .contact-form input:not([type='radio']):not([type='hidden']) { min-height: 48px; }
html body .contact-page .contact-form-step[data-contact-step='1'] input:not([type='radio']):not([type='hidden']) { margin-bottom: 0; }
html body .contact-page .contact-field-error:empty { display: none; }
html body .contact-page .contact-form .contact-choice-select { min-height: 0; }
html body .contact-page .contact-form .btn {
    min-height: 44px;
    font-size: max(16px, 1.6rem);
    line-height: 1.4;
    border-radius: 10px;
}
html body .contact-page .contact-request-choice-option { min-height: 48px; }
html body .contact-page .contact-choice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
html body .contact-page .contact-choice-option { width: auto; min-width: 0; min-height: 48px; }
html body .contact-page .contact-form-step-actions-back {
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ui-line);
}
html body .contact-page .contact-form-card { scroll-margin-top: 80px; }
html body :is(.contact-page-step-two, .contact-page-step-three) .contact-form-panel {
    padding: 16px 24px 32px;
}
html body :is(.contact-page-step-two, .contact-page-step-three) .contact-form-card {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 32px;
}
html body .contact-page .contact-details-summary {
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-background);
}
html body .contact-page .contact-details-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
html body .contact-page .contact-details-summary h3 { margin: 0; font-size: max(18px, 1.8rem); }
html body .contact-page .contact-details-summary p { margin: 8px 0 0; font-size: max(16px, 1.6rem); overflow-wrap: anywhere; }
html body .contact-page .contact-edit-details {
    min-height: 44px;
    margin: 0;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--button-text);
    font-size: max(16px, 1.6rem);
    text-decoration: underline;
    text-transform: none;
    letter-spacing: normal;
}
html body .contact-page .contact-form textarea { min-height: 180px; }
html body .contact-page :is(.character-counter, .contact-message-help, .contact-field-error) { font-size: max(14px, 1.4rem); line-height: 1.5; }
html body .contact-page .contact-message-help { color: var(--ui-muted); margin: 8px 0; }
html body .contact-page .contact-intro { align-items: center; align-self: stretch; padding-block: 48px; }
html body .contact-page .contact-intro-content { padding-top: 0; }
html body .contact-page .contact-privacy-note { font-size: max(14px, 1.4rem) !important; }
html body .contact-page .contact-form-panel { view-transition-name: contact-panel; }
html body .contact-flow-feedback {
    position: fixed;
    z-index: 1200;
    top: 76px;
    right: 24px;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 120px);
    overflow: auto;
    padding: 20px;
    border: 1px solid #e44652;
    border-radius: 12px;
    background: #fff0f0;
    color: #b82435;
    box-shadow: 0 8px 28px #17352a20;
    font-size: max(16px, 1.6rem);
    line-height: 1.5;
    animation: contact-feedback-in 180ms ease-out;
    transition: opacity 220ms ease, transform 220ms ease;
}
html body .contact-flow-feedback.is-leaving { opacity: 0; transform: translateY(8px); }
@keyframes contact-feedback-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(contact-panel) { animation-duration: 280ms; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
@media (max-width: 960px) {
    html body .contact-page .contact-intro { min-height: 0; padding: 88px 24px 24px; }
    html body .contact-page .contact-intro-content { padding: 0; }
    html body .contact-page .contact-intro h1 { font-size: max(30px, 3rem); }
    html body .contact-page .contact-intro-points { display: none; }
    html body .contact-page .contact-privacy-note { margin: 16px 0 0; padding-top: 12px; }
    html body .contact-page .contact-form-panel { padding: 16px 16px 32px; }
    html body :is(.contact-page-step-two, .contact-page-step-three) .contact-form-panel { padding: 16px 16px 24px; }
    html body .contact-page .contact-form-card { padding: 24px; }
}
@media (max-width: 600px) {
    html body .contact-page .contact-form-card { padding: 20px; }
    html body .contact-page .contact-details-summary > div { flex-wrap: wrap; }
    html body .contact-page .contact-form-step-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html body .contact-page * { transition: none !important; scroll-behavior: auto; }
    ::view-transition-group(contact-panel) { animation-duration: 0s; }
    html body .contact-flow-feedback { animation: none; transition: none; }
}
/* Appointment preferences follow one column at a time, including keyboard order. */
html body .contact-page .page-back-button { width: 48px; min-width: 48px; height: 48px; padding: 0; display: inline-flex; justify-content: center; align-items: center; }
html body .contact-page-step-two .booking-planner-heading,
html body .contact-page-step-two .booking-selection-flow { display: none; }
html body .contact-page-step-two .contact-appointment-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; }
html body .contact-page-step-two .contact-appointment-column { min-width: 0; }
html body .contact-page-step-two .contact-appointment-column + .contact-appointment-column { padding-left: 32px; border-left: 1px solid var(--ui-line); }
html body .contact-page-step-two .contact-appointment-column > h3 { margin: 0 0 20px; font-size: max(20px, 2rem); line-height: 1.3; }
html body .contact-page-step-two .contact-appointment-column :is(.input, .contact-choice-field, .booking-choice-panel) { margin: 0 0 20px; padding: 0; border: 0; }
html body .contact-page-step-two .contact-appointment-column h4 { margin: 0 0 10px; font-size: max(16px, 1.6rem); line-height: 1.5; }
html body .contact-page-step-two .contact-appointment-column .booking-date-time-grid { display: flex !important; flex-direction: column; gap: 0; }
html body .contact-page-step-two .contact-appointment-column .booking-therapist-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
html body .contact-page-step-two .contact-appointment-column .booking-time-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px; }
html body .contact-page-step-two .contact-appointment-column :is(.booking-time-button, .booking-therapist-option, .booking-date-trigger) { min-height: 44px !important; font-size: max(16px, 1.6rem) !important; }
html body .contact-page-step-two .booking-calendar[hidden] { display: none !important; }
html body .contact-page-step-two .booking-date-trigger { display: block !important; width: 100%; }
html body .contact-page-step-two .contact-appointment-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--ui-line); }
html body .contact-page-step-two .contact-appointment-footer .booking-results { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
html body .contact-page-step-two .contact-appointment-footer .booking-results-heading { margin-bottom: 8px; }
html body .contact-page-step-two .contact-appointment-footer .booking-results-heading span { display: none; }
html body .contact-page-step-two .contact-appointment-footer .booking-result-grid { display: block; }
html body .contact-page-step-two .contact-appointment-footer .booking-result-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 0; padding: 10px 12px; }
html body .contact-page-step-two .contact-appointment-footer .booking-result-card > * { margin: 0; font-size: max(14px, 1.4rem); }
html body .contact-page-step-two .contact-appointment-footer .contact-form-step-actions { width: auto; margin: 0; padding: 0; flex-shrink: 0; }
@media (max-width: 960px) {
    html body .contact-page-step-two .contact-appointment-columns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    html body .contact-page-step-two .contact-appointment-column + .contact-appointment-column { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--ui-line); }
    html body .contact-page-step-two .contact-appointment-footer { flex-direction: column; align-items: stretch; }
}
html body .contact-page-step-two .contact-appointment-column .booking-therapist-grid button,
html body .contact-page-step-two .contact-appointment-column .booking-time-grid button { min-height: 44px !important; font-size: max(16px, 1.6rem) !important; }
html body .contact-page-step-two .contact-appointment-column .booking-priority-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; width: 100%; }
html body .contact-page-step-two .contact-appointment-column .contact-choice-options { max-width: none; }
html body .contact-page-step-two .contact-appointment-column .contact-choice-options { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; }
html body .contact-page-step-two .contact-appointment-column .contact-choice-option { width: 100% !important; max-width: none !important; min-width: 0; flex: initial; }
html body .contact-page-step-two .contact-appointment-column .booking-priority-options label { width: 100%; max-width: none; }
/* Match the legacy fieldset selectors while keeping the new column layout scoped. */
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-column .contact-choice-options { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: none; margin-inline: 0; }
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-column .contact-choice-option { width: 100% !important; max-width: none !important; flex: initial; }

/* Full-page steps sit near the navigation, with the back control in the heading. */
html body :is(.contact-page-step-two, .contact-page-step-three) .contact-inline-back {
    top: 48px;
    left: 56px;
    z-index: 5;
}
html body :is(.contact-page-step-two, .contact-page-step-three) .contact-form-heading {
    min-height: 48px;
    padding-left: 68px;
}
@media (max-width: 960px) {
    html body :is(.contact-page-step-two, .contact-page-step-three) .contact-inline-back { top: 40px; left: 40px; }
    html body :is(.contact-page-step-two, .contact-page-step-three) .contact-form-heading { padding-left: 60px; }
}
@media (max-width: 600px) {
    html body :is(.contact-page-step-two, .contact-page-step-three) .contact-inline-back { top: 36px; left: 36px; }
}

html body :is(.contact-page-step-two, .contact-page-step-three) .contact-collection-notice {
    display: none;
}

/* Keep progress at the card's upper right, separate from the page title. */
html body .contact-page .contact-form-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 24px;
}
html body .contact-page .contact-flow-progress {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
}
html body .contact-page .contact-form-heading h2 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}
html body .contact-page [data-contact-flow-description] { grid-column: 1 / -1; margin-top: 0; }
html body .contact-page [data-contact-flow-description][hidden] { display: none; }
@media (max-width: 960px) {
    html body .contact-page .contact-form-heading { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    html body .contact-page .contact-flow-progress { grid-column: 1; grid-row: 1; }
    html body .contact-page .contact-form-heading h2 { grid-row: 2; }
}

/* Appointment heading: a compact top inset and a quieter progress label. */
html body .contact-page-step-two .contact-form-card { padding-top: 20px; }
html body .contact-page-step-two .contact-inline-back { top: 36px; }
html body .contact-page-step-two .contact-form-heading { margin-bottom: 12px; column-gap: 24px; }
html body .contact-page-step-two .contact-form-heading h2 {
    font-size: max(28px, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
}
html body .contact-page-step-two .contact-form-heading .contact-flow-progress {
    color: #526b5e;
    font-size: max(14px, 1.4rem);
    font-weight: 600;
    line-height: 1.5;
}
@media (max-width: 600px) {
    html body .contact-page-step-two .contact-form-card { padding-top: 16px; }
    html body .contact-page-step-two .contact-inline-back { top: 32px; }
}

/* Compact preferences retain comfortable labels and touch targets. */
html body #main-content .contact-page-step-two .contact-appointment-preferences > h3 { margin-bottom: 12px; }
html body #main-content .contact-page-step-two .contact-appointment-preferences :is(.input, .contact-choice-field, .booking-choice-panel) { margin: 0 0 14px; }
html body #main-content .contact-page-step-two .contact-appointment-preferences #appointment-location-field { margin: 0; }
html body #main-content .contact-page-step-two .contact-appointment-preferences :is(.contact-choice-label, h4, label:not(.contact-choice-option)) {
    display: block;
    margin: 0 0 6px;
    font-size: max(16px, 1.6rem);
    font-weight: 600;
    line-height: 1.4;
}
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-preferences .contact-choice-options { gap: 8px; }
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-preferences :is(.contact-choice-option, .booking-therapist-grid button) {
    min-height: 44px;
    height: auto;
    padding: 9px 10px;
    font-size: max(16px, 1.6rem);
    font-weight: 600;
    line-height: 1.4;
}
html body #main-content .contact-page-step-two .contact-therapist-availability {
    min-height: 21px;
    margin: 6px 0 0;
    color: #526b5e;
    font-size: max(14px, 1.4rem);
    line-height: 1.5;
}

html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-preferences .booking-choice-panel { padding: 0; margin: 0 0 14px; }
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-preferences .booking-therapist-grid { gap: 8px; }

/* Center the title against the whole card, independently of the side controls. */
@media (min-width: 961px) {
    html body .contact-page-step-two .contact-form-heading {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        padding-left: 0;
    }
    html body .contact-page-step-two .contact-form-heading h2 {
        text-align: center;
        padding-inline: 260px;
    }
    html body .contact-page-step-two .contact-flow-progress {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        grid-column: 1;
        width: 240px;
        max-width: 240px;
    }
}
@media (max-width: 960px) {
    html body .contact-page-step-two .contact-form-heading { padding-left: 0; }
    html body .contact-page-step-two .contact-form-heading h2 { text-align: center; }
    html body .contact-page-step-two .contact-flow-progress { margin-left: 60px; min-height: 48px; display: flex; align-items: center; justify-content: flex-end; }
}

/* Inline date/time selection keeps the appointment journey in one desktop view. */
html body .contact-page .page-back-button,
html body .contact-page .page-back-button:is(:hover, :focus-visible) {
    width: 44px; min-width: 44px; height: 44px;
    padding: 0; border: 0; border-radius: 50%;
    background: transparent; box-shadow: none;
}
html body .contact-page .page-back-icon { width: 36px; height: 36px; flex-basis: 36px; }
html body .contact-page-step-two .contact-form-card { padding: 12px 24px 20px; }
html body .contact-page-step-two .contact-inline-back { top: 28px; left: 48px; }
html body .contact-page-step-two .contact-form-heading { min-height: 44px; margin-bottom: 8px; }
html body .contact-page-step-two .contact-form-heading h2 { font-size: max(26px, 2.6rem); }
html body .contact-page-step-two .contact-appointment-column > h3 { margin-bottom: 12px; }
html body .contact-page-step-two .contact-appointment-column .booking-priority-panel {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
html body .contact-page-step-two .booking-priority-panel h4 { flex-shrink: 0; margin: 0; }
html body .contact-page-step-two .contact-appointment-column .booking-priority-options { gap: 8px; }
html body .contact-page-step-two .booking-priority-options label { min-height: 44px; padding: 8px 12px; }
html body .contact-page-step-two .contact-appointment-column .booking-date-time-grid {
    display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px;
}
html body .contact-page-step-two .booking-date-time-grid > .booking-choice-panel { margin: 0; }
html body .contact-page-step-two .booking-choice-panel:has(.booking-calendar:not([hidden])) > .booking-date-trigger { display: none !important; }
html body .contact-page-step-two .booking-calendar { width: 100%; max-width: none; padding: 10px; margin: 0; }
html body .contact-page-step-two .booking-calendar-header { margin-bottom: 6px; }
html body .contact-page-step-two .booking-calendar-header button { min-width: 44px; min-height: 44px; padding: 4px; }
html body .contact-page-step-two .booking-calendar-grid { gap: 4px; }
html body .contact-page-step-two .booking-calendar-grid button { min-width: 0; min-height: 44px; height: 44px; padding: 4px; font-size: 1.4rem; }
html body .contact-page-step-two .booking-calendar-weekday { font-size: 1.4rem; padding: 4px 0; }
html body .contact-page-step-two .booking-calendar-legend { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 8px 0 0; font-size: 1.3rem; line-height: 1.4; }
html body .contact-page-step-two .booking-calendar-close { display: none; }
html body .contact-page-step-two .contact-appointment-column .booking-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px; }
html body .contact-page-step-two .booking-step-availability { margin: 0 0 8px; font-size: 1.4rem; line-height: 1.5; }
html body .contact-page-step-two .booking-step-availability:empty { display: none; }
html body .contact-page-step-two .booking-time-legend { flex-wrap: wrap; gap: 4px 6px; margin: 0 0 8px; font-size: 1.3rem; }
html body .contact-page-step-two .booking-time-grid .booking-empty-result { grid-column: 1 / -1; }
html body .contact-page-step-two .contact-appointment-footer { margin-top: 12px; padding-top: 12px; }
@media (max-width: 1200px) {
    html body .contact-page-step-two .contact-appointment-column .booking-date-time-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
    html body .contact-page-step-two .contact-form-card { padding: 16px 20px 20px; }
    html body .contact-page-step-two .contact-inline-back { top: 32px; left: 36px; }
    html body .contact-page-step-two .contact-appointment-column .booking-priority-panel { display: block; }
    html body .contact-page-step-two .booking-priority-panel h4 { margin-bottom: 8px; }
}

/* Override legacy fieldset spacing only inside this public appointment step. */
html body #main-content .contact-page-step-two #public-enquiry-form { margin-bottom: 0; }
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .booking-planner { margin: 0; }
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-column .booking-choice-panel { padding: 0; margin: 0; border: 0; }
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-column .booking-priority-panel { margin-bottom: 12px; }
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-footer .booking-results { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; }
html body .contact-page-step-two .contact-appointment-footer .booking-results-heading { flex-shrink: 0; margin: 0; }
html body .contact-page-step-two .contact-appointment-footer .booking-results-heading h4 { font-size: 1.4rem; line-height: 1.5; margin: 0; }
html body .contact-page-step-two .contact-appointment-footer .booking-result-grid { flex: 1; }
html body .contact-page-step-two .contact-appointment-footer .booking-empty-result { margin: 0; padding: 8px 12px; font-size: 1.4rem; }
html body .contact-page-step-two .contact-privacy-links { margin-top: 8px; padding-top: 0; border: 0; }
@media (max-width: 960px) {
    html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-footer .booking-results { flex-direction: column; align-items: stretch; gap: 8px; }
}

html body .contact-page .page-back-button,
html body .contact-page .page-back-button:is(:hover, :focus-visible) { background: transparent !important; border-radius: 50% !important; }
html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .booking-priority-options label { min-height: 44px; height: 44px; margin: 0; padding: 8px 12px; display: flex; align-items: center; justify-content: center; }
html body .contact-page-step-two .booking-priority-options strong { font-size: 1.6rem; line-height: 1.4; }

html body #main-content .contact-page-step-two #public-enquiry-form #appointment-fields .contact-appointment-footer .booking-result-card {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    flex-wrap: wrap; gap: 8px 16px; min-height: 44px; padding: 8px 12px; text-align: left;
}
html body .contact-page-step-two .contact-appointment-footer .booking-result-card > * { width: auto; }
@media (min-width: 961px) {
    html body .contact-page-step-two .contact-form-panel { padding-top: 12px; padding-bottom: 16px; }
    html body .contact-page-step-two .contact-form-card { padding-bottom: 16px; }
    html body .contact-page-step-two .contact-inline-back { top: 24px; }
}

/* Review step shares the appointment header and keeps the final checks compact. */
html body .contact-page-step-three .contact-form-panel { padding: 12px 24px 16px; }
html body .contact-page-step-three .contact-form-card { padding: 12px 24px 16px; }
html body .contact-page-step-three .contact-inline-back { top: 24px; left: 48px; }
html body .contact-page-step-three .contact-form-heading { min-height: 44px; margin-bottom: 12px; padding-left: 0; }
html body .contact-page-step-three .contact-form-heading h2 { font-size: max(26px, 2.6rem); line-height: 1.2; letter-spacing: -.015em; text-align: center; }
html body .contact-page-step-three .contact-flow-progress { color: #526b5e; font-size: max(14px, 1.4rem); font-weight: 600; line-height: 1.5; }
html body .contact-page-step-three [data-contact-flow-description] { text-align: center; margin: 0; font-size: max(14px, 1.4rem); line-height: 1.5; }
html body .contact-page-step-three .contact-details-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; margin: 0 0 12px; padding: 8px 16px; }
html body .contact-page-step-three .contact-details-summary > div { display: contents; }
html body .contact-page-step-three .contact-details-summary h3 { grid-column: 1; grid-row: 1; font-size: max(16px, 1.6rem); }
html body .contact-page-step-three .contact-details-summary p { grid-column: 2; grid-row: 1; margin: 0; }
html body .contact-page-step-three .contact-edit-details { grid-column: 3; grid-row: 1; }
html body .contact-page-step-three #appointment-summary { margin: 0 0 16px; padding: 12px 16px; box-shadow: none; }
html body .contact-page-step-three #appointment-summary h3 { margin: 0 0 10px; font-size: max(18px, 1.8rem); }
html body .contact-page-step-three #appointment-summary dl { gap: 12px; grid-template-columns: 1fr 1fr 1.3fr 1fr; }
html body .contact-page-step-three #appointment-summary dl > div { padding: 0 12px 0 0; border: 0; border-right: 1px solid var(--ui-line); border-radius: 0; background: transparent; }
html body .contact-page-step-three #appointment-summary dl > div:last-child { border-right: 0; }
html body .contact-page-step-three #appointment-summary dt { font-size: max(13px, 1.3rem); line-height: 1.4; letter-spacing: .025em; }
html body .contact-page-step-three #appointment-summary dd { margin-top: 4px; font-size: max(16px, 1.6rem); line-height: 1.5; overflow-wrap: anywhere; }
html body .contact-page-step-three #request-description > .input { margin: 0; }
html body .contact-page-step-three #request-description label { margin: 0 0 6px; font-size: max(16px, 1.6rem); }
html body .contact-page-step-three #public-enquiry-form textarea { min-height: 120px; height: 120px; padding: 12px; font-size: max(16px, 1.6rem); line-height: 1.5; resize: vertical; }
html body .contact-page-step-three .contact-message-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
html body .contact-page-step-three .contact-message-meta p { margin: 0; }
html body .contact-page-step-three .contact-send-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; }
html body .contact-page-step-three .contact-captcha { margin: 0; flex: 1; min-width: 280px; max-width: 400px; }
html body .contact-page-step-three .contact-submit { width: auto; min-height: 44px; margin: 0; padding: 10px 24px; font-size: max(16px, 1.6rem); }
html body .contact-page-step-three #public-enquiry-form { margin-bottom: 0; }
html body .contact-page-step-three .contact-privacy-links { margin-top: 12px; padding-top: 10px; }
@media (min-width: 961px) {
    html body .contact-page-step-three .contact-form-heading { position: relative; grid-template-columns: minmax(0, 1fr); }
    html body .contact-page-step-three .contact-form-heading h2 { padding-inline: 260px; }
    html body .contact-page-step-three .contact-flow-progress { position: absolute; right: 0; top: 22px; transform: translateY(-50%); grid-column: 1; width: 240px; max-width: 240px; }
}
@media (max-width: 960px) {
    html body .contact-page-step-three .contact-form-panel { padding: 16px 16px 24px; }
    html body .contact-page-step-three .contact-form-card { padding: 16px 20px 20px; }
    html body .contact-page-step-three .contact-inline-back { top: 32px; left: 36px; }
    html body .contact-page-step-three .contact-flow-progress { margin-left: 60px; min-height: 48px; display: flex; align-items: center; justify-content: flex-end; }
    html body .contact-page-step-three .contact-details-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
    html body .contact-page-step-three .contact-edit-details { grid-column: 2; }
    html body .contact-page-step-three .contact-details-summary p { grid-column: 1 / -1; grid-row: 2; }
    html body .contact-page-step-three #appointment-summary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    html body .contact-page-step-three #appointment-summary dl > div { border-right: 0; }
    html body .contact-page-step-three .contact-send-actions { align-items: stretch; }
    html body .contact-page-step-three .contact-submit { width: 100%; }
}
html body .contact-page-step-three #appointment-summary dt { margin: 0; }
html body .contact-page-step-three #appointment-summary dd { margin: 4px 0 0; }
html body .contact-page-step-three [data-contact-flow-description] { display: none; }

/* Keep the two review summaries on one row and the security check at the left. */
html body .contact-page-step-three .contact-review-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; }
html body .contact-page-step-three .contact-review-cards:not(:has(#appointment-summary:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
html body .contact-page-step-three .contact-review-cards .contact-details-summary { grid-template-columns: minmax(0, 1fr) auto; align-content: start; margin: 0; padding: 12px 16px; }
html body .contact-page-step-three .contact-review-cards .contact-details-summary h3 { align-self: center; }
html body .contact-page-step-three .contact-review-cards .contact-edit-details { grid-column: 2; }
html body .contact-page-step-three .contact-review-cards .contact-details-summary p { grid-column: 1 / -1; grid-row: 2; }
html body .contact-page-step-three .contact-review-cards #appointment-summary { margin: 0; }
html body .contact-page-step-three .contact-send-actions { justify-content: space-between; }
html body .contact-page-step-three .contact-captcha { flex: 0 1 400px; margin-right: auto; padding: 0; }
html body .contact-page-step-three .contact-captcha[data-security-state="success"] .turnstile-status { display: none; }
html body .contact-page-step-three .contact-captcha .cf-turnstile { width: 300px; max-width: 100%; }
html body .contact-page-step-three #public-enquiry-form textarea { min-height: 160px; height: 160px; }
/* Use spare desktop height for the message in either request flow. */
@media (min-width: 961px) {
    html body .contact-page-step-three .contact-form-panel { padding-bottom: 12px; }
    html body .contact-page-step-three .contact-form-card {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 76px);
    }
    html body .contact-page-step-three :is(#public-enquiry-form, .contact-form-steps, .contact-form-step-track, [data-contact-step='3'], #request-description, #request-description > .input) {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    html body .contact-page-step-three #public-enquiry-form textarea {
        flex: 1;
        height: auto;
    }
}
@media (max-width: 960px) {
    html body .contact-page-step-three .contact-review-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Completion stays in the same card, with a clear end state instead of another numbered step. */
html body .contact-page-complete { display: block; min-height: calc(100dvh - 52px); }
html body .contact-page-complete .contact-intro { display: none; }
html body .contact-page-complete .contact-form-panel { width: 100%; max-width: none; padding: 12px 24px; }
html body .contact-shell.contact-page-complete .contact-form-card { display: flex; flex-direction: column; width: 100%; max-width: none; min-height: calc(100dvh - 76px); padding: 24px; }
html body .contact-page-complete .contact-receipt { display: flex; flex-direction: column; justify-content: center; flex: 1; }
html body .contact-page-complete .contact-inline-back { top: 24px; left: 48px; }
html body .contact-receipt-heading { position: relative; text-align: center; padding: 8px 120px 20px; }
html body .contact-receipt-check { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #e7f5ed; color: #168650; font-size: 3.2rem; margin-bottom: 12px; }
html body .contact-receipt-heading .contact-flow-progress { position: absolute; top: 0; right: 0; margin: 0; color: #526b5e; font-size: max(14px, 1.4rem); font-weight: 600; }
html body .contact-receipt #receipt-heading { margin: 0 0 12px; color: #137446; font-size: max(28px, 2.8rem); line-height: 1.25; }
html body .contact-receipt-heading > p:last-child { margin: 0; font-size: max(16px, 1.6rem); line-height: 1.5; }
html body .contact-receipt-details { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0 0 20px; padding: 20px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-background); }
html body .contact-receipt-details > div { min-width: 0; }
html body .contact-receipt-details .contact-receipt-guest-name { grid-column: span 2; }
html body .contact-receipt-details .contact-receipt-guest-email { grid-column: span 3; }
html body .contact-enquiry-receipt-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
html body .contact-receipt-details dt { margin: 0 0 8px; color: #526b5e; font-size: max(14px, 1.4rem); font-weight: 600; }
html body .contact-receipt-details dd { margin: 0; font-size: max(16px, 1.6rem); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
html body .contact-receipt > p { margin: 0 0 20px; padding: 12px 16px; border-radius: 10px; background: #edf7f1; font-size: max(16px, 1.6rem); line-height: 1.5; }
html body .contact-receipt > p[role="alert"] { background: #fff5e5; }
html body .contact-receipt .receipt-action-group { display: flex; justify-content: center; gap: 12px; margin: 0; }
html body .contact-receipt .receipt-action-group .btn { min-height: 44px; font-size: max(16px, 1.6rem); }
@media (max-width: 960px) {
    html body .contact-page-complete .contact-form-panel { padding: 16px; }
    html body .contact-shell.contact-page-complete .contact-form-card { min-height: calc(100dvh - 84px); padding: 20px; }
    html body .contact-page-complete .contact-inline-back { top: 28px; left: 32px; }
    html body .contact-receipt-heading { padding: 48px 0 20px; }
    html body .contact-receipt-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .contact-receipt-details > div:first-child { grid-column: 1 / -1; }
    html body .contact-receipt-details .contact-receipt-guest-email { grid-column: 1 / -1; }
    html body .contact-enquiry-receipt-details { grid-template-columns: minmax(0, 1fr); }
}

/* Keep the journey inside the available width, including the reserved scrollbar gutter. */
html body #main-content > .container:has(> .contact-page) { max-width: none; width: 100%; padding-inline: 0; }
html body:has(.contact-page) #main-content { padding-block: 0; }
html body .contact-shell.contact-page { position: relative; width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background-color: #0b5b3b; background-image: url('../img/contact-cta-background-v2.webp'); }
html body .contact-shell.contact-page-complete .contact-form-card { position: relative; }
html body .contact-page-complete .contact-receipt-heading { position: static; }
html body .contact-page-complete .contact-receipt-heading .contact-flow-progress { top: 24px; right: 24px; }
/* Announce step changes without drawing a control outline around static headings. */
html body .contact-page :is(#contact-flow-title, #receipt-heading):focus { outline: none; box-shadow: none; }
@media (max-width: 960px) {
    html body .contact-page-step-three .contact-form-card {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 84px);
    }
    html body .contact-page-step-three :is(#public-enquiry-form, .contact-form-steps, .contact-form-step-track, [data-contact-step='3'], #request-description, #request-description > .input) {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    html body .contact-page-step-three #public-enquiry-form textarea { flex: 1; height: auto; }
}
@media (min-width: 961px) {
    html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three):not(.contact-page-complete) .contact-form-panel { padding: 12px 32px; }
    html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three):not(.contact-page-complete) .contact-form-card { display: flex; flex-direction: column; min-height: calc(100dvh - 76px); }
    html body .contact-page:not(.contact-page-step-two):not(.contact-page-step-three):not(.contact-page-complete) #public-enquiry-form { display: flex; flex-direction: column; justify-content: center; flex: 1; }
    html body .contact-page-step-two .contact-form-card { min-height: calc(100dvh - 76px); }
}

/* Journey status and receipts use the same theme as the form. */
html[data-theme="dark"] body .contact-page :is(.contact-flow-progress, .contact-receipt-details dt) {
    color: var(--ui-muted);
}
html[data-theme="dark"] body .contact-page .contact-collection-notice,
html[data-theme="dark"] body .contact-receipt > p {
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}
html[data-theme="dark"] body .contact-receipt #receipt-heading { color: var(--color-physio-green); }
html[data-theme="dark"] body .contact-receipt > p[role="alert"] {
    background: #392c18;
    color: #f1bc78;
}
html[data-high-contrast="1"] body .contact-page :is(.contact-flow-progress, .contact-collection-notice, .contact-receipt-details dt) {
    color: var(--ui-text);
}
html[data-theme="dark"] body .contact-page .contact-form-heading > p:not(.contact-flow-progress) {
    color: var(--ui-muted);
}
html[data-high-contrast="1"] body .contact-page .contact-form-heading > p {
    color: var(--ui-text);
}
html body .contact-page-step-three #appointment-summary dl > div { min-width: 0; }
html body .contact-page-step-three #appointment-summary :is(dt, dd) { overflow-wrap: anywhere; }
@media (max-width: 650px) {
    html[data-large-text="1"] body .contact-page-step-three #appointment-summary dl {
        grid-template-columns: minmax(0, 1fr);
    }
}