/* ============================================================
   cta-form — FORM-001, the "Get in touch" band
   Figma: "CTA form desktop" 928:3526 (About 1407:88246, 811 tall), tablet
   1407:99752, mobile 1407:88662. Also Windscreen 1407:65427 and the
   singles 1491:23524 / 1586:64388.

   Gradient 1 behind two columns: the copy and three audience rows (573)
   and the form panel (578, a white card on a 54px shadow), 53 apart.
   Tablet and mobile stack them: the copy loses its body paragraph and the
   rows lose their dividers, and the panel is a white sheet with rounded
   top corners that runs to the foot of the band (inset 40 on tablet, full
   width on mobile).

   The form inside the panel is Alex's WPForms work: nothing here styles
   its controls. Target .cta-form__form.

   The panel shadows are the frames' own and not Figma styles: the desktop
   is black at 40% and the tablet and mobile a teal at 25%. Mapped to the
   nearest tokens (ink 950 and teal 600) with colour-mix. The desktop
   gradient is gradient 1 (the frame's stop runs to 160%, a hair darker).
   The audience rows are links when the row has a link (Alex, 7 Oct): the title's
   link is stretched over the whole row, the arrow is decorative. The frames draw
   no hover or focus for them, so the arrow nudges on hover and a focus ring
   (the inverse outline) shows on the row.
   ============================================================ */

.cta-form {
    background: var(--gradient-dark-reverse);   /* "gradient 1" */
    color: var(--color-text-inverse);
    padding: var(--space-section-alt) var(--space-gutter);
}
.cta-form__inner {
    display: grid;
    grid-template-columns: minmax(0, 573fr) minmax(0, 578fr);
    align-items: start;
    column-gap: 53px;
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

/* ── Copy and audience rows (left) ────────────────────────── */
.cta-form__intro {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.cta-form__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cta-form__head .eyebrow { margin: 0; }

/* H2 is Title Case in the Figma ("TITLE" text case) */
.cta-form__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    text-transform: capitalize;
    color: var(--color-text-inverse);
}
.cta-form__body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text-inverse);
}

.cta-form__audiences {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cta-form__audience {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
/* The divider between rows: the frame's 1px line, black at 10% */
.cta-form__audience + .cta-form__audience {
    position: relative;
    margin-top: 12px;
}
.cta-form__audience + .cta-form__audience::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
}
.cta-form__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.cta-form__icon svg { width: 62%; height: 62%; display: block; }   /* the mark is 29.5 in the 48 circle */
.cta-form__audience-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cta-form__audience-title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-text-inverse);
}
.cta-form__audience-body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text-inverse);
}
.cta-form__arrow {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--color-text-inverse-muted);
}
.cta-form__arrow svg { width: 24px; height: 24px; display: block; }

/* A row with a link: the title's link covers the whole row */
.cta-form__audience-link {
    color: inherit;
    text-decoration: none;
}
.cta-form__audience-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.cta-form__audience-link:focus-visible { outline: none; }
.cta-form__audience-link:focus-visible::after {
    outline: 2px solid var(--color-outline-inverse);
    outline-offset: 4px;
    border-radius: 8px;
}
.cta-form__audience--link .cta-form__arrow {
    transition: color var(--transition-base), transform var(--transition-base);
}
.cta-form__audience--link:hover .cta-form__arrow,
.cta-form__audience--link:has(.cta-form__audience-link:focus-visible) .cta-form__arrow {
    color: var(--color-text-inverse);
    transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
    .cta-form__audience--link:hover .cta-form__arrow,
    .cta-form__audience--link:has(.cta-form__audience-link:focus-visible) .cta-form__arrow { transform: none; }
}

/* ── The form panel (right) ───────────────────────────────── */
.cta-form__panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px 35px 44px;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 0 54px color-mix(in srgb, var(--color-ink-950) 40%, transparent);
}
.cta-form__panel-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}
.cta-form__panel-title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-text);
}
.cta-form__panel-sub {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
    color: var(--color-logo-grey);
}

/* The slot for the WPForms form (styled in WPForms, not here) */
.cta-form__form { min-width: 0; }

/* Library only: the box the form sits in, the frame form's height (511) */
.cta-form__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 511px;
    margin: 0;
    padding: 20px;
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
    color: var(--color-logo-grey);
}

/* ── Tablet (the 744 frame): stacked, the panel inset ─────── */
@media (max-width: 1024px) {
    .cta-form { padding: var(--space-section-alt) var(--space-gutter) 0; }
    .cta-form__inner { display: block; }

    .cta-form__intro { gap: 20px; padding-bottom: 48px; }
    .cta-form__head { gap: 8px; }
    .cta-form__eyebrow {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
    .cta-form__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .cta-form__body { display: none; }   /* the tablet and mobile frames carry no body copy */

    .cta-form__audiences { gap: 16px; }
    .cta-form__audience + .cta-form__audience { margin-top: 0; }
    .cta-form__audience + .cta-form__audience::before { display: none; }
    .cta-form__icon { width: 28px; height: 28px; }
    .cta-form__audience-text { gap: 4px; }
    .cta-form__audience-title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .cta-form__audience-body {
        font-family: var(--font-heading);   /* Mobile/Body small is Futura; the desktop Body is Futura PT */
        font-size: var(--text-mobile-body-small);
        line-height: var(--leading-mobile-body-small);
    }

    .cta-form__panel {
        gap: 20px;
        padding: 24px 20px 48px;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 0 50px color-mix(in srgb, var(--color-teal-600) 25%, transparent);
    }
    .cta-form__placeholder { min-height: 394px; }   /* the tablet frame's form */
}

/* ── Mobile: the panel runs edge to edge ──────────────────── */
@media (max-width: 767px) {
    .cta-form__intro { padding-bottom: 32px; }
    .cta-form__panel {
        margin-left: calc(var(--space-gutter) * -1);
        margin-right: calc(var(--space-gutter) * -1);
    }
    .cta-form__panel-title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .cta-form__placeholder { min-height: 536px; }   /* the mobile frame's form */
}


/* ============================================================
   FORM-001 controls (WPForms)
   Figma: the form in "CTA form desktop" 928:3526 (935:5485), and the
   Error / Loading / Success states of the form component set
   (1398:48824, 1398:49015, 1398:48771). Those state frames are the Contact
   form's, drawn on a teal panel; the FORM-001 panel is white, so the
   states are carried over to it (labels keep the Text colour, the error
   message sits under its field rather than in place of the placeholder).

   The Contact page's FORM-002 (.contact-enquiry__panel) is the same form
   component on a teal panel, so these rules apply to it too; what differs
   (label and placeholder colours, the error drawn in the field, the panel's
   sending and success states) is in contact-us.css.

   WPForms' own "modern" CSS is loaded and its selectors are specific, so
   these chain from .cta-form to win without !important (WPForms' rules reach 0,5,2). Only the
   control look lives here; the markup, validation and the AJAX submit are
   WPForms'. Error wording and the form events are in cta-form.js.
   ============================================================ */

:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full {
    margin: 0;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field {
    margin: 0;
    padding: 0;
    overflow: visible !important;   /* WPForms clips each field to its box under 600px (a long :not() chain beats any selector here), which cut off the inputs' shadows */
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-hidden {
    display: none;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-layout-row {
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;   /* WPForms pulls the row out by 10 each side to make room for column padding */
    align-items: flex-end;   /* a field that grows (the product picks) or shows an error doesn't push its neighbour */
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-layout-column {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0;
}

/* Label: Futura PT Medium 15.2, 4px above the control. The required star is dropped: the optional fields say so */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-label {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 15.2px;
    line-height: 1.2;
    color: var(--color-text);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-required-label {
    display: none;
}

/* Controls: a white pill with the soft 6.5px shadow, Info type, grey placeholder */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field input[type="text"],
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field input[type="email"],
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field input[type="tel"],
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field input[type="number"],
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field select,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 39px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-surface);
    box-shadow: 0 0 6.5px color-mix(in srgb, var(--color-ink-950) 15%, transparent);
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: var(--leading-info);
    color: var(--color-text);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field textarea {
    height: 96px;
    min-height: 96px;
    padding: 13px 20px;
    border-radius: 13px;
    resize: vertical;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field ::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}
/* The number field (phone, since 2 Nov) without the browser's up/down arrows */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) .wpforms-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
:is(.cta-form .cta-form__form, .contact-enquiry__panel) .wpforms-field input[type="number"]::-webkit-inner-spin-button,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) .wpforms-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* The dropdown: the native control with the chevron drawn in */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field select {
    padding-right: 44px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("../../assets/icons/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px 8px;
    cursor: pointer;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field select:invalid {
    color: var(--color-text-muted);   /* the placeholder option, until a product is chosen */
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field select option {
    color: var(--color-text);
}

/* The phone field's country picker sits inside the pill */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .iti {
    display: block;
    width: 100%;
}

/* Focus: the input component's own focus style (there is no separate active symbol, U8) */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field input:focus-visible,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field select:focus-visible,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field textarea:focus-visible {
    outline: none;
    box-shadow: var(--button-focus-ring), 0 0 6.5px color-mix(in srgb, var(--color-ink-950) 15%, transparent);
}

/* ── Validation error: a 1.5px red ring and the message beneath ── */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field select.wpforms-error,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field textarea.wpforms-error {
    box-shadow: 0 0 0 1.5px var(--color-error-border), 0 0 6.5px color-mix(in srgb, var(--color-ink-950) 15%, transparent);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form label.wpforms-error,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form em.wpforms-error {
    display: block;
    min-width: 0;
    margin: 6px 0 0 20px;
    padding: 0;
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: var(--leading-info);
    color: var(--color-error-text);
}

:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form em.wpforms-error::before,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form label.wpforms-error::before {
    content: none;
}

/* The data warning under the free-text box (inc/form-notices.php; Coplus, 28 Oct 2026, not in the frames): Info type, set in like the error */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-textarea .wpforms-field-description {
    margin: 8px 0 0 0px;
    padding: 0;
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: var(--leading-info);
    color: var(--color-text);
}

/* ── The product question allows several choices: WPForms' Modern select (Choices.js), restyled to match the pills ──
   The field is a 39px white pill that grows a row at a time as services are picked; each pick is a small tinted pill
   with its own remove cross; the list opens below as a white card. WPForms' own rules reach this widget with !important
   on the search input and draw the arrow as a CSS triangle, so those are overridden here. */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices .choices__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    box-sizing: border-box;
    width: 100%;
    min-height: 39px;
    padding: 7px 44px 7px 20px;   /* room for the chevron */
    border: 0;
    border-radius: 20px;   /* a full pill on one row; a soft card once the picks wrap */
    background-color: var(--color-surface);
    box-shadow: 0 0 6.5px color-mix(in srgb, var(--color-ink-950) 15%, transparent);
    overflow: visible;
    cursor: pointer;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices.is-open .choices__inner {
    border-radius: 20px;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices[data-type*=select-multiple]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    inset-inline-end: 20px;
    width: 14px;
    height: 8px;
    margin: 0;
    border: 0;
    background: url("../../assets/icons/chevron-down.svg") center / 14px 8px no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices[data-type*=select-multiple].is-open::after {
    margin: 0;
    border: 0;
    transform: translateY(-50%) rotate(180deg);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices:focus-within .choices__inner {
    box-shadow: var(--button-focus-ring), 0 0 6.5px color-mix(in srgb, var(--color-ink-950) 15%, transparent);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices:has(select.wpforms-error) .choices__inner {
    box-shadow: 0 0 0 1.5px var(--color-error-border), 0 0 6.5px color-mix(in srgb, var(--color-ink-950) 15%, transparent);
}

/* Beside another field (601 and up) the picks stop growing at three rows and scroll: 7 + three 25px rows + two 4px gaps + 7 */
@media (min-width: 601px) {
    :is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices .choices__inner {
        max-height: 97px;
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* The picked services: the pills sit in the same row as the search box */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices__list--multiple {
    display: contents !important;   /* WPForms sets display: inline !important */
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices__list--multiple .choices__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;   /* a long name wraps inside the pill, so its cross stays in view */
    min-height: 25px;
    margin: 0;
    padding: 3px 10px 3px 12px;
    border: 0;
    border-radius: 13px;   /* a full pill on one line, a soft pill once the name wraps */
    background: var(--color-surface-tile);
    color: var(--color-secondary);
    position: relative;
    top: 0;   /* WPForms nudges the pills up 1.5px */
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: 19px;
    white-space: normal;   /* Choices keeps pill text on one line */
    overflow-wrap: anywhere;
    cursor: pointer;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices__list--multiple .choices__item.is-highlighted {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices[data-type*=select-multiple] .choices__button {
    position: relative;
    display: block;
    flex: none;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices[data-type*=select-multiple] .choices__button::before,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices[data-type*=select-multiple] .choices__button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices[data-type*=select-multiple] .choices__button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices[data-type*=select-multiple] .choices__button:hover,
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices[data-type*=select-multiple] .choices__button:focus-visible {
    opacity: 1;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices[data-type*=select-multiple] .choices__button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* The search box: the placeholder until something is picked, then room to keep typing */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices .choices__input--cloned {
    flex: 1 1 90px;
    width: auto !important;
    min-width: 90px !important;
    max-width: 100%;
    min-height: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: 25px !important;
    color: var(--color-text);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices .choices__input--cloned::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* The list: a white card under the field, the highlighted choice in the tile tint */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices__list--dropdown {
    top: calc(100% + 6px);
    z-index: 20;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: var(--color-surface) !important;   /* WPForms sets its menu colour !important */
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-ink-950) 18%, transparent);
    overflow: hidden;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices.is-flipped .choices__list--dropdown {
    top: auto;
    bottom: calc(100% + 6px);   /* no room below the field: the list opens above it */
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices__list--dropdown .choices__list {
    max-height: 260px;
    padding: 6px 0;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices__list--dropdown .choices__item {
    padding: 9px 20px;
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: var(--leading-info);
    color: var(--color-text);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--color-surface-tile);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices__list--dropdown .choices__item--selectable::after {
    content: none;   /* WPForms' "Press to select" hint */
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.product-interest.wpforms-field-select-style-modern[data-field-type="select"] .choices__list--dropdown .choices__item--disabled {
    color: var(--color-text-muted);
}

/* ── Submit: the Conversion button, full width, 44 tall ───── */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-submit-container {
    margin: 22px 0 0;
    padding: 0;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 17px;
    border: 0;
    border-radius: 999px;
    background: var(--button-accent-bg);
    color: var(--button-accent-text);
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
    font-size: var(--button-font-size);
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
    cursor: pointer;
    transition: background-color var(--transition-base);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"]:hover {
    background: var(--button-accent-bg-hover);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"]:focus-visible {
    background: var(--button-accent-bg-hover);
    outline: 1px solid var(--button-accent-outline);
    outline-offset: 0;
    box-shadow: var(--button-accent-focus-ring);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-submit-spinner {
    display: none !important;   /* WPForms' own spinner: the button carries it */
}

/* ── Loading: the button reads Sending... with a spinner, and a veil sits over the panel ── */
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"]:disabled {
    opacity: 1;   /* WPForms fades a disabled button to 50% on top of this */
    background: color-mix(in srgb, var(--button-accent-bg) 60%, var(--color-surface));
    color: color-mix(in srgb, var(--button-accent-text) 55%, transparent);
    cursor: progress;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"]:disabled::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 3px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cta-form-spin 0.9s linear infinite;
}
@keyframes cta-form-spin {
    to { transform: rotate(360deg); }
}
.cta-form__panel:has(.wpforms-submit:disabled) {
    position: relative;
}
.cta-form__panel:has(.wpforms-submit:disabled)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--color-surface) 43%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    :is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form button.wpforms-submit[type="submit"]:disabled::before {
        animation: none;
        border-top-color: currentColor;
    }
}

/* The message announced while sending (cta-form.js); it is not drawn */
.cta-form__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Success: the form is replaced by a confirmation on the Secondary gradient (1398:48771) ── */
.cta-form__panel:has(.wpforms-confirmation-container-full) {
    justify-content: center;
    min-height: 498px;
    padding: 36px;
    border-radius: 18px;
    background: var(--gradient-secondary);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--color-navy-900) 14%, transparent);
}
.cta-form__panel:has(.wpforms-confirmation-container-full) .cta-form__panel-head {
    display: none;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-confirmation-container-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-inverse);
    text-align: center;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-confirmation-container-full::before {   /* the white disc ... */
    content: "";
    flex: 0 0 133px;
    width: 133px;
    height: 133px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: var(--color-surface);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-confirmation-container-full::after {    /* ... and the tick in it */
    content: "";
    position: absolute;
    top: 0;
    width: 133px;
    height: 133px;
    background: var(--color-primary);
    -webkit-mask: url("../../assets/icons/check.svg") center / 96px no-repeat;
    mask: url("../../assets/icons/check.svg") center / 96px no-repeat;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-confirmation-container-full p {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text-inverse);
    max-width: 404px;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-confirmation-container-full p:first-of-type {   /* the heading line */
    max-width: none;
    font-family: var(--font-heading);
    font-size: var(--text-mobile-h2);
    line-height: var(--leading-mobile-h2);
    text-transform: capitalize;
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-confirmation-container-full a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin-top: 24px;
    padding: 0 17px;
    border-radius: 999px;
    background: var(--button-accent-bg);
    color: var(--button-accent-text);
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);
    font-size: var(--button-font-size);
    line-height: var(--leading-action);
    letter-spacing: var(--tracking-action);
    text-decoration: none;
    transition: background-color var(--transition-base);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-confirmation-container-full a:hover {
    background: var(--button-accent-bg-hover);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-confirmation-container-full a:focus-visible {
    background: var(--button-accent-bg-hover);
    outline: 1px solid var(--button-accent-outline);
    outline-offset: 0;
    box-shadow: var(--button-accent-focus-ring);
}
:is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-confirmation-container-full { position: relative; }

/* ── Tablet and mobile: the panel is a sheet that runs to the foot, so success fills it ── */
@media (max-width: 1024px) {
    .cta-form__panel:has(.wpforms-confirmation-container-full) {
        border-radius: 24px 24px 0 0;
        min-height: 0;
        padding: 36px 20px 48px;
    }
}
@media (max-width: 767px) {
    :is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-layout-row {
        gap: 20px;
        flex-direction: column;
    }
    :is(.cta-form .cta-form__form, .contact-enquiry__panel) div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-layout-column {
        flex: 0 0 auto;
        width: 100%;
    }
}


/* ============================================================
   FORM-004: the Careers application form (Figma 1840:917; the
   band is .cta-form--careers). Everything above applies to it; this is
   what differs: the CV drop zone and a white success panel.
   ============================================================ */

/* The CV drop zone (1840:998): a dashed teal box, the upload icon, one line and a hint */
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 22px 20px;
    border: 1.5px dashed var(--color-primary);
    border-radius: 16px;
    background: var(--color-surface-upload);
    text-align: center;
    cursor: pointer;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader.dz-drag-hover {
    border-style: solid;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .dz-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .dz-message svg {
    display: none;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .dz-message::before {   /* the cloud-upload icon, in the primary colour */
    content: "";
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    -webkit-mask: url("../../assets/icons/cloud-upload.svg") center / 32px no-repeat;
    mask: url("../../assets/icons/cloud-upload.svg") center / 32px no-repeat;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .modern-title {
    margin: 0;
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: 1.2;
    color: var(--color-text);
    text-decoration: none;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .modern-title span {   /* WPForms underlines every span in the message */
    text-decoration: none;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .careers-cv__link {
    color: var(--color-primary);
    text-decoration: underline;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .careers-cv__short {
    display: none;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader .wpforms-field-description {   /* "PDF or Word document", moved inside the box by cta-form.js */
    margin: 0;
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: 12px;
    line-height: 1;
    color: var(--color-logo-grey);
    text-align: center;
}
.cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader:focus-within {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Success (1840:1316): a white panel, not FORM-001's teal one: a pale disc with the illustrated tick, the
   thanks in the text colour, a grey line and the gold button */
.cta-form--careers .cta-form__panel:has(.wpforms-confirmation-container-full) {
    background: var(--color-surface);
}
.cta-form--careers.cta-form .cta-form__form div.wpforms-confirmation-container-full {
    color: var(--color-text);
}
.cta-form--careers.cta-form .cta-form__form div.wpforms-confirmation-container-full::before {
    background: var(--color-surface-success-disc) url("../../assets/images/careers-application-success.svg") -33px 14px / 201px 172px no-repeat;
}
.cta-form--careers.cta-form .cta-form__form div.wpforms-confirmation-container-full::after {
    content: none;
}
.cta-form--careers.cta-form .cta-form__form div.wpforms-confirmation-container-full p {
    color: var(--color-logo-grey);
}
.cta-form--careers.cta-form .cta-form__form div.wpforms-confirmation-container-full p:first-of-type {
    color: var(--color-text);
}

@media (max-width: 767px) {
    .cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .careers-cv__long {
        display: none;
    }
    .cta-form--careers .cta-form__form div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-file-upload .careers-cv__short {
        display: inline;
    }
}

/* A form link moves focus to the panel (assets/js/main.js): it is a landing place for keyboard users, not a control */
.cta-form__panel:focus { outline: none; }