/* ============================================================
   Contact page - uses the requested dark blue with light, readable form text.
============================================================ */
.contact-page {
    padding-bottom: 96px;
    background: #00143b;
    color: #e3e4e6;
}

/* ============================================================
   Contact introduction - keeps headings and supporting copy visible on dark blue.
============================================================ */
.contact-page h1,
.contact-form-panel h2 {
    color: #fff;
}

/* ============================================================
   Contact supporting copy - uses the brand light grey over the blue background.
============================================================ */
.contact-page > .container > .lead,
.contact-form-note a {
    color: #e3e4e6;
}

/* ============================================================
   Contact layout - stacks direct details and the enquiry form on small screens.
============================================================ */
.contact-grid {
    display: grid;
    gap: 48px;
    margin-top: 64px;
    align-items: start;
}

/* ============================================================
   Contact headings - keeps panel titles smaller than the main page heading.
============================================================ */
.contact-grid h2 {
    font-size: clamp(28px, 3vw, 40px);
    margin-bottom: 24px;
}

/* ============================================================
   Direct details - presents the contact options on an off-white card.
============================================================ */
.contact-details {
    padding: 32px;
    background: #f5f7fa;
    color: #252c36;
    border-radius: 12px;
    overflow-wrap: anywhere;
}

/* ============================================================
   Contact logo - introduces the direct contact details beside the enquiry form.
============================================================ */
.contact-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 32px;
}

/* ============================================================
   Direct detail headings and links - uses dark blue against the off-white panel.
============================================================ */
.contact-details h2,
.contact-details a {
    color: #00143b;
}

/* ============================================================
   Direct detail rows - places each label beside its contact detail.
============================================================ */
.contact-details dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 20px 12px;
    margin: 28px 0 0;
}

/* ============================================================
   Direct detail labels - keeps labels inline with their matching values.
============================================================ */
.contact-details dt {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

/* ============================================================
   Contact label punctuation - separates the inline label from its value.
============================================================ */
.contact-details dt::after {
    content: ":";
}

/* ============================================================
   Direct detail values - keeps values beside their labels without indentation.
============================================================ */
.contact-details dd {
    margin: 0;
}

/* ============================================================
   Direct detail focus - shows keyboard focus against the off-white card.
============================================================ */
.contact-details a:focus-visible {
    outline-color: var(--color-primary);
}

/* ============================================================
   WhatsApp action - retains the shared branded gradient and comfortable spacing.
============================================================ */
.contact-whatsapp {
    margin-top: 24px;
}

/* ============================================================
   WhatsApp button text - stays white over the shared blue gradient.
============================================================ */
.contact-details .contact-whatsapp {
    color: #fff;
}

/* ============================================================
   WhatsApp icon - uses the local SVG mask in white beside the button label.
============================================================ */
.contact-whatsapp::before {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-color: currentColor;
    -webkit-mask: url("/assets/img/icons/whatsapp.svg?v=652433d9939739d8&release=1.1.4") center / contain no-repeat;
    mask: url("/assets/img/icons/whatsapp.svg?v=652433d9939739d8&release=1.1.4") center / contain no-repeat;
}

/* ============================================================
   Emergency note - keeps urgent contact guidance readable below direct links.
============================================================ */
.contact-emergency {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e3e4e6;
    font-size: 14px;
}

/* ============================================================
   Form layout - starts with one column for comfortable mobile input.
============================================================ */
.contact-form {
    display: grid;
    gap: 24px;
}

/* ============================================================
   Field labels - makes the purpose of each input clear.
============================================================ */
.contact-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #e3e4e6;
}

/* ============================================================
   Form controls - supplies consistent fonts, borders and touch-sized fields.
============================================================ */
.contact-field input,
.contact-field textarea {
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
    font: inherit;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-muted);
    border-radius: 6px;
}

/* ============================================================
   Message resizing - allows extra writing space without horizontal overflow.
============================================================ */
.contact-field textarea {
    resize: vertical;
    min-height: 180px;
}

/* ============================================================
   Field focus - provides a clear brand-blue keyboard outline.
============================================================ */
.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* ============================================================
   Invalid fields - distinguishes validation errors without relying on colour alone.
============================================================ */
.contact-field [aria-invalid="true"] {
    border-width: 2px;
    border-color: #9c2525;
}

/* ============================================================
   Field errors - keeps specific validation instructions close to each field.
============================================================ */
.contact-field-error {
    margin: 8px 0 0;
    color: #ffb4b4;
    font-size: 14px;
}

/* ============================================================
   Form notice - prominently reports submission success or a recoverable failure.
============================================================ */
.contact-notice {
    color: #252c36;
    padding: 20px;
    margin-bottom: 24px;
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: 6px;
}

/* ============================================================
   Failure notice - distinguishes the form error from its success state.
============================================================ */
.contact-notice--error {
    border-color: #9c2525;
}

/* ============================================================
   Spam trap - hides the optional bot field without affecting real-user navigation.
============================================================ */
.contact-trap {
    display: none;
}

/* ============================================================
   Form privacy note - keeps supporting information compact and readable.
============================================================ */
.contact-form-note {
    margin: 0;
    font-size: 14px;
}

/* ============================================================
   Submit button - keeps the shared button look while using a native form control.
============================================================ */
.contact-form-action .button {
    border: 0;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* ============================================================
   Submission feedback - places the result beside the sending action.
============================================================ */
.contact-submit-status {
    margin: 20px 0 0;
}

/* ============================================================
   Sending state - clearly marks the form as busy and prevents repeated clicks.
============================================================ */
.contact-form-action .button:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* ============================================================
   Wide contact layout - pairs direct details with the form when space permits.
============================================================ */
@media (min-width: 1100px) {

    /* ========================================================
       Contact columns - gives the form more space than the contact details.
    ======================================================== */
    .contact-grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}

/* ============================================================
   Paired fields - groups shorter fields on wider screens.
============================================================ */
@media (min-width: 772px) {

    /* ========================================================
       Form columns - puts name/company and email/phone in pairs.
    ======================================================== */
    .contact-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ========================================================
       Full-width rows - retains room for the message, privacy note and action.
    ======================================================== */
    .contact-field--wide,
    .contact-form-note,
    .contact-form-action {
        grid-column: 1 / -1;
    }
}