/* ═══════════════════════════════════════════════════════════════
   Contact page (DS) — /contact and /contact-us.
   Replaces the pre-DS contact-us.css (deleted), which carried 14 literal
   colours and built its own inputs, select, textarea and submit button.
   Those now come from the DS field/select/textarea/button macros, so what
   is left here is page layout: the measure, the form panel, and the three
   detail cards.
   ═══════════════════════════════════════════════════════════════ */

.ct {
  width: min(1040px, 100%);
  margin: 0 auto;
  /* 124px, matching the other migrated pages: the DS navbar is fixed and
     there is no body-level offset any more (the legacy 80px was deleted at
     the source in marketing.css, stage 5), so a migrated page carries its
     own clearance from the fixed navbar. */
  padding: 124px 20px clamp(3rem, 5vw, 4.5rem);
}

@media (max-width: 768px) {
  .ct { padding-top: 108px; }
}

/* ── Header ─────────────────────────────────────────────────────────
   Left-aligned on the full content width, matching the form panel and the
   card row below it. It was a centred 62ch column first; that capped the
   masthead at ~60% of the band and split the leftover space onto both
   sides, which reads as stranded rather than deliberate. The page now has
   one left edge from the title down to the last card. */

.ct__header {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.ct__title {
  font-family: var(--font-sans);
  font-size: clamp(32px, 4.6vw, 44px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--foreground);
  margin: 10px 0 0;
}

.ct__intro {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--body-foreground);
  margin: 14px 0 0;
}

/* ── Form panel ─────────────────────────────────────────────────
   A page-level surface, deliberately not composing .ds-card: it is a
   full-width panel with its own padding, and composing the card would mean
   overriding three properties. Radius and border still come from the
   tokens, so a retune moves it. */

/* No max-width: the panel shares the page's content box with the three detail
   cards below it, so capping it at 46rem gave the page two different right
   edges and left a 264px void beside the form. A surface is not prose — it
   takes the full width and the MEASURE is enforced inside it, on the controls
   (see .ct__form). */
.ct__panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: clamp(22px, 3vw, 30px);
}

.ct__panel-title {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin: 0;
}

.ct__panel-intro {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted-foreground);
  margin: 6px 0 0;
}

/* Two columns once the panel is wide enough for them. Every row spans both by
   default; a control that should NOT be 900px wide opts into a single column
   with `.ct__half` (the Category select). This is what lets the panel take the
   full content box without producing absurd single-line inputs — the message
   textarea is the one control that genuinely wants the width. */
.ct__form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

@media (min-width: 720px) {
  .ct__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct__form > * { grid-column: 1 / -1; }
  .ct__form > .ct__half { grid-column: span 1; }
}

/* Name + Email side by side above 640px. */
.ct__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 640px) {
  .ct__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ct__actions { margin-top: 4px; }

/* The bot trap. `display: none` on the WRAPPER, never an off-screen
   position: Chrome's autofill and password managers ignore
   autocomplete="off" and fill rendered-but-hidden inputs, which would
   trip the trap on a real submission. A non-rendered field is never
   autofilled, while a naive bot reading the raw HTML still sees it. */
.ct__trap { display: none; }

/* ── Detail cards ───────────────────────────────────────────────── */

.ct__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

@media (min-width: 720px) {
  .ct__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ct__card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 22px 24px;
}

.ct__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
  margin-bottom: 14px;
}
.ct__card-icon svg { width: 17px; height: 17px; }

.ct__card-label { margin: 0 0 5px; }

.ct__card-value {
  font-family: var(--font-sans);
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 0;
}

.ct__card-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 8px 0 0;
}

.ct__address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-foreground);
}

/* ── Links ──────────────────────────────────────────────────────
   Scoped to this page's own anchors. `:not([class*="ds-"])` keeps it off a
   component's internals — the datasets migration repainted every button in
   a prose column with an unscoped rule like this. */

.ct__link,
.ct__note a:not([class*="ds-"]) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ct__link:hover,
.ct__note a:not([class*="ds-"]):hover { color: var(--foreground); }

/* Left-aligned on the full content width, like everything else on the page.
   It was centred at 66ch to bookend the (then also centred) masthead; with
   the masthead reverted to full width, a centred note under it is the only
   block with a different left edge, which is the exact raggedness the
   centring was meant to solve. */
.ct__note {
  margin: clamp(2rem, 4vw, 2.5rem) 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--body-foreground);
  text-wrap: pretty;
}

@media (any-pointer: coarse) {
  .ct__link,
  .ct__note a:not([class*="ds-"]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Inside a running paragraph an inline-flex link would break the line
     box, so the note's links stay inline — they are prose, not controls. */
  .ct__note a:not([class*="ds-"]) { display: inline; min-height: 0; }
}