/*
Theme Name: MPI Legacy 2026 3.9
Theme URI: https://masonplumbing.com
Author: Evolve Siteworks
Description: Modern, dependency-free recreation of the original Mason Plumbing design.
Version: 3.9
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: mpi-modern-parity
*/
:root{--green:#007a3d;--green-alt:#007a33;--ink:#494949;--texture:#f4f4f2;--wrap:1010px;--serif:"Times New Roman",sans-serif;--sans:"Open Sans",sans-serif;--body:helvetica,Arial,sans-serif;--display:Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f6f6f6;font:14px/26px var(--body);-webkit-font-smoothing:antialiased}#content,.site-foot{background:#f6f6f6 url('/wp-content/uploads/2017/02/concrete.jpg') repeat}img{max-width:100%;height:auto}a{color:inherit}h2,h3{font-family:var(--serif);font-weight:400}h2{letter-spacing:.2px}h1{font-family:var(--display);font-weight:700}p{font-family:var(--sans);font-size:14px;line-height:26px}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:1000;background:#fff;padding:10px}.site-head{height:106px;background:#fff;border-bottom:6px solid var(--green);display:flex;align-items:center}.head-in{width:100%;max-width:1200px;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}.brand img{display:block;width:362px}.menu{display:flex;align-items:center;gap:38px}.menu a{font-size:12px;font-weight:700;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;color:#222}.menu a:hover{color:var(--green)}.has-sub{position:relative}.sub{display:none;position:absolute;z-index:20;top:100%;left:0;min-width:225px;width:225px;padding:7px 0;background:#fff;box-shadow:0 8px 24px #0002}.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}.sub a{display:block;padding:9px 20px;font:600 11px/16px helvetica,Arial,sans-serif}.toggle{display:none;border:0;background:none;font-size:28px;color:var(--green)}.hero{min-height:835px;padding:60px 20px;background:url('/wp-content/uploads/2016/12/Mason-Plumbing-Vans-03.jpg') center/cover no-repeat;text-align:center}.hero h1{margin:0;color:var(--green);font:700 68px/1.3 var(--sans)}.hero h1 span{display:block}.hero p{margin:4px 0;font:29px/1.4 var(--serif);color:#292929}.callbar{background:var(--green);color:#fff}.callbar-in{display:grid;grid-template-columns:1fr 1fr;align-items:start;width:calc(100% + 30px);max-width:none;min-height:65px;margin:0 0 0 -15px}.callbar-in>a{padding:0 15px;text-align:center;text-decoration:none}.callbar .sched{padding-top:15px;font:700 20px/26.087px var(--body);letter-spacing:1px}/* Production centres the number in its half of the bar, then its anchor carries
   margin-left:-30px, which lands the painted text exactly 15px left of centre
   at any width. Shrink-wrap plus the same offset reproduces that. */
.callbar .number{display:block;width:max-content;margin:0 auto;padding:14.5px 0 0;transform:translateX(-15px);text-align:right;font:400 55px/26px "Arial Black","Arial Bold",Gadget,sans-serif}.wrap{max-width:var(--wrap);margin:auto;padding:0 24px}.trust{padding:65px 0 60px}.badges{display:flex;align-items:flex-start;justify-content:center;gap:78px}.badges a{display:block;line-height:0}
/* The recognition strip spreads with the viewport but not evenly, so each badge
   is placed on production's own line: centre = a% of the viewport + b px. */
.home .badges{position:relative;display:block;height:133px;padding:0}
.home .badges>a{position:absolute}
.home .badges>a:nth-child(1){left:calc(18.59% + 7px);top:15px}
.home .badges>a:nth-child(2){left:calc(43.59% - 61px);top:5px}
.home .badges>a:nth-child(3){left:calc(60.31% - 78px);top:0}
.home .badges>a:nth-child(4){left:calc(76.88% - 50px);top:0}.badges img{max-width:none}.badge-swap{position:relative}.badge-swap .badge-hover{position:absolute;left:0;top:0;opacity:0;transition:opacity .2s}.badge-swap:hover .badge-hover,.badge-swap:focus-visible .badge-hover{opacity:1}.quote{width:calc(66.6667% - 10px);max-width:none;margin:98px auto 0;padding:0 45px;color:var(--ink);font:400 23px/26px var(--serif);text-align:center}.quote p{margin:0;font:inherit;color:inherit}.quote cite{display:block;margin-top:21px;font-style:normal;font-weight:700}.texture{padding:63px 0 60px;background:#fff url('/wp-content/uploads/2017/02/concrete-1.jpg') center/cover no-repeat}.section-title{margin:0 0 77px;color:var(--green);font:400 28px/38.7692px var(--serif);letter-spacing:.2px;text-align:center}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:82px 60px}.feature{padding-bottom:18px;text-align:center}.ico{height:56px;margin-bottom:20px;color:#767a78;font:normal 56px/56px FontAwesome}.feature h3{margin:0 0 7px;color:#707070;font:800 20px/26.087px var(--serif);letter-spacing:1px}.feature p{margin:47px 0 0;color:var(--ink);font-size:14px;line-height:26px}.feature a{display:inline-block;margin-top:13px;color:#424242;font-family:var(--body);font-size:14px;line-height:26px;text-decoration:none}.green{padding:79px 0 92px;background:var(--green-alt) url('/wp-content/uploads/2016/12/mason-dividing-line-1-1.png') center/cover no-repeat;color:#fff}.green>.wrap{width:calc(100% + 30px);max-width:none;margin-left:-15px;padding:0}.green-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0}.green-grid>div:first-child{grid-column:2/span 5;padding:0 35px}.green-grid>div:last-child{grid-column:7/span 5;padding:0 35px}.green h2{margin:0 0 14px;font:400 28px/38.7692px var(--serif);letter-spacing:.2px}.green p{color:#fff}.green-grid p{margin:0}.green-grid>div:last-child{padding-top:10px}.video-row{display:flex;align-items:flex-start;gap:20px;margin-top:7px}.video-row img{width:300px}.video-row span{margin-top:3px;font-family:var(--sans);font-size:14px;line-height:26px}.promise{width:calc(55.5556% - 90px);max-width:none;margin:38px auto 0;text-align:center;font:400 23px/26px var(--serif)}.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:calc(100% + 30px);max-width:none;margin-left:-15px;padding:0 8.3333%}.tri>article{padding:0 35px}.tri ul{margin:15px 0 10px 10px;padding:0;list-style-position:inside}.tri-icon{width:240px;height:240px;margin:0 auto;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--green-alt);font:normal 120px/240px FontAwesome}.tri h2{margin:0 0 20px;color:var(--green);font:400 28px/38.7692px var(--serif);letter-spacing:.2px;text-align:center}.tri p{margin:0}.tri p,.tri li{font-size:14px;line-height:26px}.tri a{color:#424242}.site-foot{min-height:260px;border-top:5px solid var(--green);background:#fff}.footbar{height:50px;background:var(--green);margin-top:210px}.page-hero{min-height:325px;display:grid;place-items:center;text-align:center;background:linear-gradient(#fff8,#fff8),url('/wp-content/uploads/2017/02/concrete-1.jpg') repeat;border-bottom:5px solid var(--green)}.page-hero h1{margin:0;color:var(--green);font-size:48px}.page-main{padding:70px 0}.page-main h2{color:var(--green);font-size:30px}.page-main h3{font-size:22px}.page-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.service-card{padding:28px;background:var(--texture);border-top:4px solid var(--green)}.service-card h2{font-size:22px}.button{display:inline-block;padding:11px 21px;background:var(--green);color:#fff;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.form label{display:block;margin:0 0 16px;font-weight:700}.form input,.form textarea{width:100%;padding:12px;border:1px solid #bbb;font:inherit}.hp{position:absolute;left:-10000px}.notice{padding:12px;border-left:4px solid var(--green);background:#eef7ed}.notice.error{border-color:#a00;background:#fff0f0}
@media(max-width:850px){.site-head{height:80px}.head-in{padding:0 18px}.brand img{width:275px}.toggle{display:block}.menu{display:none;position:absolute;z-index:50;top:80px;left:0;right:0;padding:15px;background:#fff;border-bottom:4px solid var(--green);align-items:stretch;gap:0}.site-head.open .menu{display:flex;flex-direction:column}.menu a{padding:9px}.sub{display:block;position:static;box-shadow:none;border:0;padding:0 0 0 15px}.hero{min-height:600px}.hero h1{font-size:48px}.features,.tri,.service-grid{grid-template-columns:1fr 1fr}.green-grid,.page-grid,.contact-grid{grid-template-columns:1fr}.callbar-in{padding:12px 25px}.callbar .number{font-size:36px}}
@media(max-width:560px){.hero{min-height:460px;padding-top:35px}.hero h1{font-size:36px}.hero p{font-size:18px}.callbar-in{flex-direction:column;gap:8px}.features,.tri,.service-grid{grid-template-columns:1fr}.badges{gap:25px;flex-wrap:wrap}.badges img{max-width:95px}.video-row{align-items:flex-start;flex-direction:column}.video-row img{width:100%}.page-hero h1{font-size:38px}.green-grid{gap:35px}}
.legacy-intro{min-height:465px;background:center/cover no-repeat;display:flex;align-items:stretch}.legacy-intro .wrap{width:100%}.legacy-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:none;padding:0}.legacy-intro-copy{grid-column:2;padding:35px 45px 0 40px}.legacy-intro h1{margin:0;color:var(--green);font:700 50px/1.25 var(--sans)}.legacy-intro h2{margin:0;color:var(--green);font-size:28px;line-height:1.385}.legacy-intro p{margin:0;font-size:14px;line-height:26px}.service-band{padding:55px 0;background:#fff}.service-band.texture{background:#f5f5f3 url('/wp-content/uploads/2017/02/concrete-1.jpg') repeat}.service-band.divider{background:var(--green-alt) url('/wp-content/uploads/2016/12/mason-dividing-line-1-1.png') center/cover no-repeat;color:#fff}.service-row{display:grid;grid-template-columns:3fr 1fr;gap:0;align-items:center;width:80.4%;max-width:none;padding:0}.service-row.reverse{grid-template-columns:1fr 3fr}.service-row .service-copy{padding:0 35px}.service-row.reverse .service-copy{grid-column:2}.service-row.reverse .service-media{grid-column:1;grid-row:1}.service-band h2{margin:0 0 8px;color:var(--green);font-size:29px}.service-band.divider h2{color:#fff}.service-band p{margin:0 0 15px}.service-media{text-align:center}.service-media img{max-height:300px;width:auto}.service-contact{text-align:center;margin-top:28px}.efficiency{text-align:center}.savings{display:flex;justify-content:center;gap:65px;margin:28px 0;font:22px var(--serif)}.article-links{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:35px}.article-links h3{color:var(--green)}.warranty{display:flex;align-items:center;justify-content:center;gap:35px}.warranty img{width:110px}
@media(max-width:850px){.legacy-intro{padding:38px 0 285px;background-color:#fff;background-position:center bottom;background-repeat:no-repeat;background-size:auto 265px}.legacy-intro-grid{grid-template-columns:1fr}.legacy-intro-copy{grid-column:auto;background:#fff;padding:0 24px}.service-row,.service-row.reverse{grid-template-columns:1fr;width:auto;max-width:var(--wrap);padding:0 24px}.service-row .service-copy{padding:0}.service-row.reverse .service-copy,.service-row.reverse .service-media{grid-column:auto;grid-row:auto}.article-links{grid-template-columns:1fr}.savings{flex-wrap:wrap;gap:20px 35px}.warranty{flex-direction:column;text-align:center}}
.inner-split{padding:55px 0}.inner-split-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:55px;align-items:center}.inner-split-grid>img{max-height:520px;margin:auto}.inner-split h1{color:var(--green);font:700 46px/1.15 var(--sans)}.columns{columns:2}.about-hero{min-height:480px;background:center/cover no-repeat;display:flex;align-items:flex-end}.about-hero h1{display:inline-block;margin:0 0 45px;padding:12px 25px;background:#fff;color:var(--green);font-size:48px}.center{text-align:center}.team{display:flex;justify-content:center;gap:75px;text-align:center}.team img{width:200px;height:300px;object-fit:cover}.team h3{margin-bottom:0;color:var(--green)}
@media(max-width:850px){.inner-split-grid{grid-template-columns:1fr}.inner-split h1{font-size:38px}.about-hero{min-height:380px}.team{gap:30px;flex-wrap:wrap}}
.conserve-hero{min-height:520px;padding:70px 0;background:center/cover no-repeat}.conserve-copy{max-width:520px;margin-left:auto;background:#fffe;padding:28px}.conserve-copy h1{margin-top:0;color:var(--green);font:700 45px/1.18 var(--sans)}.area-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 35px;max-width:760px;margin:30px auto;text-align:center;font:20px var(--serif);color:var(--green)}
@media(max-width:560px){.conserve-copy h1{font-size:34px}.area-list{grid-template-columns:1fr 1fr}}
.site-foot{min-height:0;border-top:5px solid var(--green);background:#fff}.footer-grid{min-height:340px;display:grid;grid-template-columns:1fr .7fr 1fr;gap:50px;align-items:center}.footer-brand{text-align:center}.footer-brand img{width:285px}.footer-brand p{margin:0;color:#666;font:400 16px/26px var(--serif)}.footer-brand p .sep{color:var(--green)}.footer-links{display:flex;justify-content:center;gap:13px}.footer-links a{display:grid;place-items:center;width:42px;height:42px;background:var(--green);color:#fff;text-decoration:none;font:700 24px Arial}.footer-contact{text-align:center;display:flex;flex-direction:column;gap:5px;font-family:var(--serif)}.footer-contact a{text-decoration:none}.footer-phone{color:var(--green);font:400 41px/45px "Arial Black","Arial Bold",Gadget,sans-serif}.footer-contact>a:not(.footer-phone){color:var(--green);font:400 30px/26px var(--serif)}.footer-contact .footer-email{color:#666;font-size:17px}.footer-contact .footer-legal{color:#666;font-size:14px}.footbar{height:53px;min-height:0;margin-top:0;padding:0;display:grid;place-items:center;background:var(--green);color:#fff;text-align:center;font:700 12px/22px var(--sans)}
@media(max-width:850px){.footer-grid{grid-template-columns:1fr;gap:25px;padding-top:55px;padding-bottom:55px}.footer-brand img{width:240px}.footer-phone{font-size:32px}}
.area-hero{position:relative;min-height:655px;background:center/cover no-repeat}.area-title{position:absolute;left:3.2%;bottom:150px}.area-title h1{margin:0;color:var(--green);font:700 50px/1.15 var(--sans)}.area-title p{margin:0;color:var(--green);font:28px var(--serif)}
@media(max-width:850px){.area-hero{min-height:420px;background-position:center}.area-title{left:20px;bottom:25px;background:#fffe;padding:16px}.area-title h1{font-size:34px}.area-title p{font-size:21px}}
.water-hero{display:grid;grid-template-columns:30% 70%;padding:0;background:#fff}.water-hero-photo img{width:100%;height:100%;min-height:485px;object-fit:cover}.water-hero-copy{padding:38px 7% 38px 13%}.water-hero-copy h1{margin:0 0 12px;color:var(--green);font:700 46px/1.14 var(--sans)}.heater-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:45px}.heater-products{display:flex;align-items:center;justify-content:center;gap:4%}.heater-products img{width:auto;max-width:48%;max-height:580px}
@media(max-width:850px){.water-hero{grid-template-columns:1fr}.water-hero-photo img{min-height:260px;max-height:320px}.water-hero-copy{padding:35px 24px}.water-hero-copy h1{font-size:36px}.heater-layout{grid-template-columns:1fr}.heater-products{align-items:flex-end}}
.video-row img{aspect-ratio:300/161;object-fit:cover}.service-media{min-height:300px;display:grid;place-items:center}.about-intro{padding:48px 0 0;background:#fff}.about-intro-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:55px;align-items:end}.about-portrait img{display:block;width:100%;max-height:650px;object-fit:cover;object-position:center top}.about-copy{padding-bottom:38px}.about-copy h1{margin:0;color:var(--green);font:700 49px/1.15 var(--sans)}.about-copy h2{margin:15px 0 4px;color:var(--green);font-size:27px}.about-copy p{margin:0 0 8px}.kamber-mark{display:block;margin:18px 0 0;max-width:230px}.about-team{padding-top:58px}.about-video{text-align:center}.video-profile{position:relative;display:inline-block;max-width:600px;text-decoration:none}.video-profile img{display:block;width:100%;box-shadow:0 5px 22px #0003}.video-profile span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 20px;background:#467f3be8;color:#fff;font-weight:700;text-transform:uppercase}.contact-top{display:grid;grid-template-columns:34% 66%;min-height:610px}.contact-photo{background:url('/wp-content/uploads/2016/12/marin-plumbing-02-600x800.jpg') center/cover no-repeat}.contact-form-panel{padding:45px 8%;background:#f5f5f3 url('/wp-content/uploads/2017/02/concrete-1.jpg') repeat}.contact-form-panel h1{margin:0 0 24px;color:var(--green);font:700 48px/1.15 var(--sans)}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:28px}.contact-form label{font-size:13px}.contact-form input,.contact-form textarea{background:#fff}.contact-info{padding:55px 0;background:var(--green);color:#fff}.contact-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.contact-info h2{margin:0;color:#fff;font-size:28px}.contact-info a{color:#fff}.blog-list{padding-top:55px}.blog-list>div>h1{margin:0 0 38px;color:var(--green);font:700 48px/1.15 var(--sans)}.blog-card{display:grid;grid-template-columns:46% 54%;margin-bottom:34px;background:#fff;box-shadow:0 2px 10px #0001}.blog-image{min-height:285px;background:#eee}.blog-image img{display:block;width:100%;height:100%;object-fit:cover}.blog-copy{padding:32px 38px}.blog-copy h2{margin:0 0 10px;color:var(--green);font-size:29px;line-height:1.25}.blog-copy h2 a{text-decoration:none}.read-more{color:var(--green);font-weight:700;text-decoration:none}.post-meta{margin-top:20px;font-size:12px;color:#888}
@media(max-width:850px){.about-intro-grid{grid-template-columns:1fr}.about-portrait{order:2}.about-portrait img{max-height:520px}.about-copy{padding-bottom:0}.contact-top{grid-template-columns:1fr}.contact-photo{min-height:300px}.contact-form-panel{padding:38px 24px}.contact-form{grid-template-columns:1fr}.contact-info-grid{grid-template-columns:1fr;gap:25px}.blog-card{grid-template-columns:1fr}.blog-image{min-height:230px}.blog-copy{padding:26px}.service-media{min-height:220px}}
@media(max-width:560px){.badges img{width:95px;height:90px}.about-copy h1,.contact-form-panel h1,.blog-list>div>h1{font-size:36px}.about-copy h2{font-size:24px}.contact-photo{min-height:230px}.blog-copy h2{font-size:25px}}
.video-profile{display:block;max-width:720px;aspect-ratio:16/9;margin:auto}.video-profile iframe{display:block;width:100%;height:100%;border:0;box-shadow:0 5px 22px #0003}
/* Flexslider sizes production's carousel to its TALLEST slide, not the visible
   one, so the band keeps that height at every width. Stacking all four quotes in
   one grid cell reproduces that; only the active one is painted. */
.quote-set{display:grid}.quote-set .quote{grid-area:1/1;opacity:0;pointer-events:none}.quote-set .quote.active{opacity:1;pointer-events:auto}.quote-set .quote p{margin:0}
.post-layout article>h2:first-child{color:var(--green);font-size:42px}.post-sidebar h5{margin-top:28px;color:var(--green);font:700 15px var(--sans);text-transform:uppercase}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:55px}.post-layout h1{color:var(--green);font-size:42px}.post-sidebar{font-size:12px}.post-sidebar input{display:block;width:100%;padding:9px;border:1px solid #bbb}.post-sidebar h3{margin-top:28px;color:var(--green);font:700 15px var(--sans);text-transform:uppercase}.post-sidebar ul{padding:0;list-style:none}.post-sidebar li{margin:8px 0}.post-sidebar a{text-decoration:none}@media(max-width:850px){.post-layout{grid-template-columns:1fr}}
.single-legacy{padding:60px 0 38px}.single-legacy>.wrap{max-width:1100px;padding:0}.single-legacy .breadcrumbs{margin:0 0 45px}.single-legacy .post-layout{grid-template-columns:minmax(0,805px) 255px;gap:40px;align-items:start}.single-legacy .post-layout .post-main>article{padding:20px;background:#fff}.single-legacy .post-featured{display:block;width:100%;height:auto;margin:0 0 20px}.single-legacy .post-layout article>h2:first-of-type{margin:0;color:var(--green);font-size:28px;line-height:1.385}.single-legacy .post-layout article>h3{margin:0;color:var(--green);font-size:20px;line-height:1.385}.single-legacy .post-sidebar{padding:25px 20px;background:#fff}.single-legacy .post-sidebar h5{margin:49px 0 21px;color:var(--green);font:600 18px/28.2857px var(--serif);letter-spacing:1px;text-transform:none}
.single-legacy .post-sidebar li a{text-transform:uppercase}
.single-legacy .post-layout article a,.single-legacy .style56 a{color:#424242}
.single-legacy .legacy-comments h5{margin:0;color:var(--green);font:600 18px/28.2857px var(--serif);letter-spacing:1px}.single-legacy .post-sidebar li{margin:0 0 18px}.single-legacy .post-layout p,.single-legacy .post-layout li{font-size:14px;line-height:26px}
@media(max-width:850px){.single-legacy{padding:35px 0}.single-legacy>.wrap{padding:0 20px}.single-legacy .post-layout{grid-template-columns:1fr;gap:30px}.single-legacy .breadcrumbs{margin-bottom:28px}.single-legacy .post-layout .post-main>article{padding:15px}.single-legacy .post-sidebar{padding:20px}}

/* Production-measured Services page alignment. */
@media(min-width:851px){.site-head{height:106px}}
.callbar-in{min-height:65px}
.legacy-intro-grid{margin:0}
.service-band{padding-top:50px;padding-bottom:50px}
.service-band h2{margin:0;font-size:28px;line-height:1.385}
.service-band p{font-size:14px;line-height:26px}

/* Production-measured Water Conservation page alignment. */
/* Water Conservation, measured from production: the hero band runs 96..797 and
   swallows the call bar; the two topics share one concrete band. */
.page-id-171 .conserve-hero{height:auto;min-height:0;margin-top:-10px;padding:0 0 81px;background-color:var(--green-alt);color:#fff}
.page-id-171 .conserve-hero>.wrap{width:100%;max-width:none;margin:0;padding:0}
.page-id-171 .conserve-copy{width:calc((100% - 10px) * 2 / 3 - 30px);max-width:none;margin:0 0 0 calc((100% - 10px) / 3);padding:50px 15px 19.5px 20px;background:transparent;color:#fff}
.page-id-171 .conserve-copy h1{width:auto;margin:0;padding:0;color:#fff;font:700 50px/62.5px var(--display)}
.page-id-171 .conserve-copy p{margin:0}
.page-id-171 .conserve-copy p,.page-id-171 .conserve-copy li{font-size:14px;line-height:26px}
.page-id-171 .conserve-copy ul{margin:15px 0 0;padding-left:29px}
.page-id-171 .service-row{grid-template-columns:8fr 4fr;align-items:start;width:calc((100% - 50px) * 5 / 6);margin-left:calc(25px + (100% - 50px) / 12);margin-right:0}
.page-id-171 .service-row>div{padding:0 15px}
.page-id-171 .service-row p{margin:0}
.page-id-171 .service-row ul{margin:15px 0 10px;padding-left:32px}
.page-id-171 .service-media{display:block;min-height:0;text-align:center}
/* Production renders these photos as blocks, so the column height is the image
   height with no inline descent under it. */
.page-id-171 .service-media img{display:block;max-width:100%;max-height:none;margin:0 auto}
.page-id-171 .callbar{position:relative;height:81px;margin-top:-81px;background:transparent}
.page-id-171 .callbar .callbar-in{height:81px;min-height:0;width:calc(100% - 10px);margin-left:-15px;grid-template-columns:4fr 8fr}
.page-id-171 .callbar .sched{padding:32px 0 0 40px}
.page-id-171 .callbar .number{margin-top:20px;padding:0 15px 0 30px;line-height:38.7692px}
@media(max-width:850px){.page-id-171 .conserve-hero{height:auto;min-height:0;padding:30px 0 102px;background-position:center;background-size:cover}.page-id-171 .conserve-copy{width:auto;margin:0;padding:0 25px}.page-id-171 .conserve-copy h1{font-size:35px;line-height:1.25}.page-id-171 .service-row{grid-template-columns:1fr}.page-id-171 .service-row>div:first-child{padding:0}}

/* Production-measured Sewer and Drain page alignment. */
.page-id-176 .inner-split{height:552.5px;padding:0}
.page-id-176 .inner-split-grid{width:84.05%;max-width:none;margin:0;padding:0;grid-template-columns:39.25% 60.75%;gap:0;align-items:stretch}
.page-id-176 .inner-split-grid>img{width:100%;height:100%;max-height:none;object-fit:contain}
.page-id-176 .inner-split-grid>div{padding:50px 15px 30px}
.page-id-176 .inner-split h1{margin:0;color:var(--green);font:700 50px/62.5px var(--display)}
.page-id-176 .inner-split p,.page-id-176 .inner-split li{font-size:14px;line-height:26px}
/* Sewer page bands, measured from production. */
.page-id-176 .service-row{align-items:start;grid-template-columns:8fr 4fr;width:calc((100% - 50px) * 5 / 6);margin-left:calc(25px + (100% - 50px) / 12);margin-right:0}
.page-id-176 .service-row>div{grid-row:1;padding:0 15px}.page-id-176 .service-row>div:first-child{grid-column:1}
.page-id-176 .service-row p{margin:0}
.page-id-176 .service-row p+p{margin-top:26px}
.page-id-176 .service-row ul{margin:17px 0 8px;padding-left:29px}
.page-id-176 .sewer-white .service-row ul{margin:12px 0 0}
.page-id-176 .service-media{display:block;min-height:0;text-align:center}
.page-id-176 .service-media img{display:inline-block;vertical-align:top;max-width:100%;max-height:none;margin:0}
.page-id-176 .service-contact{margin-top:1px;text-align:center}
.page-id-176 .service-contact .button{padding:0 29px;border:2px solid var(--green);font:700 16px/47px var(--sans);letter-spacing:1px}
.page-id-176 .callbar{height:62px;background:#fff url('/wp-content/uploads/2017/02/mason-footer.png') repeat}
.page-id-176 .callbar-in{height:62px;min-height:0;grid-template-columns:432px minmax(0,1fr)}
.page-id-176 .callbar .sched{padding-top:17px}
.page-id-176 .callbar .number{margin-top:10px;padding:0;line-height:38.7692px}
.page-id-176 .inner-split p{margin:0}
.page-id-176 .inner-split ul{margin:15px 0 0;padding-left:24px}
.page-id-176 .sewer-main{padding:49px 0 50px;background:#fff url('/wp-content/uploads/2017/02/concrete-1.jpg') center/cover no-repeat}
.page-id-176 .sewer-jetting{padding:49px 0 50px;background:url('/wp-content/uploads/2016/12/mason-dividing-line-1-1.png') center/cover no-repeat;color:#fff}
.page-id-176 .sewer-jetting>.wrap{width:calc((100% + 30px) * 5 / 6 - 70px);max-width:none;margin-left:calc((100% + 30px) / 12 + 20px);margin-right:0;padding:0}
.page-id-176 .sewer-jetting h2{margin:0;color:#fff}
.page-id-176 .sewer-jetting p{margin:0;color:#fff}
.page-id-176 .sewer-white{padding:50px 0;background:#fff}
.page-id-176 .sewer-white .service-row{grid-template-columns:6fr 6fr;width:calc((100% + 30px) * 5 / 6);margin-left:calc((100% + 30px) / 12 - 15px);margin-right:0}
.page-id-176 .sewer-white .service-row+.service-row{margin-top:20px;grid-template-columns:8fr 4fr}
.page-id-176 .sewer-white .service-row+.service-row .service-media{text-align:left}
.page-id-176 .sewer-white .service-row>div{padding:0 15px}.page-id-176 .sewer-white .service-row>div:first-child{padding:0 35px}
.page-id-176 .sewer-jetting .service-contact{margin-top:31px}
.page-id-176 .service-band.divider{background-color:var(--green)}

/* Production-measured Water Heater content alignment. */
.page-id-174 .heater-layout{width:80.4%;max-width:none;padding:0;grid-template-columns:2fr 1fr;gap:0}
.page-id-174 .heater-layout>div:first-child{padding:0 15px}
@media(max-width:850px){.page-id-176 .inner-split{height:auto;padding:35px 0}.page-id-176 .inner-split-grid{width:auto;max-width:var(--wrap);margin:auto;padding:0 24px;grid-template-columns:1fr}.page-id-176 .inner-split-grid>img{height:auto;max-height:520px}.page-id-176 .inner-split-grid>div{padding:0}.page-id-176 .service-row,.page-id-176 .service-row.reverse,.page-id-174 .heater-layout{width:auto;max-width:var(--wrap);padding:0 24px;grid-template-columns:1fr}.page-id-176 .service-row>div:first-child,.page-id-174 .heater-layout>div:first-child{padding:0}.page-id-176 .service-row.reverse .service-media{grid-column:auto;grid-row:auto}}

/* Production-measured About page alignment. */
.page-id-7 .about-intro{height:896px;padding:0}
.page-id-7 .about-intro-grid{width:100%;max-width:none;height:100%;margin:0;padding:0;grid-template-columns:33.45% 66.55%;gap:0;align-items:stretch}
.page-id-7 .about-portrait{display:flex;align-items:flex-end}
.page-id-7 .about-portrait img{width:100%;max-height:826px;object-fit:cover;object-position:center top}
.page-id-7 .about-copy{padding:60px 65px 30px 60px}
.page-id-7 .about-copy h1{margin:0;color:var(--green);font:400 35px/1.25 var(--serif)}
.page-id-7 .about-copy h2{margin:20px 0 0;color:var(--green);font:400 28px/1.385 var(--serif)}
.page-id-7 .about-copy p{margin:0;font-size:14px;line-height:26px}
@media(max-width:850px){.page-id-7 .about-intro{height:auto;padding:38px 0 0}.page-id-7 .about-intro-grid{width:auto;max-width:var(--wrap);height:auto;margin:auto;padding:0 24px;grid-template-columns:1fr}.page-id-7 .about-copy{padding:0}.page-id-7 .about-portrait img{max-height:520px}}

/* Production-measured Service Area alignment. */
.page-id-9 .area-hero{min-height:654px}
.page-id-9 .area-title{left:40px;top:330px;bottom:auto;width:585px}
.page-id-9 .area-title h1{font:700 50px/1.25 var(--display)}
.page-id-9 .area-title p{margin:0;color:var(--green);font:28px/1.385 var(--serif);letter-spacing:.2px}
.page-id-9 .area-hero+.service-band{height:262px;padding:50px 0 0}
.page-id-9 .area-list{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,26px);gap:0;width:calc((100% - 50px) * 2 / 3);max-width:none;margin:20px 0 0 calc(25px + (100% - 50px) / 6);padding-left:0;text-align:left;font:14px/26px var(--body);color:var(--ink)}.page-id-9 .area-list span{padding:0 15px}
.page-id-9 .area-list span:nth-child(1){grid-column:1;grid-row:1}.page-id-9 .area-list span:nth-child(2){grid-column:1;grid-row:2}.page-id-9 .area-list span:nth-child(3){grid-column:1;grid-row:3}
.page-id-9 .area-list span:nth-child(4){grid-column:2;grid-row:1}.page-id-9 .area-list span:nth-child(5){grid-column:2;grid-row:2}.page-id-9 .area-list span:nth-child(6){grid-column:2;grid-row:3}
.page-id-9 .area-list span:nth-child(7){grid-column:3;grid-row:1}.page-id-9 .area-list span:nth-child(8){grid-column:3;grid-row:2}.page-id-9 .area-list span:nth-child(9){grid-column:3;grid-row:3}
.page-id-9 .area-list span:nth-child(10){grid-column:4;grid-row:1}.page-id-9 .area-list span:nth-child(11){grid-column:4;grid-row:2}.page-id-9 .area-list span:nth-child(12){grid-column:4;grid-row:3}.page-id-9 .area-list span:nth-child(13){grid-column:4;grid-row:4}
.page-id-9 .area-list span::before{content:"\2022";display:inline-block;margin-right:14px}
/* Production lets the oversized number overflow a 59px bar here. */
.page-id-9 .callbar{height:59px}
.page-id-9 .callbar-in{height:59px;min-height:0}
.page-id-9 .callbar .sched{padding-top:15px}
.page-id-9 .callbar .number{margin-top:7px;padding:0;line-height:38.7692px;letter-spacing:.2px}

/* Production-measured Blog index alignment. */
.blog .blog-list{padding:0}
.blog .blog-list>.wrap{max-width:1100px;padding:0}
.blog .blog-card{grid-template-columns:1fr 1fr}
.blog .blog-card{margin-bottom:40px}
.blog .blog-copy{padding:23px}
.blog .blog-copy h2{font-size:28px;line-height:1.385}
@media(max-width:850px){.page-id-9 .area-hero{min-height:420px}.page-id-9 .area-title{left:20px;top:auto;bottom:25px;width:auto}.page-id-9 .area-hero+.service-band{height:auto;padding:50px 0}.page-id-9 .area-list{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-flow:row;gap:8px 20px;padding:0 24px}.page-id-9 .area-list span{grid-column:auto!important;grid-row:auto!important}.page-id-9 .callbar-in{min-height:72px}.page-id-9 .trust{padding:54px 0}.blog .blog-list>.wrap{padding:0 24px}.blog .blog-card{grid-template-columns:1fr;margin-bottom:34px}.blog .blog-copy{padding:26px}}

/* Services rows after the first use the production 15-pixel column inset. */
/* Services page, measured from production. */
.page-id-11 /* Production's service hero is a full-bleed VC row whose right half is a
   translucent panel; its height follows the copy, so it shrinks as the text
   reflows at wider viewports. Nothing here is fixed in pixels. */
.legacy-intro{height:auto;min-height:0}
.legacy-intro .wrap{width:calc(100% + 30px);max-width:none;margin-left:-15px;padding:0;flex:none}
.page-id-11 .legacy-intro-grid{grid-template-columns:1fr 1fr}
.page-id-11 .legacy-intro-copy{grid-column:2;padding:35px 60px 30px 40px;background:rgba(255,255,255,.46)}
.page-id-11 .legacy-intro h1{margin:0;font:700 50px/62.5px var(--display)}
.page-id-11 .legacy-intro h2{margin:0}
.page-id-11 .legacy-intro p{margin:0}
.page-id-11 .callbar{height:72px;background:var(--green-alt)}
.page-id-11 .callbar-in{height:72px;min-height:0;grid-template-columns:5fr 7fr}
.page-id-11 .callbar .sched{padding-top:17px}
.page-id-11 .callbar .number{margin-top:10px;padding:0;line-height:38.7692px}
.page-id-11 .service-band{padding:49px 0 50px}
.page-id-11 .service-band.plain{background:none}
.page-id-11 .services-white{background:#fff}
.page-id-11 .services-warranty{background:var(--green-alt);background-image:none}
/* Production wraps every services band in a full-bleed row padded 40px, then an
   offset 10/12 column, then a nested 9/3 row. Expressed against the viewport so
   the copy column tracks production at any width. */
.page-id-11 .service-row{align-items:start;grid-template-columns:9fr 3fr;width:calc((100% - 50px) * 5 / 6);margin-left:calc(25px + (100% - 50px) / 12);margin-right:0}
.page-id-11 .service-copy,.page-id-11 .service-media{padding:0 15px}
.page-id-11 .service-row+.service-row{margin-top:22px}
.page-id-11 .service-copy{padding:0 15px}
.page-id-11 .service-copy h2{margin:0}
.page-id-11 .service-copy p{margin:0}
.page-id-11 .service-media{display:block;min-height:0;text-align:center}
.page-id-11 .service-media img{display:inline-block;vertical-align:top;width:auto;max-width:100%;max-height:none;margin:0}
.page-id-11 .services-disposal .service-contact{margin-top:20px}
.page-id-11 .kmd-row{margin-top:49px}
.page-id-11 .kmd-row ul{margin:0 0 24px;padding:20px;list-style-position:inside}
.page-id-11 .kmd-row .service-media img{width:300px;max-width:none;height:92px}
.page-id-11 .efficiency>h3{letter-spacing:.2px}
.page-id-11 .savings{font-family:var(--body)}
.page-id-11 .article-links h3{letter-spacing:1px}
.page-id-11 .article-links a{color:var(--green)}
.page-id-11 .kmd-row .service-media .button{font:700 13px/39px var(--body);letter-spacing:1px}
.page-id-11 .service-contact{margin-top:0;text-align:center}
.page-id-11 .service-contact .button{padding:0 29px;border:2px solid var(--green);font:700 16px/47px var(--sans);letter-spacing:1px}

/* Production-measured Contact page alignment. */
/* Contact page, measured from production: 425px photo, form column at x502. */
/* 435px is production's measured height, but it is a FLOOR, not a fixed height:
   the Turnstile widget adds ~73px to the form column, and a hard height here
   pushed the submit button 21px under the green contact-info band below. */
.page-id-14 .contact-top{grid-template-columns:4fr 8fr;width:calc(100% + 30px);margin-left:-15px;min-height:435px;background:#fff url('/wp-content/uploads/2017/02/concrete-1.jpg') center/cover no-repeat}
.page-id-14 .contact-photo{background-image:url('/wp-content/uploads/2016/12/MtTam-1.jpg')}
/* Bottom padding was 0 when the 435px height left slack under the button. Now
   that content drives the height, it needs to match the 30px top padding. */
.page-id-14 .contact-form-panel{padding:30px 60px 30px 80px;background:none}
.page-id-14 .contact-form-panel h1{margin:0 0 20px;color:var(--green);font:400 28px/38.7692px var(--serif);letter-spacing:.2px}
/* Production floats two 47% columns with a 6% gutter. */
.page-id-14 .contact-form{grid-template-columns:47% 47%;gap:6%;justify-content:start}
.page-id-14 .contact-form label{display:block;margin:0 0 20px;color:var(--ink);font:400 14px/26px var(--sans)}
.page-id-14 .contact-form>div>label:first-child{font-family:var(--body)}
.page-id-14 .contact-form>div:last-child>label{margin-bottom:0}
.page-id-14 .contact-form input,.page-id-14 .contact-form textarea{display:block;width:100%;margin-top:5px;padding:15px;border:0;background:#fff;color:#818181;font:400 13px/17px Raleway,sans-serif}
.page-id-14 .contact-form input{height:47px}
.page-id-14 .contact-form textarea{height:200px;resize:vertical}
.page-id-14 .contact-form .button{min-width:106px;height:43px;margin-top:20px;padding:0 23px;border:2px solid var(--green);border-radius:4px;background:transparent;color:var(--green);font:700 13px/36px Raleway,sans-serif;letter-spacing:1px;text-align:left}
.page-id-14 .contact-info{height:auto;padding:20px 0;background:var(--green-alt) url('/wp-content/uploads/2017/02/mason-footer-1.png') center/cover no-repeat}
.page-id-14 .contact-info-grid{display:grid;grid-template-columns:4fr 8fr;grid-template-rows:auto auto 1fr;gap:0;width:calc(100% + 30px);max-width:none;height:auto;margin-left:-15px;padding:0}
.page-id-14 .contact-info-grid>div:first-child{display:contents}
.page-id-14 .contact-info-grid>div:first-child>p:first-child{grid-column:1;grid-row:1/4;padding:0 55px 10px 55px}
.page-id-14 .contact-info-grid>div:first-child>h2{grid-column:2;grid-row:1;padding:0 80px 0 80px}
.page-id-14 .contact-info-grid>div:first-child>p:last-child{grid-column:2;grid-row:2;padding:0 80px 0 80px}
.page-id-14 .contact-info-grid>div:last-child{grid-column:2;grid-row:3;padding:0 80px 0 80px}
.page-id-14 .contact-info h2{margin:0;color:#fff;font:400 28px/1.385 var(--serif)}
.page-id-14 .contact-info p{margin:0 0 10px;font-size:14px;line-height:26px}
.page-id-14 .contact-info h2{letter-spacing:.2px}
.page-id-14 .contact-info-grid>div:first-child>p:last-child{margin-bottom:0;padding-top:2px}
.page-id-14 .contact-info-grid>div:last-child{padding-top:7px}
.page-id-14 .contact-info-grid>div:last-child h2{margin-bottom:0}
.page-id-14 .contact-info .ph-line{display:block}
.page-id-14 .contact-info strong{font-size:18px;font-weight:700}
@media(max-width:850px){.page-id-14 .contact-top{grid-template-columns:1fr;height:auto;min-height:0}.page-id-14 .contact-form-panel{padding:38px 24px}.page-id-14 .contact-info{height:auto}.page-id-14 .contact-info-grid{display:block}.page-id-14 .contact-info-grid>div:first-child{display:block}.page-id-14 .contact-info-grid>div:first-child>p:first-child,.page-id-14 .contact-info-grid>div:first-child>h2,.page-id-14 .contact-info-grid>div:first-child>p:last-child,.page-id-14 .contact-info-grid>div:last-child{padding:15px 24px}}

/* Production-measured homepage feature alignment. */
.home .texture>.wrap{max-width:1148px}
.home .texture>.wrap.tri{max-width:none}
.home .texture.tri-band{padding:40px 0 60px}
.home .features{gap:80px 30px}
@media(max-width:850px){.home .texture>.wrap{max-width:var(--wrap)}.home .features{gap:82px 60px}}

/* Production-measured Water Heater vertical rhythm. */
.page-id-174 .heater-layout{grid-template-columns:6fr 4fr;width:calc((100% - 50px) * 5 / 6);margin-left:calc(25px + (100% - 50px) / 12);margin-right:0}
.page-id-174 .heater-layout ul{margin:0;padding-left:0;list-style-position:inside}
.page-id-174 .heater-layout>div>p{margin:0}

.page-id-174 .heater-layout h2:nth-of-type(2){margin-top:19px}
.page-id-174 .heater-layout p a{color:#424242;font-weight:700}
.page-id-174 .callbar+.service-band{padding:49px 0 39px}
/* Production puts the Contact Us button in its own band that overlaps the one above. */
.page-id-174 .heater-cta{height:141px;margin-top:-19px;padding:40px 0 0;text-align:center}
.page-id-174 .heater-cta .button{padding:0 29px;border:2px solid var(--green);font:700 16px/47px var(--sans);letter-spacing:1px}
@media(max-width:850px){.page-id-11 section.service-band:nth-of-type(3),.page-id-11 section.service-band:nth-of-type(4),.page-id-11 section.service-band:nth-of-type(5),.page-id-11 section.service-band:nth-of-type(6),.page-id-174 .callbar+.service-band{padding-bottom:50px}.page-id-174 .heater-layout{grid-template-columns:1fr}.page-id-174 .heater-layout h2:nth-of-type(2){margin-top:40px}}

/* Production warranty-row geometry shared by service pages. */
.warranty{display:grid;grid-template-columns:2fr 10fr;align-items:start;gap:0;width:calc((100% - 50px) * 5 / 6);max-width:none;margin-left:calc(25px + (100% - 50px) / 12);margin-right:0;padding:0}
.warranty img{width:110px;padding:0;justify-self:center}.warranty>div{padding:10px 15px 0}.warranty p{margin:0}
@media(max-width:850px){.warranty{grid-template-columns:1fr;width:auto;max-width:var(--wrap);padding:0 24px;text-align:center}.warranty>div{padding-right:0}.warranty img{justify-self:center}}

/* Production article card, metadata, comments, and sidebar rhythm. */
.single-legacy .breadcrumbs{margin-bottom:51px;font:700 13px/13px var(--body);text-transform:uppercase}
.single-legacy .breadcrumbs a{color:#565656}
.single-legacy .breadcrumbs span{color:#424242}
.single-legacy .post-layout article a{color:#424242}
.single-legacy .post-layout article h3{letter-spacing:1px;line-height:26.087px}
.single-legacy .post-sidebar input{border:0;background:transparent;color:#adadad}
.single-legacy .legacy-post-meta{margin-top:35px;color:var(--green);font-size:12px}
.single-legacy .legacy-comments{width:805px;padding:33px 0 0}
.single-legacy .legacy-comments h3{margin:0 0 24px;color:var(--green);font:600 18px/28.2857px var(--serif);letter-spacing:1px}
.single-legacy .legacy-comments p{font-size:14px}
@media(max-width:850px){.single-legacy .breadcrumbs{margin-bottom:28px}.single-legacy .legacy-comments{width:auto}}

/* Production uses unadorned text links throughout the visible site. */
a,a:visited,a:hover,a:focus{text-decoration:none!important}

/* Production About page image, copy, and partner-logo alignment. */
/* About intro, measured from production: 408px slider at x20, copy at x488. */
@media(min-width:851px){.page-id-7 .about-intro{height:auto;padding:0 20px;overflow:hidden}.page-id-7 .about-intro-grid{width:calc(100% + 30px);max-width:none;height:auto;margin-left:-15px;padding:0;grid-template-columns:4fr 8fr;gap:0;align-items:start}.page-id-7 .about-portrait{display:block;margin-top:-30px;padding:100px 0 0 15px}
.page-id-7 .about-slider{margin-bottom:60px}/* Stack the slides in one grid cell so the column takes the picture's height,
   the way flexslider sizes production's gallery. */
.page-id-7 .about-slider,.page-id-7 .about-slides{height:auto}
.page-id-7 .about-slides{display:grid}
.page-id-7 .about-slider .about-slide{position:static;grid-area:1/1}.page-id-7 .about-portrait img{width:100%;height:auto;max-height:none;object-fit:initial}.page-id-7 .about-copy{position:relative;padding:60px 60px 30px}.page-id-7 .about-copy h1{margin:0;color:#330;font:700 35px/43.75px var(--serif)}.page-id-7 .about-signature{display:grid;grid-template-columns:1fr 1fr;gap:0;width:calc(100% + 70px);margin-left:-35px}.page-id-7 .about-signature>p{padding:40px 15px 30px}
/* Production's mark is an inline image in a paragraph, so its column carries the
   40/30 padding plus about 8px of descent under the picture. */
.page-id-7 .about-signature>img{display:block;width:300px;max-width:100%;margin:40px 15px 38px}.page-id-7 .about-signature>p{margin:0}.page-id-7 .kamber-mark{margin:0}}
.page-id-7 .about-copy a{color:#424242}
.page-id-7 .about-copy p:nth-of-type(3){color:#330}

/* Recognition strip: a fixed-height gray band with four evenly spaced badges. */
.trust--about,.trust--contact,.trust--area{display:block;padding:0;background:url('/wp-content/uploads/2016/12/bg-gray-1.jpg') center/cover no-repeat}
.trust--about{height:auto;padding:25px 0 20px}
.trust--contact,.trust--area{height:auto;padding:25px 0 20px}
.trust--about .badges,.trust--contact .badges,.trust--area .badges{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;justify-items:stretch;gap:0;width:calc((100% + 30px) * 2 / 3);max-width:none;margin:0 0 0 calc((100% + 30px) * 14 / 75 - 15px);padding:0;text-align:center}.trust--area .badges>a{padding:0 15px}.trust--area .badges>a:first-child{padding:30px 15px 40px}.trust--area .badges img{display:block;max-width:100%;height:auto;margin:10px auto 20px}.trust--area .badges>a:first-child img{margin:0}
.trust--about .badges{width:772px}
.trust--contact .badges,
.trust--contact .badges>a:nth-child(2){margin-top:5px}
@media(max-width:850px){.trust--about,.trust--contact,.trust--area{height:auto;padding:35px 0}.trust--about .badges,.trust--contact .badges,.trust--area .badges{width:auto;grid-template-columns:1fr 1fr;gap:25px;padding:0 24px}}

/* About: team band sits on the page texture; video band on the concrete row. */
.about-team{padding:70px 0 50px}
.about-team .section-title{margin:0 0 97px;font:400 34px/47.0769px var(--serif)}
.about-team .team{display:grid;grid-template-columns:261px 261px;gap:30px;justify-content:center;text-align:center}
.about-team .team img{display:block;width:200px;height:300px;margin:10px auto 0;object-fit:cover}
.about-team .team h3{margin:0;padding:7px 0 0;color:var(--green);font:400 27px/26px var(--serif)}
.about-team .team p{margin:0;font-size:14px;line-height:26px}
.about-video{padding:60px 0 61px}
/* The video widget is half the column, centred, with its heading left-aligned. */
.about-video>.wrap{width:50%;max-width:none;margin:0 auto;padding:0}
.about-video .section-title{margin:0;text-align:left}
.about-video .video-profile{width:100%;max-width:none;margin:0;aspect-ratio:16/9}
@media(max-width:850px){.about-team{padding:45px 0 35px}.about-team .section-title{margin:0 0 40px}.about-team .team{grid-template-columns:1fr;gap:35px}.about-video{padding:40px 24px}.about-video>.wrap{width:auto}}
.footer-grid{min-height:387px}.footer-brand img{width:300px}
.footer-links{align-items:center;gap:8px}.footer-links a,.footer-links span{display:grid;place-items:center;width:42px;height:42px;color:var(--green);background:transparent;text-decoration:none;font:700 27px/1 Arial}.footer-links a:first-child,.footer-links span:last-child{border-radius:6px;background:var(--green);color:#fff;font-size:24px}.footer-links a:nth-child(2){font-size:35px}.footer-links a:nth-child(3){font-size:40px;font-weight:400}
.site-foot{border-top:0}.footer-grid{min-height:392px}
/* Footer columns, measured from production: 352 / 382 / 366 in an 1100 grid,
   under the same 5px green rule production draws above the footer. */
/* Production draws a 5px green rule above the footer on every page except
   Service Area, About and Contact. */
.site-foot{border-top:5px solid var(--green)}
.page-id-7 .site-foot,.page-id-9 .site-foot,.page-id-14 .site-foot{border-top:0}
.footer-grid{display:grid;grid-template-columns:352px 382px 366px;align-items:start;width:1100px;max-width:100%;min-height:0;margin:0 auto;padding:72px 0 52px;gap:0}
.footer-brand{padding-top:10px}
.footer-brand img{display:block;margin:0 auto}
.footer-links{justify-content:flex-start;padding:120px 0 0 115px}
.footer-contact{gap:0;padding:79px 0 0 24px}
.footer-contact>a:not(.footer-phone){margin-top:30px}
.footer-contact .footer-email{margin-top:10px}
.footer-contact .footer-legal{margin-top:1px}
@media(max-width:850px){.footer-grid{grid-template-columns:1fr;width:auto;padding:45px 24px}.footer-brand,.footer-links,.footer-contact{padding:0;text-align:center}.footer-links{justify-content:center;margin:25px 0}}
@font-face{font-family:FontAwesome;src:url('assets/fonts/fontawesome-webfont.woff2') format('woff2'),url('assets/fonts/fontawesome-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:block}.footer-links{gap:10px}.footer-links a{display:inline-block!important;width:auto!important;height:auto!important;background:none!important;color:#007a3d!important;font:normal 45px/1 FontAwesome!important}.mpi-fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased}.mpi-fa-facebook:before{content:"\f082"}.mpi-fa-yelp:before{content:"\f1e9"}.mpi-fa-diamond:before{content:"\f219"}.mpi-fa-google-plus:before{content:"\f0d4"}.ico-compass:before{content:"\f14e"}.ico-building:before{content:"\f1ad"}.ico-wrench:before{content:"\f0ad"}.ico-recycle:before{content:"\f1b8"}.ico-hourglass:before{content:"\f254"}.ico-check:before{content:"\f00c"}.ico-users:before{content:"\f0c0"}.ico-map-marker:before{content:"\f041"}
.single-legacy .post-layout{grid-template-columns:805px 275px;gap:15px;justify-content:start;padding-left:5px}.single-legacy .post-layout .post-main>article{width:805px;margin:0;padding:15px 25px 15px 15px;background:#fff}.single-legacy .post-sidebar{width:275px;padding:16px 20px 25px 40px}.single-legacy .post-featured{margin-bottom:0}.single-legacy .post-layout article>h2:first-of-type{margin:0}.single-legacy .post-layout article p{margin:0 0 22px}.single-legacy .post-layout article ol{margin:0;padding:0;list-style-position:outside}.single-legacy .post-layout article ol li{margin-left:21px;padding-left:4px}.single-legacy .wp-caption.alignright{float:right;width:310px;margin:0 0 20px 20px}.single-legacy .wp-caption img{display:block;width:300px;height:246px}.single-legacy .wp-caption-text{width:300px;margin:0!important;padding-top:6px;font-size:12px!important;line-height:18px!important}.single-legacy .style56{margin-bottom:22px!important}.single-legacy .style56 a{color:#424242}.post-search{position:relative}.post-search input{height:42px;padding:0 34px 0 10px;border:0!important;background:#fff}.post-search button{position:absolute;right:4px;top:0;height:42px;border:0;background:transparent;color:#aaa;font-size:18px}.single-legacy .legacy-post-meta a{color:var(--green)}
@media(max-width:850px){.single-legacy .post-layout{grid-template-columns:1fr}.single-legacy .post-layout .post-main>article{width:auto;margin-left:0;padding:15px}.single-legacy .post-sidebar{width:auto}.single-legacy .wp-caption.alignright{float:none;max-width:100%;margin:0 0 20px}.single-legacy .wp-caption img,.single-legacy .wp-caption-text{max-width:100%}}
.single-legacy .post-featured+h2{padding-top:16px}.single-legacy .post-layout article{color:#494949}.single-legacy .post-layout article>h2:first-of-type,.single-legacy .post-layout article a{color:#007a3d}.single-legacy .post-layout article ol li{width:100%;margin:0;padding:0;font-size:14px;line-height:26px}.single-legacy .wp-caption-text{width:310px;margin:0!important;padding:0;font-size:14px!important;line-height:26px!important}.single-legacy .post-layout article .legacy-post-meta{margin-bottom:18px;color:#007a3d}
.footbar{background:#007a3d}
.single-legacy .post-layout article{font-family:Helvetica,Arial,sans-serif}.single-legacy .post-layout article .style56 a{text-decoration:underline!important}.single-legacy .post-sidebar{font-family:Helvetica,Arial,sans-serif;color:#494949}.single-legacy .post-sidebar li a{color:#000;font-size:13px;font-weight:700;line-height:26px}
.about-slider{position:relative;display:block!important;height:590px;overflow:hidden}.about-slides{position:relative;width:100%;height:590px;overflow:hidden}.about-slider .about-slide{position:absolute;inset:0;z-index:1;width:100%;margin:0;opacity:0;transition:opacity .6s ease}.about-slider .about-slide.active{z-index:2;opacity:1}.page-id-7 .about-slider .about-slide img{display:block;width:100%;height:auto;max-height:none;object-fit:initial}.about-slider-prev,.about-slider-next{position:absolute;z-index:3;top:50%;width:42px;height:42px;padding:0;border:0;transform:translateY(-50%);cursor:pointer;font:46px/38px Arial,sans-serif}.about-slider-prev{left:15px;background:transparent;color:#fff}.about-slider-next{right:15px;border-radius:50%;background:#fff;color:#999}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px){.about-slider,.about-slides{height:auto;min-height:0;aspect-ratio:500/652}.page-id-7 .about-slider .about-slide img{height:auto}.about-slider-prev,.about-slider-next{top:40%}}
.about-slider-prev,.about-slider-next{border-radius:28px;background:transparent;color:#fff;font-size:0;line-height:42px}.about-slider-prev:before,.about-slider-next:before{display:inline-block;font:normal 22px/42px FontAwesome;-webkit-font-smoothing:antialiased}.about-slider-prev:before{content:"\f104"}.about-slider-next:before{content:"\f105"}.about-slider-prev:hover,.about-slider-next:hover{outline:0;background:rgba(255,255,255,.984);color:#8a8a8a}.about-slider-prev:focus-visible,.about-slider-next:focus-visible{background:transparent;color:#fff;outline:2px solid #fff;outline-offset:2px}
.page-id-7 .callbar .sched{padding-top:22px}
@media(max-width:560px){.page-id-7 .callbar{height:auto}.page-id-7 .callbar-in{display:flex;min-height:65px}}
.home .hero{min-height:854px;margin-top:-20px;padding:79px 0 80px;background-position:50% 50%}.home .hero-copy{width:calc(66.6667% - 10px);max-width:calc(100% - 40px);margin:0 auto}.home .hero h1{margin:0;color:#007a3d;font:700 70px/87.5px var(--display)}.home .hero h2{margin:9px 0 0;color:#330;letter-spacing:.2px;font:400 28px/38.7692px var(--serif)}.home .hero h2 .sep{color:var(--green-alt)}.site-head{position:relative;z-index:10}
/* Production's header sits in the same fixed 1100px column as the feature grid
   and the footer, with the logo pulled left and the menu pushed right. */
.head-in{width:1100px;max-width:calc(100% - 90px);margin:0 auto;padding:0}/* Production pulls the logo out of the 1100px column by a step that widens
   at 1400px: 0 below 1100, -60 from 1100, -120 from 1400. */
.brand{margin-left:0}
@media(min-width:1100px){.brand{margin-left:-60px}}
@media(min-width:1400px){.brand{margin-left:-120px}}.brand img{width:362px}
@media(max-width:850px){.home .hero{min-height:600px;margin-top:0;padding:60px 20px}.home .hero-copy{width:auto;max-width:none}.home .hero h1{font-size:48px;line-height:1.3}.home .hero h2{font-size:24px;line-height:1.4}.head-in{padding-left:18px;padding-right:18px}.brand{transform:none}.brand img{width:275px}}
@media(max-width:560px){.home .hero{min-height:460px;padding-top:35px}.home .hero h1{font-size:36px}.home .hero h2{font-size:18px}}
.menu{gap:0}.menu>a,.menu>div>a{display:block;height:100px;padding:0 20px;color:#262626;font-size:13px;font-weight:600;line-height:100px;letter-spacing:1px}.menu>a.is-current,.menu>.has-sub>a.is-current{color:#007a3d}#content{overflow-x:hidden}.home .hero{width:calc(100% + 30px);margin-left:-15px}
@media(max-width:850px){.menu{gap:0}.menu>a,.menu>div>a{height:auto;padding:9px;font-size:12px;font-weight:700;line-height:20.4px;letter-spacing:1.2px}.home .hero{width:auto;margin-left:0}}
.page-id-7 .about-copy p:first-of-type a{font-weight:700}

/* Keep all top-level navigation labels on the same baseline. */
/* Production floats the menu to the right edge of the 1100px column and lets it
   hang past that edge by a negative right margin that doubles at 1400px. Its
   left edge therefore follows the column, not a fraction of the viewport. */
@media(min-width:851px){.menu{margin-right:-80px}.menu>a,.menu>.has-sub>a{display:block;height:100px;padding-right:17px;padding-left:17px;font-family:Helvetica,Arial,sans-serif;line-height:100px;text-transform:uppercase}.menu>.has-sub{display:flex;align-items:center}}
@media(min-width:1400px){.menu{margin-right:-160px}}

/* Match the production background sequence on the water-efficiency page. */
.page-id-171 .callbar+.service-band{padding:49px 0 70px}
.page-id-171 .callbar+.service-band .service-row+.service-row{margin-top:23px}
.page-id-171 .callbar+.service-band .service-contact{margin-top:20px;text-align:center}
.page-id-171 .callbar+.service-band .button{padding:0 29px;border:2px solid var(--green);font:700 16px/47px var(--sans);letter-spacing:1px}

/* Match the production hot-water hero and product artwork geometry. */
@media(min-width:851px){.page-id-174 .water-hero{height:auto;min-height:0;grid-template-columns:5fr 7fr;width:calc(100% + 30px);margin-left:-15px}.page-id-174 .water-hero-photo{padding:0 15px}/* Production sets this photo inline inside a paragraph, so the line box adds
   about 7px of descent below it. That space sets the hero row height. */
.page-id-174 .water-hero-photo{padding:0 15px;font:14px/26px var(--sans)}
.page-id-174 .water-hero-photo img{display:inline;width:372px;height:auto;min-height:0}.page-id-174 .water-hero-copy{padding:30px 60px 0 15px}.page-id-174 .water-hero-copy h1{margin:0;font:700 50px/62.5px var(--display)}.page-id-174 .water-hero-copy p{margin:10px 0 0}.page-id-174 .water-hero-copy ul{margin:15px 0 10px;padding-left:29px}.page-id-174 .callbar{height:67px;margin-top:-10px;background:url('/wp-content/uploads/2017/02/mason-footer.png') center/cover no-repeat}.page-id-174 .callbar .callbar-in{height:67px;min-height:0;grid-template-columns:3fr 1fr 7fr 1fr}.page-id-174 .callbar .sched{grid-column:1}.page-id-174 .callbar .number{grid-column:3}.page-id-174 .callbar .sched{padding-top:22px}.page-id-174 .callbar .number{margin-top:10px;padding:0;line-height:38.7692px}.page-id-174 .heater-layout{position:relative}.page-id-174 .heater-products{position:static;display:block;padding:50px 15px 0;text-align:center}.page-id-174 .heater-products img{position:static;width:auto;max-width:none;max-height:none}.page-id-174 .heater-products img{display:block;width:288px;height:627px;margin:0 auto}.page-id-174 .heater-float{float:right;width:234px;height:300px;margin:0 0 0 20px}}

/* Match the production sewer-page split without overlapping the callbar. */
@media(min-width:851px){.page-id-176 #content{overflow-x:hidden}.page-id-176 .inner-split{height:auto;min-height:0;background:#fff}.page-id-176 .inner-split-grid{width:calc(100% + 30px);margin-left:-15px;grid-template-columns:33.333333% 66.666667%}.page-id-176 .inner-split-grid>img{width:395px;height:596px;margin:0 0 0 15px;object-fit:contain}.page-id-176 .inner-split-grid>div{width:75%}.page-id-176 .inner-split h1{font-family:Arial,sans-serif}}

/* Production groups Tankless Water Heaters and Recirculating Pumps on one texture. */
.page-id-11 .services-white .service-contact,.page-id-11 .services-warranty .service-contact{display:none}

/* Match the production savings cards and Kamber Mason section. */
@media(min-width:851px){.page-id-11 .efficiency{width:calc((100% - 50px) * 5 / 6);max-width:none;margin-left:calc(25px + (100% - 50px) / 12);margin-right:0;padding:0 15px;text-align:left}.page-id-11 .efficiency>h2{margin-bottom:0}.page-id-11 .efficiency>h3{margin:0 0 10px;font:400 28px/38.7692px var(--serif);color:var(--green)}.page-id-11 .savings{display:block;margin:0;padding:0 0 0 20px;font:14px/26px helvetica,Arial,sans-serif;list-style-position:inside}.page-id-11 .savings span{display:list-item}.page-id-11 .article-links{grid-template-columns:repeat(3,1fr);gap:0;margin-top:20px}.page-id-11 .article-links article{margin:0 15px;padding:20px;background:url('/wp-content/uploads/2017/02/concrete-1.jpg') repeat;text-align:left}.page-id-11 .article-links h3{margin:0;color:var(--green);font:400 20px/26.087px var(--serif)}.page-id-11 .article-links p{margin:0;font-size:14px;line-height:26px}.page-id-11 .article-links a{font-weight:700;text-decoration:none}.page-id-11 .kmd-row{position:relative;grid-template-columns:8fr 4fr}.page-id-11 .kmd-row .service-copy{grid-column:1;grid-row:1;padding:0 45px}.page-id-11 .kmd-row .service-media{grid-column:2;grid-row:1;display:flex;min-height:300px;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:10px}.page-id-11 .kmd-row .service-media img{width:300px;height:92px;max-height:none}.page-id-11 .kmd-row .service-media .button{margin-top:39px}}
@media(min-width:851px){.page-id-11 .services-white{padding:49px 0 130px}.page-id-11 .article-links{margin-right:-15px;margin-left:-15px;align-items:start}.page-id-11 .kmd-row{align-items:start}.page-id-11 .kmd-row .service-copy{padding-right:45px;padding-left:45px}.page-id-11 .kmd-row .service-media{align-items:stretch}.page-id-11 .kmd-row .service-media img{margin:0 auto}.page-id-11 .kmd-row .service-media .button{display:grid;align-self:flex-start;width:167px;height:43px;margin-top:52px;margin-left:50px;padding:0;place-items:center}}

/* Match the production header's compact sticky state. */
.site-head{position:sticky;top:0;z-index:110;transition:height .3s ease}
@media(min-width:851px){.site-head.is-sticky{height:86px}.site-head.is-sticky .brand img{width:281.40625px}.site-head.is-sticky .menu>a,.site-head.is-sticky .menu>.has-sub>a{height:80px;line-height:80px}}
body.admin-bar .site-head{top:32px}
@media(max-width:782px){body.admin-bar .site-head{top:46px}}
.menu>a.is-current,.menu>.has-sub>a.is-current{color:#007a3d}

/* Match the production blog archive controls and metadata. */
.blog-copy .read-more{display:inline-grid;width:120.34375px;height:34px;padding:0;background:#007a3d;color:#fff;font:700 12px/30px Helvetica,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;place-items:center}
.blog-copy .post-meta{margin-top:0;color:#007a3d;font:500 14px/26px var(--body)}
.blog .blog-copy h2{margin:0 0 -3px}
.blog .blog-copy p{margin:0}
.blog .blog-copy .read-more{margin-top:34px}
.blog-copy .post-meta a{color:#007a3d;text-decoration:none}
.blog-copy .archive-like{display:inline-block;line-height:14px}
.single-legacy .post-layout article>h2:first-of-type{padding-top:26px}
.single-legacy .post-layout article p>a{text-decoration:underline!important}

/* Article body links and heading rhythm, measured from production. */
.single-legacy .post-layout article a{color:#424242}

.single-legacy .post-layout article h2{margin:0;color:var(--green);font:400 28px/38.7692px var(--serif);letter-spacing:.2px}

/* The parity rules above pin desktop widths to production's pixel geometry.
   Below the theme's breakpoint the page goes back to a single fluid column. */
@media(max-width:850px){
	.callbar,.page-id-7 .callbar,.page-id-9 .callbar,.page-id-11 .callbar,.page-id-171 .callbar,.page-id-174 .callbar,.page-id-176 .callbar{height:auto;margin-top:0}
	.callbar-in,.page-id-7 .callbar-in,.page-id-9 .callbar-in,.page-id-11 .callbar-in,.page-id-171 .callbar-in,.page-id-174 .callbar-in,.page-id-176 .callbar-in{display:grid;grid-template-columns:1fr;width:100%;height:auto;min-height:0;margin:0;padding:14px 24px;gap:6px}
	.callbar .sched,.callbar .number{margin:0;padding:0;text-align:center}
	.callbar .number{font-size:34px;line-height:1.2}
	.page-id-11 .legacy-intro-grid,.page-id-171 .service-row,.page-id-176 .service-row,.page-id-11 .service-row,.page-id-176 .sewer-white .service-row,.page-id-176 .sewer-white .service-row+.service-row,.page-id-11 .kmd-row{grid-template-columns:1fr;width:auto;padding:0}
	.page-id-11 .legacy-intro{height:auto;min-height:0}
	.page-id-11 .legacy-intro-copy,.page-id-171 .conserve-copy{padding:32px 24px}
	.page-id-171 .conserve-hero{height:auto;min-height:0;margin-top:0}
	.page-id-171 .conserve-copy h1,.page-id-11 .legacy-intro h1,.page-id-176 .inner-split h1{width:auto;font-size:34px;line-height:1.2}
	.page-id-11 .service-copy,.page-id-171 .service-row>div:first-child,.page-id-176 .service-row>div:first-child,.page-id-176 .sewer-white .service-row>div:first-child,.page-id-11 .kmd-row .service-copy{padding:0 24px}
	.page-id-176 .sewer-jetting>.wrap{width:auto;padding:0 24px}
	.page-id-14 .contact-form{grid-template-columns:1fr;gap:0}
	.page-id-14 .contact-form input,.page-id-14 .contact-form textarea{width:100%}
	.page-id-14 .contact-form-panel{padding:32px 24px}
	.page-id-14 .contact-info-grid>div:first-child>p:first-child,.page-id-14 .contact-info-grid>div:first-child>h2,.page-id-14 .contact-info-grid>div:first-child>p:last-child,.page-id-14 .contact-info-grid>div:last-child{padding:0 24px}
	.page-id-14 .contact-info{height:auto;padding:32px 0}
	.page-id-7 .about-intro{height:auto}
	.service-media img,.page-id-11 .service-media img,.page-id-171 .service-media img,.page-id-176 .service-media img{max-width:100%;height:auto}
	.single-legacy .post-layout{grid-template-columns:1fr;padding:0}
	.single-legacy .post-layout .post-main>article,.single-legacy .post-sidebar,.single-legacy .legacy-comments{width:auto}
	.tri,.green>.wrap,.home .texture>.wrap.tri{max-width:var(--wrap)}
}

/* Standard WordPress image alignment inside post bodies. */
.single-legacy .post-layout article .alignright{float:right;margin:0 0 20px 20px}
.single-legacy .post-layout article .alignleft{float:left;margin:0 20px 20px 0}
.single-legacy .post-layout article .aligncenter{display:block;margin:0 auto 20px}
.single-legacy .post-layout article .alignnone{margin:0 0 20px}
.single-legacy .legacy-post-meta{color:var(--green);font:500 14px/26px var(--body)}
.single-legacy .post-layout article .legacy-post-meta{margin:0 0 18px}

/* Production puts the label in a span with its own normal leading. */
.menu>a>span,.menu>.has-sub>a>span{line-height:normal}


/* The green call bar is split 6/6 on the front page but 5/7 on every inner page,
   where the number also sits in an h2 and so picks up its .2px tracking. */
body:not(.home) .callbar-in{grid-template-columns:5fr 7fr}
body:not(.home) .callbar .number{text-align:left;letter-spacing:.2px}

/* Only the first services band pads its text column by a further 20px. */
.page-id-11 .service-band.texture .service-copy{padding:0 35px}

/* Production right-aligns only the garbage-disposal photo in its column. */
.page-id-11 .services-disposal .service-media{text-align:right}

/* The disposal band pads its copy 30px on the right only. */
.page-id-11 .services-disposal .service-copy{padding:0 45px 0 15px}

/* Sewer page splits its call bar 4/8. */
.page-id-176 .callbar .callbar-in{grid-template-columns:4fr 8fr}

/* The video-inspection copy is padded 40px on the right, 20px on the left. */
.page-id-176 .sewer-white .service-row+.service-row>div:first-child{padding:0 55px 0 35px}

/* The clogged-drain copy column carries a little space under its text column. */
.page-id-176 .sewer-white>.service-row:first-child>div:first-child{padding-bottom:8px}

/* The service-area call bar splits 6/6, like the front page. */
.page-id-9 .callbar .callbar-in{grid-template-columns:6fr 6fr}

/* The city list is measured from the viewport, so its wrapper must not be the
   narrower centred column the rest of the theme uses. */
.page-id-9 .area-hero+.service-band>.wrap{width:100%;max-width:none;margin:0;padding:0}

/* The about call bar splits 6/6 and its number keeps the plain 700 weight. */
.page-id-7 .callbar .callbar-in{grid-template-columns:6fr 6fr}
body.page-id-7 .callbar .number{font-weight:700;letter-spacing:0;text-align:right}
/* Recognition strip: four sixths of the offset 10-column. */
.trust--about .badges{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:0;
width:calc((100% + 30px) * 5 / 9);max-width:none;
margin:0 0 0 calc((100% + 30px) * 0.2388889 - 15px);padding:0;text-align:center}
.trust--about .badges>a{padding:0 15px}
.trust--about .badges>a:first-child{padding:30px 15px 0}
.trust--about .badges img{display:block;max-width:100%;height:auto;margin:10px auto 0}
.trust--about .badges>a:nth-child(3) img{margin-bottom:20px}
.trust--about .badges>a:first-child img{margin:0}

/* The team block is two twelfths in from an offset 8-column, and its heading
   sits in a text column padded 70/30 with 7px of its own. */
.page-id-7 .about-team .section-title{padding-top:7px;margin:0 0 81px}
.page-id-7 .about-team .team{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
width:calc((100% + 30px) * 4 / 9);max-width:none;
margin:0 0 0 calc((100% + 30px) * 5 / 18 - 15px)}
.page-id-7 .about-team .team>article{padding:0 15px}

/* The team row is measured from the viewport, not the narrower centred column. */
.page-id-7 .about-team>.wrap{width:100%;max-width:none;margin:0;padding:0}

/* Production separates the meta items with a small square glyph in a span padded
   4px left and 7px right, and keeps the like count as one inline-block. */
.blog-copy .post-meta .dots{display:inline-block;padding:0 7px 0 4px}
.blog-copy .post-meta .dots::before{content:"";display:inline-block;width:3px;height:3px;
background:currentColor;vertical-align:2px}
.blog-copy .post-meta .blog-like{display:inline-block}

/* Contact recognition strip: same six-twelfth row, its own column paddings. */
.trust--contact .badges>a{padding:0 15px}
.trust--contact .badges>a:first-child{padding:30px 15px 40px}
.trust--contact .badges>a:nth-child(4){padding:0 15px 30px}
.trust--contact .badges img{display:block;max-width:100%;height:auto;margin:10px auto 0}
.trust--contact .badges>a:nth-child(3) img{margin-bottom:20px}
.trust--contact .badges>a:first-child img{margin:0}

/* Post sidebar: production stacks widgets 42px apart, each heading 14px above
   its list, and pads every list item 7px inside a 27px line. */
.single-legacy .post-sidebar h5{margin:0 0 14px}
.single-legacy .post-sidebar ul{margin:0 0 42px;padding:0}
.single-legacy .post-sidebar li{margin:0;padding:7px 0;line-height:27px}
.single-legacy .post-sidebar li a{line-height:26px}
/* Production sets the field and its submit inline, so the widget is a line box
   about 8px taller than the field before the 42px gap to the next heading. */
.single-legacy .post-search{display:flex;position:relative;margin:0 0 50px;font:14px/26px var(--body)}
.single-legacy .post-search input[type=submit]{display:block;width:37px;height:37px;
padding:0 8.59375px;border:0;background:transparent;color:#b9b9b9;
font:400 13.3333px/37px FontAwesome,sans-serif}
/* The crumbs are right-aligned inside a box that shrinks to their own width. */
.single-legacy .breadcrumbs{width:max-content;text-align:right}
.single-legacy .breadcrumbs .delimiter{color:#565656}
/* The post meta carries the same pieces as the archive card. */
.single-legacy .post-layout article .legacy-post-meta a{color:var(--green);text-decoration:none!important}
.single-legacy .legacy-post-meta .dots{display:inline-block;padding:0 7px 0 4px}
.single-legacy .legacy-post-meta .dots::before{content:"";display:inline-block;width:3px;height:3px;
background:currentColor;vertical-align:2px}
.single-legacy .legacy-post-meta .blog-like{display:inline-block}
.single-legacy .legacy-post-meta .archive-like{display:inline-block;line-height:14px}
.single-legacy .legacy-post-meta .archive-like span{padding-left:4px}

.single-legacy .post-search input[type=text]{display:block;width:176px;height:37px;padding:2px 8.59375px;color:#adadad;font:400 13.3333px/normal helvetica,Arial,sans-serif}

/* Production frames the comment block with 28px above and 38px below, and sets
   its heading 20px clear of the notice. */
.single-legacy .legacy-comments{width:805px;margin-left:-5px;padding:31px 0 38px}
.single-legacy .legacy-comments h3{margin:0 0 20px}
.single-legacy .legacy-comments p{margin:0}

/* The post meta always starts below the floated figures, never beside them. */
.single-legacy .legacy-post-meta{clear:both}

/* ---------------------------------------------------------------------------
   Small screens. Production collapses every Visual Composer column to the full
   row width and stacks them, keeps each column's 15px side padding, and steps
   its type down. The rules below express that layout; they are last in the file
   so they settle the earlier, hand-fitted mobile work.
   --------------------------------------------------------------------------- */
@media(max-width:850px){
  .site-head{height:121px;border-bottom:6px solid var(--green)}
  .head-in{position:relative;display:block;width:100%;max-width:none;height:121px;margin:0;padding:0}
  .brand{position:absolute;left:50%;top:10px;margin:0;transform:translateX(-50%)}
  .brand img{width:322px;height:80px}
  .toggle{position:absolute;left:15px;top:65px;width:19px;height:50px;padding:0;font-size:0}
  .toggle::before{content:"\f0c9";font:normal 19px/50px FontAwesome;color:#303030}
  .menu{top:121px}
}

/* Production's small-screen type scale. */
@media(max-width:850px){
  .home .hero h1{font:700 26px/32.5px var(--display)}
  .home .hero h2{font-size:16px;line-height:22.2px}
  .callbar .number{font-size:35px;font-weight:700;line-height:26px}
  .section-title{font-size:24px;line-height:33.2px}
  .feature h3{font-size:18px;line-height:23.5px}
  .green h2,.tri h2{font-size:24px;line-height:33.2px}
  .footer-phone{font-size:30px}
  .footbar{height:55px;margin-top:0}
  .footbar span{display:block;padding-top:19px;line-height:35px}
}

/* Front page, small screens. Every column is the full row width and stacks. */
@media(max-width:850px){
  .brand{width:322px;margin-left:-161px;transform:none}
  .brand img{width:322px;height:80px}

  .home .hero{min-height:0;width:auto;margin:-20px 0 0;padding:70px 0 80px}
  .home .hero-copy{width:calc(100% + 30px);max-width:none;margin:0 0 0 -15px;padding:11px 15px 0}
  .home .hero h1{margin:0;padding:10px;background:rgba(245,245,245,.7)}
  .home .hero h2{margin:19px 0 22px}

  .home .callbar-in{display:block;width:calc(100% + 30px);min-height:0;margin-left:-15px;padding:0}
  .home .callbar-in>a{display:block;padding:0 15px}
  .home .callbar .sched{padding:15px 15px 10.09px}
  .home .callbar .number{width:auto;margin:0;padding:15px 15px 11px;transform:none;text-align:center}

  .home .trust{padding:60px 0 0}
  .home .badges{position:static;display:block;height:auto;padding:0}
  .home .badges>a{position:static;display:block;text-align:center}
  .home .badges>a:nth-child(1){margin-top:1px;padding:25px 15px 25px 32px}
  .home .badges>a:nth-child(2){padding:15px 15px 8px}
  .home .badges>a:nth-child(3){padding:10px 15px 56px}
  .home .badges>a:nth-child(4){padding:10px 15px 0}
  .home .badges img{display:inline-block;max-width:none}
  .home .badges>a:nth-child(1) img{width:171px;height:83px}
  .home .badges>a:nth-child(2) img{width:120px;height:128px}
  .home .badges>a:nth-child(3) img{width:162px;height:116px}
  .home .badges>a:nth-child(4) img{width:120px;height:120px}
  .home .quote-set{margin:0}
  .home .quote{width:auto;max-width:none;margin:0;padding:60px 45px}

  .home .texture>.wrap{width:100%;max-width:none;padding:0}
  .home .section-title{margin:0}
  .home .features{grid-template-columns:1fr;gap:0}
  .home .feature{width:330px;margin:0 auto;padding:20px 15px 17px;text-align:center}
  .home .feature:nth-child(1),.home .feature:nth-child(4){margin-top:60px}
}

@media(max-width:850px){
  .home .green{padding:50px 0}
  .home .green>.wrap{width:calc(100% + 30px);max-width:none;margin-left:-15px;padding:0}
  .home .green-grid{grid-template-columns:1fr;gap:0}
  .home .green-grid>div{grid-column:auto;padding:0 35px}
  .home .green-grid>div:first-child{padding-top:20px}
  .home .green-grid>div:last-child{padding:0 15px 0 35px}
  .home .green-grid>div:last-child h2{margin:20px 0 10px}
  .home .green h2{margin:10px 0}
  .home .video-row{display:block;margin:0;padding:15px 0 0}
  .home .video-row img{float:left;width:300px;margin:0}
  .home .video-row span{margin:0}
  .home .promise{width:auto;max-width:none;margin:0;padding:43px 45px 43px}

  .home .tri-band{padding:40px 0 60px}
  .home .tri-band>.tri{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);max-width:none;margin:0 -15px;padding:0}
  .home .tri>article{padding:0 35px}
  .home .tri>article:nth-child(2) ul{margin-top:20px}
}

/* Footer, small screens: the three columns stack inside the same 72/52 band. */
@media(max-width:850px){
  .site-foot .footer-grid{grid-template-columns:1fr;gap:0;width:100%;max-width:none;margin:0;padding:72px 15px 52px}
  .footer-brand{margin:0 0 50px;padding:10px 0 0;text-align:center}
  .footer-links{margin:0 0 25px;padding:146px 0 5px;justify-content:center}
  .footer-links{gap:0}
  .site-foot .footer-links a{width:49px;font-size:16px;line-height:16px;text-align:center}
  .footer-links a:nth-child(3){width:61px}
  .footer-links i{font-size:16px;line-height:16px}
  .footer-contact{margin:0;padding:52px 0 25px}
}

/* Posts, small screens: one 300px column inside a 45px gutter. */
@media(max-width:850px){
  .single-legacy{padding:15px 0 0}
  .single-legacy>.wrap{width:100%;max-width:none;margin:0;padding:0 45px}
  .single-legacy .breadcrumbs{width:auto;margin:0 0 15px}
  .single-legacy .post-layout{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  .single-legacy .post-layout>*{min-width:0}
  .single-legacy .post-layout .post-main>article{width:auto;margin:0;padding:20px}
  /* Production lets a captioned figure keep its own width and hang past the column. */
  .single-legacy .post-main>article .wp-caption,.single-legacy .post-main>article .wp-caption img{max-width:none}
  /* Production drops the comment-count heading on small screens. */
  .single-legacy .legacy-comments{width:auto;margin:0 0 79px;padding:28px 0 38px}
  .single-legacy .legacy-comments h3{display:none}
  .single-legacy .post-sidebar{width:auto;padding:20px}
  .single-legacy .post-search input[type=text]{flex:1;width:auto;margin-right:10px}
  .single-legacy .post-layout article h2,.single-legacy .post-layout .post-main>article>h2{font-size:24px;line-height:33.2px}
  .single-legacy .post-layout article h3{font-size:18px;line-height:23.5px}
}

/* Blog archive, small screens: one 300px card column inside a 45px gutter. */
@media(max-width:850px){
  .blog-page .blog-list{padding:0}
  .blog-page .blog-list>.wrap{width:100%;max-width:none;margin:0;padding:0 45px}
  .blog-page .blog-card{display:block;width:auto;margin:0 0 40px;padding:0}
  .blog-page .blog-image img{display:block;width:100%;height:auto}
  .blog-page .blog-copy{padding:23px 23px 41px}
  .blog-page .blog-copy h2{margin:0 0 4px;font-size:28px;line-height:33.2px}
  .blog-page .blog-copy .read-more{margin-top:30px}
}

/* Service area, small screens. */
@media(max-width:850px){
  .page-id-9 .area-hero{height:auto;min-height:0;margin-top:-70px;padding:170px 0 80px}
  .page-id-9 .area-title{position:static;left:auto;top:auto;right:auto;bottom:auto;width:auto;
  margin:0;padding:160px 15px 80px 40px;background:none}
  .page-id-9 .area-title h1{font-size:35px;line-height:43.8px}
  .page-id-9 .area-title p{font-size:24px;line-height:33.2px}

  .page-id-9 .area-hero+.service-band{height:auto;padding:50px 40px}
  .page-id-9 .area-hero+.service-band>.wrap{width:100%;max-width:none;margin:0;padding:0}
  .page-id-9 .area-hero+.service-band h2{font-size:24px;line-height:33.2px}
  .page-id-9 .area-list{grid-template-columns:1fr;grid-template-rows:none;gap:0;
  width:auto;max-width:none;margin:20px 0 0;padding:0}
  .page-id-9 .area-list span{grid-column:auto!important;grid-row:auto!important;padding:0}
  .page-id-9 .callbar{height:auto;margin:0}
  .page-id-9 .callbar .callbar-in{display:block;width:calc(100% + 30px);height:auto;min-height:0;
  margin-left:-15px;padding:0}
  .page-id-9 .callbar .sched{display:block;padding:17px 15px 0;text-align:center}
  .page-id-9 .callbar .callbar-in .number{display:block;width:max-content;margin:0 auto;padding:7px 15px 3px;
  transform:none;text-align:left;font-weight:400;line-height:33.2px}

  .trust--area,.page-id-9 .trust--area{height:auto;padding:26px 0 20px}
  .trust--area .badges{grid-template-columns:1fr;gap:0;width:auto;max-width:none;margin:0;padding:0}
  .trust--area .badges>a{padding:0 15px;text-align:center}
  .trust--area .badges>a:nth-child(1){padding:30px 15px 40px;text-align:left;padding-left:117.59px}
  .trust--area .badges>a:nth-child(2){padding:0 15px}
  .trust--area .badges>a:nth-child(3){padding:0 15px}
  .trust--area .badges>a:nth-child(4){padding:0 15px}
  .trust--area .badges img{display:block;max-width:none;height:auto;margin:10px auto 20px}
  .trust--area .badges>a:nth-child(1) img{width:171px;height:83px;margin:0}
  .trust--area .badges>a:nth-child(2) img{width:120px;height:128px;margin:10px auto 0}
  .trust--area .badges>a:nth-child(3) img{width:266px;height:190px}
  .trust--area .badges>a:nth-child(4) img{width:110px;height:110px}
}

/* Contact, small screens. */
@media(max-width:850px){
  .page-id-14 .contact-top{grid-template-columns:1fr;width:calc(100% + 30px);max-width:none;
  margin-left:-15px;height:auto;min-height:0}
  .page-id-14 .contact-photo{min-height:435px;padding:35px 15px 0}
  .page-id-14 .contact-form-panel{padding:30px 60px 30px 80px}
  .page-id-14 .contact-form-panel h1{font-size:24px;line-height:33.2px}
  .page-id-14 .contact-form{grid-template-columns:47% 47%;gap:6%}
  .page-id-14 .contact-form input,.page-id-14 .contact-form textarea{width:100%}

  .page-id-14 .contact-info{height:auto;padding:20px 0}
  .page-id-14 .contact-info-grid{display:block;width:calc(100% + 30px);max-width:none;
  margin-left:-15px;height:auto;padding:0}
  .page-id-14 .contact-info-grid>div:first-child{display:contents}
  .page-id-14 .contact-info-grid>div:first-child>p:first-child{padding:0 55px 0 55px}
  .page-id-14 .contact-info-grid>div:first-child>h2,
  .page-id-14 .contact-info-grid>div:first-child>p:last-child{padding:0 75px 0 80px}
  .page-id-14 .contact-info-grid>div:last-child{padding:10px 70px 10px 80px}
  .page-id-14 .contact-info h2{font-size:24px;line-height:33.2px}

  .trust--contact{height:auto;padding:16px 0 20px}
  .trust--contact .badges{grid-template-columns:1fr;gap:0;width:auto;max-width:none;margin:0;padding:0}
  .trust--contact .badges>a{padding:0 15px;text-align:center}
  .trust--contact .badges>a:nth-child(1){padding:30px 15px 40px 117.59px;text-align:left;margin-top:0}
  .trust--contact .badges>a:nth-child(2){padding:0 15px 7px}
  .trust--contact .badges>a:nth-child(4){padding:0 15px 30px}
  .trust--contact .badges img{display:block;max-width:none;height:auto;margin:10px auto 0}
  .trust--contact .badges>a:nth-child(1) img{width:171px;height:83px;margin:0}
  .trust--contact .badges>a:nth-child(2) img{width:120px;height:128px}
  .trust--contact .badges>a:nth-child(3) img{width:266px;height:190px;margin:10px auto 20px}
  .trust--contact .badges>a:nth-child(4) img{width:120px;height:120px}
}

/* Water conservation, small screens. */
@media(max-width:850px){
  .page-id-171 .conserve-hero{height:auto;min-height:0;margin-top:-10px;padding:0 40px 147.33px 0;
  background-position:center;background-size:cover}
  .page-id-171 .conserve-hero>.wrap{width:100%;max-width:none;margin:0;padding:0}
  .page-id-171 .conserve-copy{width:auto;max-width:none;margin:0;padding:51px 15px 20px 20px}
  .page-id-171 .conserve-copy h1{width:auto;font-size:35px;line-height:43.8px}

  .page-id-171 .callbar{position:relative;height:147.33px;margin-top:-147.33px;padding:20px 0 0;
  background:transparent}
  .page-id-171 .callbar .callbar-in{display:block;width:380px;max-width:none;height:auto;min-height:0;
  margin-left:-15px;padding:0}
  .page-id-171 .callbar .sched{display:block;padding:12px 0 0 40px;text-align:center}
  .page-id-171 .callbar .callbar-in .number{display:block;width:max-content;margin:0 auto;
  padding:19px 15px 0 30px;transform:none;text-align:left;font-weight:400;line-height:33.2px}

  .page-id-171 .callbar+.service-band{padding:50px 40px 70px}
  .page-id-171 .service-row{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);max-width:none;
  margin-left:-15px;margin-right:0;padding:0}
  .page-id-171 .service-row>div,.page-id-171 .service-row>div:first-child{padding:0 15px}
  .page-id-171 .service-band h2{font-size:24px;line-height:33.2px}

  .page-id-171 .service-band.divider{padding:50px 40px}
  .page-id-171 .warranty{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);max-width:none;
  margin-left:-15px;margin-right:0;padding:0;text-align:left}
  .page-id-171 .warranty>div{padding:10px 15px 0}
  .page-id-171 .warranty img{justify-self:center;padding:0}
  .page-id-171 .callbar+.service-band .button{line-height:42px}
}

/* Hot water heaters, small screens. */
@media(max-width:850px){
  .page-id-174 .water-hero{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);max-width:none;
  margin-left:-15px;height:auto;min-height:0;padding:30px 0 0}
  .page-id-174 .water-hero-photo{padding:0 15px}
  .page-id-174 .water-hero-photo img{width:372px;max-width:100%;height:auto;min-height:0;max-height:none}
  .page-id-174 .water-hero-copy{padding:30px 60px 10px 15px}
  .page-id-174 .water-hero-copy h1{width:auto;margin:0;font:700 35px/43.8px var(--display)}
  .page-id-174 .water-hero-copy p{margin:10px 0 0}
  .page-id-174 .water-hero-copy ul{margin:15px 0 20px 10px;padding:0;list-style-position:inside}

  .page-id-174 .callbar{height:auto;margin:-5px 0 33px;padding:10px 0 5px;background:none}
  .page-id-174 .callbar .callbar-in{display:block;width:calc(100% + 30px);max-width:none;height:auto;
  min-height:0;margin-left:-15px;padding:0}
  .page-id-174 .callbar .sched{display:block;padding:12px 15px 5px;text-align:center}
  .page-id-174 .callbar .callbar-in .number{display:block;width:auto;margin:0;
  padding:13px 15px 27px;transform:none;text-align:center;font-size:55px;font-weight:400;line-height:47.2px}
  .page-id-174 .callbar .number span{text-align:left;line-height:33.2px}

  .page-id-174 .callbar+.service-band{padding:50px 40px 40px}
  .page-id-174 .heater-layout{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);max-width:none;
  margin-left:-15px;margin-right:0;padding:0}
  .page-id-174 .heater-layout>div:first-child{padding:0 15px}
  .page-id-174 .heater-layout h2{font-size:24px;line-height:33.2px}
  .page-id-174 .heater-products{padding:50px 15px 0;text-align:center}
  .page-id-174 .heater-products img{max-width:none;max-height:none}
  .page-id-174 .heater-float{float:right;clear:both;width:234px;max-width:100%;margin:0 0 0 20px}
  .page-id-174 .heater-layout h2:nth-of-type(2){margin-top:20px}

  .page-id-174 .heater-cta{height:auto;margin-top:-20px;padding:40px 40px 38px}
  .page-id-174 .service-band.divider{padding:50px 40px}
  .page-id-174 .warranty{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);max-width:none;
  margin-left:-15px;margin-right:0;padding:0;text-align:left}
  .page-id-174 .warranty>div{padding:10px 15px 0}
  .page-id-174 .warranty h2{font-size:24px;line-height:33.2px}
  .page-id-174 .heater-cta .button{line-height:42px}
  .page-id-174 .warranty img{justify-self:center;padding:0}
}

/* Sewer and drain cleaning, small screens. */
@media(max-width:850px){
  .page-id-176 .inner-split{height:auto;min-height:0;padding:30px 0;background:#fff}
  .page-id-176 .inner-split-grid{grid-template-columns:1fr;gap:0;width:100%;max-width:none;
  margin:0;padding:0}
  .page-id-176 .inner-split-grid>img{width:100%;max-width:none;height:auto;max-height:none;
  margin:0;object-fit:contain}
  .page-id-176 .inner-split-grid>div{width:auto;padding:50px 0 0}
  .page-id-176 .inner-split h1{width:auto;font:700 35px/43.75px var(--display)}
  .page-id-176 .inner-split p{margin:0}
  .page-id-176 .inner-split ul{margin:15px 0 32px -5px;padding-left:29px}

  .page-id-176 .callbar{height:auto;margin:0;padding:30px 0}
  .page-id-176 .callbar .callbar-in{display:block;width:100%;max-width:none;height:auto;
  min-height:0;margin:0;padding:10px 0 20px;text-align:center;
  font:400 24px/33.2308px "Times New Roman",sans-serif}
  .page-id-176 .callbar .sched{display:block;margin:7px 0 10px;padding:0}
  .page-id-176 .callbar .callbar-in .number{display:inline;width:auto;margin:0;padding:0;
  transform:none;text-align:left;font-size:55px;font-weight:400;line-height:33.2308px}

  .page-id-176 .sewer-main{padding:51px 0}
  .page-id-176 .service-row{grid-template-columns:1fr;gap:0;width:calc(100% - 50px);max-width:none;
  margin-left:25px;margin-right:0;padding:0}
  .page-id-176 .service-row>div,
  .page-id-176 .service-row>div:first-child{grid-row:auto;grid-column:auto;padding:0 15px}
  .page-id-176 .service-band h2{font-size:24px;line-height:33.2308px}
  .page-id-176 .service-contact{margin-top:0}
  .page-id-176 .sewer-jetting .service-contact{margin-top:30px}
  .page-id-176 .service-contact .button{line-height:42px}
  .page-id-176 .service-media img{width:auto;max-width:100%;height:auto}

  .page-id-176 .sewer-jetting{padding:51px 0}
  .page-id-176 .sewer-jetting>.wrap{width:calc(100% + 30px);max-width:none;margin-left:-15px;
  margin-right:0;padding:0 35px}

  .page-id-176 .sewer-white{padding:51px 0}
  .page-id-176 .sewer-white .service-row{grid-template-columns:1fr;width:calc(100% + 30px);
  margin-left:-15px}
  .page-id-176 .sewer-white .service-row+.service-row{margin-top:20px;grid-template-columns:1fr;
  width:calc(100% + 30px);margin-left:-15px;margin-right:0;padding:0}
  .page-id-176 .sewer-white .service-row>div{padding:0 15px}
  .page-id-176 .sewer-white .service-row>div:first-child{padding:0 35px}
  .page-id-176 .sewer-white .service-contact{padding:0 15px}

  .page-id-176 .service-band.divider{padding:51px 0}
  .page-id-176 .warranty{grid-template-columns:1fr;gap:0;width:calc(100% - 50px);max-width:none;
  margin-left:25px;margin-right:0;padding:0;text-align:left}
  .page-id-176 .warranty>div{padding:10px 15px 0}
  .page-id-176 .warranty img{justify-self:center;padding:0}
}

/* About, small screens. */
@media(max-width:850px){
  .page-id-7 .about-intro{height:auto;padding:0}
  .page-id-7 .about-intro-grid{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);
  max-width:none;height:auto;margin:0 0 0 -15px;padding:0 20px;align-items:start}
  .page-id-7 .about-portrait{order:0;display:block;margin-top:-30px;padding:100px 0 0 15px}
  .page-id-7 .about-slider{margin-bottom:60px}
  .page-id-7 .about-slider,.page-id-7 .about-slides{height:auto;min-height:0;aspect-ratio:auto}
  .page-id-7 .about-slides{display:grid}
  .page-id-7 .about-slider .about-slide{position:static;grid-area:1/1}
  .page-id-7 .about-portrait img{width:100%;height:auto;max-height:none;object-fit:initial}
  .page-id-7 .about-copy{padding:40px 40px 30px}
  .page-id-7 .about-copy h1{margin:20px 0 20px 20px;color:#330;font:700 35px/43.75px var(--serif)}
  .page-id-7 .about-copy h2{margin:20px 20px 0;font-size:24px;line-height:33.2308px}
  .page-id-7 .about-copy p{margin:0 20px}
  .page-id-7 .about-signature{display:grid;grid-template-columns:1fr;gap:0;
  width:calc(100% + 30px);margin:0 0 0 -15px}
  .page-id-7 .about-signature>p{margin:0;padding:40px 15px 30px}
  .page-id-7 .about-signature>img,.page-id-7 .kamber-mark{display:block;width:300px;
  max-width:100%;margin:40px 15px 38px}

  .page-id-7 .callbar{height:auto;margin:1px 0 -5px;padding:0}
  .page-id-7 .callbar .callbar-in{display:block;width:calc(100% + 30px);max-width:none;height:auto;
  min-height:0;margin:0 0 0 -15px;padding:0 0 7px;text-align:center;
  font:400 14px/26px "Open Sans",sans-serif}
  .page-id-7 .callbar .sched{display:block;margin:0 0 15px;padding:21px 0 10px}
  .page-id-7 .callbar .callbar-in .number{display:inline;width:auto;margin:0;padding:0;
  transform:none;text-align:center}

  .page-id-7 .about-team{padding:70px 0 0}
  .page-id-7 .about-team>.wrap{width:100%;max-width:none;margin:0;padding:0}
  .page-id-7 .about-team .section-title{margin:0 0 30px;padding-top:7px}
  .page-id-7 .about-team .team{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);
  max-width:none;margin:0 0 0 -15px;padding:50px 0}
  .page-id-7 .about-team .team>article{padding:0 15px}

  .trust--about{height:auto;padding:50px 0 2px}
  .trust--about .badges{grid-template-columns:1fr;gap:0;width:100%;max-width:none;
  margin:-23px 0 0;padding:0 0 20px}
  .trust--about .badges>a{padding:0}
  .trust--about .badges>a:first-child{padding:30px 0 0 117.59px}
  .trust--about .badges img{display:block;max-width:none;height:auto;margin:10px auto 0}
  .trust--about .badges>a:nth-child(1) img{width:171px;height:83px;margin:0}
  .trust--about .badges>a:nth-child(2) img{width:120px;height:128px}
  .trust--about .badges>a:nth-child(3) img{width:266px;height:190px;margin:10px auto 20px}
  .trust--about .badges>a:nth-child(4) img{width:110px;height:110px}

  .page-id-7 .about-video{padding:60px 0}
  .page-id-7 .about-video>.wrap{width:50%;max-width:none;margin:0 auto;padding:0}
  .page-id-7 .about-video .section-title{margin:0;text-align:left}
  .page-id-7 .about-video .video-profile{width:100%;max-width:none;margin:0;aspect-ratio:16/9}
}

/* Services, small screens. */
@media(max-width:850px){
  .page-id-11 .legacy-intro{height:auto;min-height:0;padding:31px 0 30px;
  background-color:transparent;background-position:center;background-size:cover;
  background-repeat:no-repeat}
  .page-id-11 .legacy-intro>.wrap{width:calc(100% + 30px);max-width:none;margin-left:-15px;padding:0}
  .page-id-11 .legacy-intro-grid{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);
  max-width:none;margin-left:-15px;padding:0}
  .page-id-11 .legacy-intro-copy{grid-column:auto;padding:35px 60px 30px 40px;
  background:rgba(255,255,255,.46)}
  .page-id-11 .legacy-intro h1{width:auto;margin:-30px 0 0;font:700 35px/43.75px var(--display)}
  .page-id-11 .legacy-intro h2{margin:0;font-size:24px;line-height:33.2308px}
  .page-id-11 .legacy-intro p{margin:0}

  .page-id-11 .callbar{height:auto;margin:0;padding:10px 0;background:var(--green-alt)}
  .page-id-11 .callbar .callbar-in{display:block;width:calc(100% + 30px);max-width:none;height:auto;
  min-height:0;margin:0 0 0 -15px;padding:0 0 20px;text-align:center;
  font:400 24px/33.2308px "Times New Roman",sans-serif}
  .page-id-11 .callbar .sched{display:block;margin:0 0 15px;padding:7px 0 0}
  .page-id-11 .callbar .callbar-in .number{display:inline;width:auto;margin:0;padding:0;
  transform:none;text-align:left;font-weight:400;line-height:33.2308px}

  .page-id-11 .service-band{padding:51px 0}
  .page-id-11 .service-row,.page-id-11 .service-row.reverse{grid-template-columns:1fr;gap:0;
  width:calc(100% - 50px);max-width:none;margin-left:25px;margin-right:0;padding:0}
  .page-id-11 .service-row+.service-row{margin-top:20px}
  .page-id-11 .service-copy,.page-id-11 .service-media{padding:0 15px}
  .page-id-11 .service-band h2{font-size:24px;line-height:33.2308px}
  .page-id-11 .service-copy h2 span{font-size:28px;line-height:33.2308px}
  .page-id-11 .services-disposal .service-copy h2 span{font-size:24px}
  .page-id-11 .kmd-row h2 a{font-size:28px}
  .page-id-11 .service-band.plain .service-row:first-child .service-copy{padding-bottom:20px}
  .page-id-11 .service-contact .button{line-height:42px}
  .page-id-11 .service-media img{width:auto;max-width:100%;height:auto;max-height:none}

  .page-id-11 .services-white{padding:51px 0}
  .page-id-11 .efficiency{width:calc(100% - 50px);max-width:none;margin-left:25px;margin-right:0;
  padding:0 15px;text-align:left}
  .page-id-11 .efficiency>h2{margin-bottom:0}
  .page-id-11 .efficiency>h3{margin:0 0 10px;font:400 24px/33.2308px var(--serif);color:var(--green)}
  .page-id-11 .savings{display:block;margin:0;padding:0 0 0 20px;
  font:14px/26px helvetica,Arial,sans-serif;list-style-position:inside;text-align:left}
  .page-id-11 .savings span{display:list-item}
  .page-id-11 .article-links{grid-template-columns:1fr;gap:0;width:calc(100% + 30px);max-width:none;
  margin:20px 0 0 -15px}
  .page-id-11 .article-links article{margin:0 15px;padding:20px;
  background:url('/wp-content/uploads/2017/02/concrete-1.jpg') repeat;text-align:left}
  .page-id-11 .article-links h3{margin:0;color:var(--green);font:400 18px/23.4783px var(--serif)}
  .page-id-11 .article-links h3 span{font-size:20px;line-height:23.4783px}
  .page-id-11 .article-links p{margin:0;font-size:14px;line-height:26px}
  .page-id-11 .article-links a{font-weight:700;text-decoration:none}

  .page-id-11 .kmd-row{grid-template-columns:1fr;gap:0;width:calc(100% - 50px);max-width:none;
  margin:50px 0 50px 25px;padding:0}
  .page-id-11 .kmd-row .service-copy{grid-column:auto;grid-row:auto;padding:0 45px}
  .page-id-11 .kmd-row ul{margin:0;padding:20px}
  .page-id-11 .kmd-row .service-copy p{margin:25px 0}
  .page-id-11 .kmd-row .service-media{grid-column:auto;grid-row:auto;display:flex;min-height:0;
  flex-direction:column;align-items:stretch;padding:10px 15px 0;text-align:center}
  .page-id-11 .kmd-row .service-media img{width:300px;max-width:none;height:92px;margin:0 auto}
  .page-id-11 .kmd-row .service-media .button{display:grid;place-items:center;align-self:flex-start;
  width:153px;height:42px;margin:52px 0 20px 50px;padding:0;font:700 13px/38px var(--body);
  letter-spacing:1px}

  .page-id-11 .services-warranty{padding:51px 0}
  .page-id-11 .warranty{display:grid;grid-template-columns:1fr;gap:0;width:calc(100% - 50px);
  max-width:none;margin-left:25px;margin-right:0;padding:0;text-align:left}
  .page-id-11 .warranty>div{padding:10px 15px 0}
  .page-id-11 .warranty img{width:auto;justify-self:center;padding:0}
}

/* ============================================================================
   DELIBERATE DEPARTURES FROM PRODUCTION

   Everything above this line reproduces masonplumbing.com. Everything below
   is a decided change and will read as a difference against the reference.
   Diff against the `parity-baseline` tag to see the whole of it.

   Selectors are doubled (.site-foot.site-foot) only to outrank the parity
   rules above without resorting to !important.
   ========================================================================= */

/* A real footer: brand and phone, then the site's links, over a dark ground. */
.site-foot.site-foot{min-height:0;padding:0;border-top:0;
background:#00602f;color:#fff}
.site-foot.site-foot .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
gap:0 40px;width:1100px;max-width:calc(100% - 48px);margin:0 auto;padding:60px 0 46px;
text-align:left}

.site-foot.site-foot .footer-brand{margin:0;padding:0;text-align:left}
/* assets/logo-reversed.png is the shipped mark with its white ground turned
   into an alpha channel, so it sits on the dark ground without a filter. */
.site-foot.site-foot .footer-brand img{width:246px;height:auto;margin:0 0 20px;
filter:none;opacity:.95}
.site-foot.site-foot .footer-tagline{margin:0 0 20px;color:rgba(255,255,255,.9);
font:400 13px/1.45 var(--body);letter-spacing:.2px}
.site-foot.site-foot .footer-tagline .sep{color:rgba(255,255,255,.55);padding:0 2px}
.site-foot.site-foot .footer-phone{display:inline-block;margin:0;padding:0;color:#fff;
font:700 30px/1.1 var(--display);letter-spacing:.5px;text-decoration:none}
.site-foot.site-foot .footer-phone:hover{color:#cfe8da}
.site-foot.site-foot .footer-social{display:flex;gap:10px;width:auto;margin:22px 0 0;
padding:0;justify-content:flex-start}
.site-foot.site-foot .footer-social a{display:grid;place-items:center;width:34px;height:34px;
margin:0;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;color:#fff;font-size:15px;
line-height:1;text-align:center;transition:background .2s ease,border-color .2s ease,color .2s ease}
.site-foot.site-foot .footer-social a:hover{border-color:#fff;
background:#fff;color:#00602f}

.site-foot.site-foot .footer-col{margin:0;padding:0}
.site-foot.site-foot .footer-col h2{margin:0 0 16px;padding:0;color:#fff;
font:700 13px/1.2 var(--body);letter-spacing:1.4px;text-transform:uppercase}
/* Tight link lists. No padding on the rows; spacing comes from line-height. */
.site-foot.site-foot .footer-col ul{margin:0;padding:0;list-style:none}
.site-foot.site-foot .footer-col li{margin:0;padding:0}
.site-foot.site-foot .footer-col li+li{margin-top:6px}
.site-foot.site-foot .footer-col a{display:inline-block;margin:0;padding:0;color:rgba(255,255,255,.92);
font:400 14px/1.35 var(--body);text-decoration:none}
.site-foot.site-foot .footer-col a:hover{color:#fff;text-decoration:underline}

.site-foot.site-foot .footer-contact{margin:0;padding:0;text-align:left}
.site-foot.site-foot .footer-contact a,.site-foot.site-foot .footer-contact li,
.site-foot.site-foot .footer-contact h2{text-align:left}
.site-foot.site-foot .footer-address{margin:18px 0 0;color:rgba(255,255,255,.9);
font:400 13px/1.5 var(--body);font-style:normal}
.site-foot.site-foot .footer-address em{color:#fff;font-style:normal}

.site-foot.site-foot .footbar{display:block;height:auto;margin:0;padding:0;
background:#00602f;color:#fff;border-top:1px solid rgba(255,255,255,.14)}
.site-foot.site-foot .footbar-in{display:flex;align-items:center;justify-content:space-between;
gap:16px;width:1100px;max-width:calc(100% - 48px);margin:0 auto;padding:0}
.site-foot.site-foot .footbar span{display:block;height:auto;margin:0;padding:0;
font:400 13px/52px var(--body);letter-spacing:.3px;text-align:left}
.site-foot.site-foot .footbar-credit{text-align:right}
.site-foot.site-foot .footbar-credit{color:#a8c9a2}.site-foot.site-foot .footbar-credit a{color:#a8c9a2;text-decoration:none}
.site-foot.site-foot .footbar-credit a:hover,
.site-foot.site-foot .footbar-credit a:focus-visible{text-decoration:underline}
.site-foot.site-foot .footbar-credit a:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:850px){
  .site-foot.site-foot .footer-grid{grid-template-columns:1fr;gap:36px 0;
  width:100%;max-width:none;margin:0;padding:46px 24px 36px;text-align:center}
  .site-foot.site-foot .footer-brand{text-align:center}
  .site-foot.site-foot .footer-brand img{margin:0 auto 18px}
  .site-foot.site-foot .footer-social{justify-content:center}
  .site-foot.site-foot .footer-col h2{margin-bottom:12px}
  .site-foot.site-foot .footbar-in{flex-direction:column;justify-content:center;gap:0;
  width:100%;max-width:none;padding:14px 24px}
  .site-foot.site-foot .footer-contact,.site-foot.site-foot .footer-contact a,
  .site-foot.site-foot .footer-contact li,.site-foot.site-foot .footer-contact h2,
  .site-foot.site-foot .footer-address{text-align:center}
  .site-foot.site-foot .footbar span{line-height:1.9;text-align:center}
  .site-foot.site-foot .footbar-credit{text-align:center}
}

/* Blog post featured image: half the column, so a quarter of the area it was.
   Left at full width on small screens, where half a phone column is a stamp. */
@media(min-width:851px){
  .single-legacy .post-featured{width:50%;max-width:100%;height:auto;margin:0 0 20px}
}

/* The panel already starts at the link's bottom edge; what read as a gap was
   the white above the first row. The panel's own padding goes, the rows tighten,
   and the first row keeps enough top padding to clear the header's green rule,
   which paints over the panel's top 6px. */
.menu .has-sub .sub{padding:0 0 6px}
.menu .has-sub .sub a{padding:6px 20px}
.menu .has-sub .sub a:first-child{padding-top:10px}
/* Pull the panel up so it reads as attached to its nav item rather than
   floating below the header. Offset from 100% (not a fixed top) so it tracks
   the shorter 80px nav row in the sticky header state. Rounded bottom corners
   only: the top edge should still read as joined to the nav. */
.menu .has-sub .sub{top:calc(100% - 40px);border-radius:0 0 5px 5px;overflow:hidden}
/* Compact sticky header: the nav link is 80px tall, so a 40px pull-up put the
   panel's top edge through the middle of the label. Start it below the text. */
@media(min-width:851px){.site-head.is-sticky .menu .has-sub .sub{top:calc(100% - 26px)}}
.hero .hero-copy h2{text-transform:uppercase;font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.5;letter-spacing:.12em}@media(max-width:850px){.hero .hero-copy h2{font-size:14px}}

/* Blog cards: the photo must never set the row height.
   height:100% on the img cannot resolve against an auto-height grid item, so
   it fell back to the intrinsic aspect ratio at full column width. A portrait
   photo then made the card 759px tall against ~300px of text, and every card
   came out a different size. Taking the image out of flow means the copy
   drives the height and the photo fills whatever that is, cropped. */
.blog-image{position:relative;overflow:hidden}
.blog-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Stacked cards put the photo in its own row, where an out-of-flow image
   leaves nothing to set the height, so give it an explicit ratio there.
   display:block is required: the element computes to inline here, and neither
   aspect-ratio nor min-height applies to an inline box. */
@media(max-width:850px){.blog-image{display:block;aspect-ratio:16/10;min-height:0}}

/* ---- Mobile header ---------------------------------------------------
   The toggle button ships with no content at all, and the production-measured
   override pinned it 19px wide at font-size:0 on the LEFT, so there was
   nothing to see or aim at. Draw the bars with a pseudo-element, move it to
   the right, and size it to a 44px touch target. The logo comes down so the
   two never crowd each other on a narrow screen. */
@media(max-width:850px){
  .site-head{position:relative}
  .toggle{position:absolute;left:auto;right:16px;top:50%;transform:translateY(-50%);
    display:grid;place-items:center;width:44px;height:44px;padding:0;font-size:0;
    background:none;border:0;cursor:pointer}
  .toggle::before{content:"";width:26px;height:3px;border-radius:2px;
    background:var(--green);box-shadow:0 -8px 0 var(--green),0 8px 0 var(--green)}
  .toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}

  /* The production-measured mobile block pins .brand img to 322x80 and centres
     .brand with left:50% plus margin-left:-161px. Those three numbers are tied
     together: changing only the width distorts the logo (it is naturally
     800x199, a 4:1 ratio) and throws the centring off by half the difference.
     So set height from the ratio, and keep the offset at half the width.
     The header comes down to suit the shorter logo. */
  /* Centre with a transform rather than a negative margin equal to half the
     width, so the logo can be fluid. It grows to 270px but always leaves room
     for the 44px hamburger plus its 16px inset on both sides, which is the
     150px reserved below. No width breakpoints needed. */
  .site-head,.head-in{height:98px}
  /* Span the full width and centre the image inside, rather than pinning
     left:50%. An absolutely positioned box with only `left` set shrink-fits to
     (container - left), which capped the logo at half the screen. */
  .site-head,.head-in{height:98px}
  .brand{left:0;right:0;top:50%;width:auto;margin:0;transform:translateY(-50%);text-align:center}
  .brand img{display:block;margin:0 auto;width:min(270px,calc(100vw - 150px));height:auto}
}

/* ---- Mobile hero legibility ------------------------------------------
   The tagline is #333300 sitting directly on the photo of the vans, which
   fails at the worst pixel behind the letters. A scrim is the fix: it holds
   contrast no matter what part of the photo ends up behind the text. The copy
   block was also 30px wider than the viewport, so it is pulled back in. */
@media(max-width:850px){
  .home .hero-copy{width:auto;max-width:none;margin:0 14px;padding:20px 16px;
    background:rgba(255,255,255,.88);border-radius:8px;
    box-shadow:0 2px 18px rgba(0,0,0,.10)}
  .home .hero h1{font-size:34px;line-height:1.2}
  .home .hero h2{margin-top:8px;font-size:17px;line-height:1.45;color:#2f3a24}
  .home .hero h2 .sep{color:var(--green-alt)}
}

/* ---- Nav between the hamburger and the full desktop header -----------
   The desktop nav switches on at 851px, but the production-measured sizes are
   built for a 1100px column: at 900px the logo (342) plus the menu (533) need
   875px inside a 795px container, and .menu{margin-right:-80px} then pushes
   the last item 20px past the right edge, so "Contact Us" is clipped. It is
   overflow, not wrapping. Reclaim the negative margin and tighten the type and
   the logo until the full 1100px layout can take over. */
@media(min-width:851px) and (max-width:1099px){
  .head-in{max-width:calc(100% - 40px)}
  .brand img{width:290px}
  .menu{margin-right:0}
  .menu>a,.menu>.has-sub>a{padding-left:10px;padding-right:10px;
    font-size:12px;letter-spacing:.5px}
  .sub{min-width:200px;width:200px}
}
/* Above 1100px the full-size layout returns, but the menu's negative margin
   hangs it past the centred 1100px column: its right edge lands at
   vw/2 + 630, which exceeds the viewport below about 1260px. Same again for
   the -160px margin that starts at 1400px. Drop the overhang until the
   viewport is genuinely wide enough to absorb it. */
@media(min-width:1100px) and (max-width:1279px){.menu{margin-right:0}}
@media(min-width:1400px) and (max-width:1579px){.menu{margin-right:-80px}}

/* ---- Form fields and buttons -----------------------------------------
   Typed text inherited the body's #494949, which reads as grey against the
   white field. Black it. -webkit-text-fill-color is needed as well, or
   Chrome's autofill styling keeps its own colour (the fields in testing were
   autofilled). Placeholders stay grey so they remain distinguishable from a
   real value. A <button> defaults to cursor:default, not pointer. */
/* 13px was smaller than the 14px labels, so entered text read as faint. 16px
   is also the threshold below which iOS Safari zooms the page when a field is
   focused, so anything smaller is a mobile usability problem as well. */
#content .form input,#content .form textarea,
#content .contact-form input,#content .contact-form textarea{
  color:#000;font-size:16px;line-height:1.45}
#content .form input:-webkit-autofill,
#content .contact-form input:-webkit-autofill,
#content .contact-form textarea:-webkit-autofill{-webkit-text-fill-color:#000}
#content .form input::placeholder,#content .form textarea::placeholder,
#content .contact-form input::placeholder,
#content .contact-form textarea::placeholder{color:#767676;opacity:1}
#content .button,#content .form button,
#content .contact-form button[type=submit]{cursor:pointer}

/* Submit reads as a solid primary action rather than a light outline.
   #content is needed to outrank .page-id-14 .contact-form .button, which sets
   the transparent background, green text and the 106x43 box. */
#content .contact-form .button,
#content .contact-form button[type=submit]{
  min-width:160px;height:54px;padding:0 36px;
  border:2px solid var(--green);border-radius:4px;
  background:var(--green);color:#fff;
  font-size:15px;line-height:50px;letter-spacing:.08em;
  transition:background .15s,border-color .15s}
#content .contact-form .button:hover,
#content .contact-form button[type=submit]:hover{
  background:#00612f;border-color:#00612f;color:#fff}
#content .contact-form button[type=submit]:focus-visible{
  outline:3px solid #00612f;outline-offset:3px}

/* ---- Mobile gutter reset ---------------------------------------------
   The production-measured rules reproduce a Bootstrap-style negative gutter
   with width:calc(100% + 30px) and margin-left:-15px, in 35 places. On a wide
   screen that is invisible. On a phone it pushes the content container 15px
   past BOTH edges, and #content{overflow-x:hidden} then silently clips it
   rather than scrolling, so text and images were being cut off with no
   horizontal scrollbar to reveal it. Neutralise the pattern once, at mobile,
   for the inner content wrappers. Full-bleed section backgrounds are not
   touched: this targets the containers that hold text. */
@media(max-width:850px){
  /* Prefixed with #content so one id-level rule outranks every page-scoped
     .page-id-N variant of the gutter, instead of chasing 35 of them. Resetting
     only the leaf containers is not enough: width:100% of a 420px parent is
     still 420px, so the ancestors have to be caught too. */
  #content .wrap,
  #content .callbar-in,
  #content .green>.wrap,
  #content .green-grid,
  #content .tri,
  #content .service-row,
  #content .heater-products,
  #content .water-hero,
  #content .legacy-intro-grid,
  #content .about-intro-grid,
  #content .contact-info-grid,
  #content .about-team .team,
  #content .hero{
    width:100%;max-width:100%;margin-left:0;margin-right:0}
  /* The phone number in the call bar is pulled left by a transform and
     oversized padding measured for a wide screen. */
  #content .callbar .number{width:auto;max-width:100%;margin:0;transform:none;
    padding-left:15px;padding-right:15px;text-align:center}
  #content .service-row>div{padding-left:0;padding-right:0}
  #content .heater-products{flex-wrap:wrap;justify-content:center;gap:16px}
  #content .heater-products img,
  #content .service-media img{max-width:100%;width:auto;height:auto}
  /* Lists carry a 29-32px left indent measured for a wide column. */
  #content .service-row ul,#content .tri ul,
  #content .inner-split-grid ul{margin-left:0;padding-left:20px;max-width:100%}
  /* Fixed pixel widths measured for a wider phone. */
  #content .feature{width:100%;max-width:330px}
  #content .water-hero>div,#content .water-hero-photo,
  #content .water-hero-copy{max-width:100%;min-width:0}
}

/* ---- Mobile contact form ---------------------------------------------
   The production-measured Contact rules keep a two-column form and a panel
   that is calc(100% + 30px) wide with a -15px pull, so on a 390px screen the
   panel ran 505px: 15px off the left edge and 100px past the right. Nothing
   scrolled because #content clips overflow-x, so the Turnstile widget was
   simply chopped off. Reset the page to one column that fits the viewport. */
@media(max-width:850px){
  .page-id-14 .contact-top{width:100%;max-width:100%;margin-left:0;
    grid-template-columns:1fr;height:auto;min-height:0}
  .page-id-14 .contact-photo{min-height:190px;padding:0}
  .page-id-14 .contact-form-panel{padding:28px 20px}
  .page-id-14 .contact-form{grid-template-columns:1fr;gap:0}
  .page-id-14 .contact-form>div{min-width:0}
  .page-id-14 .contact-form label{display:block;margin:0 0 16px}
  .page-id-14 .contact-form input,
  .page-id-14 .contact-form textarea{width:100%;max-width:100%}
  .page-id-14 .contact-form textarea{min-height:150px}
  /* The widget is a fixed 300px iframe; keep it inside the panel. */
  .cf-turnstile{max-width:100%;margin:0 0 18px}
  .page-id-14 .contact-form button[type=submit]{width:100%}
  .contact-info-grid{grid-template-columns:1fr;gap:24px}
}
/* Below ~360px there is less than 300px of room, so scale the widget to fit
   rather than let it be clipped. */
@media(max-width:360px){
  .cf-turnstile{transform:scale(.88);transform-origin:left top;height:66px}
}

/* ---- Mobile trust badges ---------------------------------------------
   The home page positions these absolutely at desktop, and at mobile they fell
   back to their full intrinsic sizes, stacking into a 596px column. Normalise
   by HEIGHT so mixed aspect ratios read as one row. */
@media(max-width:850px){
  .home .badges{position:static;height:auto;padding:0;display:flex;flex-wrap:wrap;
    align-items:center;justify-content:center;gap:16px 22px}
  /* The anchors are absolutely placed by .home .badges > a:nth-child(N), which
     outranks .home .badges > a. Match the shape to un-position all of them. */
  .home .badges>a:nth-child(n){position:static;left:auto;top:auto;margin:0;padding:0;line-height:0}
  /* The per-badge overrides are .home .badges > a:nth-child(N) img, which
     outranks a plain .home .badges img. Match that shape with :nth-child(n)
     so all of them are beaten on specificity rather than with !important. */
  /* Each trust variant carries its own per-badge sizes at
     .trust--X .badges > a:nth-child(N) img, so the override has to match that
     shape for every variant to win on specificity. */
  .home .badges>a:nth-child(n) img,
  .trust--contact .badges>a:nth-child(n) img,
  .trust--about .badges>a:nth-child(n) img,
  .trust--area .badges>a:nth-child(n) img,
  .badges img{width:auto;height:52px;max-width:none;margin:0}
  .trust .badges{display:flex;flex-wrap:wrap;align-items:center;
    justify-content:center;gap:16px 22px}
  .trust .badges>a:nth-child(n){margin:0;padding:0;line-height:0}
  .badge-swap .badge-hover{display:none}
  .trust{padding:34px 0 30px}
}
@media(max-width:420px){
  .home .badges>a:nth-child(n) img,
  .trust--contact .badges>a:nth-child(n) img,
  .trust--about .badges>a:nth-child(n) img,
  .trust--area .badges>a:nth-child(n) img,
  .badges img{height:42px}
  .home .badges,.trust .badges{gap:14px 18px}
}
/* Reserve two lines for the title and two for the meta, so a heading or a
   category list that wraps does not make one card taller than the rest.
   Excerpts are already a uniform four lines. Reserving space rather than
   clamping means nothing is ever truncated. The px values are a fallback for
   browsers without the lh unit, which expresses "two lines" exactly. */
@media(min-width:851px){
  .blog-copy h2{min-height:78px;min-height:2lh}
  .blog-copy .post-meta{min-height:52px;min-height:2lh}
}

/* Schedule Service reads as a button rather than a line of text. */
.callbar .callbar-in .sched{display:inline-block;align-self:center;justify-self:center;
margin:0;padding:9px 26px;border:2px solid #fff;line-height:1.25;text-align:center}
.callbar .callbar-in .sched:hover{background:#fff;color:var(--green)}
@media(max-width:850px){
  /* the small-screen call bars are plain blocks, so justify-self does nothing;
     shrink-wrap the button and centre it with auto margins instead */
  .callbar .callbar-in .sched{display:block;width:max-content;max-width:100%;margin:0 auto}
}