/* Contact — page-specific only. site.css is frozen and loads before this. */


/* form slot + contact card */
.sec-consult{background:var(--cream);border-bottom:1px solid var(--line)}
.consult-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 30px 34px}
.panel h2{font-size:1.35rem;margin-bottom:1em}
.panel h3{font-size:1.05rem;margin-bottom:.9em}

/* GHL form embed. The .panel already supplies the card, so the iframe runs flush
   to the panel's edges instead of nesting a second bordered box inside it — the
   negative margins cancel .panel's padding. Height is a floor only; GHL's
   form_embed.js resizes the iframe to its content. */
.form-embed{margin:0 -30px -34px;border-top:1px solid var(--line)}
.form-embed iframe{display:block;width:100%;border:0;min-height:640px}

/* deliberately-empty slot (the GBP link) */
.slot{border:2px dashed rgba(249,115,22,.55);border-radius:var(--radius);background:rgba(249,115,22,.05);padding:38px 28px;text-align:center}
.slot-sm{padding:26px 20px}
.slot-ico{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:50%;border:2px solid var(--orange);background:#fff}
.slot-ico svg{width:28px;height:28px;fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.slot-title{margin:0 0 .5rem;font-weight:800;color:var(--ink);font-size:1rem}
.slot-note{margin:0;font-size:.92rem}
.slot-note a{color:var(--orange);font-weight:700}

.talk{display:flex;gap:14px;align-items:center;margin-top:6px;padding:16px 18px;border-radius:12px;background:var(--cream);border:1px solid var(--line);text-decoration:none}
.talk svg{width:24px;height:24px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.talk b{display:block;color:var(--ink);font-size:.95rem}
.talk span{font-size:.93rem}

/* what happens next — 3 up, reuses .steps from site.css */
.sec-next{background:#fff}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps-3::before{left:16.6%;right:16.6%}

/* dark value band */
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.values li{background:#0C0C0C;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:26px 20px;text-align:center}
.val-ico{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 14px;border-radius:50%;border:2px solid var(--orange)}
.val-ico svg{width:26px;height:26px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.values h3{color:#fff;font-size:.98rem;margin-bottom:.45em}
.values p{color:#C9CDD3;font-size:.88rem;margin:0}

/* map + GBP */
.sec-map{background:var(--cream);border-top:1px solid var(--line)}
.map-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:stretch}
.map-panel{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#EDEFEA;box-shadow:var(--shadow)}
.map-panel svg{display:block;width:100%;height:auto;aspect-ratio:4/3}
.gbp-panel{display:flex;flex-direction:column;justify-content:center}

/* service-area list */
.sec-area{background:#fff}
.local-panel{display:flex;gap:26px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);padding:30px 32px}
.local-ico{flex:none;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;border:2px solid var(--orange);background:#fff}
.local-ico svg{width:40px;height:40px;fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.local-panel h2{font-size:1.3rem;margin-bottom:.4em}
.area-list{margin:0;font-size:.96rem;line-height:1.9}

/* FAQ */
.sec-faq{background:var(--cream);border-top:1px solid var(--line)}
.faq{max-width:880px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:17px 52px 17px 20px;font-weight:700;color:var(--ink);font-size:.98rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-body{padding:0 20px 18px;border-top:1px solid var(--line)}
.faq-body p{margin:14px 0 0;font-size:.95rem}

/* closing CTA band with image */
.band-cta{padding:0}
.cta-band-img{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center;padding:0}
.cta-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.cta-band h2{color:#fff;margin-bottom:.7em}
.cta-band-actions{display:flex;gap:14px;flex-wrap:wrap}
.band-cta-media .wrap{padding-right:var(--pad)}
.band-cta-media{padding:0 0 0 0}
.cta-band-img>div:last-child{padding:52px 0}

@media (max-width:1024px){
  .hero-contact .hero-inner{padding:60px 0 96px}
  .consult-grid,.map-grid,.cta-band-img{grid-template-columns:1fr}
  .values{grid-template-columns:1fr 1fr}
  .steps-3{grid-template-columns:1fr}
  .steps-3::before{display:none}
  .cta-band-img>div:last-child{padding:0 0 44px}
  .cta-media{padding-top:44px}
}
@media (max-width:767px){
  .values{grid-template-columns:1fr}
  .panel{padding:24px 20px 26px}
  .form-embed{margin:0 -20px -26px}
  .local-panel{flex-direction:column;text-align:center;padding:26px 22px}
  .cta-band-actions .btn{width:100%}
}

/* ---- warranty (verbatim from RENEWITHQ.md) — same component as the other pages ---- */
.sec-warranty{background:#fff;border-top:1px solid var(--line)}
.warranty-card{display:flex;gap:22px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:var(--radius);padding:30px 32px}
.warranty-ico{flex:none;width:52px;height:52px;border-radius:50%;border:2px solid var(--orange);display:grid;place-items:center}
.warranty-ico svg{width:26px;height:26px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.warranty-card h2{font-size:1.25rem;margin-bottom:.4em}
.warranty-text{margin:0;font-size:1rem}
@media (max-width:767px){.warranty-card{flex-direction:column;gap:16px;padding:22px}}

/* ---- dark split-panel hero per the Contact mockup: black copy panel left, photo right ---- */
.pg-hero-dark{background:#000;border-bottom:0;padding:0;position:relative;overflow:hidden}
.pg-hero-dark .pg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;align-items:center;position:relative;z-index:1}
.pg-hero-dark .pg-hero-copy{padding:76px 44px 96px 0}
.pg-hero-dark h1{color:#fff}
.pg-hero-dark p{color:#D6DBE2;max-width:44ch}
.pg-hero-dark .pg-hero-media{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0}
.pg-hero-dark .pg-hero-media picture,.pg-hero-dark .pg-hero-media img{display:block;width:100%;height:100%;object-fit:cover}
/* soft feather so the photo meets the black panel without a hard seam */
.pg-hero-dark .pg-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 14%,rgba(0,0,0,0) 42%)}
.btn-ink-light{background:rgba(0,0,0,.55);color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ink-light:hover{background:rgba(255,255,255,.16)}
@media (max-width:1024px){
  .pg-hero-dark .pg-hero-grid{grid-template-columns:1fr}
  .pg-hero-dark .pg-hero-copy{padding:58px 0 74px}
  .pg-hero-dark .pg-hero-media{position:absolute;inset:0;width:100%;opacity:.34}
  .pg-hero-dark .pg-hero-media::after{background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.9))}
}