/* =========================================================
   Power Giggs Technologies — Contact page hero only
   This stylesheet is loaded only by contact.html.
   IMPORTANT: No contact form selectors or form styles are changed.
   ========================================================= */

/* Split the existing Contact hero into copy + one consultation image. */
.contact-page .contact-page-hero{
  padding:72px 0;
  overflow:hidden;
}

.contact-page .contact-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}

/* Preserve the existing hero typography while giving the copy
   a controlled width beside the new image. */
.contact-page .contact-hero-copy h1{
  max-width:720px;
  margin:18px 0 16px;
}

.contact-page .contact-hero-copy p{
  max-width:680px;
  line-height:1.7;
}

/* Small process cues add visual structure without adding another section. */
.contact-page .contact-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  margin-top:26px;
  color:#e8f4fb;
  font-size:.9rem;
  font-weight:750;
}

.contact-page .contact-hero-points span::before{
  content:"✓";
  color:#ff887c;
  font-weight:900;
  margin-right:7px;
}

/* Hero image card. */
.contact-page .contact-hero-visual{
  position:relative;
  min-height:410px;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.20);
  background:#062e50;
  box-shadow:0 28px 70px rgba(2,42,76,.32);
}

.contact-page .contact-hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    135deg,
    rgba(8,105,178,.08),
    transparent 48%,
    rgba(217,61,45,.10)
  );
}

.contact-page .contact-hero-visual img{
  width:100%;
  height:100%;
  min-height:410px;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Tablet: stack the hero only.
   Existing contact information and form layout remain governed by styles.css. */
@media(max-width:950px){
  .contact-page .contact-page-hero{
    padding:62px 0;
  }

  .contact-page .contact-hero-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  .contact-page .contact-hero-visual,
  .contact-page .contact-hero-visual img{
    min-height:370px;
  }
}

/* Mobile: keep the image compact so the contact form remains easy to reach. */
@media(max-width:650px){
  .contact-page .contact-page-hero{
    padding:50px 0;
  }

  .contact-page .contact-hero-points{
    display:grid;
    gap:8px;
  }

  .contact-page .contact-hero-visual{
    min-height:285px;
    border-radius:20px;
  }

  .contact-page .contact-hero-visual img{
    min-height:285px;
  }
}