/* Homepage ([steel_home]), laid out like prolechull.co.uk: navy, Steel blue accent, caps headings, pill buttons */
.sh-home{--navy:#040b18;--b:#1a8fe8;--b2:#0b5bd3;--sky:#29c5f6;--soft:#eaf4fd;--txt:#2e3b4e;font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;color:var(--txt);font-size:16px;line-height:1.7;overflow:hidden}
.elementor-widget-wrap:has(>.elementor-widget-shortcode .sh-home){padding:0!important}
.sh-home *{box-sizing:border-box}
.sh-home h1,.sh-home h2,.sh-home h3{font-family:inherit;color:var(--navy);margin:0 0 16px;text-transform:uppercase;letter-spacing:.04em;font-weight:800}
.sh-home h2{font-size:30px;line-height:1.2}
.sh-home h3{font-size:20px;line-height:1.3}
.sh-home p{margin:0 0 16px}
.sh-home a{color:var(--b2)}
.sh-home img{display:block;max-width:100%;height:auto}
.sh-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sh-sec{padding:80px 0}
.sh-soft{background:var(--soft)}
.sh-home .sh-eye{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--b);margin-bottom:10px}
.sh-home .sh-btn{display:inline-block;padding:13px 30px;border-radius:99px;background:var(--b);color:#fff;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background .15s}
.sh-home .sh-btn:hover{background:var(--b2);color:#fff}

/* hero: full photo, centred caps heading, blue arc at the bottom */
.sh-hero{position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center;text-align:center;background:var(--navy);padding:120px 0 170px}
.sh-home .sh-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.sh-hero{--arc-bg:var(--navy)}
.sh-hero .sh-wrap{position:relative;z-index:3;width:100%}
/* opening, same as the inner pages (pages.css): the header opens from the middle, then the words rise in */
@keyframes sh-open{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes sh-rise{from{opacity:0;transform:translateY(28px)}}
@keyframes sh-settle{from{transform:scale(1.08)}}
.sh-hero{animation:sh-open .6s cubic-bezier(.86,0,.07,1) both}
.sh-home .sh-hero-bg{animation:sh-settle 1.2s cubic-bezier(.2,.8,.2,1) both}
.sh-hero .sh-wrap>*{animation:sh-rise .5s cubic-bezier(.2,.8,.2,1) both}
.sh-hero .sh-wrap>:nth-child(1){animation-delay:.22s}.sh-hero .sh-wrap>:nth-child(2){animation-delay:.3s}.sh-hero .sh-wrap>:nth-child(3){animation-delay:.38s}
/* phones: two blue panels slide apart instead of the clip */
@keyframes sh-door-l{to{transform:translateX(-101%)}}
@keyframes sh-door-r{to{transform:translateX(101%)}}
@media (max-width:860px){
.sh-hero{animation:none}
.sh-hero::before,.sh-hero::after{content:"";position:absolute;top:0;bottom:0;width:50.5%;background:var(--b);z-index:6;pointer-events:none;animation:sh-door-l .6s cubic-bezier(.86,0,.07,1) .05s both}
.sh-hero::before{left:0}
.sh-hero::after{right:0;animation-name:sh-door-r}
}
.sh-home .sh-hero h1{color:#fff;font-size:52px;line-height:1.15;margin-bottom:22px;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.sh-home .sh-hero p{color:#fff;font-size:18px;font-weight:600;max-width:640px;margin:0 auto 30px}

/* welcome and call band: navy, rounded photo with a blue bolt behind it */
.sh-welcome,.sh-call{background:var(--navy);color:#c9d3e2}
.sh-welcome{padding:60px 0 100px}
.sh-home .sh-welcome h2,.sh-home .sh-call h2{color:#fff}
.sh-home .sh-intro{color:#fff;font-weight:700;font-size:17px}
.sh-split{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.sh-call .sh-split{grid-template-columns:1.15fr 1fr}
.sh-pic{position:relative}
.sh-home .sh-pic img{position:relative;width:100%;aspect-ratio:1/1.05;object-fit:cover;border-radius:28px}
.sh-welcome .sh-pic::before{content:"";position:absolute;left:-90px;top:6%;width:200px;height:100%;background:var(--b);clip-path:polygon(58% 0,100% 0,62% 44%,95% 44%,8% 100%,38% 52%,0 52%)}
.sh-pic-sun::before{content:"";position:absolute;width:56%;aspect-ratio:1;border-radius:50%;background:var(--b);top:-48px;left:22%}
.sh-home .sh-call .sh-pic img{aspect-ratio:16/10}
.sh-dots{list-style:none;margin:26px 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.sh-dots li{position:relative;padding-left:26px;color:#fff;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.sh-dots li::before{content:"";position:absolute;left:0;top:.35em;width:12px;height:12px;border-radius:50%;background:var(--b)}

/* audience cards straddle navy and pale blue */
.sh-who{background:linear-gradient(var(--navy) 55%,var(--soft) 55%);padding:0 0 30px}
.sh-who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sh-card{position:relative;min-height:380px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:72px 30px 34px;border-radius:6px;overflow:hidden;border-top:4px solid var(--b);background:var(--navy)}
.sh-card:nth-child(2){border-top-color:#fff}.sh-card:nth-child(3){border-top-color:var(--sky)}
.sh-home .sh-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;transition:transform .4s}
.sh-card:hover img{transform:scale(1.05)}
.sh-card>*:not(img){position:relative}
.sh-home .sh-card h3{color:#fff}
.sh-home .sh-card p{color:#fff;font-size:15px}
.sh-card .sh-btn{margin-top:auto}

/* services: pale blue, centred heading, 8 icon cards */
.sh-services{background:var(--soft);padding:60px 0 140px;text-align:center}
.sh-home .sh-sub{max-width:560px;margin:0 auto 40px}
.sh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sh-home .sh-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:190px;padding:24px 16px;background:#fff;border:1px solid #cfe3f7;border-radius:6px;color:var(--navy);font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:transform .15s,box-shadow .15s}
.sh-grid a:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(11,91,211,.14)}
.sh-grid svg{width:64px;height:64px;fill:none;stroke:var(--b);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* call band: curved top, phone beside the button */
.sh-call{position:relative;padding:120px 0 110px}
.sh-call::before{content:"";position:absolute;left:-10%;right:-10%;top:-90px;height:160px;background:var(--soft);border-radius:50%}
.sh-call .sh-wrap{position:relative}
.sh-call-row{display:flex;flex-wrap:wrap;align-items:center;gap:30px;margin-top:28px}
.sh-home .sh-phone{color:var(--sky);font-weight:800;font-size:18px;letter-spacing:.06em;text-decoration:none;line-height:1.3}
.sh-phone span{display:block;color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase}

/* logos */
.sh-logos{background:#fff;padding:40px 0}
.sh-logos .sh-wrap{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:24px}
.sh-home .sh-logos img{max-height:80px;width:auto;mix-blend-mode:multiply}
.sh-home .sh-logos img[alt="NICEIC Domestic Installer"]{max-height:136px;margin:-28px 0}
#reviews .sb-feed-header-heading{display:none!important}
#reviews .sb-feed-header{margin-bottom:10px!important}

/* quote */
.sh-quote{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.sh-form{background:#fff;border:1px solid #dde3ea;border-top:4px solid var(--b);border-radius:6px;padding:28px}
.sh-form .wpforms-container{margin:0!important}
.sh-form input,.sh-form textarea{width:100%!important;border-radius:4px!important;font-family:inherit!important}
.sh-form .wpforms-submit{border-radius:99px!important;background:var(--b)!important;text-transform:uppercase!important;font-family:inherit!important;font-weight:800!important;letter-spacing:.06em!important}

@media (max-width:900px){
.sh-split,.sh-call .sh-split,.sh-quote{grid-template-columns:1fr;gap:40px}
.sh-who-grid{grid-template-columns:1fr}
.sh-who{background:linear-gradient(var(--navy) 20%,var(--soft) 20%)}
.sh-grid{grid-template-columns:1fr 1fr}
.sh-welcome .sh-pic{margin-left:40px}
.sh-welcome .sh-pic::before{left:-60px;width:130px}
}
@media (max-width:767px){
.sh-hero{min-height:520px;padding:80px 0 140px}
.sh-home .sh-hero h1{font-size:32px}
.sh-home .sh-hero p{font-size:16px}
.sh-home h2{font-size:24px}
.sh-sec{padding:56px 0}
.sh-dots{grid-template-columns:1fr}
.sh-home .sh-grid a{min-height:150px;font-size:12px}.sh-grid svg{width:48px;height:48px}
.sh-form{padding:18px}
}
@media (prefers-reduced-motion:reduce){.sh-home *{transition:none!important}.sh-hero,.sh-home .sh-hero-bg,.sh-hero .sh-wrap>*{animation:none}.sh-hero::before,.sh-hero::after{display:none}}
