/* contact-a.css — Proposal A: "light, in the site grid".
   A scoped override layer (body.contact-a) on top of contact.css that turns
   the document-grade ink split into a light, contained, in-grid layout so
   the contact page shares the site's rhythm. The footer stays the only dark
   surface (from chrome.css), exactly like the home page. */

.contact-a{background:var(--bone)}

/* The split becomes a contained two-column grid on bone, aligned to the
   same centered column the header and footer use. */
.contact-a .db{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:64px;
  max-width:1180px;
  margin:0 auto;
  padding:56px 80px 80px;
  background:var(--bone);
  min-height:auto;
  box-sizing:border-box;
}

/* Left rail → quiet light sidebar (no ink slab) */
.contact-a .db-rail{background:none;color:var(--ink);padding:0}
.contact-a .db-rail .eyebrow{color:var(--fog)}
.contact-a .db-rail .eyebrow::before{background:var(--ochreInk)}
.contact-a .db-switch button{color:var(--ink);border-color:var(--line);background:var(--paper)}
.contact-a .db-switch button:hover{background:var(--bone);border-color:var(--fog)}
.contact-a .db-switch button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.contact-a .db-switch button[aria-pressed="true"]{background:var(--bone);border-color:var(--ink)}
.contact-a .db-switch .s{color:var(--fog)}
.contact-a .db-expect{border-top-color:var(--line)}
.contact-a .db-expect h3{color:var(--ink)}
.contact-a .db-expect p{color:var(--fog)}
.contact-a .db-steps{border-left-color:var(--line)}
.contact-a .db-steps li{color:var(--fog)}
.contact-a .db-steps li[data-state="active"]{color:var(--ink)}
.contact-a .db-steps li[data-state="done"]{color:var(--ochreInk)}
.contact-a .db-steps li[data-state="active"]::before,
.contact-a .db-steps li[data-state="done"]::before{background:var(--ochreInk)}
.contact-a .db-trust .h{color:var(--fog)}
.contact-a .db-trust .l{color:var(--ink)}
.contact-a .db-trust .l::before{background:var(--sage)}

/* Form column sits in the grid cell (padding handled by the grid) */
.contact-a .db-form{padding:0;max-width:none}

/* Inputs in the light layout: the bordered "dense" treatment reads heavy
   on bone, so soften to the editorial underline used elsewhere. */
/* Inputs in the light layout: clearly visible, inviting boxes so the
   field never gets lost on the bone canvas. */
.contact-a .gnf-in.dense{background:var(--paper);border:1px solid rgba(11,15,26,0.18);border-radius:10px;padding:14px 16px;font-size:15.5px}
.contact-a .gnf-in.dense::placeholder{color:#9b968a}
.contact-a .gnf-in.dense:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navyTint)}
.contact-a textarea.gnf-in.dense{min-height:104px}
.contact-a .gnf-field[data-err="true"] .gnf-in.dense{border-color:var(--rust);box-shadow:0 0 0 3px var(--rustTint)}

@media (max-width:1024px){
  .contact-a .db{gap:48px;padding:48px 40px 64px}
}
@media (max-width:860px){
  .contact-a .db{grid-template-columns:1fr;gap:36px}
}
@media (max-width:720px){
  .contact-a .db{padding:40px 24px 56px}
}