@font-face{font-family:"Myriad Pro";src:url("/fonts/MYRIADPRO-REGULAR.1329344381.woff2") format("woff2"),url("/fonts/MYRIADPRO-REGULAR.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("/fonts/MYRIADPRO-SEMIBOLD.37ca02a25a.woff2") format("woff2"),url("/fonts/MYRIADPRO-SEMIBOLD.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Address Sans Pro";src:url("/fonts/fonnts.com-Address_Sans_Pro_Regular.23faf2b965.woff2") format("woff2"),url("/fonts/fonnts.com-Address_Sans_Pro_Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Address Sans Pro";src:url("/fonts/fonnts.com-Address_Sans_Pro_SemiBold.cdc65587e5.woff2") format("woff2"),url("/fonts/fonnts.com-Address_Sans_Pro_SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Address Sans Pro";src:url("/fonts/fonnts.com-Address_Sans_Pro_Cd_Bold.8e1dfe85ce.woff2") format("woff2"),url("/fonts/fonnts.com-Address_Sans_Pro_Cd_Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Myrid Pro";src:url("/fonts/MYRIADPRO-IT.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Myrid Pro";src:url("/fonts/MYRIADPRO-SEMIBOLD.37ca02a25a.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Myrid Pro";src:url("/fonts/MYRIADPRO-SEMIBOLDIT.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Myrid Pro";src:url("/fonts/MYRIADPRO-BOLD.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Myrid Pro";src:url("/fonts/MYRIADPRO-BOLDIT.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:#FFFFFF;color:#1B1B1B;font:17.5px/1.62 "Myrid Pro","Myriad Pro","Segoe UI",system-ui,Arial,sans-serif}
img{max-width:100%;height:auto}
a{color:#1155CC}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #3C83FF;outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
/* Header and footer run the full width of the window. Body copy does not -
   a 3000px line of text is unreadable - so only these two opt in. */
.wrap.full{max-width:none;padding:0 34px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;position:fixed;z-index:99;background:#fff;padding:10px 16px}

/* Everything that sticks or scrolls into view has to clear the sticky
   header. That distance was hard-coded at 78px and the header has since
   grown to 125px, so the contents list, the quote form and every anchored
   heading were landing 47px underneath it. One variable now, measured from
   the real header at runtime; these values are only the fallback. */
:root{--hdr:125px;--stick:calc(var(--hdr) + 14px)}
@media(max-width:900px){:root{--hdr:104px}}
@media(max-width:640px){:root{--hdr:96px}}
header.site{position:sticky;top:0;z-index:40;box-shadow:0 2px 16px rgba(16,25,60,.28)}
.topbar{background:#1155CC;color:#fff}
.tb{display:flex;align-items:center;justify-content:center;position:relative;padding:8px 0;min-height:42px}
.tb .tagline{font-size:15.5px;font-weight:600;letter-spacing:.01em}
.tb .login{position:absolute;left:20px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  padding:6px 8px;font-size:14.5px;font-weight:600}
.tb .login::before{content:none}
.tb .login:hover{text-decoration:underline;text-underline-offset:4px}
.tb .ls{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.mainbar{background:linear-gradient(135deg,#002972 0%,#20337A 100%)}
.bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.wrap.full.bar{padding:14px 34px}
.brand{margin-top:-16.5px}
/* The live logo sits on a bright blue slab whose right edge is cut on the
   brand diagonal, taller than the bar, hanging down over the hero. The
   slant is the box's own shape - a clip, not a picture of a slant - so it
   holds at any size and the transparent wordmark sits straight on it. */
.brand{background:#3C83FF;clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,0 100%);
  padding:22px 52px 22px 34px;line-height:0;margin-right:auto;flex:none;text-decoration:none;
  align-self:flex-start;margin-bottom:-26px;position:relative;z-index:5;
  margin-left:-34px} /* flush to the window edge, as live: cancel the wrap's padding */
.brand img{height:40px;width:auto;display:block}
nav.main ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav.main li{position:relative}
nav.main a{color:#fff;text-decoration:none;font-weight:600;font-size:16.5px;
  text-transform:uppercase;letter-spacing:.02em;display:inline-flex;align-items:center;
  gap:7px;padding:14px 10px}
nav.main a:hover{color:#9EDCFF}
.caret{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:5px solid currentColor;display:inline-block}
nav.main .sub{display:none;position:absolute;top:100%;left:0;min-width:250px;z-index:60;
  background:#fff;box-shadow:0 12px 32px rgba(16,25,60,.22);
  padding:8px 0;margin:0;list-style:none;flex-direction:column;gap:0}
nav.main li:hover>.sub,nav.main li:focus-within>.sub{display:flex}
nav.main .sub a{color:#26324B;font-size:15.5px;font-weight:600;text-transform:none;
  letter-spacing:0;padding:9px 20px;display:block}
nav.main .sub a:hover{background:#F2F6FD;color:#1155CC}
nav.main .sub-all a{border-top:1px solid #E3E9EE;color:#1155CC;margin-top:6px;padding-top:12px}
/* The Services menu is the mega panel: two columns of thumbnail + name +
   one-line blurb, anchored under its menu item. */
nav.main .mega-panel{width:min(680px,calc(100vw - 48px));left:50%;transform:translateX(-50%);
  padding:12px;grid-template-columns:1fr 1fr;gap:2px}
nav.main li:hover>.mega-panel,nav.main li:focus-within>.mega-panel{display:grid}
nav.main .mega-panel a{display:flex;align-items:center;gap:13px;padding:9px 12px;
  text-transform:none;letter-spacing:0}
nav.main .mega-panel a:hover{background:#F2F6FD}
nav.main .mega-panel img{width:64px;height:64px;object-fit:cover;flex:none}
.mm-t{min-width:0}
.mm-t b{display:block;font-size:15.5px;color:#26324B;line-height:1.25}
.mm-t small{display:block;font-size:13px;color:#5A6B7A;font-weight:500;line-height:1.35;margin-top:2px}
nav.main .mega-panel .sub-all{grid-column:1/-1}
@media (hover:none) and (min-width:1025px){nav.main .sub{display:none!important}}
/* The brand's buttons lean: the box is a parallelogram skewed 10 degrees,
   drawn by a ::before layer so the label stays upright. Fill and border
   live on that layer; hover restyles it. */
.skew{position:relative;z-index:0}
.skew::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-10deg);
  }
.bar .cta{text-transform:uppercase;letter-spacing:.02em}
.cta{color:#fff;text-decoration:none;font-weight:700;padding:12px 24px;
  font-size:15.5px;white-space:nowrap;display:inline-block}
.cta::before{background:#1155CC}
.cta:hover{color:#fff}
.cta:hover::before{background:#3C83FF}
.tel{font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;text-transform:uppercase;
  letter-spacing:.02em;padding:11px 20px;display:inline-flex;align-items:center;gap:8px;font-size:15px}
.tel::before{border:1px solid #3C83FF;background:transparent}
.tel:hover::before{background:rgba(17,173,243,.18)}
/* the live language buttons: sky-outlined, flag beside the name, same lean */
.ls{display:inline-flex;gap:14px;font-size:13.5px;line-height:1;flex:none}
.ls a,.ls .ls-on{padding:6px 2px;text-decoration:none;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px}
.ls img{display:block}
.ls a{color:rgba(255,255,255,.82)}
.ls a::before,.ls .ls-on::before{content:none}
.ls a:hover{color:#fff}
.ls .ls-on{color:#fff;cursor:default;font-weight:800}

.crumbs{font-size:13.5px;color:#5A6B7A;padding:12px 0}
.crumbs a{color:#5A6B7A;text-decoration:none}
.crumbs a:hover{color:#1155CC}

.hero{background:linear-gradient(160deg,#002972 0%,#23398C 60%,#1155CC 140%);padding:42px 0 38px;color:#fff}
/* A service page stands on its own photograph, under a brand-tinted scrim
   heavy enough to keep white type legible over any of them. */
/* the service hero centers on its photograph, as the live page does */
.svchero{text-align:center}
.svchero .lede{margin-left:auto;margin-right:auto}
.svchero .hcta{justify-content:center;margin-top:20px}
/* A row of buttons, not a paragraph of links. Without this the row is a
   block, justify-content is inert, and the phone number wraps across the
   quote button - taking its skewed background with it, which is where the
   stray outlined parallelogram came from. */
.svchero .hcta{display:flex;gap:22px;flex-wrap:wrap}
/* the badge card is pulled up 64px over the hero, so the hero's own
   content has to end clear of it rather than behind it */
.hero.haspic,.hero.hero-badged{padding:58px 0 108px}
.hero.haspic{background-image:linear-gradient(160deg,rgba(20,32,78,.88) 0%,
  rgba(27,43,102,.80) 55%,rgba(35,62,150,.70) 100%),var(--herobg);
  background-size:cover;background-position:center;background-repeat:no-repeat}
h1{font-size:clamp(30px,4.2vw,48px);line-height:1.12;margin:0;letter-spacing:-.01em;text-wrap:balance;
  font-style:italic;font-weight:700}
.hero .lede{color:#E7EEFF}
.lede{color:#5A6B7A;font-size:19px;margin-top:12px;max-width:70ch}

.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;padding:34px 0}
@media(min-width:960px){.cols.has-toc{grid-template-columns:250px minmax(0,1fr)}}
/* A service page runs contents | article | quote form. Below 1180px the
   form drops under the article; below 960 the contents list goes too. */
@media(min-width:1180px){
  /* The article needs room for long-form measure, so this layout used to run
     wider than the standard container at 1260px. The container is 1280px now
     and gives it more than that exception ever did, so the exception is gone
     and only the trimmed side columns remain. */
  .cols.svc3.has-toc{grid-template-columns:236px minmax(0,1fr) 284px;gap:30px}
  .cols.svc3:not(.has-toc){grid-template-columns:minmax(0,1fr) 284px;gap:30px}

}
@media(max-width:1179px){.svcform{grid-column:1/-1}}
.svcform{align-self:start;min-width:0}
@media(min-width:1180px){.svcform{position:sticky;top:var(--stick)}}
/* With no padding the inputs ran the full width of a bordered box, so every
   input border read as a table rule. Inset them and give the panel a ground
   of its own; the inputs stay white and now read as fields. */
.svcform .quote,.svcform section.quote{margin:0;background:#F2F6FD;
  border:1px solid #E3E9EE;padding:22px 20px}
.svcform .quote>.wrap{padding:0;max-width:none}
.svcform .quote h2{font-size:20px;margin:0 0 6px}
.svcform .quote .sub{font-size:14px;margin:0 0 16px;color:#5A6B7A}
.svcform .fields{gap:12px}
.svcform .submit{width:100%;justify-content:center}
.svcform .formnote{font-size:12.5px;margin-top:12px}

/* Two silos close a service page: every service in this town, then every
   town served. Alternating grounds so they read as separate blocks. */
/* The closing run alternates: questions on soft, the town's services on
   white, every area on soft, the writing on white, then the royal band. */
.silo{background:#fff;padding:44px 0;margin-top:0}
.silo.areas{background:#F2F6FD;margin-top:0}
.silo h2{margin:0 0 6px;font-size:clamp(19px,2.1vw,24px);color:#002972}
.silosub{margin:0 0 18px;color:#5A6B7A;font-size:14.5px;max-width:76ch}
.silolist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px 22px;
  grid-template-columns:1fr 1fr}
@media(min-width:760px){.silolist.svc{grid-template-columns:repeat(4,1fr)}
  .silolist.area{grid-template-columns:repeat(5,1fr)}}
@media(max-width:520px){.silolist{grid-template-columns:1fr}}
.silo a,.silo .here span{color:#1B1B1B;text-decoration:none;font-size:14.5px;display:flex;
  align-items:flex-start;gap:10px;line-height:1.4}
.silo a::before,.silo .here span::before{content:"";display:inline-flex;width:17px;height:15px;
  flex:none;margin-top:2px;
  background:#1155CC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5l5 4.5-5 4.5' stroke='white' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center/6px no-repeat;
  transform:skewX(-10deg)}
.silo a:hover{color:#1155CC}
/* the page you are on is named, not linked back to itself */
.silo .here{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.silo .here span{color:#002972;font-weight:700}
.silo .here span::before{background-color:#3C83FF}
.silo .here i{font-style:normal;font-size:11.5px;color:#5A6B7A;letter-spacing:.03em}

/* The blog index: two columns of cards, each its own photograph, category
   and date. The capture listed every title twice with its taxonomy links
   pointing at pages that are not rebuilt; this is that list, said once. */
.blogwrap{display:grid;gap:34px;grid-template-columns:1fr;align-items:start}
@media(min-width:980px){.blogwrap{grid-template-columns:232px minmax(0,1fr)}}
.catbar{align-self:start}
@media(min-width:980px){.catbar{position:sticky;top:var(--stick)}}
/* The quote box that sits at the top of a blog sidebar, named after
   whatever the reader is reading about. */
.sidecta{background:#002972;color:#fff;padding:20px 20px 22px;margin:0 0 24px}
.sidecta b{display:block;font-size:17px;line-height:1.3;margin-bottom:8px}
.sidecta p{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:#D9E2FF}
/* display set here rather than inherited: the button was only filling its
   box because the contents-list rule was making every link in the aside a
   block, which is exactly the leak that broke its color */
.sidecta .cta{display:flex;width:100%;justify-content:center;align-items:center;
  font-size:14.5px;color:#002972;text-align:center}
.sidecta .cta::before{background:#fff}
.sidecta .cta:hover{color:#002972}
.sidecta .cta:hover::before{background:#E7EEFF}
.sidecta .sc-tel{display:block;margin-top:12px;color:#fff;font-weight:700;font-size:15px;
  text-decoration:none}
.sidecta .sc-tel:hover{color:#3C83FF}
.sidecta .sc-more{display:block;margin-top:8px;color:#3C83FF;font-size:13px;
  text-decoration:none;font-weight:600}
.sidecta .sc-more:hover{text-decoration:underline}
.sidestack{margin-top:26px}
.sidestack .catgroup h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#5A6B7A;margin:0 0 10px}
.sidestack .catgroup ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.sidestack .catgroup a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-decoration:none;color:#1B1B1B;font-size:14px;padding:8px 12px;background:#F2F6FD;
  border-left:3px solid transparent}
.sidestack .catgroup a:hover{border-left-color:#3C83FF;color:#1155CC}
.sidestack .catgroup i{font-style:normal;font-size:12px;color:#5A6B7A}
.catgroup+.catgroup{margin-top:26px}
.catbar h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#5A6B7A;
  margin:0 0 10px}
/* a place that is one of our service areas is marked; the rest are regions */
.catbar li.area a{border-left-color:#3C83FF}
.hublink{margin:18px 0 0}
.catbar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.catbar a,.catbar .here span{display:flex;align-items:center;justify-content:space-between;
  gap:10px;text-decoration:none;color:#1B1B1B;font-size:14.5px;line-height:1.35;
  padding:8px 12px;background:#F2F6FD;border-left:3px solid transparent}
.catbar a:hover{border-left-color:#3C83FF;color:#1155CC}
.catbar .here span{border-left-color:#1155CC;color:#002972;font-weight:700}
.catbar i{font-style:normal;font-size:12px;color:#5A6B7A;flex:none}
.bloglist{display:grid;gap:26px;grid-template-columns:1fr;margin:6px 0 8px}
@media(min-width:720px){.bloglist{grid-template-columns:1fr 1fr}}
.pcard2{display:flex;flex-direction:column;text-decoration:none;color:#1B1B1B;
  background:#fff;border:1px solid #E3E9EE;transition:box-shadow .15s ease,transform .15s ease}
.pcard2:hover{box-shadow:0 6px 24px rgba(17,173,243,.16);transform:translateY(-2px);
  border-color:#3C83FF}
.pcard2 img{width:100%;height:196px;object-fit:cover;display:block;margin:0}
.pcard2 .pbody{padding:16px 18px 20px;display:block}
.pcard2 .pmeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pcard2 .cat{background:#1155CC;color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:4px 11px;transform:skewX(-10deg)}
.pcard2 .cat{display:inline-block}
.pcard2 .date{color:#5A6B7A;font-size:12.5px}
.pcard2 b{display:block;font-size:17px;line-height:1.35;color:#002972}
.pcard2:hover b{color:#1155CC}

/* Every post is published by the company rather than a named person, so the
   box at the foot says who and how to reach them - the same thing the
   article schema states, in a form a reader can act on. */
.authorbox{display:flex;gap:18px;align-items:flex-start;margin:38px 0 0;padding:22px 24px;
  background:#F2F6FD;border-left:4px solid #3C83FF}
.authorbox .ab-mark{width:54px;height:54px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;background:#1155CC;color:#fff;font-weight:800;font-size:19px;
  transform:skewX(-6deg)}
.authorbox .ab-label{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#5A6B7A;margin-bottom:3px}
.authorbox b{display:block;font-size:17px;color:#002972;margin-bottom:6px}
.authorbox p{margin:0 0 8px;color:#5A6B7A;font-size:14.5px;line-height:1.55;max-width:70ch}
.authorbox a{color:#1155CC;font-weight:600;font-size:14.5px}
@media(max-width:560px){.authorbox{padding:18px}.authorbox .ab-mark{width:44px;height:44px;
  font-size:16px}}

/* the town's own writing */
.related{background:#fff;margin-top:0}
.pcards{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.pcards{grid-template-columns:repeat(3,1fr)}}
.pcard img{width:100%;height:150px;object-fit:cover;display:block;margin:0}
.pcard>span{display:block;padding:16px 18px 18px}
.pcard{display:block;padding:0;background:#F2F6FD;color:#002972;overflow:hidden;
  text-decoration:none;border-left:4px solid #3C83FF;transition:transform .15s ease}
.pcard:hover{transform:translateY(-2px);color:#1155CC}
.pcard b{font-size:15.5px;line-height:1.35;font-weight:700}
.related .more{margin:22px 0 0}
/* the article's opening heading starts level with the contents list
   beside it, rather than a heading's top margin lower */
.cols article>:first-child{margin-top:0}
.toc{align-self:start}
@media(min-width:960px){.toc{position:sticky;top:var(--stick);max-height:calc(100vh - var(--hdr) - 40px);overflow:auto}}
/* The contents list scrolls when the article is long, and the platform's own
   scrollbar is wider and darker than anything else in that column. Thin it,
   tint it to the rule color, and let it show itself only on hover - the
   standard properties for browsers that take them, the WebKit ones for the
   rest. Both are ignored where unsupported, which leaves the default. */
.toc{scrollbar-width:thin;scrollbar-color:transparent transparent}
.toc:hover,.toc:focus-within{scrollbar-color:#E3E9EE transparent}
.toc::-webkit-scrollbar{width:6px}
.toc::-webkit-scrollbar-track{background:transparent}
.toc::-webkit-scrollbar-thumb{background:transparent;border-radius:0}
.toc:hover::-webkit-scrollbar-thumb,.toc:focus-within::-webkit-scrollbar-thumb{
  background:#E3E9EE}
.toc:hover::-webkit-scrollbar-thumb:hover{background:#5A6B7A}
.toc h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#5A6B7A;margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.toc ol a{color:#1B1B1B;text-decoration:none;font-size:14.5px;line-height:1.4;display:block;
  border-left:2px solid #E3E9EE;padding-left:11px}
.toc ol a:hover{border-color:#3C83FF;color:#1155CC}
/* sub-headings sit a level in, lighter, so the list reads as a structure
   rather than one flat run of links */
.toc li.l3{margin-left:13px}
.toc li.l3 a{font-size:13px;color:#5A6B7A;line-height:1.35}
.toc li.l3 a:hover{color:#1155CC}

article h2{font-size:clamp(22px,2.6vw,29px);line-height:1.25;margin:38px 0 12px;letter-spacing:-.01em;
  scroll-margin-top:var(--stick);text-wrap:balance}
article h3{font-size:20px;margin:26px 0 8px;scroll-margin-top:var(--stick)}
article h4{font-size:17px;margin:20px 0 6px}
article p{margin:0 0 15px;max-width:72ch}
/* the 404's link lists: columns, so two dozen towns do not become two dozen
   lines of scrolling on the page somebody landed on by accident */
ul.fourofour{list-style:none;padding:0;margin:0 0 22px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 18px}
ul.fourofour li{margin:0}
ul.fourofour a{display:block;padding:7px 0;border-bottom:1px solid #E3E9EE}
/* The floating reCAPTCHA badge is a fixed box over the bottom-right of every
   page a form appears on. Hidden, with the attribution Google requires in
   its place inside the form itself. */
.grecaptcha-badge{visibility:hidden}
.recap{margin:12px 0 0;font-size:12px;line-height:1.5;color:#5A6B7A}
.recap a{color:inherit;text-decoration:underline}
/* a clause set entirely in capitals, kept that way because it has to be and
   made readable because it does not have to be painful: capitals need more
   letter-spacing and more leading than lower case, and a rule down the side
   says "this is the shouted part" faster than the capitals themselves do */
article p.caps{font-size:.93em;letter-spacing:.02em;line-height:1.75;
  border-left:3px solid #E3E9EE;padding:2px 0 2px 16px;margin:22px 0;
  color:#5A6B7A}
/* Source lists carry the bare URL as their own link text, and one of those
   is wider than a phone screen. Long unbroken strings break rather than
   pushing the whole page sideways. */
article{overflow-wrap:break-word}
article a{overflow-wrap:anywhere}
article ul,article ol{margin:0 0 16px;padding-left:22px;max-width:72ch}
article li{margin:0 0 7px}
article img{margin:18px 0;display:block}
article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px}
article th,article td{border:1px solid #E3E9EE;padding:10px 12px;text-align:left}
article th{background:#F2F6FD}
blockquote{margin:20px 0;padding:14px 20px;border-left:4px solid #3C83FF;background:#F2F6FD;
  }
.tblwrap{overflow-x:auto}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:26px 0}
.card{border:1px solid #E3E9EE;padding:18px 20px;background:#fff;
  text-decoration:none;color:#1B1B1B;display:block}
.card:hover{border-color:#3C83FF;box-shadow:0 4px 18px rgba(17,173,243,.16)}
.card b{display:block;font-size:17px;margin-bottom:4px}
.card span{color:#5A6B7A;font-size:14.5px}

.band{background:#1155CC;color:#fff;padding:64px 0;margin-top:44px;text-align:center}
/* no white gap when the section above already runs edge to edge */
.band.flush{margin-top:0}
.band h2{margin:0 0 10px;font-size:clamp(21px,2.4vw,27px);font-style:italic}
.band p{margin:0 0 28px;opacity:.94}
/* the two buttons sit as a centered pair rather than an inline run */
.band .wrap{display:flex;flex-direction:column;align-items:center}
.band .ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.band .cta{color:#1155CC}
.band .cta::before{background:#fff}
.band .cta:hover{color:#1155CC}
.band .cta:hover::before{background:#E7EEFF}

.quote{border:1px solid #E3E9EE;padding:22px;background:#F2F6FD;margin:34px 0}
.quote h2{margin:0 0 4px;font-size:22px}
.quote p.sub{color:#5A6B7A;margin:0 0 16px;font-size:15.5px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
label{font-size:13.5px;font-weight:600}
input,select,textarea{font:inherit;font-size:15.5px;padding:10px 12px;border:1px solid #E3E9EE;
  background:#fff;color:#1B1B1B;width:100%}
textarea{min-height:110px;resize:vertical}
button.submit{margin-top:14px;color:#fff;border:0;background:transparent;
  padding:12px 26px;font-weight:700;font-size:16px;cursor:pointer}
button.submit::before{background:#1155CC}
button.submit:hover::before{background:#3C83FF}
.formnote{font-size:13.5px;color:#5A6B7A;margin-top:10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{margin-top:12px;padding:11px 14px;font-size:15px;line-height:1.5;
  border:1px solid}
.formmsg.ok{background:#E9F6EF;border-color:#BFE6D2;color:#1c6b41}
.formmsg.err{background:#FCEBEB;border-color:#F3CFCF;color:#a41b1b}
.apply fieldset{border:0;border-top:1px solid #E3E9EE;margin:22px 0 0;padding:18px 0 0}
.apply fieldset:first-of-type{border-top:0;margin-top:0;padding-top:0}
.apply legend{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#5A6B7A;padding:0}
.apply .hint{font-size:13px;color:#5A6B7A;margin:6px 0 0}
.apply .cert{font-size:13.5px;line-height:1.6;color:#5A6B7A;background:#fff;
  border:1px solid #E3E9EE;padding:14px 16px;max-height:190px;overflow:auto;
  margin:10px 0 14px}
.apply .check label{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:500;
  cursor:pointer;line-height:1.45}
.apply .check input{width:auto;flex:none;margin-top:3px}
.apply input[type=file]{padding:9px 10px;background:#fff}

footer.site{background:rgba(60,91,208,.92);background-size:cover;background-position:center;
  color:#fff;padding:46px 0 24px;margin-top:0}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}
.fcol h2{font-size:19px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:0;text-transform:none}
.fcol.office h2{font-size:24px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fcol a{color:#fff;text-decoration:none;font-size:15.5px}
.fcol a:hover{color:#BFE3FF;text-decoration:underline}
.fcol address{font-style:normal;font-size:15.5px;color:rgba(255,255,255,.92);line-height:1.6}
.fbrand img{height:34px;width:auto;margin:0 0 12px;display:block}
.fmission{font-size:15px;color:rgba(255,255,255,.9);margin:0 0 14px;max-width:34ch;line-height:1.55}
.fsoc{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.fsoc a{color:#fff;display:inline-flex;padding:4px}
.fsoc a:hover{color:#9EDCFF;text-decoration:none}
.fhours{margin:16px 0 0;font-size:14.5px;color:rgba(255,255,255,.92);line-height:1.55}
.floc{margin-top:10px}
.legal{border-top:1px solid rgba(255,255,255,.28);margin-top:32px;padding-top:16px;font-size:14px;
  color:rgba(255,255,255,.88);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.legal a{color:rgba(255,255,255,.88);text-decoration:none}
.legal a:hover{color:#fff;text-decoration:underline}

.badges{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:20px 0}
.badges img{height:46px;width:auto;margin:0}

/* One accordion, everywhere: a skewed royal chevron that turns as the
   answer opens - drawn as an SVG, so no font has to carry the glyph. */
.faq{background:#F2F6FD;padding:22px 26px;margin:26px 0}
.faq details{border:0;border-bottom:1px solid #E3E9EE;margin:0;background:none}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;align-items:flex-start;gap:14px;padding:11px 0;font-size:16px;
  color:#26324B;font-weight:700;cursor:pointer;list-style:none;line-height:1.4;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";display:inline-flex;width:27px;height:23px;flex:none;
  background:#1155CC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5l5 4.5-5 4.5' stroke='white' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center/9px no-repeat;
  transform:skewX(-10deg);transition:transform .15s ease}
.faq summary::after{content:none}
.faq details[open] summary::before{transform:skewX(-10deg) rotate(90deg)}
.faq .ans{padding:0 0 12px 41px;color:#5A6B7A}
.faq .ans p{margin:0 0 10px}

@media(max-width:1024px){.tb .tagline{display:none}.tb{justify-content:space-between;
  min-height:0}.tb .login,.tb .ls{position:static;transform:none}
  .brand{align-self:flex-start;margin-bottom:0;padding:12px 30px 12px 18px}
  .bar{flex-wrap:nowrap}
  .bar .tel{margin-left:auto}}
@media(max-width:640px){.wrap.full{padding:0 16px}.brand{margin-left:-16px}}
/* ------------------------------------------------------- homepage */
.hhero{background-image:url('/img/home-hero-sm.fb8312e581.jpg');
  background-size:cover;background-position:center;color:#fff;padding:74px 0 120px;
  position:relative;overflow:hidden}
.hhero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(16,25,60,.5),rgba(16,25,60,.72))}
.hhero>.wrap{position:relative;z-index:2}
@media(min-width:900px){.hhero{background-image:url('/img/home-hero.00d8b3f366.jpg')}}
.vidbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.vidbg iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100vw,178vh);height:max(56.25vw,100vh);border:0}
@media (prefers-reduced-motion:reduce){.vidbg{display:none}}
@media print{.vidbg{display:none}}
.hero-badge-link{display:inline-block;line-height:0}
.hhero .stars{color:#F5B82E;font-size:24px;letter-spacing:5px}
/* The rating badge, and a way through to the profile it comes from. The
   slab leans on the site's angle while the mark and the type stay upright,
   which is what .skew::before is for. The count sits under the stars and is
   set smaller so the two lines together stand the same height as the mark
   beside them. */
.hhero .grate{display:flex;width:max-content;max-width:100%;align-items:center;
  gap:13px;margin:0 0 16px;padding:8px 24px 8px 12px;color:#fff;text-decoration:none}
.hhero .grate::before{background:rgba(11,20,48,.62);
  border:1px solid rgba(255,255,255,.5)}
.hhero .grate:hover::before{background:rgba(17,173,243,.3);border-color:#fff}
.hhero .gmark{width:38px;height:38px;background:#fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.hhero .gmark img{width:23px;height:23px;margin:0;display:block}
.hhero .gnums{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.hhero .grow{display:flex;align-items:center;gap:8px}
.hhero .grate .stars{font-size:16px;letter-spacing:2px}
.hhero .grate b{font-size:15px;font-weight:800;color:#fff;letter-spacing:.01em}
.hhero .gcount{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92)}
/* the homepage headline runs larger than the rest of the site's h1s, which
   stay at 48px - it carries the page on its own */
.hhero h1{max-width:19ch;font-size:clamp(32px,5.2vw,60px)}
.hhero .lede{color:#E7EEFF;font-size:19px;max-width:60ch;font-style:italic;font-weight:600}
.hhero .hcta{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
.hhero .ghost,.svchero .ghost{font-weight:700;color:#fff;text-decoration:none;padding:12px 24px;font-size:15.5px;
  text-transform:uppercase;letter-spacing:.02em;display:inline-block;white-space:nowrap}
.hhero .ghost::before,.svchero .ghost::before{border:1px solid #3C83FF;background:rgba(16,25,60,.35)}
.hhero .ghost:hover::before,.svchero .ghost:hover::before{background:rgba(17,173,243,.25)}
/* The rating under a service-page H1. Reads on the photographic hero the
   service pages carry and on the flat one the hubs use, so it paints its own
   ground rather than trusting whatever is behind it. */
.svcrate{display:inline-flex;align-items:center;justify-content:center;
  gap:9px;margin:12px 0 0;line-height:1;
  padding:7px 16px;border-radius:999px;text-decoration:none;
  background:rgba(11,20,48,.62);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(3px)}
.svcrate:hover{background:rgba(17,173,243,.32);border-color:#fff}
.svcrate .gmark{width:16px;height:16px;flex:none;display:block}
.svcrate .srow{width:70px;height:13.5px;flex:none;display:block;fill:#F5B82E}
/* Set solid at line-height:1 so each item's box is exactly its own font-size
   tall, and the drawn stars centre against the figure rather than against
   whatever leading the font asked for. */
.svcrate b{color:#fff;font-weight:800;font-size:15px}
.svcrate span{color:rgba(255,255,255,.88);font-size:13px}
@media (max-width:560px){
  .svcrate{gap:7px;padding:6px 12px}
  .svcrate .gmark{width:14px;height:14px}
  .svcrate .srow{width:60px;height:11.5px}
  .svcrate span{font-size:12px}
}

.hbadges{margin-top:-64px;position:relative;z-index:5}
.hbadges .card{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center;justify-content:center;
  flex-wrap:nowrap;position:relative;z-index:0;background:none;border:0;box-shadow:none;
  /* The white slab is the card's own box, so at the content width it ran a
     long way past the last mark on either side. It takes the width of the
     marks it holds instead, and stays centered under the hero. */
  width:max-content;max-width:100%;margin-left:auto;margin-right:auto;
  /* The slab is inset:0 on this box, so with no padding it hugged the marks
     and the row read as cramped. The horizontal figure is larger than the
     vertical on purpose: the slab is skewed 6 degrees, so its left and right
     edges lean IN over the first and last mark, and the padding has to clear
     the lean as well as leave a margin. */
  padding:24px clamp(34px,4.6vw,62px)}
@media(max-width:700px){
  .hbadges .card{display:grid;grid-template-columns:1fr 1fr;justify-items:center;
    align-items:center;gap:22px 16px;padding:26px 20px;width:auto}
  .hbadges .nadca-smart{grid-column:1/-1}
}

.hbadges .card::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-6deg);
  background:#fff;border:1px solid #E3E9EE;box-shadow:0 20px 48px rgba(16,25,60,.26)}
.hbadges img{margin:0}
section.hs{padding:52px 0}
section.hs h2{font-size:clamp(26px,3vw,36px);font-style:italic;margin:0 0 6px;text-align:center;
  color:#1B2B66}
section.hs .hsub{text-align:center;color:#5A6B7A;margin:0 0 26px}
.svcgrid .card img{width:auto;height:170px;object-fit:cover;display:block;
  margin:-18px -20px 14px;max-width:none;width:calc(100% + 40px)}
.svcgrid .card b{font-size:17.5px}
.svcgrid .card span{display:block;margin-top:5px}
.hpull{background:#1155CC;color:#fff;padding:52px 0}
/* 105ch, not the 68ch a column of body text wants. This is 33px centred
   display type, and at 68ch the quote ran eight lines and pushed the name
   and date most of a screen down. 105ch is the point where it stops
   helping: 105 and 125 both settle on five lines, so the extra width buys
   longer lines and nothing else. */
.hpull blockquote{border:0;background:none;margin:0;padding:0;max-width:105ch;margin:0 auto;
  text-align:center}
.hpull .q{font-size:clamp(23px,3vw,33px);font-style:italic;font-weight:700;line-height:1.35}
/* The platform's mark opens the card; the portrait now closes it, sitting
   directly above the name so the face and the person read as one unit. */
.hpull .pplat{display:block;margin:0 auto 14px;object-fit:contain}
.hpull .pav{width:64px;height:64px;object-fit:cover;display:flex;margin:28px auto 10px}
/* The photograph takes the same lean as the initials chip beside it, cut
   rather than skewed - a skewX on a portrait warps the face. */
.hpull img.pav{clip-path:polygon(11% 0,100% 0,89% 100%,0 100%)}
/* a real portrait is shown whole - the skew would cut across the face */
.hpull img.pav.rpic{clip-path:none;object-fit:contain}
.hpull span.pav{align-items:center;justify-content:center;background:#3C83FF;color:#fff;
  font-weight:800;font-size:22px;transform:skewX(-6deg)}
.hpull .a{margin:0;opacity:.9;font-weight:600}
/* The date sits under the name, quieter than it. It is not decoration: a
   review the reader can date is a review they can weigh, and without it the
   card could be a testimonial from any year. Opacity rather than a grey,
   because the ground here is the brand navy and #5A6B7A is for paper. */
.hpull .pd{margin:3px 0 0;opacity:.62;font-size:13px;letter-spacing:.04em}
.hpull .stars{color:#F5B82E;font-size:22px;letter-spacing:4px}
.hcommit{background:#fff}
.htesti{background:#F2F6FD}
.cgrid{display:grid;gap:36px;align-items:center}
@media(min-width:920px){.cgrid{grid-template-columns:1fr 1fr}}
section.hs .cgrid h2,section.hs .cgrid .hsub{text-align:left}
.cgrid>img{width:100%;height:auto;margin:0}
.hcommit .hfeat{grid-template-columns:repeat(2,1fr)}
/* the section headings in the two-column blocks are royal italic, as live */
.cgrid h2{color:#1155CC;font-size:clamp(26px,3vw,36px)}
.cgrid .blead{color:#1155CC}
/* the section photographs carry the brand diagonal: commitment cut on its
   right edge, the FAQ photo cut on its left - opposite, as asked */
.cgrid>img.cut-r{clip-path:polygon(0 0,100% 0,calc(100% - 58px) 100%,0 100%);
  height:100%;min-height:440px;object-fit:cover}
.cgrid>img.cut-l{clip-path:polygon(58px 0,100% 0,100% 100%,0 100%);
  height:100%;min-height:440px;object-fit:cover}
/* commitment features: the live row style - rosette check + bold italic text */
.hfeat div{padding:6px 0;display:flex;align-items:center;gap:12px;
  font-style:italic;font-weight:700;font-size:18px;color:#26324B}
.hfeat img{margin:0;flex:none}
/* faq: bare rows with the skewed chevron bullet */
.hfaq{background:#fff}
/* the hero centers on its axis - headline, subtitle, then the
   accreditation badge - and the subtitle runs its full width so it holds
   one line on a desktop */
.hubhero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.hubhero>div{min-width:0;width:100%}
.hubhero .lede{max-width:none;margin-left:auto;margin-right:auto}
.hero-badge,.hero-badges img{max-height:84px;width:auto;flex:none;margin:0}
.hero-badges{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap}
@media(max-width:900px){.hubhero{gap:16px}
  .hero-badge,.hero-badges img{max-height:56px}.hero-badges{gap:14px}}
/* the copy above the service list centers with it */
.hubintro{margin:0 0 10px;text-align:center}
.hubintro p{max-width:78ch;margin-left:auto;margin-right:auto}
.hubintro img{max-height:76px;width:auto;margin:14px auto 0;display:block}
/* The FAQ is a full-bleed band, like the homepage sections: the soft ground
   runs edge to edge while the copy stays at the content width, and the
   heading and standfirst sit inside the panel rather than above it. */
.hubfaqs{margin:44px 0 0;background:#F2F6FD;padding:52px 0}
.hubfaqs .faq.hubfaq{background:none;margin:0;padding:0}
.hubfaq>h2{margin:0 0 6px;font-size:clamp(21px,2.3vw,27px)}
.hubfaq .faqsub{margin:0 0 20px;color:#5A6B7A;max-width:78ch}
@media(max-width:700px){.hubfaqs{padding:34px 0}}
/* the chips filter in place; nothing is fetched and nothing is removed */
.faqfilter{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 22px}
.fchip{font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;border:1px solid #E3E9EE;
  background:#fff;color:#1B1B1B;padding:9px 15px;transform:skewX(-10deg);min-height:40px;
  display:inline-flex;align-items:center;gap:7px}
.fchip>*{transform:skewX(10deg)}
.fchip i{font-style:normal;font-size:11.5px;color:#5A6B7A;font-weight:600}
.fchip:hover{border-color:#3C83FF;color:#1155CC}
.fchip.on{background:#1155CC;border-color:#1155CC;color:#fff}
.fchip.on i{color:#C9D6FF}
/* a service page's own questions, and the line back from a single question */
.svcfaq{background:#F2F6FD;margin-top:0}
.svcfaq .more{margin:22px 0 0}
.faqback{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin:34px 0 0;padding:20px 24px;background:#F2F6FD;
  border-left:4px solid #3C83FF}
.faqback span{color:#5A6B7A;font-size:14.5px}
.faqback b{color:#002972;font-size:16px;display:block;margin-top:2px}
/* About Us reads as bands like the rest of the site, alternating ground. */
.abintro{background:#fff}
.abmission{background:#F2F6FD}
/* the pair reads as a spread: copy and photograph swapping sides, each
   photograph cut on the edge that faces its text */
.abintro .cgrid,.abmission .cgrid{align-items:center}
.abintro .cgrid h2,.abmission .cgrid h2{margin-top:0}
.abintro .cgrid h3{font-size:19px;color:#002972;margin:14px 0 8px}
.abintro .cgrid p,.abmission .cgrid p{color:#5A6B7A;line-height:1.7;margin:0 0 14px;
  max-width:56ch}
.abmission .more{margin:18px 0 0}
@media(max-width:919px){
  /* stacked, the diagonal would slice the top of the photograph */
  .abintro .cgrid>img,.abmission .cgrid>img{clip-path:none;min-height:0;height:auto}
  .abmission .cgrid>img{order:2}
}
.absvc{background:#fff}
.abwhy{background:#F2F6FD}
.abareas{background:#fff}
.aboffices{background:#F2F6FD}
.abcopy{max-width:78ch}
.abcopy h3{font-size:19px;color:#002972;margin:22px 0 6px}
.abcopy h3:first-child{margin-top:0}
.abcopy p{margin:0 0 12px;color:#5A6B7A;line-height:1.7}
.abcopy ul{margin:0 0 12px;padding-left:20px;color:#5A6B7A}
.wgrid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:760px){.wgrid{grid-template-columns:repeat(3,1fr)}}
.wcard{background:#fff;padding:24px;border-left:4px solid #3C83FF}
.wcard img{width:52px;height:52px;object-fit:contain;margin:0 0 12px;display:block}
.wcard b{display:block;font-size:17px;color:#002972;margin-bottom:8px}
.wcard p{margin:0;color:#5A6B7A;font-size:14.5px;line-height:1.6}
.abareas .silolist{margin-top:14px}
.abareas .more{margin-top:22px;text-align:center}
.ogrid{display:grid;gap:18px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:620px){.ogrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ogrid{grid-template-columns:repeat(5,1fr)}}
.ocard{background:#fff;padding:20px;border-top:3px solid #1155CC}
.ocard b{display:block;font-size:16px;color:#002972;margin-bottom:6px}
.ocard p{margin:0 0 8px;color:#5A6B7A;font-size:14px;line-height:1.5}
.ocard a{color:#1155CC;font-weight:700;font-size:15px;text-decoration:none}
.ocard a:hover{text-decoration:underline}

/* the reviews index: one card per reviewer, in their own words */
.reviewgrid{display:grid;gap:18px;grid-template-columns:1fr;margin:10px 0 0}
@media(min-width:700px){.reviewgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.reviewgrid{grid-template-columns:repeat(3,1fr)}}
.rcard{background:#fff;border:1px solid #E3E9EE;padding:20px;display:flex;
  flex-direction:column;gap:12px}
/* [hidden] is a UA rule and loses to the display above, so the filter has
   to say it here or nothing disappears */
.rcard[hidden]{display:none}
.rcard .thead{display:flex;align-items:flex-start;gap:11px}
/* portraits are circular as their platform supplies them; the brand's skew
   would slice the face, so they are shown whole */
.rcard .rpic{width:48px;height:48px;flex:none;object-fit:contain;margin:0}
.rcard .rdate{color:#5A6B7A;font-size:12px;opacity:.85;line-height:1.25}
/* Photographs the reviewer attached to their own review. Square-cropped to
   a strip so a card with three keeps the shape of one with none; each opens
   the full frame. */
.rshots{display:flex;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.rshots a{display:block;line-height:0;border:1px solid #E3E9EE}
.rshots a:hover{border-color:#3C83FF}
.rshots img{width:74px;height:74px;object-fit:cover;margin:0;display:block}
.rshots a{cursor:zoom-in}
/* The lightbox is a native <dialog>, so the browser supplies the modal
   focus trap and Escape and the script only has to move between
   photographs. With JavaScript off the thumbnails stay ordinary links to
   the full image, which is what they were before. */
.lbox{border:0;padding:0;background:none;max-width:96vw;max-height:96vh;
  overflow:visible;color:#fff}
.lbox::backdrop{background:rgba(11,20,48,.94)}
.lbwrap{position:relative}
.lbfig{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0}
.lbox img{display:block;margin:0;max-width:min(1080px,92vw);max-height:80vh;
  width:auto;height:auto;background:#0B1430}
.lbbar{display:flex;align-items:center;gap:14px;font-size:14px;min-height:40px}
.lbcap{margin:0;color:#C9D6EC;min-width:5ch;text-align:center}
.lbox button{font:inherit;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.34);width:40px;height:40px;cursor:pointer;
  line-height:1;font-size:20px;padding:0}
.lbox button:hover{background:rgba(255,255,255,.26)}
.lbox button:focus-visible{outline:2px solid #3C83FF;outline-offset:2px}
.lbclose{position:absolute;top:-50px;right:0}
@media(max-width:640px){.lbclose{top:-46px}.lbox img{max-height:70vh}}
/* the platform's mark, which is the way back to the review it came from */
.rcard .rplatl{margin:0 0 0 auto;flex:none;display:block;line-height:0}
.rcard .rplatl .rplat{margin:0}
.rcard .rplatl:hover{opacity:.72}
.rcard .rplatl:focus-visible{outline:2px solid #3C83FF;outline-offset:3px}
/* Reviews arrive a screenful at a time. Every one of them is in the page -
   this hides the rest rather than fetching anything - so a reader without
   JavaScript, and anything reading the HTML, still gets all of them. */
.rload{display:block;margin:28px auto 0;font:inherit;font-size:14px;
  font-weight:700;cursor:pointer;background:#fff;color:#1155CC;
  border:1px solid #E3E9EE;padding:12px 26px}
.rload[hidden]{display:none}
.rload:hover{border-color:#3C83FF;background:#1155CC;color:#fff}
.rload:focus-visible{outline:2px solid #3C83FF;outline-offset:2px}
.rload i{font-style:normal;font-weight:600;opacity:.7;margin-left:7px}
/* The contact page. Call first, then the offices, then the form: the page it
   replaces gave five branches a heading and a street address each and not one
   telephone number between them, and put the form last of all. */
.chero .lede{max-width:58ch}
.cacts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px}
.chours{font-size:14.5px;color:#DCE8F6}
.chours b{color:#fff;font-weight:700}
.crate{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:#fff;
  border:1px solid rgba(255,255,255,.34);padding:7px 14px}
.crate .stars{color:#F5B82E;letter-spacing:2px;font-size:14px}
.crate b{font-weight:800}
.cbranch{padding:32px 0 4px}
.cbhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.cbhead h2{margin:0;font-size:22px}
.cbhead p{margin:0;color:#5A6B7A;font-size:14.5px}
/* The offices as a map and a numbered list, the numbers shared between them.
   Drawn rather than embedded - see office_map for why. */
.cmapduo{display:grid;gap:26px;align-items:start}
/* One split for both rows, so the form below sits exactly under the map. */
@media(min-width:900px){.cmapduo,.cduo{grid-template-columns:1fr 1fr}}
/* The map is a picture we host, with the pins placed over it. It carries a
   real basemap because a drawn one cannot show roads, water or the towns
   either side - see office_map and tools/fetch_map.py. */
.cmap{margin:0;border:1px solid #E3E9EE;background:#fff;padding:9px}
.cmapimg{position:relative;line-height:0}
.cmapimg img{display:block;width:100%;height:auto;margin:0}
/* Corvallis and Albany are fifteen miles apart, which is 27px at this zoom,
   so the pins are sized to sit beside each other rather than overlap.

   Every rule below is scoped to .cmapimg, and has to stay that way. The
   drawn map on /services-areas/ calls its pins .mpin too, and an unscoped
   .mpin{transform:translate(-50%,-50%)} reached them: inside an SVG those
   percentages resolve against the viewBox, so all 25 towns moved 590 by 450
   user units up and left, off the map and into the ocean. Nothing errored
   and the page still scored fine; it just showed the wrong Oregon. */
.cmapimg .mpin{position:absolute;transform:translate(-50%,-50%);width:21px;height:21px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#3C83FF;color:#fff;font-size:11.5px;font-weight:800;line-height:1;
  text-decoration:none;box-shadow:0 0 0 1.5px #fff,0 1px 4px rgba(11,20,48,.45)}
.cmapimg .mpin.hq{background:#1155CC}
.cmapimg .mpin:hover{background:#002972;z-index:2}
.cmapimg .mpin:focus-visible{outline:2px solid #002972;outline-offset:3px;z-index:2}
.cmap figcaption{margin:8px 2px 0;font-size:11.5px;color:#5A6B7A;line-height:1.3}
/* the card a pin opens: the same details as its row in the list */
.cmapimg .mpop{position:absolute;z-index:4;width:238px;max-width:78%;background:#fff;
  border:1px solid #E3E9EE;box-shadow:0 10px 28px rgba(11,20,48,.3);
  padding:12px 14px 13px;line-height:1.45;
  transform:translate(-50%,calc(-100% - 17px))}
.cmapimg .mpop.below{transform:translate(-50%,17px)}
.cmapimg .mpop[hidden]{display:none}
.cmapimg .mpop::after{content:"";position:absolute;left:50%;width:11px;height:11px;background:#fff;
  transform:translateX(-50%) rotate(45deg)}
.cmapimg .mpop:not(.below)::after{bottom:-6.5px;border-right:1px solid #E3E9EE;
  border-bottom:1px solid #E3E9EE}
.cmapimg .mpop.below::after{top:-6.5px;border-left:1px solid #E3E9EE;border-top:1px solid #E3E9EE}
.cmapimg .mpop .bphone{min-height:0;font-size:16.5px}
.cmapimg .mpop address{font-style:normal;font-size:13px;color:#5A6B7A;margin:4px 0 7px;
  line-height:1.45}
.cmapimg .mpopx{position:absolute;top:3px;right:5px;background:none;border:0;font:inherit;
  font-size:18px;line-height:1;color:#5A6B7A;cursor:pointer;padding:3px 5px}
.cmapimg .mpopx:hover{color:#002972}
.cmapimg .mpopx:focus-visible{outline:2px solid #3C83FF;outline-offset:1px}
.branchlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* number | city and phone | address | directions, aligned down the list */
/* Each row is its own grid, so the city column is a fixed width rather than
   sized to its content: "Corvallis HEAD OFFICE" is wider than "Albany", and
   auto widths would step the addresses in and out down the list. */
.brow{display:grid;grid-template-columns:26px 158px minmax(0,1fr) auto;
  gap:4px 14px;align-items:center;padding:12px 0;border-bottom:1px solid #E3E9EE}
.brow:first-child{padding-top:0}
.brow:last-child{border-bottom:0}
.bnum{grid-row:span 1;width:26px;height:26px;display:inline-flex;align-items:center;
  justify-content:center;background:#3C83FF;color:#fff;font-size:13.5px;font-weight:800}
.brow.hq .bnum{background:#1155CC}
.binfo{display:flex;flex-direction:column;gap:1px;min-width:0}
.bline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bcity{font-size:16.5px;color:#002972}
.brow address{font-style:normal;font-size:13.5px;color:#5A6B7A;line-height:1.4;min-width:0}
.hqtag{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#1155CC}
/* the number is the point of the row, and on a phone it has to be big enough
   to hit: a bare link of text was 28px tall */
.bphone{font-size:16.5px;font-weight:800;color:#1155CC;text-decoration:none;
  display:inline-flex;align-items:center;min-height:30px}
.bphone:hover{text-decoration:underline}
.bdir{font-size:13px;font-weight:700;color:#1155CC;text-decoration:none;white-space:nowrap}
.bdir::after{content:" ›"}
.bdir:hover{text-decoration:underline}
/* A city hub used to be a heading and eight links: nothing said where we are
   or how to call. This is the office that covers the city, from the roster. */
.huboffice{border:1px solid #E3E9EE;background:#F2F6FD;padding:17px 19px;margin:26px 0 0;
  display:flex;flex-wrap:wrap;gap:7px 28px;align-items:baseline}
.huboffice h2{flex-basis:100%;margin:0 0 3px;font-size:12px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#1155CC}
.huboffice address{font-style:normal;font-size:14px;color:#5A6B7A;line-height:1.45}
.huboffice .hrs{font-size:13.5px;color:#5A6B7A}
.cmapnote{margin:18px 0 0;font-size:14.5px;color:#5A6B7A}
.cmapnote a{color:#1155CC;font-weight:700;text-decoration:none}
.cmapnote a:hover{text-decoration:underline}
@media(max-width:700px){
  .bphone{min-height:44px;font-size:18px}
  .brow{grid-template-columns:26px 1fr;gap:2px 10px;align-items:start}
  .brow address,.brow .bdir{grid-column:2}
  .bdir{justify-self:start;margin-top:3px}
}
.cduo{display:grid;gap:26px;padding:28px 0 12px;align-items:start}
.cform .quote{margin:0}
.cside{display:flex;flex-direction:column;gap:14px}
.cpanel{border:1px solid #E3E9EE;background:#F2F6FD;padding:16px 17px}
.cpanel h2{margin:0 0 9px;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#1155CC}
.cpanel p{margin:0 0 6px;font-size:14.5px;color:#5A6B7A}
.cpanel p:last-child{margin-bottom:0}
.cpanel a{color:#1155CC;font-weight:700;text-decoration:none}
.cpanel a:hover{text-decoration:underline}
.csoc{display:flex;gap:9px;margin-top:2px}
.csoc a{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:#1155CC;color:#fff}
.csoc a:hover{background:#3C83FF}
/* a reviewer's own page: the rating, where it was left, and the way back */
.rvbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px;
  padding-bottom:16px;border-bottom:1px solid #E3E9EE}
.rvbar .stars{color:#F5B82E;font-size:19px;letter-spacing:2px}
.rvbar .rvon{display:inline-flex;align-items:center;gap:7px;color:#5A6B7A;font-size:14px}
.rvbar .rvon img{margin:0;object-fit:contain}
.rvbar .rvdate{color:#5A6B7A;font-size:14px}
.rvback{margin:26px 0 0}
.rvback a{color:#1155CC;font-weight:600;text-decoration:none}
.rvback a:hover{text-decoration:underline}
/* align-items defaults to stretch, so one chip that wraps made every chip
   as tall as itself */
.revfilter{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 22px;justify-content:center;
  align-items:center}
.revfilter .fchip{min-height:0;padding:7px 14px;font-size:13px;white-space:nowrap}
/* the site's default img margin is 18px top and bottom, which inside a chip
   made it twice the height of the one without a logo */
.revfilter .fchip img{width:14px;height:14px;object-fit:contain;margin:0}
/* The filter and the sort share one bar, which ships hidden and is revealed
   by the script that drives them. Neither does anything without JavaScript,
   and a control that does nothing is worse than no control at all. */
.revbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 20px;margin:6px 0 22px}
.revbar[hidden]{display:none}
.revbar .revfilter{margin:0}
.revsort{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  font-weight:700;color:#5A6B7A;white-space:nowrap}
.revsort select{font:inherit;font-size:13px;font-weight:700;color:#002972;
  background:#fff;border:1px solid #E3E9EE;padding:7px 10px;cursor:pointer}
.revsort select:hover{border-color:#3C83FF}
.revsort select:focus-visible{outline:2px solid #3C83FF;outline-offset:2px}
.rcard .rplat{margin:0 0 0 auto;flex:none;width:26px;height:26px;object-fit:contain}
.rcard .tinit{width:48px;height:48px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;background:#1155CC;color:#fff;font-weight:800;font-size:17px;
  transform:skewX(-6deg)}
.rcard .twho{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.rcard .twho b{font-size:15.5px;color:#002972;line-height:1.2}
.rcard .stars{color:#F5B82E;letter-spacing:2px;font-size:14px;line-height:1.15}
.rcard p{margin:0;color:#5A6B7A;font-size:14.5px;line-height:1.6;flex:1}
/* a rating and a price, with nothing written - labeled as such */
.rcard .rprice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#1B1B1B;
  font-size:14.5px}
.rcard .rplabel{background:#F2F6FD;color:#5A6B7A;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;transform:skewX(-10deg)}
.rcard .rprice b{color:#002972}
.rcard .rmore{color:#1155CC;font-weight:600;font-size:13.5px;text-decoration:none}
.rcard .rmore:hover{text-decoration:underline}
/* The whole review is in the card. A long one is clamped so the cards keep a
   common shape, and the button under it opens the review whole. The clamp
   arrives with the script: with JavaScript off nothing is cut off, and the
   button that would open it never appears. */
.rcard .rtext.clamp{display:-webkit-box;-webkit-line-clamp:7;
  -webkit-box-orient:vertical;overflow:hidden}
.rfull{font:inherit;font-size:13.5px;font-weight:600;color:#1155CC;
  background:none;border:0;padding:0;cursor:pointer;align-self:flex-start}
.rfull:hover{text-decoration:underline}
.rfull:focus-visible{outline:2px solid #3C83FF;outline-offset:2px}
/* One review, opened whole. A native <dialog> as the lightbox is, so the
   browser supplies the focus trap and Escape. Its body carries .rcard, so
   the head, text and photographs cloned out of the card are styled by the
   card's own rules rather than by a second set that could drift from them. */
.rbox{border:0;padding:0;background:none;max-width:min(660px,92vw);color:#002972}
.rbox::backdrop{background:rgba(11,20,48,.88)}
.rbwrap{position:relative}
.rbox .rbbody{padding:26px;gap:14px;max-height:76vh;overflow:auto}
.rbox .rtext{font-size:15px;flex:none}
.rbclose{position:absolute;top:-46px;right:0;font:inherit;font-size:20px;line-height:1;
  width:40px;height:40px;padding:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34)}
.rbclose:hover{background:rgba(255,255,255,.26)}
.rbclose:focus-visible{outline:2px solid #3C83FF;outline-offset:2px}
@media(max-width:640px){.rbclose{top:-42px}.rbox .rbbody{padding:20px;max-height:70vh}}
.faqindex{margin:8px 0 0}
.faqindex .faqmore{margin:8px 0 0}
.faqindex .faqmore a{color:#1155CC;font-weight:600;font-size:14px}
.hfaq .faq{background:none;padding:0;margin:0}
.hfaq .faq summary,.hubfaq summary{display:flex;align-items:flex-start;gap:14px;padding:9px 0;font-size:16px;
  color:#26324B;font-weight:700;line-height:1.4}
.hfaq .faq summary::before{margin-top:0}
.hfaq .faq summary::before,.hubfaq summary::before{content:"";display:inline-flex;width:27px;height:23px;flex:none;
  background:#1155CC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1.5l5 4.5-5 4.5' stroke='white' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center/9px no-repeat;
  transform:skewX(-10deg);transition:transform .15s ease}
.hfaq .faq summary::after,.hubfaq summary::after{content:none}
.hfaq .faq details[open] summary::before,.hubfaq details[open] summary::before{transform:skewX(-10deg) rotate(90deg)}
.hfaq .faq .ans,.hubfaq .ans{padding:2px 0 12px 41px;color:#5A6B7A}
/* the NADCA smart badge, served and verified by Yoshki */
.nadca-smart{width:200px;max-width:100%;flex:none}
.nadca-smart>div{position:relative;padding-bottom:71.3%;height:0;overflow:hidden}
.nadca-smart iframe{position:absolute;top:0;left:0;width:100%;height:100%;
  border:0;margin:0;padding:0;background:transparent}
.hbadges img{max-height:clamp(46px,5.4vw,84px);width:auto;height:auto;flex:none}
.hfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:26px}

.htesti .cards{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.htesti .card{display:flex;flex-direction:column;gap:13px;padding:20px 22px}
.htesti .thead{display:flex;align-items:center;gap:12px}
.htesti .thead img{width:48px;height:48px;object-fit:cover;margin:0;flex:none;
  clip-path:polygon(11% 0,100% 0,89% 100%,0 100%)}
.htesti .tinit{width:48px;height:48px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;background:#1155CC;color:#fff;font-weight:800;font-size:17px;
  transform:skewX(-6deg)}
.htesti .twho{display:flex;flex-direction:column;gap:3px}
.htesti .twho b{font-size:15px;color:#1B2B66;margin:0}
.htesti .stars{color:#F5B82E;font-size:15px;letter-spacing:2px}
.htesti .rpic{width:48px;height:48px;flex:none;object-fit:contain;margin:0;clip-path:none}
/* Every card ends the same way. Three reviews of very different lengths -
   35 characters and 228 - left ragged amounts of nothing under the text;
   now the quote takes the room it needs and the attribution sits on the
   floor, so the cards line up along the bottom as well as the top. The
   minimum on the quote keeps a one-line review from looking like a
   mistake. */
.htesti p{min-height:4.65em}
.htesti .tfoot{margin-top:auto;padding-top:12px;border-top:1px solid #E3E9EE;
  display:flex;align-items:center;gap:8px;color:#5A6B7A;font-size:12.5px}
.htesti p{color:#1B1B1B;font-size:15px;line-height:1.55;margin:0}
.htesti .more{text-align:center;margin-top:22px}
.hsvc .more{text-align:center;margin-top:26px}
.htesti .tplat{width:15px;height:15px;margin:0;flex:none;object-fit:contain}
section.hs.hvalley{background:#F2F6FD;padding:0;position:relative}
.hvalley .maph{position:absolute;top:36px;left:50%;transform:translateX(-50%);z-index:3;
  margin:0;white-space:nowrap;padding:14px 34px;color:#1155CC}
.hvalley .maph::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-10deg);
  background:#fff;box-shadow:0 10px 30px rgba(16,25,60,.18)}
.areamap{display:block;width:100%;height:auto;margin:0}
.areamap .mland{fill:#EDF2FB}
.areamap .msea{fill:#B7DDF2}
.areamap .mriver{fill:none;stroke:#8FC6EA;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.areamap .mroad{fill:none;stroke:#fff;stroke-width:5;stroke-linejoin:round}
.areamap .mband{fill:#2749CB;fill-opacity:.12;stroke:#2749CB;stroke-opacity:.4;stroke-width:2.5}
.areamap .msealbl,.areamap .mrvlbl{font:700 13px "Myrid Pro","Segoe UI",sans-serif;fill:#5E9EC4;
  letter-spacing:.22em}
.areamap .mi5{font:800 12px "Myrid Pro","Segoe UI",sans-serif;fill:#9AA5C4}
.areamap .minset polygon{fill:#fff;stroke:#9AA5C4;stroke-width:1.5}
.areamap .minset rect{fill:#2749CB;fill-opacity:.18;stroke:#2749CB;stroke-width:1.5}
.areamap .minset text{font:700 12px "Myrid Pro","Segoe UI",sans-serif;fill:#8A93B4;letter-spacing:.14em}
.areamap .mpin rect{fill:#1155CC}
.areamap .mpin circle{fill:#fff}
.areamap .mpin text{font:600 17px "Myrid Pro","Segoe UI",sans-serif;fill:#1B2B66}
.areamap .mpin:hover rect{fill:#3C83FF}
.areamap .mpin:hover text{fill:#1155CC;text-decoration:underline}
.areamap .mco{font:italic 700 15px "Myrid Pro","Segoe UI",sans-serif;fill:#8A93B4;
  letter-spacing:.06em;text-transform:uppercase}

.hcontact .cwrap{display:grid;gap:34px;align-items:stretch}
@media(min-width:920px){.hcontact .cwrap{gap:0}}
@media(min-width:920px){.hcontact .cwrap{grid-template-columns:1fr 1fr}}
.hcontact .cbox{background:#F2F6FD;padding:36px 66px 34px 44px;height:100%;
  clip-path:polygon(0 0,100% 0,calc(100% - 58px) 100%,0 100%)}
.hcontact .cbox .hsub{margin-bottom:6px}
.hcontact .quote{margin:8px 0 0;background:none;border:0;padding:0;height:auto}
.cphoto{position:relative;display:flex;min-height:420px}
.cphoto img{width:100%;height:100%;object-fit:cover;margin:0;
  clip-path:polygon(58px 0,100% 0,100% 100%,0 100%)}
.ccard{position:absolute;left:36px;bottom:32px;padding:18px 30px;color:#26324B}
.ccard::before{background:#fff;box-shadow:0 12px 34px rgba(16,25,60,.24)}
.ccard b{display:block;color:#1155CC;font-size:19px;margin-bottom:4px}
.ccard address{font-style:normal;font-size:14.5px;line-height:1.65}
.ccard a{color:#26324B;text-decoration:none;font-weight:600}
.ccard a:hover{color:#1155CC;text-decoration:underline}

/* the live site's fixed Call Now, bottom left on every page - its transform
   matrix (0.1763 shear) is exactly the 10deg the button system uses */
.callfab{position:fixed;left:25px;bottom:15px;z-index:45;color:#fff;text-decoration:none;
  font-weight:700;font-size:15.5px;text-transform:uppercase;letter-spacing:.02em;
  padding:12px 22px;display:inline-flex;align-items:center;gap:8px}
.callfab::before{background:#1155CC;box-shadow:0 6px 20px rgba(16,25,60,.35)}
.callfab:hover::before{background:#3C83FF}
/* It sits out the first screenful and steps aside at the very bottom.
   The .fabjs class is added by the script, so with JavaScript off the
   button simply stays where it has always been rather than never
   appearing at all. */
.callfab{transition:opacity .22s ease,transform .22s ease,visibility .22s}
html.fabjs .callfab{opacity:0;visibility:hidden;transform:translateY(14px);
  pointer-events:none}
html.fabjs .callfab.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
@media print{.callfab{display:none}}
/* ------------------------------------------------ tablet and phones */
@media(max-width:919px){
  /* stacked full-width sections go straight-edged; the lean stays on
     buttons, the badge slab, the logo chip, avatars and bullets */
  .cgrid>img.cut-r,.cgrid>img.cut-l,.cphoto img{clip-path:none}
  .hcontact .cbox{clip-path:none;padding:30px 28px}
  /* section photographs bleed to the viewport edges and touch the
     neighboring section; the FAQ image moves on top of its questions */
  .cgrid>img{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
  section.hs.hcommit,section.hs.hfaq{padding-top:0}
  .hfaq .cgrid>img{order:-1}
  .hs .cgrid{gap:30px}
  /* the contact halves pair up edge to edge, corners touching */
  section.hs.hcontact{padding-bottom:0}
  .hcontact .cwrap{width:100vw;margin-left:calc(50% - 50vw);gap:0}
}
@media(max-width:919px) and (min-width:640px){
  .hcontact .cwrap{grid-template-columns:46fr 54fr}
  .hcontact .cbox{padding:30px 34px}
  .cphoto{min-height:380px}
}
.burger,.fly-head,.navtoggle{display:none}
@media(max-width:1024px){
  .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    cursor:pointer;padding:12px;margin-left:4px}
  .burger span{display:block;width:24px;height:2.5px;background:#fff}
  nav.main{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:80;
    display:block;background:linear-gradient(180deg,#16224F,#1D2E6E);
    transform:translateX(105%);transition:transform .25s ease;overflow-y:auto}
  .navtoggle:checked~nav.main{transform:none;box-shadow:-16px 0 50px rgba(0,0,0,.45)}
  html:has(.navtoggle:checked){overflow:hidden}
  .fly-head{display:flex;align-items:center;justify-content:space-between;
    background:#3C83FF;padding:14px 18px}
  .fly-head img{height:32px;width:auto}
  .fly-close{color:#fff;font-size:32px;line-height:1;cursor:pointer;padding:2px 10px}
  nav.main ul{display:block;padding:10px 10px 26px;margin:0}
  nav.main li{position:static}
  nav.main>ul>li>a{display:block;font-size:12.5px;letter-spacing:.12em;color:#9EDCFF;
    padding:16px 14px 6px;pointer-events:none}
  .caret{display:none}
  nav.main .sub,nav.main li:hover>.sub,nav.main li:focus-within>.sub,
  nav.main li:hover>.mega-panel{display:block;position:static;width:auto;min-width:0;
    background:none;box-shadow:none;padding:0;transform:none}
  nav.main .sub a,nav.main .mega-panel a{display:block;color:#fff;font-size:16.5px;
    font-weight:600;padding:10px 22px;text-transform:none;letter-spacing:0}
  nav.main .sub a:hover{background:rgba(255,255,255,.08);color:#fff}
  nav.main .mega-panel img{display:none}
  .mm-t b{color:#fff;font-size:16.5px}
  .mm-t small{display:none}
  nav.main .sub-all a{border-top:1px solid rgba(255,255,255,.16);color:#9EDCFF;
    margin-top:8px;padding-top:14px}
}
/* ------------------------------------------------------------ phones */
@media(max-width:640px){
  /* the bar carried 641px of content into a 390px viewport; every piece
     slims: smaller chip, icon-only call, tight quote, all one row */
  .bar{gap:8px}
  .wrap.full.bar{padding:16px 16px}
  .brand{margin-top:-16px}
  .brand{padding:8px 18px 8px 12px;margin-left:-16px}
  /* The bar cannot wrap here, so anything that does not fit gets cut off
     the right edge - which is what happened to the burger at 375px. The
     logo is the one piece that can give: it holds its size while there is
     room and shrinks only when squeezed, so nothing is ever clipped. */
  .bar .brand{flex:0 1 auto;min-width:0}
  .brand img{width:148px;max-width:100%;height:auto}
  /* Calling is already one tap away: CALL NOW is fixed to the bottom left
     of every page on a phone. A second phone button in the bar bought a
     duplicate at the price of the menu, so on phones the bar keeps the
     logo, the quote and the menu. */
  .bar .tel{display:none}
  .bar .cta{font-size:12px;padding:9px 9px;letter-spacing:0;margin-left:auto}
  .burger{padding:7px;margin-left:0}
  .tb .login{position:static;transform:none}
  .tb{justify-content:space-between;padding:3px 0;min-height:0}
  .tb .login,.ls a,.ls .ls-on{font-size:13px;padding:4px 2px}
  /* the hero breathes less on a phone */
  section.hhero{padding:46px 0 96px}
  .hhero .stars{font-size:19px}
  .hhero .grate{gap:11px;padding:7px 20px 7px 10px;margin-bottom:14px}
  .hhero .grate .stars{font-size:15px;letter-spacing:1px}
  .hhero .gmark{width:34px;height:34px}
  .hhero .gmark img{width:21px;height:21px}
  .hhero .lede{font-size:16.5px}
  /* the map keeps its size and pans instead of shrinking to 6px labels */
  section.hs.hvalley{padding-top:12px;overflow:hidden}
  .hvalley .maph{position:static;transform:none;white-space:normal;text-align:center;
    margin:0 16px 10px;padding:8px 16px;display:block}
  .areamap{width:100%;min-width:0}
  .areamap .mpin text{font:600 27px "Myrid Pro","Segoe UI",sans-serif}
  .areamap .mpin rect{width:20px;height:20px}
  .areamap .mco,.areamap .msealbl,.areamap .mrvlbl,.areamap .mi5{display:none}
  .cphoto{min-height:300px}
  /* services two-up, compact */
  .svcgrid{grid-template-columns:1fr 1fr;gap:12px}
  .svcgrid .card{padding:12px}
  .svcgrid .card img{height:96px;margin:-12px -12px 10px;width:calc(100% + 24px)}
  .svcgrid .card b{font-size:14.5px}
  .svcgrid .card span{font-size:12.5px;line-height:1.45}
  /* Touch targets: a finger needs about 44px, and several controls were
     half that. Padding grows rather than type, so nothing reflows. */
  .ls a,.ls .ls-on{min-height:44px;padding:8px 10px}
  .tb .login{min-height:44px}
  .fcol a,.legal a{display:inline-block;min-height:36px;line-height:36px}
  address a{display:inline-block;min-height:32px;line-height:32px}
  .fsoc a{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  nav.main .sub a,nav.main .mega-panel a{min-height:48px;display:flex;align-items:center}
  .hfaq .faq summary,.hubfaq summary{min-height:48px}
  .fly-close{min-width:44px;min-height:44px;display:flex;align-items:center;
    justify-content:center}
  .skip{min-height:44px}
  /* every section's call to action centers on a phone */
  .hhero .hcta,.svchero .hcta{justify-content:center;gap:14px}
  .hhero .hcta .cta,.hhero .hcta .ghost,
  .svchero .hcta .cta,.svchero .hcta .ghost{font-size:14.5px;padding:12px 18px}
  .hs p:has(>.cta){text-align:center}
  button.submit{display:block;margin-left:auto;margin-right:auto}
    }
@media(max-width:380px){
  .brand{padding:8px 14px 8px 10px}
  .bar .cta{font-size:11.5px;padding:9px 8px}
  .burger{padding:6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}



/* ========================================================================
   DRCAR design layer - drcarpetclean.com's chrome and layouts, measured on
   the live site at 1280px on 2026-09-10 (tools/_design_drcar.py, then the
   HOME MATCH PASS in tools/_home_match.py). Everything above is the SCAD
   build's structural stylesheet; the rules below come later in the cascade
   and replace its identity wherever the two meet.
   ======================================================================== */
:root{--navy:#002972;--blue:#3C83FF;--accent:#1155CC;--ink:#1B1B1B;--paper:#F3F3F3;
  --gray:#E4E4E4;--sky:#A4C5FF;--hdr:186px;--stick:calc(var(--hdr) + 14px)}
@media(max-width:1024px){:root{--hdr:140px}}
@media(max-width:640px){:root{--hdr:112px}}
body{font-family:"Myriad Pro","Segoe UI",system-ui,Arial,sans-serif;font-size:20px;line-height:1.5;color:var(--ink)}
/* one rhythm: 1.5 for running text everywhere, 1.2 for every heading */
p,li,dd,td,address,blockquote,.lede,.hsub{line-height:1.5}
h1,h2,h3,h4,h5,h6{line-height:1.2}
/* motion: sections and cards rise into view (html.rv-on is set by the
   script in the footer, so nothing is hidden without it) */
html.rv-on .rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
html.rv-on .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.rv-on .rv{opacity:1;transform:none;transition:none}}
/* 1280 rather than 1192: the next step up the ladder the rest of the
   layout already uses, and the width a 1440 screen holds comfortably
   with the page's own 20px gutters inside it. */
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
.wrap.full{max-width:none;padding:0 34px}
h1,h2,h3,h4,.eyebrow,.cta,.ghost,.tel,.login,.callfab,nav.main a,.fcol h2,.toc h2,
.tb .tagline,.quote h2,.sidesvcs h3,.counters b,.counters span,.since,.bigtel,.cbox h3,.pcard h3,
.scard h4,.whycard h4,.feat4 h4,.askband,.twho b,.fband h2,.plainh{
  font-family:"Address Sans Pro","Myriad Pro","Segoe UI",sans-serif}
h1{font-style:normal;font-weight:600;text-transform:uppercase;letter-spacing:0;line-height:1.2;
  font-size:clamp(34px,5.3vw,68px);text-wrap:balance}
h2,article h2,.hs h2{text-transform:uppercase;font-weight:600;color:var(--navy);letter-spacing:0;
  font-size:clamp(28px,3.75vw,48px);line-height:1.2;font-style:normal}
article h2{font-size:clamp(24px,3vw,36px)}
h3,article h3{font-weight:600;color:var(--navy);font-style:normal}
h4{font-weight:600;color:var(--navy);font-size:24px;line-height:1.2;margin:0 0 6px}
a{color:var(--accent)}
.eyebrow{color:var(--blue);font-size:24px;font-weight:600;line-height:1.2;margin:0 0 20px;text-transform:none}
.hsub{max-width:647px;margin:0 auto 14px}

/* ---- buttons: the live rectangles, 5px radius ------------------------ */
.skew::before,.cta::before,.tel::before,.ghost::before,.callfab::before,.silo a::before,.silo .here span::before,
.hhero .grate::before{content:none;display:none}
.cta,.ghost,.tel,.login,.callfab,.bar .cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 40px;border-radius:5px;border:1px solid var(--accent);background:var(--accent);color:#fff;
  font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:0;text-decoration:none;
  line-height:1;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
/* the one hover every button shares: it darkens to navy, lifts 2px and
   casts a short shadow; the white and outlined variants keep their own
   colours but lift the same way */
.cta:hover,.tel:hover,.callfab:hover,.login:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.cta:hover,.tel:hover,.callfab:hover,.login:hover,.ghost:hover,.fsoc a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,41,114,.28)}
.cta:active,.tel:active,.login:active{transform:translateY(0);box-shadow:none}
.cta.plain{text-transform:none;border-color:var(--blue)}
.cta.blue{background:var(--blue);border-color:var(--blue)}
.cta.navy{background:var(--navy);border-color:var(--blue)}
.cta.navy:hover{background:var(--accent)}
.cta.white{background:#fff;border-color:#fff;color:var(--ink)}
.cta.white:hover{background:var(--sky);border-color:var(--sky);color:var(--navy)}
.cta.ghost,.ghost{background:transparent;border:1px solid #fff;color:#fff;text-transform:none}
.cta.ghost:hover,.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.cta svg,.tel svg,.login svg,.ghost svg{width:1em;height:1em}
.hcta{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.tel{background:var(--blue);border-color:var(--blue);font-size:17px}
.bar .tel{background:none;border:0;border-radius:0;padding:0;min-width:0;
  color:var(--accent);font-size:22px;font-weight:700;letter-spacing:0;gap:9px}
.bar .tel:hover{background:none;border:0;color:var(--navy);transform:none;box-shadow:none}
.bar .tel svg{width:.95em;height:.95em}
/* Login is the small one: it is for the handful of customers with an
   account, not for the person deciding whether to call. */
.bar .login{min-width:0;font-size:14px;padding:10px 18px;font-weight:700}
.bar .login svg{width:1.05em;height:1.05em}
.tel:hover{background:var(--accent);border-color:var(--accent)}
.login{background:var(--blue);border-color:var(--blue);font-size:17px}
.callfab{position:fixed;left:25px;bottom:15px;z-index:45;background:var(--blue);border-color:var(--blue);
  box-shadow:0 6px 20px rgba(0,41,114,.35);padding:12px 18px;font-size:15px}

/* ---- header: 78px navy bar, 121px white bar ---------------------------- */
header.site{position:sticky;top:0;z-index:40;box-shadow:0 2px 14px rgba(0,41,114,.18)}
.topbar{background:var(--navy);color:#fff}
.tb{display:flex;align-items:center;justify-content:center;position:relative;min-height:44px;padding:6px 0}
.tb .tagline{color:var(--sky);font-size:16px;font-weight:400;letter-spacing:0;text-transform:none}
/* Login rides in the navy bar, which had one centred line of tagline and
   1,192px of nothing else. Out of the white bar that leaves the wordmark,
   the menu and the phone - three blocks rather than four. */
.tb .login{position:absolute;left:auto;right:20px;top:50%;transform:translateY(-50%);
  background:none;border:1px solid rgba(255,255,255,.45);color:#fff;
  font-size:13px;padding:7px 16px;border-radius:4px;min-width:0}
.tb .login:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;
  transform:translateY(-50%);box-shadow:none}
.tb .login svg{width:14px;height:14px}
.barlogin{display:none}
/* The two controls take an end of the bar each: Login on the right, the
   language switch on the left, with the tagline centred between them. They
   were both pinned to the right, which only went unnoticed because the
   switch renders nothing until there is a Spanish site to switch to. */
.tb .ls{position:absolute;left:20px;right:auto;top:50%;transform:translateY(-50%);gap:10px}
.ls a,.ls .ls-on{color:#fff;font-weight:600;font-size:15px;padding:6px 14px;border:1px solid rgba(255,255,255,.7);
  border-radius:3px}
.mainbar{background:#fff}
.wrap.bar{padding:22px 20px;gap:18px}
.bar{display:flex;align-items:center;flex-wrap:nowrap}
.brand,.brand:hover{background:none;clip-path:none;padding:0;margin:0 auto 0 0;align-self:center;
  margin-left:0;margin-bottom:0;margin-top:0;line-height:0;flex:none;transform:none;box-shadow:none}
/* 48, not 96: the file this points at is the wordmark cropped to itself,
   so the number is the height of the artwork rather than the height of
   the artwork plus the empty half. Same size on screen as before. */
.brand img{height:48px;width:auto;display:block}
nav.main ul{display:flex;gap:0;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav.main a{color:#6F6F6F;text-decoration:none;font-weight:500;font-size:19px;text-transform:none;
  letter-spacing:0;display:inline-flex;align-items:center;gap:6px;padding:5px 0;margin-right:26px}
nav.main a:hover,nav.main a[aria-current="page"],nav.main li:has(a[aria-current="page"])>a{color:var(--blue)}
.caret{border-top-color:currentColor}
nav.main .sub{background:#fff;box-shadow:0 12px 32px rgba(0,41,114,.18);border-top:3px solid var(--blue);top:100%}
nav.main .sub a{color:var(--ink);font-size:17px;padding:11px 20px;margin:0;display:block}
nav.main .sub a:hover{background:#F3F6FC;color:var(--accent)}
nav.main .sub-all a{border-top:1px solid #E6EAF2;color:var(--accent);margin-top:6px;padding-top:12px}
/* the Services menu: a grid of the eight services, each on the photograph
   its town hubs already use. Service Areas is the plain list above. */
nav.main .mega-svcs{width:min(880px,calc(100vw - 48px));left:50%;transform:translateX(-50%);
  padding:14px;grid-template-columns:repeat(4,1fr);gap:12px}
nav.main li:hover>.mega-svcs,nav.main li:focus-within>.mega-svcs{display:grid}
nav.main .mega-svcs a{display:block;padding:0;margin:0;border-radius:5px;overflow:hidden;background:#F3F6FC;
  text-align:center;transition:transform .2s,box-shadow .2s}
nav.main .mega-svcs a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,41,114,.18);background:#F3F6FC}
nav.main .mega-svcs img,nav.main .mega-svcs .noimg{width:100%;height:104px;object-fit:cover;display:block;background:#DCE7FA}
nav.main .mega-svcs a>span{display:block;padding:10px 8px;font-weight:600;color:var(--navy);font-size:17px;
  line-height:1.25;text-align:center}
nav.main .mega-svcs .sub-all{grid-column:1/-1}
nav.main .mega-svcs .sub-all a{background:none;border-top:1px solid #E6EAF2;border-radius:0;padding:12px 0 4px;margin-top:2px}
nav.main .mega-svcs .sub-all a:hover{transform:none;box-shadow:none}
.bar .tel{margin-left:auto}

/* ---- the header shrinks once the reader is past the first screen ----
   184px of sticky header is a fifth of a 900px window. Past 120px of
   scroll the tagline bar collapses and the wordmark comes down, which
   leaves about 88 - and --stick comes with it, so a sticky sidebar
   still clears the header rather than hiding behind where it used to
   be. It returns at 80px, not at 120, because a header that changes
   height moves the page under it and one threshold would oscillate. */
.topbar{transition:height .18s ease,opacity .18s ease}
.wrap.bar{transition:padding .18s ease}
.brand img{transition:height .18s ease}
html.hdr-small .topbar{height:0;min-height:0;padding:0;opacity:0;overflow:hidden}
html.hdr-small .tb{min-height:0;padding:0}
/* MarkUp #28 pin 23: tablet and up only. On a phone this 20px side padding
   beat the phone's own 14 and squeezed the bar when it went sticky. */
@media(min-width:641px){html.hdr-small .wrap.bar{padding:10px 20px}}
/* a fallback only: the script republishes the measured height */
html.hdr-small{--hdr:88px}
@media(min-width:641px){html.hdr-small .brand img{height:31px}}
@media(prefers-reduced-motion:reduce){
  .topbar,.wrap.bar,.brand img{transition:none}}
.burger span{background:var(--navy)}
/* the dark ground behind an open drawer. It is a label for the same
   checkbox the burger toggles, so tapping anywhere off the menu closes
   it and no script is involved. */
/* the drawer's own furniture: its head, its foot and the dark ground
   behind it exist only where the drawer does */
.navscrim,.flyfoot{display:none}
@media(max-width:1024px){
  .navscrim{display:block;position:fixed;inset:0;z-index:70;background:rgba(11,22,48,.55);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;cursor:pointer}
  .navtoggle:checked~.navscrim{opacity:1;visibility:visible}
}
.fly-head img{height:46px;width:auto}
@media(max-width:1180px){nav.main a{margin-right:13px;font-size:17px}
  .bar .tel{font-size:20px}.bar .login{padding:9px 14px}}
@media(max-width:1024px){
  .tb{min-height:56px;padding:8px 0;justify-content:center}
  .tb .ls{left:14px;gap:6px}
  .ls a,.ls .ls-on{font-size:13px;padding:5px 9px}
  .wrap.bar{padding:12px 20px}
  .bar .tel{font-size:19px;padding:0}
  /* 54 against the 47.5 the old file drew here */
  .brand img{height:54px}
  /* ---- tablet and phone header ------------------------------------
     Login comes out of the navy bar and stands beside the hamburger,
     which is where there is room for it and where a thumb already is.
     Both are 44px tall with the same radius, so they read as a pair
     rather than a button next to a bare icon. */
  .tb .login{display:none}
  .bar .barlogin{display:inline-flex;min-width:0;font-size:14px;padding:0 15px;
    height:44px;border-radius:5px;margin-left:10px}
  .barlogin svg{width:15px;height:15px}
  .burger{width:48px;height:44px;padding:0;margin-left:10px;border-radius:5px;
    background:var(--navy);border:1px solid var(--navy);align-items:center;
    justify-content:center;gap:5px;transition:background .2s,border-color .2s}
  .burger:hover{background:var(--accent);border-color:var(--accent)}
  .burger span{background:#fff;width:20px;height:2px}
  /* the announcement line was hidden below 1024 by the stylesheet this
     design layer sits on, which left the navy bar carrying nothing at all
     once Login moved out of it */
  .tb{justify-content:center;min-height:44px;padding:8px 14px}
  .tb .tagline{display:block;text-align:center;line-height:1.3}

  /* ---- the flyout ------------------------------------------------------
     A light panel, not the dark one it inherited: white, with the links in
     navy down a single left edge, the wordmark white on blue across the top
     at twice its old size, and the things a visitor reaches for last - the
     phone, the account, the address and the profiles - held at the foot.
     Every rule this design layer writes for the desktop dropdown is
     unconditional, so each one has to be answered here or it reaches into
     the drawer: that is why the panels, the links and the service grid are
     all restated rather than left to inherit. */
  nav.main{background:#fff;display:flex;flex-direction:column;
    box-shadow:none}
  .navtoggle:checked~nav.main{box-shadow:-16px 0 50px rgba(0,41,114,.28)}

  /* the wordmark, white on blue, twice the size it was */
  .fly-head{background:var(--blue);padding:18px 18px}
  .fly-head img{height:76px;width:auto;filter:brightness(0) invert(1)}
  .fly-close{color:#fff;font-size:34px}

  nav.main ul{display:block;padding:14px 0 10px;margin:0}
  nav.main li{position:static}
  /* one left edge for everything in the drawer: the section names and the
     links under them start at the same 22px */
  nav.main>ul>li>a{display:block;text-align:left;font-size:12.5px;
    letter-spacing:.12em;text-transform:uppercase;color:#7C8AA3;font-weight:700;
    padding:18px 22px 6px;margin:0;pointer-events:none}
  /* .acc is set by the script. Without it every section stays open, which
     is what this drawer did before and what it falls back to. */
  nav.main.acc>ul>li.has-sub>a{pointer-events:auto;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 22px;min-height:52px;font-size:14px;color:var(--navy)}
  nav.main.acc>ul>li.has-sub>a:hover{background:#F3F6FC}
  nav.main.acc>ul>li.has-sub>.sub{display:none}
  nav.main.acc>ul>li.has-sub.open>.sub{display:block;padding-bottom:8px}
  nav.main.acc>ul>li.has-sub.open>a{color:var(--accent);background:#F3F6FC}
  nav.main.acc>ul>li+li{border-top:1px solid #EEF1F6}
  /* the caret is hidden in the drawer by the base stylesheet; here it is the
     only sign of whether a section is open, so it comes back and turns */
  nav.main.acc .caret{display:inline-block;border-top-width:6px;
    border-left-width:5px;border-right-width:5px;
    transition:transform .18s ease;flex:none}
  nav.main.acc li.has-sub.open>a .caret{transform:rotate(180deg)}
  /* the links inside an open section sit in from its name */
  nav.main.acc .sub a,nav.main.acc .mega-svcs a{padding-left:34px}
  nav.main.acc .sub-all a{margin-left:34px;margin-right:22px}
  nav.main .sub,nav.main .mega-svcs,
  nav.main li:hover>.sub,nav.main li:focus-within>.sub,
  nav.main li:hover>.mega-svcs,nav.main li:focus-within>.mega-svcs{
    display:block;position:static;width:auto;min-width:0;left:auto;
    background:none;box-shadow:none;border-top:0;padding:0;transform:none}
  nav.main .sub a,nav.main .mega-svcs a{display:block;text-align:left;
    color:var(--navy);font-size:16.5px;font-weight:600;padding:11px 22px;margin:0;
    text-transform:none;letter-spacing:0;border-radius:0;background:none}
  nav.main .sub a:hover,nav.main .mega-svcs a:hover{background:#F3F6FC;
    color:var(--accent);transform:none;box-shadow:none}
  nav.main .mega-svcs img,nav.main .mega-svcs .noimg{display:none}
  nav.main .mega-svcs a>span{display:inline;padding:0;font-size:16.5px;
    font-weight:600;color:inherit;text-align:left;line-height:inherit}
  nav.main .sub-all a{border-top:1px solid #E6EAF2;color:var(--accent);
    margin:6px 22px 0;padding:12px 0 4px;background:none}
  nav.main .sub-all a:hover{background:none;text-decoration:underline}

  /* the foot: pushed down by the auto margin, so it sits at the bottom of a
     short menu and simply follows the last link on a tall one */
  .flyfoot{display:block;margin-top:auto;padding:16px 22px 20px;border-top:1px solid #E6EAF2;
    background:#F7F9FC}
  .flyacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  nav.main .flytel,nav.main .flylogin{display:inline-flex;align-items:center;justify-content:center;
    gap:8px;padding:13px 10px;border-radius:5px;font-weight:700;font-size:15px;
    text-decoration:none;min-height:48px}
  nav.main .flytel{background:var(--blue);color:#fff}
  nav.main .flylogin{background:#fff;color:var(--navy);border:1px solid var(--blue)}
  nav.main .flytel svg,nav.main .flylogin svg{width:1.05em;height:1.05em}
  .flycontact{font-style:normal;margin:12px 0 0;display:grid;gap:2px}
  nav.main .flycontact a{color:#5A6B7A;font-size:13.5px;line-height:1.35;
    text-decoration:none;margin:0;padding:0;display:block}
  nav.main .flycontact a:hover{color:var(--accent)}
  .flysoc{display:flex;gap:10px;margin-top:12px}
  nav.main .flysoc a{width:32px;height:32px;border-radius:50%;background:var(--navy);
    display:inline-flex;align-items:center;justify-content:center}
  nav.main .flysoc svg,nav.main .flysoc img{width:15px;height:15px;fill:#fff}
  nav.main .flysoc a:hover{background:var(--accent)}
}
/* On a phone the two language names and the tagline want 382px of a 375px
   row. The names go and the flags stay, each with its two-letter code, which
   is the form every airline and bank uses for the same problem. The full
   name is still announced: it is in the link's aria-label. */
@media(max-width:520px){
  /* laid out rather than pinned: an absolutely positioned switch sat over a
     tagline that was still centring itself in the whole bar */
  .tb{justify-content:flex-start;gap:8px;padding:8px 10px}
  .tb .ls{position:static;transform:none;gap:4px;flex:0 0 auto;order:-1}
  .tb .tagline{flex:1 1 auto;text-align:center}
  .ls a,.ls .ls-on{font-size:0;padding:5px 7px;gap:0}
  .ls img{width:20px;height:14px}
  .ls a::after,.ls .ls-on::after{font-size:11px;font-weight:700;margin-left:5px;
    letter-spacing:.04em}
  .ls [lang="en"]::after{content:"EN"}
  .ls [lang="es"]::after{content:"ES"}
  .tb .tagline{font-size:12.5px}
}
@media(max-width:640px){.wrap.bar{padding:8px 14px;gap:0}.brand img{height:28px}
  .tb .tagline{font-size:13px}
  /* The number comes back into the bar on a phone. Four things have to
     share 375px, so only one of them can carry a word: the number,
     which is the thing a reader is looking for. Login drops to its
     mark and matches the hamburger, 44 square - the size a thumb
     needs, and the size the two of them already shared.

     .bar .barlogin, not .barlogin: .bar .login sets the size and wins
     on specificity from outside this query, so the single class was
     setting Login at 14px inside a 44px box and the word spilled out
     of its own button. */
  .bar .tel{display:inline-flex;margin-left:auto;margin-right:10px;
    font-size:16px;gap:5px;white-space:nowrap}
  .bar .tel svg{width:15px;height:15px}
  .bar .barlogin{padding:0;width:44px;min-width:44px;font-size:0;gap:0;
    justify-content:center;margin-left:0}
  .bar .barlogin svg{width:18px;height:18px}
  .burger{width:44px;margin-left:8px}}
/* Below 400 the number sheds its mark and a point of size; below 340 -
   which is one live handset, the SE at 320 - there is no room for it
   at all and it goes back to being the CALL NOW button at the foot. */
@media(max-width:400px){.wrap.bar{padding:8px 12px}
  .bar .tel{font-size:15px;margin-right:8px}
  .bar .tel svg{display:none}
  .burger{margin-left:6px}}
/* Below 360 the four of them stop fitting. The wordmark keeps its size
   and the number is what goes, back to the CALL NOW button at the foot,
   which is where it lived before any of this. */
@media(max-width:359px){.bar .tel{display:none}}

/* ---- heroes ------------------------------------------------------------ */
.hero,.hero.haspic{background:var(--navy);color:#fff;text-align:center;padding:64px 0;position:relative}
.hero.haspic{background-image:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.42)),var(--herobg);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* the service page's hero: taller, and its headline is two lines - the
   service at full size, the town under it at a little under two thirds */
.hero.haspic.tall{min-height:720px;display:flex;align-items:center;justify-content:center;
  padding:60px 0}
.hero.haspic.tall h1{font-size:clamp(34px,5vw,64px);font-weight:700;line-height:1.08}
.hero.haspic.tall h1 .h1town{display:block;font-size:.6em;font-weight:500;
  margin-top:10px;color:#D6E2FF}
/* The town hub takes the same band as the service-area index, which is the
   page above it in the same silo: the section's own 64px of padding, no
   minimum height. It was 50vh - 450px on a 900px window - for a headline
   and nothing else. */
.hero.haspic.core{min-height:50vh;display:flex;align-items:center;justify-content:center}
.hero.haspic.core h1{font-size:clamp(30px,3.3vw,42px);font-weight:700}
/* the live hub headline: 68px over 81.6, the town line lighter */
.hero.haspic.hub h1{font-size:clamp(32px,5.3vw,68px);font-weight:700;line-height:1.2}
.hero.haspic.hub h1 .h1town{font-weight:500}
.hero.haspic.core{background-image:linear-gradient(rgba(0,41,114,.55),rgba(0,41,114,.55)),var(--herobg);padding:80px 0}
.hero .wrap{max-width:1280px}
.hero .lede{color:#fff;font-size:18px;max-width:70ch;margin:16px auto 0;text-align:center}
.hero .lede p{margin:0}
.hero .svcrate{justify-content:center}
/* An article headline is a sentence. At the site's 68px the one on the
   Lake Oswego wildfire post ran to three lines and left the meta row
   and the buttons crowded against the foot of the hero. 44px sets the
   same headline in two. */
.hero.post h1{font-size:clamp(27px,3.3vw,44px);line-height:1.16;
  max-width:40ch;margin:0 auto;text-wrap:balance}
.postinfo{color:#D6E2FF;font-size:15px;margin:10px 0 0}
/* An article used to take a wider measure than the rest of the site,
   which put its breadcrumb, its photograph and its text 84px outside
   the wordmark and the navigation above them. It shares the site's
   measure now; the reading column stays wide because the contents
   rail beside it is narrow, not because the page is. */
@media(min-width:960px){main.postpage .cols.has-toc{grid-template-columns:250px minmax(0,1fr);gap:44px}}
/* The site caps a paragraph at 72ch, which is a reading measure for a
   page whose text runs the full width. An article already gives 250px
   of its width to the contents rail, so the cap applied a second time
   and left 193px of nothing down the right of every post. The column
   is the measure here. */
main.postpage article p,main.postpage article ul,main.postpage article ol,
main.postpage article h2,main.postpage article h3{max-width:none}
/* and a photograph fills that column rather than stopping at whatever
   width the capture recorded - 800 in a column of 858 */
main.postpage article img.imgwide{width:100%;height:auto}
.postmeta{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px 18px;margin:14px 0 0;padding:0;font-size:16px;color:#D6E2FF}
.postmeta li{display:flex;align-items:center;gap:8px}
.postmeta li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:#7FA8FF;
  display:inline-block;margin-right:10px}
.postmeta a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.postmeta a:hover{color:var(--sky);border-bottom-color:var(--sky)}
.postmeta b{font-weight:600;color:#fff}
/* the home hero: the background video over its own first frame, 170px of
   padding, the 68px headline, the 22px lede at 733px, two buttons, the mark */
.hero.home{padding:170px 0;overflow:hidden;background:#1B1B1B url('/img/home-hero.00d8b3f366.jpg') center/cover no-repeat}
/* The same breakpoint as the preload in head(): below 900px the page asks
   for home-hero-sm (71 KB) with high priority, and this rule then fetched
   the 1920px frame (224 KB) as well - a phone downloaded the hero twice. */
@media(max-width:899px){.hero.home{background-image:url('/img/home-hero-sm.fb8312e581.jpg')}}
.hero.home .herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero.home::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);z-index:1}
.hero.home .wrap{position:relative;z-index:2;max-width:1120px}
.hero.home h1{font-size:clamp(34px,5.3vw,68px);line-height:1.2;font-weight:600;margin:0 auto}
.hero.home .lede{font-size:22px;line-height:30px;max-width:733px;margin:12px auto 14px}
.hero.home .hcta{margin-top:0}
.herobbb{display:block;margin:30px auto 0;width:192px;line-height:0;transition:transform .2s}
.herobbb img{width:192px;height:auto;display:block}
.herobbb:hover{transform:translateY(-2px)}
@media(max-width:900px){.hero.home{padding:90px 0}}

/* ---- the accreditation row under a hero ------------------------------- */
/* The three accreditation marks sit in the hero, under the buttons - no
   card, no band of their own. The two flat marks are 165x72 and 175x77
   files: at the 104px they were drawn at they were being blown up half
   as big again, which is what made them grainy. 72 is the taller one's
   own height, so neither is enlarged now. The dated seal keeps the lead
   in the middle at 170 wide, about one and a half times their height. */
/* the service-area index shows the same row on white; this is only the
   band of padding around it */
.badgerow{padding:34px 20px;background:#fff}
.herobadges{display:flex;justify-content:center;align-items:center;gap:54px;
  flex-wrap:wrap;margin:34px auto 0}
/* The two flat marks are drawn at the size their files are - 165x72 and
   175x77 - and never enlarged to match the 200x142 seal beside them: a
   crisp small mark reads better than a soft big one, uneven as the row is. */
.herobadges img{height:auto;width:auto;max-width:100%;display:block}
/* the 5 Stars Google Reviews badge inside a service article. Live draws
   it at 174px; ours was running to its natural 494 inside a 534px
   column, where it read as a banner rather than a mark. */
.cols.svc3 article img[src*="a0cd30b6"]{width:220px;height:auto;display:block;
  margin:6px 0 18px}
/* The NADCA seal is a 200x142 picture inside Yoshki's frame, and it does not
   scale: a narrower frame cut off its right edge and a shorter one its
   "Click to verify membership" line. The frame is that size everywhere. */
.herobadges .nadca-smart{width:200px;flex:none;padding:0;background:none;box-shadow:none;
  border-radius:0}
.herobadges>a,.herobadges>img{background:none;border-radius:0;padding:0;box-shadow:none}
.herobadges .nadca-smart>div{position:relative;padding-bottom:0;height:142px;overflow:hidden}
.herobadges .nadca-smart iframe{position:absolute;inset:0;width:200px;height:142px;border:0}
@media(max-width:900px){.herobadges{gap:36px;margin-top:28px}}
@media(max-width:560px){.herobadges{gap:22px;margin-top:22px}
  /* 720px of hero on an 812px phone leaves no page; the headline, the two
     buttons and the marks need about 560 */
  .hero.haspic.tall{min-height:560px;padding-bottom:40px}}

.crumbs{font-size:18px;color:var(--ink);padding:14px 0}
.crumbs a{color:var(--ink)}
.crumbs a:hover{color:var(--accent)}

/* ---- the service page: contents | article | form and services --------- */
/* the live three columns: 285 contents, the article between, 285 form */
@media(min-width:1180px){
  .cols.svc3.has-toc{grid-template-columns:285px minmax(0,1fr) 285px;gap:24px}
  .cols.svc3:not(.has-toc){grid-template-columns:minmax(0,1fr) 285px;gap:24px}}
@media(max-width:1179px){.svcside{grid-column:1/-1}}
.svcside{align-self:start;min-width:0}
@media(min-width:1180px){.svcside{position:sticky;top:var(--stick)}}
/* the live card: navy, square, white fields inside */
.sideform .quote,.sideform section.quote{margin:0;background:var(--navy);border:0;border-radius:0;padding:30px;box-shadow:none}
.sideform .quote>.wrap{padding:0;max-width:none}
.sideform .quote h2{font-size:22px;margin:0 0 6px;text-align:center;color:#fff}
.sideform .quote .sub{font-size:14px;margin:0 0 16px;color:rgba(255,255,255,.85);text-align:center}
.sideform .quote label,.sideform .quote legend{color:#fff}
.sideform .quote input,.sideform .quote select,.sideform .quote textarea{border:0;border-radius:0;background:#fff;
  font-size:18px;padding:10px 10px 10px 15px}
.sideform .formnote,.sideform .recap{color:rgba(255,255,255,.78)}
.sideform .recap a,.sideform .formnote a{color:#fff;text-decoration:underline}
.sideform .fields{gap:12px}
/* Email and Phone sit side by side, and a label that wraps to two lines
   pushed its own input down while its neighbour stayed put - "Correo
   electronico" against "Telefono". The label takes the spare height so the
   inputs line up however long the words are in any language. */
.fields .field > label{margin-bottom:auto}
.sideform .quote .submit{width:100%;justify-content:center;font-size:20px;padding:15px 40px;border:1px solid var(--blue);border-radius:5px}
.sideform .quote .submit:hover{background:#fff;border-color:#fff;color:var(--navy)}
.sideform .formnote{font-size:12.5px;margin-top:12px}
.sidesvcs{margin-top:26px;background:#fff;border:1px solid #E6EAF2;border-radius:5px;padding:20px}
.sidesvcs h3{font-size:20px;text-transform:uppercase;margin:0 0 10px;color:var(--navy)}
.sidesvcs ul{list-style:none;margin:0;padding:0}
.sidesvcs li{border-top:1px solid #EEF1F6}
.sidesvcs a{display:block;padding:9px 0;color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.sidesvcs a::before{content:"▸";color:var(--blue);margin-right:8px}
.sidesvcs a:hover{color:var(--accent)}
.toc h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.toc a{color:var(--ink)}
/* MarkUp #28 pin 13: the contents list marks the section being read. */
.toc ol li a.is-active{color:var(--blue);border-color:var(--blue);font-weight:600}
article{font-size:18px}

.related{padding:50px 0;background:#fff}
.related h2{text-align:center;margin:0 0 28px}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.pcards{grid-template-columns:1fr}}
.pcard{background:#fff;border:1px solid #E6EAF2;border-radius:5px;overflow:hidden;display:flex;flex-direction:column}
.pcard img{width:100%;height:220px;object-fit:cover;display:block}
.pcard h3{font-size:20px;text-transform:uppercase;margin:16px 18px 8px;line-height:1.2}
.pcard h3 a{color:var(--navy);text-decoration:none}
.pcard p{margin:0 18px 16px;font-size:16px;color:#3F4A5C;flex:1}
.pcard .cta{margin:0 18px 18px;align-self:flex-start;font-size:16px;padding:12px 24px;text-transform:none}

.ctaform{background-image:linear-gradient(rgba(0,41,114,.84),rgba(0,41,114,.84)),var(--bg);background-size:cover;
  background-position:center;color:#fff;padding:48px 0;text-align:center}
.ctaform h2{color:#fff;font-size:clamp(26px,3.4vw,36px);margin:0}
.ctaform .orcall{margin:8px 0 2px;font-size:18px}
.ctaform .bigtel{color:#fff;font-size:clamp(26px,4vw,35px);font-weight:700;text-decoration:none;display:inline-block}
.ctaquote{max-width:780px;margin:22px auto 0;background:#fff;color:var(--ink);padding:26px 24px;border-radius:5px;text-align:left}
.ctaquote .quote{margin:0;background:transparent;border:0;padding:0}
.ctaquote .quote>.wrap{padding:0;max-width:none}
.ctaquote .quote h2{color:var(--navy);font-size:22px;text-align:left}
.ctaquote .submit{justify-content:center}
/* the map the live service pages close with, edge to edge */
/* The map closes a service page and the Clean Spaces band follows it. The
   band is transparent with 80px of its own top padding, and its blue box
   is inset - so between the foot of the map and the top of the footer
   there was a strip of page white, 155px of it, with the box floating in
   the middle. The map grows by exactly that strip and the band is pulled
   back onto it by the same amount, so the box now sits on the map the way
   it already sits on the footer. The page is no taller than it was: the
   two numbers cancel. A band that grows on a narrow screen only reaches
   further into the map, which is behind it. */
/* How far the band reaches above the footer, which is how far it has to be
   pulled back onto the map. It is the band's own height less the 105px it
   already overlaps the footer by, and the band grows as its box wraps - so
   the figure rises on narrower screens. Measured at each step and set a
   little over: too much only runs the map further under the footer, which
   paints over it, while too little leaves the white strip back. */
:root{--bandlift:175px}
@media(max-width:1100px){:root{--bandlift:240px}}
@media(max-width:700px){:root{--bandlift:380px}}
.svcmap{line-height:0;background:#E4E4E4}
.svcmap iframe{width:100%;height:480px;border:0;display:block}
main:has(.svcmap) .svcmap iframe{height:calc(480px + var(--bandlift))}
main:has(.svcmap)+.fband{margin-top:calc(0px - var(--bandlift))}
@media(max-width:700px){.svcmap iframe{height:300px}
  main:has(.svcmap) .svcmap iframe{height:calc(300px + var(--bandlift))}}

/* ---- town hubs: the eight cards ---------------------------------------- */
.hubgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 20px;padding:46px 0}
@media(max-width:1000px){.hubgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hubgrid{grid-template-columns:1fr}}
.hcard{display:block;text-decoration:none;text-align:left;background:none;border-radius:0;
  box-shadow:none}
.hcard .imgwrap,.hcard img{display:block;width:100%}
.hcard img{height:300px;object-fit:cover;transition:transform .5s ease}
/* the photograph is the only thing that moves on hover - there is no
   card left to lift */
.hcard{overflow:hidden}
.hcard:hover img{transform:scale(1.06)}
.hcard h3{margin:28px 0 0;font-size:24px;font-weight:600;text-transform:uppercase;
  color:var(--navy);line-height:1.2;text-align:left}
.hcard:hover h3{color:var(--accent)}
.hubintro{padding:0 0 30px}

/* ---- the home page, section by section -------------------------------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.home-about{padding:80px 0;background:#fff}
/* the About page runs the same band with a photograph where the home
   page has its portrait video: 576 of copy, 556 of picture */
.home-about.aboutpage .two{grid-template-columns:576px 556px}
@media(max-width:1180px){.home-about.aboutpage .two{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.home-about.aboutpage .two{grid-template-columns:1fr}}
.aboutpic img{width:100%;height:550px;object-fit:cover;display:block}
@media(max-width:900px){.aboutpic img{height:360px}}
.home-about .two{grid-template-columns:576px 400px;justify-content:space-between;align-items:start}
@media(max-width:1100px){.home-about .two{grid-template-columns:1fr 400px;gap:40px}}
@media(max-width:900px){.home-about .two{grid-template-columns:1fr}}
.home-about h2{text-align:left;margin:0 0 20px}
.home-about p{font-size:18px;margin:0 0 14px}
.feat4{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;margin-top:26px}
@media(max-width:600px){.feat4{grid-template-columns:1fr}}
.feat4>div{display:flex;gap:10px;align-items:flex-start}
.feat4 svg{flex:none;color:var(--blue);width:30px;height:30px;margin-top:0}
.feat4 h4{margin:0 0 8px;font-size:24px}
.feat4 p{margin:0;font-size:16px}
.avideo{position:relative;width:400px;max-width:100%;aspect-ratio:9/16;background:#000;margin-bottom:69px}
.avideo video{width:100%;height:100%;object-fit:cover;display:block}
.since{position:absolute;left:0;bottom:-69px;width:174px;height:169px;background:var(--accent);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.since span{font-size:24px;font-weight:600;text-transform:uppercase;line-height:1.2}
.since b{font-size:69px;font-weight:600;line-height:1;display:block;margin-top:6px}

.home-services{padding:80px 0;color:#fff;text-align:center;
  background-image:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),var(--bg);background-size:cover;background-position:center}
.home-services h2{color:#fff;max-width:660px;margin:0 auto 30px}
.home-services .eyebrow{margin-bottom:20px}
.svc6{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 30px}
@media(max-width:640px){.svc6{grid-template-columns:1fr}}
.scard{position:relative;display:block;aspect-ratio:559/373;overflow:hidden;background:#111}
.scard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,filter .4s}
.scard:hover img{transform:scale(1.06);filter:brightness(1.08)}
.scard .frame{position:absolute;inset:28px;border:2px solid var(--accent);display:flex;align-items:flex-end;justify-content:center;
  transition:border-color .3s,inset .3s}
.scard:hover .frame{border-color:#fff;inset:22px}
.scard h4{color:#fff;text-transform:uppercase;font-size:24px;margin:0 0 16px;padding:0 10px;text-align:center;line-height:1.2;
  text-shadow:0 1px 8px rgba(0,0,0,.6)}
.home-services .hcta{margin-top:0}

.home-why{padding:80px 0;background:var(--paper)}
.home-why .two{grid-template-columns:549px 556px;justify-content:space-between}
@media(max-width:1180px){.home-why .two{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.home-why .two{grid-template-columns:1fr}}
.plainh{text-transform:none;font-size:48px;text-align:left;margin:0 0 24px}
.home-why p{font-size:18px;margin:0 0 30px}
.home-why img{width:100%;height:auto;display:block}
.whycards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:520px){.whycards{grid-template-columns:1fr}}
.whycard{background:#fff;border:1px solid #E3E3E3;padding:30px 10px;text-align:center}
.wicon{display:block;width:50px;height:50px;margin:0 auto}
.wicon svg{width:50px;height:50px;fill:var(--blue)}
.whycard h4{margin:8px 0 16px;font-size:24px}
/* MarkUp #28 pin 9: "NADCA and IICRC Certified" wraps to two lines and
   "24/7 Support" does not, so the two cards' paragraphs started at different
   heights. A two-line title box lines the row up; one column needs no box. */
@media(min-width:521px){.whycard h4{min-height:2.4em;display:flex;align-items:center;justify-content:center}}
.whycard p{margin:0;font-size:20px;color:var(--ink)}

.home-what{padding:120px 0 280px;color:#fff;text-align:center;
  background-image:linear-gradient(rgba(29,27,27,.78),rgba(29,27,27,.78)),var(--bg);background-size:cover;background-position:center}
.home-what h2{color:#fff;margin:0 0 20px}
.home-what .hsub{color:#fff;font-size:20px;line-height:30px}
.counters{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px}
@media(max-width:800px){.counters{grid-template-columns:1fr 1fr}}
.counters>div{border-right:2px solid #949494;padding:0 10px}
.counters>div:last-child{border-right:0}
@media(max-width:800px){.counters>div:nth-child(2){border-right:0}}
.counters b{display:block;font-size:69px;font-weight:600;line-height:1}
.counters span{display:block;font-size:24px;font-weight:400;margin-top:14px}
/* MarkUp #28 pin 15: at 390px each of the two columns is about 155px wide and
   "1,000+" at 69px is about 210px, so the second column was cut off. */
@media(max-width:520px){.counters{row-gap:28px}.counters>div{padding:0 6px}
 .counters b{font-size:44px}.counters span{font-size:17px;margin-top:10px}}

/* The video rides up over the dark counters section above it. The section
   itself is transparent, so its top 180px shows that section's photograph
   and everything below it shows the page - the video is what overlaps, not
   a white band. The counters keep 280px of padding beneath them, so 100px
   of dark still separates the numbers from the top of the video. */
.home-video{padding:0 0 100px;margin-top:-180px;position:relative;z-index:2;background:transparent}
.vidwrap{position:relative;line-height:0;box-shadow:0 18px 50px rgba(0,0,0,.38);border-radius:5px;overflow:hidden}
/* the video at its own 16:9: nothing cropped, no bars */
.home-video video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;background:#000}
/* Shown only if the browser refuses to autoplay it - a pulsing target over
   the middle of the frame, big enough to hit on a phone. */
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;
  border:0;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.45);padding:0}
.playbtn svg{width:30px;height:30px;margin-left:4px}
.playbtn::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--accent);
  animation:pulse 1.9s ease-out infinite}
.playbtn:hover{background:var(--navy)}
@keyframes pulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.9);opacity:0}}
@media(prefers-reduced-motion:reduce){.playbtn::after{animation:none}}
@media(max-width:900px){.home-video{margin-top:-90px;padding-bottom:70px}.home-what{padding-bottom:180px}}

.askband{background-image:linear-gradient(rgba(0,41,114,.82),rgba(0,41,114,.82)),var(--bg);background-size:cover;
  background-position:center;color:#fff;text-align:center;padding:100px 0;font-size:34px;line-height:1.2;font-weight:600}
.askband .wrap{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.askband svg{width:40px;height:40px;flex:none}
.askband a{color:#fff;text-decoration:none}
@media(max-width:700px){.askband{font-size:24px;padding:60px 0}}

.home-reviews{padding:80px 0;color:#fff;text-align:center;
  background-image:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),var(--bg);background-size:cover;background-position:center}
.gstars{display:block;margin:0 auto 12px;width:155px;height:auto}
.home-reviews h2{color:#fff;max-width:829px;margin:0 auto 30px}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 30px;text-align:center}
@media(max-width:900px){.tcards{grid-template-columns:1fr}}
.tcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;background:#fff;color:var(--navy);
  padding:90px 28px 40px;text-decoration:none;min-height:634px}
.tcard .tq{position:absolute;left:28px;top:30px;color:var(--blue)}
.tcard .tq svg{width:40px;height:36px}
.tcard .tplat{position:absolute;right:28px;top:30px;width:30px;height:auto}
.tcard p{margin:0 0 30px;font-size:20px;flex:1;color:var(--navy)}
/* MarkUp #28 pin 14: min-height evens out three cards side by side. Stacked
   one per row it only adds empty space under the shorter reviews. */
@media(max-width:900px){.tcard{min-height:0}.tcard p{flex:none}}
.twho{display:flex;align-items:center;gap:10px}
.twho img{width:50px;height:50px;border-radius:50%}
.twho b{font-size:22px;font-weight:600;color:var(--navy)}
.tinit{width:50px;height:50px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;
  justify-content:center;font-weight:700;font-size:16px;flex:none}

/* ---- footer ------------------------------------------------------------ */
/* the band straddles the join: its upper half on the page, its lower half
   over the footer, which starts 190px down to leave it room */
.fband{padding:80px 0 0;background:transparent;position:relative;z-index:2;margin-bottom:-105px}
.fbandbox{background-image:linear-gradient(rgba(0,41,114,.82),rgba(0,41,114,.82)),var(--bg);background-size:cover;
  background-position:center;color:#fff;padding:50px 60px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.fbandbox h2{color:#fff;font-size:38px;margin:0 0 8px;text-align:left}
.fbandbox p{margin:0;font-size:18px}
.fbandbox a{color:#fff}
.fbandbox .cta.white{text-transform:uppercase}
footer.site{background:linear-gradient(rgba(41,41,41,.90),rgba(41,41,41,.90)),var(--bg);background-size:cover;
  background-position:center;color:#fff;padding:190px 0 20px}
.fcols{display:grid;grid-template-columns:273px 213px 213px 273px;justify-content:space-between;gap:30px}
@media(max-width:1100px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fcols{grid-template-columns:1fr}}
.fcol h2{color:#fff;font-size:20px;font-weight:700;text-transform:none;margin:0 0 10px;text-align:left}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{padding:0}
.fcol a{color:#fff;text-decoration:none;font-size:17px;display:block;padding:9px 0;line-height:1.3}
.fcol a:hover,.fcol a[aria-current="page"]{color:var(--blue)}
.fbrand img{width:273px;height:auto;display:block;filter:brightness(0) invert(1)}
.fmission{font-size:16px;color:#fff;margin:14px 0;line-height:1.55}
.fsoc{display:flex;gap:10px;margin-bottom:20px}
.fsoc a{width:55px;height:55px;border-radius:50px;background:var(--accent);border:2px solid var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .2s,transform .2s,box-shadow .2s}
.fsoc a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.fsoc svg{width:25px;height:25px}
.fphone{margin-top:4px}
.fmap iframe{width:100%;height:240px;border:0;display:block;margin-bottom:14px}
.fcontact li{display:flex;gap:12px;align-items:center;padding:8px 0}
/* MarkUp #28 pin 11: width alone drew the 17x27 map pin 40px tall beside a
   25x18 envelope; one 25px box keeps all three the same visual size. */
.fcontact img{width:25px;height:25px;object-fit:contain;flex:none}
.fcontact a{font-size:16px;padding:0;line-height:1.4}
.fdrop{max-width:922px;margin:48px auto 34px;text-align:center;font-size:16px;line-height:1.55;color:#F5F5F5}
.legal{border-top:1px solid rgba(255,255,255,.25);padding-top:16px;font-size:15px;color:#F5F5F5;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal a{color:#F5F5F5;margin-left:24px;text-decoration:none}
.legal a:hover{text-decoration:underline}

/* ---- contact ----------------------------------------------------------- */
.cinfo3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:36px 0;position:relative;z-index:2}
@media(max-width:900px){.cinfo3{grid-template-columns:1fr;margin-top:24px}}
.cbox{background:#fff;border-radius:5px;padding:22px 24px;text-align:center;text-decoration:none;color:var(--ink);
  border:1px solid #E6EAF2;box-shadow:0 2px 10px rgba(0,41,114,.07);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:box-shadow .2s,border-color .2s,transform .2s}
.cbox:hover{border-color:#C6D6F2;box-shadow:0 4px 16px rgba(0,41,114,.11);transform:translateY(-2px)}
.cbox svg{color:var(--blue);width:28px;height:28px}
.cbox h3{margin:0;font-size:clamp(20px,2.4vw,26px);text-transform:uppercase;color:var(--navy)}
.cbox span{font-size:16px}
.cduo{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:0 20px 50px;align-items:start}
@media(max-width:900px){.cduo{grid-template-columns:1fr}}
.cform .quote{margin:0;background:#fff;border:1px solid #E6EAF2;border-radius:5px;padding:24px;box-shadow:0 2px 14px rgba(0,41,114,.08)}
.cform .quote>.wrap{padding:0;max-width:none}
.cform .quote h2{text-align:left;font-size:24px}
.map iframe{width:100%;height:630px;border:0;border-radius:5px;display:block}
@media(max-width:900px){.map iframe{height:380px}}
/* the map is an iframe and cannot itself be a link, so the way through to
   the listing sits under it */
.maplink{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;
  font-size:16px;font-weight:600;color:var(--accent);text-decoration:none}
.maplink::after{content:"↗";font-size:14px}
.maplink:hover{text-decoration:underline}
.hours{margin:10px 0 0;font-size:16px}

/* ---- the pages that keep the SCAD structure, recolored ----------------- */
.quote{background:#fff}
.quote h2{color:var(--navy)}
.quote .submit,.quote button{border-radius:5px;background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;
  text-transform:uppercase;font-family:"Address Sans Pro",sans-serif;padding:14px 26px}
.quote input,.quote select,.quote textarea{border-radius:5px;border:1px solid #CFD8E6;font-family:inherit;font-size:16px}
/* ---- FAQ: filters and accordion ---------------------------------------
   Both arrived wearing the sister brand's shapes. The filter chips were
   parallelograms - skewX(-10deg), square corners - and the accordion's
   chevron was a skewed blue box, while every other control on this site is
   a rectangle with a 5px radius. The chips were also set in the body face
   where every button here uses the display one. */
.faqfilter{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 26px}
.fchip{transform:none;border-radius:5px;border:1px solid #CFD8E6;background:#fff;
  color:var(--navy);font-family:"Address Sans Pro",sans-serif;font-size:14px;font-weight:600;
  padding:10px 16px;min-height:42px;gap:9px;letter-spacing:0;
  transition:background .15s,border-color .15s,color .15s}
.fchip>*{transform:none}
.fchip i{font-size:12.5px;font-weight:700;color:#7C8AA3;background:#F3F6FC;
  border-radius:20px;padding:2px 8px;line-height:1.5}
.fchip:hover{background:#F3F6FC;border-color:var(--blue);color:var(--accent)}
.fchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fchip.on i{color:#fff;background:rgba(255,255,255,.22)}

.faq details{border:1px solid #E6EAF2;border-radius:5px;background:#fff;margin-bottom:12px;
  transition:border-color .15s,box-shadow .15s}
.faq details:hover{border-color:#CFD8E6;box-shadow:0 4px 16px rgba(0,41,114,.07)}
.faq details[open]{border-color:var(--blue);box-shadow:0 6px 22px rgba(0,41,114,.10)}
.faq summary{font-family:"Address Sans Pro",sans-serif;font-weight:600;color:var(--navy);
  font-size:18px;line-height:1.35;padding:16px 58px 16px 20px;position:relative;
  align-items:center;gap:0}
.faq summary:hover{color:var(--accent)}
.faq details[open]>summary{color:var(--accent)}
/* the skewed box goes; the chevron is a round brand-blue disc on the right,
   which is where a reader looks for one, and it turns when the answer opens */
.faq summary::before{content:"";position:absolute;right:16px;top:50%;left:auto;
  width:28px;height:28px;margin:-14px 0 0;transform:none;border-radius:50%;
  background:#EDF3FF no-repeat center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231155CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  transition:transform .18s ease,background-color .15s}
.faq details[open]>summary::before{transform:rotate(180deg);background-color:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.faq .ans{padding:0 20px 18px;font-size:17px;line-height:1.6;color:#3F4A5C}
.faq .ans p{margin:0 0 10px}
.faq .ans>:last-child{margin-bottom:0}
@media(max-width:560px){.faq summary{font-size:16.5px;padding:14px 50px 14px 16px}
  .faq .ans{padding:0 16px 16px;font-size:16px}
  .fchip{font-size:13px;padding:9px 13px;min-height:40px}}
.silo{background:var(--paper)}
.silo h2{text-align:left;font-size:24px}
.silo a::before,.silo .here span::before{content:"▸";display:inline;background:none;width:auto;height:auto;color:var(--blue)}
.rcard,.card{border-radius:5px}
.svcgrid .card b{color:var(--navy);text-transform:uppercase;font-family:"Address Sans Pro",sans-serif}
.blogwrap .pcard{border:0}
article a{color:var(--accent)}
.fourofour a{color:var(--accent)}

/* the heading the live reviews page puts over the cards */
.revh2{text-align:center;font-size:clamp(24px,3vw,34px);margin:0 0 20px}

/* the services index closes on the towns: a plain band, centred, with the
   one button. Not .silo - that styles its links as a bulleted list. */
.areasband{background:var(--paper);padding:54px 0;text-align:center}
.areasband h2{margin:0 0 12px}
.areasband p{max-width:70ch;margin:0 auto 22px;font-size:18px}

/* ---- write a review ---------------------------------------------------- */
.wrblock{padding:40px 0 10px}
.wrblock h2{text-align:left;margin:0 0 10px}
.wrblock p{font-size:18px;max-width:70ch;margin:0 0 22px}
.wrquiet{border-top:1px solid #E6EAF2;margin-top:26px;padding-top:34px}
.wrsites{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px}
@media(max-width:700px){.wrsites{grid-template-columns:1fr}}
.wrsite{display:flex;align-items:center;gap:14px;padding:20px 22px;border:1px solid #E6EAF2;
  border-radius:5px;background:#fff;text-decoration:none;color:var(--navy);
  box-shadow:0 2px 14px rgba(0,41,114,.08);transition:transform .2s,box-shadow .2s}
.wrsite:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,41,114,.16);color:var(--accent)}
.wrsite b{font-size:20px;font-weight:700}
.wrmark{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.wrmark svg{width:19px;height:19px;fill:currentColor}
.wrsite:hover .wrmark{background:var(--accent)}
.wrtail{margin:34px 0 50px;font-size:18px;color:#3F4A5C;max-width:70ch}

/* ---- the compact hero: contact, about, services, write a review --------
   The band these four had was 450px of photograph behind a 42px headline -
   the smallest type on the site, on the pages people arrive at deliberately.
   This one is 340px, the headline is 60px, and the foot of the band carries
   four photographs instead of a scrim. */
/* the photo strip sat flush against the section below it */
.chero{background:var(--navy);color:#fff;padding:34px 0 26px}
.chero h1{color:#fff;font-size:clamp(34px,5vw,60px);line-height:1.1;margin:0;text-align:left}
.cherotop{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cherosub{margin:10px 0 0;font-size:18px;line-height:1.5;color:#A9C4FF;max-width:52ch}
.cheroacts{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:6px}
.cheroacts .cta{font-size:17px;padding:13px 26px}
.cheroacts .cta.navy{border-color:var(--blue)}
.cherostrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px;line-height:0}
.cherostrip img{width:100%;height:150px;object-fit:cover;display:block;border-radius:5px}
@media(max-width:900px){.cherostrip{grid-template-columns:repeat(2,1fr)}
  .cherostrip img{height:120px}.cherotop{align-items:flex-start}}
/* on a phone the two-by-two grid put 200px of photographs in a hero that
   has to share an 812px screen with the page. One row of four, shorter. */
@media(max-width:520px){.cherostrip{grid-template-columns:repeat(4,1fr);gap:6px}
  .cherostrip img{height:74px}.cherosub{font-size:16px}}
/* The pills used to ride up 66px over the photograph strip. That device
   works over a flat band; over four photographs it cropped them
   mid-frame and left half a white pill sitting on each. They keep
   their own band under the hero instead. */
.chero + .wrap .cinfo3{margin-top:34px}

/* ---- the service page's contact box -----------------------------------
   Every one of the 208 closed differently: 109 headed a run "Contact Dr.
   Carpet Clean Today", 101 carried a paragraph of emoji-prefixed lines, and
   56 followed it with all eight services bulleted - the sidebar's silo
   again, on the same screen. One box now, the same on all of them, built
   from the office the page belongs to. */
/* the sticky header would otherwise sit over the top of whatever an
   anchor jumps to; --stick is the measured header height plus a gap */
.ctaform[id],.sideform[id]{scroll-margin-top:var(--stick)}
.svccontact{margin:34px 0 8px}
.svccontact h2{text-align:left;margin:0 0 16px}
.sccard{background:var(--paper);border:1px solid #E6EAF2;border-radius:5px;padding:24px}
.scrows{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.scrows{grid-template-columns:1fr 1fr}
  .scrows>:first-child{grid-column:1/-1}}
.scrow{display:flex;align-items:flex-start;gap:12px;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid #E6EAF2;border-radius:5px;padding:13px 15px;
  transition:border-color .15s,box-shadow .15s}
.scrow:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(0,41,114,.09);color:var(--accent)}
.scrow svg{width:17px;height:17px;color:var(--blue);flex:none;margin-top:3px}
.scrow span{display:block;font-size:16px;line-height:1.4}
.scrow b{display:block;font-family:"Address Sans Pro",sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7C8AA3;
  margin-bottom:2px}
.scserving{margin:16px 0 18px;font-size:16px;color:#3F4A5C}
.sccard .cta{font-size:16px;padding:13px 28px}

/* ---- the site map ------------------------------------------------------
   280 links in one column of list items came to 13,940px, which is
   forty-five screens of a page that exists so someone can find one link
   quickly. Nothing here changes what the page lists; it changes the shape.

   The flat sections flow into columns. The 31 towns become cards, each
   carrying its own eight services, because area -> town -> service is the
   shape of the site and a card per town says so on one screen. */
.smapflow{list-style:none;margin:0 0 34px;padding:0;max-width:none;
  columns:4;column-gap:30px}
.smapflow.wide{columns:2;column-gap:46px}
.smapflow li{break-inside:avoid;margin:0 0 9px}
.smapflow a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.smapflow a:hover{color:var(--blue);border-bottom-color:var(--blue)}

.smaptowns{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  margin:0 0 34px}
.smapcity{background:#F4F7FC;border-radius:5px;padding:16px 18px 14px}
.smaptown{display:block;font-family:"Address Sans Pro",sans-serif;font-weight:700;font-size:19px;
  letter-spacing:.01em;color:var(--navy);text-decoration:none;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid #D7E1F2}
.smaptown:hover{color:var(--blue)}
.smapcity ul{list-style:none;margin:0;padding:0;max-width:none}
.smapcity li{margin:0 0 5px}
.smapcity a:not(.smaptown){color:#4A5568;text-decoration:none;font-size:14.5px;
  line-height:1.45}
.smapcity a:not(.smaptown):hover{color:var(--blue)}

@media(max-width:1100px){.smaptowns{grid-template-columns:repeat(3,1fr)}
  .smapflow{columns:3}}
@media(max-width:820px){.smaptowns{grid-template-columns:repeat(2,1fr)}
  .smapflow{columns:2}.smapflow.wide{columns:1}}
@media(max-width:560px){.smaptowns{grid-template-columns:1fr}
  .smapflow,.smapflow.wide{columns:1}
  /* one card per row on a phone is 31 cards of nine lines each. The eight
     services inside a card set two-up, which halves the page without
     hiding a single link. */
  .smapcity ul{columns:2;column-gap:18px}
  .smapcity li{break-inside:avoid}}

/* ---- the quote button in a blog sidebar --------------------------------
   The base stylesheet painted a button by skewing a white ::before behind
   it, so the label was navy. This layer turns that ::before off and fills
   the button with accent blue instead - but the navy label survived on 41
   pages, because ".sidecta .cta" outranks ".cta". Navy on accent blue is
   2.05:1, against the 4.5:1 a body-size label needs.

   Hover was worse: the shared rule takes the fill to navy while the same
   leak held the label there too, so the text disappeared into its own
   button. */
/* .catbar a styles the category list below this box and is also (0,2,0), so
   it was painting the quote button and the phone link too - both ended up
   soft grey under the white label set above, which on the blog index and the
   archives left an invisible button. The box states its own colours. */
.sidecta .cta{background:var(--accent);border-color:var(--accent);color:#fff}
.sidecta .cta:hover{background:#fff;border-color:#fff;color:var(--navy)}
.sidecta .sc-tel,.sidecta .sc-more{background:none}

/* ==== MarkUp board #28, round 2 (14 Sep 2026) ============================ */

/* pins 31 and 33: a drawer row with no dropdown - Blog, Contact Us, and now
   Home - kept the section-label style's pointer-events:none, so a tap on it
   did nothing. They are links, and they read as rows like the ones that open. */
@media(max-width:1024px){
  nav.main>ul>li:not(.has-sub)>a{pointer-events:auto;cursor:pointer;display:flex;
    align-items:center;padding:16px 22px;min-height:52px;font-size:14px;color:var(--navy)}
  nav.main>ul>li:not(.has-sub)>a:hover{background:#F3F6FC;color:var(--accent)}
  nav.main>ul>li:not(.has-sub)>a[aria-current="page"]{color:var(--accent)}
  /* pin 35: the wordmark is a link home */
  nav.main .fly-head a.fly-logo{display:inline-block;line-height:0;margin:0;padding:0}
  /* pin 34: the desktop hover turns every nav link blue, the phone button's
     own colour, so the number vanished under a finger. Each button keeps its
     colours, and the number stays on one line. */
  nav.main .flytel:hover{background:var(--accent);color:#fff}
  nav.main .flylogin:hover{background:#F3F6FC;color:var(--navy)}
  .flyacts{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  nav.main .flytel span{white-space:nowrap}
}
/* pin 20: Home is a drawer row; on the desktop bar the wordmark does that job */
@media(min-width:1025px){nav.main li.navhome{display:none}}

/* pin 16: on a tablet the About band keeps two columns - the copy on the
   left, the portrait video on the right - down to 701px */
@media(min-width:701px) and (max-width:900px){
  .home-about .two{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
  .home-about .feat4{grid-template-columns:1fr}
  .since{width:140px;height:136px}.since span{font-size:19px}.since b{font-size:54px}}

/* pin 17: the question, the invitation and the number. One line on a
   desktop, as before; three below 1024, the question largest. */
.askband .asktxt{margin:0;line-height:1.2}
.askband .askq{font-weight:inherit}
@media(max-width:1024px){
  .askband .wrap{flex-direction:column;gap:12px}
  .askband .asktxt>*{display:block}
  .askband .askq{font-size:44px;font-weight:700;line-height:1.1}
  .askband .asksub{font-size:24px;font-weight:400;margin-top:8px}
  .askband .asktxt a{font-size:38px;font-weight:700;margin-top:14px}
  .askband svg{width:44px;height:44px}}
@media(max-width:700px){
  .askband .askq{font-size:32px}.askband .asksub{font-size:19px}
  .askband .asktxt a{font-size:28px}}

/* pin 18: six reviews in a row you swipe - three to a screen on a desktop,
   two on a tablet, one with the next showing on a phone - with arrows and
   dots for anyone not swiping. Stacked, they were screens of scrolling. */
.tcards{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;margin-bottom:18px}
.tcards::-webkit-scrollbar{display:none}
.tcard{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start}
.tnav{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 28px}
.tnav>button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:transparent;color:#fff;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0}
.tnav>button:hover:not(:disabled){background:#fff;color:var(--navy)}
.tnav>button:disabled{opacity:.35;cursor:default}
.tdots{display:flex;gap:2px}
.tdots button{position:relative;width:24px;height:24px;border:0;padding:0;
  background:none;cursor:pointer}
.tdots button::before{content:"";position:absolute;inset:7px;border-radius:50%;
  background:rgba(255,255,255,.45)}
.tdots button[aria-current="true"]::before{background:#fff}
@media(max-width:900px){
  .tcards{gap:16px}
  .tcard{flex-basis:calc(50% - 8px);padding:76px 22px 30px}
  .tcard p{flex:1;font-size:18px}}
@media(max-width:700px){.tcard{flex-basis:88%}}

/* pin 19: tablet footer lists at a tighter step */
@media(max-width:1100px){.fcol ul:not(.fcontact) a{padding:5px 0}}

/* pins 21, 22 and 26: on a phone the home lede steps down and a hero's two
   buttons share one row. A label wraps inside its button rather than
   pushing the button onto a row of its own, so the longer Spanish ones fit. */
@media(max-width:560px){
  .hero.home .lede{font-size:18px;line-height:1.45}
  .hero .hcta{flex-wrap:nowrap;gap:10px;align-items:stretch}
  .hero .hcta>a{flex:1 1 0;min-width:0;max-width:220px;padding:13px 10px;font-size:15px;
    gap:6px;white-space:normal;line-height:1.15;text-align:center}}

/* pins 24 and 27: the two flat marks share the first row; the NADCA member
   seal takes the second at the width its frame is drawn for. Squeezed to
   108px it showed half a logo. */
@media(max-width:560px){
  .herobadges{gap:16px 18px}
  /* the only place they are scaled, and only ever down: at their own
     165 and 175 the pair is wider than a phone, so each takes half the
     row less the gap and the two stay on one line to a 320px screen */
  .herobadges img{width:calc(50% - 11px);max-width:150px}
  .herobadges .nadca-smart{order:1}}

/* pin 25: the service-area index, two towns to a row on a phone */
@media(max-width:560px){
  main .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  main .card{padding:14px 12px}
  main .card b{font-size:15.5px}
  main .card span{font-size:13.5px}}

/* pin 30: a town hub's eight services, two to a row on a phone */
@media(max-width:520px){
  .hubgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;padding:32px 0}
  .hcard img{height:150px}
  .hcard h3{font-size:16px;margin-top:12px}}

/* pin 28: below the three-column layout the contents list sits above the
   article at full length - two screens on a phone before the first
   paragraph. The script sets .fold only when the list is long. */
.tocmore{display:none}
@media(max-width:959px){
  .toc.fold:not(.open) ol{max-height:230px;overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 55%,transparent);
    mask-image:linear-gradient(#000 55%,transparent)}
  .toc.fold .tocmore{display:inline-flex;align-items:center;margin:12px 0 0;padding:10px 16px;
    border:1px solid var(--blue);border-radius:5px;background:#fff;color:var(--navy);
    font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer}
  .toc.fold .tocmore:hover{background:#F3F6FC;color:var(--accent)}}

/* pin 29: phone reading size. 16px is the floor the platforms set (iOS body
   text is 17pt, Material 16sp) and older readers do better a step above it:
   17px in an article, 18px elsewhere, both at a 1.5 line height. */
@media(max-width:560px){body{font-size:18px}article{font-size:17px}}

/* ==== calls to action between the sections of a long article ============ */
/* MarkUp round 3: thirty-odd sections with the phone number only at the top
   and the bottom. Three designs alternate down the page - a card with a
   photograph, a band over one, and a nudge to the form - so ten of them do
   not read as one banner ten times. */
.inlinecta{margin:34px 0;border-radius:5px;overflow:hidden;color:#fff;
  background:var(--navy);text-align:left}
.inlinecta .ic-h{margin:0;font-family:"Address Sans Pro",sans-serif;font-weight:700;
  font-size:26px;line-height:1.2;color:#fff}
.inlinecta .ic-sub{margin:8px 0 0;font-size:16px;line-height:1.45;color:#D6E2FF}
.inlinecta p{max-width:none}

/* a: the photograph, the line, and the number on a bar under both */
.ic-a .ic-top{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:22px;
  padding:0 26px 0 0}
.ic-a .ic-top img{width:100%;height:100%;min-height:150px;object-fit:cover;display:block}
.ic-a .ic-say{padding:22px 0}
.ic-a .ic-tel{display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--accent);color:#fff;text-decoration:none;padding:13px 20px;
  font-family:"Address Sans Pro",sans-serif;letter-spacing:.02em}
.ic-a .ic-tel span{font-size:14px;text-transform:uppercase;letter-spacing:.16em}
.ic-a .ic-tel b{font-size:26px;font-weight:700;letter-spacing:.01em}
.ic-a .ic-tel svg{width:22px;height:22px;flex:none}
.ic-a .ic-tel:hover{background:var(--blue)}

/* b: the slim band over a photograph, the number set large under the line */
.ic-b{background-image:linear-gradient(rgba(0,41,114,.86),rgba(0,41,114,.86)),var(--bg);
  background-size:cover;background-position:center;text-align:center;padding:30px 24px}
.ic-b .ic-h{font-size:24px}
.ic-b .ic-big{display:inline-flex;align-items:center;gap:10px;margin-top:10px;color:#fff;
  font-family:"Address Sans Pro",sans-serif;font-size:34px;font-weight:700;
  text-decoration:underline;text-underline-offset:5px}
.ic-b .ic-big:hover{color:var(--sky)}
.ic-b .ic-big svg{width:26px;height:26px;flex:none}

/* c: the nudge to the form the page already carries */
.ic-c{background-image:linear-gradient(rgba(11,22,48,.78),rgba(11,22,48,.78)),var(--bg);
  background-size:cover;background-position:center;text-align:center;padding:34px 24px}
.ic-c .ic-h{font-size:28px}
.ic-c .ic-sub{max-width:52ch;margin:10px auto 0}
.ic-c .cta{margin-top:18px}

@media(max-width:700px){
  .inlinecta{margin:26px 0}
  .ic-a .ic-top{grid-template-columns:1fr;gap:0;padding:0}
  .ic-a .ic-top img{min-height:0;height:170px}
  .ic-a .ic-say{padding:20px 20px 22px}
  .ic-a .ic-tel{flex-direction:column;gap:2px;padding:12px 16px}
  .ic-a .ic-tel b,.ic-b .ic-big{font-size:26px}
  .inlinecta .ic-h{font-size:21px}
  .ic-b,.ic-c{padding:26px 18px}
  .ic-c .ic-h{font-size:23px}}

/* MarkUp round 3 (18 Sep 2026) ------------------------------------------ */
/* pins 38 and 39: below 900px the About band is one column, and "1fr" let
   the 400px video box hold the column at 400px on a 390px phone - the
   heading and the copy ran off the right edge. minmax(0,1fr) lets the
   column be the screen. On a phone the portrait video is 300 wide and
   centred, so all of it fits on one screen. */
@media(max-width:900px){
  .two,.home-about .two,.home-about.aboutpage .two,.home-why .two{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
  .avideo{width:min(100%,300px);margin-left:auto;margin-right:auto}}
/* pin 36: the About photograph carries its own "Since 1975" block in the
   bottom corner, so it is never cropped: whole, at its own proportions */
.aboutpic img{height:auto;max-width:556px;object-fit:contain}
@media(max-width:900px){.aboutpic img{height:auto}}
/* pin 40 and the user's follow-up (18 Sep 2026): all five marks at every
   width. The four flat marks share one height - their own 72px on a
   desktop, so the two NADCA marks are never enlarged and BBB and IICRC are
   only scaled down - and the dated seal keeps the 200x142 its frame needs.
   Desktop: one row, two marks either side of the seal. Tablet: the four
   flat marks in a row, the seal centred under them. Phone: a pair, the
   seal, a pair - each pair centred, so the column has one axis. */
.herobadges{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:32px}
.herobadges>a{display:block;line-height:0;flex:none}
.herobadges>img,.herobadges>a>img{height:72px;width:auto;max-width:none;flex:none}
.herobadges .nadca-smart{order:0}
@media(max-width:1140px){
  .herobadges{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;
    justify-items:center;align-items:center;gap:22px 24px}
  .herobadges .nadca-smart{grid-column:1/-1;order:1}}
@media(max-width:560px){
  .herobadges{grid-template-columns:repeat(2,auto);gap:16px 18px}
  .herobadges>img,.herobadges>a>img{height:58px;width:auto;max-width:none}
  .herobadges .nadca-smart{order:0}
  .badgerow{padding:20px 20px 16px}
  .badgerow .herobadges{margin-top:0}}
@media(max-width:340px){
  .herobadges>img,.herobadges>a>img{height:50px}}
/* The row with BBB's horizontal seal in it is wider, so the flat marks
   step down a little below a desktop - only ever smaller than their own
   size - to keep each row inside the screen. */
@media(max-width:1140px){.herobadges>img,.herobadges>a>img{height:64px}}
@media(max-width:560px){.herobadges>img,.herobadges>a>img{height:52px}}
@media(max-width:340px){.herobadges>img,.herobadges>a>img{height:44px}}
/* .playbtn sets display:flex, which beat the hidden attribute: the button
   stayed over the video while it played */
.playbtn[hidden]{display:none}

/* Site Credits: the agency's words beside its mark, not a 1024px square
   under a narrow column. Desktop: text left, the mark 400px on the right,
   held in view while the text scrolls. Phone: the mark after the text,
   no wider than a hand's width of screen. */
.cols.credits article{display:grid;grid-template-columns:minmax(0,680px) 420px;
  column-gap:64px;align-items:start;justify-content:space-between}
.cols.credits article>p{grid-column:1}
.cols.credits article>img{grid-column:2;grid-row:1/span 20;width:100%;height:auto;
  position:sticky;top:120px;border-radius:6px}
@media(max-width:900px){
  .cols.credits article{grid-template-columns:minmax(0,1fr)}
  .cols.credits article>img{grid-column:1;grid-row:auto;position:static;
    max-width:360px;margin:12px auto 0}}

/* The blog index as SCAD's (21 Sep 2026): a third column once there is room,
   and square pictures. Two columns beside the sidebar made each card about
   465px wide, and the 196px-tall box cut a horizontal band out of the middle
   of pictures that are not widescreen. Every listing that uses these cards
   follows - the English and Spanish blog, and the category and tag pages. */
@media(min-width:1040px){.bloglist{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.pcard2 img{height:auto;aspect-ratio:1/1;object-fit:cover}

/* FAQ pages: "Have a question?" beside the answers, in the navy of the
   service pages' quote card. Below 1024px it follows the answers. */
@media(min-width:1024px){
  .cols.hasask{grid-template-columns:minmax(0,1fr) 320px;gap:40px}
  .askbox{position:sticky;top:var(--stick)}}
.askbox{align-self:start;min-width:0;background:var(--navy);color:#fff;padding:28px}
.askbox h2{font-size:22px;margin:0 0 6px;color:#fff;text-align:left}
.askbox .sub{font-size:14.5px;margin:0 0 16px;color:rgba(255,255,255,.85)}
.askbox label{color:#fff}
.askbox .fields{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.askbox input,.askbox textarea{width:100%;border:0;border-radius:0;background:#fff;
  font-size:17px;padding:10px 12px}
.askbox .submit{width:100%;margin-top:14px}
.askbox .formnote{color:rgba(255,255,255,.78);font-size:13px;margin:10px 0 0}
@media(max-width:1023px){.askbox{max-width:640px}}

/* Section backgrounds load when they are near the screen: html.lbg is set
   by a line in the head, and the motion script adds .bg-in to each section
   600px before it arrives. !important is what lets a stylesheet rule beat
   the inline --bg. */
html.lbg [style*="--bg"]:not(.bg-in){--bg:none !important}