/* ==========================================================================
   R2 Recycling — Contact page. Loads after styles.css + service.css + locations.css
   (uses .page-hero--compact, .location__label/.location__value, .form*).
   ========================================================================== */

/* DETAILS + FORM */
.contact-page__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 96px; align-items: start; }
.contact-page__phone { display: inline-block; font: 600 clamp(36px, 3.8vw, 56px)/1 var(--font-display); letter-spacing: -0.045em; color: var(--ink); margin-bottom: 20px; }
.contact-page__phone:hover { color: var(--green); }
.contact-page__info .lead { max-width: 400px; font-size: 16px; }
.contact-page__list { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.contact-page__list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }

.contact-page__form { background: var(--bg-light); padding: 56px 56px 60px; border-radius: var(--radius); }
.contact-page__form .form { max-width: none; }
.contact-page__form-title { max-width:620px; font-size: 30px; letter-spacing: -0.035em; margin:0 0 8px; padding:0; }
.contact-page__form-text { max-width:620px; font-size: 15px; line-height: 1.6; color: var(--body); margin:0 0 24px; padding:0; }

@media (max-width: 1080px) {
  .contact-page__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .contact-page__form { padding: 44px 40px 48px; }
}
@media (max-width: 680px) {
  .contact-page { padding-top: 56px; }
  .contact-page__grid { gap: 48px; }
  .contact-page__list { margin: 32px 0 0; }
  .contact-page__list li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .contact-page__form { padding: 28px 20px 32px; margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
  .contact-page__form-title { font-size: 26px; }
  .contact-page__form .form__submit { flex-direction: column-reverse; align-items: stretch; }
  .contact-page__form .form__submit .btn { justify-content: center; }
  .contact-page__form .form__note { text-align: center; }
}