/* =========================================================
   Adefem Concepts Solutions
   Layout follows adefemconcept.co.uk; visual design rebuilt.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* brand greens sampled from the company logo */
  --green-900: #06301F;
  --green-800: #00432E;
  --green-700: #00543A;
  --green-600: #04704A;
  --green-500: #009848;
  /* Buttons only. White on --green-500 is 3.76:1, below the 4.5:1 AA floor
     for text this size; this is the nearest green that clears it. The brand
     green is unchanged everywhere it is not carrying white text. */
  --green-cta: #00873F;
  --green-300: #5FC98C;
  --green-100: #DCF0E4;
  --green-50:  #F1F8F3;

  --ink:      #101C17;
  --ink-2:    #33463D;
  --body:     #4E6158;
  --soft:     #5F7469;

  --white:    #FFFFFF;
  --tint:     #F4F8F5;
  --line:     #E3EBE6;
  --line-2:   #D3E0D8;

  --amber:    #E8A33D;

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --sh-1: 0 1px 2px rgba(16,28,23,.05), 0 4px 12px rgba(16,28,23,.05);
  --sh-2: 0 2px 4px rgba(16,28,23,.05), 0 12px 28px rgba(16,28,23,.08);
  --sh-3: 0 4px 10px rgba(16,28,23,.06), 0 24px 60px rgba(16,28,23,.12);
  --sh-g: 0 10px 30px rgba(0,84,58,.22);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.4,0,.2,1);

  /* The floor is px, not rem, on purpose. A page gutter is a property of the
     screen, not of the text: with a rem floor it grew with the font size, and
     at high zoom on a small phone the two gutters alone were eating a fifth
     of the viewport and forcing the page to scroll sideways. 18px is within
     half a pixel of the old 1.1rem at default text, so nothing moves. */
  --pad: clamp(18px, 4vw, 3.5rem);
  --maxw: 84rem;
  --nav-h: 82px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--white);
  color: var(--body);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--green-100); color: var(--green-800); }

:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; border-radius: 4px; }

/* Balanced wrapping keeps headings from leaving one orphan word, or from
   breaking a hyphenated phrase like "no-obligation" across two lines. */
h1, h2, h3, h4, .side__h, .form-card__t { color: var(--ink); font-weight: 800; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }
/* UI labels styled as headings without being headings: sidebar cards, the
   quote card and the link rows are page furniture, not document outline. */
.lead, .sec-head p { text-wrap: pretty; }
strong { color: var(--ink-2); font-weight: 700; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.sec--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.tint { background: var(--tint); }
.green-dark { background: var(--green-800); color: rgba(255,255,255,.82); }
.green-dark h1, .green-dark h2, .green-dark h3 { color: #fff; }

.skip {
  position: absolute; left: -9999px;
  background: var(--green-700); color: #fff; padding: .85rem 1.35rem;
  border-radius: var(--r-sm); font-weight: 600; z-index: 999;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Type helpers ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-600);
}
.kicker::before { content: ""; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--green-500); }
.green-dark .kicker { color: var(--green-300); }
.green-dark .kicker::before { background: var(--green-300); }

.h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
.h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; }
.lead { font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.7; }
.small { font-size: .9rem; }
.muted { color: var(--soft); }

.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec-head .h2 { margin-top: 1rem; }
.sec-head p { margin-top: 1rem; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .kicker { justify-content: center; }
.sec-head--row { max-width: none; display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 900px) { .sec-head--row { grid-template-columns: minmax(0,1fr) auto; } }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--green-700);
  --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--bg); color: var(--fg);
  padding: .95rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: .94rem; letter-spacing: -.01em;
  border: 2px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-g); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--accent { --bg: var(--green-cta); }
.btn--white { --bg: #fff; --fg: var(--green-800); }
.btn--white:hover { box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.btn--ghost {
  --bg: transparent; --fg: var(--green-800);
  border-color: var(--line-2);
}
.btn--ghost:hover { --fg: var(--green-700); border-color: var(--green-500); box-shadow: var(--sh-2); }
.green-dark .btn--ghost,
.hero .btn--ghost,
.banner .btn--ghost,
.cta-card .btn--ghost,
.cta-band .btn--ghost { --fg: #fff; border-color: rgba(255,255,255,.35); }
.green-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.banner .btn--ghost:hover,
.cta-card .btn--ghost:hover,
.cta-band .btn--ghost:hover { --fg: var(--green-800); background: #fff; border-color: #fff; }
.btn--sm { padding: .7rem 1.25rem; font-size: .875rem; }
.btn--block { width: 100%; }

/* text link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--green-600); font-weight: 700; font-size: .92rem;
}
.tlink svg { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.tlink:hover { color: var(--green-500); }
.tlink:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .35s, transform .4s var(--ease);
}
.hdr.is-stuck { box-shadow: var(--sh-1); }
.hdr__in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }

/* `flex: none` here was the single cause of horizontal page scroll whenever
   the reader increased text size or zoomed: the brand could never shrink, so
   the logo plus the letter-spaced sub-label pushed the sticky header wider
   than the viewport and every page below it scrolled sideways. It shrinks
   now, and the label ellipses rather than shoving the layout. At normal text
   size there is ample room, so nothing changes visually. */
.brand { display: flex; align-items: center; gap: .7rem; flex: 0 1 auto; min-width: 0; }
.brand svg { width: 2.35rem; height: 2.35rem; flex: none; transition: transform .5s var(--ease); }
.brand:hover svg { transform: scale(1.06) rotate(-3deg); }
.brand__t { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand__n { font-size: 1.32rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.brand__s { font-size: .58rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--soft); }
.brand__n, .brand__s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { display: none; align-items: center; gap: .15rem; }
@media (min-width: 1180px) { .nav { display: flex; } }
.nav > li { position: relative; }
.nav > li > a {
  display: flex; align-items: center; gap: .3rem;
  padding: .6rem .68rem; border-radius: var(--r-sm);
  font-weight: 600; font-size: .93rem; color: var(--ink-2);
  transition: color .25s, background-color .25s;
}
.nav > li > a:hover, .nav > li > a[aria-current="page"] { color: var(--green-700); background: var(--green-50); }
.nav__caret { width: .7rem; height: .7rem; transition: transform .3s var(--ease); }
.nav > li:hover .nav__caret { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + .4rem); left: 0;
  min-width: 17rem; padding: .5rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav > li:hover .submenu, .nav > li:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: block; padding: .55rem .75rem; border-radius: var(--r-sm);
  font-size: .89rem; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s, color .2s, padding-left .25s var(--ease);
}
.submenu a:hover { background: var(--green-50); color: var(--green-700); padding-left: 1rem; }

.hdr__cta { display: none; }
@media (min-width: 700px) { .hdr__cta { display: inline-flex; } }

.burger {
  width: 2.85rem; height: 2.85rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); display: grid; place-items: center; flex: none;
  transition: border-color .3s, background-color .3s;
}
.burger:hover { border-color: var(--green-500); background: var(--green-50); }
@media (min-width: 1180px) { .burger { display: none; } }
.burger i { position: relative; display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .35s var(--ease);
}
.burger i::before { top: -6px; } .burger i::after { top: 6px; }
.is-menu .burger i { background: transparent; }
.is-menu .burger i::before { transform: translateY(6px) rotate(45deg); }
.is-menu .burger i::after { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  /* must sit above the sticky header (z-index 60), or the header overlaps it */
  position: fixed; inset: 0; z-index: 70;
  background: rgba(16,28,23,.45); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.is-menu .drawer { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; inset-block: 0; right: 0; width: min(24rem, 88vw);
  background: #fff; padding: 1.5rem var(--pad) 2rem;
  overflow-y: auto; transform: translateX(100%);
  transition: transform .45s var(--ease);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.is-menu .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.drawer__close { width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); border: 1px solid var(--line-2); display: grid; place-items: center; }
.drawer__close:hover { background: var(--green-50); }
.drawer nav > ul > li > a,
.drawer__disc > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 0; font-weight: 700; font-size: 1.05rem; color: var(--ink);
  border-bottom: 1px solid var(--line);
  cursor: pointer; list-style: none;
}
.drawer__disc > summary::-webkit-details-marker { display: none; }
.drawer nav > ul > li > a:hover,
.drawer__disc > summary:hover { color: var(--green-600); }
.drawer__chev { display: inline-flex; transition: transform .3s var(--ease); }
.drawer__chev svg { width: .85rem; height: .85rem; flex: none; opacity: .6; }
.drawer__disc[open] > summary { border-bottom-color: transparent; }
.drawer__disc[open] .drawer__chev { transform: rotate(180deg); }
.drawer__all { font-weight: 700 !important; color: var(--green-700) !important; }
.drawer__sub {
  padding: .25rem 0 .75rem .9rem; display: grid; gap: .1rem;
  max-height: 46vh; overflow-y: auto;
  border-bottom: 1px solid var(--line);
}
.drawer__sub a { display: block; padding: .5rem 0; font-size: .92rem; font-weight: 600; color: var(--body); }
.drawer__sub a:hover { color: var(--green-600); }
.drawer__foot { margin-top: auto; display: grid; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------- Hero slider ---------- */
.hero { position: relative; background: var(--green-900); overflow: hidden; }
.hero__track { position: relative; min-height: clamp(33rem, 78vh, 45rem); }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease-2), visibility .9s;
}
.hero__slide.is-on { opacity: 1; visibility: visible; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.hero__slide.is-on .hero__media img { transform: scale(1); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,48,31,.96) 0%, rgba(6,48,31,.9) 30%, rgba(6,48,31,.62) 55%, rgba(6,48,31,.3) 78%, rgba(6,48,31,.18) 100%),
    linear-gradient(to top, rgba(6,48,31,.55), transparent 42%);
}
.hero__in {
  position: relative; z-index: 2;
  min-height: clamp(33rem, 78vh, 45rem);
  /* the static .hero__head sits directly above this, so anchor the copy to
     the top of the band rather than centring it in the leftover space ,
     centring is what opened the gap between the two headings */
  display: flex; align-items: flex-start;
  padding-top: clamp(10.6rem, 19.2vw, 13.7rem);
  padding-bottom: clamp(8rem, 13vw, 10rem);
}
.hero__copy { max-width: 40rem; color: rgba(255,255,255,.86); }
.hero__copy .kicker { color: var(--green-300); align-items: flex-start; }
.hero__copy .kicker::before { margin-top: .6em; }
.hero__copy .kicker::before { background: var(--green-300); }
.hero__copy h1, .hero__copy h2 { color: #fff; margin: 1.1rem 0 1.25rem; }
.hero__copy p { font-size: clamp(1rem, 1.35vw, 1.16rem); max-width: 34rem; }
.hero__btns { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* per-slide entrance */
.hero__slide .anim { opacity: 0; transform: translateY(22px); }
.hero__slide.is-on .anim {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}

/* controls */
/* The badge strip floats up over the hero, so keep the controls above it. */
.hero__ctrls {
  position: absolute; z-index: 3; left: 0; right: 0;
  bottom: clamp(3.75rem, 7vw, 5.5rem);
}
.hero__ctrls-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero__dots { display: flex; align-items: center; gap: .6rem; }
/* The visible bar stays 3px. The button itself is padded out to a 24px
   target and the bar is drawn inside it, because a 3px-tall control fails
   WCAG 2.5.8 and is genuinely hard to hit. */
.hero__dot {
  position: relative; width: 2.6rem; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.28); overflow: hidden;
  box-sizing: content-box; padding-block: 11px; background-clip: content-box;
}
.hero__dot::after { content: ""; position: absolute; inset: 0; }
.hero__dot span { position: absolute; inset: 11px 0; width: 0; background: #fff; border-radius: 3px; }
.hero__dot[aria-selected="true"] span { width: 100%; transition: width var(--dur, 6s) linear; }
.hero__arrows { display: none; gap: .5rem; }
@media (min-width: 640px) { .hero__arrows { display: flex; } }
.hero__arrow {
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); color: #fff;
  display: grid; place-items: center;
  transition: background-color .3s, border-color .3s, transform .3s var(--ease);
}
.hero__arrow:hover { background: #fff; color: var(--green-800); border-color: #fff; transform: scale(1.06); }
.hero__arrow svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Trust badges strip ---------- */
.badges { position: relative; z-index: 4; }
.badges__grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-2);
}
@media (min-width: 560px) { .badges__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .badges__grid { grid-template-columns: repeat(4, 1fr); } }
.badge {
  background: #fff; padding: 1.6rem 1.4rem;
  display: flex; align-items: flex-start; gap: .95rem;
  transition: background-color .35s;
}
.badge:hover { background: var(--green-50); }
.badge__ico {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 12px;
  background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center;
  transition: background-color .35s var(--ease), color .35s, transform .35s var(--ease);
}
.badge:hover .badge__ico { background: var(--green-500); color: #fff; transform: rotate(-6deg) scale(1.05); }
.badge__ico svg { width: 1.4rem; height: 1.4rem; }
.badge__t { margin: 0; font-size: .98rem; font-weight: 800; line-height: 1.3; }
.badge p { font-size: .84rem; margin-top: .3rem; color: var(--soft); }
.badges--float { margin-top: clamp(-3.5rem, -4vw, -2rem); }

/* ---------- Split (about) ---------- */
.split { display: grid; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } }
.split--wide-r { }
@media (min-width: 940px) { .split--wide-r { grid-template-columns: .95fr 1.05fr; } }

.figure-stack { position: relative; }
.figure-stack__main {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4/3.4; box-shadow: var(--sh-3);
}
.figure-stack__main img { width: 100%; height: 100%; object-fit: cover; }
.figure-stack__sub {
  position: absolute; right: -1rem; bottom: -1.75rem;
  width: 46%; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  border: 6px solid #fff; box-shadow: var(--sh-2);
  display: none;
}
@media (min-width: 560px) { .figure-stack__sub { display: block; } }
.figure-stack__sub img { width: 100%; height: 100%; object-fit: cover; }
.figure-stack__badge {
  position: absolute; left: -1rem; top: 1.5rem;
  background: var(--green-700); color: #fff;
  border-radius: var(--r); padding: .9rem 1.1rem;
  box-shadow: var(--sh-g); display: flex; align-items: center; gap: .7rem;
}
.figure-stack__badge svg { width: 1.6rem; height: 1.6rem; color: var(--green-300); flex: none; }
.figure-stack__badge b { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.figure-stack__badge span { font-size: .72rem; opacity: .8; }

.ticks { display: grid; gap: .7rem; margin-top: 1.75rem; }
@media (min-width: 560px) { .ticks { grid-template-columns: 1fr 1fr; } }
.ticks li { display: flex; align-items: flex-start; gap: .6rem; font-size: .93rem; font-weight: 600; color: var(--ink-2); }
.ticks svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .18rem; color: var(--green-500); }

/* ---------- Service cards ---------- */
.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 620px) { .cards--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 620px) { .cards--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .cards--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: transparent; }
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--green-900); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.07); }
.card__no {
  position: absolute; left: .9rem; top: .9rem; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--green-800);
  border-radius: 999px; padding: .3rem .7rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
}
.card__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; gap: .6rem; }
.card__body h3 { font-size: 1.14rem; transition: color .3s; }
.card:hover .card__body h3 { color: var(--green-700); }
.card__body p { font-size: .9rem; color: var(--body); flex: 1; }
.card .tlink { margin-top: .35rem; }
.card__link { position: absolute; inset: 0; z-index: 3; }

/* ---------- Feature band (patio) ---------- */
.feature { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .feature { grid-template-columns: 1.05fr .95fr; } }
.feature__img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--sh-3); }
.feature__img img { width: 100%; height: 100%; object-fit: cover; }
.pill-list { display: grid; gap: .55rem; margin-top: 1.5rem; }
@media (min-width: 560px) { .pill-list { grid-template-columns: 1fr 1fr; } }
.pill-list li {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .6rem 1rem; font-size: .88rem; font-weight: 600; color: var(--ink-2);
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.pill-list li:hover { border-color: var(--green-300); transform: translateX(3px); box-shadow: var(--sh-1); }
.pill-list svg { flex: none; width: 1rem; height: 1rem; color: var(--green-500); }

/* ---------- Stats ---------- */
.stats { display: grid; gap: 1.5rem; }
@media (min-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: 1.25rem .75rem; }
.stat b { display: block; font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; }
/* direct child only, the counter lives in a span inside the <b> */
.stat > span { display: block; margin-top: .6rem; font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--green-300); }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 1.25rem; counter-reset: s; }
@media (min-width: 620px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.75rem 1.4rem 1.5rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.step__n {
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: var(--green-700); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
  margin-bottom: 1rem;
}
.step h3 { font-size: 1.06rem; }
.step p { margin-top: .5rem; font-size: .89rem; }

/* ---------- Posts ---------- */
.post { display: flex; flex-direction: column; }
.post__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--green-900); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
.post__tag {
  position: absolute; left: .85rem; top: .85rem; z-index: 2;
  background: rgba(255,255,255,.95); color: var(--green-800);
  border-radius: 999px; padding: .32rem .8rem; font-size: .72rem; font-weight: 800;
}
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .78rem; font-weight: 600; color: var(--soft); }
.post__meta i { font-style: normal; opacity: .5; }
.post :is(h2,h3) { margin-top: .5rem; font-size: 1.08rem; line-height: 1.35; transition: color .3s; }
.post:hover h3 { color: var(--green-700); }
.post p { margin-top: .55rem; font-size: .88rem; }
.post .tlink { margin-top: .85rem; }

/* ---------- Contact / forms ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: .85fr 1.15fr; } }

.info-list { display: grid; gap: .85rem; margin-top: 2rem; }
.info {
  /* Centred, not top-aligned: the tile is one line tall and the text beside it
     is three, so flex-start left the icon sitting well above the middle of the
     card. */
  display: flex; align-items: center; gap: .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  transition: border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.info:hover { border-color: var(--green-300); transform: translateX(4px); box-shadow: var(--sh-1); }
.info__ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 11px; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; }
.info__ico svg { width: 1.2rem; height: 1.2rem; }
/* The text column is a flex item, so it defaults to min-width:auto and cannot
   shrink below its longest unbreakable run. The email address is one such run.
   Without this the card spills its own padding the moment the column gets
   tight, which is what a longer address or larger text would cause. */
.info > :not(.info__ico) { min-width: 0; flex: 1 1 auto; }
.info span { overflow-wrap: anywhere; }
.info b { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
/* :not(.info__ico) is load-bearing. `.info span` is specificity (0,1,1) and
   sits after `.info__ico` (0,1,0), so it was overriding the tile's own
   `display: grid` with `display: block`. That made `place-items: center`
   inert, and the icon sat hard against the top of its tile with 22px of dead
   space under it. It also leaked a .2rem top margin onto the tile. */
.info span:not(.info__ico) { display: block; margin-top: .2rem; font-size: 1rem; font-weight: 700; color: var(--ink); word-break: break-word; }
.info em { display: block; font-style: normal; font-size: .82rem; color: var(--soft); margin-top: .1rem; }

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--sh-2);
}
.form { display: grid; gap: 1.1rem; }
/* The form pairs its fields two-up only when its own container is wide
   enough for them. A viewport media query was wrong here: the same form
   renders in a full-width card on the contact page and in a narrow aside on
   every service and area page, and in the aside it was laying out two
   columns in 256px and clipping the placeholders mid-word. */
.form-wrap { container-type: inline-size; }
.form__row { display: grid; gap: 1.1rem; }
@container (min-width: 30rem) { .form__row { grid-template-columns: 1fr 1fr; } }
@supports not (container-type: inline-size) {
  @media (min-width: 1200px) { .contact-grid .form__row { grid-template-columns: 1fr 1fr; } }
}
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-bottom: .4rem; }
.field .req { color: var(--green-600); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--tint);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .8rem .95rem; font-size: 1rem; color: var(--ink);
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234E6158' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: .7rem; padding-right: 2.4rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; background: #fff; border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(0,152,72,.13);
}
.field ::placeholder { color: var(--soft); opacity: 1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: .82rem; color: var(--soft); }
.form__msg { font-size: .87rem; font-weight: 600; }
.form__msg[data-state="error"] { color: #B3261E; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .35s, box-shadow .35s; }
.faq__item:has(.faq__q[aria-expanded="true"]) { border-color: var(--green-300); box-shadow: var(--sh-1); }
.faq__q {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.3rem; text-align: left;
  font-weight: 700; font-size: 1rem; color: var(--ink);
  transition: color .25s;
}
.faq__q:hover { color: var(--green-700); }
.faq__ico {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--green-50); color: var(--green-700);
  display: grid; place-items: center; margin-left: auto;
  transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.faq__q[aria-expanded="true"] .faq__ico { background: var(--green-500); color: #fff; transform: rotate(180deg); }
.faq__ico svg { width: .8rem; height: .8rem; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 1.3rem 1.3rem; font-size: .93rem; }

/* ---------- Page banner ---------- */
.banner { position: relative; background: var(--green-900); overflow: hidden; }
.banner__bg { position: absolute; inset: 0; }
.banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.banner__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,48,31,.95), rgba(6,48,31,.78) 55%, rgba(6,48,31,.45)); }
.banner__in { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5.5rem); }
.banner h1 { color: #fff; margin-top: 1rem; }
.banner p { color: rgba(255,255,255,.8); margin-top: 1rem; max-width: 38rem; }
.banner__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; max-width: 46rem; }
.banner__facts li { display: flex; align-items: flex-start; gap: .45rem; color: #fff; font-size: .93rem; font-weight: 600; }
.banner__facts svg { flex: none; width: 1rem; height: 1rem; margin-top: .2rem; color: var(--green-300, #8fd6a8); }
.banner__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.65); }
.crumbs a:hover { color: #fff; }
.crumbs svg { width: .7rem; height: .7rem; opacity: .6; }
.crumbs [aria-current] { color: var(--green-300); }

/* ---------- Article ---------- */
.article-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .article-grid { grid-template-columns: minmax(0,1fr) 19rem; } }
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-top: 2.5rem; }
.prose p { font-size: 1.02rem; line-height: 1.75; }
.prose .lead { font-size: 1.12rem; color: var(--ink-2); font-weight: 500; }
.prose ul { display: grid; gap: .6rem; }
.prose ul li { display: flex; align-items: flex-start; gap: .65rem; font-size: .98rem; }
.prose ul li::before {
  content: ""; flex: none; margin-top: .55rem; width: .45rem; height: .45rem;
  border-radius: 50%; background: var(--green-500);
}
.prose ul.checks li::before {
  margin-top: .3rem; width: 1.1rem; height: .8rem; border-radius: 0; background: var(--green-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='m1.5 6 4 4L14.5 1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='m1.5 6 4 4L14.5 1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.prose figure img { border-radius: var(--r-lg); box-shadow: var(--sh-2); }

.side { display: grid; gap: 1.25rem; position: sticky; top: calc(var(--nav-h) + 1.25rem); }
.side__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem; }
.side__card :is(h2,h3,.side__h) { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.side__list { display: grid; gap: .8rem; margin-top: 1rem; }
.side__list a { font-size: .9rem; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.side__list a:hover, .side__list a[aria-current] { color: var(--green-600); }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; font-weight: 600; color: var(--body); }
a.tag:hover { border-color: var(--green-300); color: var(--green-700); }

.cta-card {
  background: var(--green-800); color: rgba(255,255,255,.82);
  border-radius: var(--r-lg); padding: 1.6rem;
}
.cta-card :is(h2,h3,.side__h) { color: #fff; font-size: 1.15rem; letter-spacing: -.02em; text-transform: none; }
.cta-card p { font-size: .88rem; margin-top: .5rem; }
.cta-card .btn { margin-top: 1.1rem; }

/* ---------- Service detail ---------- */
.svc-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: minmax(0,1fr) 21rem; } }
.svc-block + .svc-block { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line); }
/* The first block after the intro (NAP strip, quick facts) had no rule of its
   own, so its heading sat hard against the NAP box above it. */
.svc-grid > div > div:first-child + .svc-block { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line); }
.svc-block h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.svc-block p { margin-top: .9rem; }
.svc-block ul { display: grid; gap: .6rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .svc-block ul { grid-template-columns: 1fr 1fr; } }
.svc-block ul li { display: flex; align-items: flex-start; gap: .65rem; font-size: .93rem; }
.svc-block ul li svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .22rem; color: var(--green-500); }
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.25rem; }
.gal figure { border-radius: var(--r); overflow: hidden; aspect-ratio: 1; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gal figure:hover img { transform: scale(1.08); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--green-800); }
.cta-band::before {
  content: ""; position: absolute; right: -8%; top: -60%;
  width: 34rem; height: 34rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,152,72,.35), transparent 68%);
}
.cta-band__in { position: relative; z-index: 1; display: grid; gap: 1.75rem; align-items: center; padding-block: clamp(2.75rem, 5vw, 4rem); }
@media (min-width: 900px) { .cta-band__in { grid-template-columns: 1fr auto; gap: 2.5rem; } }
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.cta-band p { color: rgba(255,255,255,.78); margin-top: .65rem; max-width: 34rem; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Footer ---------- */
.ftr { background: var(--green-900); color: rgba(255,255,255,.68); }
.ftr__cols { display: grid; gap: 2.5rem; padding-block: clamp(2.75rem, 5vw, 4rem); }
@media (min-width: 640px) { .ftr__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .ftr__cols { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; } }
.ftr .brand__n { color: #fff; }
.ftr .brand__s { color: rgba(255,255,255,.5); }
.ftr__about { margin-top: 1.1rem; font-size: .9rem; max-width: 22rem; }
.ftr__social { display: flex; gap: .5rem; margin-top: 1.35rem; }
.ftr__social a {
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  background: rgba(255,255,255,.09); display: grid; place-items: center;
  transition: background-color .3s, transform .3s var(--ease);
}
.ftr__social a:hover { background: var(--green-500); transform: translateY(-3px); }
.ftr__social svg { width: 1rem; height: 1rem; }
/* Footer column headings are h2, not h3: they are top-level groupings
   inside the footer landmark, and as h3 they made any page without an h2 in
   main (the thank-you page) skip a heading level. Sizing is unchanged. */
.ftr :is(h2, h3) { color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem; }
.ftr__list { display: grid; gap: .65rem; }
.ftr__list a { font-size: .9rem; transition: color .25s, padding-left .3s var(--ease); }
.ftr__list a:hover { color: #fff; padding-left: .3rem; }
.ftr__contact { display: grid; gap: .9rem; }
.ftr__contact a { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.ftr__contact a:hover { color: #fff; }
.ftr__contact svg { flex: none; width: 1rem; height: 1rem; margin-top: .25rem; color: var(--green-300); }
.ftr__phone { font-size: 1.25rem !important; font-weight: 800; color: #fff !important; letter-spacing: -.02em; }
.ftr__legal {
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: .6rem;
  padding-block: 1.35rem; font-size: .82rem;
}
@media (min-width: 640px) { .ftr__legal { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- Floating WhatsApp ---------- */
.wa {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  display: flex; align-items: center; gap: .6rem;
  /* WhatsApp's brand light green (#25D366) gives white text 1.98:1, which
     fails both the 4.5:1 text minimum and the 3:1 minimum for the icon. This
     is WhatsApp's own darker brand teal, which clears both. */
  background: #0F7A6E; color: #fff; font-weight: 700; font-size: .9rem;
  border-radius: 999px; padding: .8rem;
  /* No gap. The label collapses to max-width:0 when idle, but a flex `gap`
     is applied regardless of whether the item has any width, so the button
     sat 56x47: a squashed pill rather than a circle. The spacing the label
     needs when it opens lives on the label itself, below. */
  gap: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(16px) scale(.94); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), box-shadow .3s;
}
@media (min-width: 768px) { .wa { right: 1.75rem; bottom: 1.75rem; } }
.wa.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wa:hover { box-shadow: 0 12px 32px rgba(15,122,110,.45); }
.wa svg { width: 1.5rem; height: 1.5rem; flex: none; }
.wa span { max-width: 0; overflow: hidden; white-space: nowrap; padding: 0;
  transition: max-width .45s var(--ease), padding .45s var(--ease); }
/* padding-LEFT is what separates the label from the icon once it opens, which
   is the job the flex gap used to do badly. It collapses back to 0 with the
   label, so the idle button stays a true circle. */
.wa:hover span, .wa:focus-visible span { max-width: 9rem; padding-left: .6rem; padding-right: .25rem; }

/* ---------- Reveal ----------
   Decorative only: nothing here may leave text unreadable. main.js reveals
   anything on screen that has not animated in, and the animation below is
   short enough to finish while an element is still arriving.

   The 4s backstop is the last line of defence. If main.js never runs (a failed
   or blocked request) the .js class is already on <html> from the inline
   snippet in <head>, so without this the entire page would sit at opacity 0.
   The animation ends at the visible state and holds it, so it is harmless when
   the script does run and everything is revealed long before it fires. */
.js [data-rise] { opacity: 0; transform: translateY(22px); }
/* Only while the reveal has NOT initialised. main.js adds .rise-ready as soon
   as it takes over, which removes this; scoping it that way matters, because
   applied unconditionally it reveals every element on the page at 4s and the
   animation never runs again for the rest of the visit. */
.js:not(.rise-ready) [data-rise] { animation: rise-failsafe 0s linear 4s forwards; }
.js [data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease) var(--d, 0s), transform .55s var(--ease) var(--d, 0s);
}
/* Already on screen at first paint: show it, do not animate it. */
.js [data-rise].is-now {
  opacity: 1; transform: none; transition: none; animation: none;
}
@keyframes rise-failsafe { to { opacity: 1; transform: none; } }

/* ---------- 404 ---------- */
.nf { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.nf__code { font-size: clamp(5rem, 16vw, 10rem); font-weight: 800; line-height: .9; color: var(--green-500); letter-spacing: -.05em; }
.nf h1 { margin-top: .5rem; max-width: 22ch; margin-inline: auto; }
.nf p { margin-top: 1rem; max-width: 30rem; margin-inline: auto; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; }

/* ---------- Customer reviews ----------------------------------------
   Real Google reviews shown as visible content. The star row is two
   identical 5-star rows stacked, the top one clipped to a percentage, so a
   4.6 renders as 4.6 rather than being rounded up to five full stars. */
/* Flex rows, not inline text: the reset sets `svg { display: block }`, which
   stacked the five stars vertically when this relied on inline layout.
   `flex: none` on the stars matters too, or the clipped overlay row would
   shrink its stars to fit instead of cropping them, and 4.6 would render as
   five slightly narrower full stars. */
.stars { position: relative; display: inline-flex; vertical-align: -.2em; }
.stars__base, .stars__fill { display: flex; gap: .12em; }
.stars svg { flex: none; width: 1.05em; height: 1.05em; }
.stars__base { color: var(--line-2); }
.stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--amber); }
.revsum { margin-top: .6rem; font-size: .95rem; color: var(--body); display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .55rem; }
.revsum strong { color: var(--ink); font-weight: 800; }

.revs { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 720px)  { .revs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .revs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rev {
  position: relative; margin: 0; display: flex; flex-direction: column; gap: .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem 1.4rem 1.3rem;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.rev:hover { border-color: var(--green-300); box-shadow: var(--sh-1); transform: translateY(-2px); }
.rev__mark { color: var(--green-100); line-height: 0; }
.rev__mark svg { width: 1.9rem; height: 1.9rem; }
.rev blockquote { margin: 0; }
.rev blockquote p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.rev__by { margin-top: auto; font-size: .88rem; font-weight: 800; color: var(--ink); display: flex; flex-direction: column; gap: .1rem; }
.rev__by span { font-size: .78rem; font-weight: 600; color: var(--soft); }

/* ---------- Long-string containment ----------
   A long unbreakable run of text (the email address above all, and now the
   street address) sets its container's min-content width. Once the reader
   zooms or raises the default font size, that width can exceed the viewport,
   and the whole page then scrolls sideways with content cut off at the right
   edge. Flex and grid children make it worse, because they default to
   min-width:auto and refuse to shrink below it.

   These are the places on this site that carry such a string. `anywhere`
   rather than `break-word` is deliberate: only `anywhere` actually reduces
   the min-content size, which is the thing doing the damage. */
.ftr__contact a, .ftr__nap-addr, .ftr__nap-addr span,
.nap__item, .nap__item span, .info span:not(.info__ico),
.areagrid__item, .areagrid__name, .areagrid__pc {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- Utilities ---------- */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:2.5rem}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-rise] { opacity: 1; transform: none; animation: none; }
  .hero__slide .anim { opacity: 1; transform: none; }
  .hero__media img { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .hdr, .drawer, .wa, .hero__ctrls, .cta-band { display: none !important; }
  body { color: #000; }
  .green-dark, .ftr, .banner { background: #fff !important; color: #000 !important; }
}

/* ---------- Promo video ---------- */
.video-split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .video-split { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); } }

.vplayer {
  position: relative; margin-inline: auto;
  width: 100%; max-width: 21rem; aspect-ratio: 480/854;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--green-900); box-shadow: var(--sh-3);
}
.vplayer video, .vplayer__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.vplayer video { background: var(--green-900); }
.vplayer__poster { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; }
.vplayer__poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,48,31,.55), transparent 55%);
  transition: opacity .4s;
}
.vplayer__poster:hover::after { opacity: .75; }
.vplayer__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--green-700);
  display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  transition: transform .4s var(--ease), background-color .3s;
}
.vplayer__poster:hover .vplayer__play { transform: translate(-50%,-50%) scale(1.08); background: #fff; }
.vplayer__play svg { width: 1.5rem; height: 1.5rem; margin-left: .18rem; }
.vplayer__len {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 2;
  background: rgba(6,48,31,.75); color: #fff; pointer-events: none;
  border-radius: 999px; padding: .25rem .7rem; font-size: .74rem; font-weight: 700;
}
.vplayer.is-playing .vplayer__poster { display: none; }

.transcript { margin-top: 1.75rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.transcript > summary {
  cursor: pointer; list-style: none; padding: .95rem 1.15rem;
  font-size: .88rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.transcript > summary::-webkit-details-marker { display: none; }
.transcript > summary svg { width: .8rem; height: .8rem; color: var(--green-600); transition: transform .3s var(--ease); flex: none; }
.transcript[open] > summary svg { transform: rotate(180deg); }
.transcript__body { padding: 0 1.15rem 1.15rem; }
.transcript__body p { font-size: .9rem; line-height: 1.65; }
.transcript__body p + p { margin-top: .5rem; }

/* ---------- Work galleries ---------- */
.gallery + .gallery { margin-top: clamp(2.5rem, 5vw, 4rem); }
.gallery__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.25rem; margin-bottom: 1.25rem; }
.gallery__head h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.gallery__head p { font-size: .88rem; color: var(--soft); }
/* Galleries hold four or five photos, so at some widths the last one was
   landing alone with empty cells beside it. A lone tile on the final row
   now stretches across it instead, which reads as a choice rather than a
   gap. */
.gallery__grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, 1fr); }
.gallery__grid > .shot:last-child:nth-child(2n + 1) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
@media (min-width: 760px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); }
  .gallery__grid > .shot:last-child:nth-child(2n + 1) { grid-column: auto; aspect-ratio: 4 / 3.4; }
  .gallery__grid > .shot:last-child:nth-child(4n + 1) { grid-column: 1 / -1; aspect-ratio: 16 / 5; }
}
@media (min-width: 1100px) {
  .gallery__grid--5 { grid-template-columns: repeat(5, 1fr); }
  .gallery__grid--5 > .shot:last-child:nth-child(4n + 1) { grid-column: auto; aspect-ratio: 4 / 3.4; }
}
.shot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r); aspect-ratio: 4/3.4; background: var(--green-900);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.shot:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.shot:hover img { transform: scale(1.07); }

/* =========================================================
   Local SEO components
   ========================================================= */

/* ---------- NAP ---------- */
.nap {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  margin-top: 1.75rem; padding: 1rem 1.15rem;
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--r);
}
.nap__item { display: inline-flex; align-items: flex-start; gap: .5rem; font-size: .89rem; color: var(--body); }
.nap__item svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .15rem; color: var(--green-500); }
.nap__item strong { color: var(--ink); font-weight: 700; }
.nap__item a:hover { color: var(--green-600); }
.nap--head { background: #fff; }

/* footer NAP, the canonical address block */
.ftr__nap { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.ftr__nap-name { color: #fff; font-weight: 700; font-size: .92rem; }
.ftr__nap-addr { display: flex; align-items: flex-start; gap: .6rem; margin-top: .5rem; font-size: .88rem; line-height: 1.5; }
.ftr__nap-addr svg { flex: none; width: 1rem; height: 1rem; margin-top: .2rem; color: var(--green-300); }
.ftr__nap-note { margin-top: .5rem; font-size: .8rem; color: rgba(255,255,255,.5); }

/* ---------- Local intro band ---------- */
.localhead { max-width: 62rem; }
.localhead .h2 { max-width: 44rem; }

/* ---------- Map embed ---------- */
.mapbox {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4/3; box-shadow: var(--sh-2); border: 1px solid var(--line);
  background: var(--tint);
}
.mapbox iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Areas grid ---------- */
.areagrid { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .areagrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .areagrid { grid-template-columns: repeat(4, 1fr); } }
.areagrid__item {
  display: flex; flex-direction: column; gap: .15rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: .85rem 1rem;
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.areagrid__item:hover { border-color: var(--green-300); transform: translateY(-3px); box-shadow: var(--sh-1); }
.areagrid__name { font-weight: 700; font-size: .93rem; color: var(--ink); }
.areagrid__item:hover .areagrid__name { color: var(--green-700); }
.areagrid__pc { font-size: .74rem; font-weight: 600; letter-spacing: .05em; color: var(--soft); }

/* ---------- Numbered process list ---------- */
.steplist { display: grid; gap: 1rem; margin-top: 1.25rem; counter-reset: none; }
.steplist li { display: flex; align-items: flex-start; gap: .9rem; }
.steplist__n {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px;
  background: var(--green-50); color: var(--green-700);
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}
.steplist li > span:last-child { display: block; }
.steplist strong { display: block; color: var(--ink); font-weight: 700; font-size: .97rem; margin-bottom: .2rem; }
.steplist strong + span { display: block; font-size: .91rem; color: var(--body); line-height: 1.6; }

/* ---------- Services offered in an area ---------- */
.localsvc { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 700px) { .localsvc { grid-template-columns: 1fr 1fr; } }
.localsvc__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  transition: border-color .3s, box-shadow .3s;
}
.localsvc__item:hover { border-color: var(--green-300); box-shadow: var(--sh-1); }
.localsvc__item :is(h2,h3) { font-size: 1rem; line-height: 1.3; }
.localsvc__item :is(h2,h3) a { color: var(--ink); transition: color .25s; }
.localsvc__item :is(h2,h3) a:hover { color: var(--green-700); }
.localsvc__item p { margin-top: .45rem; font-size: .88rem; color: var(--body); }

/* ---------- Related-link rows ---------- */
.linkrow { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.linkrow :is(h2,h3,.side__h) { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.linkrow__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.linkrow__links a {
  border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem .95rem; font-size: .85rem; font-weight: 600; color: var(--ink-2);
  transition: border-color .25s, color .25s, background-color .25s;
}
.linkrow__links a:hover { border-color: var(--green-300); color: var(--green-700); background: var(--green-50); }
.tint .linkrow { border-top-color: var(--line-2); }
.tint .linkrow__links a { background: #fff; }

/* ---------- Print ---------- */
@media print { .mapbox, .linkrow { display: none !important; } }

/* ---------- Hero: static H1 ----------
   Sits above the rotating slide copy and never changes, so the page has
   one H1, it is visible, and it states category + city. */
.hero__head {
  position: absolute; z-index: 3; left: 0; right: 0;
  top: clamp(2.5rem, 6vw, 4.5rem);
  pointer-events: none;
}
.hero__head .kicker { color: var(--green-300); }
.hero__head .kicker::before { background: var(--green-300); }
.hero__h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.08;
  margin-top: .7rem;
  max-width: 20ch;
  text-wrap: balance;
}
/* the rotating service name is the secondary line under the H1 */
.hero__copy h2.h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }


/* ---------- Hero: rotating service tag ----------
   Still an <h2> naming the service, but it must not read as a second
   headline, nor mimic the dashed kicker above the H1, that repetition
   was making it look like a duplicated eyebrow. Its own treatment:
   a quiet translucent pill. */
.hero__tag {
  display: inline-flex; align-items: center;
  padding: .42rem .95rem;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
  margin-bottom: 1.3rem;
}
@media (max-width: 560px) { .hero__tag { font-size: .72rem; letter-spacing: .1em; padding: .36rem .8rem; } }

/* ---------- Tap targets ----------
   WCAG 2.2 (2.5.8 Target Size, Minimum) wants 24x24 CSS px. It is not a
   viewport-conditional rule: a touch tablet at 1024px needs the same target
   a phone does, and these were 19px tall at every width above 700. Padding
   is added rather than font size, so nothing about the design changes. */
.crumbs a, .crumbs span,
.ftr__list a, .side__list a,
.ftr__contact a, .nap__item a,
.tag { display: inline-flex; align-items: center; min-height: 26px; }

@media (max-width: 700px) {
  .ftr__list { gap: .3rem; }
  .side__list { gap: .5rem; }
}

/* ---------- Areas hub: regional groups ----------
   Sixty area cards in one flat grid is unreadable. Grouping gives the
   reader a way in and the crawler a clearer hierarchy. */
.arearegion + .arearegion { margin-top: clamp(2.5rem, 5vw, 4rem); }
.arearegion__h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem .9rem;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  padding-bottom: .8rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.arearegion__h span {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--soft);
}

/* ---------- Quick facts -------------------------------------------------
   A labelled summary of the job at the top of every area x service page.
   Two columns on anything wider than a phone, one below that. */
.facts {
  margin: 1.75rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--tint);
  overflow: hidden;
}
.facts > div {
  display: grid;
  /* min() so the label track can collapse below 9rem rather than forcing the
     row wider than its container once the root font grows. */
  grid-template-columns: minmax(min(9rem, 34%), 34%) 1fr;
  gap: 0 1rem;
  padding: .7rem 1rem;
  border-top: 1px solid var(--line);
}
.facts > div:first-child { border-top: 0; }
.facts dt {
  margin: 0;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soft);
  align-self: center;
}
.facts dd { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink); }
@media (max-width: 30rem) {
  .facts > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------- Hero quote card -----------------------------------------
   The slider, the H1 and the controls live in .hero__stage. On a wide
   screen the card is laid over that stage; below 62rem there is no room
   beside the copy, so it drops out of the overlay and becomes an ordinary
   band underneath. One form in the DOM either way, so no duplicate ids. */
.hero__stage { position: relative; }

.hero__aside {
  position: relative; z-index: 4;
  background: var(--green-900);
  padding: 0 0 clamp(2.5rem, 6vw, 3.5rem);
}
.hero__aside-in { display: flex; justify-content: center; }

@media (min-width: 62rem) {
  /* The band has to be tall enough to hold the card between the sticky
     header and the trust strip that floats up over the hero foot. */
  .hero__track, .hero__in { min-height: 56rem; }
  .hero__aside {
    position: absolute; inset: 0;
    background: none; padding: 0;
    pointer-events: none;
  }
  .hero__aside-in {
    height: 100%;
    align-items: center; justify-content: flex-end;
    padding-top: 5.25rem;
    padding-bottom: 6rem;
  }
  .hero__form { pointer-events: auto; }
  /* Group the slider controls under the copy so the arrows do not end up
     behind the quote card on the right. */
  .hero__ctrls-in { justify-content: flex-start; gap: 1.75rem; }
  /* keep the rotating copy clear of the card */
  .hero__copy { max-width: 31rem; }
  .hero__copy p { max-width: 29rem; }
  .hero__h1 { max-width: 15ch; }
}

.hero__form {
  width: min(26rem, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  box-shadow: 0 24px 60px rgba(0, 32, 22, .28);
}
.hero__form .kicker { color: var(--green-700); }
.hero__form .kicker::before { background: var(--green-700); }
.hero__form h2 { color: var(--ink); }
.hero__form .small { color: var(--soft); }

/* The compact variant stacks one field per row and takes a full-width
   button, because the card is a single narrow column. Everything is a
   little tighter so the card fits the hero band without scrolling. */
.form--compact { gap: .7rem; }
.form--compact .form__row { grid-template-columns: 1fr; gap: .7rem; }
.form--compact .field label { font-size: .78rem; margin-bottom: .3rem; }
.form--compact .field input,
.form--compact .field select,
.form--compact .field textarea { padding: .62rem .8rem; font-size: .95rem; }
.form--compact .btn { margin-top: .35rem; }
.form--compact .form__note { margin-top: .8rem; font-size: .78rem; }
.form--compact .form__msg { margin-top: .6rem; }
.btn--wide { width: 100%; justify-content: center; }

/* ---------- Thank you ---------- */
.ty { max-width: 46rem; margin-inline: auto; text-align: center; }
.ty__ico {
  width: 3.6rem; height: 3.6rem; margin: 0 auto 1.5rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-600); color: #fff;
}
.ty__ico svg { width: 1.6rem; height: 1.6rem; }

/* The line under the shortened area grid, pointing at the full list. */
.areagrid__more {
  margin-top: 1.5rem;
  font-size: .95rem;
  color: var(--soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem;
}

/* ---------- Areas hub cards -----------------------------------------
   One card per area: the name links to the area page, and each chip goes
   straight to that service in that area. */
.areacards {
  display: grid; gap: 1rem;
  /* min(..., 100%) so a 15rem track cannot be wider than the container it
     sits in. At large text 15rem exceeds a phone viewport and the grid was
     pushing the page into horizontal scroll. */
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.areacard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.25rem 1.35rem;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.areacard:hover { border-color: var(--green-300); box-shadow: var(--sh-2); transform: translateY(-2px); }
.areacard__h { font-size: 1.12rem; line-height: 1.2; margin: 0; }
.areacard__h a { color: var(--ink); }
.areacard__h a:hover { color: var(--green-700); }
.areacard__pc {
  margin: .3rem 0 0;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--soft);
}
.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.pill {
  display: inline-flex; align-items: center;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: var(--green-50);
  border: 1px solid transparent;
  font-size: .78rem; font-weight: 600; line-height: 1.25;
  color: var(--green-800);
  transition: background-color .25s, border-color .25s, color .25s;
}
.pill:hover { background: #fff; border-color: var(--green-300); color: var(--green-700); }
@media (max-width: 30rem) {
  .areacards { grid-template-columns: 1fr; }
}

/* ---------- Blog index: category listings ----------
   The index carries 55 articles. As image cards that was 61 photographs on
   one page, around 5MB fully scrolled, and a wall of thumbnails is harder to
   scan than a list of titles. The six latest keep their cards; everything
   below is a compact list. */
.postlist { display: grid; gap: .5rem; margin-top: 1.75rem; }
@media (min-width: 760px) { .postlist { grid-template-columns: 1fr 1fr; gap: .5rem 1.75rem; } }
.postlist__item { list-style: none; }
.postlist__link {
  display: block; padding: .95rem 1.1rem; border-radius: var(--r);
  border: 1px solid transparent; transition: background-color .25s, border-color .25s, transform .25s var(--ease);
}
.postlist__link:hover { background: #fff; border-color: var(--line); transform: translateY(-2px); }
.tint .postlist__link:hover { background: #fff; }
.postlist__link h3 {
  font-size: 1.02rem; font-weight: 700; line-height: 1.35; color: var(--ink);
  letter-spacing: -.01em; margin: 0;
}
.postlist__link:hover h3 { color: var(--green-700); }
.postlist__link p {
  font-size: .88rem; color: var(--soft); margin-top: .35rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.postlist__meta {
  display: block; margin-top: .5rem; font-size: .76rem; color: var(--soft);
  letter-spacing: .02em;
}
.postlist__meta i { font-style: normal; margin: 0 .4rem; opacity: .5; }

/* Click-to-load area map placeholder. */
.mapbox--click { display: grid; place-items: center; background: var(--green-50, #eef7f1); aspect-ratio: 16 / 5; }
.mapbox--click:has(iframe) { aspect-ratio: 4 / 3; }
.mapbox__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.2rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 700; color: var(--ink); cursor: pointer; }
.mapbox__btn svg { width: 1.1rem; height: 1.1rem; color: var(--green-600, #00873F); }
.mapbox__btn:hover { border-color: var(--green-300, #8fd6a8); }