/* Hero banners — Haseeb 8 Nov: "Need to make all the Banner as per screen and responsive, text is too bold and big, make it easy to read".
   Applies to every .jpm-hero (home, service, landing, area, post, blog, one-offs). Loaded last; overrides the boards' inline sizes. */
:root{--jpm-hdr:117px}
/* 1. fit the screen: visible hero = min(viewport - header, 760px); content centred */
.jpm-hero > .hero-ov > div{min-height:min(100svh, calc(760px + var(--jpm-hdr)))!important;padding-top:calc(var(--jpm-hdr) + 28px)!important;padding-bottom:36px!important;justify-content:center!important;gap:24px!important}
.jpm-hero .hero-split{align-items:center!important;gap:28px 48px!important}
.jpm-hero nav[aria-label="Breadcrumb"] ol{margin-bottom:12px!important}
.jpm-hero .m-chips:not(ol){margin-top:20px!important}
/* 2. headings: lighter, smaller, readable */
.jpm-hero h1{font-size:clamp(2rem, 1.1rem + 2.4vw, 3.25rem)!important;font-weight:600!important;line-height:1.1!important;letter-spacing:-0.01em!important;max-width:20ch!important}
.jpm-hero h1 .ser{font-size:1em!important}
.jpm-hero h1 .h1-sub{display:block;margin-top:.4em;font-family:inherit;font-style:normal;font-size:.6em;font-weight:400;line-height:1.25;letter-spacing:0;color:#C5F04A}
/* 3. lead paragraph + stronger scrim behind the text side (WCAG AA on photos) */
.jpm-hero h1 + p,.jpm-hero h1 + .jpm-geo{font-size:1.0625rem!important;line-height:1.55!important;max-width:60ch!important;margin-top:16px!important;color:rgba(255,255,255,.92)!important}
.jpm-hero .hero-ov{background:linear-gradient(90deg,rgba(6,20,13,.84) 0%,rgba(6,20,13,.6) 42%,rgba(6,20,13,.18) 78%,rgba(6,20,13,.1) 100%),linear-gradient(180deg,rgba(6,20,13,.55) 0%,rgba(6,20,13,.18) 34%,rgba(6,20,13,.72) 100%)!important}
.jpm-hero > .hero-ov > div > div:not(.hero-split) > a, .jpm-hero .hero-split a{white-space:nowrap}
/* compact estimate card: name + phone side by side, zip + project side by side */
.jpm-hero form{padding:18px 20px!important;gap:8px!important;border-radius:20px!important}
.jpm-hero form input,.jpm-hero form select{height:44px!important}
.jpm-hero form select{font-size:14px!important;padding-left:10px!important;padding-right:24px!important;text-overflow:ellipsis}
.jpm-hero form label{font-size:12.5px!important;gap:4px!important}
.jpm-hero form button[type="submit"]{min-height:48px!important}
.jpm-hero form > p:last-child{font-size:11.5px!important;line-height:1.45!important}
.jpm-hero .hero-form{grid-template-columns:1fr 1fr!important;column-gap:10px!important}
.jpm-hero .hero-form > *{grid-column:1 / -1}
.jpm-hero .hero-form > label:first-of-type,.jpm-hero .hero-form > label:last-of-type{grid-column:auto}
.jpm-hero .hero-form > div:not(:first-child){display:contents!important}
.jpm-hero .hero-form > div:first-child p:last-child{font-size:19px!important}
/* blog-post header (no photo behind the text) */
.jpm-hero-post > div{padding-top:calc(var(--jpm-hdr) + 28px)!important}
/* the Buttonizer floating call bubble duplicates the header call button / mobile bar and covers form fields */
[class*="buttonizer"],#buttonizer-button{display:none!important}
/* 4. phones */
@media (max-width:767px){
  :root{--jpm-hdr:112px}
  .jpm-hero > .hero-ov > div{min-height:auto!important;padding-top:calc(var(--jpm-hdr) + 18px)!important;padding-bottom:28px!important;gap:20px!important}
  .jpm-hero h1{font-size:1.875rem!important;max-width:none!important}
  .jpm-hero h1 + p,.jpm-hero h1 + .jpm-geo{font-size:1rem!important}
  .jpm-hero .hero-form{grid-template-columns:1fr!important}
  .jpm-hero .hero-form > label:first-of-type,.jpm-hero .hero-form > label:last-of-type{grid-column:1 / -1}
  body{padding-bottom:76px}
}

/* hero photo as a real <img> (indexable, LCP) + caption */
.jpm-hero.has-img{position:relative;overflow:hidden;background-image:none!important}
.jpm-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.jpm-hero.has-img > .hero-ov{position:relative;z-index:1}
.jpm-hero .hero-cap{position:absolute;right:clamp(16px,4vw,40px);bottom:10px;z-index:2;margin:0;font-size:12px;color:rgba(255,255,255,.72);text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (max-width:767px){.jpm-hero .hero-cap{display:none}}