/* Contact Us (/contact), v9 contact.html. Scoped to .site[data-page="contact"]. */

/*
   Ported from tax-contact.css, with style.css's September 2026 rules for the "I'm interested in"
   choices and the lux-v5, v7, v8 and v9 rules that reach this page's own sections, flattened: each
   value below is the one that wins v9's cascade, and the reason is given where the winner is not
   the obvious rule. The banner, the form's panel, fields and button, the location cards' editorial
   columns, the previous / next pair and the footer are the shared sub-page layer's (site.css) and
   are not repeated here.

   Colours are written out rather than read from site.css's tokens where v8 F01 changed them for the
   sub-pages: Proof Grey #545454 for the design's navy and ink, Innovation Teal #0A89AA otherwise.

   The markup is ContactForm's "enquiry" layout and AddressCards' "subsection" one, in v9's class
   names. v9's page has one section, Contact Information, over both; here they are two bands, the
   second on Soft Light Blue, which is how v9 draws them too.
*/

/* ---- Contact Information ------------------------------------------------------------------- */

/* A full band under the banner. The shared layer opens the first band under a banner on 84px, as
   lux-v5 does for a section that is itself .pad; v9's Contact Information is a <section> around
   two .pad blocks, which that rule never reaches, so it keeps chrome-v4's 100px — 64px from 900px
   down. The band is preceded by the start-project anchor. */
.site[data-page="contact"] .subhero + .anchor-target + .pad { padding-top: var(--sec-y); }
@media (max-width: 900px) {
    .site[data-page="contact"] .subhero + .anchor-target + .pad { padding-top: var(--sec-y-m); }
}

/* ---- The form: "I'm interested in (select all that apply)" ---------------------------------- */

/* The field spans both columns of its row, under the email and the phone. */
.site[data-page="contact"] .field:has(.chk-grid) { grid-column: 1 / -1; }

/* The group's heading: not one of .field's capital labels, since it names five boxes rather than
   one input. The design's navy, which v8 made Proof Grey. */
.site[data-page="contact"] .contact-form .lbl {
    display: block; margin-bottom: 12px;
    font-size: .82rem; font-weight: 700; color: #545454;
}

.site[data-page="contact"] .chk-grid { display: flex; flex-wrap: wrap; gap: 9px; }

/* Each choice a white box with its tick inside, square since lux-v5 (style.css had capsules). A
   <label>, so .field's label rule is undone by name: no capitals, no letter-spacing, Medium in
   Proof Grey. */
.site[data-page="contact"] .field label.chk {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 0; padding: 9px 14px;
    background: #fff; border: 1.5px solid var(--line); border-radius: 0;
    font-size: .82rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #545454;
    cursor: pointer; transition: all .2s ease;
}
.site[data-page="contact"] .chk span { line-height: 1.3; }
.site[data-page="contact"] .chk:hover { border-color: #0A89AA; }

/* Ticked: a teal frame over a teal tint. style.css also sets the words teal and SemiBold, but its
   own label rule, written after it at the same weight, takes both back — so v9's ticked words
   stay Medium and grey, and so do these. */
.site[data-page="contact"] .chk:has(input:checked) { border-color: #0A89AA; background: rgba(10,137,170,.08); }

.site[data-page="contact"] .chk input {
    width: 15px; height: 15px; margin: 0;
    accent-color: #0A89AA; cursor: pointer;
}
.site[data-page="contact"] .chk input:focus-visible { outline: 2px solid #0A89AA; outline-offset: 2px; }

/* ---- Locations ------------------------------------------------------------------------------ */

/* A sub-block of Contact Information rather than a section: an eyebrow over an h3 the size of the
   form's "Let's build something reliable together", not a section title. Inria Serif Italic at
   Regular (v8 F06) in Proof Grey. */
.site[data-page="contact"] .ci-sub-head { margin-bottom: 36px; }
.site[data-page="contact"] .ci-sub-head h3 {
    margin: 0;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.5rem; line-height: 1.3; letter-spacing: 0;
    color: #545454;
}

/* The three cards side by side, one above another below 960px. */
.site[data-page="contact"] .ci-locations .address-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
    .site[data-page="contact"] .ci-locations .address-grid { grid-template-columns: 1fr; }
}