/* Layout: navy hero + white body, one yellow accent reserved for "act"; tier colors only as plan markers. Single light theme by design. */
:root{
  --navy:#282461; --navy-700:#3A3585; --navy-50:#EEF0F8; --navy-100:#E2E5F2;
  --cta:#FFC52E; --cta-hover:#FFD45E;
  --orange:#F28A2E; --blue:#4DB2E6; --gold:#F5C243;
  --ink:#1B1A2E; --slate:#5B5F77; --line:#E3E5EE; --paper:#FFFFFF; --mist:#F7F8FC;
  --good:#1F8A5B;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-card:14px; --r-btn:999px; --r-input:10px;
  --shadow:0 8px 24px rgba(40,36,97,.08);
  --wrap:1200px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:18px}}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--navy)}
h2{font-size:clamp(28px,4vw,40px);font-weight:800}
h3{font-size:clamp(19px,2vw,22px);font-weight:700}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,3vw,24px)}
section{padding-block:clamp(56px,8vw,96px)}
.eyebrow{font:600 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.lead{color:var(--slate);font-size:clamp(17px,1.6vw,19px);max-width:62ch}
.stack{display:grid;gap:16px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r-btn);font:600 17px/1 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .18s ease-out,transform .18s ease-out;white-space:nowrap}
.btn svg{width:20px;height:20px;flex:none}
.btn-cta{background:var(--cta);color:var(--navy)}
.btn-cta:hover{background:var(--cta-hover)}
.btn-ghost-dark{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy-50)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.tlink{color:var(--navy);font-weight:600;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.tlink:hover{text-decoration:underline}
.tlink svg{width:16px;height:16px}

/* header */
.util{background:var(--navy-50);font-size:14px;color:var(--slate)}
.util .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:6px}
.util nav{display:flex;gap:18px}
.util a{text-decoration:none}
.util a:hover{color:var(--navy)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:#fff;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:16px;height:72px;max-width:1320px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);flex:none}
.logo-mark{width:42px;height:42px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font:800 17px var(--display);letter-spacing:-.02em;position:relative}
.logo-mark::after{content:"";position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;background:var(--cta);border:2px solid #fff}
.logo-text{font:800 17px/1 var(--display);letter-spacing:.01em}
.logo-text small{display:block;font:600 11px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-top:3px}
.mainnav{display:flex;gap:2px;margin-left:4px}@media (max-width:1440px){.mainnav a{font-size:15px;padding:8px 7px}.hdr-right{gap:12px}.hdr-right .btn{padding:0 18px}}
.mainnav a{white-space:nowrap;font-weight:600;font-size:16px;text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:8px}
.mainnav a:hover{background:var(--navy-50);color:var(--navy)}
.mainnav a.plan{color:var(--navy)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.hdr-phone{white-space:nowrap;text-decoration:none;color:var(--navy);font-weight:700;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.hdr-phone small{font-size:12px;font-weight:500;color:var(--slate)}
.menu-btn,.phone-icon{display:none;width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;color:var(--navy);text-decoration:none}
.menu-btn svg,.phone-icon svg{width:22px;height:22px}
@media (max-width:1300px){.mainnav{display:none}.menu-btn{display:inline-flex}}
@media (max-width:700px){.util,.hdr-phone,.hdr-right .btn{display:none}.phone-icon{display:inline-flex}header.site .wrap{height:64px;gap:12px}.hdr-right{gap:8px}}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:60;background:#fff;display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));overflow:auto}
.mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mnav a.row{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--line);text-decoration:none;font:700 20px var(--display);color:var(--navy)}
.mnav .callbox{background:var(--navy);color:#fff;border-radius:var(--r-card);padding:16px;margin-bottom:12px;display:grid;gap:4px}
.mnav .callbox strong{font:800 24px var(--display)}
.mnav .callbox span{font-size:14px;color:#C9CBE0}

/* hero */
.hero{background:var(--navy);color:#fff;padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,88px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 85% 10%,rgba(77,178,230,.18),transparent 60%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center;position:relative}
.hero h1{color:#fff;font-size:clamp(36px,5.6vw,60px);font-weight:800}
.hero h1 .kicker{display:block;font:600 14px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#BFD9EE;margin-bottom:16px}
.hero .sub{color:#DCDDF0;font-size:clamp(17px,1.7vw,20px);max-width:54ch;margin-top:20px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.proofrow{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;font-size:15px;color:#DCDDF0;align-items:center}
.proofrow .stars{color:var(--cta);letter-spacing:2px;font-size:16px}
.proofrow b{color:#fff}
.proofrow span{display:inline-flex;gap:8px;align-items:center}
.proofrow svg{width:18px;height:18px;color:var(--blue)}
.photo{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#3d3a86 0%,#1f1c4d 100%);aspect-ratio:4/5;max-width:100%;isolation:isolate}
.photo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 14px);z-index:-1}
.photo .ph-label{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.94);color:var(--ink);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4}
.photo .ph-label b{display:block;color:var(--navy);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.photo .ph-icon{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.35)}
.photo .ph-icon svg{width:64px;height:64px}
.hero .float-card{position:absolute;left:-20px;top:28px;background:#fff;color:var(--ink);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;font-size:14px;max-width:250px}
.float-card .av{width:40px;height:40px;border-radius:50%;background:var(--navy-100);display:grid;place-items:center;color:var(--navy);font:800 15px var(--display);flex:none}
.float-card b{display:block;color:var(--navy)}
.hero-media{position:relative}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-media{order:2}
  .photo{aspect-ratio:16/10}
  .hero .float-card{left:12px;top:12px}
}
@media (max-width:520px){
  .hero .ctas .btn{width:100%}
  .hero .sub .more{display:none}
  .proofrow .po-hide{display:none}
}

/* quick paths */
.paths{padding-block:clamp(40px,5vw,64px);background:var(--mist);border-bottom:1px solid var(--line)}
.paths-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.paths-head h2{font-size:clamp(24px,3vw,32px)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:16px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;text-align:left;font:600 16px/1.3 var(--body);color:var(--ink);cursor:pointer;text-decoration:none;transition:border-color .18s,transform .18s}
.tile:hover{border-color:var(--navy);transform:translateY(-2px)}
.tile .ic{width:44px;height:44px;border-radius:50%;background:var(--navy-50);display:grid;place-items:center;color:var(--navy)}
.tile .ic svg{width:22px;height:22px}
.tile small{display:block;font-weight:500;color:var(--slate);font-size:13px;margin-top:2px}
.tile.urgent .ic{background:#FFF1E4;color:#B85E10}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}.tile{min-height:104px;padding:14px}}

/* trust strip */
.trust{padding-block:20px;border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0;padding:0;display:flex;gap:12px 32px;flex-wrap:wrap;justify-content:space-between;align-items:center;font-size:15px;color:var(--slate)}
.trust li{display:flex;gap:10px;align-items:center}
.trust li b{color:var(--ink)}
.trust svg{width:22px;height:22px;color:var(--navy);flex:none}
.trust .g{font:700 15px var(--display);color:var(--navy)}
@media (max-width:700px){.trust ul{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;scrollbar-width:none}.trust li{flex:none;background:var(--mist);padding:8px 12px;border-radius:999px}}

/* why */
.why .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.why h2{font-size:clamp(30px,4.2vw,46px)}
.why .body{display:grid;gap:20px}
.pillars{display:grid;gap:0;border-top:1px solid var(--line);margin-top:8px}
.pillar{display:grid;grid-template-columns:48px 1fr;gap:16px;padding-block:20px;border-bottom:1px solid var(--line)}
.pillar .ic{width:48px;height:48px;border-radius:12px;background:var(--navy);color:var(--cta);display:grid;place-items:center}
.pillar .ic svg{width:24px;height:24px}
.pillar p{color:var(--slate);margin-top:4px}
.owner{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center;background:var(--mist);border-radius:var(--r-card);padding:16px}
.owner .photo{aspect-ratio:1;border-radius:12px}
.owner .photo .ph-icon svg{width:32px;height:32px}
.owner q{display:block;font-style:normal;color:var(--ink)}
.owner small{display:block;color:var(--slate);margin-top:6px;font-size:14px}
@media (max-width:900px){.why .wrap{grid-template-columns:1fr}}
/* Homepage "Why 365 is different" (owner mock-up, Oct 21, 1.9.315): heading + intro side by side, four centred cards; phones: one column, icon left. */
.hd-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px clamp(32px,5vw,72px);align-items:center}
.hd-head .eyebrow{grid-column:1/-1}
.hd h2{font-size:clamp(30px,4.2vw,48px)}
.hd-head .lead{max-width:54ch;text-wrap:pretty}
.hd-cards{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.hd-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:28px 22px 30px;text-align:center;display:grid;gap:10px;align-content:start;justify-items:center}
.hd-ic{display:flex;align-items:center;justify-content:center;gap:12px;min-height:80px;margin-bottom:6px}
.hd-ic svg{width:80px;height:80px;flex:none}
.hd-c1 .hd-ic svg{width:70px;height:70px}
.hd-pct{font:800 64px/1 var(--display);color:var(--navy);letter-spacing:-.02em}
.hd-card h3{font-size:clamp(20px,1.9vw,24px)}
.hd-card p{color:var(--slate);font-size:16px;text-wrap:balance}
@media (max-width:1023px){.hd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.hd-head{grid-template-columns:1fr}}
@media (max-width:600px){
  .hd-cards{grid-template-columns:1fr;gap:12px}
  .hd-card{grid-template-columns:56px minmax(0,1fr);text-align:left;justify-items:start;column-gap:16px;row-gap:4px;padding:18px 18px 20px}
  .hd-card h3,.hd-card p{grid-column:2}
  .hd-card h3{font-size:20px}
  .hd-card p{font-size:15px;text-wrap:pretty}
  .hd-ic{grid-column:1;grid-row:1/3;align-self:start;justify-content:flex-start;min-height:0;margin:0;width:56px}
  .hd-ic svg{width:48px;height:48px}
  .hd-c1 .hd-ic svg{display:none}
  .hd-pct{font-size:32px}
}

/* process */
.process{background:var(--mist)}
.steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.steps li{background:#fff;border-radius:var(--r-card);padding:20px;border:1px solid var(--line);counter-increment:s;display:grid;gap:8px;align-content:start}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:800 16px var(--display)}
.steps li:last-child::before{background:var(--cta);color:var(--navy)}
.steps b{font:700 18px/1.25 var(--display);color:var(--navy)}
.steps span{color:var(--slate);font-size:15px}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps li{grid-template-columns:36px 1fr;column-gap:14px}.steps li::before{grid-row:span 2}}

/* services */
.svc-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.svc{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--ink);transition:border-color .18s,box-shadow .18s;background:#fff}
.svc:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.svc .ic{width:48px;height:48px;border-radius:50%;background:var(--navy-50);color:var(--navy);display:grid;place-items:center}
.svc .ic svg{width:24px;height:24px}
.svc p{color:var(--slate);font-size:15px}
.svc .tlink{margin-top:4px;font-size:15px}
.svc .tag{justify-self:start;font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
@media (max-width:1000px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr;gap:10px}.svc{grid-template-columns:48px 1fr;column-gap:14px;padding:16px}.svc .ic{grid-row:span 3}.svc .tag{display:none}}

/* plan */
.plan{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.plan h2{color:#fff;font-size:clamp(30px,4.4vw,48px);max-width:18ch}
.plan .lead{color:#DCDDF0}
.plan-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:end}
.shield{display:inline-flex;gap:10px;align-items:center;font:700 14px var(--body);letter-spacing:.06em;text-transform:uppercase;color:#BFD9EE;margin-bottom:16px}
.shield svg{width:28px;height:28px;color:var(--cta)}
.plan-why{display:grid;gap:12px;font-size:16px;color:#DCDDF0;border-left:2px solid rgba(255,255,255,.2);padding-left:20px}
.plan-why b{color:#fff}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;align-items:stretch}
.tier{background:#fff;color:var(--ink);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:16px;border-top:5px solid var(--c);position:relative}
.tier.featured{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.tier .badge{position:absolute;top:-14px;right:16px;background:var(--c);color:var(--navy);font:700 12px var(--body);letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.tier h3{display:flex;align-items:center;gap:8px}
.tier h3 .dot{width:12px;height:12px;border-radius:50%;background:var(--c)}
.price{font:800 44px/1 var(--display);color:var(--navy);font-variant-numeric:tabular-nums}
.price small{font:500 16px var(--body);color:var(--slate)}
.tier .best{font-size:14px;color:var(--slate);margin-top:-8px}
.tier .price-yr{font-size:14px;color:var(--slate);margin-top:-10px} /* 1.9.387: customers pay monthly or yearly (owner, Oct 23) */
.tier ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px}
.tier li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.tier li svg{width:20px;height:20px;color:var(--c);margin-top:1px}
.tier li.inherit{color:var(--slate);font-weight:600}
.tier .btn{margin-top:auto;width:100%}
.tier.essential{--c:var(--orange)} .tier.preferred{--c:var(--blue)} .tier.complete{--c:var(--gold)}
.plan-foot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;margin-top:28px;color:#DCDDF0;font-size:15px}
.plan-foot span{display:inline-flex;gap:8px;align-items:center}
.plan-foot svg{width:18px;height:18px;color:var(--cta)}
@media (max-width:960px){
  .plan-top{grid-template-columns:1fr}
  .tiers{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(272px,82%);overflow-x:auto;scroll-snap-type:x mandatory;padding:16px 4px 8px;margin-inline:-4px;scrollbar-width:none}
  .tier{scroll-snap-align:center}
  .tier.featured{transform:none;order:-1}
}

/* reviews */
.rev-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.rev-agg{display:flex;align-items:center;gap:14px}
.rev-agg .big{font:800 52px/1 var(--display);color:var(--navy)}
.rev-agg .stars{color:#E8A400;letter-spacing:2px;font-size:20px}
.rev-agg small{display:block;color:var(--slate);font-size:14px}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.rev{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;display:flex;flex-direction:column;gap:12px;background:#fff}
.rev .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rev .stars{color:#E8A400;letter-spacing:2px}
.chip{font:600 12px var(--body);background:var(--navy-50);color:var(--navy);padding:5px 10px;border-radius:999px;white-space:nowrap}
.rev blockquote{margin:0;font-size:16px;color:var(--ink)}
.rev .who{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--slate);gap:8px;flex-wrap:wrap}
.rev .who b{color:var(--ink)}
.rev .src{display:inline-flex;align-items:center;gap:6px}
.gdot{width:16px;height:16px;border-radius:50%;background:conic-gradient(#4285F4 0 25%,#34A853 0 50%,#FBBC05 0 75%,#EA4335 0);flex:none}
@media (max-width:960px){.rev-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(280px,85%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}.rev{scroll-snap-align:start}}

/* repair or replace */
.ror{background:var(--mist)}
.ror .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.rule{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);padding:24px;display:grid;gap:16px}
.rule-row{display:grid;grid-template-columns:110px 1fr;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.rule-row:last-child{border-bottom:0;padding-bottom:0}
.rule-row b{font:700 16px var(--display);color:var(--navy)}
.rule-row span{color:var(--slate);font-size:15px}
.rule-row .verdict{display:inline-block;font:700 12px var(--body);text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;border-radius:6px}
.v-repair{background:#E3F4EC;color:var(--good)} .v-maybe{background:#FFF4D6;color:#8A6400} .v-replace{background:var(--navy-50);color:var(--navy)}
@media (max-width:900px){.ror .wrap{grid-template-columns:1fr}.rule-row{grid-template-columns:1fr;gap:4px}}

/* welcome band */
.band{padding-block:0}
.band-inner{background:linear-gradient(100deg,#FFF6DD 0%,#FFEFC4 100%);border-radius:20px;padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-block:clamp(40px,6vw,72px)}
.band .gift{width:64px;height:64px;border-radius:16px;background:var(--navy);color:var(--cta);display:grid;place-items:center}
.band .gift svg{width:32px;height:32px}
.band h3{font-size:clamp(22px,2.6vw,28px)}
.band p{color:#5a4b1e;margin-top:6px}
.band .checks{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:10px;font:600 14px var(--body);color:var(--navy)}
@media (max-width:820px){.band-inner{grid-template-columns:1fr}.band .btn{width:100%}}

/* areas */
.areas .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:center}
.areachips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.areachips a{border:1px solid var(--line);border-radius:999px;padding:8px 14px;text-decoration:none;font-weight:600;font-size:15px;color:var(--navy)}
.areachips a:hover{border-color:var(--navy)}
.office{margin-top:20px;display:flex;gap:12px;align-items:flex-start;color:var(--slate);font-size:15px}
.office svg{width:22px;height:22px;color:var(--navy);flex:none;margin-top:2px}
.office b{color:var(--ink)}
.map{border-radius:18px;background:var(--navy-50);aspect-ratio:5/4;max-width:100%;overflow:hidden;position:relative}
.map svg{width:100%;height:100%;display:block}
@media (max-width:900px){.areas .wrap{grid-template-columns:1fr}.map{aspect-ratio:4/3}}

/* faq */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:700 18px/1.3 var(--display);color:var(--navy);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:16px;font:500 26px var(--body);color:var(--navy);transition:transform .18s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:20px;color:var(--slate);max-width:62ch}
@media (max-width:900px){.faq .wrap{grid-template-columns:1fr}}

/* final cta */
.final{background:var(--navy);color:#fff;text-align:left}
.final .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.final h2{color:#fff}
.final p{color:#DCDDF0;margin-top:10px}
.final .ctas{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:560px){.final .ctas .btn{width:100%}}

/* footer */
footer.site{background:#1A1846;color:#C9CBE0;font-size:15px;padding-block:56px calc(32px + 80px)}
@media (min-width:701px){footer.site{padding-bottom:32px}}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:32px}
footer h4{font:700 14px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none;color:#C9CBE0}
footer a:hover{color:#fff}
.nap{display:grid;gap:10px}
.nap .logo{color:#fff}
.nap .logo-text small{color:#9fa2c4}
.nap strong{color:#fff;font:800 22px var(--display)}
.legal{border-top:1px solid #33316a;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#9fa2c4}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.nap{grid-column:1/-1}}

/* sticky mobile bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:none;gap:10px;transform:translateY(110%);transition:transform .2s ease-out;box-shadow:0 -6px 20px rgba(40,36,97,.08)}
.mbar.show{transform:none}
.mbar .btn{flex:1;min-height:52px;font-size:16px;padding:0 12px}
@media (max-width:700px){.mbar{display:flex}}

/* booking modal */
.modal{position:fixed;inset:0;z-index:70;background:rgba(27,26,46,.55);display:grid;place-items:center;padding:16px}
.sheet{background:#fff;border-radius:20px;width:min(560px,100%);max-height:calc(100% - 16px);overflow:auto;padding:24px;display:grid;gap:18px}
@media (max-width:560px){.modal{place-items:end center;padding:0}.sheet{border-radius:20px 20px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))}}
.sheet-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--navy)}
.x svg{width:20px;height:20px}
label{display:grid;gap:6px;font:600 14px var(--body);color:var(--ink)}
input[type=text],input[type=tel],input[type=email],textarea{font:400 17px var(--body);height:52px;border:1.5px solid var(--line);border-radius:var(--r-input);padding:0 14px;color:var(--ink);background:#fff;width:100%}
textarea{height:84px;padding:12px 14px;resize:vertical}
input:focus,textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(77,178,230,.35)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}
.err{color:#B3261E;font-size:14px;font-weight:600}
.urgent-box{background:#FFF4E8;border:1px solid #F7C99A;border-radius:14px;padding:16px;display:grid;gap:10px}
.urgent-box b{color:#8A4708}
.ok{display:grid;gap:12px;text-align:left}
.ok .check{width:56px;height:56px;border-radius:50%;background:#E3F4EC;color:var(--good);display:grid;place-items:center}
.ok .check svg{width:28px;height:28px}
.upsell{border:1px dashed var(--blue);border-radius:14px;padding:14px;background:#F2F9FD;font-size:15px}
.note{font-size:13px;color:var(--slate)}
.mini-rev{font-size:14px;color:var(--slate);border-left:3px solid var(--cta);padding-left:12px}

/* welcome (campaign) view */
.w-top{background:#fff;border-bottom:1px solid var(--line)}
.w-top .wrap{display:flex;justify-content:space-between;align-items:center;height:68px;gap:12px}
.w-top a.ph{font-weight:700;color:var(--navy);text-decoration:none;font-size:15px;text-align:right;line-height:1.2}
.w-top a.ph small{display:block;color:var(--slate);font-weight:500;font-size:12px}
.cobrand{background:var(--navy-50);font-size:14px;color:var(--navy);padding-block:8px;text-align:center}
.w-hero{background:var(--navy);color:#fff;padding-block:clamp(32px,6vw,72px)}
.w-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,56px);align-items:start}
.w-hero h1{color:#fff;font-size:clamp(34px,5vw,54px);font-weight:800}
.w-hero .kicker{display:block;font:600 14px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#BFD9EE;margin-bottom:14px}
.w-hero .sub{color:#DCDDF0;font-size:clamp(17px,1.7vw,20px);margin-top:16px;max-width:52ch}
.nocatch{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.nocatch span{background:rgba(255,197,46,.14);border:1px solid rgba(255,197,46,.5);color:#FFE29A;border-radius:999px;padding:8px 14px;font:700 15px var(--body);display:inline-flex;gap:8px;align-items:center}
.nocatch svg{width:16px;height:16px}
.claim{background:#fff;color:var(--ink);border-radius:18px;padding:24px;display:grid;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.claim h2{font-size:26px}
.claim .check-row{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:15px}
.claim .check-row input{width:22px;height:22px;margin-top:1px;flex:none;accent-color:var(--navy)}
.included{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.inc{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;display:grid;gap:8px;align-content:start;border-top:4px solid var(--orange)}
.inc .ic{width:44px;height:44px;border-radius:50%;background:#FFF1E4;color:#B85E10;display:grid;place-items:center}
.inc .ic svg{width:22px;height:22px}
.inc p{color:var(--slate);font-size:15px}
.letter{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;background:var(--mist);border-radius:18px;padding:clamp(20px,3vw,32px)}
.letter .photo{aspect-ratio:1;border-radius:14px}
.letter .photo .ph-icon svg{width:36px;height:36px}
.letter p{font-size:clamp(17px,1.8vw,20px);color:var(--ink)}
.letter small{display:block;margin-top:12px;color:var(--slate);font-size:15px}
.terms{font-size:13px;color:var(--slate);border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
@media (max-width:900px){.w-hero .wrap{grid-template-columns:minmax(0,1fr)}.included{grid-template-columns:1fr}.letter{grid-template-columns:72px 1fr;gap:16px}}

/* ---- WordPress additions ---- */
body.s365-page{margin:0}
body.admin-bar header.site{top:32px}
@media (max-width:782px){body.admin-bar header.site{top:46px}}
.photo.has-img{background:var(--navy-50)}
.photo.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.6;cursor:progress}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
.page-content{max-width:760px;margin:0 auto}
.page-content > * + *{margin-top:1em}

/* Google rating badge */
.gbadge{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--ink);border-radius:999px;padding:12px 22px;box-shadow:0 8px 22px rgba(0,0,0,.22);text-decoration:none;font:500 18px/1 var(--body);white-space:nowrap}
.gbadge .g{width:26px;height:26px;flex:none}
.gbadge .gstars{color:#F4BE39;font-size:24px;letter-spacing:3px;line-height:1}
.gbadge .gtext b,.proofrow .gbadge b{font-weight:700;color:var(--ink)}
a.gbadge:hover{box-shadow:0 10px 26px rgba(0,0,0,.3)}
.proofrow{gap:14px 24px}
@media (max-width:420px){.gbadge{gap:10px;padding:10px 16px;font-size:16px}.gbadge .gstars{font-size:20px;letter-spacing:2px}.gbadge .g{width:22px;height:22px}}
@media (max-width:360px){.gbadge{gap:8px;padding:10px 12px}.gbadge .gstars{font-size:18px;letter-spacing:1px}} /* 1.9.382: fits 320px (was 307px wide in a 288px column on /welcome-new/) */
/* hero photo: keep the technician in frame when cropped */
.hero .photo.has-img img{object-position:28% 50%}

/* real logo image */
.logo.logo-img{display:flex;align-items:center}
.logo.logo-img img{height:62px;width:auto;max-width:none;display:block}
@media (max-width:700px){.logo.logo-img img{height:52px}}
.w-top .logo.logo-img img{height:50px}
.mnav .logo.logo-img img{height:56px}
footer .logo.logo-img img{height:76px}

/* ---- Header styled like the current 365 site: navy bar, light-blue top strip, white links ---- */
.util{background:var(--blue);color:var(--navy);font-size:13px;font-weight:600}
.util .wrap{padding-block:4px}
.util a{color:var(--navy)}
.util a:hover{color:#fff}
header.site{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08)}
header.site .wrap{height:112px}
header.site .logo.logo-img img{height:96px} /* owner, Oct 22 (1.9.379): 96px in a 112px bar after the utility strip went; was 80px in 96px (1.9.301), 56px in 84px before */
.mainnav a{color:#fff;font-weight:500}
.mainnav a:hover{background:rgba(255,255,255,.1);color:#fff}
.mainnav a.plan{color:#fff}
.hdr-phone{color:#fff;text-decoration:none}
.hdr-phone small{color:#BFD9EE;text-decoration:none}
header.site .btn-cta{text-transform:uppercase;letter-spacing:.03em}
.menu-btn,.phone-icon{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.w-top{background:var(--navy);border-bottom:4px solid var(--blue)}
.w-top a.ph{color:#fff}
.w-top a.ph small{color:#BFD9EE}
.w-top .logo.logo-img img{height:50px}
.hero{padding-top:clamp(28px,4vw,56px)}
@media (max-width:700px){
  .util{display:block;height:6px;overflow:hidden;padding:0}
  .util .wrap{display:none}
  header.site .wrap{height:76px}
  header.site .logo.logo-img img{height:60px}
}
header.site .logo,.w-top .logo{color:#fff}
header.site .logo-text small,.w-top .logo-text small{color:#BFD9EE}
header.site .logo-mark,.w-top .logo-mark{background:#fff;color:var(--navy)}
header.site .hdr-phone{font-size:19px}
header.site .hdr-phone .num{border-bottom:2px solid rgba(255,255,255,.7);line-height:1.1}

/* Google G mark (trust bar, review cards) */
.glogo{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-3px}
.trust .glogo{width:20px;height:20px}
/* Quick-path tiles: bold color circles + line icons */
.tile{background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(40,36,97,.06);padding:18px}
.tile:hover{border-color:transparent;box-shadow:0 10px 28px rgba(40,36,97,.14);transform:translateY(-3px)}
.tile .ic,.tile.urgent .ic{width:60px;height:60px;border-radius:50%;color:#fff;background:var(--tc,var(--navy));box-shadow:0 6px 14px -4px var(--tc,var(--navy))}
.tile .ic svg{width:32px;height:32px}
.tile.t-ac{--tc:#0FA3D8}
.tile.t-leak{--tc:#1D6FD1}
.tile.t-hot{--tc:#F07A1A}
.tile.t-drain{--tc:#5B4FC4}
.tile.t-new{--tc:#282461}
.tile.t-maint{--tc:#F2B705}
.tile.t-maint .ic{color:var(--navy)}
.tile:hover .ic{transform:scale(1.06)}
.tile .ic{transition:transform .18s ease-out}
@media (max-width:560px){.tile .ic{width:52px;height:52px}.tile .ic svg{width:28px;height:28px}}
/* v1.0.7: tile colors + aligned headlines */
.tile.t-ac{--tc:#4DB2E6}
.tile.t-drain{--tc:#F2B705}
.tile.t-drain .ic{color:var(--navy)}
.tile.t-new{--tc:#5CC46B}
.tile.t-maint{--tc:#282461}
.tile.t-maint .ic{color:#fff}
.tile{justify-content:flex-start;gap:18px}
.tile > span:last-child{display:block;line-height:1.3}

/* v1.0.8: Why 365 section */
.why-eyebrow{font-size:17px;letter-spacing:.07em;color:var(--navy-700)}
@media (max-width:560px){.why-eyebrow{font-size:15px}}
.pillar .ic{width:52px;height:52px}
.pillar .ic svg{width:30px;height:30px}
/* v1.0.12: Why-365 icons white */
.pillar .ic{color:#fff}
/* v1.0.14: all help-tile icon circles navy */
.tile[class*="t-"]{--tc:#282461}
.tile[class*="t-"] .ic{color:#fff}
/* v1.0.15: interactive help tiles — light yellow on hover/focus, "Book now" cue */
.tile{position:relative;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.tile::after{content:"Book now \2192";margin-top:auto;font:700 13px/1 var(--body);color:var(--navy);opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease}
.tile .ic{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}
@media (hover:hover){
.tile:hover{background:#FFF7D6;border-color:#F2B705;box-shadow:0 12px 28px rgba(242,183,5,.25);transform:translateY(-4px)}
.tile:hover .ic{transform:scale(1.1) rotate(-6deg)}
.tile:hover::after{opacity:1;transform:none}
}
.tile:focus-visible{outline:3px solid #F2B705;outline-offset:2px;background:#FFF7D6}
.tile:focus-visible::after{opacity:1;transform:none}
.tile:active{transform:translateY(-1px) scale(.98);background:#FFEFB0}
@media (prefers-reduced-motion:reduce){.tile,.tile .ic,.tile::after{transition:none}.tile:hover,.tile:hover .ic{transform:none}}
/* v1.0.16: interactive service cards — match help tiles */
.svc{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.svc .ic{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,color .2s ease}
.svc .tlink svg{transition:transform .2s ease}
@media (hover:hover){
.svc:hover{background:#FFF7D6;border-color:#F2B705;box-shadow:0 12px 28px rgba(242,183,5,.25);transform:translateY(-4px)}
.svc:hover .ic{transform:scale(1.1) rotate(-6deg);background:var(--navy);color:#fff}
.svc:hover .tlink svg{transform:translateX(4px)}
}
.svc:focus-visible{outline:3px solid #F2B705;outline-offset:2px;background:#FFF7D6}
.svc:active{transform:translateY(-1px) scale(.98);background:#FFEFB0}
@media (prefers-reduced-motion:reduce){.svc,.svc .ic,.svc .tlink svg{transition:none}.svc:hover,.svc:hover .ic{transform:none}}
/* v1.0.17: Water Treatment and Air Quality split out */
@media (min-width:901px){.fgrid{grid-template-columns:1.3fr repeat(5,1fr);gap:28px}}
footer h4.fsub{margin-top:24px}
/* v1.0.18: bigger plan label, centered compare link */
.shield{font-size:18px;letter-spacing:.07em;gap:12px}
.shield svg{width:34px;height:34px}
.plan-foot{justify-content:center;text-align:center}
.plan-foot .tlink{font-size:16px}
@media (max-width:560px){.shield{font-size:15px}.shield svg{width:28px;height:28px}}
/* v1.0.19: Protection Plan logo */
.plan-logo{display:block;width:clamp(200px,24vw,280px);height:auto;margin:0 0 18px}
@media (max-width:560px){.plan-logo{width:190px;margin-bottom:14px}}
/* v1.0.20: logo replaces the shield label */
.plan-logo{margin-bottom:22px}
/* v1.0.21: Reviews label matches other section labels */
/* v1.0.23: all 20 service areas — neighborhoods under the town chips, full list in footer */
.hoods{margin-top:18px}
.hoods-h{font:700 13px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin:0 0 6px}
.hoods-list{margin:0 0 10px;font-size:15px;line-height:1.75;color:var(--slate)}
.hoods-list a{color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.hoods-list a:hover{color:var(--navy);border-bottom-color:#F2B705}
.hoods .tlink{font-size:15px}
@media (min-width:901px){.fgrid{grid-template-columns:1.3fr repeat(4,1fr)}}
.fareas{border-top:1px solid #33316a;margin-top:36px;padding-top:24px}
.fareas h4 a{color:#fff}
.fareas p{margin:0;font-size:14px;line-height:1.9;color:#7d80a8}
.fareas p a{white-space:nowrap}

/* v1.2.0: dropdown menus */
.mainnav{align-items:center}
.mainnav .dd{position:relative}
.mainnav .dd-top{display:inline-flex;align-items:center;gap:4px}
.mainnav .chev{width:12px;height:12px;opacity:.75;transition:transform .2s ease}
.mainnav .dd-panel{position:absolute;left:-8px;top:calc(100% + 10px);min-width:240px;background:#fff;border-radius:14px;box-shadow:0 18px 40px rgba(20,18,60,.22),0 0 0 1px rgba(40,36,97,.06);padding:10px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;z-index:50}
.mainnav .dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mainnav .dd.wide .dd-panel{grid-template-columns:1fr 1fr;min-width:480px;gap:4px 12px;padding:14px}
.mainnav .dd-group{display:grid;gap:2px;align-content:start}
.mainnav .dd-title{margin:4px 10px 6px;font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.mainnav .dd-panel a{display:block;color:var(--navy);font-weight:600;font-size:15px;padding:9px 10px;border-radius:8px;white-space:nowrap;text-decoration:none}
.mainnav .dd-panel a:hover,.mainnav .dd-panel a:focus-visible{background:#FFF7D6;color:var(--navy)}
.mainnav .dd.open .dd-panel,.mainnav .dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
.mainnav .dd.open .chev,.mainnav .dd:focus-within .chev{transform:rotate(180deg)}
@media (hover:hover){.mainnav .dd:hover .dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}.mainnav .dd:hover .chev{transform:rotate(180deg)}}
.mainnav .dd:last-child .dd-panel{left:auto;right:-8px}

/* phone menu: expandable sections */
.mnav details.mrow{border-bottom:1px solid var(--line)}
.mnav details.mrow summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:56px;cursor:pointer;font:700 20px var(--display);color:var(--navy);padding:0}
.mnav details.mrow summary::-webkit-details-marker{display:none}
.mnav details.mrow summary::after{content:none}
.mnav details.mrow .chev{width:18px;height:18px;transition:transform .2s ease}
.mnav details.mrow[open] .chev{transform:rotate(180deg)}
.mnav .msub{display:grid;padding:0 0 12px 4px}
.mnav .msub .dd-title{margin:10px 0 2px;font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.mnav a.row.sub{min-height:44px;font:600 17px var(--body);border-bottom:0;color:var(--ink)}

/* v1.3.0: homepage photo styles (Settings → 365 Site → Homepage photo style) */
.hero-media .hm-accent,.hero-media .hm-dots,.hero-media .hm-review,.hero-media .hm-chip{display:none}
.hm-review{position:absolute;z-index:3;margin:0;background:#fff;color:var(--ink);border-radius:16px;padding:14px 16px 12px;box-shadow:0 20px 40px -12px rgba(10,8,40,.45);max-width:290px;display:grid;gap:6px}
.hm-review .stars{color:#E8A400;letter-spacing:2px;font-size:15px}
.hm-review blockquote{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}
.hm-review figcaption{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--slate)}
.hm-review figcaption b{color:var(--navy)}
.hm-review .g{width:16px;height:16px;margin-left:auto}
.hm-chip{position:absolute;z-index:3;align-items:center;gap:8px;background:var(--cta);color:var(--navy);font:700 14px var(--body);padding:10px 14px;border-radius:999px;box-shadow:0 12px 24px -8px rgba(10,8,40,.45)}
.hm-chip svg{width:18px;height:18px}
.hero-media .photo{position:relative;z-index:2}

/* Layered: yellow block offset behind the photo, dot grid, review card + chip overlapping */
.hm-layered{padding:0 0 28px 28px}
.hm-layered .hm-accent{display:block;position:absolute;right:-18px;bottom:0;width:72%;height:70%;background:var(--cta);border-radius:22px;z-index:1}
.hm-layered .hm-dots{display:block;position:absolute;left:0;top:-18px;width:140px;height:140px;background-image:radial-gradient(rgba(191,217,238,.55) 2px,transparent 2.5px);background-size:16px 16px;z-index:1}
.hm-layered .photo{border-radius:22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.hm-layered .hm-review{display:grid;left:-8px;bottom:-4px}
.hm-layered .hm-chip{display:inline-flex;right:-6px;top:22px}

/* Arch: photo in an arch with a yellow outline offset behind it */
.hm-arch{padding:18px 18px 30px 0}
.hm-arch .photo{border-radius:999px 999px 24px 24px}
.hm-arch .hm-accent{display:block;position:absolute;left:18px;top:0;right:0;bottom:12px;border:3px solid var(--cta);border-radius:999px 999px 28px 28px;z-index:1}
.hm-arch .hm-dots{display:block;position:absolute;right:-26px;top:38%;width:110px;height:110px;border-radius:50%;background:var(--blue);opacity:.9;z-index:1}
.hm-arch .hm-review{display:grid;left:-36px;bottom:0}
.hm-arch .hm-chip{display:inline-flex;right:0;top:30%}

/* Bleed: photo runs to the right edge of the screen and fades into the navy */
.hm-bleed{align-self:stretch;margin:calc(-1 * clamp(40px,6vw,80px)) calc(-1 * max(24px,(100vw - var(--wrap)) / 2 + 24px)) calc(-1 * clamp(48px,7vw,88px)) 0}
.hm-bleed .photo{border-radius:0;height:100%;aspect-ratio:auto;min-height:560px}
.hm-bleed .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,rgba(40,36,97,.55) 18%,rgba(40,36,97,0) 45%);z-index:2;pointer-events:none}
.hm-bleed .hm-review{display:grid;left:8%;bottom:40px}
.hm-bleed .hm-chip{display:inline-flex;right:40px;top:40px}

@media (max-width:900px){
  .hm-layered{padding:0 0 22px 14px}
  .hm-layered .hm-accent{right:-6px}
  .hm-layered .hm-review,.hm-arch .hm-review,.hm-bleed .hm-review{left:0;right:auto;max-width:260px}
  .hm-arch{padding:12px 12px 26px 0}.hm-arch .photo{border-radius:200px 200px 22px 22px}.hm-arch .hm-dots{right:-10px;width:70px;height:70px}
  .hm-bleed{margin:0 -24px -48px -24px}.hm-bleed .photo{min-height:360px}.hm-bleed .photo::after{background:linear-gradient(180deg,var(--navy) 0%,rgba(40,36,97,0) 30%)}
  .hm-chip{font-size:13px;padding:8px 12px}
}
@media (max-width:520px){.hm-review blockquote{font-size:14px}.hm-arch .hm-chip,.hm-layered .hm-chip{top:12px}}
.hm-arch .hm-chip{top:auto;bottom:34%;right:-10px}
@media (max-width:900px){
  .hero-media .photo{aspect-ratio:4/3.4}
  .hm-layered .hm-review,.hm-arch .hm-review,.hm-bleed .hm-review{position:relative;left:auto;bottom:auto;margin:-44px 14px 0;max-width:none;z-index:3}
  .hm-layered{padding-bottom:0}.hm-layered .hm-accent{height:60%;bottom:30px}
  .hm-arch{padding-bottom:0}.hm-arch .hm-accent{bottom:60px}.hm-arch .hm-chip{bottom:auto;top:14px;right:8px}
  .hm-bleed .photo{min-height:0}.hm-bleed .hm-review{margin:-44px 16px 24px}
}

/* v1.3.3: hero headline lines + yellow highlight line */
.hero h1 .hl-line{display:block}
.hero .sub .sub-lead{display:block;color:var(--cta);font:700 clamp(19px,2vw,24px)/1.3 var(--body);margin-bottom:8px}
@media (min-width:901px){.hero:not(.pg-hero) .wrap:has(.hm-bleed){grid-template-columns:1.35fr .65fr}}
@media (min-width:901px){.hero:not(.pg-hero) h1 .hl-line:last-child{white-space:nowrap}.hero:not(.pg-hero) h1{font-size:clamp(36px,4.2vw,60px)}}

/* v1.3.5: utility strip lines up with the header (logo on the left, Book service on the right) */
.util .wrap{max-width:1320px}
/* keep the header inside its margins so Book service ends where the strip above ends */
header.site .hdr-right{margin-left:auto}
/* 1.9.301: the larger logo needs ~40px more on wide screens, where the menu uses full-size links */
@media (min-width:1441px){header.site .wrap,.util .wrap{max-width:1360px}}
@media (min-width:1301px){.mainnav a{padding:8px 8px}}
@media (min-width:1301px) and (max-width:1440px){.mainnav a{padding:8px 6px;font-size:15px}header.site .wrap{gap:12px}}

.tlink-btn{background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer}
.paths-head .tlink-btn{font-size:inherit}
/* v1.3.11: tiles heading navy with a yellow accent bar */
.paths-head h2{color:var(--navy);position:relative;padding-bottom:14px}
.paths-head h2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:3px;background:var(--cta)}

/* welcome: "what's the catch" — Q&A left, reviews right */
.w-catch .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
.w-catch-faq h2{margin:0}
.w-catch-faq .lead{margin:12px 0 18px}
.w-catch-reviews{display:grid;gap:14px;align-content:start;padding-top:6px}
.w-catch-k{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:15px;color:var(--slate)}
.w-catch-k svg{width:20px;height:20px}
.w-catch-k b{color:var(--navy)}
.w-catch-k .star{color:#E0A526}
@media (max-width:900px){.w-catch .wrap{grid-template-columns:1fr}}
.w-catch-list details:first-child{border-top:1px solid var(--line)}
.w-catch-list .terms{border-top:0;margin-top:14px;padding-top:0}
/* location bubbles: yellow on hover */
.areachips a{transition:background-color .15s,border-color .15s,color .15s;background:#fff}
.areachips a:hover,.areachips a:focus-visible{background:#FFF1C2;border-color:var(--cta);color:var(--navy)}
/* short yellow accent bar under every eyebrow label */
.eyebrow::after{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--cta);margin-top:12px}
[style*="text-align:center"] .eyebrow::after,.center .eyebrow::after,.tc .eyebrow::after{margin-inline:auto}
/* ---------- Coupons / offers ---------- */
.cpn{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:#FFF7D6;border:2px dashed #E0A800;border-radius:18px;padding:20px 24px}
.cpn-amt{font:900 clamp(30px,3.6vw,44px)/1 var(--display);color:var(--navy);letter-spacing:-.02em;white-space:nowrap;padding-right:22px;border-right:2px dashed #E9C25A}
.cpn-h{margin:0;font:700 19px/1.25 var(--display);color:var(--navy)}
.cpn-d{margin:4px 0 0;color:var(--ink);font-size:15px}
.cpn-t{margin:6px 0 0;color:var(--slate);font-size:12.5px;line-height:1.4}
.cpn-ctas{display:grid;gap:6px;justify-items:center}
.cpn-ctas .btn{white-space:nowrap}
.cpn-call{font-size:13.5px;color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cpn-ph{outline:3px solid #D63638;outline-offset:3px}
.cpn-ph-tag{position:absolute;top:-12px;left:18px;background:#D63638;color:#fff;font:700 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px}
.cpn-row{display:grid;gap:16px}
.cpn-row.n2{grid-template-columns:1fr 1fr}
.cpn-row.n2 .cpn,.cpn-grid .cpn{grid-template-columns:1fr;gap:10px;align-content:start}
.cpn-row.n2 .cpn-amt,.cpn-grid .cpn-amt{border-right:0;padding-right:0}
.cpn-row.n2 .cpn-ctas,.cpn-grid .cpn-ctas{justify-items:start;grid-auto-flow:column;align-items:center;justify-content:start;gap:14px;margin-top:4px}
.cpn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.pg-offers{padding:28px 0 4px}
.final-offer{margin-top:22px;max-width:620px}
.cpn-mini{grid-template-columns:auto 1fr auto;padding:12px 16px;gap:14px;background:rgba(255,197,46,.12);border-color:rgba(255,197,46,.7)}
.cpn-mini .cpn-amt{font-size:24px;color:var(--cta);border-right-color:rgba(255,197,46,.5);padding-right:14px}
.cpn-mini .cpn-h{color:#fff;font-size:16px}
.cpn-mini .btn{min-height:42px;padding:0 16px;font-size:15px}
@media (max-width:900px){.cpn-row.n2,.cpn-grid{grid-template-columns:1fr}}
@media (max-width:700px){.cpn{grid-template-columns:1fr;gap:10px}.cpn-amt{border-right:0;padding-right:0}.cpn-ctas{justify-items:start;grid-auto-flow:column;align-items:center;justify-content:start;gap:14px}.cpn-mini{grid-template-columns:auto 1fr}.cpn-mini .cpn-ctas{grid-column:1/-1}}
/* claim-offer pop-up: coupon summary */
.of-cpn{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:#FFF7D6;border:2px dashed #E0A800;border-radius:14px;padding:14px 16px}
.of-amt{font:900 28px/1 var(--display);color:var(--navy);white-space:nowrap;padding-right:16px;border-right:2px dashed #E9C25A}
.of-hl{margin:0;font-weight:700;color:var(--navy);line-height:1.3}
.of-terms{margin:4px 0 0;font-size:12.5px;line-height:1.4;color:var(--slate)}
.of-terms:empty{display:none}
@media (max-width:480px){.of-cpn{grid-template-columns:1fr;gap:6px}.of-amt{border-right:0;padding-right:0}}
/* "Prefer to talk?" call tile at the bottom of every pop-up */
.mcall{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;border:1.5px solid var(--navy-100);background:var(--navy-50);border-radius:14px;text-decoration:none;color:var(--navy);transition:background-color .15s,border-color .15s}
.mcall:hover,.mcall:focus-visible{background:#FFF1C2;border-color:var(--cta)}
.mcall-ic{width:44px;height:44px;flex:none;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}
.mcall-ic svg{width:21px;height:21px}
.mcall-t{display:grid;gap:2px;flex:1;min-width:0}
.mcall-t small{font-size:13.5px;color:var(--slate);font-weight:500}
.mcall-t b{font:800 19px/1.2 var(--display);color:var(--navy)}
.mcall-go svg{width:20px;height:20px;transition:transform .15s}
.mcall:hover .mcall-go svg{transform:translateX(3px)}
/* homepage Protection Plan intro */
.plan-top{align-items:center}
.plan .plan-eyebrow{color:var(--cta);margin:0 0 14px}
.plan h2{max-width:20ch}
.plan-why{gap:16px;padding-left:28px;border-left-width:2px}
.plan-why p{margin:0;font-size:17px;line-height:1.6}
.plan-why .plan-why-lead{color:#fff;font-size:clamp(19px,1.8vw,23px);line-height:1.45;font-weight:500}
/* ---------- Homepage hero: "shield" style (no photo) ---------- */
.hero-shield{padding-block:clamp(44px,6vw,84px) clamp(40px,5vw,72px)}
.hero-shield .wrap{grid-template-columns:minmax(0,1fr);position:static}
.hero-shield .wrap > div:first-child{position:relative;z-index:1;max-width:1000px}
.hero-shield h1{font-size:clamp(40px,5.4vw,74px);line-height:1.02;letter-spacing:-.02em}
.hero-shield h1 .kicker{font-size:clamp(13px,1.2vw,16px);letter-spacing:.12em;color:#BFD9EE;margin-bottom:0}
.hero-shield h1 .kicker::after{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--cta);margin:18px 0 24px}
.hero-shield h1 .hl-line:last-child{white-space:normal}
.hero-shield .sub{max-width:62ch;margin-top:22px}
.hero-shield .sub .sub-lead{font-size:clamp(21px,2.3vw,30px);margin-bottom:12px}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:32px}
.hero-ctas .btn-cta{min-height:56px;padding:0 28px;font-size:18px}
.hero-ctas .btn-cta svg{width:20px;height:20px}
.hero-call{display:inline-flex;align-items:center;gap:10px;color:#fff;font:700 clamp(18px,1.7vw,21px)/1 var(--body);text-decoration:none;white-space:nowrap}
.hero-call svg{width:22px;height:22px}
.hero-call:hover{color:var(--cta)}
.hero-ctas .gbadge{padding:10px 18px;font-size:16px;gap:10px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hero-ctas .gbadge .gstars{font-size:18px;letter-spacing:2px}
.hero-ctas .gbadge .g{width:22px;height:22px}
.hero-trust{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,auto);justify-content:start}
.hero-trust li{display:flex;align-items:center;gap:14px;padding:4px 26px;border-left:1px solid rgba(255,255,255,.18);color:#DCDDF0;font-size:15.5px;line-height:1.35;max-width:290px}
.hero-trust li:first-child{border-left:0;padding-left:0}
.hero-trust svg{width:38px;height:38px;flex:none;color:#8FB8F0;stroke-width:1.6}
.hero-deco{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:min(44vw,640px);pointer-events:none;z-index:0}
.hero-deco svg{width:100%;height:auto;display:block}
.hero-deco path{fill:rgba(143,184,240,.07);stroke:none}
.hero-deco path.band{fill:none;stroke:var(--navy);stroke-width:1.4}
@media (max-width:1100px){.hero-trust{grid-template-columns:repeat(2,auto);row-gap:18px}.hero-trust li:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:640px){.hero-trust{grid-template-columns:1fr}.hero-trust li{border-left:0;padding-left:0}.hero-deco{opacity:.6;width:90vw;right:-30%}.hero-ctas .btn-cta{width:100%}}
.hero-trust li:last-child{max-width:360px}
.hero-ctas{column-gap:28px}
.hero-shield .wrap > div:first-child{max-width:none}
.hero-shield h1{max-width:1000px}
.hero-trust li{max-width:none}
.hero-trust li span{max-width:22ch}
.hero-trust li:last-child span{max-width:30ch}
/* hero watermark: the 365 logo, white and faded, cropped off the right edge */
.hero-deco-logo{width:min(56vw,820px);right:-9%;top:52%}
.hero-deco-logo img{display:block;width:100%;height:auto;filter:brightness(0) invert(1);opacity:.06}
@media (max-width:640px){.hero-deco-logo{width:120vw;right:-55%;top:30%}.hero-deco-logo img{opacity:.05}}
/* hero v3: text left, real logo right, trust row full width */
.hero-shield .wrap{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);column-gap:clamp(28px,4vw,64px);row-gap:0;align-items:center;position:static}
.hero-shield .wrap > div:first-child{max-width:none;position:relative;z-index:1}
.hero-shield h1{max-width:none;font-size:clamp(40px,4.9vw,70px)}
.hero-brand{position:relative;z-index:1;display:grid;justify-items:center;gap:0}
.hero-brand-logo{display:block;width:min(100%,460px);height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.25))}
.hero-brand-tag{position:relative;margin:26px 0 0;padding-top:20px;width:min(100%,460px);border-top:1px solid rgba(143,184,240,.35);text-align:center;font:600 clamp(13px,1.15vw,16px)/1.3 var(--body);letter-spacing:.26em;text-transform:uppercase;color:#8FB8F0}
.hero-brand-tag::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:72px;height:3px;border-radius:2px;background:#4FA3E0}
.hero-shield .hero-trust{grid-column:1/-1;position:relative;z-index:1;margin-top:52px;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch}
.hero-shield .hero-trust li span{max-width:26ch}
.hero-arcs{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-arcs::before,.hero-arcs::after{content:"";position:absolute;border-radius:50%;border:70px solid rgba(143,184,240,.05)}
.hero-arcs::before{width:1100px;height:1100px;right:-520px;top:-380px}
.hero-arcs::after{width:760px;height:760px;right:-420px;bottom:-460px;border-width:50px;border-color:rgba(143,184,240,.04)}
@media (max-width:1100px){.hero-shield .hero-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.hero-shield .wrap{grid-template-columns:1fr}.hero-brand{display:none}}
@media (max-width:640px){.hero-shield .hero-trust{grid-template-columns:1fr}}
@media (min-width:1101px){.hero-shield .hero-ctas{flex-wrap:nowrap;width:max-content;position:relative;z-index:2}}
/* hero on phones: centered call + badge, trust items side by side */
@media (max-width:640px){
  .hero-shield .hero-ctas{flex-direction:column;align-items:center;gap:14px;margin-top:26px}
  .hero-shield .hero-ctas .btn-cta{width:100%;justify-content:center}
  .hero-shield .hero-call{justify-content:center}
  .hero-shield .hero-trust{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);row-gap:0}
  .hero-shield .hero-trust li,.hero-shield .hero-trust li:nth-child(3){flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 5px;border-left:1px solid rgba(255,255,255,.16);font-size:12.5px;line-height:1.35}
  .hero-shield .hero-trust li:first-child{border-left:0}
  .hero-shield .hero-trust svg{width:32px;height:32px}
  .hero-shield .hero-trust li span,.hero-shield .hero-trust li:last-child span{max-width:none}
}
/* Google badge: under the hero logo on desktop, in the button stack on phones */
.hero-brand-badge{margin-top:30px;display:flex;justify-content:center}
@media (min-width:901px){.hero-shield .hero-ctas .gbadge{display:none}}
/* No photos on phones: hero photos, content images, card photos, blog images, headshots */
@media (max-width:767px){
  .hero-media,.photo.has-img,.post-cover,.post-card-img,.pg-img,.pg-card-img,.prose img,.prose figure,.wp-block-image,.page-content img{display:none!important}
  .pg-cards.has-img .pg-card{grid-template-columns:1fr}
}
/* badge sits in the same row as the hero buttons, centered under the logo */
.hero-shield .hero-ctas{width:auto;margin-top:32px}
.hero-shield .hero-brand-badge{margin-top:32px;align-self:center;justify-content:center}
@media (max-width:900px){.hero-shield .hero-brand-badge{display:none}}
/* Phones: photos are hidden, so the quote no longer needs a photo column */
@media (max-width:767px){
  .owner{grid-template-columns:1fr}
  .owner:has(.photo.has-img) > div:last-child{grid-column:1}
}
@media (max-width:767px){.letter{grid-template-columns:1fr}}
/* Booking pop-up in emergency mode */
.em-flag{display:flex;align-items:center;gap:8px;margin:0;padding:9px 14px;border-radius:10px;background:#D3281E;color:#fff;font:700 13.5px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase}
.em-flag svg{width:16px;height:16px;flex:none}
/* Neighbor Rewards referral banner + thank-you line in the booking pop-up (1.9.353) */
.ref-flag{display:flex;align-items:center;gap:12px;margin:0;padding:10px 14px;border-radius:12px;background:#FFF6DB;border:1px solid #F5D77A;color:var(--navy)}
.ref-flag-ic{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px #F5D77A}
.ref-flag-ic svg{width:20px;height:20px;color:#B7791F}
.ref-flag div{display:grid;gap:2px;min-width:0}
.ref-flag b{font:700 15px/1.25 var(--body);overflow-wrap:anywhere}
.ref-flag div span{font-size:13.5px;line-height:1.35;color:#5B5F77}
.ref-done{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:12px;background:#FFF6DB;border:1px solid #F5D77A;color:var(--ink);font-size:15px;line-height:1.45}
.ref-done svg{width:20px;height:20px;flex:none;margin-top:2px;color:#B7791F}
#book.is-em #book-k{color:#B42318}
#book.is-em #book-k::before{background:#D3281E}
#book.is-em #b-note{border-color:#D3281E;color:#B42318;font-weight:700;background:#FFF5F5}
/* Homepage "What can we help with today?" tiles: two-tone icons on pale circles, like the rest of the site (1.9.147) */
.tiles-2t .tile .ic,.tiles-2t .tile.urgent .ic,.tiles-2t .tile[class*="t-"] .ic{width:64px;height:64px;background:#EEF3FB;box-shadow:none;color:inherit}
.tiles-2t .tile .ic svg{width:50px;height:50px}
@media (max-width:560px){.tiles-2t .tile .ic,.tiles-2t .tile[class*="t-"] .ic{width:56px;height:56px}.tiles-2t .tile .ic svg{width:44px;height:44px}}
/* Homepage tiles: blue band on hover like the rest of the site; no yellow fill, icons stay still (1.9.149) */
.tiles-2t .tile{border:2px solid #DCE6F4}
.tiles-2t .tile:hover{background:#fff;border-color:#2C7FB8;box-shadow:0 8px 20px rgba(40,36,97,.1);transform:translateY(-1px)}
.tiles-2t .tile:focus-visible{background:#fff;border-color:#2C7FB8}
.tiles-2t .tile:active{background:#F5F8FD;transform:none}
.tiles-2t .tile .ic,.tiles-2t .tile:hover .ic,.tiles-2t .tile:focus-visible .ic{transform:none;transition:none}

/* "Trusted by your neighbors." beside the Google badge, and the hero buttons stretched so the Call button's
   right edge lines up with the end of that text (1.9.167). The note is hidden wherever it won't fit beside the badge. */
.trust-note,.proofrow .trust-note{display:block;flex:none;color:#DCDDF0;font-size:15px;line-height:1.3;padding-left:16px;border-left:1px solid rgba(255,255,255,.25);white-space:nowrap}
.hero-act{display:grid;width:max-content;max-width:100%}
.hero-act > .ctas .btn{flex:1 1 auto}
.hero-act > .proofrow,.hero-act > .sy-proof{flex-wrap:nowrap}
.hero-act .trust-note{margin-left:auto}
.pg-hero .hero-main,.sy-hero .sy-main{container-type:inline-size}
.hc-proof,.hero-brand-badge,.hero-ctas-proof{align-items:center;gap:16px}
.hero-ctas-proof{display:inline-flex}
@media (min-width:901px){.hero-shield .hero-ctas .hero-ctas-proof{display:none}}
@container (max-width:545px){
  .hero-act .gbadge{gap:10px;padding:10px 16px;font-size:16px}
  .hero-act .gbadge .gstars{font-size:20px;letter-spacing:2px}
  .hero-act .gbadge .g{width:22px;height:22px}
}
@container (max-width:479px){
  .hero-act > .proofrow,.hero-act > .sy-proof{gap:12px}
  .hero-act .gbadge{gap:8px;padding:9px 14px;font-size:15px}
  .hero-act .gbadge .gstars{font-size:18px;letter-spacing:1.5px}
  .hero-act .gbadge .g{width:20px;height:20px}
  .hero-act .trust-note{font-size:14px;padding-left:12px}
}
@container (max-width:429px){.hero-act .trust-note{display:none}}
@media (max-width:575px){.hc-proof .trust-note,.hero-ctas-proof .trust-note{display:none}}

/* Hero promise row "Locally owned | No commissions | No pressure" (1.9.173). Also styled in pages.css; repeated
   here because the homepage loads only site.css. See pages.css for how the wrap/divider clipping works. */
.sy-checks{--ckp:16px;list-style:none;padding:0;display:flex;flex-wrap:wrap;row-gap:10px;color:#fff;font-weight:600;font-size:16px;margin:22px 0 0 calc(-1 * (var(--ckp) + 1px));clip-path:inset(-8px -8px -8px calc(var(--ckp) + 1px))}
.sy-checks li{display:flex;align-items:center;gap:9px;padding:0 var(--ckp);border-left:1px solid rgba(255,255,255,.22);white-space:nowrap}
.sy-tick{width:22px;height:22px;border-radius:50%;background:var(--cta);display:grid;place-items:center;flex:none}
.sy-tick svg{width:13px;height:13px;color:var(--navy);stroke-width:3}
@media (min-width:1001px){.sy-checks{font-size:15.5px}}
@media (max-width:767px){.sy-checks{--ckp:12px;font-size:14.5px;row-gap:8px}.sy-checks li{gap:7px}}
@media (min-width:1001px) and (max-width:1200px){.sy-checks{--ckp:11px;font-size:14.5px}.sy-checks li{gap:7px}.sy-checks .sy-tick{width:20px;height:20px}}

/* Light-blue accent line in hero headlines, sitewide (1.9.176) */
.h1-accent{color:#7CC8F5}
.hero h1.h1-2line .hl-line{display:block}

/* Homepage hero v4 (1.9.178): text left (45%), the "Home Comfort Report" picture right (55%).
   The logo, tagline and 4-item trust bar are gone; the Google badge + trust note sit under the buttons. */
.hero-shield .wrap{grid-template-columns:minmax(0,45fr) minmax(0,55fr);column-gap:clamp(28px,4vw,56px);align-items:center}
.hero.hero-shield h1{font-size:clamp(38px,3.9vw,54px);line-height:1.04}
.hero-shield .sub{max-width:none}
.hero-shield .hero-ctas{flex-wrap:wrap;width:auto;gap:16px 28px;margin-top:30px}
.hero-shield .hero-proof{flex-wrap:nowrap;gap:16px;margin-top:28px}
.hero-report{position:relative;z-index:1;justify-self:center;width:100%;max-width:640px}
.hero-report img{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 40px rgba(6,10,40,.45))}
@media (min-width:901px) and (max-width:1180px){
  .hero-shield .hero-ctas{gap:14px 22px}
  .hero-shield .hero-ctas .btn-cta{min-height:52px;padding:0 22px;font-size:17px}
  .hero-shield .hero-call{font-size:18px}
}
/* Google badge + note: sized to the text column, the note drops out where the pair won't fit side by side */
.hero-shield .wrap > div:first-child{container:hero-l / inline-size}
.hero-shield .hero-proof .gbadge{gap:10px;padding:10px 16px;font-size:16px}
.hero-shield .hero-proof .gbadge .gstars{font-size:20px;letter-spacing:2px}
.hero-shield .hero-proof .gbadge .g{width:22px;height:22px}
@container hero-l (max-width:479px){
  .hero-shield .hero-proof{gap:12px}
  .hero-shield .hero-proof .gbadge{gap:8px;padding:9px 14px;font-size:15px}
  .hero-shield .hero-proof .gbadge .gstars{font-size:18px;letter-spacing:1.5px}
  .hero-shield .hero-proof .gbadge .g{width:20px;height:20px}
  .hero-shield .hero-proof .trust-note{font-size:14px;padding-left:12px}
}
@container hero-l (max-width:429px){.hero-shield .hero-proof .trust-note{display:none}}
/* buttons + badge row share a shrink-to-fit box (div.hero-act) so the Call link's right edge lines up with the note */
@container hero-l (max-width:439px){.hero-shield .hero-act > .ctas .btn{flex:none}}
@media (max-width:900px){
  .hero-shield .wrap{grid-template-columns:1fr;row-gap:44px}
  .hero-report{max-width:480px}
}
@media (max-width:640px){
  .hero-shield .hero-ctas{flex-direction:column;align-items:center;gap:14px;margin-top:26px}
  .hero-shield .hero-act{width:100%}
  .hero-shield .hero-proof{justify-content:center;margin-top:22px}
  .hero-shield .hero-act .trust-note{margin-left:0}
  .hero-report{max-width:400px}
  .hero-shield .wrap{row-gap:36px}
}
@media (max-width:575px){.hero-proof .trust-note{display:none}}

/* Phones: the hero paragraph folds behind "Read more" on every page (1.9.221 trial, sitewide 1.9.223). The text is in the
   page from the start; .m-more hides a hero's paragraphs but keeps its bold lead (.hero-lead / .m-keep); .m-fold hides a
   one-paragraph lead itself. Desktop and tablet unchanged. */
.hero-readmore{display:none}
@media (max-width:767px){
  .m-more:not(.open) > :not(.hero-lead):not(.m-keep){display:none}
  .m-more:not(.open) > .hero-lead,.m-more:not(.open) > .m-keep{margin-bottom:0}
  .m-fold:not(.open){display:none}
  .hero-readmore{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:6px 0;border:0;background:none;color:#8FC6FF;font:700 15px/1.2 var(--body);cursor:pointer}
  .hero-readmore svg{width:18px;height:18px;transition:transform .2s}
  .hero-readmore[aria-expanded="true"] svg{transform:rotate(180deg)}
  .hero-readmore:focus-visible{outline:2px solid #8FC6FF;outline-offset:3px;border-radius:4px}
}

/* ===== Pop-ups (1.9.232): one format for every pop-up, from the approved quick-question pop-up (owner's mock-up, Oct 18).
   Gold-bar eyebrow + navy title + one-line lead; bold questions with answer tiles; a light footer band with
   "Prefer to talk?" and the yellow button. Used by the booking form, the quick-question pop-ups, the AC evaluation,
   claim-offer, gas line and thermostat pop-ups. Lives here (not pages.css) so the homepage gets it too. */
.qq-sheet{width:min(720px,100%);gap:16px;padding:24px 26px 26px}
.qq-sheet .sheet-top{align-items:flex-start}
.qq-sheet .sheet-top > div{min-width:0}
.qq-sheet .sheet-top .x{flex:none}
/* Small 365 logo top left of every pop-up (owner, Oct 21, 1.9.327): logo + close button on the first row, eyebrow and title
   below at full width; on the thank-you step the green check sits beside the title. */
.qq-sheet .sheet-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.qq-sheet .sheet-top .pop-logo{grid-column:1 / 3;grid-row:1;justify-self:start;display:block;width:auto;height:44px}
.qq-sheet .sheet-top .x{grid-column:3;grid-row:1}
.qq-sheet .sheet-top > div{grid-column:1 / -1;grid-row:2}
.qq-sheet .sheet-top .qq-ok{grid-column:1;grid-row:2}
.qq-sheet.is-done .sheet-top > div{grid-column:2 / -1}
.ra-sheet:has(#ra-summary:not([hidden])) .sheet-top .pop-logo{display:none} /* the summary report shows its own logo */
@media (max-width:560px){.qq-sheet .sheet-top .pop-logo{height:38px}}
.qq-sheet .hc-eyebrow{display:flex;align-items:center;gap:12px;margin:0;font:700 13px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#2C7FB8}
.qq-sheet .hc-eyebrow::before{content:"";flex:none;width:36px;height:4px;border-radius:2px;background:var(--cta)}
.qq-sheet h2{font-size:clamp(22px,2.4vw,27px);line-height:1.15;color:var(--navy);margin-top:4px}
.qq-lead{color:var(--slate);font-size:15.5px;line-height:1.45;margin-top:-6px;max-width:720px}
.qq-step{display:grid;gap:16px}
.qq-step[hidden]{display:none}
.qq-q{border:0;margin:0;padding:0;min-width:0}
.qq-q legend,.qq-lab{display:block;padding:0;margin:0 0 10px;font:700 17px/1.3 var(--display);color:var(--navy)}
.qq-q legend small,.qq-lab small,.qq-f small{font:500 14px/1.3 var(--body);color:var(--slate);margin-left:6px}
.qq-opts{display:grid;gap:10px}
.qq-c3,.qq-t3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qq-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.qq-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.qq-opts > .qq-wide{grid-column:1 / -1}
.qq-opt{position:relative;display:flex;cursor:pointer}
.qq-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.qq-tile{display:flex;align-items:center;width:100%;min-height:56px;padding:10px 16px;border:1.5px solid #E1E7F0;border-radius:12px;background:#fff;font:500 15px/1.3 var(--body);color:#3A3F5C;text-align:left;box-shadow:0 1px 2px rgba(40,36,97,.04);transition:border-color .15s,background .15s,box-shadow .15s}
button.qq-tile{cursor:pointer;-webkit-appearance:none;appearance:none}
.qq-opt:hover .qq-tile,button.qq-tile:hover{border-color:#A9C8EE}
.qq-opt input:checked + .qq-tile,.qq-tile[aria-pressed="true"],button.qq-tile[aria-pressed="true"]:hover{border-color:#7FAEE8;background:linear-gradient(180deg,#EEF5FE,#E2EEFC);color:var(--navy);font-weight:700;box-shadow:0 0 0 1px #7FAEE8 inset,0 2px 8px rgba(47,127,208,.14)}
.qq-opt input:focus-visible + .qq-tile,button.qq-tile:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.qq-tip{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:13.5px;color:#8A4708;background:#FFF4E8;border:1px solid #F7C99A;border-radius:12px;padding:9px 11px;line-height:1.4}
.qq-step > .qq-tip,.qq-sheet > .qq-tip{margin-top:0}
.qq-tip[hidden]{display:none}
.qq-tip svg{width:16px;height:16px;flex:none;margin-top:2px}
/* text fields: same border, corners and height as the tiles */
.qq-f{display:grid;gap:8px;font:700 15.5px/1.3 var(--display);color:var(--navy)}
.qq-sheet .qq-f input,.qq-sheet .qq-f textarea{height:56px;border:1.5px solid #E1E7F0;border-radius:12px;padding:0 16px;font:400 16px var(--body);color:var(--ink);background:#fff;box-shadow:0 1px 2px rgba(40,36,97,.04)}
.qq-sheet .qq-f textarea{height:88px;padding:12px 16px;line-height:1.4}
.qq-sheet .qq-f input:focus,.qq-sheet .qq-f textarea:focus{border-color:#7FAEE8;box-shadow:0 0 0 3px rgba(127,174,232,.3)}
.qq-sheet .qq-f input::placeholder,.qq-sheet .qq-f textarea::placeholder{color:#8C91A8}
.qq-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qq-r3{grid-template-columns:minmax(0,1.35fr) minmax(0,1.2fr) minmax(0,.8fr)}
.qq-contact{margin-top:2px}
.qq-urgcall{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid #F3B9A6;border-radius:16px;background:#FDF0EB;color:var(--navy);text-decoration:none;box-shadow:0 6px 18px rgba(226,85,44,.12)}
.qq-urgcall[hidden]{display:none}
.qq-urgcall:hover{border-color:#E2552C}
.qq-urgcall-ic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:#E2552C;color:#fff}
.qq-urgcall-ic svg{width:22px;height:22px}
.qq-urgcall small{display:block;font:700 14px/1.3 var(--body);color:#B23A17}
.qq-urgcall b{display:block;font:800 clamp(19px,2.4vw,23px)/1.2 var(--display)}
.qq-urgcall-q{margin-top:12px}
.qq-addr-f{margin-top:12px}
.qq-ph-hint{margin:-4px 0 10px;font-size:14px;line-height:1.4;color:var(--slate)}
.qq-ph{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qq-ph-list{display:contents;list-style:none;margin:0;padding:0}
.qq-ph-list li{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;border:1.5px solid #E1E7F0;background:#F5F8FD}
.qq-ph-list img{display:block;width:100%;height:100%;object-fit:cover}
.qq-ph-x{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(20,22,60,.78);color:#fff;font:700 16px/1 var(--body);cursor:pointer}
.qq-ph-x:focus-visible{outline:3px solid var(--cta);outline-offset:1px}
.qq-ph-add{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.qq-ph-add[hidden]{display:none}
.qq-ph-add input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.qq-ph-add span{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;border:1.5px dashed #9DBDE6;border-radius:12px;background:#F5F9FE;color:var(--navy);font:700 15px/1.2 var(--display)}
.qq-ph-add:hover span{border-color:#5E97DA;background:#EEF5FE}
.qq-ph-add:focus-within span{outline:3px solid var(--cta);outline-offset:2px}
.qq-ph-add svg{width:22px;height:22px;color:#3B8FD9}
.qq-ph-msg{margin:10px 0 0;font-size:14px;color:var(--slate)}
.qq-money{position:relative;display:block}
.qq-money > span{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--slate);font:600 16px var(--body)}
.qq-sheet .qq-money input{padding-left:30px}
.qq-err{color:#B3261E;font-size:14px;font-weight:600;margin-top:-4px}
.qq-err[hidden]{display:none}
.qq-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding:16px 22px 18px;border-radius:16px;background:var(--navy-50)}
.qq-step > .qq-foot{margin-top:6px}
.qq-call{display:inline-flex;align-items:center;gap:8px;color:var(--slate);font-size:14.5px;text-decoration:none}
.qq-call b{color:var(--navy)}
.qq-call svg{width:17px;height:17px;color:var(--navy)}
.qq-call:hover b{text-decoration:underline}
.qq-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qq-go{gap:8px;white-space:nowrap}
.qq-go svg{width:16px;height:16px}
.qq-back{background:#fff;border-color:#C9D3E6}
.qq-back svg{width:16px;height:16px;transform:rotate(180deg)}
/* finished state: green check beside the title */
.qq-sheet .sheet-top .qq-ok{display:none;width:44px;height:44px;flex:none;border-radius:50%;background:#E3F4EC;color:var(--good);place-items:center;margin-right:2px}
.qq-sheet .sheet-top .qq-ok svg{width:24px;height:24px}
.qq-sheet.is-done .sheet-top .qq-ok{display:grid}
.qq-sheet.is-done .sheet-top{justify-content:flex-start}
.qq-sheet.is-done .sheet-top .x{margin-left:auto}
.qq-sheet .note{margin:0;font-size:13.5px;color:var(--slate);line-height:1.45}
.qq-sheet .upsell{font-size:15px;line-height:1.45}
.qq-sheet .urgent-box{border-radius:12px}
.qq-alt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:18px 0 0;padding:12px 16px;border:1px dashed #C6D8EF;border-radius:14px;color:var(--slate);font-size:14.5px;line-height:1.4}
.qq-alt a{display:inline-flex;align-items:center;gap:6px;color:#1F6FB2;font-weight:700;text-decoration:none}
.qq-alt a:hover{text-decoration:underline}
.qq-alt svg{width:16px;height:16px}
@media (max-width:640px){
  .qq-sheet{padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));gap:14px}
  .qq-c3,.qq-c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qq-c2{grid-template-columns:minmax(0,1fr)}
  .qq-tile{min-height:52px;padding:10px 12px;font-size:14.5px}
  .qq-q legend,.qq-lab{font-size:16px}
  .qq-row{grid-template-columns:minmax(0,1fr)}
  .qq-foot{flex-direction:column-reverse;align-items:stretch;padding:14px 16px 16px}
  .qq-acts{flex-direction:column-reverse;align-items:stretch}
  .qq-go,.qq-acts .btn{justify-content:center}
  .qq-call{justify-content:center}
}
.qq-t3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Homepage Services cards: two-tone icons on pale circles, like the "What can we help with today?" tiles (1.9.235, owner Oct 18) */
.svc-2t .svc .ic,.svc-2t .svc:hover .ic{width:64px;height:64px;background:#EEF3FB;color:inherit;transform:none}
.svc-2t .svc .ic svg{width:48px;height:48px}
@media (max-width:560px){.svc-2t .svc{grid-template-columns:56px 1fr}.svc-2t .svc .ic{width:56px;height:56px}.svc-2t .svc .ic svg{width:42px;height:42px}}

/* Booking pop-up, "Pick a time" (1.9.361): what to do in the Workiz scheduler. Its first screen asks for the service
   again, so step 1 names the tile to tap, drawn like our own selected tile. */
.bk-how{border:1px solid #E1E7F0;border-radius:14px;padding:16px 18px;background:#fff}
.bk-how-h{margin:0 0 12px;font:700 15.5px/1.3 var(--display);color:var(--navy)}
.bk-how ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bk-how li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;font:400 15.5px/1.45 var(--body);color:var(--ink)}
.bk-n{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 14px/1 var(--display)}
.bk-tile{display:inline-block;margin:2px 0 2px 4px;padding:7px 13px;border-radius:10px;border:1px solid #7FAEE8;background:linear-gradient(180deg,#EEF5FE,#E2EEFC);box-shadow:0 0 0 1px #7FAEE8 inset,0 2px 8px rgba(47,127,208,.14);color:var(--navy);font:700 15px/1.2 var(--display);white-space:nowrap}
@media (max-width:380px){.bk-how{padding:14px}.bk-how li{font-size:15px;gap:10px}}

/* 1.9.384 (owner, Oct 23: "Discuss a Maintenance Agreement" ran off the button on his iPhone). site.js adds .btn-wrap only to
   buttons whose label really doesn't fit (narrow phone, enlarged text, Safari zoom); those wrap onto two lines. Labels that fit
   stay on one line. (1.9.382-383 let every phone button wrap, which also broke labels that fit, e.g. "Book service".) */
.btn.btn-wrap{white-space:normal!important;text-align:center;line-height:1.2;padding-top:8px;padding-bottom:8px;max-width:100%}
.btn.btn-wrap span{white-space:normal}