/* =====================================================================
   CONTACT (contact.html) · page-scoped styles
   Tokens and components come from site.css; this file only arranges them.
   ===================================================================== */

/* ---------- 1 · hero: the contact card sits where hero art would ---------- */
.contact-hero .plate-hero__grid:has(> .contact-card) { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr); }
.contact-hero .plate-hero__body { align-self: center; }
.contact-card {
  position: relative; justify-self: stretch; align-self: center;
  padding: 30px 32px 28px;
}
.contact-card__stamp {
  position: absolute; top: -26px; right: 22px;
  width: 104px; height: auto; transform: rotate(4deg);
}
.contact-card .contact-rows { gap: 0; }
.contact-card .contact-rows > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: 14px 0 16px;
}
.contact-card .contact-rows > div + div { border-top: 1px solid var(--hair); }
.contact-card .contact-rows > div:first-child { padding-top: 6px; }
.contact-card .contact-rows > div:last-child { padding-bottom: 2px; }
.contact-card .contact-rows dt {
  min-width: 0;
  font: 700 .875rem/1.35 var(--f-text); letter-spacing: .12em; text-transform: uppercase;
}
.contact-card .contact-rows dd { gap: 6px 16px; }
.contact-card .contact-rows a { font-size: clamp(1.2rem, 1.05rem + .45vw, 1.4rem); }

@media (max-width: 980px) {
  .contact-hero .plate-hero__grid:has(> .contact-card) { grid-template-columns: auto minmax(0, 1fr); }
  .contact-card { grid-column: 2 / -1; max-width: 560px; margin-top: 18px; }
}
@media (max-width: 720px) {
  .contact-hero .plate-hero__grid:has(> .contact-card) { grid-template-columns: minmax(0, 1fr); }
  .contact-card { grid-column: 1 / -1; max-width: none; margin-top: 26px; padding: 22px 20px 20px; }
  .contact-card__stamp { width: 78px; top: -22px; right: 14px; }
}

/* ---------- 2 · routes: businesses, then students & academics ---------- */
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.route {   /* with .panel */
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 22px; align-items: start;
  padding: 26px 28px 24px;
}
.route__art {
  display: grid; place-items: center; width: 76px; height: 76px; padding: 10px;
  background: var(--surface); border: 1.5px solid var(--rule); border-radius: 50%;
}
.route__art svg { width: 100%; height: auto; }
.route__title { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.8rem); }
.route__text { margin-top: 8px; color: var(--ink-2); max-width: 42ch; }
.route__link { margin-top: 12px; font-size: 1.125rem; }
.route__link + .route__link { margin-top: 4px; }
.route__body:has(.route__link + .route__link) .route__link { display: flex; width: fit-content; }
.route__note { font-size: 1rem; color: var(--ink-2); }
@media (max-width: 720px) {
  .routes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .route { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px 18px 18px; }
  .route__art { width: 56px; height: 56px; padding: 7px; }
}

/* ---------- 3 · project brief ---------- */
.brief__form { position: relative; margin-left: 198px; max-width: 820px; }  /* aligns with the sec-head text column */
.brief__req { margin: 0 0 22px; }
.brief .status { margin-top: 18px; }
.brief .status:empty { min-height: 0; margin-top: 0; }
.brief .status p + p { margin-top: 6px; }
.brief .status .status__fallback { font-weight: 400; color: var(--ink-2); }
.brief .field__error:not([hidden]) { margin-top: 1px; }
@media (max-width: 980px) {
  .brief__form { margin-left: 0; max-width: none; }
}
@media (forced-colors: active) {
  .route__art { border-color: CanvasText; }
  .contact-card__stamp, .route__art { display: none; }
}

/* spacing fixes */
.contact-routes { padding-top: 56px; }
.brief__hint-after { margin-top: 0; }
@media (max-width: 720px) { .contact-routes { padding-top: 40px; } }