:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #102b43;
  background: #eef3f7;
}
* { box-sizing: border-box; }
body { margin: 0; }
.contact-shell { width: min(100% - 2rem, 66rem); margin: 0 auto; padding: clamp(1rem, 5vw, 3.5rem) 0; }
.contact-brand {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.5rem;
  margin-bottom: 1.3rem;
}
.contact-brand img { display: block; width: min(10rem, 100%); height: auto; }
.contact-brand a { display: inline-flex; align-items: center; min-height: 44px; color: #194c72; font-weight: 650; }
.contact-card {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
  border: 1px solid #d6e1e9; border-radius: 1rem; overflow: hidden;
  background: #fff; box-shadow: 0 18px 48px rgb(16 43 67 / 10%);
}
.contact-intro {
  display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(150deg, #103351, #0b2138); color: #fff;
}
.contact-kicker { margin: 0 0 .85rem; color: #a8d8ee; font-size: .8rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.contact-intro h1 { margin: 0; max-width: 14ch; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.07; letter-spacing: -.035em; }
.contact-intro p:last-child { max-width: 30ch; margin: 1rem 0 0; color: #dceaf5; line-height: 1.6; }
.contact-main { min-width: 0; padding: clamp(1.5rem, 4vw, 3rem); }
.contact-main h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -.02em; }
.contact-note { margin: .6rem 0 1.35rem; color: #40576c; line-height: 1.5; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact-field { display: grid; min-width: 0; gap: .35rem; font-weight: 650; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-field input, .contact-field textarea {
  width: 100%; min-height: 46px; padding: .65rem .75rem; border: 1px solid #a6b9c9; border-radius: .45rem;
  background: #fff; color: #102b43; font: inherit; font-size: 1rem; font-weight: 400;
}
.contact-field textarea { resize: vertical; min-height: 8rem; }
.contact-main button {
  margin-top: 1.25rem; padding: .75rem 1.15rem; min-height: 46px; border: 1px solid #123c5c;
  border-radius: .45rem; background: #123c5c; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.contact-main button:hover { background: #0b2a43; }
:focus-visible { outline: 3px solid #0073a4; outline-offset: 3px; }
.contact-status { margin: 1rem 0; padding: .75rem 1rem; border-radius: .45rem; background: #e8f3fa; color: #123c5c; line-height: 1.5; }
.contact-status-error { background: #fceeed; color: #742820; }
@media (max-width: 48rem) { .contact-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 33rem) {
  .contact-fields { grid-template-columns: minmax(0, 1fr); }
  .contact-main button { width: 100%; }
}