/* ═══════════════════════════════════════════════════════════════════════════
   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); }

/* THE ASPECT RATIO IS THE IMAGE'S OWN, and that is load-bearing. It was 2/1
   while contact-map.webp is 1025/489 (2.096/1), so object-fit:contain
   letterboxed it by ~10px top and bottom and a pin's top% was measured
   against the BOX, not the map — fine for one pin placed by eye, wrong the
   moment the positions are computed from the projection. Matching the ratio
   makes left%/top% exact fractions of the image. If the map image is ever
   replaced, update this ratio AND re-derive the pins (contact.html says how). */
.contact-map{ position:relative; aspect-ratio:1025/489; width:100%; max-width:900px;
  margin:var(--space-9) auto 0; }
.contact-map img{ display:block; width:100%; height:100%; object-fit:contain; }

/* 7px, down from 14px, and the static halo came down from 34px to 13px.
   The two cities are ~2.5% of the map height apart — 10px at 900 wide — so
   the OLD 34px halos overlapped completely and the pair read as one smudge
   over the peninsula. The halo has to stay under the gap or they merge
   again; measure before enlarging either number. */
.contact-pin{ position:absolute; width:7px; height:7px; 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:13px; height:13px; opacity:.14; }
.contact-pin::after{ width:7px; height:7px; animation:contact-pin-pulse 2.6s ease-out infinite; }
/* the second pin's pulse is offset so the two never swell together */
.contact-pin + .contact-pin::after{ animation-delay:1.3s; }
@keyframes contact-pin-pulse{
  0%{ width:7px; height:7px; opacity:.45; }
  100%{ width:22px; height:22px; opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .contact-pin::after{ animation:none; opacity:0; }
}

/* The names are real text, not decoration, so they are not aria-hidden and
   they are not accent — the dots already spend the accent on this section
   (rule 7), and two yellow dots plus two yellow words is four marks.
   Hyderabad sits ~2.5% of the map height above Bengaluru, which is 10px at
   900 wide and under 4px on a phone, so the labels CANNOT both sit beside
   their dot: one goes up, one goes down, and the pair stays legible all the
   way down. Keep that split if a third city ever lands near these two. */
.contact-pin-label{ position:absolute; left:calc(50% + var(--space-3));
  white-space:nowrap; font-family:var(--font-display); font-weight:500;
  font-size:var(--ui-xs); line-height:var(--lh-flat);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--color-text); text-shadow:0 1px 4px rgba(0,0,0,.9); }
.contact-pin-label--up{ bottom:calc(50% + var(--space-3)); }
.contact-pin-label--down{ top:calc(50% + var(--space-3)); }

.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); }