/* ==========================================================================
   Enviro-Chem Consulting Group
   Environmental-consulting palette: deep navy for authority, leaf green as
   the single accent, warm-neutral greys for running text.
   ========================================================================== */

:root{
  --ink:#101a2e;          /* near-black navy */
  --navy:#1c2550;         /* primary brand navy */
  --navy-2:#2b3980;       /* brighter navy for links */
  --field:#16233d;        /* dark section ground */
  --field-2:#1e2f4d;

  --paper:#fff;
  --paper-2:#f4f6f2;      /* faint green-tinted off-white */
  --line:#dde1e4;
  --line-dark:#2a3a58;

  --leaf:#9dc840;         /* signature green, for dark grounds and fills */
  --leaf-dk:#8ab52f;
  --leaf-ink:#5a7a14;     /* dark enough to use as text on white */
  /* 3.51:1 on white. The old #e8b13a sat at 1.95:1, under the 3:1 that
     WCAG 1.4.11 requires for a graphic carrying meaning, so low-vision
     users could not see the rating. Used only for the review stars. */
  --star:#b87d0e;

  --body:#5f656c;
  --muted:#69727d;
  --muted-dk:#9aa8b8;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;

  --wrap:1240px;
  --gut:clamp(20px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--navy-2);text-decoration-thickness:1px;text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--navy);margin:0;text-wrap:balance;line-height:1.12}
p{margin:0}
ul{margin:0;padding:0}

:focus-visible{outline:3px solid var(--navy-2);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- eyebrow / section heads ---------- */
.eyebrow{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leaf-ink);display:flex;align-items:center;gap:10px;margin:0 0 14px;font-weight:500;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--leaf);flex:none}
.eyebrow.on-dark{color:var(--leaf)}
.eyebrow.on-dark::before{background:var(--leaf)}

.sec-title{font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-.015em}
.sec-title.on-dark{color:#fff}
.lede{font-size:clamp(17px,2vw,19px);max-width:62ch;color:var(--body)}
.lede.on-dark{color:#c4cfdd}

section{padding-block:clamp(56px,8vw,96px)}
.sec-dark{background:var(--field);color:#c4cfdd}
.sec-alt{background:var(--paper-2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;padding:15px 26px;border:2px solid transparent;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;min-height:48px;
}
.btn-primary{background:var(--leaf);color:var(--ink);border-color:var(--leaf)}
.btn-primary:hover{background:var(--leaf-dk);border-color:var(--leaf-dk)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-dark:hover{background:var(--navy-2);border-color:var(--navy-2)}

/* ==========================================================================
   Topbar + header
   ========================================================================== */
.topbar{background:var(--ink);color:#9aa8b8;font-size:13.5px}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;padding-block:9px}
.topbar a{color:#c4cfdd;text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .tb-item{display:flex;align-items:center;gap:8px}
.topbar svg{width:14px;height:14px;flex:none;fill:var(--leaf)}
.topbar .spacer{margin-left:auto}

.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:22px;padding-block:14px}

.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand-logo{height:54px;width:auto;display:block}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--navy);text-decoration:none;padding:10px 13px;
}
.nav a:hover{color:var(--leaf-ink)}
.header-cta{display:flex;align-items:center;gap:14px;flex:none}
.header-phone{
  font-family:var(--f-mono);font-weight:600;font-size:15px;color:var(--navy);
  text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.header-phone:hover{color:var(--leaf-ink)}
.header-phone svg{width:16px;height:16px;fill:var(--leaf-ink)}

.nav-toggle{display:none;background:none;border:1.5px solid var(--line);width:46px;height:44px;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy);margin:4px auto}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{background:var(--field);color:#fff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;min-height:min(78vh,660px)}
.hero-copy{
  padding:clamp(44px,6vw,80px) clamp(20px,4vw,64px) clamp(44px,6vw,80px)
          max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));
  display:flex;flex-direction:column;justify-content:center;gap:22px;
}
.hero h1{font-size:clamp(34px,5.2vw,58px);font-weight:800;color:#fff;letter-spacing:-.022em;line-height:1.06}
.hero h1 em{font-style:normal;color:var(--leaf)}
.hero-sub{font-size:clamp(17px,2.1vw,20px);color:#c4cfdd;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero-points{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:8px;list-style:none}
.hero-points li{display:flex;align-items:center;gap:8px;font-size:14.5px;color:#a9b6c6}
.hero-points svg{width:15px;height:15px;fill:var(--leaf);flex:none}

.hero-media{position:relative;min-height:340px}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--field) 0%,rgba(22,35,61,.55) 26%,rgba(22,35,61,0) 62%)}
.hero-tag{
  position:absolute;left:0;bottom:0;z-index:2;background:var(--leaf);color:var(--ink);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 16px;font-weight:600;
}

/* ---------- credentials strip ---------- */
.creds{background:var(--ink);border-top:1px solid var(--line-dark)}
.creds .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);padding-inline:0;max-width:none}
.cred{background:var(--ink);padding:22px clamp(16px,2.4vw,30px);display:flex;gap:13px;align-items:flex-start}
.cred svg{width:22px;height:22px;fill:var(--leaf);flex:none;margin-top:2px}
.cred b{display:block;font-family:var(--f-display);font-size:14.5px;color:#fff;font-weight:700;letter-spacing:.01em}
.cred span{font-size:13.5px;color:#93a2b4;display:block;margin-top:2px}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.intro-body{display:flex;flex-direction:column;gap:18px}
.intro-figure{position:relative}
.intro-figure img{aspect-ratio:4/5;object-fit:cover;width:100%}
.intro-badge{position:absolute;right:-14px;bottom:-14px;background:var(--navy);color:#fff;padding:20px 24px;max-width:210px}
.intro-badge b{display:block;font-family:var(--f-display);font-size:38px;font-weight:800;line-height:1;color:var(--leaf)}
.intro-badge span{font-size:13.5px;line-height:1.35;display:block;margin-top:5px;color:#c4cfdd}

/* ==========================================================================
   Services
   ========================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.svc{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.svc:hover{border-color:var(--leaf);transform:translateY(-3px);box-shadow:0 10px 28px rgba(16,26,46,.09)}
.svc-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover}
.svc-num{position:absolute;left:0;top:0;background:var(--navy);color:#fff;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;padding:7px 12px}
.svc-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.svc h3{font-size:19.5px;font-weight:700;letter-spacing:-.005em}
.svc p{font-size:15.5px;color:var(--body)}
.svc ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:2px}
.svc li{font-size:14.5px;color:var(--muted);padding-left:17px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:2px;background:var(--leaf)}
.svc-more{
  margin-top:auto;padding-top:14px;font-family:var(--f-display);font-weight:700;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--leaf-ink);display:flex;align-items:center;gap:7px;
}

/* ==========================================================================
   Process
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);margin-top:40px}
.step{background:var(--field);padding:30px clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:11px}
.step-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--leaf)}
.step h3{font-size:18px;color:#fff;font-weight:700}
.step p{font-size:15px;color:#a3b1c2}

/* ==========================================================================
   Areas
   ========================================================================== */
/* The county lists used to sit in a narrow second column beside this prose,
   which left no room for the tile grid the service-area hubs use. Prose runs
   full width but measure-constrained; the tiles get the whole wrap, so both
   counties read the same way here as they do on their hub pages.
   .city-list is the marker class build-site.js looks for; it is rewritten to
   .tile-grid with linked items before the page is written, so no .city-list
   rule is needed or would ever apply. */
.areas-intro{max-width:72ch}
.county-note{font-family:var(--f-mono);font-size:13px;color:var(--muted);margin-top:20px}


/* Los Angeles County: secondary territory, full width beneath the grid */
.areas-la{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding-top:clamp(28px,3.5vw,40px)}
.areas-la h3{
  font-family:var(--f-display);font-size:clamp(20px,2.4vw,25px);font-weight:700;
  color:var(--navy);letter-spacing:-.01em;margin-bottom:10px;
}
.areas-la p{max-width:70ch;margin-bottom:20px;font-size:16px}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--ink)}
.gal img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .4s,opacity .3s}
.gal figure:hover img{transform:scale(1.05);opacity:.82}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-size:13.5px;line-height:1.35;
  background:linear-gradient(to top,rgba(16,26,46,.94),rgba(16,26,46,0));
}

/* ==========================================================================
   Why us + stats
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.why{border-top:3px solid var(--leaf);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.why h3{font-size:18.5px;font-weight:700;color:#fff}
.why p{font-size:15.5px;color:#a3b1c2}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:56px;border-top:1px solid var(--line-dark);padding-top:36px}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(32px,4.4vw,46px);font-weight:800;color:var(--leaf);line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:14.5px;color:#a3b1c2;margin-top:8px}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{background:var(--leaf);color:var(--ink)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:26px;justify-content:space-between;padding-block:clamp(38px,5vw,54px)}
.cta-band h2{font-size:clamp(24px,3.2vw,34px);color:var(--ink);font-weight:800;letter-spacing:-.015em;max-width:24ch}
.cta-band p{color:#2c3d18;margin-top:8px;font-size:16.5px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-band .btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.cta-band .btn-navy:hover{background:var(--ink);border-color:var(--ink)}
.cta-band .btn-outline{background:transparent;color:var(--ink);border-color:rgba(16,26,46,.4)}
.cta-band .btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.revs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.rev{background:#fff;border:1px solid var(--line);border-top:3px solid var(--leaf);padding:28px;display:flex;flex-direction:column;gap:14px}
.rev-stars{display:flex;gap:3px}
.rev-stars svg{width:16px;height:16px;fill:var(--star)}
.rev h3{font-size:17px;font-weight:700}
.rev p{font-size:15.5px;color:var(--body)}
.rev cite{font-style:normal;font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-top:auto;padding-top:6px}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:860px;margin-top:36px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;font-family:var(--f-display);font-weight:700;font-size:17.5px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--leaf-ink);border-bottom:2px solid var(--leaf-ink);
  transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .ans{padding:0 0 20px;font-size:16px;color:var(--body);max-width:70ch}
.faq .ans p + p{margin-top:11px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:#93a2b4;padding-block:clamp(48px,6vw,72px) 0;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,50px)}
.site-footer h3{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--leaf);font-weight:500;margin-bottom:16px}
.site-footer a{color:#c4cfdd;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.foot-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-nap{display:flex;flex-direction:column;gap:9px;font-style:normal}
.foot-nap .ph{font-family:var(--f-mono);font-size:17px;color:#fff;font-weight:600}
.foot-brand{display:flex;align-items:center;margin-bottom:18px}
.foot-logo{height:58px;width:auto;display:block}
.foot-note{font-size:14px;line-height:1.6;color:#8494a6;margin-top:14px}
.foot-bottom{
  border-top:1px solid var(--line-dark);margin-top:clamp(34px,5vw,52px);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:13.5px;color:#75859a;
}
.lic{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;color:#93a2b4}

.callbar{display:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .svc-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
  .steps,.creds .wrap,.stats{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  .nav{display:none}
  .nav-toggle{display:block}
  .nav.open{
    display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 0 14px;gap:0;
  }
  .nav.open a{padding:13px var(--gut);border-top:1px solid var(--line)}
  .site-header .wrap{position:relative;flex-wrap:wrap}
  .hero-grid{grid-template-columns:1fr}
  /* grid items default to min-width:auto, so an aspect-ratio child can inflate
     the track past the viewport and get clipped by .hero{overflow:hidden} */
  .hero-grid > *{min-width:0}
  .hero-copy{padding:clamp(38px,7vw,56px) var(--gut);order:2}
  .hero-media{order:1;min-height:0;aspect-ratio:16/10}
  .hero-media::after{background:linear-gradient(to top,var(--field) 0%,rgba(22,35,61,.35) 55%,rgba(22,35,61,.1) 100%)}
  .intro-grid{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr}
  .intro-badge{right:12px;bottom:-12px}
}
@media (max-width:640px){
  body{font-size:16.5px;padding-bottom:64px}
  .topbar .tb-item.hide-sm{display:none}
  .svc-grid,.why-grid,.steps,.creds .wrap,.stats,.foot-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .header-phone span{display:none}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:120;border-top:1px solid var(--line-dark)}
  .callbar a{
    display:flex;align-items:center;justify-content:center;gap:8px;padding:17px 10px;
    font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.07em;
    text-transform:uppercase;text-decoration:none;
  }
  .callbar .c-call{background:var(--leaf);color:var(--ink)}
  .callbar .c-quote{background:var(--navy);color:#fff}
  .callbar svg{width:16px;height:16px;fill:currentColor}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   Services dropdown
   ========================================================================== */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item.has-sub > a{padding-right:4px}
.sub-toggle{
  background:none;border:0;padding:8px 6px 8px 2px;cursor:pointer;display:flex;
  align-items:center;color:var(--navy);
}
.sub-toggle svg{width:16px;height:16px;fill:currentColor;transition:transform .18s}
.nav-item.open .sub-toggle svg{transform:rotate(180deg)}
.subnav{
  position:absolute;top:100%;left:0;min-width:250px;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--leaf);
  box-shadow:0 14px 34px rgba(16,26,46,.13);list-style:none;padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:120;
}
/* Direct child only. A descendant selector here also matched the city
   flyouts nested inside, so opening Service Areas popped both county
   lists open at once, on top of each other. */
.nav-item:hover > .subnav,
.nav-item:focus-within > .subnav,
.nav-item.open > .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{
  display:block;padding:11px 18px;font-family:var(--f-body);font-weight:400;
  font-size:15.5px;letter-spacing:0;text-transform:none;color:var(--body);
}
.subnav a:hover,.subnav a:focus-visible{background:var(--paper-2);color:var(--navy)}
.subnav a[aria-current="page"]{color:var(--leaf-ink);font-weight:600}
.subnav-all{border-top:1px solid var(--line);margin-top:6px;padding-top:2px}
.subnav-all a{font-family:var(--f-display);font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--leaf-ink)}
.nav a[aria-current="page"]{color:var(--leaf-ink)}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.crumbs{background:var(--paper-2);border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding-block:12px;
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumbs a{color:var(--body);text-decoration:none}
.crumbs a:hover{color:var(--leaf-ink);text-decoration:underline}
/* The current-page crumb is not a link, so it inherited --muted at 4.49:1:
   the item telling the user where they are was the one item failing AA on
   every page with a breadcrumb. --navy takes it to 13.51:1, measured.
   A second rule setting --body here was dead code, outranked by this one. */
.crumbs li[aria-current]{color:var(--navy)}

/* ==========================================================================
   Interior page hero
   ========================================================================== */
.page-hero{background:var(--field);color:#fff;padding-block:clamp(46px,6vw,78px)}
.page-hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:800;color:#fff;
  letter-spacing:-.022em;line-height:1.07;margin-bottom:16px;max-width:20ch}
.page-hero .lede{max-width:64ch;margin-bottom:26px}
.page-hero .hero-actions{margin-top:0}

/* ==========================================================================
   Service detail blocks
   ========================================================================== */
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:38px}
.detail{background:#fff;border:1px solid var(--line);border-left:3px solid var(--leaf);
  padding:26px 28px;display:flex;flex-direction:column;gap:10px}
.detail h3{font-size:19px;font-weight:700}
.detail p{font-size:15.5px;color:var(--body)}

.tick-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px 32px;margin-top:32px;max-width:960px}
.tick-list li{display:flex;align-items:flex-start;gap:11px;font-size:16.5px;color:var(--body)}
.tick-list svg{width:19px;height:19px;fill:var(--leaf-ink);flex:none;margin-top:3px}

/* ==========================================================================
   Services directory
   ========================================================================== */
.dir{list-style:none;counter-reset:d;margin-top:34px;border-top:1px solid var(--line)}
.dir li{counter-increment:d;border-bottom:1px solid var(--line);padding:20px 0 20px 52px;position:relative}
.dir li::before{content:"0" counter(d);position:absolute;left:0;top:22px;
  font-family:var(--f-mono);font-size:12.5px;color:var(--leaf-ink);letter-spacing:.08em}
.dir a{text-decoration:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.dir .dir-name{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--navy)}
.dir a:hover .dir-name{color:var(--leaf-ink)}
.dir .dir-h1{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);letter-spacing:.03em}
.dir p{font-size:15.5px;color:var(--body);margin-top:5px;max-width:74ch}

@media (max-width:1080px){
  .detail-grid{grid-template-columns:1fr}
  .tick-list{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .nav.open .nav-item{display:block;padding:0}
  .nav.open .nav-item.has-sub{position:relative}
  .nav.open .nav-item > a{border-top:1px solid var(--line);padding:13px var(--gut);display:block}
  .nav.open .sub-toggle{position:absolute;right:calc(var(--gut) - 6px);top:4px;padding:10px}
  .nav.open .subnav{
    position:static;opacity:1;visibility:visible;transform:none;border:0;
    box-shadow:none;background:var(--paper-2);padding:0;display:none;min-width:0;
  }
  .nav.open .nav-item.open .subnav{display:block}
  .nav.open .subnav a{padding-left:calc(var(--gut) + 14px);border-top:1px solid var(--line)}
}

/* ==========================================================================
   Forms (request testing)
   ========================================================================== */
.quote-form{display:flex;flex-direction:column;gap:20px;margin-top:26px}
.form-row{display:block}
.form-row-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-field label{
  font-family:var(--f-display);font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy);
}
.form-field label span{color:var(--leaf-ink)}
.form-field input,
.form-field select,
.form-field textarea{
  font-family:var(--f-body);font-size:16.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);padding:13px 14px;width:100%;min-height:50px;
  transition:border-color .16s,box-shadow .16s;
}
.form-field textarea{resize:vertical;min-height:150px;line-height:1.6}
.form-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover{border-color:var(--muted)}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;border-color:var(--leaf-ink);box-shadow:0 0 0 3px rgba(157,200,64,.28);
}
/* :user-invalid only fires after the visitor has actually interacted, so
   an untouched required field is never shown as an error. :invalid alone
   would paint every empty required field red on page load. */
.form-field input:user-invalid,
.form-field textarea:user-invalid{border-color:#b04a35}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.form-actions .btn{margin:0}
.form-actions .btn:disabled{opacity:.5;cursor:not-allowed}
.form-hint{font-size:14.5px;color:var(--muted);margin:0}
.form-hint a{color:var(--leaf-ink)}
.cf-turnstile{flex:none}

.form-confirm{
  background:var(--paper-2);border-left:3px solid var(--leaf);
  padding:16px 18px;font-size:16px;color:var(--ink);margin:0;
}
.form-confirm a{color:var(--leaf-ink)}

/* side notes column beside the form */
.side-notes{display:flex;flex-direction:column;gap:18px;margin:0}

@media (max-width:900px){
  .form-row-split{grid-template-columns:1fr}
}

/* Links on dark sections. The global link colour is navy, which sits at
   1.5:1 against the dark ground and is effectively invisible. Leaf clears
   AA comfortably on the same background. */
/* Buttons carry their own colors; without :not(.btn) this rule outranks
   .btn-primary and paints leaf text on a leaf button, invisible until
   hover turns it white. Tony caught it on the live site. */
.sec-dark a:not(.btn){color:var(--leaf);text-decoration-color:rgba(157,200,64,.5)}
.sec-dark a:not(.btn):hover{color:#fff;text-decoration-color:#fff}

/* ==========================================================================
   Project gallery
   ========================================================================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.shot{margin:0;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.shot img{width:100%;height:260px;object-fit:cover;display:block}
.shot figcaption{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.shot h3{font-size:17.5px;font-weight:700;color:var(--navy)}
.shot p{font-size:15px;color:var(--body)}
.shot-links{margin-top:auto;padding-top:6px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.03em}
.shot-links a{color:var(--leaf-ink);text-decoration:none}
.shot-links a:hover{text-decoration:underline}
.shot-links .sep{margin:0 8px;color:var(--line)}

@media (max-width:1080px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .gallery{grid-template-columns:1fr} }

/* ==========================================================================
   Service Areas dropdown, second level
   ========================================================================== */
.nav-county{position:relative;display:flex;align-items:center;flex-wrap:wrap}
.nav-county > a{flex:1}
.nav-county .sub-toggle-2{padding:8px 14px 8px 4px}
.nav-county .sub-toggle-2 svg{transform:rotate(-90deg)}

/* the city flyout opens to the side on desktop */
.subnav-cities{
  top:-7px;left:100%;min-width:420px;
  columns:2;column-gap:0;padding:8px 0;
  border-top:1px solid var(--line);border-left:3px solid var(--leaf);
  transform:translateX(-6px);
}
.nav-county:hover > .subnav-cities,
.nav-county:focus-within > .subnav-cities,
.nav-county.open > .subnav-cities{opacity:1;visibility:visible;transform:translateX(0)}
.subnav-cities li{break-inside:avoid}
.subnav-cities a{padding:9px 20px;font-size:15px}
.subnav-cities .subnav-all{column-span:all;margin-top:4px}

/* keep the flyout on screen near the right edge of the viewport */
@media (max-width:1400px){
  .subnav-cities{left:auto;right:100%;transform:translateX(6px)}
  .nav-county:hover > .subnav-cities,
  .nav-county:focus-within > .subnav-cities,
  .nav-county.open > .subnav-cities{transform:translateX(0)}
}

/* mobile: everything expands inline instead of flying out */
@media (max-width:1100px){
  .nav.open .nav-county{display:block;padding:0}
  .nav.open .nav-county > a{
    border-top:1px solid var(--line);padding:12px var(--gut) 12px calc(var(--gut) + 14px);
    display:block;font-family:var(--f-display);font-weight:700;font-size:14px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
  }
  .nav.open .nav-county .sub-toggle-2{position:absolute;right:calc(var(--gut) - 6px);top:2px;padding:10px}
  .nav.open .nav-county .sub-toggle-2 svg{transform:none}
  .nav.open .subnav-cities{
    position:static;opacity:1;visibility:visible;transform:none;border:0;
    box-shadow:none;background:#fff;padding:0;display:none;min-width:0;columns:1;
  }
  .nav.open .nav-county.open > .subnav-cities{display:block}
  .nav.open .subnav-cities a{padding-left:calc(var(--gut) + 30px);border-top:1px solid var(--line)}
}

/* ==========================================================================
   Mobile touch targets
   Chrome links were 16 to 28px tall on phones. The header phone link was
   16x16 once its label is hidden, which is the worst possible size for the
   most important control on the page.
   ========================================================================== */
@media (max-width:640px){
  .topbar .tb-item{min-height:44px;padding-block:6px}
  .topbar .wrap{padding-block:0}

  .header-phone{
    min-width:44px;min-height:44px;justify-content:center;
    border:1px solid var(--line);
  }
  .header-phone svg{width:20px;height:20px}

  .foot-nap a,
  .foot-list a{display:block;min-height:44px;display:flex;align-items:center}
  .foot-bottom a{display:inline-flex;align-items:center;min-height:44px}

  /* the call bar is the primary mobile action; keep it unmistakable */
  .callbar a{min-height:52px}
}

/* ==========================================================================
   Header fit between the mobile breakpoint and full desktop
   The nav needs about 1,100px of inner width once Service Areas has its own
   dropdown. Rather than dropping to a hamburger on every laptop, drop the
   phone number's label and keep the icon as a tap target. That buys back
   roughly 110px, which is the difference between fitting and not.
   ========================================================================== */
@media (max-width:1300px){
  .header-phone span{display:none}
  .header-phone{
    min-width:44px;min-height:44px;justify-content:center;
    border:1px solid var(--line);
  }
  .header-phone svg{width:19px;height:19px}
}

/* ==========================================================================
   Button labels never wrap
   The CTA band phone button was rendering 103px tall across three lines,
   because the phone number is a bare text node inside an inline-flex button
   and wrapped whenever the container squeezed. It did this at every width,
   not just on mobile.
   ========================================================================== */
.btn .num{white-space:nowrap}
.cta-actions{flex-wrap:wrap}
.btn{max-width:100%}

/* ==========================================================================
   Header nav sits on one line
   .nav is a flex row, and a flex item shrinks to its min-content width,
   which for "Service Areas" is the width of "Service". Every two-word
   label was stacking onto two lines, at 1920px as well as at 1100px,
   because the wrap is capped at 1240 so the nav has the same space either
   way. Labels never wrap; the nav gets the leftover width instead.
   ========================================================================== */
.nav > a,
.nav-item > a{white-space:nowrap}
.nav{flex-wrap:nowrap;min-width:0}
.site-header .brand{flex:0 0 auto}

/* the header can use the full width it has; the wrap cap is for reading
   measure, and a nav bar is not running text */
.site-header .wrap{max-width:1400px}

/* ==========================================================================
   City grid on the service-area hubs
   48 cities as a directory list with a paragraph each made the hub an
   enormous scroll. The descriptions belong on the city pages; the hub only
   has to help someone find their town quickly.
   ========================================================================== */
.tile-grid{
  list-style:none;display:grid;gap:2px;margin-top:32px;
  grid-template-columns:repeat(4,1fr);
}
/* The li is the grid item and stretches to the row, but the anchor draws the
   border, and it only sized to its own text. One wrapped label in a row left
   every single-line tile beside it short by the height of a line, with the
   borders not lining up. Stretching the anchor through the li fixes the row
   wherever a label wraps. */
.tile-grid>li{display:flex}
.tile-grid a{
  flex:1;display:flex;align-items:center;min-height:60px;padding:14px 18px;
  background:#fff;border:1px solid var(--line);
  font-family:var(--f-display);font-weight:700;font-size:16px;
  color:var(--navy);text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
.tile-grid a:hover,
.tile-grid a:focus-visible{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
.sec-alt .tile-grid a{background:var(--paper-2)}
.sec-alt .tile-grid a:hover,
.sec-alt .tile-grid a:focus-visible{background:var(--navy);border-color:var(--navy);color:#fff}

@media (max-width:1080px){ .tile-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .tile-grid{grid-template-columns:repeat(2,1fr)} }
/* two columns hold down to the narrowest phones; city names are short
   and one column simply doubles the scroll */
@media (max-width:330px){ .tile-grid{grid-template-columns:1fr} }

/* the phone number on the contact panel is the primary action there */
.contact-lead{
  font-family:var(--f-mono);font-weight:600;font-size:20px;
  color:var(--navy);text-decoration:none;white-space:nowrap;
}
.contact-lead:hover{color:var(--leaf-ink)}
/* it is the primary action on that page, so it gets a real tap target */
@media (max-width:640px){
  .contact-lead{display:inline-flex;align-items:center;min-height:44px}
}


/* A form beside an info panel should share a top edge. .intro-grid centres
   its columns, which is right for text beside an image and wrong here,
   because the short panel floats halfway down the tall form. */
.intro-grid:has(.side-notes){align-items:start}