/* ==========================================================================
   Contact page (contact.html) — extras on top of v2.css
   ========================================================================== */

/* ---------- Section: page-hero (the long team heading needs a wider measure) ---------- */
.page-hero--contact .page-hero__title {
  max-width: 19ch;
  font-size: clamp(2.5rem, 1.1rem + 4vw, 5.25rem);
}

/* ---------- Section: contact (form panel + contact details) ---------- */
.contact__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64em) {
  .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

/* white form panel on the pale ice section, with the slanted brand edge on top */
.contact__panel {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
  background: var(--white);
  border: 1px solid var(--line);
}
.contact__panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: min(12rem, 45%);
  height: 0.5rem;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.5rem) 100%, 0 100%);
}
.contact__panel-title {
  margin-bottom: 0.75rem;
  font-size: var(--fs-h3);
  line-height: 1;
}
.contact__panel-intro { max-width: 52ch; margin-bottom: 1.75rem; color: var(--ink-soft); }

/* form details that v2.css does not cover */
.contact-form .req { color: #b42318; }
.contact-form legend { padding: 0; margin-bottom: 0.15rem; }
.contact-form .choice label { font-weight: 400; color: var(--ink-soft); }
.contact-form .choice a { font-weight: 700; }
.contact-form__options { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; }
.contact-form__consent-note { margin: 0.5rem 0 0 1.85rem; }
.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 0.5rem;
}
.contact-form__actions .btn { border: 0; cursor: pointer; }
@media (min-width: 48em) {
  .contact-form__actions { grid-column: 1 / -1; }
}

/* contact details column */
.contact__aside { display: grid; gap: 1.25rem; }

.contact-card {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
}
.contact-card--company {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.contact-card .kicker { margin-bottom: 0.85rem; }
.contact-card--company .kicker { color: var(--white); }
.contact-card__name {
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  line-height: 1;
}
.contact-card--company .contact-card__name { color: var(--white); }
.contact-card__role { margin: 0.4rem 0 0.9rem; color: var(--ink-soft); }
.contact-card address { font-style: normal; line-height: 1.8; margin-top: 0.75rem; }
.contact-card a { font-weight: 700; overflow-wrap: anywhere; }
.contact-card--company a { color: var(--white); }
.contact-card--company a:hover { color: var(--ice); }
.contact-card--company :focus-visible { outline-color: var(--white); }
.contact-card__lines { margin: 0; padding: 0; list-style: none; line-height: 1.8; }
.contact-card__lang { margin: 0.9rem 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
.contact-card__lang strong { color: var(--ink); }