/* Contact page styles — page-specific layer only, following the same pattern as
   css/career.css and css/blog.css: the shared design system lives in
   css/services.css, which is loaded first.

   Scoped to .sd-page throughout.

   THE ENQUIRY FORM (below) used to rely on css/career.css for its rules, on
   the theory that both pages shared one set of selectors. They did not share
   one set of RULES: contact.html never links career.css, so .sd-form,
   .sd-field, .sd-apply-banner and friends had no rule behind them and the
   whole "Send an enquiry" block rendered unstyled. The rules are now local to
   this file, and career.html keeps its own copy in career.css, so neither page
   depends on the other. If you change the form, change it in both places or
   promote the block to css/services.css, which both pages already load. */

.sd-page .sd-breadcrumb { margin-top: 18px; }

/* ---------- channel cards ---------- */
.sd-page .sd-channel { display: flex; flex-direction: column; gap: 10px; }
.sd-page .sd-channel-icon {
    width: 46px; height: 46px; border-radius: 13px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 18px;
    background: linear-gradient(135deg, #eaf2ff, #e6fbf3);
    border: 1px solid #dce7fb; color: #0057d9;
}
.sd-page .sd-channel h3 { font-size: 18px; margin: 4px 0 2px; }
.sd-page .sd-channel p { font-size: 14px; margin: 0 0 4px; color: var(--sd-muted); }
.sd-page .sd-channel a { font-size: 15px; font-weight: 700; color: #0057d9; text-decoration: none; }
.sd-page .sd-channel a:hover { text-decoration: underline; }
.sd-page .sd-channel small { font-size: 12.5px; color: #6b7693; }

/* ---------- office / details panel ---------- */
.sd-page .sd-office { display: grid; gap: 20px; }
.sd-page .sd-office-row { display: flex; gap: 14px; align-items: flex-start; }
.sd-page .sd-office-row > span {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eaf2ff; color: #0057d9; font-size: 15px;
}
.sd-page .sd-office-row div { min-width: 0; }
.sd-page .sd-office-row b { display: block; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: #4a5d74; margin-bottom: 3px; }
.sd-page .sd-office-row p { margin: 0; font-size: 15px; line-height: 1.6; color: #12243b; }
.sd-page .sd-office-row a { color: #0057d9; font-weight: 700; text-decoration: none; }
.sd-page .sd-office-row a:hover { text-decoration: underline; }

/* ---------- office image ---------- */
.sd-page .sd-office-media { border-radius: 18px; overflow: hidden; border: 1px solid var(--sd-line); }
.sd-page .sd-office-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- what happens next ---------- */
.sd-page .sd-next ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.sd-page .sd-next ol li { font-size: 14.5px; line-height: 1.6; color: var(--sd-muted); }
.sd-page .sd-next ol li strong { color: #12243b; }

/* ====================================================================
   ENQUIRY FORM  (was sourced from css/career.css — see header note)
   ==================================================================== */
.sd-page .sd-apply-banner { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #cddfeb; border-radius: 22px; background: linear-gradient(120deg, #eaf2ff, #e9faf3); padding: 44px; }
.sd-page .sd-apply-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px 220px at 94% 6%, rgba(0, 165, 137, .16), transparent 65%), radial-gradient(360px 200px at 4% 96%, rgba(0, 87, 217, .12), transparent 65%); animation: sd-apply-drift 16s ease-in-out infinite alternate; animation-play-state: paused; }
.sd-page .sd-apply-banner.sd-in-view::before { animation-play-state: running; }
.sd-page .sd-apply-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.sd-page .sd-h2-sub { font-size: clamp(22px, 2.2vw, 28px); }
.sd-page .sd-apply-lead { color: #31435c; }
.sd-page .sd-apply-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.sd-page .sd-apply-list li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--sd-muted); }
.sd-page .sd-apply-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #12c8a2; }

/* ---------- the form shell ---------- */
.sd-page .sd-form { background: #fff; border: 1px solid var(--sd-line); border-radius: 16px; padding: 26px; }
.sd-page .sd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-page .sd-field { display: flex; flex-direction: column; gap: 6px; }
.sd-page .sd-field-wide { grid-column: 1 / -1; }
.sd-page .sd-field label { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #344962; }
/* The asterisk comes from the required attribute, so the visual marker can
   never drift out of step with what the server actually enforces. */
.sd-page .sd-field > label[data-required]::after { content: ' *'; color: #c62828; }
.sd-page .sd-field input, .sd-page .sd-field select, .sd-page .sd-field textarea { width: 100%; border: 1px solid #153d67; border-radius: 9px; background: #fff; color: #12243b; font: inherit; font-size: 14.5px; padding: 12px 13px; min-height: 46px; }
.sd-page .sd-field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.sd-page .sd-field select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23344962' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 15px; }
.sd-page .sd-field input[type="file"] { padding: 10px 12px; font-size: 13.5px; }
.sd-page .sd-field input[type="file"]::file-selector-button { margin-right: 12px; border: 1px solid #153d67; border-radius: 7px; background: #eaf2ff; color: #0b3f7a; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; cursor: pointer; }
.sd-page .sd-field-hint { font-size: 12px; color: var(--sd-muted); }

/* One visible focus treatment for every control, including the file input. */
.sd-page .sd-form :is(input, select, textarea):focus-visible { outline: 3px solid #7fc4ff; outline-offset: 2px; border-color: #0057d9; }

/* ---------- validation states ----------
   .sd-field-error is injected by js/contact.js beside the control and wired up
   with aria-describedby, so the message is announced, not merely coloured. */
.sd-page .sd-field-error { display: none; font-size: 12.5px; font-weight: 700; color: #c62828; }
.sd-page .sd-field-error:not(:empty) { display: block; }
.sd-page .sd-field [aria-invalid="true"] { border-color: #c62828; background: #fff6f5; }
.sd-page .sd-field [aria-invalid="true"]:focus-visible { outline-color: #c62828; }

/* ---------- consent, actions, status ---------- */
.sd-page .sd-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--sd-muted); line-height: 1.5; margin-top: 16px; }
.sd-page .sd-consent input { width: 18px; height: 18px; min-height: 0; margin-top: 3px; flex: 0 0 auto; }
.sd-page .sd-consent[data-invalid="true"] { color: #c62828; }
.sd-page .sd-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.sd-page .sd-form-actions .sd-button[disabled] { opacity: .68; cursor: not-allowed; transform: none; }
.sd-page .sd-form-status { margin: 14px 0 0; font-size: 13.5px; font-weight: 700; }
.sd-page .sd-form-status:empty { display: none; }
.sd-page .sd-form-status[data-state="pending"] { color: #0057d9; }
.sd-page .sd-form-status[data-state="ok"] { color: #00796b; }
.sd-page .sd-form-status[data-state="error"] { color: #c62828; }
.sd-page .sd-form-note { font-size: 12.5px; color: var(--sd-muted); margin: 12px 0 0; }

/* Success replaces the fields in place, so the confirmation sits exactly where
   the form was, and focus is moved to it for screen readers. */
.sd-page .sd-form-done { display: none; }
.sd-page .sd-form.is-done .sd-form-grid,
.sd-page .sd-form.is-done .sd-consent,
.sd-page .sd-form.is-done .sd-form-actions,
.sd-page .sd-form.is-done .sd-form-note { display: none; }
.sd-page .sd-form.is-done .sd-form-done { display: block; }
.sd-page .sd-form-done h3 { font-size: 20px; margin: 0 0 8px; }
.sd-page .sd-form-done p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: var(--sd-muted); }
.sd-page .sd-form-done ul { margin: 0; padding-left: 20px; font-size: 14px; color: var(--sd-muted); line-height: 1.9; }
/* .sd-link is an anchor style: on a <button> it would otherwise keep the UA
   default grey chrome. Reset it so "Write another enquiry" reads as a link. */
.sd-page .sd-form-done button.sd-link {
    background: none; border: 0; padding: 0; margin: 0;
    color: #0057d9; font: inherit; font-weight: 700; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.sd-page .sd-form-done button.sd-link:hover { color: #0046b0; }

/* ---------- four-up grid ---------- */
/* .sd-four was also only in career.css, so the channel cards and the
   "what happens next" steps were silently rendering two-up. */
.sd-page .sd-grid.sd-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- small helper text ---------- */
.sd-page .sd-small { font-size: 13.5px; color: var(--sd-muted); margin: 14px 0 0; line-height: 1.6; }

/* ---------- response-time callout ---------- */
.sd-page .sd-eta {
    display: flex; align-items: center; gap: 12px; margin-top: 22px;
    border: 1px dashed #8fd4ee; background: #eef9ff; color: #0b4a63;
    border-radius: 12px; padding: 12px 14px; font-size: 13.5px; font-weight: 700;
}
.sd-page .sd-eta i { font-size: 17px; color: #1697bf; }

/* ---------- trust strip ---------- */
.sd-page .sd-trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.sd-page .sd-trust-item { text-align: center; padding: 18px 12px; }
.sd-page .sd-trust-item i { font-size: 20px; color: #12c8a2; }
.sd-page .sd-trust-item b { display: block; margin: 8px 0 3px; font-size: 15px; }
.sd-page .sd-trust-item span { font-size: 12.5px; color: var(--sd-muted); }

@media (max-width: 991px) {
    .sd-page .sd-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The enquiry layout and grid steps were unreachable from this page
       because only career.css carried the breakpoints. */
    .sd-page .sd-grid.sd-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-page .sd-apply-banner { padding: 32px 24px; }
    .sd-page .sd-apply-layout { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 600px) {
    .sd-page .sd-trust-strip { grid-template-columns: minmax(0, 1fr); }
    .sd-page .sd-grid.sd-four { grid-template-columns: minmax(0, 1fr); }
    .sd-page .sd-form { padding: 20px 16px; }
    .sd-page .sd-form-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-page .sd-form-actions .sd-button { flex: 1 1 100%; justify-content: center; }
}

@keyframes sd-apply-drift { 0% { opacity: .55; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(-28px, -18px); } 100% { opacity: .55; transform: translate(18px, 18px); } }

@media (prefers-reduced-motion: reduce) {
    .sd-page .sd-apply-banner::before { animation: none; }
}