:root{--navy:#071b34;--red:#d80e19;--blue:#0863c7;--ink:#10213b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;min-width:0;overflow-x:hidden}img{max-width:100%;height:auto}a{color:inherit}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}.top{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;padding:9px 12px;font-size:12px;text-align:center}.toplinks,.top>a{display:none}header{position:sticky;top:0;z-index:30;background:white;display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:8px;padding:7px 14px;box-shadow:0 2px 10px #00142b20}.brand{display:block;width:min(225px,100%)}.brand img{display:block;width:100%;object-fit:contain}.menu{display:grid;place-items:center;border:1px solid #dce4ef;background:#fff;color:var(--navy);border-radius:9px;width:46px;height:46px;font-size:25px;cursor:pointer}nav{display:none;grid-column:1/-1;flex-direction:column;background:#fff;border-top:1px solid #e5e9f0;padding:7px 0}nav.open{display:flex}nav a{text-decoration:none;font-weight:700;padding:13px 10px;border-bottom:1px solid #edf0f5}nav a.active{color:var(--red)}header>.request{display:none}.hero{position:relative;background:linear-gradient(90deg,#071b34e8,#071b34b0),url('hero.jpg') center/cover;min-height:420px;color:white;padding:42px 18px 34px}.shade{display:none}.heroCopy{position:relative;max-width:1150px;margin:auto}.hero h1{font-size:clamp(28px,8.2vw,43px);line-height:1.07;letter-spacing:-.9px;margin:0 0 18px;font-weight:900}.hero h1 em{font-style:normal;color:#ff3a42}.hero h1 span{color:#78baff}.hero h1 br{display:none}.hero h1 em,.hero h1 span{display:block}.hero p{font-size:16px;line-height:1.5;max-width:440px}.hero p br{display:none}.buttons{display:flex;flex-direction:column;gap:10px;margin-top:20px;max-width:420px}.buttons a{min-height:54px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;gap:4px;padding:12px 15px;text-decoration:none;font-weight:800;border-radius:7px;font-size:15px}.buttons a br{display:none}.buttons a small{font-size:13px}.call{background:var(--red);color:white}.outline{border:2px solid white;color:white}.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.trust span{background:#061d37bf;padding:9px 10px;border-radius:6px;font-size:12px}.services{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 16px;max-width:1200px;margin:auto}.services article{min-width:0;text-align:center;box-shadow:0 3px 14px #12294b1a;border:1px solid #e4e8ef;border-radius:12px;overflow:hidden;padding-bottom:22px;background:white}.services article>img{width:100%;height:185px;object-fit:cover;display:block}.services .icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:white;font-size:24px;margin:-26px auto 9px;position:relative;border:3px solid white}.services .icon.blue{background:var(--blue)}.services .icon.dual{background:linear-gradient(90deg,var(--red) 50%,var(--blue) 50%)}.services h2{margin:5px 0;font-size:21px}.services p{padding:0 18px;line-height:1.55;min-height:55px}.services article>a{display:inline-block;padding:13px 19px;background:var(--red);color:white;border-radius:6px;text-decoration:none;font-weight:bold}.services article>a.bluebtn{background:var(--blue)}.featurebar{background:#f1f4f8;padding:23px 18px;display:grid;gap:18px}.featurebar>div{display:grid;grid-template-columns:40px 1fr;gap:2px 10px;align-items:center;font-size:25px}.featurebar b{font-size:17px}.featurebar small{grid-column:2;font-size:13px;line-height:1.5}.promise{padding:36px 18px;display:flex;flex-direction:column;gap:20px;align-items:center;max-width:1100px;margin:auto}.promise h2,.cta h2,.contact h2{font-size:clamp(23px,6vw,34px);line-height:1.18;margin:0 0 14px}.promise p,.cta p{line-height:1.65}.promise>img{width:min(360px,100%)}.badges{display:flex;flex-wrap:wrap;gap:8px}.badges b{font-size:12px;padding:10px;background:#eaf2fc;border-radius:6px}.cta{padding:35px 18px;background:#f4f6fa;text-align:center}.cta .family{height:190px;background:url('family.jpg') center/cover;border-radius:12px;margin-bottom:24px}.cta .buttons{margin:20px auto 0}.outline.dark{color:var(--navy);border-color:var(--blue)}.contact{padding:40px 18px 95px;max-width:800px;margin:auto}.contact>p{line-height:1.6}.contact form{display:grid;gap:16px}.contact .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.contact label{display:grid;gap:6px;font-weight:700}.contact input,.contact select,.contact textarea{display:block;width:100%;min-width:0;padding:13px;border:1px solid #b9c7d8;border-radius:7px;background:#fff;font-size:16px}.contact button{border:0;background:var(--red);color:white;border-radius:7px;padding:16px;font-weight:800;cursor:pointer}footer{background:var(--navy);color:white;padding:32px 18px 100px;display:grid;gap:22px;overflow-wrap:anywhere;line-height:1.7}footer img{width:210px;background:white;border-radius:8px}footer a{color:white}.mobileCall{position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--red);color:white;text-decoration:none;font-size:17px;font-weight:900;white-space:nowrap;text-align:center;padding:16px 10px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -3px 12px #0003}@media(min-width:560px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}.contact .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1 br{display:initial}.hero h1 em,.hero h1 span{display:inline}.buttons{flex-direction:row}.buttons a{flex:1}.featurebar{grid-template-columns:repeat(3,minmax(0,1fr))}.featurebar>div{grid-template-columns:1fr;text-align:center;justify-items:center}.featurebar small{grid-column:1}.promise{flex-direction:row}.promise>div{flex:1}.promise>img{width:35%}}@media(min-width:900px){.top{justify-content:space-between;padding:10px 5%;font-size:13px}.toplinks,.top>a{display:block}.top>a{white-space:nowrap;text-decoration:none;font-weight:bold}header{grid-template-columns:230px 1fr auto;padding:10px 4%}.menu{display:none}nav{display:flex;grid-column:auto;flex-direction:row;border:0;justify-content:center;gap:10px;padding:0}nav a{border:0;padding:12px 5px;font-size:13px}header>.request{display:block;text-decoration:none;background:var(--red);color:#fff;padding:15px;border-radius:7px;font-size:13px;font-weight:800;white-space:nowrap}.hero{min-height:460px;padding:75px 5%}.hero h1{font-size:46px}.hero h1 em,.hero h1 span{display:block}.hero h1 br{display:none}.services{grid-template-columns:repeat(4,minmax(0,1fr));padding:30px 4%}.featurebar{padding:26px 8%}.cta{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center;text-align:left}.cta .family{height:270px;margin:0}.cta .buttons{margin-left:0}.mobileCall{display:none}footer{grid-template-columns:220px 1fr 1fr;align-items:center;padding:36px 5%}.contact{padding-bottom:60px}}@media(max-width:359px){.top{font-size:11px}.hero{padding-left:13px;padding-right:13px}.hero h1{font-size:27px}.mobileCall{font-size:15px}.brand{width:min(190px,100%)}}

.water-photo{height:185px;display:grid;place-items:center;background:linear-gradient(135deg,#eaf4ff,#b9d7ef);font-size:78px}.services article{scroll-margin-top:105px}

/* Responsive logo and installation-specials masthead */
.brand-promo{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:center;padding:12px 14px;background:#fff;max-width:1400px;margin:auto}
.brand-promo-logo{display:block;width:min(270px,75%);margin:auto}
.brand-promo-logo img{display:block;width:100%;height:auto;object-fit:contain}
.promo-image{display:block;width:100%;height:auto;object-fit:contain;border-radius:6px}
header{grid-template-columns:minmax(0,1fr) 48px}
header .menu{grid-column:2}
header nav{grid-column:1/-1}
@media(min-width:700px){.brand-promo{grid-template-columns:minmax(170px,1fr) minmax(0,3fr);gap:20px;padding:14px 4%}.brand-promo-logo{width:100%;max-width:260px}}
@media(min-width:900px){header{grid-template-columns:minmax(0,1fr) auto}header nav{grid-column:1}header>.request{grid-column:2}}
@media(max-width:899px){header{min-height:50px}header .menu{justify-self:end}header nav{grid-row:2}header>.request{display:none}}

/* Full-width responsive supplied homepage banner */
.brand-promo.full-banner{display:block;max-width:none;padding:0;margin:0;background:#071329;width:100%;overflow:hidden}
.full-banner-image{display:block;width:100%;height:auto;object-fit:contain}

/* Bradford White product photo: service card and request form */
.services .water-tank-image{display:block;width:100%;height:190px;object-fit:contain;background:#fff;padding:12px;box-sizing:border-box}
.water-heater-request-preview{display:flex;align-items:center;gap:14px;padding:12px;margin:12px 0;background:#f5f9ff;border:1px solid #dbe8f8;border-radius:10px;color:#143357;font-weight:700}
.water-heater-request-preview[hidden]{display:none}
.water-heater-request-preview img{width:82px;height:104px;object-fit:contain;background:white;border-radius:8px;flex-shrink:0}
@media(max-width:480px){.services .water-tank-image{height:175px}.water-heater-request-preview img{width:65px;height:85px}}

/* Keep the hot water installation product image visible and uncropped. */
.services article#water-heaters > img.water-tank-image{
  width:100%;height:230px;object-fit:contain;background:#fff;padding:10px;box-sizing:border-box;
}
@media(max-width:600px){
  .services article#water-heaters > img.water-tank-image{height:250px;}
  .full-banner-image{display:block;width:100%;height:auto;object-fit:contain;}
}

/* Electrical and plumbing card, designed for narrow screens first */
.trade-visual{display:flex;justify-content:center;align-items:center;gap:22px;min-height:180px;background:linear-gradient(135deg,#082d60,#137bd6);font-size:68px}
.services article#electrical-plumbing{min-width:0}
.services article#electrical-plumbing h2{overflow-wrap:anywhere}

.hidden-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact input,.contact select,.contact textarea{max-width:100%;min-width:0;box-sizing:border-box}

/* Blog page */
.blog-hero{background:linear-gradient(90deg,#071b34f0,#071b34c0),url('hero.jpg') center/cover;color:#fff;padding:42px 18px;text-align:center}
.blog-hero h1{font-size:clamp(28px,7vw,44px);font-weight:900;letter-spacing:-.5px;margin:0 0 10px}
.blog-hero h1 em{font-style:normal;color:#ff3a42}
.blog-hero p{margin:0 auto;max-width:560px;line-height:1.55}
.blog-content{max-width:1100px;margin:auto;padding:32px 16px 40px;min-height:320px;overflow-wrap:anywhere}
.blog-content img{max-width:100%;height:auto}
.blog-cta{display:block;text-align:center}
.blog-cta .buttons{margin:20px auto 0}
@media(min-width:900px){.blog-hero{padding:60px 5%}.blog-content{padding:44px 4% 56px}.blog-cta{display:block;text-align:center}.blog-cta .buttons{margin:20px auto 0}}
.services article>a.estimator-btn{display:block;width:fit-content;margin:14px auto 0;background:var(--red);font-size:17px;padding:15px 22px}.services .estimator-caption{display:block;margin-top:7px;color:#4a5a6e;font-size:14px;font-weight:700}
@media(min-width:900px){header nav{flex-wrap:wrap;row-gap:0}}
.heroCopy .quote-cta{margin-top:18px;max-width:420px}.heroCopy .quote-link{display:flex;align-items:center;justify-content:center;min-height:62px;padding:14px 20px;background:#f5b82e;color:#071b34;font-weight:900;font-size:clamp(18px,2.2vw,22px);letter-spacing:.3px;text-align:center;text-decoration:none;border-radius:8px;box-shadow:0 6px 18px #0005}.heroCopy .quote-link:hover{background:#ffca51}.heroCopy .quote-cta small{display:block;margin-top:8px;color:#fff;font-size:15px;font-weight:700;text-align:center}