/* =============================================================
   Contact page styles
   Loaded AFTER css/modern.css + css/residential.css.
   All `.contact-*` classes are scoped to contact.html.

   Most of the page reuses primitives from modern.css (hero,
   cta-form, service-areas, testimonials, faq) and r-split from
   residential.css. The styles below are only for contact-specific
   components and shared utilities that still live in metal.css
   rather than modern.css — duplicated here per the project
   pattern, to be promoted to modern.css in a future refactor.
   ============================================================= */

/* ─── Shared utilities (duplicated per project pattern — see
   DESIGN.md "Shared utilities" section). ─── */
.m-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--m-primary);
  color: #fff;
  font-family: var(--m-font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 var(--m-radius-md) 0;
}
.m-skip-link:focus { left: 0; }


/* ─── Inline link inside r-split__lede (used by FAQ section's
   m-section__lede as well via .r-split__link). ─── */
.r-split__link {
  color: var(--m-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--m-primary);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.r-split__link:hover {
  color: var(--m-primary-dark);
  border-color: var(--m-primary-dark);
}


/* ─── Call or email: 3-card contact grid (phone / email / hours) ─── */
/* The flagship is the phone (1.5fr + green border) — it's the
   primary action for "call or email us directly". Email and
   hours sit beside it at 1fr each. Static hours card uses
   bg-alt to read as a non-actionable reference card. Card style
   borrows from the m-feature pattern (1px border, hover lift)
   but with circular icon + eyebrow label instead of Brunson
   numeral + heading. */
.contact-cards {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 20px;
}
.contact-card {
  background: var(--m-bg-alt);
  border-radius: var(--m-radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--m-text);
  position: relative;
}
a.contact-card { cursor: pointer; }
.contact-card__icon {
  width: 56px;
  height: 56px;
  background: var(--m-text);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.contact-card__label {
  font-family: var(--m-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--m-text-muted);
  margin: 0;
}
.contact-card__value {
  font-family: var(--m-font-heading);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--m-text);
  margin: 0;
  line-height: 1.15;
}
.contact-card__value--small { font-size: 17px; letter-spacing: -0.2px; }
.contact-card__sublabel {
  font-family: var(--m-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--m-text-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.contact-card__sublabel i {
  font-size: 11px;
  transition: transform .2s ease;
}
a.contact-card:hover .contact-card__sublabel i {
  transform: translateX(4px);
  color: var(--m-primary);
}
.contact-card__sublabel--em {
  color: var(--m-accent);
  font-weight: 600;
  letter-spacing: 0.3px;
}


/* ─── Why contact: bullet list with green check + bold lead ─── */
.contact-why__points {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'Montserrat', sans-serif;
}
.contact-why__points li {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--m-text);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-why__points li strong {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--m-text);
}
.contact-why__points li::before {
  content: "\f00c";   /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--m-primary);
  width: 24px;
  height: 24px;
  background: rgba(26, 122, 62, 0.10);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
}
.contact-why__points strong {
  font-family: var(--m-font-heading);
  font-weight: 900;
  color: var(--m-text);
}


/* ─── Responsive ─── */
@media (max-width: 900px) {
  .contact-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-card__value { font-size: 24px; }
}
@media (max-width: 500px) {
  .contact-why__points li { font-size: 15px; }
}