@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',sans-serif;color:#12202b;background:#f7f7f4;line-height:1.65;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}
.top{background:#102b3b;color:#dce9ed;padding:9px 6%;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
.top a{font-weight:700;color:white;white-space:nowrap}
nav{min-height:82px;background:#fff;display:flex;align-items:center;padding:10px 6%;gap:35px;position:sticky;top:0;z-index:30;box-shadow:0 2px 20px #102b3b0c}
.logo{display:flex;align-items:center;min-width:0}
.logo img{height:58px;width:auto}
.navlinks{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:13px;font-weight:600}
.navlinks a:hover{color:#c27a35}
.cta,.button{background:#c27a35;color:#fff!important;padding:12px 20px;border-radius:2px;font-weight:700;border:1px solid #c27a35;display:inline-block;cursor:pointer;font-size:14px;text-align:center}
.menu{display:none;border:0;background:none;font-size:25px;line-height:1;padding:6px 4px;color:#102b3b}
.hero{background:#102b3b;color:white;padding:90px 8%;display:grid;grid-template-columns:1.45fr .55fr;gap:60px;align-items:center;min-height:650px}
.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:800;color:#c27a35;margin:0 0 14px}
.hero h1{font:800 clamp(38px,6vw,76px)/1.08 Manrope;margin:0 0 25px;max-width:850px}
.hero h1 em{color:#e0a267;font-style:normal}
.hero p:not(.eyebrow){font-size:18px;color:#d7e1e4;max-width:650px}
.actions{display:flex;gap:12px;margin:30px 0;flex-wrap:wrap}
.outline{background:transparent!important;border:1px solid #78909b}
.trust{display:flex;gap:25px;flex-wrap:wrap;font-size:12px;color:#b8c9ce}
.hero-card{background:#e8ded1;color:#102b3b;padding:40px;border-radius:3px;box-shadow:20px 20px 0 #c27a35;max-width:100%}
.hero-card span{font:800 55px Manrope;display:block}
.hero-card strong{font:800 22px Manrope}
.hero .hero-card p{color:#12202b}
.hero-card a{display:block;margin-top:20px;font-weight:800}
.intro,.areas,.reviews{padding:100px 12%;text-align:center}
.intro h2,.areas h2,.reviews h2,.split h2,.services h2,.dark h2,.boilers h2,.work h2,.contact h2{font:800 clamp(30px,4vw,52px)/1.15 Manrope;margin:0 0 20px}
.intro>p:not(.eyebrow),.areas>p:not(.eyebrow){max-width:720px;margin:0 auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:100px 10%;background:white;align-items:center}
.photo{height:470px;background:linear-gradient(135deg,#b8c5c7,#284858);display:grid;place-items:center;color:#fff;font:800 100px Manrope}
.about-photo{background:radial-gradient(circle at 32% 28%,#1c3b4d,#0a1a24)}
.about-photo img{width:44%;height:auto}
.why-photo{background:linear-gradient(135deg,#284858,#0c202c)}
.why-photo svg{width:130px;height:130px;color:#e0a267}
.split ul{padding:0;list-style:none}
.split li{padding:10px 0;border-bottom:1px solid #ddd}
.split li:before{content:'✓';color:#c27a35;font-weight:800;margin-right:12px}
.textlink{font-weight:800;color:#c27a35}
.services,.boilers,.work{padding:100px 8%}
.sectionhead{display:flex;justify-content:space-between;gap:50px;margin-bottom:45px;flex-wrap:wrap}
.sectionhead>p{max-width:450px}
.grid,.reviewgrid,.workgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid article{background:#fff;padding:35px;min-height:230px;border-top:3px solid #c27a35}
.grid h3,.work h3{font:700 24px Manrope}
.dark{background:#102b3b;color:white;padding:100px 8%}
.dark .grid article{background:#193949}
.dark .grid p{color:#c4d2d6}
.boilers{background:#e9e2d8}
.boiler-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.boiler-grid a{background:#fff;padding:34px 32px;display:flex;flex-direction:column;gap:6px;border-top:3px solid #c27a35}
.boiler-grid .bicon{width:46px;height:46px;color:#c27a35;margin-bottom:10px}
.boiler-grid h3{font:700 21px Manrope;margin:0;color:#102b3b}
.boiler-grid p{margin:4px 0 0;font-size:14px;color:#55636b;line-height:1.55}
.boiler-grid b{color:#c27a35;font-weight:800;font-size:13px;margin-top:16px}
.emergency{background:#c27a35;color:#fff;padding:65px 10%;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.emergency .eyebrow{color:#fff}
.emergency h2{font:800 clamp(28px,4vw,38px)/1.15 Manrope;margin:0 0 8px}
.emergency p{margin:0;max-width:700px}
.emergency .button{background:#102b3b!important;border-color:#102b3b!important}
.area-tags{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:30px}
.area-tags span{background:white;padding:12px 20px;border:1px solid #ddd}
.work{background:white}
.workimg{height:180px;background:linear-gradient(135deg,#102b3b,#284858);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff}
.workimg svg{width:46px;height:46px;color:#e0a267}
.workimg span{font:800 12px Manrope;letter-spacing:2px;color:#c9d5da}
.reviewgrid blockquote{background:white;margin:0;padding:35px;text-align:left;font-size:17px}
.reviewgrid footer{margin-top:20px;color:#c27a35;font-size:13px;font-weight:800}
.contact{padding:100px 10%;display:grid;grid-template-columns:1fr 1fr;gap:80px;background:#e9e2d8}
.contact h2{font-size:clamp(30px,4vw,50px)}
.whatsapp{display:inline-block;margin-top:20px;color:#167c45;font-weight:800}
.contact form{display:grid;gap:12px}
input,select,textarea{border:1px solid #cbd1d0;padding:15px;background:#fff;font:inherit;font-size:16px;width:100%}
footer{background:#0c202c;color:#c8d3d7;font-size:12px}
.foot-logo{display:flex;align-items:center;gap:12px}
.foot-logo img{height:44px;width:auto}
.foot-logo span{font:800 17px/1.15 Manrope;color:#fff;display:block}
.foot-logo small{font-size:9px;letter-spacing:2px;font-weight:600;display:block;color:#82949b}
.floatwa{position:fixed;right:24px;bottom:24px;background:#159447;color:#fff;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:800;z-index:20;box-shadow:0 8px 25px #0003}
.offers{padding:100px 8%;background:#fff}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#e2ddd3}
.offer-grid>div{background:#fff;padding:40px}
.offer-grid h3{font:700 24px Manrope;margin:0 0 12px}
.offer-grid p{margin:0 0 18px}
.fine{font-size:12px;color:#7c8a91;margin-top:16px}
.note{font-size:13px;color:#7c8a91;font-style:italic;margin:-25px 0 40px}
.steps{counter-reset:step;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.steps li{counter-increment:step;background:#f7f7f4;padding:22px 18px;font-size:14px}
.steps li:before{content:counter(step);display:block;font:800 20px Manrope;color:#c27a35;margin-bottom:8px}
.details{max-width:640px;margin:35px auto 0;text-align:left}
.details ul{padding-left:20px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:60px 8% 30px;border-bottom:1px solid #1c3b4d}
.foot-grid h4{font-size:13px;letter-spacing:1px;margin:0 0 14px;color:#82949b}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:8px 0}
.foot-grid a:hover{color:#e0a267}
.foot-bottom{padding:20px 8%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:1000px){
  .navlinks{display:none}
  .navlinks.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:100%;left:0;right:0;background:#fff;padding:16px 6% 22px;box-shadow:0 12px 20px #0002;gap:14px;z-index:29}
  .navlinks.open .cta{width:100%}
  .menu{display:block;margin-left:auto}
  .hero,.split,.contact{grid-template-columns:1fr}
  .hero{padding:60px 6%}
  .hero-card{max-width:460px;box-shadow:12px 12px 0 #c27a35}
  .split{gap:40px;padding:70px 6%}
  .photo{height:280px;order:-1}
  .grid,.reviewgrid,.workgrid,.offer-grid,.steps,.foot-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sectionhead{display:block}
  .boiler-grid{grid-template-columns:1fr}
  .top{padding:8px 5%;font-size:12px}
  nav{padding:10px 5%}
  .logo img{height:50px}
  .foot-bottom{flex-direction:column}
  .foot-grid{padding:50px 6% 24px}
}
@media(max-width:640px){
  .hero{padding:48px 6% 56px;min-height:0}
  .hero h1{font-size:clamp(32px,9vw,44px)}
  .hero p:not(.eyebrow){font-size:16px}
  .actions{margin:24px 0}
  .actions .button{flex:1 1 auto;text-align:center}
  .hero-card{padding:28px;box-shadow:8px 8px 0 #c27a35}
  .hero-card span{font-size:42px}
  .services,.boilers,.work,.dark,.split,.contact,.intro,.areas,.reviews,.offers{padding:56px 6%}
  .grid{grid-template-columns:1fr}
  .emergency{padding:40px 6%;display:block;text-align:left}
  .emergency .button{display:inline-block;margin-top:20px}
  .trust{flex-direction:column;gap:8px}
  .area-tags span{padding:10px 14px;font-size:14px}
  .offer-grid>div{padding:28px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .floatwa{right:16px;bottom:16px;width:52px;height:52px;font-size:13px}
  .top{gap:6px}
  .top-more{display:none}
  .logo img{height:44px}
}
@media(max-width:380px){
  .hero h1{font-size:30px}
  .logo img{height:38px}
  .top{font-size:11px}
}