.contact-hero {
    background: var(--wa-color-surface-hero);
    padding: 4.5rem 0 5rem;
}

.contact-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-hero__title {
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 3.75rem);
    line-height: 1.2;
    color: var(--wa-color-black);
    text-align: center;
    font-family: var(--inter-sbold);
}

.contact-hero__copy {
    margin: 1rem 0 2.5rem;
    max-width: 35rem;
    text-align: center;
    color: var(--wa-subline);
    line-height: 1.7;
    font-size: 1.1rem;
    font-family: var(--inter-regular);
}

.contact-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

.contact-info-layer,
.contact-locations-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.contact-locations-wrap__title {
    margin: 0.5rem 0 0;
    color: var(--wa-color-black);
    font-size: 1.25rem;
}

.contact-card,
.contact-form-card {
    background: var(--wa-color-white);
    border: 1px solid var(--wa-color-card-border);
    border-radius: var(--wa-radius-base);
    box-shadow: var(--wa-shadow-xs);
}

.contact-card {
    padding: 2.05rem;
}

.contact-card__row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-icon {
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-icon--blue {
    background: var(--wa-color-blue-50);
}

.contact-icon--green {
    background: var(--wa-color-green-50);
}

.contact-icon--purple {
    background: var(--wa-color-purple-50);
}

.contact-card h3,
.contact-card h4 {
    margin: 0;
    color: var(--wa-color-black);
}

.contact-card a {
    display: inline-block;
    margin-top: 0.5rem;
    text-decoration: none;
    color: var(--wa-color-link);
}

.contact-card p {
    margin: 0.3rem 0 0;
    color: var(--wa-color-text-600);
    font-size: var(--wa-font-15);
    line-height: 1.6;
}

.contact-social {
    margin-top: 0.75rem;
    border-radius: 0.5rem;
    background: var(--wa-color-card-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-form-card {
    padding: 1.2rem 2rem;
}

.contact-form-card h2 {
    margin: 0 0 1rem;
    color: var(--wa-color-black);
    font-size: 1.25rem;
    font-family: var(--inter-medium);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--wa-color-text-700);
    font-size: var(--wa-font-14);
}

.contact-form__field {
    position: relative;
    display: block;
}

.contact-form__field-icon {
    position: absolute;
    left: 1rem;
    top: 53%;
    transform: translateY(-50%);
    pointer-events: none;
}

.contact-form input,
.contact-form textarea {
    border: 1px solid var(--wa-color-border-input);
    border-radius: var(--wa-radius-md);
    background: var(--wa-color-white);
    padding: 0.75rem 1rem;
    font-size: var(--wa-font-16);
    color: var(--wa-color-black);
    font-family: var(--inter-light);
}

.contact-form textarea {
    min-height: 4rem;
    resize: vertical;
}

.contact-form__field input {
    width: 100%;
    padding-left: 2.5rem;
}

.form-error {
    color: var(--wa-color-error);
    font-size: 0.8rem;
    min-height: 1rem;
}

.contact-form__submit {
    margin-top: 0.3rem;
    height: 3.25rem;
    border: 0;
    border-radius: var(--wa-radius-md);
    background: var(--wa-color-primary-600);
    color: var(--wa-color-white);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}

.contact-form__note {
    margin: 0;
    text-align: center;
    color: var(--wa-color-text-500);
    font-size: var(--wa-font-12);
    font-family: var(--inter-light);
}

.contact-form__captcha {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ── captcha widget restyled to the site's form/brand tokens ────────── */

/* outer widget frame — matches a form input */
.contact-form__captcha .zwaf-captcha-container {
    margin: 0;
    min-width: 100%;
    background: var(--wa-color-white);
    border: 1px solid var(--wa-color-border-input);
    border-radius: var(--wa-radius-md);
}

/* "I'm not a robot" row + expanded challenge panel */
.contact-form__captcha .zwaf-captcha-container #robot-section,
.contact-form__captcha .captcha-container,
.contact-form__captcha .captcha-section {
    background: var(--wa-color-white);
    border-radius: var(--wa-radius-md);
}

/* When the challenge is open the widget draws a #999 divider under the
   header (rule: `.zwaf-captcha-container.<id>:has(#captcha-container-<id>:not(.hidden)) #robot-section`).
   Override it — with !important so it wins over that per-instance selector —
   to the border colour used everywhere else in this widget. */
.contact-form__captcha .zwaf-captcha-container #robot-section {
    border-color: var(--wa-color-border-input) !important;
}

/* the circular checkbox — idle look only. The widget swaps in its own
   green (verification-success) / red (verification-failed / -expired) fill
   plus a white tick once the challenge is solved, so those states must NOT
   be overridden here or the success tick disappears. */
.contact-form__captcha input#robot-check {
    padding: 0 !important;
}
.contact-form__captcha #robot-section:not([class*="verification-"]) input#robot-check {
    background: var(--wa-color-white) !important;
    border: 2px solid var(--wa-color-border-input) !important;
}
.contact-form__captcha #robot-section:not([class*="verification-"]) input#robot-check:checked {
    background: var(--wa-color-primary-600) !important;
    border-color: var(--wa-color-primary-600) !important;
}
/* match the ring to the widget's own success-green / failure fill so the
   generic `.contact-form input` border rule doesn't leave a grey outline */
.contact-form__captcha #robot-section.verification-success input#robot-check {
    border-color: rgb(39, 174, 96) !important;
}
.contact-form__captcha #robot-section.verification-failed input#robot-check {
    border-color: var(--wa-color-error) !important;
}
/* expired is a "try again", not an error — flag it in orange */
.contact-form__captcha #robot-section.verification-expired input#robot-check {
    border-color: #f97316 !important;
}

/* labels, instruction header, status text */
.contact-form__captcha #captcha-label,
.contact-form__captcha #status-label {
    color: var(--wa-color-text-700) !important;
    font-family: var(--inter-regular) !important;
}
.contact-form__captcha #robot-label {
    font-family: var(--inter-regular) !important;
}
/* only recolour the "I'm not a robot" label while idle — let the widget's
   green "Verification success" / red failure colour through afterwards */
.contact-form__captcha #robot-section:not([class*="verification-"]) #robot-label {
    color: var(--wa-color-text-700) !important;
}

/* refresh icon on the checkbox row */
.contact-form__captcha #robot-reload svg {
    color: var(--wa-color-primary-600);
    stroke: var(--wa-color-primary-600);
}

/* text-challenge answer input — mirrors .contact-form input */
.contact-form__captcha #textCaptchaInput {
    background: var(--wa-color-white) !important;
    border: 1px solid var(--wa-color-border-input) !important;
    border-radius: var(--wa-radius-md) !important;
    color: var(--wa-color-black) !important;
    font-family: var(--inter-light) !important;
}
.contact-form__captcha #textCaptchaInput:focus {
    outline: none !important;
    border-color: var(--wa-color-primary-500) !important;
    box-shadow: 0 0 0 3px var(--wa-color-primary-100) !important;
}
.contact-form__captcha #textImg {
    border-radius: var(--wa-radius-sm);
}

/* loading dots */
.contact-form__captcha #loader .ball {
    background: var(--wa-color-primary-600) !important;
}

/* primary action buttons (verify + retry) — match .contact-form__submit.
   Retry ships with a solid fill from the widget, so it needs white text
   or the label is brand-blue on brand-blue and disappears. */
.contact-form__captcha [class*="verify-button"],
.contact-form__captcha [class*="retry-button"] {
    background: var(--wa-color-primary-600) !important;
    color: var(--wa-color-white) !important;
    border: 0 !important;
}
.contact-form__captcha [class*="verify-button"]:hover,
.contact-form__captcha [class*="retry-button"]:hover {
    background: var(--wa-color-primary-700) !important;
}

/* Verify / Retry / Reset — vertical padding */
.contact-form__captcha [class*="verify-button"],
.contact-form__captcha [class*="retry-button"],
.contact-form__captcha [class*="reset-button"] {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* secondary buttons (reset / report / refresh / audio / visual / info) */
.contact-form__captcha [class*="reset-button"],
.contact-form__captcha [class*="report-button"],
.contact-form__captcha [class*="refresh-button"],
.contact-form__captcha [class*="audio-button"],
.contact-form__captcha [class*="visual-button"],
.contact-form__captcha [class*="info-button"] {
    color: var(--wa-color-primary-600) !important;
    border-radius: var(--wa-radius-sm) !important;
}

/* ── failure screen ("Failed to solve captcha!" + Report / Retry) ──────
   The widget leaves the stale ⟳ ⚑ ⓘ / Reset / Verify toolbar mounted
   below the status block; hide it so the status actions stand alone, and
   give the message + buttons even spacing. */
.contact-form__captcha #status-section:has(#captchaRetryBtn[style*="block"]) ~ #captcha-options-section {
    display: none !important;
}
.contact-form__captcha #status-section {
    flex-direction: column;
    align-items: center;
    gap: 0.625rem !important;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
}
.contact-form__captcha #status-label {
    color: var(--wa-color-error) !important;
    font-family: var(--inter-regular) !important;
}
.contact-form__captcha .status-action-btns {
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
/* "Report an issue" — outlined secondary that matches the filled Retry:
   brand-blue outline instead of the stray grey border, same radius and
   height as Retry. Scoped to the failure block so the ⚑ toolbar icon
   (also a *report-button*) is left alone. */
.contact-form__captcha .status-action-btns [class*="report-button"] {
    background: transparent !important;
    color: var(--wa-color-primary-600) !important;
    border: 1px solid var(--wa-color-primary-600) !important;
    border-radius: var(--wa-radius-sm) !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.contact-form__captcha .status-action-btns [class*="report-button"]:hover {
    background: var(--wa-color-primary-100) !important;
}
/* keep Retry's corner radius in step with Report */
.contact-form__captcha .status-action-btns [class*="retry-button"] {
    border-radius: var(--wa-radius-sm) !important;
}

/* ── "Report an issue" panel ──────────────────────────────────────────
   The widget stacks each radio ON TOP of its label in a fixed 350px,
   centre-aligned column. Lay the options out as a normal left-aligned
   radio list, un-cap the width, and brand the Submit / Close pair. */
.contact-form__captcha #captcha-report-form {
    width: 100% !important;
    max-width: none !important;
    padding: 0.75rem !important;
    text-align: left !important;
}
.contact-form__captcha #report-title {
    margin: 0 0 0.75rem !important;
    text-align: left !important;
    color: var(--wa-color-text-700) !important;
    font-family: var(--inter-regular) !important;
    font-size: var(--wa-font-16);
}
.contact-form__captcha #report-options {
    gap: 0.15rem;
    margin: 0 0 0.75rem !important;
    align-items: stretch;
}
.contact-form__captcha .report-option {
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    height: auto !important;
    padding: 0.3rem 0 !important;
    text-align: left !important;
    cursor: pointer;
}
.contact-form__captcha .report-option input {
    flex: 0 0 auto;
    margin: 0 !important;
    accent-color: var(--wa-color-primary-600);
}
.contact-form__captcha .report-option span {
    color: var(--wa-color-text-700) !important;
    font-family: var(--inter-light) !important;
}
.contact-form__captcha #report-comments textarea {
    width: 100% !important;
    background: var(--wa-color-white) !important;
    border: 1px solid var(--wa-color-border-input) !important;
    border-radius: var(--wa-radius-md) !important;
    color: var(--wa-color-black) !important;
    font-family: var(--inter-light) !important;
}
.contact-form__captcha #report-actions {
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
/* collapse the empty status line the widget leaves mounted under the actions */
.contact-form__captcha #report-status:empty {
    display: none !important;
    margin: 0 !important;
}
.contact-form__captcha [class*="report-submit-button"] {
    background: var(--wa-color-primary-600) !important;
    color: var(--wa-color-white) !important;
    border: 0 !important;
    border-radius: var(--wa-radius-sm) !important;
    padding: 5px 16px !important;
}
.contact-form__captcha [class*="report-submit-button"]:hover {
    background: var(--wa-color-primary-700) !important;
}
.contact-form__captcha [class*="report-close-button"] {
    background: transparent !important;
    color: var(--wa-color-primary-600) !important;
    border: 1px solid var(--wa-color-primary-600) !important;
    border-radius: var(--wa-radius-sm) !important;
    padding: 5px 16px !important;
}
.contact-form__captcha [class*="report-close-button"]:hover {
    background: var(--wa-color-primary-100) !important;
}

/* ── "Keyboard Accessibility" info panel ─────────────────────────────
   Same fixed-350 / centre-aligned widget markup as the report panel.
   Lay it out left-aligned at full width, render each shortcut as a
   keyboard-key chip, and brand the Close button. */
.contact-form__captcha #captcha-info-panel {
    width: 100% !important;
    max-width: none !important;
    padding: 0.75rem !important;
    text-align: left !important;
}
.contact-form__captcha #info-title {
    margin: 0 0 0.625rem !important;
    text-align: left !important;
    color: var(--wa-color-text-700) !important;
    font-family: var(--inter-regular) !important;
    font-size: var(--wa-font-16);
}
.contact-form__captcha #info-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.contact-form__captcha #info-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 0.5rem !important;
    color: var(--wa-color-text-700) !important;
    font-family: var(--inter-light) !important;
    font-size: var(--wa-font-14);
    line-height: 1.5;
}
.contact-form__captcha #info-list li:last-child {
    margin-bottom: 0 !important;
}
.contact-form__captcha .info-key {
    flex: 0 0 auto;
    background: var(--wa-color-surface-soft) !important;
    border: 1px solid var(--wa-color-border-input) !important;
    border-radius: var(--wa-radius-sm) !important;
    padding: 0.1rem 0.4rem !important;
    color: var(--wa-color-text-700) !important;
    font-family: var(--inter-regular) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: var(--wa-font-12) !important;
    white-space: nowrap;
}
.contact-form__captcha #info-list li span {
    flex: 1 1 12rem;
    color: var(--wa-color-text-500) !important;
}
.contact-form__captcha #info-actions {
    justify-content: flex-end !important;
    margin-top: 0.75rem !important;
}
.contact-form__captcha [class*="info-close-button"] {
    background: transparent !important;
    color: var(--wa-color-primary-600) !important;
    border: 1px solid var(--wa-color-primary-600) !important;
    border-radius: var(--wa-radius-sm) !important;
    padding: 5px 16px !important;
}
.contact-form__captcha [class*="info-close-button"]:hover {
    background: var(--wa-color-primary-100) !important;
}

/* ── compact challenge layout ──────────────────────────────────────────
   Two rows below the "I'm not a robot" header:
     1. challenge image  +  answer input   (input fills to the panel edge)
     2. utility icons (⟳ ⚑ ⓘ) left   ·   Reset / Verify right
   The widget ships a fixed 350px inner column with a lot of vertical
   slack; the rules below un-cap the width, drop the fixed heights, and
   remove the redundant caption so the panel is ~165px instead of ~255px. */
.contact-form__captcha [id^="captcha-container"] {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.75rem !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

/* the field placeholder already says "Enter characters" */
.contact-form__captcha #captcha-label {
    /* display: none !important; */
    text-align: left !important;
    margin: 10px 0px !important;
    padding: 0 !important;
    font-family: var(--inter-regular) !important;
}

/* release the widget's fixed 350px inner column */
.contact-form__captcha #captcha-section,
.contact-form__captcha #captcha-ui,
.contact-form__captcha #textCaptcha {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    justify-content: flex-start !important;
}
.contact-form__captcha #captcha-section {
    align-items: stretch !important;
}

/* row 1 — challenge image + answer input */
.contact-form__captcha #captcha-ui,
.contact-form__captcha #textCaptcha {
    align-items: center;
}
.contact-form__captcha #textCaptcha {
    gap: 0.625rem;
}
.contact-form__captcha #textImg {
    flex: 0 0 auto;
    width: auto !important;
    height: 44px !important;
    margin: 0 !important;
}
.contact-form__captcha #textCaptchaInput {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 40px !important;
    margin: 0 !important;
}

/* row 2 — utility icons (left) · Reset / Verify (right) */
.contact-form__captcha #captcha-options-section {
    width: 100% !important;
    margin: 0.625rem 0 0 !important;
    padding: 0 !important;
    align-items: center;
    gap: 0.375rem;
}
.contact-form__captcha #captcha-options-section .button-holder {
    width: 30px;
    height: 30px;
    margin: 0 !important;
}
.contact-form__captcha #captcha-audio-section,
.contact-form__captcha #captcha-visual-section {
    display: none !important;
}
.contact-form__captcha #captcha-btns {
    margin-left: auto !important;
    gap: 0.5rem;
}
.contact-form__captcha #captchaResetBtn,
.contact-form__captcha #captchaVerifyBtn {
    margin: 0 !important;
}

/* inline loader while the request is in flight */
.contact-form__submit:disabled {
    cursor: progress;
    opacity: 0.9;
}

.contact-form__spinner {
    display: none;
    animation: contact-form__spin 0.7s linear infinite;
}

.contact-form__submit.is-loading .contact-form__submit-icon {
    display: none;
}

.contact-form__submit.is-loading .contact-form__spinner {
    display: block;
}

@keyframes contact-form__spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Submit flip: the card turns over to reveal the confirmation ── */
.contact-form-flip {
    perspective: 1600px;
}

.contact-form-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-form-flip.is-sent .contact-form-card {
    transform: rotateY(180deg);
}

.contact-form-card__front {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.2s linear;
}

.contact-form-flip.is-sent .contact-form-card__front {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s linear, visibility 0s linear 0.4s;
}

.contact-form-success {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.85rem;
    padding: 3rem 2rem;
    border-radius: var(--wa-radius-base);
    background: linear-gradient(157deg,
        var(--wa-color-white) 0%,
        var(--wa-color-surface-soft) 52%,
        var(--wa-color-primary-100) 100%);
    opacity: 0;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.3s linear 0.28s;
}

.contact-form-flip.is-sent .contact-form-success {
    opacity: 1;
    transition-delay: 0s;
}

.contact-form-success__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wa-color-primary-600);
    color: var(--wa-color-white);
}

.contact-form-success__title {
    margin: 0;
    color: var(--wa-color-black);
    font-size: var(--wa-font-24);
    font-family: var(--inter-sbold);
    letter-spacing: -0.02em;
    outline: none;
}

.contact-form-success__copy {
    margin: 0;
    max-width: 28rem;
    color: var(--wa-color-text-600);
    font-size: var(--wa-font-18);
    line-height: 1.6;
    font-family: var(--inter-regular);
}

/* confirmation content arrives as the face squares up */
.contact-form-success__icon,
.contact-form-success__title,
.contact-form-success__copy {
    opacity: 0;
}

.contact-form-success__icon {
    transform: scale(0.85);
}

.contact-form-success__title,
.contact-form-success__copy {
    transform: translateY(8px);
}

.contact-form-flip.is-sent .contact-form-success__icon,
.contact-form-flip.is-sent .contact-form-success__title,
.contact-form-flip.is-sent .contact-form-success__copy {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-form-flip.is-sent .contact-form-success__icon {
    transition-delay: 0.42s;
}

.contact-form-flip.is-sent .contact-form-success__title {
    transition-delay: 0.52s;
}

.contact-form-flip.is-sent .contact-form-success__copy {
    transition-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    .contact-form__spinner {
        animation-duration: 1.6s;
    }

    .contact-form-card {
        transform-style: flat;
        transition: none;
    }

    .contact-form-flip.is-sent .contact-form-card {
        transform: none;
    }

    .contact-form-card__front,
    .contact-form-flip.is-sent .contact-form-card__front {
        transition: opacity 0.2s linear, visibility 0s linear 0.2s;
    }

    .contact-form-success {
        transform: none;
        transition: opacity 0.24s linear;
    }

    .contact-form-success__icon,
    .contact-form-success__title,
    .contact-form-success__copy {
        transform: none;
    }

    .contact-form-flip.is-sent .contact-form-success__icon,
    .contact-form-flip.is-sent .contact-form-success__title,
    .contact-form-flip.is-sent .contact-form-success__copy {
        transition: opacity 0.24s linear;
        transition-delay: 0.06s;
    }
}

.contact-vision .vision__card {
    max-width: 76.25rem;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 1024px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-form-card h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding-top: 4rem;
    }

    .contact-form-card {
        padding: 1.25rem;
    }

    .contact-form-success {
        padding: 2.5rem 1.25rem;
        gap: 0.75rem;
    }

    .contact-form-success__title {
        font-size: var(--wa-font-24);
    }

    .contact-form-success__copy {
        font-size: var(--wa-font-15);
    }
}