body { display: flex; min-height: 100vh; flex-direction: column; }
main { flex: 1; }

.contact-hero {
  padding: clamp(76px, 9vw, 128px) 0;
  background: var(--navy);
  color: white;
}
.contact-kicker {
  display: inline-block;
  padding-bottom: 13px;
  border-bottom: 2px solid #a9d9eb;
  color: #d2e9f6;
  font-size: 15px;
  font-weight: 800;
}
.contact-hero h1 {
  margin: 24px 0 12px;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.2;
}
.contact-hero p {
  max-width: 650px;
  margin: 0;
  color: #dce5f4;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.8;
}

.contact-section { padding: clamp(64px, 8vw, 105px) 0; }
.contact-section h2 { margin: 0; color: var(--navy-deep); font-size: clamp(30px, 3vw, 42px); }
.contact-intro { margin: 12px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.8; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.contact-card {
  min-width: 0;
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--wash);
}
.contact-card-label { color: var(--blue); font-size: 13px; font-weight: 800; }
.contact-card h3 { margin: 27px 0 13px; color: var(--navy-deep); font-size: 21px; }
.contact-card a { color: var(--blue); font-size: clamp(23px, 2.6vw, 34px); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.contact-card a:hover { color: var(--navy-deep); }
.contact-card p { margin: 18px 0 0; color: var(--ink-soft); font-size: 15px; }

@media (max-width: 700px) {
  .contact-hero .section-inner, .contact-section .section-inner { width: min(100% - 32px, 600px); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { border-radius: 16px; }
  .contact-card h3 { margin-top: 19px; }
}