/* =========================================================
   Clean Air America LLC — brand layer.

   The shared system in style.css / pages.css / projects.css is unchanged in
   structure; this file carries the two things the rebrand actually needs:

     1. Contrast. The accent is a bright lime (#54B034). It is a fill colour,
        not a text colour — white on it is 1.7:1 and lime on white is the same.
        So: --on-red is what sits ON an accent fill, and --accent-ink is the
        accent used AS text on a light surface. Dark sections flip --accent-ink
        back to the bright lime, where it reads at 7:1.

     2. Six services instead of eight, which changes three grid counts.

   Loaded last, so it wins over the shared system without editing it.
   ========================================================= */

:root{
  /* what sits on top of an accent fill — the deep green from the logo */
  --on-red:      #055327;
  /* the accent used as text on a light surface: same hue, dark enough to read */
  --accent-ink:  #2C611A;
  /* The two card tints were both pale green and read as one colour. The accent
     card takes a clearly limier wash so the checkerboard is actually visible. */
  --tint-red-sm: #D6EECD;

  /* a genuine error red, so a failed field never reads as brand decoration */
  --err:         #D92D20;
  --err-soft:    #FEF3F2;

  /* The logo is a 3.7:1 wordmark, sized by height. The source PNG used to carry
     a fifth of its height in invisible haze, which forced the header taller than
     the mark actually needed; it is trimmed now, so the same visible logo sits
     in a header 32px shorter. */
  --header-h: 95px;
}

/* ---------------------------------------------------------------------------
   1 — dark surfaces: the accent goes back to full brightness
   --------------------------------------------------------------------------- */
.cta, .ctab, .final, .mega-promo, .modal-aside, .figs, .vs-head, .ctc-form-wrap,
.post-cta, .pcard--dark, .county-head, .gtile, .lb-card, .pslide-main,
.blead-key, .icon-btn, .ctab-book, .about-badge, .site-footer .foot-cta{
  --accent-ink: #6CCB4A;
}

/* the kicker and the hover line on the dark CTA were a pink tint of the old
   accent; on this palette they are simply the accent */
.cta .kicker, .cta-phone:hover b{color:#6CCB4A}

/* The glow behind the three dark bands still carried the old blue and red.
   Same geometry, same blur — green and lime instead. */
.cta::before,.ctab::before,.final::before{
  background:
    radial-gradient(78% 96% at 86% 38%, rgba(84,176,52,.92), transparent 72%),
    radial-gradient(62% 78% at 70% 92%, rgba(64,143,36,.90), transparent 74%),
    radial-gradient(70% 92% at 10% 44%, rgba(10,125,51,.95), transparent 72%),
    radial-gradient(52% 66% at 26% 96%, rgba(6,92,38,.88), transparent 74%);
}

/* ---------------------------------------------------------------------------
   2 — contrast fixes the token swap cannot reach
   --------------------------------------------------------------------------- */
/* the icon tile takes the card's ink as a FILL, so an accent card needs the
   readable shade behind its white glyph */
.services-grid--sub .scard:nth-child(even){--card-ink:var(--accent-ink)}

/* pale accent discs with an accent glyph: lime on pale lime disappears */
.phone-ico, .ctc-line--call .ctc-ico, .says-card:nth-child(even) .says-mono,
.pmodal-body .pslide-cat{color:var(--accent-ink)}
/* the deep-green pill needs the opposite treatment: white, not accent-on-accent */
.ichoice-tag--navy{color:#fff}

/* real error colours — a lime "required" message does not read as a problem */
.field-msg.is-bad, .mf-err, .cf-err{color:var(--err)}
.field input.is-bad, .mf input.is-bad, .mf-sel select.is-bad{
  border-color:var(--err);box-shadow:0 0 0 4px rgba(217,45,32,.12);
}

/* ---------------------------------------------------------------------------
   3 — six services: the grid counts that assumed eight
   --------------------------------------------------------------------------- */
/* Four per row. Eight services fill two rows exactly, where the three-column
   rule written for six left a two-card orphan.

   The alternating tint that used to sit here went with the card redesign in
   section 19 — the design is a white card throughout, and a checkerboard at
   (0,3,1) outranked it. */
.services-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* four inclusion cards per service page sit in one row rather than 3 + an orphan */
.services-grid--sub{grid-template-columns:repeat(4,1fr)}

/* The mega menu: three columns of two groups — above the drawer breakpoint
   ONLY. Unscoped, this beat `@media (max-width:1040px){.mega-cols{1fr}}` in the
   shared sheet on order at equal specificity, so the desktop grid was still
   three columns wide inside a 375px drawer and scrolled sideways. */
@media (min-width:1041px){
  /* Four columns of two. $megaPairs in inc/config.php pairs the eight services
     into four .mega-col wrappers; at three columns the fourth wrapped onto a
     second row and the panel grew past the window. */
  .mega-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* the services index: eight groups, four across */
.svcindex-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* A ladder, not a cliff. The old rule dropped straight from four columns to
   two at 1280 — written when there were six cards — so a 1280 window (which is
   what a 1920 screen at 150% scaling gives you) showed two enormous cards. */
@media (max-width:1100px){
  .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .services-grid--sub{grid-template-columns:repeat(2,1fr)}
  .svcindex-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .services-grid,.services-grid--sub,.svcindex-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   4 — the logo. A 3:1 wordmark at the old 86px height would be 258px wide and
   push the nav off the end of the header, so it is set by height per breakpoint.
   --------------------------------------------------------------------------- */
.brand img{height:67px}
.foot-logo img{height:80px}
.modal-logo{width:270px;height:auto;max-width:66%}
.says-mark{width:104px;height:auto}
/* The logo steps down with the viewport so the six nav items keep their room;
   below 1040 the drawer takes over and the row stops competing for width. */
@media (max-width:1560px){ :root{--header-h:91px} .brand img{height:63px} }
@media (max-width:1400px){ :root{--header-h:87px} .brand img{height:59px} }
@media (max-width:1200px){ :root{--header-h:81px} .brand img{height:53px} }
@media (max-width:1040px){ :root{--header-h:77px} .brand img{height:49px} }
/* The phone step keeps the 70px bar but gives the mark more of it - at 44px
   it sat small against a 52px burger, with 13px of dead bar above and below. */
@media (max-width:760px){  :root{--header-h:70px} .brand img{height:54px} }

/* ---------------------------------------------------------------------------
   5 — the split hero.

   The background arrives finished — photograph, curved partition, pale left
   side, arcs and leaves all in the one image — so everything here is the copy
   that sits on its left-hand side. Two greens, used here and nowhere else yet:
   --h-deep carries the first headline row, --h-mid the second.

   They are declared on :root rather than on .hero--split. Scoped to the hero
   they were invisible to anything outside it, and a var() that does not resolve
   makes the whole declaration invalid at computed-value time — which is how the
   burger's bars ended up with no background at all rather than a gradient.
   --------------------------------------------------------------------------- */
:root{
  --h-deep:#027032;
  --h-mid:#49af24;
}
.hero--split{
  position:relative;
  display:grid;align-content:center;
  padding:0;
  overflow:hidden;
  /* exactly the window below the header, and no taller */
  height:calc(100vh - var(--header-h));
  height:calc(100dvh - var(--header-h));
  min-height:580px;
  /* a backstop only, for the moment before the image paints */
  background:#F0F7EE;
}

/* The background, whole. It arrives with the partition, the pale side, the arcs
   and the leaves already on it, so there is nothing to clip, feather or draw —
   the image is simply laid in and the copy sits on its left-hand side. It is
   2:1, the hero's own ratio, so cover crops almost nothing. */
.hero--split .hero-photo{position:absolute;inset:0;z-index:0;display:block}
.hero--split .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

.hero--split .hero-inner{position:relative;z-index:2;display:flex;align-items:center}
/* 43% of the width, the column the reference uses */
.hero--split .hero-copy{width:100%;max-width:min(820px,43.5vw)}

/* ---- the line under the badge ----
   The rule-and-line treatment from the reference: a short accent bar, a gap,
   then one tracked uppercase line. */
.hero--split .eyebrow{
  display:flex;align-items:center;
  gap:clamp(11px,1.1vw,19px);
  margin:0 0 clamp(13px,1.4vw,22px);
  font-family:var(--font-head);font-weight:800;
  /* sized so the line holds inside the 43.5vw column */
  font-size:clamp(11px,1.22vw,21px);line-height:1.25;
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--h-deep);
}
.eyebrow-rule{
  flex:none;
  width:clamp(26px,2.9vw,52px);height:5px;border-radius:3px;
  background:var(--h-mid);
}
@media (max-width:980px){
  .hero--split .eyebrow{font-size:clamp(11px,3.2vw,16px);gap:10px}
  .eyebrow-rule{width:28px;height:4px}
}

/* The eyebrow inherits white-space:nowrap, which on a phone made it 424px wide
   inside a 311px column. A flex item's min-width is auto, so that width became
   the minimum for .hero-copy and then for .hero-inner, and the whole hero column
   overflowed — invisibly, because overflow-x:clip was cutting it off rather than
   scrolling. The line wraps, and neither box can be inflated by a wide child. */
.hero--split .eyebrow{white-space:normal;flex-wrap:wrap}
.hero--split .hero-inner,
.hero--split .hero-copy{min-width:0}

/* ---- headline: two rows, one colour each ----
   site.js measures each slide and sets the size, so every headline fills the
   column rather than sharing a bucket with a longer or shorter one. */
.hero--split .hero-title{
  display:flex;flex-direction:column;
  font-family:var(--font-head);font-weight:900;
  /* One fixed headline, so this is a straight clamp rather than a size the
     script measures. Tuned to the longer row — "AIR DUCT & DRYER VENT" — against
     the 43.5vw column: 3.6vw lands at 58px in a 1600 window against a 696px
     column, and 69px is where the 820px ceiling stops it growing. */
  font-size:clamp(28px,3.6vw,69px);
  line-height:.98;letter-spacing:-.022em;text-transform:uppercase;
  color:var(--h-deep);
  /* The shared sheet reserves min-height:176px here — two lines of its largest
     size — so that a rotating headline could not change the banner's height
     every seven seconds. There is one fixed headline now, so that reservation
     is 63px of dead air under the second row and nothing else. Cleared at every
     breakpoint, since the media queries restate it. */
  min-height:0;
}
/* Each row is one line, and FLEX rather than block: the letter masks are
   inline-blocks, and an inline-block sits on the baseline, which left room
   under the second row for descenders this headline does not have — 52px of
   dead space inside the <h1>, reading as a hole above the lede. */
.hero-l1,.hero-l2{display:flex;align-items:flex-end;white-space:nowrap;line-height:.98}
.hero-l1{color:var(--h-deep)}
.hero-l2{color:var(--h-mid)}
.hero--split .amp{color:var(--h-deep);margin-left:.16em;line-height:.98}
.hero--split .ht-mask{display:block;overflow:hidden;line-height:.98}

.hero-lede{
  max-width:min(620px,36vw);margin:clamp(10px,1vw,18px) 0 0;
  font-size:clamp(14px,1.18vw,21px);line-height:1.45;color:#5A6B60;
}

/* ---- the action row ---- */
.hero--split .hero-act{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,1.6vw,28px);
  margin-top:clamp(22px,2.9vw,52px);
}
.btn--hero{
  position:relative;isolation:isolate;overflow:hidden;
  gap:14px;height:clamp(52px,4.3vw,76px);padding:0 clamp(20px,1.9vw,34px);
  border-radius:16px;font-size:clamp(13px,1.18vw,21px);letter-spacing:.03em;
  background:linear-gradient(180deg,#499E2C 0%,var(--h-mid) 48%,#245613 100%);
  color:#fff;
  /* three layers: a coloured shadow that reads as light thrown onto the page,
     a top highlight so the face looks lit rather than flat, and a dark bottom
     edge so it sits ON the page instead of in it */
  box-shadow:
    0 18px 34px -14px rgba(49,141,6,.62),
    0 2px 5px rgba(2,97,43,.18),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.22);
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s cubic-bezier(.22,1,.36,1),
    filter .3s ease;
}
/* the label and the arrow ride above the sheen */
.btn--hero > *{position:relative;z-index:2}

/* The sheen. A narrow band of light, skewed, parked off the left edge; on hover
   it crosses the face once and stops — a highlight catching the surface, not a
   loop running on its own. */
.btn--hero::before{
  content:"";position:absolute;z-index:1;inset:-40% -60%;
  background:linear-gradient(100deg,
    transparent 38%,
    rgba(255,255,255,.42) 48%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.42) 52%,
    transparent 62%);
  transform:translateX(-62%);
  transition:transform .85s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;
}
.btn--hero:hover::before,
.btn--hero:focus-visible::before{transform:translateX(62%)}

.btn--hero:hover,
.btn--hero:focus-visible{
  transform:translateY(-3px);
  filter:brightness(1.05);
  box-shadow:
    0 28px 46px -16px rgba(49,141,6,.68),
    0 4px 10px rgba(2,97,43,.2),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
/* pressed: most of the lift comes back out, and the shadow tightens under it */
.btn--hero:active{
  transform:translateY(-1px);
  box-shadow:
    0 10px 20px -10px rgba(49,141,6,.6),
    0 1px 3px rgba(2,97,43,.2),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.22);
  transition-duration:.08s;
}

.btn-go{
  display:grid;place-items:center;flex:none;
  width:clamp(22px,1.7vw,30px);height:clamp(22px,1.7vw,30px);border-radius:50%;
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
  transition:
    background .3s ease,
    box-shadow .3s ease,
    transform .42s cubic-bezier(.22,1,.36,1);
}
/* the arrow leads the movement: the chip travels a little further than the
   button does, which is what makes the lift read as "go" rather than "bounce" */
.btn--hero:hover .btn-go,
.btn--hero:focus-visible .btn-go{
  background:rgba(255,255,255,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  transform:translateX(5px);
}
.btn--hero svg{transition:transform .42s cubic-bezier(.22,1,.36,1)}
.btn--hero:hover svg{transform:translateX(1px)}

/* Someone who has asked for less motion gets the colour and the depth, and
   none of the travel. */
@media (prefers-reduced-motion:reduce){
  .btn--hero,.btn--hero::before,.btn-go,.btn--hero svg{transition:none}
  .btn--hero:hover,.btn--hero:focus-visible{transform:none}
  .btn--hero:hover::before,.btn--hero:focus-visible::before{transform:translateX(-62%)}
  .btn--hero:hover .btn-go{transform:none}
}

/* the number, with the thin rule the reference puts before it */
.hero--split .hero-call{
  display:inline-flex;align-items:center;gap:clamp(12px,1.1vw,19px);
  padding-left:clamp(16px,1.6vw,28px);
  border-left:1px solid rgba(2,97,43,.17);
}
.hero-call-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(42px,3.4vw,60px);height:clamp(42px,3.4vw,60px);border-radius:50%;
  background:#D3ECCA;color:var(--h-mid);
  transition:background .2s ease,color .2s ease,transform .2s ease;
  position:relative;
}
.hero-call-ico svg{width:46%;height:46%}
.hero-call:hover .hero-call-ico{background:var(--h-mid);color:#fff;transform:translateY(-2px)}

/* ---- the handset ----
   Just the icon moving: the phone tips as if it were ringing, on a cycle with a
   long still tail so it reads as a call coming in rather than as a loop. */
.hero-call-ico svg{transform-origin:52% 58%;animation:callShake 2.8s ease-in-out infinite}
@keyframes callShake{
  0%  {transform:rotate(0)}
  4%  {transform:rotate(-15deg)}
  9%  {transform:rotate(12deg)}
  14% {transform:rotate(-9deg)}
  19% {transform:rotate(7deg)}
  24% {transform:rotate(-4deg)}
  29% {transform:rotate(0)}
  100%{transform:rotate(0)}
}

/* hovering the number is already an answer, so the ringing stops there */
.hero-call:hover .hero-call-ico svg{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .hero-call-ico svg{animation:none}
}
.hero-call em{
  display:block;font-style:normal;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(10.5px,.85vw,15px);letter-spacing:.08em;text-transform:uppercase;
  color:#6B7C70;
}
.hero-call b{
  display:block;margin-top:3px;
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(19px,1.7vw,30px);letter-spacing:-.02em;color:var(--h-deep);
}

/* ---- the Google rating badge ----
   A white pill lifted off the pale side, the way the reference has it: the mark,
   the score, then the stars over the review count. The whole thing is one link
   to the Business Profile. */
.gbadge{
  display:inline-flex;align-items:center;
  gap:clamp(12px,1.2vw,20px);
  margin:0 0 clamp(12px,1.3vw,20px);
  padding:clamp(11px,1vw,17px) clamp(18px,1.7vw,30px);
  background:#fff;border-radius:999px;
  box-shadow:0 14px 34px -14px rgba(2,97,43,.35), 0 2px 6px rgba(2,97,43,.07);
  transition:transform .22s ease, box-shadow .22s ease;
}
.gbadge:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px -16px rgba(2,97,43,.42), 0 2px 6px rgba(2,97,43,.08);
}
.gbadge-g{flex:none;display:grid;place-items:center}
.gbadge-g svg{width:clamp(28px,2.3vw,40px);height:auto;display:block}

.gbadge-score{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(24px,2.1vw,36px);line-height:1;letter-spacing:-.03em;
  color:#3b5045;
}

.gbadge-txt{display:block}
/* the gold Google uses on its own star rows */
.gbadge-stars{display:flex;gap:2px;color:#FBBC04;line-height:0}
.gbadge-stars svg{width:clamp(14px,1.15vw,20px);height:auto}
.gbadge-sub{
  display:block;margin-top:4px;
  font-size:clamp(12px,.95vw,16px);line-height:1.3;color:#5A6B60;
  white-space:nowrap;
}
.gbadge-sub b{font-weight:800;color:#3b5045}

/* ---------------------------------------------------------------------------
   The phone hero.

   The artwork is drawn for this layout: a pale field down to about 47% of its
   height, then the photograph, with leaf framing throughout.

   It covers the hero edge to edge. Pinning it to the foot at natural proportion
   left 51px of CSS gradient above it, and that showed as a seam: the artwork has
   a leaf running off its top edge, so no flat colour continues it.

   The hero is therefore sized to the artwork rather than the other way round —
   padding-bottom reserves the photographed band as a share of the width the
   image scales to, and the copy above it is tuned to land inside the pale field
   at that proportion. The image fills whatever height results, anchored to the
   bottom so the technician is never cropped; any residue is a couple of pixels
   off the left and right leaf framing.
   --------------------------------------------------------------------------- */
@media (max-width:980px){
  .hero--split{
    display:block;position:relative;
    height:auto;min-height:0;padding:0;
    /* continues the artwork's own pale top upward */
    background:
      radial-gradient(74% 32% at 50% 10%, rgba(181,222,167,.34), transparent 72%),
      linear-gradient(180deg, #FAFCF9 0%, #F0F7EE 60%, #EAF3E7 100%);
  }
  .hero--split .hero-photo{position:absolute;inset:0;z-index:0}
  .hero--split .hero-photo img{
    width:100%;height:100%;display:block;
    object-fit:cover;object-position:50% 100%;
  }
  /* the artwork carries its own pale ground; nothing is laid over it */
  .hero--split::after{display:none}

  .hero--split .hero-inner{
    position:relative;z-index:2;display:block;
    padding-top:clamp(20px,5.4vw,36px);
    /* the photographed part of the artwork, as a share of the width it scales
       to — 2.108 tall per width, of which the lower 53% is the picture */
    padding-bottom:112%;
  }
  .hero--split .hero-copy{
    width:100%;max-width:none;
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    /* the inherited sheet pads the column 26px from the top, on top of the
       padding .hero-inner already applies — 26px of nothing above the badge */
    padding-top:0;
  }

  .gbadge{align-self:center;margin-bottom:clamp(7px,1.9vw,12px);gap:10px;padding:8px 15px}
  .gbadge-sub{font-size:12.5px}

  /* The inherited phone rule turns the eyebrow into a frosted pill with a
     pulsing dot — written for a line sitting ON a photograph. On this artwork
     it sits on clean pale ground, so it is the plain tracked rule-and-text the
     desktop uses. */
  .hero--split .eyebrow{
    /* Two rows of copy now (the claims, then the three cities), so the accent
       bar goes back above them rather than sitting alongside a stacked block
       and dragging the group off centre. */
    flex-direction:column;align-items:center;text-align:center;
    justify-content:center;flex-wrap:wrap;
    font-size:clamp(10.5px,3vw,15px);gap:9px;
    margin-bottom:clamp(6px,1.7vw,11px);
    padding:0;border:0;border-radius:0;
    background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    white-space:normal;
  }
  .hero--split .eyebrow::before{display:none}
  .eyebrow-rule{width:26px;height:4px}

  /* One row per line here too, as on desktop. The size is driven by the longer
     row — "AIR DUCT & DRYER VENT" measures 11.66x its font-size, and the column
     is 0.864 of the viewport, so 7.15vw leaves about 12px of slack at 375 and
     holds that proportion at every phone width. The tighter tracking and the
     smaller gap before the ampersand are what buy that slack. */
  .hero-l1,.hero-l2{display:block;white-space:nowrap}
  /* The gutter and the headline are both sized in vw so the margin either side
     of the longest row is the same proportion at every phone width. The longest
     row ("AIR DUCT & DRYER VENT") measures 11.285x its font-size at this
     tracking, so 7.7vw of type inside a column of 0.882vw leaves about 1.3% of
     the viewport of slack - roughly 2.5px at each end on a 375 screen, on top
     of the 22px gutter itself. Raising the type past 7.8vw puts the row back
     against the edge at every width, not just the one being looked at. */
  .hero--split .hero-inner{
    padding-left:clamp(16px,5.9vw,30px);
    padding-right:clamp(16px,5.9vw,30px);
  }
  .hero--split .hero-title{
    font-size:clamp(21px,7.7vw,52px);line-height:1.04;letter-spacing:-.04em;
  }
  .hero--split .amp{margin-left:.1em}
  /* The floor matters more than the ceiling here. At clamp(13.5px, ...) the size
     stopped tracking the viewport below 386px, so the same sentence took a
     fifth line at 360 and a sixth at 320 — 19px and 38px of column the pale
     field does not have. A floor low enough to stay on the vw term keeps the
     characters per line, and so the line count, constant. */
  .hero-lede{
    max-width:none;margin-top:clamp(7px,1.9vw,12px);
    font-size:clamp(11.4px,3.6vw,16px);line-height:1.42;
  }

  /* the button over the number, both centred */
  .hero--split .hero-act{
    flex-direction:column;align-items:center;
    gap:clamp(10px,2.7vw,16px);
    margin-top:clamp(11px,3.1vw,19px);
    width:100%;
  }
  /* Sized to its label and centred in the column, rather than stretched to the
     full width of the hero. Selector carries .hero-act because the inherited
     sheet sets `.hero-act .btn{width:100%}` under 760px — two classes to one,
     so a later `.btn--hero` on its own loses on specificity, not on order. */
  .hero--split .hero-act .btn--hero{
    width:auto;max-width:100%;align-self:center;justify-content:center;
    padding:0 clamp(22px,6.4vw,34px);
  }
  /* the About section's call block, matched: a 46px ringed disc, the label in
     small tracked caps above, the number under it. The label takes the readable
     lime rather than the bright one - this ground is pale, where About's is the
     deep green. */
  .hero--split .hero-call{
    padding-left:0;border-left:0;gap:14px;
    justify-content:center;text-align:left;
  }
  .hero--split .hero-call-ico{
    width:46px;height:46px;
    background:rgba(62,137,37,.1);color:var(--accent-ink);
    box-shadow:inset 0 0 0 1px rgba(62,137,37,.22);
  }
  .hero--split .hero-call em{
    font-size:10.5px;font-weight:800;line-height:1.3;letter-spacing:.11em;
    color:var(--accent-ink);margin-bottom:3px;
  }
  .hero--split .hero-call b{font-size:20px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
}

/* The badge, the button and the call chip are the three pieces of the column
   set in pixels rather than in vw, so on a narrow phone they keep their height
   while the pale field they sit in shrinks with the width. One step down below
   375 is what keeps the column inside the field there. */
@media (max-width:374px){
  .gbadge{padding:6px 12px;gap:9px}
  .gbadge-score{font-size:19px}
  .gbadge-sub{font-size:11.5px}
  .hero--split .eyebrow{margin-bottom:5px}
  .hero--split .hero-act{gap:9px;margin-top:9px}
  .hero--split .hero-act .btn--hero{height:48px;font-size:12.5px}
  .hero--split .hero-call-ico{width:38px;height:38px}
}

/* ---------------------------------------------------------------------------
   6 — small corrections
   --------------------------------------------------------------------------- */
/* the services index cross-link rows read as a second class of link */
.svcindex-x a{color:var(--ink-muted)}
.svcindex-x a:hover{color:var(--accent-ink)}

/* the ghost button on light sits on the deep green, not on the lime */
.btn--ghost-navy{box-shadow:inset 0 0 0 1.6px var(--navy);color:var(--navy)}

/* ---------------------------------------------------------------------------
   7 — a pre-existing bug carried over with the design.

   .ctc-hours declares display:flex, but `.ctc-line--flat .ctc-txt b` is
   declared later at equal specificity and forces display:block — so the day and
   the time ran together ("Mon – Fri8am – 7pm"). The flex row is restored here
   rather than by editing the shared sheet.
   --------------------------------------------------------------------------- */
.ctc-line--flat .ctc-txt b.ctc-hours{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}

/* ---------------------------------------------------------------------------
   8 — the two accent-filled bands the token swap could not reach.

   .ticker and .ctab-call both paint var(--red) and set their text white on a
   descendant rule, so the parent-block contrast pass could not see the pair.
   On a bright lime that is 1.7:1. Both take the on-accent green instead, which
   is the same treatment the buttons already use.
   --------------------------------------------------------------------------- */
.ticker, .ticker-set a, .ticker-label, .ticker-star{color:var(--on-red)}
.ctab-call, .ctab-call .ctab-txt b, .ctab-call .ctab-txt em{color:var(--on-red)}
.ctab-call .phone-ico svg{fill:var(--on-red)}

/* Hint and placeholder text sat at 3.4:1 on white. Same hue, one step darker,
   so every muted line clears 4.5:1 on both the white and the tinted surfaces. */
:root{--ink-muted:#627365}

/* ---------------------------------------------------------------------------
   9 — the two call buttons that set their own fill.

   .book-call and .fab-call declare --card-ink:var(--red), so they painted the
   bright lime behind white text (1.7:1). They take the readable lime instead,
   which is the same fill the accent service cards already use — so the three
   call buttons on a page now match each other.
   --------------------------------------------------------------------------- */
.scard-btn.book-call, .scard-btn.fab-call{
  --card-ink:var(--accent-ink);
  --card-ico:var(--accent-ink);
}

/* The ghost numeral on the accent "why" card was #D6EECE on an #D6EECD card —
   literally invisible. Both tones step down enough to read as the faint
   background numeral the design intends. */
.why-list li{--card-ghost:#BED4B6}
/* the diagonal pair, 2 and 3 — not the even ones */
.why-list li:nth-child(2),
.why-list li:nth-child(3){--card-ghost:#A4D593;--card-ink:var(--accent-ink)}

/* The pledge numeral was the full accent at 28% opacity — a soft tint of the
   old red, but a bright lime at 28% is barely on the page. Deeper colour, same
   faintness, so it still sits behind the heading rather than competing. */
.pledge-n{color:var(--accent-ink);opacity:.5}

/* ---------------------------------------------------------------------------
   11 — the inner-page hero wash.

   The previous build's rooftop photographs had open sky behind the H1. These
   air-duct photographs are busy edge to edge, so the vertical wash alone left
   the lede sitting on a hose or a duct seam. A left-weighted pass is layered
   over it — same idea as the split hero — so the copy has a field to sit on and
   the picture is still fully itself on the right.
   --------------------------------------------------------------------------- */
.phero-bg::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.22) 30%,
                           rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 64%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.22) 42%,
                            rgba(255,255,255,.34) 100%);
}
@media (max-width:980px){
  .phero-bg::after{
    background:linear-gradient(180deg, rgba(255,255,255,.32) 0%,
                                       rgba(255,255,255,.52) 42%,
                                       rgba(255,255,255,.62) 100%);
  }
}


/* ---------------------------------------------------------------------------
   12 — the nav, and the hero actions that replaced the inline form.
   --------------------------------------------------------------------------- */
/* Service Areas and Blog have no pages yet, so they are spans. They have to sit
   on the same baseline and carry the same box as the real links, or the row
   reads as misaligned — only the hover pill and the cursor are dropped. */
.nav-link--soon{cursor:default;opacity:.62}
.nav-link--soon:hover{background:none}

/* Six items rather than three: the floor on the gap has to come down or the
   row runs into the phone block before the shell does. */
.nav-list{gap:clamp(10px,1.2vw,30px)}

/* The hero's call to action, in place of the phone field. The button keeps the
   hero's own rhythm and the number beside it is the second route out, the same
   pairing the About section and the mega menu already use. */
.hero-act{
  display:flex;align-items:center;gap:clamp(16px,2vw,30px);
  flex-wrap:wrap;margin-top:34px;
}
.hero-call{display:inline-flex;align-items:center;gap:13px}
.hero-call-ico{
  display:grid;place-items:center;flex:none;
  width:52px;height:52px;border-radius:50%;
  background:var(--tint-red-sm);color:var(--accent-ink);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.hero-call:hover .hero-call-ico{background:var(--red);color:var(--on-red);transform:translateY(-2px)}
.hero-call em{
  display:block;font-style:normal;
  font-family:var(--font-head);font-weight:700;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);
}
.hero-call b{
  display:block;margin-top:1px;
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(20px,1.6vw,26px);letter-spacing:-.02em;color:var(--ink);
}
@media (max-width:760px){
  .hero-act{gap:18px}
  .hero-act .btn{width:100%;justify-content:center}
}

/* Six nav items and a wider logo do not fit the row the three-item build was
   tuned for. The nav text scales with the viewport between the drawer
   breakpoint (1040) and the full shell, and the gap after the logo comes in
   with it, so the row never has to overflow or wrap. */
/* ---------------------------------------------------------------------------
   These are the DESKTOP nav only — above the drawer breakpoint.

   They have to be scoped. Below 1040 the same .nav element becomes the mobile
   drawer: position:fixed, left:0, right:0, hidden with translateX(-100% of its
   own width). A margin-left here shifted that panel right by 12px, so the
   translate no longer cleared the screen and 12px of white drawer sat down the
   left edge of every page, over every section. That was the white line.
   --------------------------------------------------------------------------- */
@media (min-width:1041px){
  /* The row is balanced, not just spaced.

     .nav-list is justify-content:space-between, so the gaps BETWEEN items are
     whatever is left over — they came out at 73px while the logo-to-Home gap was
     18 and Contact-to-phone was 12. Seven items, so eight gaps: six inner, two
     at the ends. Each item also carries the hover pill's padding on both sides,
     so an inner gap reads 2x --nav-x wider than an end gap does.

     Solving for equal OPTICAL gaps gives end gaps of inner + --nav-x, which is
     what these two numbers are. Change one and the leftover redistributes
     itself; the row stays even. */
  .nav{margin-left:clamp(26px,3.7vw,76px)}
  /* +--nav-x: the logo has no hover pill on its side, the phone block does not
     either, but the last item's pill eats into this end only */
  .nav{padding-right:calc(clamp(26px,3.7vw,76px) + var(--nav-x))}
  .nav-link{font-size:clamp(14.5px,1.21vw,21px)}
}
@media (min-width:1041px) and (max-width:1400px){ :root{--nav-x:11px} }
@media (min-width:1041px) and (max-width:1200px){ :root{--nav-x:8px} .nav-list{gap:clamp(5px,.6vw,14px)} }

/* the drawer sets its own size, and no offsets of its own */
@media (max-width:1040px){
  .nav{margin-left:0;padding-right:0}
  .nav-link{font-size:18px}
}


/* ---------------------------------------------------------------------------
   13 — no sideways scroll, ever.

   White strips down one or both edges on a narrow window are the page being
   fractionally wider than the viewport: the band sections are 100% of the
   document, so the moment anything makes the document wider than the window,
   they stop reaching the edge. The usual cause is a classic scrollbar — it
   takes ~15px off the viewport but NOT off 100vw, so anything measured in vw
   overflows by exactly its width. Overlay scrollbars hide the fault entirely,
   which is why it shows on a real browser and not in a preview pane.

   `clip` rather than `hidden`: hidden would make these a scroll container and
   the sticky header would stop sticking.
   --------------------------------------------------------------------------- */
html{overflow-x:clip}
body{overflow-x:clip;width:100%}

/* and the bands reach the edge on their own terms rather than inheriting a
   width from whatever is above them */
.ticker,.cta,.ctab,.final,.says,.hero,.book,.services,.how,.faqs,.site-footer{
  width:100%;max-width:100%;margin-left:0;margin-right:0;
}

/* ---------------------------------------------------------------------------
   11 — the mobile drawer and the burger.

   Three separate faults, one section:

     * the scroll lock. `body{overflow:hidden}` turned the body into a scroll
       container, and a sticky header resolves against the nearest one — so
       opening the drawer part-way down a page dropped the header to the top of
       the document and the page showed through above the drawer. The lock is
       on <html> now (site.js), and the drawer covers the header's strip itself
       so nothing can show there again.
     * the mega panel. A desktop three-column grid inside a 375px drawer, fixed
       in section 3 by scoping that grid above the breakpoint.
     * the icon, which was a chimney — crown, stack and a puff of smoke — from
       the design this site was built on.
   --------------------------------------------------------------------------- */
html.nav-locked{overflow:hidden}

@media (max-width:1040px){
  /* The drawer covers the whole viewport, header included, rather than sitting
     under a header it has to trust to still be there. */
  .nav{
    top:0;padding-top:calc(var(--header-h) + 14px);z-index:120;
    /* Sized in vw, not with right:0. A fixed box resolves left/right and % width
       against the initial containing block, and on a page whose content is wider
       than the window that block is wider than the viewport — the drawer came
       out 415px inside a 375px screen and took the page's sideways scrollbar
       with it. vw follows the viewport. */
    right:auto;width:100vw;
  }

  /* and the burger rides above it, so the X that closes the drawer is the same
     control that opened it, in the same place */
  .burger{position:relative;z-index:130}
  /* the logo needs its own z-index too: .nav is a CHILD of the header, so
     raising the header lifts the drawer with it, and inside that stacking
     context a positioned .nav still paints over a static .brand */
  .brand{position:relative;z-index:130}
  .site-header{z-index:140}

  /* the panel under SERVICES reads as a nested list, not as a dropped card */
  .has-drop[data-open="true"] > .nav-link{
    background:var(--tint-red-sm);color:var(--navy);
  }
  .drop--mega{background:#F8FBF7;border-radius:0 0 12px 12px;padding:6px 0 10px}
  .mega-group{padding:12px 14px;border-bottom:1px solid rgba(8,131,62,.07)}
  .mega-group:last-child{border-bottom:0}
  /* the groups stack, so a group's own links do not need a second indent */
  .mega-links{margin-top:8px;padding-top:9px;border-top:1px solid rgba(8,131,62,.07)}
  .mega-foot{margin:10px 14px 2px}
}

/* ---- the burger ----
   An airflow glyph, not three bars: three currents with the outer two curling
   away, the way moving air is drawn. The middle current is short and lime, so
   the mark has a focal point rather than reading as a stack of rules.

   Both states are in the one SVG. Opening the drawer rotates the airflow out
   and the cross in, so the control turns into its own close button instead of
   swapping icons. */
.burger{display:none;place-items:center;gap:0}
@media (max-width:1040px){ .burger{display:grid} }

.burger-ico{
  width:25px;height:25px;overflow:visible;
  stroke:var(--navy);
}
.bi-air,.bi-x{
  transform-origin:50% 50%;
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .24s ease;
}
.bi-l2{stroke:var(--h-mid)}

/* the cross waits off-stage, a quarter turn back */
.bi-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.burger[aria-expanded="true"] .bi-air{opacity:0;transform:rotate(90deg) scale(.6)}
.burger[aria-expanded="true"] .bi-x{opacity:1;transform:none}

/* hover: the currents drift, which is the only motion this mark needs */
.burger:hover .bi-l1{transform:translateX(1.6px)}
.burger:hover .bi-l2{transform:translateX(3px)}
.burger:hover .bi-l3{transform:translateX(1.6px)}
.bi-l1,.bi-l2,.bi-l3{transition:transform .38s cubic-bezier(.22,1,.36,1)}

/* the three bars this replaced, and the puff of smoke that rose off them */
.burger span{display:none}
.burger::before{content:none}

@media (prefers-reduced-motion:reduce){
  .bi-air,.bi-x,.bi-l1,.bi-l2,.bi-l3{transition:none}
}

/* ---------------------------------------------------------------------------
   12 — a 1fr column that would not shrink.

   On the contact page the stacked grid's column measured 369px inside a 335px
   content box, pushing the document 14px wider than the phone. `1fr` is
   `minmax(auto, 1fr)`, and that `auto` minimum is min-content — so a wide child
   sets the floor and the column refuses to shrink to the screen. `minmax(0,1fr)`
   removes the floor. Invisible until now only because the overflow was clipped;
   it was still enough to widen the block the drawer sized itself against.
   --------------------------------------------------------------------------- */
@media (max-width:980px){
  .ctc-grid{grid-template-columns:minmax(0,1fr)}
  .ctc-grid > *{min-width:0}
}

/* ---------------------------------------------------------------------------
   13 — the marquee band on a phone.

   The row height already comes from the anchor (clamp(58px,5.4vw,84px), so 58
   on a phone). The mobile block then adds `padding:18px 0` to the band on top
   of it, which is a 94px stripe around one 23px line. The anchor sets the
   height; the band adds nothing.
   --------------------------------------------------------------------------- */
@media (max-width:820px){
  .ticker{padding:0}
  .ticker-set a{height:54px;padding:0 17px;gap:17px}
  .ticker-set li{padding:0}
  .ticker-label{font-size:19px;letter-spacing:-.005em}
  .ticker-star svg{width:15px;height:15px}
}

/* ---------------------------------------------------------------------------
   14 — the inquiry section, rebuilt to the supplied design.

   The client's artwork is the ground, the card carries a pill, a display
   heading and iconned fields whose labels notch into their own border, and the
   pitch column gains a three-fact row above the call button.

   Scoped to .bf- classes throughout. The modal and the hero gate share .mf /
   .mf-row, and restyling those would have redesigned three forms at once.
   --------------------------------------------------------------------------- */
.book{
  padding:clamp(54px,5.4vw,96px) 0;
  background:#F2F8F0;
}
/* the supplied artwork, whole — no photograph under it and no wash over it */
.book::before{
  background:url("../img/sections/book-bg.jpg") center/cover no-repeat;
  opacity:1;
}
.book::after{display:none}

.book-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(34px,4.6vw,78px);
  align-items:center;
}

/* ---- the card ---- */
.book-card{
  border-radius:clamp(20px,1.7vw,30px);
  padding:clamp(26px,2.6vw,46px);
  box-shadow:0 34px 76px -24px rgba(7,81,33,.22), 0 2px 6px rgba(7,81,33,.05);
}

.bf-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px 8px 12px;border-radius:999px;
  background:#DCEDD6;color:#245613;
  font-family:var(--font-head);font-weight:800;
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
}
.bf-pill svg{flex:none}

.book-card > h2{
  margin:clamp(14px,1.3vw,22px) 0 0;text-align:left;
  color:var(--ink);
}
.bf-lede{
  margin:clamp(8px,.8vw,14px) 0 0;
  font-size:clamp(14px,1.02vw,16.5px);line-height:1.6;color:var(--ink-body);
}

.book-form{gap:clamp(16px,1.5vw,24px);margin-top:clamp(20px,2vw,34px)}
.bf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.3vw,22px)}

/* ---- a field ----
   The label sits ON the border rather than above it, so the group reads as one
   object. It is painted over the line with the card's own white, which is why
   nothing has to be cut out of the border itself. */
.bf{position:relative;display:block;min-width:0;--bf-h:clamp(52px,4.1vw,60px)}
.bf > label{
  position:absolute;top:-7px;left:46px;z-index:2;
  padding:0 7px;background:#fff;
  font-family:var(--font-head);font-weight:700;
  font-size:11.5px;letter-spacing:.055em;text-transform:uppercase;
  color:#56705E;
}
.bf > label i{font-style:normal;color:var(--accent-ink)}

.bf-ico{
  position:absolute;left:17px;top:0;height:var(--bf-h);
  display:grid;place-items:center;z-index:2;
  color:#9FB8A5;pointer-events:none;
}
.bf-ico svg{width:19px;height:19px;display:block}

.book-form .bf input,
.book-form .bf select,
.book-form .bf textarea{
  width:100%;height:var(--bf-h);
  padding:0 16px 0 49px;
  font-family:var(--font-body);font-size:15.5px;color:var(--ink);
  background:#fff;border:1.5px solid #E1EBDC;border-radius:14px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.book-form .bf input::placeholder,
.book-form .bf textarea::placeholder{color:#A9BDAF}
.book-form .bf input:focus,
.book-form .bf select:focus,
.book-form .bf textarea:focus{
  outline:none;border-color:var(--h-mid);box-shadow:0 0 0 4px rgba(68,162,34,.12);
}
.book-form .bf input.is-bad,
.book-form .bf select.is-bad{border-color:var(--err);box-shadow:0 0 0 4px rgba(217,45,32,.1)}

.bf--sel select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px}
.bf-caret{
  position:absolute;right:17px;top:0;height:var(--bf-h);
  color:#56705E;pointer-events:none;
}

/* the message box: the icon sits at the first line, not at the middle of the
   box, so the column of icons still reads as a column */
.bf--area .bf-ico{height:auto;top:19px;align-items:flex-start}
.book-form .bf--area textarea{
  height:auto;min-height:clamp(104px,10vw,132px);
  padding:16px 16px 16px 49px;line-height:1.55;resize:vertical;
}

/* ---- the send row ---- */
.bf-foot{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,1.6vw,26px);margin-top:4px;
}
.bf-secure{
  display:flex;align-items:center;gap:9px;
  margin:0;max-width:21ch;
  font-size:12.5px;line-height:1.35;color:#64796A;
}
.bf-secure svg{flex:none;color:#8CA193}

/* ---- the pitch column ---- */
.book-badge{
  gap:11px;padding:8px 18px 8px 8px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 10px 26px -10px rgba(7,81,33,.22), 0 1px 3px rgba(7,81,33,.06);
}
.book-badge-ico{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--h-mid);color:#fff;
}
.book-copy h2{
  margin:clamp(16px,1.6vw,26px) 0 0;
}
.book-copy h2 em{color:var(--h-mid)}
.book-copy > p{
  margin:clamp(12px,1.2vw,20px) 0 0;max-width:38ch;
  font-size:clamp(15px,1.07vw,17.5px);line-height:1.62;
}

/* ---- the three facts ---- */
.book-trust{
  /* auto columns, not three equal fractions: each item takes the width of its
     own label, so the row is as wide as its content rather than stretching the
     three apart across whatever the column happens to be */
  display:grid;grid-template-columns:repeat(3,max-content);
  /* Spread across most of the column rather than bunched at its left edge:
     max-content columns keep each item the width of its own label, and
     space-between then shares what is left between the three. The cap is what
     stops the row spreading to the full column — at 100% the three sat so far
     apart they stopped reading as one group. */
  justify-content:space-between;
  max-width:min(74%,448px);
  gap:clamp(14px,1.4vw,24px);
  margin:clamp(16px,1.6vw,26px) 0 0;list-style:none;
  /* the rule the design draws between the facts and the button. It lives here,
     not on the button: .scard-btn::before and ::after are its two pulsing rings,
     so a divider borrowed from ::before inherits that animation and throbs. */
  padding:0 0 clamp(16px,1.7vw,28px);
  border-bottom:1px solid rgba(8,131,62,.13);
}
.book-trust li{display:flex;flex-direction:column;gap:clamp(7px,.7vw,11px)}
.bt-ico{
  display:grid;place-items:center;
  width:clamp(48px,4.1vw,60px);height:clamp(48px,4.1vw,60px);border-radius:50%;
  background:#DCEDD6;color:#245613;
}
.bt-ico svg{width:46%;height:46%}
.book-trust b{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(13px,1.03vw,16px);line-height:1.3;color:var(--ink);
}

/* ---- the call button ----
   A dark slab in the design rather than the pale card the other call buttons
   use, so the accent tokens are re-pointed instead of the build being rewritten. */
.book-copy .scard-btn.book-call{
  /* No --card-* overrides. Section 9 already points this button and the
     floating one at the readable accent, which is the dark green fill every
     call button on the site carries — declaring them here was what left this
     one white. */
  position:relative;
  display:inline-flex;align-items:center;width:fit-content;
  margin:clamp(16px,1.7vw,28px) 0 0;
  height:clamp(72px,6vw,88px);
  padding:0 clamp(18px,1.6vw,26px) 0 clamp(10px,.9vw,14px);
  gap:clamp(13px,1.3vw,20px);border-radius:14px;
}
.book-copy .book-call .phone-ico{
  width:clamp(48px,4.2vw,62px);height:clamp(48px,4.2vw,62px);
}
.book-copy .book-call .scb-txt em{font-size:clamp(10px,.78vw,12px);letter-spacing:.075em}
.book-copy .book-call b{font-size:clamp(21px,1.95vw,31px)}
.book-call-go{
  display:grid;place-items:center;flex:none;opacity:.5;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.book-copy .book-call:hover .book-call-go{transform:translateX(5px)}

/* ---- narrow ---- */
@media (max-width:980px){
  .book-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  /* on a phone the three already fill the measure — distributing them as well
     would open gaps the labels then have to be read across */
  .book-trust{justify-content:start;max-width:100%}
  .bf-row{grid-template-columns:minmax(0,1fr)}
  .bf-foot{flex-direction:column;align-items:stretch}
  .bf-send{justify-content:space-between;width:100%}
  /* one line: the 21ch cap is for the desktop column, where this note sits
     beside the button rather than under it */
  .bf-secure{
    max-width:none;justify-content:center;
    white-space:nowrap;font-size:clamp(10px,3.1vw,12.5px);gap:7px;
  }
  .book-trust{gap:14px 10px}
  .book-trust b{font-size:12.5px}
}

/* The colour split is also a line split in the design: "Book a Trusted" over
   "Air Quality Team". A <br> inside the first part was the old mistake — this
   only starts the accented part on its own line and still lets the first part
   wrap wherever its measure runs out. */
.book-copy h2 em{display:block}

/* the error line sits under its own field rather than nudging the next one */
.book-form .bf .mf-err{margin-top:7px}

/* ---------------------------------------------------------------------------
   15 — the inquiry section, brought back onto the site's own type and buttons.

   The supplied design sets its headings in a serif and gives the section two
   bespoke dark buttons. The layout is the client's; the typeface and the
   controls are the site's, so this section reads as part of the same website
   rather than as a page from another one.
   --------------------------------------------------------------------------- */

/* ---- type: the hero's treatment ---- */
.book-card > h2,
.book-copy h2{
  font-family:var(--font-head);font-weight:900;
  letter-spacing:-.022em;text-transform:uppercase;
}
.book-card > h2{font-size:clamp(28px,2.9vw,48px);line-height:1.04}
.book-copy h2{font-size:clamp(32px,3.4vw,54px);line-height:1.03}

/* ---- the submit button ----
   It carries .btn.btn--hero, so the face, the sheen, the lift and the arrow
   chip all come from the hero's rule. Everything here is placement. */
.bf-send{align-self:flex-start}
.bf-foot{align-items:center}

/* ---------------------------------------------------------------------------
   16 — the About and CTA bands trade grounds.

   The home page ran the inquiry card straight into the dark inquiry form: two
   asks back to back. About now sits between them, and the two take each other's
   ground so no two dark bands touch.

   .about--dark, not .about: service.php renders the same block for its overview
   section and that one stays on white. .cta needs no modifier — cta-form.php is
   included by the home page and nowhere else.
   --------------------------------------------------------------------------- */

/* ---- About, on the deep ground ---- */
.about--dark{
  --accent-ink:#6CCB4A;               /* full brightness, as on every dark band */
  position:relative;overflow:hidden;
  padding:clamp(56px,5.6vw,92px) 0;
  background:#085329;
}
/* the same glow the other dark bands carry */
.about--dark::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(78% 96% at 86% 38%, rgba(84,176,52,.92), transparent 72%),
    radial-gradient(62% 78% at 70% 92%, rgba(64,143,36,.90), transparent 74%),
    radial-gradient(70% 92% at 10% 44%, rgba(10,125,51,.95), transparent 72%),
    radial-gradient(52% 66% at 26% 96%, rgba(6,92,38,.88), transparent 74%);
  filter:blur(58px);opacity:.5;
}
.about--dark .about-grid{position:relative;z-index:1}

/* The kicker is a pale pill in the light design. Moved onto the deep ground it
   kept that pill and took the bright accent for its text — 1.26:1. The pill
   becomes a tint of the ground instead. */
.about--dark .about-copy .kicker{
  color:var(--accent-ink);
  background:rgba(108,203,74,.13);
  box-shadow:inset 0 0 0 1px rgba(108,203,74,.22);
}
.about--dark .about-copy h2{color:#fff}
.about--dark .about-copy p{color:rgba(255,255,255,.76)}
.about--dark .about-points li{color:rgba(255,255,255,.9)}
.about--dark .about-points li::before,
.about--dark .about-points li::after{border-color:var(--accent-ink);background:transparent}
.about--dark .about-call{color:#fff}
.about--dark .about-call em{color:rgba(255,255,255,.6)}
.about--dark .about-call b{color:#fff}
.about--dark .about-call-ico{background:rgba(108,203,74,.14);color:var(--accent-ink)}
.about--dark .about-call:hover .about-call-ico{background:var(--accent-ink);color:#085329}

/* ---- the inquiry band, on light ---- */
.cta{
  --accent-ink:#2C611A;               /* back to the readable lime on light */
  background:#F2F8F0;
}
/* the glow belongs to a dark ground */
.cta::before{display:none}

.cta .kicker{color:var(--accent-ink)}
.cta-copy h2{color:var(--ink)}
.cta-copy > p{color:var(--ink-body)}

.cta-phone{border-left-color:var(--h-mid)}
.cta-phone em{color:var(--ink-muted)}
.cta-phone b{color:var(--ink)}
.cta .cta-phone:hover b{color:var(--accent-ink)}

.cta-points li{
  border-top-color:rgba(8,131,62,.14);
  color:var(--ink-body);
}
.cta-points li:last-child{border-bottom-color:rgba(8,131,62,.14)}
.cta-points li::before{border-left-color:var(--h-mid);border-bottom-color:var(--h-mid)}

/* the rule-only fields keep their shape; only what was white-on-dark changes */
.cta .cf label,
.cta .cf-label{color:var(--ink-muted)}
.cta .cf-opt{color:var(--ink-muted);opacity:.8}
.cta .cf input,
.cta .cf textarea{
  color:var(--ink);
  border-bottom-color:rgba(8,131,62,.2);
}
.cta .cf input::placeholder,
.cta .cf textarea::placeholder{color:#A9BDAF}
.cta .cf input:focus,
.cta .cf textarea:focus{border-bottom-color:var(--h-mid)}
.cta .cf input.is-bad,
.cta .cf textarea.is-bad{border-bottom-color:var(--err)}
.cta .cf-err{color:var(--err)}

.cta .csel-btn{color:var(--ink);border-bottom-color:rgba(8,131,62,.2)}
.cta .csel-btn svg{color:var(--ink-muted)}
.cta .csel-btn[aria-expanded="true"]{border-bottom-color:var(--h-mid)}
.cta .csel-val.is-placeholder{color:#A9BDAF}
.cta .csel.is-bad .csel-btn{border-bottom-color:var(--err)}
.cta .csel-list{
  background:#fff;border-color:rgba(8,131,62,.12);
  box-shadow:0 26px 56px -18px rgba(7,81,33,.3);
}
.cta .csel-list li{color:var(--ink-body)}
.cta .csel-list li:hover,
.cta .csel-list li[aria-selected="true"]{background:#E9F3E5;color:var(--ink)}
.cta .csel-list li.is-chosen{color:var(--accent-ink)}
.cta .csel-list::-webkit-scrollbar-thumb{background:rgba(8,131,62,.2)}

.cta .cform-note{color:var(--ink-muted)}
.cta .cform-done h3{color:var(--ink)}
.cta .cform-done p{color:var(--ink-body)}

/* ---------------------------------------------------------------------------
   17 — the About band, to the supplied design.

   Same layout as before; what changes is the scale of the heading, the points
   becoming icon tiles, and the edge light around the photo and the badge.

   Everything stays on the site's own system: Outfit for the heading at the
   hero's weight and tracking, .btn--hero for the button, and icons drawn to the
   set the rest of the pages use — 24-unit box, 1.8 stroke, round caps, no fill.
   --------------------------------------------------------------------------- */
.about--dark{padding:clamp(60px,6vw,110px) 0}
.about--dark .about-grid{
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(36px,4.4vw,78px);
  align-items:center;
}

/* ---- the kicker, with the live dot the design leads it with ---- */
.about--dark .about-copy .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:999px;
  font-size:clamp(11px,.86vw,13px);letter-spacing:.1em;
}
.kicker-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--accent-ink);
  box-shadow:0 0 0 4px rgba(108,203,74,.16);
}

/* ---- the heading ---- */
.about--dark .about-copy h2{
  margin-top:clamp(16px,1.5vw,24px);
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(30px,3.5vw,56px);line-height:1.04;letter-spacing:-.022em;
}
.about--dark .about-copy h2 em{font-style:normal;color:var(--accent-ink)}

.about--dark .about-copy p{
  max-width:60ch;
  font-size:clamp(14.5px,1.07vw,17px);line-height:1.65;
}

/* ---- the points, as tiles ----
   The inherited rule draws its tick with ::before and ::after on the <li>. Both
   are cleared here rather than restyled: the mark is an icon in a tile now, and
   a leftover pseudo-tick would sit behind it. */
.about-points--tiles{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,1.5vw,24px) clamp(20px,2.4vw,42px);
  margin:clamp(24px,2.6vw,40px) 0 clamp(26px,2.8vw,42px);
}
.about-points--tiles li{
  display:flex;align-items:center;gap:clamp(11px,1.1vw,17px);
  padding:0;
  font-size:clamp(13.5px,1.02vw,16.5px);line-height:1.35;font-weight:600;
}
.about-points--tiles li::before,
.about-points--tiles li::after{display:none}
/* the rule the design draws between the two columns */
.about-points--tiles li:nth-child(odd){
  padding-right:clamp(16px,1.8vw,30px);
  border-right:1px solid rgba(108,203,74,.16);
}
.ap-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(40px,3.2vw,48px);height:clamp(40px,3.2vw,48px);
  border-radius:13px;
  background:rgba(108,203,74,.1);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px rgba(108,203,74,.2);
}
.ap-ico svg{width:50%;height:50%}

/* ---- the actions ---- */
.about--dark .about-cta{gap:clamp(20px,2.3vw,38px)}
.about--dark .about-call-ico{
  width:clamp(46px,3.6vw,56px);height:clamp(46px,3.6vw,56px);
  background:rgba(108,203,74,.12);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px rgba(108,203,74,.22);
}
.about--dark .about-call em{
  font-size:clamp(10.5px,.8vw,12.5px);letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:3px;
}
.about--dark .about-call b{
  font-size:clamp(20px,1.8vw,28px);color:#fff;
}

/* ---- the photograph, with the edge light the design gives it ---- */
.about--dark .about-visual img{
  border-radius:clamp(16px,1.4vw,22px);
  box-shadow:0 0 0 1px rgba(108,203,74,.26),
             0 0 46px -6px rgba(81,170,50,.3),
             0 34px 70px -28px rgba(0,0,0,.7);
}

/* ---- the badge ---- */
.about--dark .about-badge{
  left:clamp(-20px,-1.6vw,-10px);bottom:clamp(-18px,-1.5vw,-10px);
  gap:clamp(14px,1.3vw,20px);
  padding:clamp(14px,1.3vw,20px) clamp(18px,1.8vw,26px);
  border-radius:14px;
  background:rgba(9,80,33,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(108,203,74,.3),
             0 0 34px -8px rgba(81,170,50,.35),
             0 22px 46px -18px rgba(0,0,0,.7);
}
.about--dark .about-badge b{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(30px,2.6vw,42px);letter-spacing:-.03em;
  /* the rule between the numeral and the words */
  padding-right:clamp(14px,1.3vw,20px);
  border-right:1px solid rgba(108,203,74,.28);
}
.about--dark .about-badge span{
  font-size:clamp(12px,.95vw,14.5px);line-height:1.35;color:rgba(255,255,255,.86);
}

@media (max-width:980px){
  .about--dark .about-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .about-points--tiles{grid-template-columns:minmax(0,1fr)}
  /* one column, so there is nothing to rule off */
  .about-points--tiles li:nth-child(odd){padding-right:0;border-right:0}
}

/* ---------------------------------------------------------------------------
   18 — the inquiry band, to the supplied design.

   Copy on the left, the form lifted onto a white card on the right. The fields
   were rule-only lines drawn for a dark ground; on a card they become boxed
   inputs with the same leading icons the estimate card uses.

   Section 16 recoloured this band for light. What is left of it below is only
   what this rebuild does not restate.
   --------------------------------------------------------------------------- */
.cta{padding:clamp(54px,5.4vw,96px) 0}
.cta-grid{
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(34px,4.2vw,76px);
  align-items:center;
}

/* ---- the kicker, as a pill with the calendar in front ---- */
.cta .kicker{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 13px;border-radius:999px;
  background:#DCEDD6;color:#245613;
  font-size:clamp(11px,.86vw,12.5px);letter-spacing:.07em;
}
.cta .kicker svg{flex:none}

/* ---- the heading, the hero's treatment with the accent phrase ---- */
.cta-copy h2{
  margin-top:clamp(14px,1.4vw,22px);
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(30px,3.4vw,54px);line-height:1.05;letter-spacing:-.022em;
}
.cta-copy h2 em{font-style:normal;color:var(--h-mid)}
.cta-copy > p{
  margin-top:clamp(12px,1.2vw,20px);max-width:44ch;
  font-size:clamp(14.5px,1.07vw,17px);line-height:1.62;
}

/* ---- the call row ---- */
.cta-talk{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,1.8vw,30px);
  margin-top:clamp(20px,2.2vw,36px);
}
/* the inherited build is a rule down the left of a stacked label and number */
.cta .cta-phone{
  display:inline-flex;align-items:center;gap:clamp(12px,1.2vw,18px);
  margin:0;padding:0;border-left:0;
}
.cta-phone-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(46px,3.7vw,58px);height:clamp(46px,3.7vw,58px);border-radius:50%;
  background:var(--red);color:#fff;
  box-shadow:0 0 0 5px rgba(84,176,52,.22);
  transition:transform .22s ease;
}
.cta-phone:hover .cta-phone-ico{transform:translateY(-2px)}
.cta-phone-ico svg{width:44%;height:44%}
.cta-phone-ico svg path{fill:currentColor}
.cta .cta-phone em{
  font-size:clamp(10.5px,.8vw,12.5px);letter-spacing:.11em;
  color:var(--ink-muted);margin-bottom:3px;
}
.cta .cta-phone b{font-size:clamp(21px,1.9vw,30px);color:var(--ink)}

/* the aside the design draws beside the number */
.cta-aside{
  display:inline-flex;align-items:center;gap:10px;
  padding-left:clamp(14px,1.6vw,26px);
  border-left:1px solid rgba(8,131,62,.14);
  color:var(--h-mid);
}
.cta-aside-arrow{width:clamp(38px,3.2vw,52px);height:auto;flex:none;opacity:.85}
.cta-aside i{
  font-style:italic;font-weight:700;
  font-size:clamp(13px,1.02vw,16px);line-height:1.25;
}

/* ---- the three facts ---- */
.cta-points{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px);
  margin-top:clamp(22px,2.4vw,40px);
}
.cta-points li{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0 clamp(8px,1vw,16px);
  border:0;text-align:center;
}
.cta-points li + li{border-left:1px solid rgba(8,131,62,.13)}
.cta-points li:last-child{border-bottom:0}
.cta-points li::before{display:none}
.cp-ico{
  display:grid;place-items:center;
  width:clamp(42px,3.4vw,52px);height:clamp(42px,3.4vw,52px);border-radius:50%;
  background:#DCEDD6;color:#245613;margin-bottom:3px;
}
.cp-ico svg{width:46%;height:46%}
.cta-points b{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(13px,1.03vw,16px);line-height:1.25;color:var(--ink);
}
.cta-points li > span:last-child{
  font-size:clamp(12px,.95vw,14.5px);line-height:1.35;color:var(--ink-muted);
}

/* phone only - see the 620px block */
.cta-mini{display:none}

/* ---- the form, on a card ---- */
.cta-form-wrap{
  background:#fff;border-radius:clamp(20px,1.7vw,30px);
  padding:clamp(24px,2.4vw,42px);
  box-shadow:0 34px 76px -26px rgba(7,81,33,.2), 0 2px 6px rgba(7,81,33,.05);
}
.cform-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:clamp(18px,2vw,30px);
}
.cform-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 13px;border-radius:999px;
  background:#DCEDD6;color:#245613;
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(10.5px,.82vw,12.5px);letter-spacing:.07em;text-transform:uppercase;
}
.cform-pill svg{flex:none}
.cform-secure{
  display:flex;align-items:center;gap:9px;margin:0;
  font-size:clamp(11.5px,.88vw,13.5px);line-height:1.35;color:var(--ink-muted);
}
.cform-secure svg{flex:none;color:var(--h-mid)}

.cform{gap:clamp(14px,1.4vw,22px)}
.cform-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.3vw,22px)}

/* label above the box, as the design has it */
.cta .cf label,
.cta .cf-label{
  display:block;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(11px,.84vw,12.5px);letter-spacing:.055em;text-transform:uppercase;
  color:#567560;margin-bottom:8px;
}
.cta .cf label i,
.cta .cf-label i{font-style:normal;color:var(--accent-ink)}
.cta .cf-opt{
  text-transform:none;letter-spacing:.01em;font-weight:500;
  color:var(--ink-muted);margin-left:5px;
}

/* the box the input sits in */
.cf-box{
  position:relative;display:block;
  --cf-h:clamp(50px,3.9vw,58px);
}
.cf-ico{
  position:absolute;left:16px;top:0;height:var(--cf-h);
  display:grid;place-items:center;z-index:2;
  color:#9FB8A5;pointer-events:none;
}
.cf-ico svg{width:19px;height:19px;display:block}
.cta .cf input,
.cta .cf textarea{
  width:100%;height:var(--cf-h);
  padding:0 16px 0 47px;
  font-family:var(--font-body);font-size:15.5px;color:var(--ink);
  background:#fff;border:1.5px solid #E6EDE3;border-radius:12px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.cta .cf textarea{
  height:auto;min-height:clamp(88px,8vw,112px);
  padding:15px 16px 15px 47px;line-height:1.55;resize:vertical;
}
.cf--area .cf-ico{height:auto;top:18px;align-items:flex-start}
.cta .cf input::placeholder,
.cta .cf textarea::placeholder{color:#A9BDAF}
.cta .cf input:focus,
.cta .cf textarea:focus{
  outline:none;border-color:var(--h-mid);box-shadow:0 0 0 4px rgba(68,162,34,.12);
}
.cta .cf input.is-bad,
.cta .cf textarea.is-bad{border-color:var(--err);box-shadow:0 0 0 4px rgba(217,45,32,.1)}
.cta .cf-err{margin-top:7px}

/* the listbox button wears the same box */
.cta .csel-btn{
  position:relative;
  width:100%;height:clamp(50px,3.9vw,58px);
  padding:0 44px 0 47px;justify-content:flex-start;
  background:#fff;border:1.5px solid #E6EDE3;border-radius:12px;
  font-size:15.5px;color:var(--ink);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.cta .csel{--cf-h:clamp(50px,3.9vw,58px)}
.cta .csel-btn[aria-expanded="true"]{
  border-color:var(--h-mid);box-shadow:0 0 0 4px rgba(68,162,34,.12);
}
.cta .csel.is-bad .csel-btn{border-color:var(--err);box-shadow:0 0 0 4px rgba(217,45,32,.1)}
.csel-caret{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:#56705E;transition:transform .24s ease;
}
.cta .csel-btn[aria-expanded="true"] .csel-caret{transform:translateY(-50%) rotate(180deg)}
.cta .csel-list{border-radius:14px;padding:8px}

/* ---- the send ---- */
.cta .cform-send{
  width:100%;justify-content:center;gap:clamp(12px,1.2vw,20px);
  height:clamp(56px,4.6vw,70px);margin-top:4px;
}
.cta .cform-note{margin-top:14px}

@media (max-width:1040px){
  .cta-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .cform-head{flex-direction:column;gap:12px}
  .cform-row{grid-template-columns:minmax(0,1fr)}
  .cta-points{grid-template-columns:minmax(0,1fr)}
  .cta-points li{
    flex-direction:row;align-items:center;gap:13px;
    text-align:left;padding:0;
  }
  .cta-points li + li{border-left:0;border-top:1px solid rgba(8,131,62,.13);padding-top:14px}
  /* the <br> stays: hiding it ran "anything" into "is quoted", because a line
     break carries no space of its own once it stops breaking the line */
  .cp-ico{margin-bottom:0}
  .cta-points b{flex:none}
}

/* ---------------------------------------------------------------------------
   19 — the service cards, to the supplied design.

   A white card, the photograph cut off by a curved edge with an accent rim, a
   numeral on the photograph, the service's own mark sitting on the join, and
   Learn More in place of the phone number.

   The inclusion cards on a service page carry .scard too, so everything here is
   written to work for a card with no numeral, no kicker and no Learn More —
   they get the same chrome and keep their own footer.
   --------------------------------------------------------------------------- */
.services-grid .scard,
.scard{
  --card-bg:#fff;
  --card-ink:#1f5c32;
  --card-accent:var(--h-mid);
  --card-line:rgba(8,131,62,.1);
  --card-ico-bg:#296839;
  --card-ico:#6CCB4A;
  border-radius:20px;
  box-shadow:0 1px 2px rgba(8,131,62,.05), 0 20px 44px -26px rgba(8,131,62,.3);
}
/* the alternating tint is gone; the pairs keep a different accent so the row
   still has the rhythm the old one had */
.services-grid .scard:nth-child(2),.services-grid .scard:nth-child(4),
.services-grid .scard:nth-child(5),.services-grid .scard:nth-child(7){
  --card-bg:#fff;
  --card-ink:#1f5c32;
  --card-accent:#54B034;
  --card-line:rgba(8,131,62,.1);
  --card-ico-bg:#296839;
  --card-ico:#6CCB4A;
}
.scard:hover{transform:translateY(-6px);box-shadow:0 34px 64px -28px rgba(8,131,62,.38)}

/* ---- the photograph ---- */
.scard-media{
  position:relative;aspect-ratio:16/10;
  /* The clip moves onto the <picture>, so the photograph is still cropped and
     still scales on hover, but the two domes below are NOT clipped by the
     media box. While they were, the white one could only overlap the media's
     straight bottom edge by 1px — and :hover puts a transform on the card,
     which re-snaps that edge and leaves the 1px showing as a hairline right
     across the card. */
  overflow:visible;
}
.scard-media picture{
  display:block;height:100%;overflow:hidden;
  border-radius:20px 20px 0 0;
}
/* The curve. Two domes: the accent one sits a few pixels higher than the white
   one, so what shows between them is a rim following the same arc rather than a
   second shape that has to be kept in step. */
.scard-media::before,
.scard-media::after{
  content:"";position:absolute;z-index:2;
  left:-12%;right:-12%;height:46px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  pointer-events:none;
}
.scard-media::before{
  bottom:1px;
  background:linear-gradient(90deg,#5AB63A 0%,#91D57A 55%,#BAE5AB 100%);
}
/* eight pixels into the body, not one: there is no edge left to expose */
.scard-media::after{bottom:-8px;background:var(--card-bg)}

/* ---- the body ---- */
.scard-body{padding:0 22px 22px;position:relative;z-index:3}

/* The mark sits on the join between the photograph and the card. Pulled up by
   half its height, so the curve passes behind it. */
/* The tile is the one the Why cards use — .why-node, copied declaration for
   declaration: a 52px rounded SQUARE, a 32px glyph, and the glyph always white.
   What varies from card to card is the background behind it, not the glyph. */
.services-grid:not(.services-grid--sub) .scard:nth-child(4n+1){--card-ico-bg:#296839;--card-shadow:rgba(8,131,62,.32)}
.services-grid:not(.services-grid--sub) .scard:nth-child(4n+2){--card-ico-bg:#2C611A;--card-shadow:rgba(62,137,37,.34)}
.services-grid:not(.services-grid--sub) .scard:nth-child(4n+3){--card-ico-bg:#349611;--card-shadow:rgba(47,136,15,.34)}
.services-grid:not(.services-grid--sub) .scard:nth-child(4n+4){--card-ico-bg:#245613;--card-shadow:rgba(53,128,28,.34)}

.scard-ico{
  flex:none;width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  /* The dome dips at the card's edges, which is exactly where this tile sits —
     pulled up by half its height it ended just under the curve with nothing
     between them. It clears the curve instead. */
  margin:-13px 0 14px;
  background:var(--card-ico-bg);color:#fff;
  box-shadow:0 8px 20px var(--card-shadow,rgba(8,131,62,.3));
}
/* 32px, as on the Why cards — a 24px glyph in a 52px tile is what made these
   read as small. overflow:visible so a moving part is never clipped. */
.scard-ico svg{width:32px;height:32px;overflow:visible}

/* the design goes straight from the mark to the title */
.services-grid:not(.services-grid--sub) .scard-kicker{display:none}
.scard h3{font-size:clamp(18px,1.4vw,22px);line-height:1.2}
.scard-body > p{margin:9px 0 15px;font-size:13.8px;line-height:1.6}

/* ---- the ticks: no rules between them in this design ---- */
.scard-ticks{gap:9px;margin-bottom:18px}
.scard-ticks li{border-top:0;padding:0;gap:10px;font-size:13.4px}
.scard-ticks li:first-child{padding-top:0}
/* filled disc, white mark — the inherited tick is a hairline ring */
.scard-ticks .tick{width:19px;height:19px;flex:none}
.scard-ticks .tick svg{width:19px;height:19px}
.scard-ticks .tick svg circle{fill:#54b732;stroke:none}
.scard-ticks .tick svg path{stroke:#fff;stroke-width:2.6;stroke-dasharray:none;stroke-dashoffset:0;opacity:1}

/* ---- Learn More ---- */

/* the inclusion cards keep the phone footer; it only needs the new spacing */
.services-grid--sub .scard-btn{margin-top:auto}

@media (prefers-reduced-motion:reduce){
  .scard-more,.scard-go{transition:none}
  .scard-more:hover{transform:none}
  .scard-more:hover .scard-go{transform:none}
}

@media (max-width:1280px){
  .scard-media::before,.scard-media::after{height:34px}
}

/* ---------------------------------------------------------------------------
   20 — the service icons: one behaviour each, written per service.

   The shared library in style.css slides a single group marked .m, which is
   right for a one-idea glyph and not enough for these — each of these acts out
   a sequence with two or three parts on their own clocks.

   Every glyph is built the same way: one object you can read at 32px, then
   .p1 / .p2 / .p3 for the parts that move. Durations are deliberately uneven so
   eight of them in a row never tick together.
   --------------------------------------------------------------------------- */
.scard-ico svg [class^="p"]{transform-box:fill-box;transform-origin:center}

/* ---- 01 · cleaning: the brush driven through, dust leaving the open end ---- */
.svcico--clean .p1{
  transform-box:view-box;transform-origin:center;
  animation:sv-brush 3.4s cubic-bezier(.45,0,.55,1) infinite;
}
.svcico--clean .p2{animation:sv-dust 3.4s ease-out infinite}
@keyframes sv-brush{
  0%,8%   {transform:translateX(5.4px)}
  52%,60% {transform:translateX(-5.6px)}
  100%    {transform:translateX(5.4px)}
}
@keyframes sv-dust{
  0%,30%  {transform:translate(0,0);opacity:0}
  46%     {opacity:1}
  78%,100%{transform:translate(-3px,-3.4px);opacity:0}
}

/* ---- 02 · repair: the sections drawn together, the bolt turning ---- */
.svcico--repair .p1{
  transform-box:view-box;transform-origin:center;
  animation:sv-join-l 3.6s cubic-bezier(.34,1.3,.64,1) infinite;
}
.svcico--repair .p3{
  transform-box:view-box;transform-origin:center;
  animation:sv-join-r 3.6s cubic-bezier(.34,1.3,.64,1) infinite;
}
.svcico--repair .p2{animation:sv-bolt 3.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes sv-join-l{
  0%,10%  {transform:translateX(-1.1px)}
  46%,100%{transform:translateX(0)}
}
@keyframes sv-join-r{
  0%,10%  {transform:translateX(1.1px)}
  46%,100%{transform:translateX(0)}
}
@keyframes sv-bolt{
  0%,46% {transform:rotate(0)}
  82%,100%{transform:rotate(180deg)}
}

/* ---- 03 · inspection: the head passes, growth shows under it ---- */
.svcico--inspect .p1{
  transform-box:view-box;transform-origin:center;
  animation:sv-scan 4s ease-in-out infinite;
}
.svcico--inspect .p2{animation:sv-reveal 4s ease-in-out infinite}
@keyframes sv-scan{
  0%,100%{transform:translate(3.2px,2.2px)}
  50%    {transform:translate(-4.4px,-1.6px)}
}
@keyframes sv-reveal{
  0%,12% {opacity:0}
  48%,70%{opacity:1}
  92%,100%{opacity:0}
}

/* ---- 04 · dryer: the drum turns, lint is carried out ---- */
.svcico--dryer .p1{animation:sv-drum 4.2s linear infinite}
.svcico--dryer .p2{animation:sv-lint 2.9s ease-out infinite}
@keyframes sv-drum{to{transform:rotate(360deg)}}
@keyframes sv-lint{
  0%,14%  {transform:translate(-2px,0);opacity:0}
  40%     {opacity:1}
  86%,100%{transform:translate(1.9px,-2.6px);opacity:0}
}

/* ---- 05 · AC: the condenser fan ---- */
.svcico--ac .p1{animation:sv-fan 3.1s linear infinite}
@keyframes sv-fan{to{transform:rotate(360deg)}}

/* ---- 06 · attic: the bays filling from the floor up ---- */
.svcico--attic .p1{animation:sv-fill 3.8s ease-in-out infinite}
.svcico--attic .p2{animation:sv-fill 3.8s ease-in-out .42s infinite}
@keyframes sv-fill{
  0%,6%   {opacity:0;transform:translateY(2.4px)}
  34%,74% {opacity:1;transform:translateY(0)}
  94%,100%{opacity:0;transform:translateY(2.4px)}
}

/* ---- 07 · sanitation: the treatment carrying across onto the coil ---- */
.svcico--sanitation .p1{animation:sv-spray 2.7s ease-out infinite}
.svcico--sanitation .p2{animation:sv-spray 2.7s ease-out .18s infinite}
.svcico--sanitation .p3{animation:sv-spray 2.7s ease-out .36s infinite}
@keyframes sv-spray{
  0%     {transform:translate(3.4px,3px);opacity:0}
  22%    {opacity:1}
  68%,100%{transform:translate(-3.4px,-1.2px);opacity:0}
}

/* ---- 08 · sanitizing: the fog leaving the register and carrying down ---- */
.svcico--sanitize .p1{animation:sv-fog 3.2s ease-out infinite}
.svcico--sanitize .p2{animation:sv-fog 3.2s ease-out .3s infinite}
.svcico--sanitize .p3{animation:sv-fog 3.2s ease-out .6s infinite}
@keyframes sv-fog{
  0%     {opacity:0;transform:translateX(-2px) scaleX(.6)}
  30%    {opacity:1}
  76%,100%{opacity:0;transform:translateX(1.4px) scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  .scard-ico svg [class^="p"]{animation:none!important;opacity:1;transform:none}
}

/* ---------------------------------------------------------------------------
   21 — the card tick marks.

   The shared sheet fades the ring to 50% and re-draws the mark on hover, which
   on these cards reads as the list dimming as you reach for it. One colour,
   and it stays put.
   --------------------------------------------------------------------------- */
.services-grid .scard-ticks .tick svg circle,
.services-grid .scard:hover .tick svg circle{fill:#54B034;stroke:none;opacity:1}
.services-grid .scard-ticks .tick svg path,
.services-grid .scard:hover .tick svg path{
  stroke:#1f5c32;stroke-width:2.8;
  stroke-dasharray:none;stroke-dashoffset:0;opacity:1;
  animation:none;
}

/* ---------------------------------------------------------------------------
   22 - the card's two actions, connected by the "or".

   The two halves butt together and a white disc straddles the seam. The disc
   carries negative margins of half its own width, so it takes no space in the
   row and the two buttons stay touching behind it.
   --------------------------------------------------------------------------- */
.scard-act{
  display:inline-flex;align-items:center;
  align-self:flex-start;max-width:100%;margin-top:auto;
  filter:drop-shadow(0 10px 20px rgba(35,106,11,.3));
}

.scard-more,
.scard-call{
  display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 15px;
  font-family:var(--font-head);font-weight:800;font-size:12.5px;
  white-space:nowrap;
  transition:filter .24s ease;
}

.scard-more{
  /* The disc is 34px wide plus a 3px ring, so it reaches 20px into each side.
     The inner padding has to clear that before the chip starts. */
  border-radius:999px 0 0 999px;padding-left:17px;padding-right:31px;
  background:linear-gradient(103deg,#419124 0%,#2c7913 78%,#256a0f 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.scard-more .scard-go{background:#54B034;color:#22650c}

.scard-call{
  border-radius:0 999px 999px 0;padding-left:31px;padding-right:17px;
  background:linear-gradient(103deg,#67C746 0%,#54B034 60%,#4FAB2F 100%);
  color:#1f5c32;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.scard-call .scard-go{background:#296f18;color:#6CCB4A}

.scard-more:hover,
.scard-call:hover{filter:brightness(1.08)}

/* the disc on the seam */
.scard-or{
  position:relative;z-index:2;flex:none;
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  margin:0 -17px;
  background:#fff;color:#2c7913;
  box-shadow:0 0 0 3px #fff, 0 2px 6px rgba(8,131,62,.22);
  font-family:var(--font-head);font-weight:800;
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
}

.scard-go{
  display:grid;place-items:center;flex:none;
  width:21px;height:21px;border-radius:50%;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.scard-go--call svg path{fill:currentColor}
.scard-more:hover .scard-go{transform:translateX(3px)}
.scard-call:hover .scard-go{transform:scale(1.1)}

@media (prefers-reduced-motion:reduce){
  .scard-go{transition:none}
  .scard-more:hover .scard-go,.scard-call:hover .scard-go{transform:none}
}

/* The blurbs are written to two lines, and clamped to two as well — a width
   this grid has not been checked at must not be able to make one card taller
   than the seven beside it. */
.services-grid:not(.services-grid--sub) .scard-body > p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2;overflow:hidden;
  min-height:calc(2 * 1.6em);
}

/* ---------------------------------------------------------------------------
   23 - the call band, to the supplied design.

   Copy left, a technician right, and the photograph masked into the ground so
   it merges rather than sitting in a box. The mask is on the image itself, not
   an overlay: an overlay would have to match the band's gradient at every
   width, and a mask does not care what is behind it.
   --------------------------------------------------------------------------- */
.ctab{
  position:relative;overflow:hidden;
  padding:clamp(46px,4.6vw,86px) 0;
}
.ctab-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3vw,56px);align-items:center;
  text-align:left;
}

/* ---- the copy ---- */
.ctab-copy{max-width:none}
.ctab-pill{margin:0}
.ctab-copy h2{
  margin:clamp(14px,1.5vw,24px) 0 0;
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(28px,3.4vw,56px);line-height:1.05;letter-spacing:-.024em;
  text-transform:uppercase;color:#fff;
}
/* the accent phrase, with the rule the design draws under it */
.ctab-copy h2 em{
  font-style:normal;color:#6CCB4A;
  background-image:linear-gradient(90deg,#6CCB4A,rgba(108,203,74,0));
  background-repeat:no-repeat;
  background-size:100% 4px;background-position:0 100%;
  padding-bottom:7px;
}
.ctab-copy > p{
  margin:clamp(12px,1.3vw,22px) 0 0;max-width:52ch;
  font-size:clamp(14.5px,1.07vw,17px);line-height:1.6;
  color:rgba(255,255,255,.78);
}

/* ---- the three facts ---- */
.ctab-trust{
  display:grid;grid-template-columns:repeat(3,max-content);
  justify-content:start;
  gap:clamp(16px,1.8vw,30px);
  margin:clamp(20px,2.2vw,36px) 0 0;padding:0;list-style:none;
}
.ctab-trust li{
  display:flex;align-items:center;gap:clamp(9px,1vw,14px);
  padding-right:clamp(16px,1.8vw,30px);
  border-right:1px solid rgba(108,203,74,.22);
}
.ctab-trust li:last-child{padding-right:0;border-right:0}
.ctt-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(38px,3vw,46px);height:clamp(38px,3vw,46px);border-radius:14px;
  background:rgba(108,203,74,.12);color:#6CCB4A;
  box-shadow:inset 0 0 0 1px rgba(108,203,74,.24);
}
.ctt-ico svg{width:52%;height:52%}
.ctab-trust b{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(12.5px,.98vw,15px);line-height:1.25;color:#fff;
}

/* ---- the two actions ---- */
.ctab-bar{
  display:inline-flex;align-items:stretch;
  margin-top:clamp(20px,2.3vw,38px);max-width:100%;
  border-radius:999px;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.6);
}
.ctab-call,
.ctab-book{
  display:inline-flex;align-items:center;gap:clamp(10px,1vw,15px);
  height:clamp(58px,4.8vw,74px);
  border:0;cursor:pointer;
  transition:filter .24s ease;
}
.ctab-call{
  border-radius:999px 0 0 999px;
  padding:0 clamp(20px,1.8vw,30px) 0 clamp(10px,.9vw,14px);
  background:linear-gradient(103deg,#67C746 0%,#54B034 60%,#4FAB2F 100%);
}
/* The dark half. The shared sheet paints it var(--navy) and hovers it to
   #0A164C - that blue is from the design this site was built on, and it is
   still the hover unless it is overridden here as well as the resting fill. */
.ctab-book,
.ctab-book:hover{
  border-radius:0 999px 999px 0;
  padding:0 clamp(18px,1.6vw,26px) 0 clamp(14px,1.3vw,20px);
  background:linear-gradient(103deg,#2c7913 0%,#20690e 70%,#1b5d0d 100%);
}
.ctab-call:hover,.ctab-book:hover{filter:brightness(1.1)}

/* the call half sits on lime, the estimate half on the deep green */
.ctab .ctab-call .phone-ico{
  width:clamp(40px,3.3vw,50px);height:clamp(40px,3.3vw,50px);
  background:#296f18;color:#6CCB4A;
}
.ctab .ctab-call .phone-ico svg path{fill:currentColor}
.ctab .ctab-call .ctab-txt em{color:rgba(27,80,44,.72)}
.ctab .ctab-call .ctab-txt b{color:#1f5c32}

.ctab-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(40px,3.3vw,50px);height:clamp(40px,3.3vw,50px);border-radius:50%;
  background:#E4EFE0;color:#29740c;
}
.ctab-ico svg{width:50%;height:50%}
.ctab .ctab-book .ctab-txt em{color:rgba(255,255,255,.62)}
.ctab .ctab-book .ctab-txt b{color:#fff}
.ctab-go{flex:none;color:#6CCB4A}

.ctab-txt{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.ctab-txt em{
  font-style:normal;font-family:var(--font-head);font-weight:800;
  font-size:clamp(9.5px,.76vw,11.5px);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:2px;
}
.ctab-txt b{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(17px,1.5vw,24px);letter-spacing:-.018em;line-height:1.1;
}

/* ---- the photograph ---- */
.ctab-visual{position:relative;align-self:stretch;min-height:clamp(260px,26vw,440px)}

/* Above the stack breakpoint the photograph leaves the grid and is pinned to
   the SECTION instead. Inside a grid cell it could only ever be as wide as the
   shell's right-hand column, which is why it filled the band on a very wide
   window and sat as a panel with a hard edge on a narrower one. Pinned to the
   section it reaches the viewport edge at every width. */
@media (min-width:1041px){
  .ctab-grid{grid-template-columns:minmax(0,min(58%,760px))}
  .ctab-visual{
    position:absolute;z-index:0;
    top:0;right:0;bottom:0;left:auto;
    width:62%;
    margin:0;
  }
}
.ctab-photo{display:block;position:absolute;inset:0}
.ctab-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:clamp(16px,1.4vw,22px);
  /* dissolved into the band on the left and along the top and bottom, so the
     technician reads as part of the ground rather than as a pasted-in panel */
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 16%,#000 46%),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 16%,#000 46%),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* ---- the three outcomes floating over it ---- */
.ctab-tag{
  position:absolute;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:14px;
  background:rgba(24,77,28,.42);
  -webkit-backdrop-filter:blur(13px) saturate(1.3);backdrop-filter:blur(13px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 10px 26px -12px rgba(0,0,0,.6);
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(9.5px,.78vw,11.5px);letter-spacing:.08em;text-transform:uppercase;
  line-height:1.25;color:#fff;
}
.ctab-tag svg{flex:none;color:#6CCB4A}
.ctab-tag--1{left:4%;top:18%}
.ctab-tag--2{left:10%;top:42%}
.ctab-tag--3{right:2%;top:30%}

@media (max-width:1040px){
  .ctab-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  /* in flow above the copy, since it is no longer a grid item */
  .ctab-visual{position:relative;min-height:230px;margin-bottom:26px}
  /* Once the photograph is the first thing in the section it starts at the
     section's own top edge, so the band's top padding comes off - otherwise
     the dark ground reads as a bar above the picture. The mask is opaque at
     the top here, so nothing of the band shows through, and the corner radius
     goes with it: a rounded corner against the section edge is a notch. */
  .ctab{padding-top:0}
  .ctab-photo img{
    border-radius:0;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  }
  .ctab-tag--2{display:none}
}
@media (max-width:680px){
  .ctab-trust{grid-template-columns:minmax(0,1fr);gap:12px}
  .ctab-trust li{padding-right:0;border-right:0}
  /* the <br> stays: hiding it runs "Honest" into "Advice", because a line
     break carries no space of its own once it stops breaking the line */
  /* Sized to the wider of the two rows rather than to the column. The width
     has to be stated: the shared sheet sets .ctab-bar{width:100%} under 760px,
     which this block overrides on order but cannot undo by saying nothing.
     align-items:stretch is what then makes the narrower row match the wider
     one, so the two read as one control. */
  .ctab-bar{
    flex-direction:column;align-items:stretch;border-radius:22px;
    width:max-content;max-width:100%;
  }
  .ctab-call{border-radius:22px 22px 0 0;padding:0 20px 0 12px}
  /* :hover is carried here because the resting rule up the sheet is written
     as `.ctab-book,.ctab-book:hover` to beat the shared sheet's blue. That
     makes its pill radius a two-class selector, so on hover it outranked a
     plain .ctab-book here and the stacked row's right side rounded back into
     a half-circle under the pointer. */
  .ctab-book,
  .ctab-book:hover{border-radius:0 0 22px 22px;padding:0 20px 0 12px}
  /* Both halves carry justify-content:center from the shared sheet. Side by
     side that is right; stacked it centres each row against its own content,
     so the two discs land 14px apart and the rows read as misaligned even
     though they are the same length. Started from the left instead, with the
     arrow held out to the right edge where the design has it. */
  .ctab .ctab-call,
  .ctab .ctab-book{justify-content:flex-start}
  .ctab .ctab-book .ctab-go{margin-left:auto}
  .ctab-tag--3{display:none}
}

/* The action pair at four columns.

   A 1280 window gives a 251px card body and the pair measures 290 at full size,
   so below 1400 the Learn More chip goes - it is decoration, where the phone
   chip carries meaning - and both halves tighten. */
@media (max-width:1400px){
  .scard-more .scard-go{display:none}
  .scard-more,.scard-call{font-size:12px;gap:7px;height:42px}
  .scard-more{padding-left:15px;padding-right:27px}
  .scard-call{padding-left:27px;padding-right:15px}
  .scard-or{width:30px;height:30px;margin:0 -15px;font-size:11.5px}
}

/* ---------------------------------------------------------------------------
   24 - the closing call, to the supplied design.

   The client's artwork is the ground. It is an <img> rather than a CSS
   background so the browser can pick webp over jpeg, and the band's own glow
   layer is switched off - the artwork already carries one.
   --------------------------------------------------------------------------- */
.final{
  position:relative;overflow:hidden;
  padding:clamp(54px,5.4vw,100px) 0;
  background:#125c21;
  text-align:center;
}
.final::before{display:none}            /* the inherited radial glow */

.final-bg{position:absolute;inset:0;z-index:0;display:block}
.final-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* the artwork runs light at the right; this keeps the copy on a ground it can
   be read against without flattening the picture */
.final-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(62% 72% at 50% 46%, rgba(10,73,26,.62), transparent 74%),
    linear-gradient(180deg, rgba(10,73,26,.42), rgba(10,73,26,.2) 40%, rgba(10,73,26,.52));
}
.final-inner{position:relative;z-index:1;max-width:980px}

.final-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 20px;border-radius:999px;
  background:rgba(17,80,30,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(108,203,74,.26);
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(10.5px,.84vw,12.5px);letter-spacing:.11em;text-transform:uppercase;
  color:#fff;
}

.final h2{
  margin:clamp(16px,1.7vw,28px) 0 0;
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(30px,4vw,64px);line-height:1.04;letter-spacing:-.026em;
  color:#fff;
}
.final h2 em{font-style:normal;color:#6CCB4A}
.final-inner > p{
  margin:clamp(12px,1.3vw,22px) auto 0;max-width:58ch;
  font-size:clamp(14.5px,1.07vw,17px);line-height:1.6;
  color:rgba(255,255,255,.8);
}

.final-actions{display:flex;justify-content:center;margin-top:clamp(24px,2.6vw,44px)}

/* ---- the two actions, joined by the disc ---- */
.final-bar{
  display:inline-flex;align-items:stretch;max-width:100%;
  border-radius:999px;
  box-shadow:0 24px 54px -22px rgba(0,0,0,.72);
}
.final-bar .ctab-call{padding-right:clamp(30px,2.8vw,44px)}
.final-bar .ctab-book{padding-left:clamp(30px,2.8vw,44px)}
.final-go{
  display:grid;place-items:center;flex:none;
  width:clamp(32px,2.7vw,40px);height:clamp(32px,2.7vw,40px);border-radius:50%;
  background:#54B034;color:#22650c;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.ctab-book:hover .final-go{transform:translateX(3px)}

/* ---- the three facts ---- */
.final-trust{
  display:grid;grid-template-columns:repeat(3,max-content);
  justify-content:center;
  gap:clamp(18px,2.2vw,42px);
  margin:clamp(24px,2.6vw,44px) auto 0;padding:0;list-style:none;
}
.final-trust li{
  display:flex;align-items:center;gap:clamp(10px,1.1vw,16px);
  padding:0 clamp(18px,2.2vw,42px) 0 0;
  border-right:1px solid rgba(108,203,74,.24);
  text-align:left;
}
.final-trust li:last-child{padding-right:0;border-right:0}
.final-trust li::before{display:none}   /* the inherited tick */
.ft-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(40px,3.2vw,50px);height:clamp(40px,3.2vw,50px);border-radius:50%;
  background:rgba(108,203,74,.12);color:#6CCB4A;
  box-shadow:inset 0 0 0 1px rgba(108,203,74,.3);
}
.ft-ico svg{width:50%;height:50%}
.ft-txt{display:flex;flex-direction:column}
.ft-txt b{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(12.5px,1vw,15.5px);line-height:1.2;color:#fff;
}
.ft-txt em{
  font-style:normal;margin-top:2px;
  font-size:clamp(11px,.86vw,13.5px);line-height:1.25;color:rgba(255,255,255,.66);
}

@media (max-width:860px){
  .final-trust{grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:12px;max-width:340px}
  .final-trust li{padding-right:0;border-right:0}
}
@media (max-width:620px){
  /* the band's stacked treatment, applied to the closing call: sized to the
     wider of its two rows rather than to the column, each row started from the
     left so the two discs line up, and the stacked radius carried onto :hover
     so the dark half's right side cannot round back into a half-circle under
     the pointer. The section centres it. */
  .final-bar{
    flex-direction:column;align-items:stretch;border-radius:22px;
    width:max-content;max-width:100%;
  }
  .final-bar .ctab-call{border-radius:22px 22px 0 0;padding:0 20px 0 12px}
  .final-bar .ctab-book,
  .final-bar .ctab-book:hover{border-radius:0 0 22px 22px;padding:0 20px 0 12px}
  .final-bar .ctab-call,
  .final-bar .ctab-book{justify-content:flex-start}
  .final-bar .ctab-book .final-go{margin-left:auto}
  /* the band sizes the call disc through a .ctab-scoped rule, which does not
     reach this section - left alone it is 34px against the estimate half's
     40px, and the two labels start 6px apart */
  .final-bar .ctab-call .phone-ico{width:40px;height:40px}
}

/* ---------------------------------------------------------------------------
   25 - the footer, to the supplied design.

   Four columns divided by hairlines, each headed by a disc-and-label, the brand
   column carrying the number as a card, and the contact column ending on the
   estimate button.
   --------------------------------------------------------------------------- */
.site-footer{
  background:linear-gradient(180deg,#F6FAF4 0%,#F0F6EE 100%);
  border-top:1px solid rgba(8,131,62,.08);
  padding:clamp(40px,4vw,74px) 0 0;
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.78fr) minmax(0,1.05fr);
  gap:clamp(26px,3vw,54px);
  align-items:start;
}
/* the rules between the columns */
.foot-grid > * + *{
  padding-left:clamp(26px,3vw,54px);
  border-left:1px solid rgba(8,131,62,.1);
}

/* ---- the brand column ---- */
.foot-logo img{height:clamp(64px,5.4vw,86px);width:auto;display:block}
.foot-brand > p{
  margin:clamp(14px,1.4vw,22px) 0 0;max-width:40ch;
  font-size:clamp(13.5px,1vw,15.5px);line-height:1.7;color:var(--ink-body);
}

.foot-call{
  display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);
  margin-top:clamp(16px,1.7vw,26px);
  padding:clamp(9px,.9vw,13px) clamp(16px,1.5vw,22px) clamp(9px,.9vw,13px) clamp(8px,.8vw,11px);
  border-radius:999px;
  background:linear-gradient(103deg,#E8F3E4 0%,#D9EDD2 100%);
  box-shadow:inset 0 0 0 1px rgba(8,131,62,.07);
  transition:box-shadow .24s ease,transform .24s ease;
}
.foot-call:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(8,131,62,.12), 0 12px 24px -14px rgba(8,131,62,.4)}
.foot-call-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(42px,3.4vw,52px);height:clamp(42px,3.4vw,52px);border-radius:50%;
  background:#296f18;color:#fff;
}
.foot-call-ico svg path{fill:currentColor}
.foot-call-txt{display:flex;flex-direction:column;margin-right:auto}
.foot-call-txt em{
  font-style:normal;font-family:var(--font-head);font-weight:800;
  font-size:clamp(9.5px,.76vw,11.5px);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:2px;
}
.foot-call-txt b{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(18px,1.6vw,25px);letter-spacing:-.018em;color:var(--ink);
}
.foot-call-go{flex:none;color:#245613;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.foot-call:hover .foot-call-go{transform:translateX(4px)}

.foot-social{
  display:flex;flex-wrap:wrap;gap:clamp(8px,.8vw,12px);
  margin:clamp(16px,1.6vw,26px) 0 0;padding:0;list-style:none;
}
.foot-social a{
  display:grid;place-items:center;
  width:clamp(36px,2.9vw,44px);height:clamp(36px,2.9vw,44px);border-radius:50%;
  background:#E8F3E4;color:#245613;
  transition:background .2s ease,color .2s ease,transform .24s ease;
}
.foot-social a:hover{background:#296f18;color:#6CCB4A;transform:translateY(-2px)}

/* ---- the column heads ---- */
.foot-col h2{
  display:flex;align-items:center;gap:11px;
  margin:0 0 clamp(14px,1.4vw,22px);
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(11.5px,.9vw,13.5px);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);
}
.foot-h-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(32px,2.6vw,40px);height:clamp(32px,2.6vw,40px);border-radius:50%;
  background:#296f18;color:#6CCB4A;
}
.foot-h-ico svg{width:50%;height:50%}
.foot-h-ico svg path{fill:currentColor;stroke:none}
.foot-h-ico > svg[stroke]{fill:none}
.foot-h-ico > svg[stroke] path{fill:none;stroke:currentColor}

/* ---- the link lists ---- */
.foot-links{display:flex;flex-direction:column;gap:clamp(7px,.75vw,11px);margin:0;padding:0;list-style:none}
.foot-links a{
  display:flex;align-items:center;gap:11px;
  font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.35;color:var(--ink-body);
  transition:color .18s ease;
}
.foot-links a:hover{color:var(--accent-ink)}
.foot-chev{
  display:grid;place-items:center;flex:none;
  width:clamp(24px,1.9vw,29px);height:clamp(24px,1.9vw,29px);border-radius:50%;
  background:#E8F3E4;color:#245613;
  transition:background .2s ease,transform .24s ease;
}
.foot-chev svg{width:50%;height:50%}
.foot-links a:hover .foot-chev{background:#CDE6C4;transform:translateX(2px)}

/* ---- contact ---- */
.foot-contact{display:flex;flex-direction:column;gap:clamp(9px,.9vw,13px);margin:0;padding:0;list-style:none}
.foot-contact li{display:flex;align-items:center;gap:11px}
.foot-contact a,
.foot-contact li > span:last-child{
  font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.35;color:var(--ink-body);
  word-break:break-word;
}
.foot-contact a:hover{color:var(--accent-ink)}
.foot-c-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(26px,2.1vw,32px);height:clamp(26px,2.1vw,32px);border-radius:50%;
  background:#E8F3E4;color:#245613;
}
.foot-c-ico svg{width:52%;height:52%}
.foot-c-ico > svg path{fill:currentColor}
.foot-c-ico > svg[stroke] path{fill:none;stroke:currentColor}
.foot-c-ico--blank{background:none}

/* ---- hours ---- */
.foot-hours-list{
  display:flex;flex-direction:column;gap:clamp(6px,.6vw,9px);
  margin:clamp(14px,1.4vw,22px) 0 0;padding:clamp(14px,1.4vw,22px) 0 0;
  border-top:1px solid rgba(8,131,62,.1);
  list-style:none;
}
.site-footer .foot-hours{
  display:flex;align-items:center;gap:11px;
  font-size:clamp(13px,1vw,15px);color:var(--ink-body);
}
.site-footer .foot-hours > span{flex:1 1 auto}
.site-footer .foot-hours > b{
  font-family:var(--font-head);font-weight:800;color:var(--ink);white-space:nowrap;
}
.site-footer .foot-hours.is-closed > b{color:var(--accent-ink)}

/* ---- the estimate button ---- */
.site-footer .foot-cta{
  display:flex;align-items:center;gap:clamp(10px,1vw,15px);
  width:100%;margin-top:clamp(16px,1.7vw,26px);
  height:clamp(52px,4.2vw,64px);padding:0 8px 0 clamp(12px,1.1vw,16px);
  border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(103deg,#67C746 0%,#54B034 60%,#4FAB2F 100%);
  color:#1f5c32;
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(11px,.88vw,13.5px);letter-spacing:.045em;text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 14px 30px -14px rgba(82,185,46,.8), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .3s cubic-bezier(.22,1,.36,1),filter .24s ease;
}
.site-footer .foot-cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.foot-cta-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(34px,2.8vw,42px);height:clamp(34px,2.8vw,42px);border-radius:50%;
  background:#296f18;color:#6CCB4A;
}
.foot-cta-ico svg{width:52%;height:52%}
.foot-cta-go{
  display:grid;place-items:center;flex:none;margin-left:auto;
  width:clamp(34px,2.8vw,42px);height:clamp(34px,2.8vw,42px);border-radius:50%;
  background:rgba(27,80,44,.12);color:#1f5c32;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.site-footer .foot-cta:hover .foot-cta-go{transform:translateX(3px)}

/* ---- the base line ---- */
.foot-base{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  margin-top:clamp(28px,3vw,52px);padding-top:clamp(16px,1.6vw,26px);
  padding-bottom:clamp(16px,1.6vw,26px);
  border-top:1px solid rgba(8,131,62,.1);
}
.foot-base p{margin:0;font-size:clamp(12.5px,.96vw,14.5px);color:var(--ink-muted)}
.foot-legal{display:flex;align-items:center;gap:0}
.foot-legal span + span{
  margin-left:14px;padding-left:14px;
  border-left:1px solid rgba(8,131,62,.18);
}

@media (max-width:1040px){
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-grid > *:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:680px){
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-grid > * + *{
    padding-left:0;border-left:0;
    padding-top:22px;border-top:1px solid rgba(8,131,62,.1);
  }
  .foot-base{justify-content:center;text-align:center}
}

/* ---------------------------------------------------------------------------
   26 - footer corrections.
   --------------------------------------------------------------------------- */
/* the call card fills its column, as the design has it */
.foot-call{width:100%}

/* The hours: a headed block of plain day/time rows. One clock on the first row
   and a blank disc on the other two read as a grid with holes in it. */
.foot-hours-head{
  display:flex;align-items:center;gap:11px;
  margin:clamp(14px,1.4vw,22px) 0 clamp(9px,.9vw,13px);
  padding-top:clamp(14px,1.4vw,22px);
  border-top:1px solid rgba(8,131,62,.1);
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(10.5px,.84vw,12.5px);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);
}
.foot-hours-list{margin:0;padding:0;border-top:0}
.site-footer .foot-hours{gap:14px}
.site-footer .foot-hours > span{flex:1 1 auto;text-align:left}

/* The estimate label is a flex item now, so it can be told not to wrap. As a
   bare text node it was an anonymous item and white-space never reached it. */
.foot-cta-txt{flex:1 1 auto;white-space:nowrap;text-align:center}
.site-footer .foot-cta{
  justify-content:space-between;
  padding:0 7px 0 clamp(10px,.9vw,14px);
  font-size:clamp(10.5px,.84vw,13px);letter-spacing:.035em;
}
.foot-cta-ico,.foot-cta-go{
  width:clamp(30px,2.5vw,38px);height:clamp(30px,2.5vw,38px);
}
.foot-cta-go{margin-left:0}

/* the footer's call button is the book section's, only sized to this column */
.site-footer .scard-btn.book-call{
  --card-ink:var(--accent-ink);
  --card-ico-bg:var(--tint-red-sm);
  --card-ico:var(--accent-ink);
  --card-glow:rgba(84,176,52,.5);
  position:relative;
  display:flex;align-items:center;width:100%;max-width:420px;
  margin:clamp(16px,1.7vw,26px) 0 0;
  height:clamp(66px,5.2vw,78px);
  padding:0 clamp(16px,1.4vw,22px) 0 clamp(9px,.8vw,12px);
  gap:clamp(12px,1.2vw,18px);border-radius:14px;
  background:var(--card-ink);
}
.site-footer .book-call .phone-ico{width:clamp(44px,3.6vw,54px);height:clamp(44px,3.6vw,54px)}
.site-footer .book-call .scb-txt{margin-right:auto}
.site-footer .book-call .scb-txt em{font-size:clamp(9.5px,.76vw,11.5px);letter-spacing:.11em}
.site-footer .book-call b{font-size:clamp(19px,1.7vw,26px)}

/* ---------------------------------------------------------------------------
   27 - the inner-page hero.

   The same banner as the home page, with the breadcrumb above the badge. It is
   a little shorter: these pages open on their own content rather than on a
   full-screen statement.
   --------------------------------------------------------------------------- */
.hero--inner{
  height:auto;min-height:0;
  padding:clamp(22px,2.4vw,44px) 0 clamp(30px,3.2vw,60px);
}
.hero--inner .hero-inner{padding-top:0}
.hero--inner .crumbs{margin:0 0 clamp(12px,1.3vw,20px)}
.hero--inner .crumbs ol{justify-content:flex-start}
/* half again on the inner pages: their headlines are two short rows, where the
   home page carries a long one, so they can take far more size in the same
   820px column */
.hero--inner .hero-title{font-size:clamp(39px,4.5vw,81px)}
.hero--inner .hero-lede{max-width:min(600px,34vw)}

@media (max-width:980px){
  .hero--inner{padding:0}
  .hero--inner .hero-inner{padding-top:clamp(18px,4.8vw,32px)}
  .hero--inner .crumbs ol{justify-content:center}
  .hero--inner .hero-lede{max-width:none}
  /* The 39px floor above is sized for the two short rows a service page has.
     About, Services and Contact carry sentences, and the phone rule holds each
     row on one line with the hero clipping what does not fit - at 375 the About
     heading ran 678px inside a 331px column and lost both ends. The rows wrap
     here instead: a service page's rows still fit on one line each, so nothing
     about them changes, and a long row breaks rather than being cut. */
  .hero--inner .hero-l1,
  .hero--inner .hero-l2{white-space:normal;text-wrap:balance}
}

/* ---------------------------------------------------------------------------
   28 - the inclusion cards on a service page.

   They carry .scard too, but every card rule in section 19 was scoped
   :not(.services-grid--sub) - which is why they kept the old tinted
   checkerboard while the home cards went white. Same object now.
   --------------------------------------------------------------------------- */
/* :nth-child(n) to match the rank of the tinted rule in the shared sheet —
   .services-grid--sub .scard:nth-child(n) is (0,3,1) and a plain descendant
   selector loses to it however late it is declared */
.services-grid--sub .scard:nth-child(n),
.services-grid--sub .scard:nth-child(even){
  --card-bg:#fff;
  --card-ink:#1f5c32;
  --card-line:rgba(8,131,62,.1);
}
.services-grid--sub .scard-kicker{display:none}

/* the four tile treatments, as on the home grid */
.services-grid--sub .scard:nth-child(4n+1){--card-ico-bg:#296839;--card-shadow:rgba(8,131,62,.32)}
.services-grid--sub .scard:nth-child(4n+2){--card-ico-bg:#2C611A;--card-shadow:rgba(62,137,37,.34)}
.services-grid--sub .scard:nth-child(4n+3){--card-ico-bg:#349611;--card-shadow:rgba(47,136,15,.34)}
.services-grid--sub .scard:nth-child(4n+4){--card-ico-bg:#245613;--card-shadow:rgba(53,128,28,.34)}

.services-grid--sub .scard-body{padding:0 22px 22px}
.services-grid--sub .scard h3{font-size:clamp(16px,1.25vw,19px);line-height:1.22}
.services-grid--sub .scard-body > p{margin:9px 0 16px;font-size:13.6px;line-height:1.6}

/* the ticks, where a sub card has them */
.services-grid--sub .scard-ticks .tick svg circle,
.services-grid--sub .scard:hover .tick svg circle{fill:#54B034;stroke:none;opacity:1}
.services-grid--sub .scard-ticks .tick svg path,
.services-grid--sub .scard:hover .tick svg path{
  stroke:#1f5c32;stroke-width:2.8;
  stroke-dasharray:none;stroke-dashoffset:0;opacity:1;animation:none;
}

/* one action, so it is a whole pill rather than the right half of one */
.scard-act--solo{box-shadow:none}
.scard-act--solo .scard-call{
  border-radius:999px;padding:0 18px;
  box-shadow:0 10px 20px -10px rgba(82,185,46,.75), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---------------------------------------------------------------------------
   29 - the services mega menu, to the supplied design.

   Three parts: a promo panel on the client's artwork, the eight services four
   across and two down, and a panel on the right that ends on the ask. An
   outcomes bar runs across the foot.

   The panel is capped to the window and scrolls past that cap - a menu that
   runs off the bottom of the screen cannot be used with a mouse.
   --------------------------------------------------------------------------- */
@media (min-width:1041px){
  .drop--mega{
    padding:0;border-radius:0 0 22px 22px;overflow:hidden;
    background:#fff;
    max-height:calc(100vh - var(--header-h) - 14px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .mega{
    display:grid;
    grid-template-columns:clamp(230px,17vw,300px) minmax(0,1fr) clamp(220px,16vw,290px);
    gap:0;max-width:none;padding:0;
    align-items:stretch;
  }

  /* ---- the promo panel ---- */
  .mega-promo{
    position:relative;overflow:hidden;display:block;
    padding:0;margin:14px 0 14px 14px;border-radius:18px;
    background:#195f24;
  }
  .mega-promo-bg{position:absolute;inset:0;display:block}
  .mega-promo-bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
  .mega-promo-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(14,75,28,.72),rgba(14,75,28,.52) 45%,rgba(14,75,28,.82));
  }
  .mega-promo-in{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:clamp(16px,1.3vw,24px)}

  .mega-pill{
    display:inline-flex;align-items:center;gap:8px;width:fit-content;
    padding:7px 14px;border-radius:999px;
    background:rgba(17,80,30,.6);
    box-shadow:inset 0 0 0 1px rgba(108,203,74,.3);
    font-family:var(--font-head);font-weight:800;
    font-size:clamp(8px,.62vw,9.5px);letter-spacing:.08em;text-transform:uppercase;
    white-space:nowrap;color:#fff;
  }
  .mega-promo h3{
    margin:clamp(12px,1vw,18px) 0 0;
    font-family:var(--font-head);font-weight:900;
    font-size:clamp(22px,1.95vw,32px);line-height:1.1;letter-spacing:-.024em;color:#fff;
  }
  .mega-promo h3 em{font-style:normal;color:#6CCB4A}
  .mega-promo p{
    margin:clamp(9px,.8vw,14px) 0 0;
    font-size:clamp(12px,.92vw,14px);line-height:1.55;color:rgba(255,255,255,.8);
  }
  .mega-promo-points{
    display:flex;flex-direction:column;gap:9px;
    /* a bottom margin as well as the card's margin-top:auto - when the panel is
       short there is no free space for the auto to take, and the card ends up
       touching the last point */
    margin:clamp(12px,1vw,18px) 0 clamp(14px,1.2vw,22px);padding:0;list-style:none;
  }
  .mega-promo-points li{
    position:relative;padding-left:28px;
    font-size:clamp(11.5px,.9vw,13.5px);line-height:1.35;color:#fff;
  }
  .mega-promo-points li::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:19px;height:19px;border-radius:50%;background:#54B034;
  }
  .mega-promo-points li::after{
    content:"";position:absolute;left:5.5px;top:50%;
    width:8px;height:4px;margin-top:-2px;
    border-left:2px solid #1f5c32;border-bottom:2px solid #1f5c32;
    transform:rotate(-45deg) translateY(-1px);
  }

  .mega-call{
    display:flex;align-items:center;gap:9px;
    margin-top:auto;padding:6px 10px 6px 6px;border-radius:999px;
    background:rgba(255,255,255,.94);
    box-shadow:0 10px 26px -12px rgba(0,0,0,.6);
  }
  .mega-call-ico{
    display:grid;place-items:center;flex:none;
    width:clamp(32px,2.6vw,40px);height:clamp(32px,2.6vw,40px);
    border-radius:50%;background:#296f18;color:#fff;
  }
  .mega-call-ico svg{width:46%;height:46%}
  .mega-call-ico svg path{fill:currentColor}
  .mega-call-txt{display:flex;flex-direction:column;margin-right:auto}
  .mega-call-txt em{
    font-style:normal;font-family:var(--font-head);font-weight:800;
    font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);
  }
  /* the number holds one line: this column is narrow, and a wrapped phone
     number reads as two different numbers */
  .mega-call-txt b{
    font-family:var(--font-head);font-weight:800;
    font-size:clamp(13px,1.02vw,17px);color:var(--ink);letter-spacing:-.022em;
    white-space:nowrap;
  }
  .mega-call-go{
    display:grid;place-items:center;flex:none;
    width:clamp(25px,2vw,30px);height:clamp(25px,2vw,30px);
    border-radius:50%;background:#54B034;color:#22650c;
    transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  .mega-call:hover .mega-call-go{transform:translateX(3px)}

  /* ---- the eight services ---- */
  .mega-cols{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(12px,1vw,20px) clamp(10px,.9vw,18px);
    padding:clamp(12px,1vw,18px);
    align-content:start;
  }
  .mega-col{display:contents}
  .mega-group{padding:0;display:flex;flex-direction:column;min-width:0}

  .mega-head{
    display:flex;align-items:center;gap:9px;
    min-height:clamp(34px,2.7vw,42px);font-size:inherit;
  }
  .mega-ico{
    display:grid;place-items:center;flex:none;
    width:clamp(28px,2.2vw,34px);height:clamp(28px,2.2vw,34px);border-radius:10px;
    background:#296839;color:#6CCB4A;
  }
  .mega-ico svg{width:52%;height:52%}
  .mega-head-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
  .mega-head-txt b{
    flex:none;
    font-family:var(--font-head);font-weight:800;
    font-size:clamp(12px,.94vw,14px);line-height:1.2;color:var(--ink);
  }
.mega-head-go{flex:none;color:var(--ink-muted);margin-top:2px;transition:transform .26s ease,color .2s ease}
  .mega-head:hover .mega-head-go{color:var(--accent-ink);transform:translateX(3px)}

  
  /* A band cropped out of the service photograph rather than the whole frame -
     it is a strip of the work, which is all a menu has room for. */
  .mega-shot{display:block;margin-top:9px;border-radius:10px;overflow:hidden;aspect-ratio:16/5}
  .mega-shot img{
    width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;
    transition:transform .6s cubic-bezier(.22,1,.36,1);
  }
  .mega-group:hover .mega-shot img{transform:scale(1.06)}

  .mega-links{margin:8px 0 0;padding:0;gap:0;border:0}
  .mega-links li + li{border-top:1px solid rgba(8,131,62,.08)}
  .mega-links a{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:6px 0;font-size:clamp(10.5px,.8vw,12.2px);line-height:1.28;
    color:var(--ink-body);
  }
  .mega-links a::before{display:none}
  .mega-links a svg{flex:none;color:var(--ink-muted);transition:transform .24s ease,color .2s ease}
  .mega-links a:hover{color:var(--accent-ink)}
  .mega-links a:hover svg{color:var(--accent-ink);transform:translateX(2px)}

  /* ---- the right panel ---- */
  .mega-aside{
    display:flex;flex-direction:column;
    padding:clamp(14px,1.2vw,22px) clamp(14px,1.2vw,22px) clamp(14px,1.2vw,22px) 0;
  }
  .mega-house{display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/10}
  .mega-house img{width:100%;height:100%;object-fit:cover;display:block}
  .mega-aside h3{
    margin:clamp(11px,.9vw,16px) 0 0;
    font-family:var(--font-head);font-weight:900;
    font-size:clamp(17px,1.4vw,23px);line-height:1.12;letter-spacing:-.022em;color:var(--ink);
  }
  .mega-aside h3 em{font-style:normal;color:var(--accent-ink)}
  .mega-aside > p{
    margin:clamp(7px,.6vw,11px) 0 0;
    font-size:clamp(11.5px,.88vw,13.5px);line-height:1.5;color:var(--ink-body);
  }
  .mega-cta{
    display:flex;align-items:center;gap:9px;
    margin-top:clamp(11px,.9vw,16px);
    height:clamp(44px,3.4vw,52px);padding:0 6px 0 10px;
    border:0;border-radius:999px;cursor:pointer;width:100%;
    background:linear-gradient(103deg,#419124 0%,#2c7913 76%,#256a0f 100%);
    color:#fff;
    font-family:var(--font-head);font-weight:800;
    font-size:clamp(11.5px,.9vw,13.5px);white-space:nowrap;
    box-shadow:0 12px 26px -14px rgba(33,93,13,.75), inset 0 1px 0 rgba(255,255,255,.14);
    transition:filter .22s ease;
  }
  .mega-cta:hover{filter:brightness(1.12)}
  .mega-cta-ico{
    display:grid;place-items:center;flex:none;
    width:clamp(30px,2.3vw,36px);height:clamp(30px,2.3vw,36px);border-radius:50%;
    background:rgba(255,255,255,.14);color:#6CCB4A;
  }
  .mega-cta-ico svg{width:52%;height:52%}
  .mega-cta-go{
    display:grid;place-items:center;flex:none;margin-left:auto;
    width:clamp(28px,2.1vw,34px);height:clamp(28px,2.1vw,34px);border-radius:50%;
    background:#54B034;color:#22650c;
    transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  .mega-cta:hover .mega-cta-go{transform:translateX(3px)}

  /* .mega-aside > p is (0,2,0) and this heading IS a direct p child of it, so a
     plain .mega-why-h never got its own margin */
  .mega-aside > .mega-why-h{
    margin:clamp(20px,1.8vw,30px) 0 clamp(10px,.9vw,15px);
    font-family:var(--font-head);font-weight:800;
    font-size:clamp(11.5px,.88vw,13.5px);color:var(--ink);
  }
  .mega-why{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
  .mega-why li{
    display:flex;align-items:center;gap:9px;
    font-size:clamp(11px,.86vw,13px);line-height:1.3;color:var(--ink-body);
  }
  .mega-why-ico{
    display:grid;place-items:center;flex:none;
    width:24px;height:24px;border-radius:50%;
    background:#E8F3E4;color:#245613;
  }
  .mega-why-ico svg{width:56%;height:56%}
  .mega-why-ico svg path{fill:currentColor}
  .mega-why-ico > svg[stroke] path{fill:none;stroke:currentColor}

  /* ---- the outcomes bar ---- */
  .mega-bar{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(12px,1.2vw,26px);
    max-width:none;padding:clamp(12px,1vw,18px) clamp(14px,1.2vw,22px);
    background:#F0F7EE;border-top:1px solid rgba(8,131,62,.08);
  }
  .mega-bar > span{display:flex;align-items:center;gap:11px;min-width:0}
  .mega-bar > span + span{border-left:1px solid rgba(8,131,62,.1);padding-left:clamp(12px,1.2vw,26px)}
  .mega-bar-ico{
    display:grid;place-items:center;flex:none;
    width:clamp(32px,2.5vw,40px);height:clamp(32px,2.5vw,40px);border-radius:12px;
    background:#fff;color:#245613;
    box-shadow:0 4px 12px -6px rgba(8,131,62,.3);
  }
  .mega-bar-ico svg{width:50%;height:50%}
  .mega-bar b{
    display:block;font-family:var(--font-head);font-weight:800;
    font-size:clamp(11.5px,.9vw,13.5px);line-height:1.2;color:var(--ink);
  }
  .mega-bar em{
    display:block;font-style:normal;margin-top:2px;
    font-size:clamp(10.5px,.82vw,12.5px);line-height:1.3;color:var(--ink-muted);
  }
}

/* ---------------------------------------------------------------------------
   30 - the mega menu inside the drawer.

   Section 29 is scoped above the drawer breakpoint, so the new markup arrived
   here unstyled: the title and its blurb ran together on one line because
   .mega-head-txt was not a column, and the photographs made the drawer enormous.
   --------------------------------------------------------------------------- */
@media (max-width:1040px){
  /* the panels belong to the wide layout */
  .mega-promo,
  .mega-aside,
  .mega-bar{display:none}

  /* a photograph per group would make this list several screens longer */
  .mega-shot{display:none}

  .mega-head{display:flex;align-items:center;gap:11px}
  .mega-head-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
  .mega-head-txt b{
    font-family:var(--font-head);font-weight:800;
    font-size:15px;line-height:1.2;color:var(--ink);
  }
  .mega-head-go{flex:none;color:var(--ink-muted)}


  .mega-links a{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:8px 0;
  }
  .mega-links a svg{flex:none;color:var(--ink-muted)}
}


/* ---------------------------------------------------------------------------
   31 - the inquiry badge on a phone.

   One line needs 11.9px against the 12px it was set at, so it wrapped by a
   hair. Tighter tracking and a slightly smaller disc buy the rest of it, and
   nowrap stops it ever breaking again.
   --------------------------------------------------------------------------- */
@media (max-width:620px){
  .book-badge{
    white-space:nowrap;gap:9px;padding:7px 14px 7px 7px;
    font-size:clamp(9px,2.85vw,11.5px);letter-spacing:.035em;
  }
  .book-badge-ico{width:24px;height:24px}
  .book-badge-ico svg{width:13px;height:13px}
}


/* ---------------------------------------------------------------------------
   32 - the estimate card's head, centred once the section stacks.

   Side by side the card sits beside left-aligned copy, so its head matches it.
   Stacked, it is the only thing on the row and reads better centred - the pill,
   the heading and the lede together.
   --------------------------------------------------------------------------- */
@media (max-width:980px){
  /* .book-card is a block, so align-self does nothing to this pill - auto
     margins are what centre it */
  .bf-pill{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
  .book-card > h2{text-align:center}
  .bf-lede{text-align:center;max-width:46ch;margin-left:auto;margin-right:auto}
}


/* ---------------------------------------------------------------------------
   33 - the About badge on a phone.

   The shared sheet sets right:14px on it at this breakpoint; with a left as
   well, an absolutely positioned box is stretched between the two rather than
   sized to its content.
   --------------------------------------------------------------------------- */
@media (max-width:980px){
  .about--dark .about-badge{right:auto;width:fit-content;max-width:calc(100% - 20px)}
}


/* ---------------------------------------------------------------------------
   34 - the inquiry section's call row and fact rows, once the column narrows.

   Two things went wrong when .cta-talk was allowed to wrap. The aside dropped
   under the number, so its drawn arrow - which runs from upper right down to
   lower left - pointed at the margin instead of at the number it annotates.
   And the fact rows stayed a single flex line, so each description sat beside
   its title rather than under it.

   The row is held on one line and the aside sized to what is left of it; the
   fact rows wrap, with the description given a whole line of its own and
   indented past the disc so it starts under the title.
   --------------------------------------------------------------------------- */
@media (max-width:620px){
  .cta-talk{flex-wrap:nowrap;align-items:center;gap:12px}
  .cta .cta-phone{flex:0 1 auto;min-width:0;gap:11px}
  .cta-phone-ico{width:46px;height:46px}
  .cta .cta-phone b{font-size:20px;white-space:nowrap}

  /* to the right of the number, arrow first so it points back at it */
  .cta-aside{
    flex:0 0 auto;padding-left:0;border-left:0;
    align-items:center;gap:6px;
  }
  .cta-aside-arrow{width:30px}
  .cta-aside i{font-size:12px;line-height:1.2}

  /* Title on the first line beside the disc, description on the second. Wrapping
     a flex row put the disc on the first line only, so it centred against the
     title rather than against the pair - which is what the stack is read
     against. A two-column grid spans the disc down both rows instead, so it
     centres on the whole block, and the description lines up under the title
     without being indented by hand. */
  .cta-points li{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:13px;row-gap:0;
    align-items:center;
  }
  .cp-ico{grid-row:1 / span 2;align-self:center}
  .cta-points b{grid-column:2}
  .cta-points li > span:last-child{grid-column:2;padding-left:0}

  /* the card gives way to the button that opens the same form in the dialog */
  .cta .cta-form-wrap{display:none}
  .cta .cta-mini{
    display:inline-flex;width:100%;justify-content:center;
    margin-top:clamp(20px,5.4vw,30px);
  }
  /* the break is only there to balance the two lines of the three-across
     desktop layout; on its own full-width row the line is short enough to run
     as one. The markup carries a space before each break so dropping it here
     does not weld the two halves together - a <br> carries no space of its
     own once it stops breaking the line. */
  .cta-points li > span:last-child br{display:none}
}

@media (max-width:374px){
  .cta-talk{gap:9px}
  .cta .cta-phone{gap:9px}
  .cta-phone-ico{width:42px;height:42px}
  .cta .cta-phone b{font-size:18px}
  .cta-aside-arrow{width:25px}
  .cta-aside i{font-size:11px}
}


/* ---------------------------------------------------------------------------
   35 - the contact form's photo field.

   The input is meant to be invisible - the label beside it is the control. The
   shared sheet hides it with .cfile-input{position:absolute;width:1px}, but a
   later .cf input{width:100%} is one point more specific and wins. Because the
   input is absolutely positioned, that 100% resolves against the containing
   block rather than the field, so it measured 375px inside a 295px column and
   pushed the contact page 40px wider than the phone it was being read on.
   --------------------------------------------------------------------------- */
.cf input.cfile-input{
  position:absolute;width:1px;height:1px;min-width:0;
  padding:0;border:0;opacity:0;pointer-events:none;
}


/* ---------------------------------------------------------------------------
   36 - the mobile action bar.

   The dock is inherited whole from the shared sheet; only the colour is wrong
   there - a navy glass tray with a red call tile. Re-skinned here:

     tray   deep green glass, the logo's own #055327
     call   the accent fill, which is the same lime gradient the estimate
            button uses, so the dock's primary action is the site's primary
            button. White on lime is 1.7:1, so its text and icon take the deep
            green - that is what --on-red exists for.
     chat   WhatsApp's own green. Deliberately not a brand colour: it is the
            one control here that is not a phone call, and against a green tray
            a third green-on-brand tile would read as the same button twice.

   The tray and the WhatsApp tile keep the inherited white text; only the call
   tile flips, so every white-on-dark rule below is scoped to it.
   --------------------------------------------------------------------------- */
.fab-bar{
  background:linear-gradient(135deg,
    rgba(10,77,34,.88)  0%,
    rgba(17,95,44,.88) 50%,
    rgba(7,66,30,.92) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 0 0 1px rgba(255,255,255,.04),
    0 22px 44px -14px rgba(0,0,0,.55),
    0 12px 28px -10px rgba(8,131,62,.45);
}

.fab-seg--call{
  background:linear-gradient(103deg,#67C746 0%,#54B034 60%,#4FAB2F 100%);
  color:var(--on-red);
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 6px 14px -6px rgba(82,185,46,.65);
}
/* the sheen and hairline are written for a dark tile; on lime they wash it out */
.fab-seg--call::before{
  background:linear-gradient(135deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.10) 32%,
    transparent 55%);
}
.fab-seg--call::after{border-color:rgba(8,131,62,.14)}
/* a solid deep-green orb rather than the translucent white one, which has
   nothing to sit against on a light tile */
.fab-seg--call .fab-ico{
  background:#296f18;color:#6CCB4A;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 4px 10px -3px rgba(8,131,62,.45);
}
.fab-seg--call .fab-ico svg{filter:none}
.fab-seg--call .fab-txt em{color:rgba(8,131,62,.72)}
.fab-seg--call .fab-txt b{color:var(--on-red);text-shadow:none}

/* WhatsApp's dot sits on its own green, so the ring colour comes with it */
.fab-seg--wa{
  background:linear-gradient(135deg,#2CDB78 0%,#22C668 55%,#1AAA5A 100%);
}


/* ---------------------------------------------------------------------------
   37 - the service areas page.

   Two components: the coverage figures, and a county block that alternates
   sides down the page. The county block borrows the About section's geometry
   - same grid, same photo treatment, same corner badge - so the page reads as
   part of the site rather than as something bolted on.
   --------------------------------------------------------------------------- */
.sa-sum{padding:clamp(44px,4.4vw,84px) 0 0}
.sa-sum .services-head h2 em{font-style:normal;color:var(--accent-ink)}

.sa-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,28px);
  margin:clamp(26px,2.8vw,46px) 0 0;padding:0;list-style:none;
}
.sa-stats li{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:clamp(20px,2vw,34px) clamp(14px,1.4vw,24px);
  border-radius:clamp(16px,1.4vw,24px);
  background:linear-gradient(180deg,#FFFFFF 0%,#F7FBF4 100%);
  box-shadow:inset 0 0 0 1px rgba(8,131,62,.08), 0 22px 44px -30px rgba(8,131,62,.35);
  text-align:center;
}
.sa-stats li::before{display:none}   /* the inherited list tick */
.sa-stat-ico{
  display:grid;place-items:center;flex:none;
  width:clamp(44px,3.5vw,54px);height:clamp(44px,3.5vw,54px);border-radius:16px;
  margin-bottom:6px;
  background:#296f18;color:var(--accent-on-dark,#6CCB4A);
}
.sa-stat-ico svg{width:50%;height:50%}
.sa-stats b{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(30px,3.1vw,48px);line-height:1;letter-spacing:-.03em;
  color:var(--ink);
}
.sa-stats em{
  font-style:normal;max-width:22ch;
  font-size:clamp(12.5px,.98vw,15px);line-height:1.45;color:var(--ink-body);
}

/* ---- a county ---- */
.sa-county{padding:clamp(44px,4.4vw,84px) 0}
.sa-county:nth-of-type(even){background:linear-gradient(180deg,#F7FBF4 0%,#F2F8EE 100%)}
.sa-grid{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(28px,3.4vw,66px);align-items:center;
}
/* the photo leads on every other block, so the page does not march */
.sa-county--flip .sa-visual{order:-1}

.sa-copy .kicker{margin:0 0 clamp(12px,1.2vw,18px)}
.sa-copy h2{
  margin:0;
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(26px,2.5vw,42px);line-height:1.08;letter-spacing:-.028em;
  color:var(--ink);
}
.sa-copy h2 em{font-style:normal;color:var(--accent-ink)}
.sa-copy > p{
  margin:clamp(12px,1.2vw,20px) 0 0;max-width:52ch;
  font-size:clamp(14.5px,1.07vw,17px);line-height:1.65;color:var(--ink-body);
}

/* The towns are a two-column tick list rather than chips: a chip reads as a
   link, and these do not go anywhere yet. */
.sa-towns{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,.85vw,13px) clamp(14px,1.6vw,28px);
  margin:clamp(20px,2vw,32px) 0 0;padding:0;list-style:none;
}
.sa-towns li{
  display:flex;align-items:center;gap:10px;padding:0;border:0;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(13.5px,1.02vw,16px);line-height:1.3;color:var(--ink);
}
.sa-towns li::before{display:none}
.sa-tick{
  display:grid;place-items:center;flex:none;
  width:21px;height:21px;border-radius:50%;
  background:var(--red);color:var(--on-red);
}
.sa-tick svg{width:62%;height:62%}

.sa-act{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,1.6vw,28px);
  margin-top:clamp(22px,2.4vw,38px);
}

/* ---- the photo ---- */
.sa-visual{position:relative;min-width:0}
.sa-visual picture{display:block}
.sa-visual img{
  width:100%;height:auto;display:block;
  border-radius:clamp(18px,1.6vw,28px);
  box-shadow:0 38px 70px -34px rgba(8,131,62,.5);
}
.sa-badge{
  position:absolute;left:clamp(-10px,-.8vw,0px);bottom:clamp(14px,1.6vw,26px);
  display:flex;align-items:center;gap:12px;
  padding:clamp(12px,1.1vw,18px) clamp(16px,1.5vw,24px);
  border-radius:16px;
  background:#fff;
  box-shadow:0 20px 40px -20px rgba(8,131,62,.45), inset 0 0 0 1px rgba(8,131,62,.07);
}
.sa-badge b{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-.03em;
  color:var(--accent-ink);
}
.sa-badge span{
  font-size:clamp(11.5px,.9vw,13.5px);line-height:1.3;color:var(--ink-body);
}

@media (max-width:1040px){
  .sa-grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,36px)}
  /* the photo goes above the copy on every block, flipped or not */
  .sa-county--flip .sa-visual{order:0}
  .sa-visual{order:-1}
}
@media (max-width:860px){
  .sa-stats{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}
}
@media (max-width:620px){
  .sa-towns{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px}
  .sa-towns li{font-size:13px;gap:8px}
  .sa-tick{width:19px;height:19px}
  .sa-act{flex-direction:column;align-items:stretch}
  .sa-act .about-call{justify-content:flex-start}
  .sa-badge{left:0;padding:10px 14px;gap:10px}
}
/* Two columns hold down to about 340px - "Fort Lauderdale" is the longest
   name and it sets at 13px inside a 160px column with room to spare. Only the
   very narrow phones drop to one. */
@media (max-width:340px){
  .sa-towns{grid-template-columns:minmax(0,1fr)}
}


/* ---------------------------------------------------------------------------
   38 - a single town's service area page.

   Four parts: the answer block with the computed geography beside it, the
   written prose with a facts panel, the nearby towns, and the shared sections
   the rest of the site already owns.
   --------------------------------------------------------------------------- */
.sa-towns a{
  display:flex;align-items:center;gap:inherit;width:100%;
  color:inherit;transition:color .18s ease;
}
.sa-towns li{padding:0}
.sa-towns a:hover{color:var(--accent-ink)}
.sa-towns a:hover .sa-tick{transform:scale(1.08)}
.sa-tick{transition:transform .2s ease}

/* ---- the answer, with the geography beside it ---- */
.area-ans{padding:clamp(44px,4.4vw,84px) 0 0}
.area-ans-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(26px,3vw,56px);align-items:start;
}
.area-ans-copy .kicker{margin:0 0 clamp(12px,1.2vw,18px)}
.area-ans-copy h2{
  margin:0;
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(26px,2.5vw,42px);line-height:1.08;letter-spacing:-.028em;color:var(--ink);
}
.area-ans-copy h2 em{font-style:normal;color:var(--accent-ink)}
/* the answer block is set a step up from body copy - it is the paragraph the
   page exists to deliver */
.area-lede{
  margin:clamp(14px,1.3vw,22px) 0 0;max-width:60ch;
  font-size:clamp(15.5px,1.18vw,19px);line-height:1.6;color:var(--ink-body);
}

.area-geo{
  padding:clamp(18px,1.8vw,28px);
  border-radius:clamp(16px,1.4vw,24px);
  background:linear-gradient(180deg,#FFFFFF 0%,#F7FBF4 100%);
  box-shadow:inset 0 0 0 1px rgba(8,131,62,.08), 0 22px 44px -30px rgba(8,131,62,.35);
}
.area-geo-list{display:flex;flex-direction:column;gap:clamp(12px,1.2vw,18px);margin:0;padding:0;list-style:none}
.area-geo-list li{display:flex;align-items:center;gap:13px;padding:0;border:0}
.area-geo-list li::before{display:none}
.area-geo-list li + li{padding-top:clamp(12px,1.2vw,18px);border-top:1px solid rgba(8,131,62,.1)}
.ag-ico{
  display:grid;place-items:center;flex:none;
  width:42px;height:42px;border-radius:13px;
  background:#296f18;color:#6CCB4A;
}
.ag-ico svg{width:50%;height:50%}
.area-geo-list em{
  display:block;font-style:normal;
  font-family:var(--font-head);font-weight:800;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:2px;
}
.area-geo-list b{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:clamp(14px,1.08vw,17px);line-height:1.25;color:var(--ink);
}

/* ---- the written prose, with the facts panel ---- */
.area-body{padding:clamp(34px,3.4vw,60px) 0 clamp(44px,4.4vw,84px)}
.area-body-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(26px,3vw,56px);align-items:start;
}
.area-prose h3{
  margin:clamp(22px,2.2vw,34px) 0 0;
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(18px,1.5vw,25px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);
}
.area-prose h3:first-of-type{margin-top:0}
.area-prose p{
  margin:clamp(9px,.9vw,14px) 0 0;max-width:68ch;
  font-size:clamp(14.5px,1.07vw,17px);line-height:1.72;color:var(--ink-body);
}

.area-facts{
  position:sticky;top:calc(var(--header-h) + 18px);
  padding:clamp(20px,2vw,30px);
  border-radius:clamp(16px,1.4vw,24px);
  background:linear-gradient(180deg,#F7FBF4 0%,#EFF7E9 100%);
  box-shadow:inset 0 0 0 1px rgba(8,131,62,.09);
}
.area-facts h3{
  display:flex;align-items:center;gap:11px;margin:0 0 clamp(14px,1.4vw,20px);
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(14px,1.08vw,17px);line-height:1.25;color:var(--ink);
}
.af-ico{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:11px;background:#296f18;color:#6CCB4A;
}
.af-ico svg{width:52%;height:52%}
.area-facts ul{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none}
.area-facts li{
  position:relative;padding:0 0 0 26px;border:0;
  font-size:clamp(13px,1vw,15.5px);line-height:1.5;color:var(--ink-body);
}
.area-facts li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:9px;height:9px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 3px rgba(84,176,52,.2);
  border:0;transform:none;
}
.site-footer .area-call,
.area-call{margin-top:clamp(18px,1.8vw,26px);max-width:none}

/* ---- nearby ---- */
.area-near{padding:clamp(44px,4.4vw,84px) 0;background:linear-gradient(180deg,#F7FBF4 0%,#F2F8EE 100%)}
.area-near .services-head h2 em{font-style:normal;color:var(--accent-ink)}
.near-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.3vw,22px);
  margin:clamp(26px,2.8vw,44px) 0 0;padding:0;list-style:none;
}
.near-grid li{padding:0;border:0}
.near-grid li::before{display:none}
.near-card{
  display:flex;align-items:center;gap:13px;height:100%;
  padding:clamp(14px,1.3vw,20px);
  border-radius:clamp(14px,1.2vw,20px);
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(8,131,62,.08), 0 18px 36px -26px rgba(8,131,62,.4);
  transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease;
}
.near-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(8,131,62,.14), 0 26px 46px -24px rgba(8,131,62,.5)}
.near-ico{
  display:grid;place-items:center;flex:none;
  width:42px;height:42px;border-radius:13px;background:#EAF5E2;color:#245613;
}
.near-ico svg{width:52%;height:52%}
.near-txt{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.near-txt b{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(13.5px,1.02vw,16px);line-height:1.2;color:var(--ink);
}
.near-txt em{
  font-style:normal;margin-top:2px;
  font-size:clamp(11.5px,.88vw,13.5px);line-height:1.3;color:var(--ink-muted);
}
.near-go{flex:none;color:var(--accent-ink);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.near-card:hover .near-go{transform:translateX(3px)}
.near-card--all .near-ico{background:#296f18;color:#6CCB4A}

@media (max-width:1040px){
  .area-ans-grid,
  .area-body-grid{grid-template-columns:minmax(0,1fr)}
  .area-facts{position:static}
  .near-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .near-grid{grid-template-columns:minmax(0,1fr)}
  .area-geo-list li{gap:11px}
  .ag-ico{width:38px;height:38px;border-radius:11px}
}


/* ---------------------------------------------------------------------------
   39 - the service areas mega menu.

   Three stacked bands rather than the services menu's four columns. Twenty-six
   towns split 13 / 8 / 5 cannot fill equal columns without one running three
   times the length of another, and a band of chips per county stays balanced
   whatever the counts become.
   --------------------------------------------------------------------------- */
@media (min-width:1041px){

  .drop--areas{
    padding:0;border-radius:0 0 22px 22px;overflow:hidden;
    background:radial-gradient(120% 78% at 50% -14%,#F7FBF3 0%,rgba(247,251,243,0) 56%),#fff;
    max-height:calc(100vh - var(--header-h) - 14px);
    overflow-y:auto;overscroll-behavior:contain;
  }

  /* One column per county, each sized by how many towns it holds, so the whole
     menu is a single short band rather than three stacked rows. */
  .amega{
    position:relative;display:flex;align-items:stretch;gap:0;max-width:none;
    padding:clamp(20px,1.75vw,30px) clamp(20px,1.9vw,34px) clamp(16px,1.5vw,26px);
  }
  .amega::before{
    content:"";position:absolute;left:9%;right:9%;top:0;height:1px;
    background:linear-gradient(90deg,rgba(84,176,52,0),rgba(84,176,52,.55),rgba(84,176,52,0));
  }

  .amega-row{
    flex:var(--cols,1) 1 0;min-width:0;
    padding:0 clamp(16px,1.5vw,28px);
  }
  .amega-row:first-child{padding-left:0}
  .amega-row:last-child{padding-right:0}
  .amega-row + .amega-row{border-top:0;border-left:1px solid rgba(8,131,62,.1)}

  /* ---- the county label ---- */
  .amega-head{
    display:flex;align-items:center;gap:11px;min-width:0;
    padding:0 0 12px;margin-bottom:14px;
    border-bottom:1px solid rgba(8,131,62,.13);
  }
  .amega-dash{
    flex:none;width:22px;height:3px;border-radius:2px;
    background:linear-gradient(90deg,#54B034,#2C611A);
    transition:width .32s cubic-bezier(.22,1,.36,1);
  }
  .amega-head:hover .amega-dash{width:32px}
  .amega-head-txt{display:flex;align-items:center;gap:9px;min-width:0}
  .amega-head-txt b{
    font-family:var(--font-head);font-weight:800;
    font-size:clamp(10.5px,.8vw,12.5px);letter-spacing:.11em;text-transform:uppercase;
    line-height:1.2;color:var(--ink);white-space:nowrap;
    transition:color .18s ease;
  }
  .amega-head-txt em{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    min-width:20px;height:19px;padding:0 6px;border-radius:999px;
    background:#EDF6E6;box-shadow:inset 0 0 0 1px rgba(84,176,52,.26);
    font-style:normal;font-family:var(--font-head);font-weight:800;
    font-size:10px;line-height:1;color:var(--accent-ink);
  }
  .amega-head:hover .amega-head-txt b{color:var(--accent-ink)}

  /* ---- the towns, flowing down then across inside the county ---- */
  .amega-towns{
    columns:var(--cols,1);column-gap:clamp(16px,1.5vw,28px);
    display:block;margin:0;padding:0;list-style:none;border:0;
  }
  .amega-towns li{padding:0;border:0;break-inside:avoid}
  .amega-towns li::before{display:none}
  .amega-towns a{
    position:relative;display:flex;align-items:center;gap:10px;
    padding:6px 0;border:0;border-radius:0;background:none;box-shadow:none;
    font-family:var(--font-head);font-weight:600;
    font-size:clamp(12.5px,.96vw,14.5px);line-height:1.35;
    color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:color .18s ease,transform .26s cubic-bezier(.22,1,.36,1);
  }
  .amega-towns a::before{
    content:"";position:static;display:block;flex:none;
    width:6px;height:6px;border-radius:50%;border:0;opacity:1;transform:none;
    background:#A9D493;
    transition:background .18s ease,box-shadow .22s ease;
  }
  .amega-towns a:hover{color:var(--accent-ink);transform:translateX(3px)}
  .amega-towns a:hover::before{background:#54B034;box-shadow:0 0 0 3px rgba(84,176,52,.18)}

  /* ---- the dark band on the ask ---- */
  .amega-foot{
    display:flex;align-items:center;gap:clamp(16px,1.6vw,30px);
    max-width:none;border-top:0;
    padding:clamp(14px,1.3vw,21px) clamp(20px,1.9vw,34px);
    background:linear-gradient(135deg,#277117 0%,#1b5f11 58%,#1a5912 100%);
  }
  .amega-lead{
    margin:0;margin-right:auto;min-width:0;
    font-size:clamp(12.5px,.96vw,14.5px);line-height:1.45;color:rgba(255,255,255,.66);
  }
  .amega-lead b{
    display:block;font-family:var(--font-head);font-weight:800;
    font-size:clamp(13px,1vw,15.5px);line-height:1.35;color:#fff;
  }

  .amega-call{
    display:flex;align-items:center;gap:11px;flex:none;margin-top:0;
    padding:8px 14px 8px 9px;border-radius:999px;
    background:rgba(255,255,255,.06);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
    transition:background .2s ease,box-shadow .2s ease;
  }
  .amega-call:hover{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(108,203,74,.45)}
  .amega-call .mega-call-ico{
    display:grid;place-items:center;flex:none;
    width:34px;height:34px;border-radius:50%;
    background:rgba(108,203,74,.16);color:#8FDF6A;
    box-shadow:inset 0 0 0 1px rgba(108,203,74,.3);
  }
  .amega-call .mega-call-txt{display:flex;flex-direction:column;min-width:0}
  .amega-call .mega-call-txt em{
    font-style:normal;font-family:var(--font-head);font-weight:800;
    font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9CE47A;
  }
  .amega-call .mega-call-txt b{
    font-family:var(--font-head);font-weight:900;
    font-size:clamp(13.5px,1.04vw,16px);line-height:1.2;color:#fff;margin-top:2px;white-space:nowrap;
  }

  .amega-all{
    display:flex;align-items:center;gap:10px;flex:none;
    padding:11px 15px 11px 18px;border-radius:999px;
    background:linear-gradient(180deg,#5FC13C 0%,#45A229 100%);
    box-shadow:0 14px 26px -14px rgba(84,176,52,.85), inset 0 1px 0 rgba(255,255,255,.4);
    transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease;
  }
  .amega-all:hover{transform:translateY(-2px);box-shadow:0 20px 32px -16px rgba(84,176,52,.95), inset 0 1px 0 rgba(255,255,255,.45)}
  .amega-all-txt{display:flex;flex-direction:column;min-width:0;margin-right:0}
  .amega-all-txt b{
    font-family:var(--font-head);font-weight:800;
    font-size:clamp(12.5px,.96vw,14.5px);line-height:1.2;color:#07230B;white-space:nowrap;
  }
  .amega-all .mega-call-go{
    display:grid;place-items:center;flex:none;
    width:24px;height:24px;border-radius:50%;background:rgba(16,78,24,.16);color:#07230B;
    transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  .amega-all:hover .mega-call-go{transform:translateX(3px)}
}



/* ---------------------------------------------------------------------------
   40 - the areas menu inside the drawer.

   The desktop grid is scoped to min-width:1041px, so below that the bands
   simply stack. What is left to do is make the chips a comfortable tap target
   and drop the foot's two-column split.
   --------------------------------------------------------------------------- */
.amega-tw{display:none}

@media (max-width:1040px){
  .amega{display:flex;flex-direction:column;gap:0;padding:2px 0 0}
  .amega-row{display:block;padding:15px 0}
  .amega-row + .amega-row{margin-top:0;padding-top:15px;border-top:1px solid rgba(5,83,39,.12)}
  .amega-row + .amega-row::before{display:none}
  .amega-tw{display:inline}

  .amega-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0;border:0;min-height:0}
  .amega-dash{display:inline-block;flex:none;width:18px;height:3px;border-radius:2px;background:linear-gradient(90deg,#54B034,#2C611A)}
  .amega-head-txt{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;margin:0}
  .amega-head-txt b{
    font-family:var(--font-head);font-weight:800;
    font-size:13px;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;color:var(--ink);
  }
  .amega-head-txt em{
    display:inline-flex;align-items:center;flex:none;
    padding:3px 9px;border-radius:999px;margin:0;gap:3px;
    background:#EDF6E6;box-shadow:inset 0 0 0 1px rgba(84,176,52,.26);
    font-style:normal;font-family:var(--font-head);font-weight:800;
    font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap;
  }

  .amega-towns{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;margin:0;padding:0;list-style:none;border:0;columns:auto;
  }
  .amega-towns li{padding:0;border:0}
  .amega-towns li::before{display:none}
  .amega-towns a{
    display:flex;align-items:center;gap:8px;min-height:44px;
    padding:9px 11px;border-radius:12px;
    background:#F4FAEF;box-shadow:inset 0 0 0 1px rgba(5,83,39,.09);
    font-family:var(--font-head);font-weight:700;font-size:13px;line-height:1.25;
    color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:none;
  }
  .amega-towns a::before{
    content:"";position:static;display:block;flex:none;
    width:6px;height:6px;border-radius:50%;background:#7FBF5E;
    border:0;opacity:1;transform:none;box-shadow:none;
  }
  .amega-towns a::after{display:none}
  .amega-towns a:active{background:#E4F1D8;color:var(--accent-ink)}

  /* ---- the foot, as one dark card inside the drawer ---- */
  .amega-foot{
    display:flex;flex-direction:column;align-items:stretch;gap:11px;
    margin-top:16px;padding:15px;border-radius:16px;border-top:0;
    background:linear-gradient(135deg,#1A4A10 0%,#12360C 100%);
  }
  .amega-lead{display:block;margin:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.66)}
  .amega-lead b{
    display:block;margin-top:3px;
    font-family:var(--font-head);font-weight:800;font-size:13.5px;line-height:1.35;color:#fff;
  }
  .amega-call{
    display:flex;align-items:center;gap:10px;margin-top:0;
    padding:8px 13px 8px 8px;border-radius:999px;
    background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  }
  .amega-call .mega-call-ico{
    display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
    background:rgba(108,203,74,.16);color:#8FDF6A;box-shadow:inset 0 0 0 1px rgba(108,203,74,.3);
  }
  .amega-call .mega-call-txt{display:flex;flex-direction:column;min-width:0}
  .amega-call .mega-call-txt em{
    font-style:normal;font-family:var(--font-head);font-weight:800;
    font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9CE47A;
  }
  .amega-call .mega-call-txt b{
    font-family:var(--font-head);font-weight:900;font-size:16px;line-height:1.2;color:#fff;margin-top:2px;
  }
  .amega-all{
    display:flex;align-items:center;justify-content:center;gap:9px;
    padding:12px 16px;border-radius:999px;background:linear-gradient(180deg,#5FC13C 0%,#45A229 100%);
    box-shadow:0 12px 22px -14px rgba(84,176,52,.9), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .amega-all:hover{background:linear-gradient(180deg,#5FC13C 0%,#45A229 100%)}
  .amega-all-txt{display:flex;align-items:center;margin:0}
  .amega-all-txt b{
    font-family:var(--font-head);font-weight:800;font-size:14px;line-height:1.2;color:#07230B;white-space:nowrap;
  }
  .amega-all-txt em{display:none}
  .amega-all .mega-call-go{
    display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;
    background:rgba(7,35,11,.16);color:#07230B;
  }
}

@media (max-width:360px){
  .amega-towns{grid-template-columns:minmax(0,1fr)}
}