/* ═══════════════════════════════════════════════════════════════════════════
   DRIIF — CONTACT ("Talk to us") page-specific layout only.
   Recreates driif.ai/contact in this design system: a centred form section,
   then a separate section below with the dotted world map (two pulsing
   accent pins) and the Support/Sales channels side by side — matching the
   live page's actual two-section structure rather than the site's usual
   .split two-column pattern, since neither section here is a copy-beside-
   diagram argument. This is also the first form on the site, so every field/
   input/checkbox rule below is new — nothing to inherit from components.css.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── FORM SECTION ─────────────────────────────────────────────────────────
   Centred, single column — the live page runs the form alone with no
   supporting copy beside it, so this isn't a .split candidate. Capped to a
   comfortable form-reading width rather than the section's full bleed. */
/* Nav clearance for this page's first section is NOT here. It was, briefly,
   as a .contact-form-section rule — then the glossary turned out to have the
   identical problem, so it moved to `main > .section:first-child` in
   base.css, which covers all four hero-less pages at once. Left as a note
   because the obvious place to look when this page's top spacing seems wrong
   is this file. */
.contact-form-heading{ text-align:center; }
.contact-form{ display:flex; flex-direction:column; gap:var(--space-6);
  max-width:640px; margin:var(--space-8) auto 0; }

.field-row{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:640px){
  .field-row{ grid-template-columns:1fr 1fr; }
}
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field-req{ color:var(--color-accent); }
/* .field-input itself now lives in components.css — glossary.html's search
   box needed it too, and a second consumer is this file's own reuse test.
   What stays here is specific to the contact form's shape: the two-column
   row grid and the checkbox, neither of which anything else on site uses. */

/* custom checkbox: the native box is kept for a11y/keyboard use but made
   invisible and overlaid by a bordered square that reads the :checked
   state on its sibling — same hairline/accent language as everything else,
   rather than the browser's default checkbox rendering. */
.field-check{ display:flex; align-items:flex-start; gap:var(--space-3); cursor:pointer; }
.field-check input{ position:absolute; opacity:0; width:20px; height:20px; margin:0; }
.field-check-box{ flex:none; width:20px; height:20px; margin-top:2px;
  border:var(--hair) solid var(--color-border-strong); position:relative; }
.field-check input:checked + .field-check-box{ background:var(--color-accent); border-color:var(--color-accent); }
.field-check input:checked + .field-check-box::after{
  content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid var(--color-accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.field-check input:focus-visible + .field-check-box{ outline:2px solid var(--color-accent); outline-offset:2px; }
.field-check a{ color:var(--color-text); text-decoration:underline; text-underline-offset:2px; }

.contact-submit{ align-self:flex-start; }
.contact-form-status{ min-height:1.5em; }
.contact-form-status.is-ok{ color:var(--color-text); }
.contact-form-status.is-error{ color:var(--color-designate); }


/* ── CONTACT INFO SECTION: map + channels ─────────────────────────────────
   Everything here is centred, matching the live page — the map and the
   channel pair both read as one centred announcement, not a copy column. */
.contact-info-section{ text-align:center; }
/* margin-top corrected from --space-3 to --space-5 (site-wide
   standardisation pass): every other eyebrow-to-heading gap on the site
   runs on .eyebrow's own margin-bottom alone (base.css, --space-5) — this
   was the one section overriding it down to half that. */
.contact-info-heading{ max-width:20ch; margin:var(--space-5) auto 0; }
.contact-info-lead{ max-width:var(--measure-lead); margin:var(--space-3) auto 0; }
/* the live page accents only the closing full stop — a small flourish kept
   rather than recolouring the whole line, which would read as a headline
   in the accent colour instead of a punctuation detail. */
.accent-dot{ color:var(--color-accent); }

.contact-map{ position:relative; aspect-ratio:2/1; width:100%; max-width:900px;
  margin:var(--space-9) auto 0; }
.contact-map img{ display:block; width:100%; height:100%; object-fit:contain; }
.contact-pin{ position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--color-accent); transform:translate(-50%,-50%); }
.contact-pin::before, .contact-pin::after{
  content:""; position:absolute; inset:50%; border-radius:50%;
  background:var(--color-accent); transform:translate(-50%,-50%);
}
.contact-pin::before{ width:34px; height:34px; opacity:.16; }
.contact-pin::after{ width:14px; height:14px; animation:contact-pin-pulse 2.2s ease-out infinite; }
@keyframes contact-pin-pulse{
  0%{ width:14px; height:14px; opacity:.5; }
  100%{ width:44px; height:44px; opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .contact-pin::after{ animation:none; opacity:0; }
}

.contact-channels{ display:flex; flex-direction:column; gap:var(--space-8);
  margin:var(--space-9) auto 0; align-items:center; }
@media (min-width:768px){
  .contact-channels{ flex-direction:row; justify-content:center; gap:var(--space-10); }
}
.contact-channel{ max-width:32ch; }
.contact-channel h3{ margin-bottom:var(--space-2); }
.contact-channel p{ margin-bottom:var(--space-3); }
.contact-email{ font-family:var(--font-display); font-weight:500; font-size:var(--text-h3);
  color:var(--color-accent); }