/* Keep the form first in reading order, with the established desktop columns. */
#contact-page .rl-contact-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"details form";
  gap:clamp(32px,4vw,56px);
  align-items:start;
}
#contact-page .rl-contact-details{
  grid-area:details;
  border-top:1px solid var(--line);
  padding-top:24px;
}
#contact-page .rl-form-panel{
  grid-area:form;
  padding:24px;
  background:#fcfafb;
  border:1px solid var(--line);
  border-radius:3px;
}
#contact-page .rl-form-panel h2{
  font-size:25px;
  line-height:1.3;
  margin-bottom:8px;
}
#contact-page .rl-form-intro{margin-bottom:22px}
#contact-page .rl-form-row{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
#contact-page .rl-field{margin-bottom:18px}
#contact-page .rl-field label{margin-bottom:7px}
#contact-page .rl-field textarea{height:120px;min-height:120px}
#contact-page .rl-field-hint{margin-top:8px}
#contact-page .rl-form-privacy{margin-top:14px}
#contact-page .rl-form-preview-note{margin-top:18px;padding-top:12px}

@media(max-width:900px){
  #contact-page .rl-contact-grid{grid-template-columns:1fr;grid-template-areas:"form" "details";gap:36px}
}
@media(max-width:540px){
  #contact-page .rl-form-panel{padding:22px 20px}
  #contact-page .rl-form-row{grid-template-columns:1fr;gap:0}
  #contact-page .rl-form-panel h2{font-size:24px}
  #contact-page .rl-field textarea{height:128px;min-height:128px}
}