:root{
  --yellow:#feda3e;
  --green:#53c704;
  --black:#0c0c0d;
}

/* Utility container to match site */
.container{ width:min(1280px,92%); margin-inline:auto; padding-inline:clamp(16px,3.2vw,48px) }

/* Hero */
.contact-hero{
  position:relative;
  margin-top:64px; /* header offset */
  isolation:isolate;
}
.contact-hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.55)),
    url("solar-panel-installation-solar-store-uk-6.jpg") center/cover no-repeat;
  z-index:-1;
  min-height: 42vh;
}
.contact-hero__inner{
  min-height:42vh;
  display:grid; place-items:center;
  text-align:center; color:#fff;
  padding: clamp(36px, 7vw, 80px) 0;
}
.contact-hero__inner h1{
  font-family:"Quicksand", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800; line-height:1.06;
  font-size: clamp(2.2rem, 6vw, 4rem);
  margin:0 0 .4rem 0;
  color:#fff;
}
.contact-hero__inner p{
  max-width: 840px;
  margin:0 auto;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  opacity:.95;
}

/* Main section */
.contact-wrap{
  background:#fff;
  padding: clamp(40px, 6vw, 84px) 0;
}
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(22px, 3.6vw, 40px);
}
@media (max-width: 992px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Card (form) */
.contact-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 16px 36px rgba(0,0,0,.08);
  padding: clamp(18px, 2.4vw, 28px);
}
.contact-heading{
  font-family:"Quicksand";
  font-weight:800;
  color: var(--yellow);
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin:0 0 10px 0;
}

/* Form */
.contact-form label{
  display:block; font-weight:700; font-size:.95rem; margin-bottom:.35rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.14);
  border-radius:12px;
  padding:.8rem .9rem;
  font:inherit;
  outline:0;
  transition: box-shadow .15s ease, border-color .15s ease;
  background:#fff;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(254,218,62,.28);
}
.contact-form .form-row{ margin-bottom: .9rem; }
.contact-form .btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--yellow);
  color:#111; font-weight:800;
  border:1px solid var(--yellow);
  border-radius:999px; padding:.85rem 1.25rem;
  box-shadow:0 10px 22px rgba(254,218,62,.25);
  cursor:pointer;
}
.contact-form .btn:hover{ filter:brightness(.97) }
.form-note{ font-size:.9rem; color:#333; margin:.6rem 0 0 }
.form-note a{ color:inherit; text-decoration:underline }

/* Right info */
.contact-info{
  background:#f9fafb;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding: clamp(18px, 2.4vw, 28px);
}
.contact-info h3{
  font-family:"Quicksand"; font-weight:800; color: var(--black);
  margin:0 0 .25rem 0;
}
.contact-info p{ margin:.15rem 0 1rem 0; color:#111 }
.contact-info a{ color:#111; text-decoration:none; border-bottom:1px dotted rgba(0,0,0,.25) }
.contact-info a:hover{ color:var(--yellow); border-bottom-color: var(--yellow) }

.socials{ display:flex; gap:.6rem; margin-top:.25rem }
.soc{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  transition: transform .08s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
  color:#111;
}
.soc:hover{
  transform: translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
  color: var(--yellow);
  border-color: rgba(0,0,0,.18);
}

/* Divider lightning reuse */
.lightning-between{
  display:grid; place-items:center; padding: 28px 0 60px;
  color:#111;
}
.lightning-between i{ font-size: 1.6rem; }

.contact-map iframe {
  width: 100% !important;
  height: 350px !important;
  border: 0;
  border-radius: 14px;
}