.contact { color: var(--white); background: linear-gradient(125deg, var(--navy), #103869); }
.contact-shell { display: grid; grid-template-columns: .86fr 1.14fr; align-items: start; gap: clamp(3rem, 9vw, 9rem); }
.contact h2 { max-width: 10ch; margin-bottom: 1.25rem; }
.contact h2 em { color: var(--mint); }
.contact-intro > p:not(.eyebrow) { max-width: 24rem; color: rgba(255,255,255,.66); font-size: .92rem; }
.contact-email { display: inline-flex; gap: .55rem; margin-top: 1rem; color: var(--mint); font-size: .85rem; font-weight: 700; }
.contact-email:hover { text-decoration: underline; }
.contact-detail { margin-top: 1.25rem; color: rgba(255,255,255,.6); font-size: .79rem; line-height: 1.8; }
.contact-form { align-self: start; padding: 1.5rem; border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius-md); background: rgba(255,255,255,.055); }
.contact-form label { display: block; color: rgba(255,255,255,.7); font-size: .74rem; font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin: .5rem 0 1.15rem; padding: .7rem 0; resize: vertical; color: var(--white); border: 0; border-bottom: 1px solid rgba(255,255,255,.25); outline: 0; background: transparent; font-size: .88rem; transition: border-color var(--transition); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--mint); }
.contact-form textarea::placeholder { color: rgba(255,255,255,.37); }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.form-footer p { max-width: 18rem; margin: 0; color: rgba(255,255,255,.46); font-size: .67rem; line-height: 1.45; }

@media (max-width: 900px) {
  .contact-shell { gap: 3rem; }
}

@media (max-width: 700px) {
  .contact-shell { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-footer { align-items: flex-start; flex-direction: column; }
}