/* Clear Landscaping — shared stylesheet, used by every page
   Lifted out of the approved page markup unchanged; the rules and their order
   are exactly as the design shipped them. Edit here, not inline. */

/* ===========================================================================
   CLEAR LANDSCAPING — HOMEPAGE, REVISION 1
   Base: Design 3 "Winter Operations" (the version approved on the Loom).
   Client revisions applied — see REVISIONS.md for the full list:
     R1  Amber/yellow UI removed. Ice cyan (#2BB3E8) carries every action.
     R2  "Not a landscaper with a plow" section brought over from Design 2.
     R3  Industry chips are now real links to the industry pages.
     R4  Page is wired into the full site: dropdown nav, deep links, footer.
     R5  Inline "Request a property assessment" form brought over from Design 2.
     R6  .wlist grid collision fixed (child selector).
     R7  All stock/placeholder photography replaced with client photography.
   =========================================================================== */
:root{
  --navy:#101825;
  --navy-2:#17222F;
  --slate:#47566B;
  --ice:#12719F;
  --pop:#2BB3E8;        /* brand ice cyan — the ONLY action colour */
  --pop-deep:#1B97C9;
  --frost:#EEF4F8;
  --frost-2:#F7FAFC;
  --line:rgba(16,24,37,.12);
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--slate);background:var(--frost-2);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;color:var(--navy);margin:0 0 .5em;
  line-height:1.08;font-weight:600;letter-spacing:-.5px}
h1{font-size:clamp(40px,6vw,80px)}
h2{font-size:clamp(30px,4.2vw,58px)}
h3{font-size:21px;letter-spacing:-.2px}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:90%;max-width:1220px;margin:0 auto}
section{padding:clamp(64px,7.5vw,120px) 0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;color:var(--navy);padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--pop);outline-offset:2px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--ice);margin:0 0 22px}
.eyebrow .dot{display:inline-flex;align-items:center;gap:0}
.eyebrow .dot i{width:9px;height:9px;border-radius:50%;background:var(--pop);display:block}
.eyebrow .dot b{width:26px;height:1.5px;background:var(--pop);display:block}
.eyebrow.on-dark{color:#CFE6F3}
/* buttons — cyan only (R1) */
.btn{display:inline-flex;align-items:center;gap:12px;border:1.5px solid transparent;border-radius:999px;
  cursor:pointer;font-family:Inter,sans-serif;font-size:15px;font-weight:600;padding:16px 12px 16px 28px;transition:.22s}
.btn .arw{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.12);font-size:14px}
.btn-pop{background:var(--pop);color:#04283A}
.btn-pop:hover{background:var(--pop-deep);color:#fff;transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff;padding:16px 28px}
.btn-navy:hover{background:var(--ice);transform:translateY(-2px)}
.btn-line{border-color:var(--line);color:var(--navy);padding:16px 28px}
.btn-line:hover{border-color:var(--pop);color:var(--ice)}
.btn-ghost{border-color:rgba(255,255,255,.42);color:#fff;padding:16px 28px}
.btn-ghost:hover{background:#fff;color:var(--navy)}
/* ---------- utility strip ---------- */
.util{background:var(--navy);color:rgba(255,255,255,.78);font-size:13px}
.util .wrap{display:flex;justify-content:space-between;gap:16px;padding:11px 0;flex-wrap:wrap}
.util a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.util .r{display:flex;gap:22px;flex-wrap:wrap}
@media(max-width:700px){.util .r{display:none}}
/* ---------- nav, now the real site nav with dropdowns (R4) ---------- */
nav.main{background:var(--frost);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line)}
nav.main .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;
  width:94%;max-width:1400px;flex-wrap:nowrap}
nav.main .brand{flex:none}
nav.main .brand img{height:34px;width:auto;max-width:none}
/* stop the flex row squashing the wordmark */
.links{display:flex;align-items:center;gap:2px;font-size:14px}
.links>li{list-style:none;position:relative}
.links{margin:0;padding:0}
.links>li>a{display:inline-flex;align-items:center;gap:6px;color:var(--slate);padding:10px 11px;
  border-radius:8px;white-space:nowrap}
.links>li>a:hover,.links>li>a:focus-visible{color:var(--navy);background:rgba(16,24,37,.05)}
.links .caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6}
.drop{position:absolute;top:calc(100% + 6px);left:0;min-width:288px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 22px 50px rgba(16,24,37,.16);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:70}
.links>li:hover .drop,.links>li:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:9px 12px;border-radius:8px;font-size:14.5px;color:var(--slate)}
.drop a:hover{background:var(--frost);color:var(--navy)}
.drop .top{font-weight:600;color:var(--navy);border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:6px}
.navcta{display:flex;align-items:center;gap:14px}
.navcta .btn{font-size:14px;padding:13px 10px 13px 22px}
.callbox{display:flex;align-items:center;gap:11px}
.callbox .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--pop);color:#04283A;font-size:17px}
.callbox small{display:block;font-size:11.5px;color:var(--slate);line-height:1.3}
.callbox b{font-family:Inter,sans-serif;font-size:16px;color:var(--navy);white-space:nowrap}
.navcta .btn{white-space:nowrap}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  cursor:pointer;color:var(--navy);font-size:17px;line-height:1}
/* The link row collapses into the drawer here.
   Raised from 1100px to 1200px when Contact was added as a fifth top-level item.
   Measured: five items plus the phone block need 1180px to fit, and at 1160px the row
   overflowed the nav by 6px — so at the old 1100px breakpoint there was a live band from
   1101px to about 1180px where the links overflowed the page rather than collapsing.
   1200px leaves ~35px of clearance at the narrowest width that still shows the row,
   instead of sitting one pixel from failure. */
@media(max-width:1200px){
  .links{display:none}
  .burger{display:block}
  .navcta .callbox{display:flex}
}
@media(max-width:560px){.callbox small,.callbox b{display:none}}
/* the wordmark is wide (≈9.5:1) — step it down so the nav row never overflows */
@media(max-width:820px){nav.main .brand img{height:28px}}
@media(max-width:700px){nav.main .brand img{height:24px}}
@media(max-width:400px){nav.main .brand img{height:21px}}
@media(max-width:360px){nav.main .brand img{height:18px}nav.main .wrap{gap:10px}.callbox .ic{width:38px;height:38px}}
/* mobile drawer */
.drawer{display:none;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:55}
.drawer.open{display:block}
.drawer .wrap{padding:14px 0 22px}
.drawer details{border-bottom:1px solid var(--line)}
.drawer summary{cursor:pointer;list-style:none;padding:13px 2px;font-weight:600;color:var(--navy);
  display:flex;justify-content:space-between}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";color:var(--pop);font-size:20px;line-height:1}
.drawer details[open] summary::after{content:"–"}
.drawer .sub a{display:block;padding:9px 2px 9px 14px;font-size:14.5px;color:var(--slate)}
.drawer>.wrap>a.flat{display:block;padding:13px 2px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:18px;width:100%;justify-content:center}
/* ---------- HERO ---------- */
.hero{position:relative;min-height:clamp(540px,70vh,740px);display:grid;align-items:center;
  color:#fff;background:var(--navy);overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.hero .bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(9,14,22,.93) 0%,rgba(9,14,22,.78) 44%,rgba(9,14,22,.34) 100%)}
.hero .wrap{position:relative;z-index:2;padding:clamp(64px,8vw,112px) 0}
.hero h1{color:#fff;max-width:17ch;margin-bottom:20px}
.hero h1 em{font-style:italic;color:var(--pop)}
.hero .say{font-size:19px;line-height:1.62;max-width:46ch;color:rgba(255,255,255,.84);margin-bottom:34px}
.hero-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hero-phone{color:#fff;font-family:"Playfair Display",serif;font-size:23px}
.hero-phone small{display:block;font-family:Inter,sans-serif;font-size:11.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--pop)}
@media(max-width:640px){.hero{min-height:auto}.hero .wrap{padding:76px 0 60px}}
/* ---------- TRUST BAR ---------- */
.trust{background:var(--navy);color:#fff}
/* auto-fit, not a hardcoded repeat(4): the Why Clear row dropped to three stats when the
   founding milestone came out, and a fixed four-column grid left an empty cell with a
   stray divider. auto-fit collapses the empty track, so three stats render as three even
   columns and the four-stat rows elsewhere are unchanged. */
.trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:rgba(255,255,255,.15)}
/* The dividers are the 1px grid gap showing through, not borders on the cells. The old
   scheme used border-right plus an nth-last-child(-n+2) rule to clear the bottom row on
   mobile, which assumed exactly four stats: with three, that rule stripped the border from
   item 2 — which sits in the FIRST mobile row — leaving half a line under it. A gap divider
   is correct for any number of stats at any breakpoint. */
.trust .wrap>div{background:var(--navy)}
.trust span{font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--pop)}
@media(max-width:760px){.trust .wrap{grid-template-columns:1fr 1fr}}
/* ---------- POSITIONING + clickable sectors (R3) ---------- */
.pos .wrap{max-width:1000px;text-align:center}
.pos h2{margin-bottom:26px}
.pos p{font-size:18.5px;max-width:62ch;margin:0 auto 34px}
.pos .sectors{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  border-top:1px solid var(--line);padding-top:30px}
.pos .sectors a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 20px;
  font-size:14.5px;color:var(--navy);transition:.2s}
.pos .sectors a:hover{border-color:var(--pop);color:var(--ice);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(16,24,37,.09)}
.pos .sectors a::after{content:" →";color:var(--pop);opacity:0;transition:.2s}
.pos .sectors a:hover::after{opacity:1}
/* ---------- SERVICES ---------- */
.svc{background:var(--frost)}
.svc .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px}
.scard{position:relative;border-radius:20px;overflow:hidden;min-height:300px;display:flex;
  align-items:flex-end;color:#fff;transition:.3s}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.scard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,24,37,0) 30%,rgba(16,24,37,.90) 100%)}
.scard:hover img{transform:scale(1.06)}
.scard .b{position:relative;z-index:2;padding:26px 24px}
.scard h3{color:#fff;margin-bottom:6px;font-size:23px}
.scard .go{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.4px;
  color:var(--pop);opacity:0;transform:translateY(4px);transition:.25s}
.scard:hover .go,.scard:focus-visible .go{opacity:1;transform:none}
/* ---------- BIG STATEMENT ---------- */
.statement{position:relative;min-height:clamp(420px,54vw,600px);display:grid;place-items:center;
  text-align:center;color:#fff;overflow:hidden}
.statement>picture{position:absolute;inset:0;z-index:0}
.statement img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.statement::after{content:"";position:absolute;inset:0;background:rgba(12,19,29,.66)}
.statement .in{position:relative;z-index:2;width:90%;max-width:900px}
.statement h2{color:#fff;font-size:clamp(32px,5.4vw,74px);margin-bottom:20px}
.statement p{font-size:18px;color:rgba(255,255,255,.82);max-width:52ch;margin:0 auto 28px}
/* ---------- ABOUT ----------
   COMPOSITION is Design 2's, kept exactly: the 1fr/1.08fr split and the
   absolutely-positioned rotated collage with the stamp centered over it.
   TYPOGRAPHY AND COLOUR are this page's, not Design 2's — Playfair headline on the
   page h2 scale, Inter body at the page's size and leading, the page eyebrow
   component, the page button, and the stamp on brand cyan. So the block reads as
   part of the page rather than as a pasted-in section. */
.about .wrap{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(34px,5vw,72px);align-items:center}
/* .about h2 inherits the page rule: Playfair 600, clamp(30px,4.2vw,58px), -.5px, 1.08.
   Measure is capped so the headline runs two lines and the copy sits at the same
   line length as the other sections rather than running the full column. */
.about h2{max-width:15ch}
.about .lede{font-size:17px}
.about p{max-width:52ch}
.about .btn{margin-top:6px}
.collage{position:relative;min-height:clamp(360px,44vw,500px)}
.collage figure{position:absolute;margin:0;overflow:hidden;border-radius:16px;border:6px solid #fff;
  box-shadow:0 20px 46px rgba(16,24,37,.20)}
.collage figure img{width:100%;height:100%;object-fit:cover}
.collage .f1{width:52%;height:52%;left:0;top:0;transform:rotate(-5deg)}
.collage .f2{width:50%;height:46%;right:0;top:12%;transform:rotate(4.5deg)}
.collage .f3{width:54%;height:44%;left:12%;bottom:0;transform:rotate(3deg)}
.stamp{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:5;width:112px;height:112px;
  border-radius:50%;background:var(--pop);color:#04283A;display:grid;place-items:center;text-align:center;
  font-family:Inter,sans-serif;font-size:11px;font-weight:600;line-height:1.5;letter-spacing:1.4px;
  text-transform:uppercase;box-shadow:0 14px 34px rgba(43,179,232,.42)}
@media(max-width:940px){.about .wrap{grid-template-columns:1fr}.collage{order:-1}}
/* ---------- HOW A STORM WORKS ---------- */
.storm{background:var(--navy-2);color:rgba(255,255,255,.74)}
.storm h2{color:#fff}
.storm .head{text-align:center;max-width:640px;margin:0 auto 60px}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.flow .n{position:relative;text-align:center;padding-top:56px}
.flow::before{content:"";position:absolute;top:22px;left:10%;right:10%;height:1px;
  background:rgba(255,255,255,.22)}
.flow .n .num{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;background:var(--pop);color:#04283A;
  display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:18px;font-weight:700;
  box-shadow:0 0 0 6px rgba(43,179,232,.16)}
.flow .n h3{color:#fff;font-size:18px;margin-bottom:6px}
.flow .n p{font-size:13.5px;margin:0;color:rgba(255,255,255,.64)}
.storm .more{text-align:center;margin-top:54px}
@media(max-width:960px){.flow{grid-template-columns:1fr 1fr}.flow::before{display:none}}
@media(max-width:540px){.flow{grid-template-columns:1fr}}
/* ---------- WHY ---------- */
.why .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,74px);align-items:center}
.why-photo{border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(16,24,37,.20)}
.why-photo img{width:100%;height:clamp(340px,42vw,500px);object-fit:cover}
.wlist{margin-top:8px}
/* R6 FIX: was `.wlist div`, which also matched the inner text wrapper and threw
   the <h3> into the 44px number column, overlapping the paragraph. */
.wlist>div{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.wlist>div:first-child{border-top:1px solid var(--line)}
.wlist .k{font-family:"Playfair Display",serif;font-size:19px;color:var(--pop)}
.wlist h3{font-size:18px;margin-bottom:4px}
.wlist p{font-size:14.5px;margin:0}
@media(max-width:920px){.why .wrap{grid-template-columns:1fr}.why-photo{order:-1}}
/* the FLEET block's CSS was removed with the section it styled */

/* ---------- PROOF ---------- */
.proof{background:var(--frost)}
.proof .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.quote{font-family:"Playfair Display",serif;font-size:clamp(23px,2.6vw,33px);line-height:1.32;
  color:var(--navy);margin:0 0 24px}
.quote-by{font-size:14px;color:var(--slate)}
.quote-by b{display:block;color:var(--navy);font-size:15px}
@media(max-width:860px){.proof .wrap{grid-template-columns:1fr}}
/* ---------- AREA ---------- */
.area .wrap{text-align:center;max-width:900px}
.area .towns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.area .towns a{background:var(--frost);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:14px;color:var(--navy);transition:.2s}
.area .towns a:hover{border-color:var(--pop);color:var(--ice);transform:translateY(-2px)}
/* ---------- ASSESSMENT FORM (R5) ---------- */
.book{position:relative;overflow:hidden;color:#fff}
.book>picture{position:absolute;inset:0;z-index:0}
.book>picture img{width:100%;height:100%;object-fit:cover}
.book::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,17,26,.95) 0%,rgba(11,17,26,.80) 52%,rgba(11,17,26,.62) 100%)}
.book .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,70px);align-items:center}
.book h2{color:#fff}
.book .say{color:rgba(255,255,255,.82);font-size:17px;max-width:46ch}
.book .orcall{font-size:15px;color:rgba(255,255,255,.7);margin:0 0 22px}
.book .orcall a{color:var(--pop);font-weight:600}
.form{background:#fff;border-radius:20px;padding:clamp(24px,3vw,34px);box-shadow:0 30px 70px rgba(0,0,0,.34)}
.form h3{font-size:22px;margin-bottom:18px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:Inter,sans-serif;font-size:15px;
  color:var(--navy);background:var(--frost-2);border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;transition:.2s}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pop);
  background:#fff;box-shadow:0 0 0 4px rgba(43,179,232,.14)}
.form .btn{width:100%;justify-content:center;margin-top:4px}
.form .fine{font-size:12.5px;color:var(--slate);text-align:center;margin:12px 0 0}
@media(max-width:900px){.book .wrap{grid-template-columns:1fr}.frow{grid-template-columns:1fr}}
/* ---------- FAQ ---------- */
.faq{background:var(--frost)}
.faq .list{max-width:850px;margin:34px auto 0}
/* The padding belongs to the SUMMARY, not to the details. With `padding:22px 0` on
   the details, that 22px band at the top and bottom of every box sat outside the
   summary and was not a click target — so a click near the edge of a row did
   nothing and the "+" felt like the only way to open it. Moving the padding onto
   the summary makes the whole box the hit area, which is the behaviour asked for. */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;
  align-items:flex-start;padding:22px 0;
  font-family:"Playfair Display",serif;font-size:20px;color:var(--navy);
  transition:color .2s var(--ease)}
.faq summary:hover{color:var(--ice)}
.faq summary:focus-visible{outline:2px solid var(--pop);outline-offset:3px;border-radius:4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pop);font-size:24px;line-height:1;flex:none;
  transition:transform .2s var(--ease)}
.faq summary:hover::after{transform:scale(1.14)}
.faq details[open] summary{padding-bottom:12px}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 22px;font-size:15.5px;max-width:76ch}
.faq .head{text-align:center}
/* ---------- FINAL CTA ---------- */
.end{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(150deg,#0C131D,#16222F 58%,#1B3247)}
.end .in{position:relative;z-index:2}
.end h2{color:#fff;font-size:clamp(32px,5vw,66px);max-width:22ch;margin:0 auto 20px}
.end p{color:rgba(255,255,255,.76);max-width:48ch;margin:0 auto 30px;font-size:17px}
.end .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---------- FOOTER (R4) ---------- */
footer{background:var(--navy);color:rgba(255,255,255,.68);padding:60px 0 26px;font-size:14.5px}
footer .brand img{height:30px;width:auto;max-width:100%;margin-bottom:16px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:34px}
.fgrid h4{color:#fff;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:14px}
.fgrid a{display:block;padding:5px 0;color:rgba(255,255,255,.68)}
.fgrid a:hover{color:var(--pop)}
.fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;
  border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:20px}
.fbot .r a{display:inline-block;margin-left:18px;color:rgba(255,255,255,.6)}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
/* ===========================================================================
   LINKS NOT YET LIVE
   Every destination that has no page behind it yet has had its href moved to
   data-href. The markup, the styling and the dropdowns are untouched, so the
   design demos exactly as built — the links simply don't navigate. To go live,
   swap data-href back to href (one find-and-replace).
   Still live: the phone numbers, the on-page #assessment anchor, the skip link
   and the logo (which points at this page).
   =========================================================================== */
a.soon{cursor:default}
/* ===========================================================================
   MOTION
   One easing curve and two durations across the whole page, so the movement
   reads as one system rather than a pile of effects. Everything is additive:
   .reveal only hides content once JS has confirmed it can reveal it again, and
   the entire layer is switched off for prefers-reduced-motion.
   =========================================================================== */
:root{--ease:cubic-bezier(.22,.61,.36,1);--t:.65s}
/* nav settles into a floating bar once you leave the hero */
nav.main{transition:box-shadow .35s var(--ease),background-color .35s var(--ease)}
nav.main.scrolled{background:rgba(240,245,249,.95);backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);box-shadow:0 10px 34px rgba(16,24,37,.11)}
/* dropdown: same curve, slightly longer so it feels considered rather than snappy */
.drop{transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.drop a{transition:background-color .18s var(--ease),color .18s var(--ease),padding-left .18s var(--ease)}
.drop a:hover{padding-left:16px}
/* cards lift with their image, not just under it */
.scard{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.scard:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(16,24,37,.20)}
.pstats div,.area .towns a,.pos .sectors a{transition:transform .25s var(--ease),border-color .25s var(--ease),
  box-shadow .25s var(--ease),color .25s var(--ease)}
.pstats div:hover{transform:translateY(-3px);border-color:var(--pop);box-shadow:0 16px 34px rgba(16,24,37,.10)}
.collage figure{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.collage:hover .f1{transform:rotate(-5deg) translateY(-6px)}
.collage:hover .f2{transform:rotate(4.5deg) translateY(-6px)}
.collage:hover .f3{transform:rotate(3deg) translateY(-6px)}
.flow .n .num{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.flow .n:hover .num{transform:translateX(-50%) scale(1.09);box-shadow:0 0 0 10px rgba(43,179,232,.14)}
/* FAQ answers fade in rather than appearing instantly */
.faq details p{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.faq details[open] p{animation:faqIn .34s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  /* hero: the photo settles as the copy steps in */
  html.anim .hero .bg img{transform:scale(1.06);transition:transform 2.2s var(--ease)}
  html.anim .hero.ready .bg img{transform:none}
  html.anim .hero .wrap>*{opacity:0;transform:translateY(18px);
    transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
  html.anim .hero.ready .wrap>*{opacity:1;transform:none}
  html.anim .hero .wrap>*:nth-child(1){--d:120ms}
  html.anim .hero .wrap>*:nth-child(2){--d:220ms}
  html.anim .hero .wrap>*:nth-child(3){--d:340ms}
  html.anim .hero .wrap>*:nth-child(4){--d:450ms}

  /* everything below the fold rises a little as it comes into view, once */
  html.anim .reveal{opacity:0;transform:translateY(18px);
    transition:opacity var(--t) var(--ease) var(--d,0ms),transform var(--t) var(--ease) var(--d,0ms)}
  html.anim .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .collage:hover .f1,.collage:hover .f2,.collage:hover .f3,.scard:hover{transform:none}
  .faq details[open] p{animation:none}
}
/* ---------- footer: four columns on one baseline ----------
   The brand column carries the SIMA membership mark; the Clear wordmark was a
   duplicate of the header and has been removed. Links and plain lines share one
   padding value so the columns line up. */
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(26px,3.4vw,52px);align-items:start}
.fgrid > div{min-width:0}
.fgrid h4{color:#fff;font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.16)}
.fgrid a:not(.sima-mark),.fgrid span{display:block;padding:6px 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.68)}
.fgrid a:hover{color:var(--pop)}
.fgrid .fbot span{display:inline}
.fbrand .sima-mark{display:inline-block;background:#fff;border-radius:12px;padding:14px 18px;
  transition:transform .22s,box-shadow .22s}
.fbrand .sima-mark img{display:block;width:186px;height:auto}
.fbrand .sima-mark:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.3)}
.fbrand .fmember{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6);margin:14px 0 0;max-width:32ch}
.fbrand .fblurb{font-size:14px;line-height:1.65;margin:16px 0 0;max-width:34ch;color:rgba(255,255,255,.68)}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr 1fr}.fbrand{grid-column:1/-1;margin-bottom:8px}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.fgrid{grid-template-columns:1fr}}

/* ---- promoted from home.css so interior pages can use the image/copy splits ---- */
/* ---- R8: PURPOSE-BUILT FOR COMMERCIAL SNOW -------------------------------- */
.built{background:var(--frost-2)}
/* ---- R8: BULK SALT & DE-ICING -------------------------------------------- */
.salt .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,4.6vw,70px);align-items:center}

@media(max-width:940px) {
.salt .wrap{grid-template-columns:1fr}
}

/* Breadcrumbs — required by the build pack on every page below the homepage. Built
   from the same tokens as the rest of the site rather than a new visual language. */
.crumbs { border-bottom: 1px solid var(--line); background: var(--frost-2); }
.crumbs .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 14px 0; font-size: 13px; color: var(--slate); }
.crumbs a { color: var(--slate); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--ice); border-bottom-color: currentColor; }
.crumbs span[aria-current] { color: var(--navy); font-weight: 500; }
.crumbs i { font-style: normal; opacity: .45; }
@media (max-width: 640px) { .crumbs .wrap { font-size: 12px; padding: 11px 0; } }

/* The AI-overview lede that opens every interior page. It sits BELOW the hero on
   purpose: the client did not want the hero carrying a long paragraph. */
.lede-open { padding: clamp(38px, 5vw, 64px) 0 clamp(6px, 1vw, 12px); }
/* No wrap override: the lede must share the same left edge as the breadcrumbs
   and the nav. Constrain the measure on the paragraph instead, or the block
   centres itself and the page gains a second, inconsistent margin. */
.lede-open p { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.62; color: var(--navy-2);
  margin: 0; max-width: 74ch; }
.lede-open p a { color: var(--ice); }
@media (max-width: 640px) { .lede-open { padding: 30px 0 4px; } }

/* Homepage variant. The interior pages keep the lede left-aligned so it shares an
   edge with the breadcrumb above it; the homepage has no breadcrumb, and the
   client asked for this paragraph to read like the other body paragraphs on the
   page rather than as a separate left-hung block. So it takes the same centred
   treatment and the same measure as `.pos p`. */
.lede-open.lede-center .wrap { max-width: 1000px; text-align: center; }
.lede-open.lede-center p { font-size: 18.5px; line-height: 1.68; max-width: 62ch;
  margin: 0 auto; }
@media (max-width: 640px) {
  .lede-open.lede-center p { font-size: 17px; text-align: left; }
  .lede-open.lede-center .wrap { text-align: left; }
}

/* Interior hero — the same box as the homepage hero.
 *
 * This previously set its own section padding, `clamp(112px,15vh,168px)` top and
 * `clamp(46px,7vh,78px)` bottom, while killing the min-height. But `.hero .wrap`
 * still contributed `clamp(64px,8vw,112px)` top AND bottom, so the interior hero
 * carried 433px of vertical padding against the homepage's 224px — with no
 * min-height to absorb it, that padding simply added up. The result was interior
 * heroes TALLER than the homepage (704px vs 665px, and 768px where the h1 ran to
 * three lines) despite a smaller h1 and less copy in them. Intent was "less
 * height"; the arithmetic delivered more.
 *
 * So: no section padding here at all. `.hero-sub` inherits the homepage's
 * min-height and centred grid, and `.hero .wrap` supplies the only vertical
 * padding — exactly as it does on the homepage. The h1 stays a step smaller,
 * which is what keeps a subpage from reading as a second landing page. */
.hero-sub { padding: 0; }
.hero-sub .wrap { max-width: 1180px; }
.hero-sub h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.03; max-width: 20ch; }
.hero-sub .hero-cta { margin-top: clamp(22px, 3vh, 34px); }
@media (max-width: 640px) {
  /* the .hero rule already drops min-height and re-pads .wrap below 640px */
  .hero-sub h1 { font-size: clamp(29px, 8vw, 40px); max-width: none; }
}

/* ---- promoted from home.css: components the interior pages also use ----
   home.css keeps its copies, so the homepage cascade is unchanged. */
/* Clear Landscaping — homepage-only rules
   Lifted out of the approved page markup unchanged; the rules and their order
   are exactly as the design shipped them. Edit here, not inline. */

.trust div{padding:clamp(28px,3.4vw,44px) clamp(18px,2vw,30px);text-align:center;
  display:flex;flex-direction:column;justify-content:flex-start}
/* The four values are not the same length — "Since 1985" and "Owner-led" are words,
   "24/7" and "SIMA" are short — so they render at different display sizes. The value
   row therefore gets one fixed pixel height with its content bottom-aligned, and the
   tile stacks from the top rather than centring. Every label then starts on exactly
   the same line, even when one of them wraps to two lines on a narrow screen. */
.trust b{display:flex;align-items:flex-end;justify-content:center;
  font-family:"Playfair Display",serif;font-size:clamp(30px,3.6vw,46px);
  height:48px;color:#fff;line-height:1;margin-bottom:10px}
.trust span{display:block}
.sgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
/* Seven cards, two rows: three lead cards over four supporting cards. Both rows
   run the full width of the wrap, so no card is left stranded on its own line. */
.sgrid>.scard:nth-child(-n+3){grid-column:span 4;min-height:clamp(300px,25.5vw,348px)}
.sgrid>.scard:nth-child(n+4){grid-column:span 3;min-height:clamp(250px,21vw,286px)}
.sgrid>.scard:nth-child(n+4) .b{padding:22px 20px}
.sgrid>.scard:nth-child(n+4) h3{font-size:20px}
.sgrid>.scard:nth-child(n+4) p{font-size:13.5px}
/* The text block is anchored to the bottom of the card, so a description that
   wraps to a second line drags its title up out of line with the rest of the row.
   Reserving two lines keeps every title on the same baseline at every width,
   without editing any of the card copy. */
.scard p{font-size:14px;line-height:1.5;min-height:3em;margin:0;color:rgba(255,255,255,.78)}
/* Three stats laid out as a mosaic rather than an even row — the lead figure takes a
   tall tile down the left, the other two stack beside it. Same asymmetry as the
   equipment photo grid. All three keep the white card treatment; only the size and
   the scale of the figure separate the lead from the pair. */
.pstats{display:grid;grid-template-columns:1.18fr 1fr;grid-auto-rows:1fr;gap:16px}
.pstats>div{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.pstats>div:first-child{grid-row:1/3;justify-content:center;padding:clamp(26px,2.6vw,34px)}
.pstats b{display:block;font-family:"Playfair Display",serif;font-size:clamp(28px,2.9vw,34px);
  color:var(--navy);line-height:1;margin-bottom:7px}
.pstats span{display:block;font-size:13px;line-height:1.45;color:var(--slate)}
.pstats>div:first-child b{font-size:clamp(48px,5.4vw,68px);margin-bottom:12px}
.pstats>div:first-child span{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ice)}
/* ---- R8: trust bar — "Since 1985" / "Owner-led" are words, not figures, so the
        display size is stepped down to keep every tile on a single line. -------- */
.trust .t-wide b{font-size:clamp(21px,2.4vw,32px);letter-spacing:-.2px}
.bpoints .k{display:block;font-family:"Playfair Display",serif;font-size:26px;line-height:1;
  color:var(--pop);margin-bottom:16px}
.sphoto{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(16,24,37,.20)}
.sphoto img{display:block;width:100%;height:clamp(320px,40vw,470px);object-fit:cover}
.sphoto .scap{position:absolute;left:18px;bottom:18px;z-index:2;padding:12px 18px;border-radius:12px;
  background:rgba(16,24,37,.78);backdrop-filter:blur(6px);color:rgba(255,255,255,.72);
  font-size:12px;letter-spacing:.6px}
.sphoto .scap b{display:block;color:#fff;font-family:"Playfair Display",serif;font-size:19px;
  letter-spacing:0;margin-bottom:2px}
.scopy h2{margin-bottom:16px}
.slist{list-style:none;margin:24px 0 30px;padding:0}
.slist li{position:relative;padding:12px 0 12px 34px;font-size:15px;color:var(--slate);
  border-bottom:1px solid var(--line)}
.slist li:first-child{border-top:1px solid var(--line)}
.slist li::before{content:"";position:absolute;left:4px;top:20px;width:11px;height:11px;
  border-radius:50%;border:2px solid var(--pop)}

@media(max-width:1200px) {
.trust b{height:42px}
}

@media(max-width:900px) {
.trust b{height:36px}
}

@media(max-width:620px) {
.sgrid{grid-template-columns:1fr}
.sgrid>.scard:nth-child(-n+3),.sgrid>.scard:nth-child(n+4){grid-column:1/-1;min-height:250px}
.svc .head{flex-direction:column;align-items:flex-start}
}

@media(max-width:420px) {
.pstats{grid-template-columns:1fr;grid-auto-rows:auto}
.pstats>div:first-child{grid-row:auto;padding:26px 24px}
.pstats>div{justify-content:flex-start}
}

@media(max-width:940px) {
.salt .wrap{grid-template-columns:1fr}
.sphoto img{height:clamp(260px,52vw,380px)}
}

/* ============================================================ .dual
   An asymmetric movement: heading left, body right.

   Why it exists: the page was running three centred text blocks in a row — the
   opening lede, then two .pos sections — and .pos centres everything, so they
   read as the same slide three times. This breaks that rhythm without inventing
   a new visual language: same type scale, same tokens, same eyebrow, just a
   different axis. Use it for the FIRST prose block after the lede, and let the
   centred .pos carry the one that ends in a row of pills. */
.dual { padding: clamp(58px, 6.5vw, 104px) 0; }
.dual .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 86px);
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: clamp(34px, 4vw, 58px);
}
.dual h2 { margin: 14px 0 0; }
.dual .d-body { padding-top: clamp(6px, 1.4vw, 18px); }
.dual .d-body p {
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  line-height: 1.78;
  color: var(--slate);
  margin: 0 0 18px;
  max-width: 56ch;
}
.dual .d-body p:last-child { margin-bottom: 0; }
.dual .d-body p a { color: var(--ice); }
/* a quiet marker so the right column reads as commentary on the left */
.dual .d-body::before {
  content: "";
  display: block;
  width: 34px; height: 2px;
  background: var(--pop);
  margin-bottom: clamp(18px, 2vw, 26px);
}
@media (max-width: 900px) {
  .dual .wrap { grid-template-columns: 1fr; gap: 22px; padding-top: 28px; }
  .dual h2 { margin-top: 10px; }
  .dual .d-body::before { margin-bottom: 16px; }
}

/* ====================================================== breadcrumbs, designed
   Quiet by intent — a breadcrumb that competes with the H1 is a bug — but part
   of the system rather than default browser text: the leading dash and the
   accent chevrons are the same motif the eyebrows use. */
.crumbs { background: var(--frost-2); border-bottom: 1px solid var(--line); }
.crumbs .wrap {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 9px; padding: 15px 0;
  font-size: 13px; line-height: 1.2; color: var(--slate);
}
.crumbs .wrap::before {
  content: ""; flex: none;
  width: 16px; height: 1px; background: var(--pop);
  margin-right: 3px;
}
.crumbs a {
  color: var(--slate); text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.crumbs a:hover, .crumbs a:focus-visible { color: var(--ice); border-bottom-color: var(--pop); }
.crumbs i { font-style: normal; color: var(--pop); opacity: .5; font-size: 11px; }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }
@media (max-width: 640px) {
  .crumbs .wrap { font-size: 12px; padding: 12px 0; gap: 7px; }
  .crumbs .wrap::before { width: 12px; }
}

/* ---------------------------------------------------------------------------
   PROCESS TIMELINE — deep variant, for the full "How a storm works" page.
   The five-across .flow grid was built for the homepage, where each step is a
   single seven-word summary. The full process page carries the same five steps
   at 40–70 words each, and five 30-character centred columns is what made it
   feel suffocating: a narrow measure, ragged on both edges, five columns of
   wildly unequal height.
   Every element of the approved treatment is kept — the accent circle with its
   Playfair numeral and halo, the connector, the white step title, the muted
   body — but the axis is rotated. One step per row, the connector running
   vertically through the numbers, and the text left-aligned at a proper
   measure. The homepage keeps the horizontal grid untouched.
   --------------------------------------------------------------------------- */
/* Capped and centred. Left unconstrained, the column of text hugs the left edge of a
   1220px wrap and leaves half the dark band empty on the right, which reads as a
   layout accident rather than as breathing room. The section heading above it is
   centred, so the timeline is too. */
.flow.flow-deep{grid-template-columns:1fr;gap:0;max-width:840px;margin-inline:auto}
.flow.flow-deep::before{display:none}                    /* the horizontal rail */

.flow.flow-deep .n{display:grid;grid-template-columns:46px minmax(0,1fr);
  column-gap:clamp(22px,2.8vw,40px);align-items:start;text-align:left;
  padding:0 0 clamp(30px,3.6vw,48px)}
.flow.flow-deep .n:last-child{padding-bottom:0}

/* the connector now runs downward, from beneath one circle to the next */
.flow.flow-deep .n::before{content:"";position:absolute;left:22px;top:58px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(43,179,232,.45),rgba(255,255,255,.10))}
.flow.flow-deep .n:last-child::before{display:none}

.flow.flow-deep .n .num{position:static;transform:none;grid-column:1;grid-row:1 / span 2}
.flow.flow-deep .n:hover .num{transform:scale(1.09)}     /* no translateX to preserve */

.flow.flow-deep .n h3{grid-column:2;grid-row:1;font-size:clamp(20px,1.7vw,23px);
  margin:0 0 10px;padding-top:9px}
/* 64ch, not 74 — the ch unit is the width of "0", which is wider than the average
   lowercase letter, so 74ch measured out at 87 characters per line. 64ch lands in
   the 70-75 range that actually reads comfortably. */
.flow.flow-deep .n p{grid-column:2;grid-row:2;font-size:15.5px;line-height:1.72;max-width:64ch}

@media(max-width:600px){
  .flow.flow-deep .n{grid-template-columns:1fr;row-gap:0}
  .flow.flow-deep .n::before{display:none}
  .flow.flow-deep .n .num{grid-column:1;grid-row:1;margin-bottom:14px}
  .flow.flow-deep .n h3{grid-column:1;grid-row:2;padding-top:0}
  .flow.flow-deep .n p{grid-column:1;grid-row:3}
}

/* ---------- form: honeypot and status line ----------
   The honeypot is positioned off-canvas rather than display:none. A field that is
   display:none is trivially skipped by the bots worth catching, and it is also the
   one hiding technique that guarantees no assistive tech will ever announce it —
   aria-hidden on the wrapper handles that part properly instead. */
.form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fstatus{margin:14px 0 0;font-size:14.5px;line-height:1.55;min-height:0}
.fstatus:empty{display:none}
.fstatus.is-ok{color:#1B7A4B}
.fstatus.is-err{color:#B3261E}
.form button[type="submit"][disabled]{opacity:.65;cursor:progress}

/* ---------- label rows: .towns and .pos .sectors as STATIC labels ----------
   Both rows were styled for `a` children only. Where the markup uses <span> — the
   town lists on all eleven county pages, and the property-type overviews on three
   service pages — the pill vanished completely and 210 labels rendered as bare
   run-on text. Same partial-CSS failure as the .pstats tiles: nothing overflows,
   nothing is faded, no image is broken, so the sweep cannot see it.

   These are deliberately NOT given the hover lift or the arrow that the anchor
   versions carry. The client's note is that the property types are "just an
   overview" and do not get pages, so a label must not advertise itself as a link
   that goes nowhere. */
.area .towns span,
.pos .sectors span{background:var(--frost);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:14px;color:var(--navy);display:inline-block;line-height:1.35}
@media(max-width:520px){
  .area .towns span,
  .pos .sectors span{padding:8px 14px;font-size:13px}
}