/* ===== Contact page — v1 (mobile-first, scoped) ===== */

/* Section rhythm comes from styles.css; just ensure containers stay comfy */
body[data-page="contact"] .container{ padding-inline:20px; }

/* ---------- HERO (same look as About) ---------- */
body[data-page="contact"] .about-hero{
  position:relative; color:#fff; background: var(--c-navy);
  padding-block: clamp(48px, 12vw, 96px);
}
body[data-page="contact"] .about-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--hero-image, none);
  background-size: cover; background-position: center;
}
body[data-page="contact"] .about-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: rgba(15,40,90, var(--overlay-alpha, .7));
}
body[data-page="contact"] .about-hero > .container{ position:relative; z-index:1; }

body[data-page="contact"] .about-hero__grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center;
}
body[data-page="contact"] .about-hero__copy .eyebrow{ color:#9ac5ff; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 .35rem; }
body[data-page="contact"] .about-hero__copy h1{ margin:.1rem 0 .5rem; color:#fff; }
body[data-page="contact"] .about-hero__copy .lede{ color:#dfe8ff; margin:0 0 .8rem; max-width:52ch; }

body[data-page="contact"] .about-hero__badges{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 4px; }
body[data-page="contact"] .about-hero__badges span{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-weight:700; border-radius:999px; padding:.45rem .7rem;
}

/* ---------- CONTACT: info + form card ---------- */
body[data-page="contact"] .story-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:start;
}
body[data-page="contact"] .about-points{
  list-style:none; padding:0; margin:18px 0 0;
  display:grid; grid-template-columns:1fr; gap:10px;
}
body[data-page="contact"] .about-points li{ display:flex; align-items:flex-start; gap:10px; font-weight:600; }
body[data-page="contact"] .about-points i{ color: var(--c-blue); transform:translateY(2px); }

body[data-page="contact"] .story-card{
  background:#fff; border:1px solid #e6eef7; border-radius:14px;
  box-shadow:0 16px 28px rgba(15,34,57,.06);
  padding:18px; display:grid; gap:12px; align-content:start;
}
/* Ensure the left header ("We're Here to Help") aligns with the text column */
body[data-page="contact"] .section-head.section-head--left{
  text-align: left !important;
  align-items: flex-start !important;   /* if global uses flex */
  justify-content: flex-start !important;
  margin-left: 0 !important;
  max-width: none !important;
}

body[data-page="contact"] .section-head.section-head--left p{
  text-align: inherit;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 72ch;                
}

/* Form styling (shared look) */
body[data-page="contact"] .install-form{ display:grid; gap:14px; }
body[data-page="contact"] .install-form .form-group{ display:grid; gap:6px; }
body[data-page="contact"] .install-form label{ font-weight:600; color:var(--c-navy); font-size:.95rem; }
body[data-page="contact"] .install-form input,
body[data-page="contact"] .install-form textarea{
  width:100%; border:1px solid #e6eef7; border-radius:8px; padding:10px 12px;
  font: inherit; font-size:.95rem; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
body[data-page="contact"] .install-form input:focus,
body[data-page="contact"] .install-form textarea:focus{
  outline:none; border-color:var(--c-blue);
  box-shadow:0 0 0 2px rgba(0,123,255,.15);
}
body[data-page="contact"] .install-form textarea{ resize:vertical; }
body[data-page="contact"] .install-form .btn-block{ width:100%; text-align:center; }

/* ---------- CTA banner (bg image + overlay always visible) ---------- */
body[data-page="contact"] .cta-banner{
  position:relative; isolation:isolate; color:#fff;
  padding-block: clamp(36px, 8vw, 72px);
}
body[data-page="contact"] .cta-banner::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--cta-bg-image, none);
  background-size: cover; background-position: center;
}
body[data-page="contact"] .cta-banner::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: rgba(0,0,0, var(--overlay-alpha, .72));
}
body[data-page="contact"] .cta-banner > .container{ position:relative; z-index:1; }
body[data-page="contact"] .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
body[data-page="contact"] .cta-actions .btn{
  flex:0 0 auto; min-width:auto; max-width:100%;
  white-space:nowrap; text-align:center; box-sizing:border-box;
}
@media (max-width:560px){
  body[data-page="contact"] .cta-banner .container{ padding-inline:16px; }
  body[data-page="contact"] .cta-actions .btn{ width:100%; white-space:normal; }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  body[data-page="contact"] .about-hero__grid{ grid-template-columns:1fr; gap:18px; }
  body[data-page="contact"] .story-grid{ grid-template-columns:1fr; gap:24px; }
  body[data-page="contact"] #contact-form.story-card{
    width:100%; max-width:100%; box-sizing:border-box; justify-self:stretch; margin:0;
  }
}
@media (max-width: 560px){
  body[data-page="contact"] .story-card{ padding:16px; border-radius:12px; }
  body[data-page="contact"] .about-hero{ padding-block: clamp(36px, 12vw, 60px); }
}

/* ---------- Header safety: keep solid even if JS toggles classes ---------- */
#site-header, .site-header{ background: var(--c-navy) !important; }
#site-header .nav-bar, .site-header .nav-bar{
  background: var(--c-blue) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,.1);
}

/* ---------- Small guards ---------- */
body[data-page="contact"] img{ max-width:100%; height:auto; }