.contact-surface { background: var(--pale); padding: 151px 0 76px; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.contact-intro { padding-top: 30px; }
.contact-intro h1 { font-size: clamp(38px,4vw,56px); line-height: 1.1; letter-spacing: -.045em; max-width: 450px; margin-bottom: 25px; }
.contact-intro h1 span { color: var(--blue); }
.contact-lead { font-size: 19px; line-height: 1.65; max-width: 440px; }
.contact-benefits { list-style: none; padding: 0; margin: 30px 0; display: grid; gap: 15px; font-size: 16px; font-weight: 700; }
.contact-benefits li { display: flex; gap: 12px; align-items: baseline; }
.contact-benefits li > span { color: var(--green); font-size: 22px; }
.contact-next { max-width: 410px; font-size: 16px; line-height: 1.65; }
.contact-home { margin-top: 14px; }
.contact-form-card { background: white; border: 1px solid var(--line); border-radius: 22px; padding: 36px; box-shadow: 0 18px 50px #5484c80c; }
.contact-form-card h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 24px; }
.contact-fields, .contact-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.contact-choice label { display: flex; gap: 9px; align-items: center; padding: 13px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; }
.contact-choice label:has(input:checked) { border-color: var(--blue); background: var(--pale); color: var(--blue); }
.contact-choice input { accent-color: var(--blue); margin: 0; width: 16px; height: 16px; flex: none; }
.contact-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-field { margin-bottom: 20px; min-width: 0; }
.contact-field label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.contact-field label span { font-weight: 400; color: var(--muted); }
.contact-field input, .contact-field textarea { width: 100%; border: 1px solid #c4cfdd; border-radius: 8px; background: #fff; padding: 12px 13px; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; }
.contact-field textarea { resize: vertical; min-height: 112px; }
.contact-field textarea::placeholder { color: #737c87; }
.contact-field input:focus, .contact-field textarea:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.contact-submit { width: 100%; justify-content: center; cursor: pointer; border: 0; font: inherit; font-weight: 700; }
@media(max-width:1000px) { .contact-grid { gap: 35px; grid-template-columns: .85fr 1.15fr; } .contact-form-card { padding: 26px; } .contact-choice { grid-template-columns: 1fr; } }
@media(max-width:760px) { .contact-surface { padding: 125px 0 50px; } .contact-grid { grid-template-columns: 1fr; gap: 32px; } .contact-intro { padding-top: 0; } .contact-intro h1 { max-width: 480px; } .contact-benefits { margin: 24px 0; } .contact-choice { grid-template-columns: 1fr 1fr; } }
@media(max-width:480px) { .contact-form-card { padding: 24px 20px; border-radius: 16px; } .contact-input-row, .contact-choice { grid-template-columns: 1fr; } .contact-intro h1 { font-size: 40px; } .contact-lead { font-size: 17px; } .contact-form-card h2 { font-size: 25px; } }
/* On small screens, bring the form into view before the supporting detail. */
@media(max-width:760px) {
  .contact-benefits, .contact-next, .contact-home { display: none; }
  .contact-lead { margin-bottom: 0; }
}
.contact-status { margin:18px 0 0; padding:16px; border-left:3px solid var(--blue); background:var(--pale); font-size:15px; }
.contact-status[hidden] { display:none; }
.contact-status a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }