/* ============================================================
   Nidia's Cleaning Services — stylesheet
   Palette derived from the logo: vivid green + magenta on white
   ============================================================ */

:root{
  /* brand */
  --green-900:#1f4d10;
  --green-800:#2e6b17;
  --green-700:#3d8a1e;
  --green-600:#4ea524;
  --green-500:#63bd2e;
  --green-300:#a8e07c;
  --green-100:#e6f7d9;
  --green-50:#f3fbec;

  --magenta-800:#94104f;
  --magenta-700:#b01461;
  --magenta-600:#c2186f;
  --magenta-500:#d8267f;
  --magenta-100:#fce4f0;
  --magenta-50:#fdf2f7;

  /* neutrals */
  --ink:#16200f;
  --body:#4a5443;
  --muted:#77806f;
  --line:#e3e8de;
  --surface:#ffffff;
  --surface-alt:#f7faf4;

  --gold:#f5a623;

  /* type — a serif display face against a sans UI face gives the page a
     voice. Fraunces has a variable optical size, so large headings get
     finer detail automatically. */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Fraunces','Iowan Old Style',Georgia,'Times New Roman',serif;

  /* shape */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-pill:999px;

  /* Layered shadows — a tight contact shadow plus a wide soft one
     reads far more naturally than a single large blur. */
  --shadow-sm:0 1px 2px rgba(22,32,15,.05),0 2px 8px rgba(22,32,15,.04);
  --shadow:0 2px 4px rgba(22,32,15,.04),0 8px 20px rgba(22,32,15,.06),0 20px 40px rgba(22,32,15,.05);
  --shadow-lg:0 4px 8px rgba(22,32,15,.05),0 16px 32px rgba(22,32,15,.08),0 32px 72px rgba(22,32,15,.09);
  --shadow-green:0 8px 24px rgba(78,165,36,.22);
  --shadow-magenta:0 8px 24px rgba(194,24,111,.26);

  /* Gradients */
  --grad-green:linear-gradient(135deg,var(--green-500) 0%,var(--green-700) 100%);
  --grad-magenta:linear-gradient(135deg,var(--magenta-500) 0%,var(--magenta-700) 100%);
  --grad-ink:linear-gradient(160deg,#1d2a13 0%,var(--ink) 60%,#0f1608 100%);

  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-700);text-decoration:none}
a:hover{color:var(--green-800)}
/* Display headings in Fraunces; opsz lets the face refine itself as it grows */
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);margin:0 0 .5em;
  font-weight:600;font-variation-settings:'opsz' 100;
  line-height:1.08;letter-spacing:-.022em;
}
h1{font-size:clamp(2.6rem,6vw,4.75rem);letter-spacing:-.032em;line-height:1.02}
h2{font-size:clamp(2rem,4vw,3.15rem);letter-spacing:-.026em;line-height:1.07}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-.014em;font-variation-settings:'opsz' 24}
h4{font-family:var(--font);color:var(--ink);margin:0 0 .5em;font-weight:800}

/* The emphasis line — italic serif in brand green. This is the single
   move that gives a heading a voice rather than just size. */
.em{
  font-style:italic;font-weight:600;
  color:var(--green-700);
  letter-spacing:-.018em;
}
.em--magenta{color:var(--magenta-600)}

.lede{text-wrap:pretty}
h1,h2{text-wrap:balance}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}
/* Inline fill="none" must win over this, so scope it to svgs that
   don't declare their own fill. */
/* Icon sizing only — SVGs that declare their own size (Leaflet's map
   overlay, for one) keep it. */
svg:not([width]){width:1em}
svg:not([height]){height:1em}
svg:not([fill]){fill:currentColor}
:focus-visible{outline:3px solid var(--green-600);outline-offset:3px;border-radius:4px}

/* Clipped rather than pushed off-canvas — a negative `left` widens the
   document box and causes horizontal overflow. */
.skip-link{
  position:absolute;top:0;left:0;z-index:999;
  width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  background:var(--green-700);color:#fff;padding:.75rem 1.25rem;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus,
.skip-link:focus-visible{
  width:auto;height:auto;clip-path:none;overflow:visible;
}

/* ---------- layout ---------- */
.wrap{width:min(1200px,calc(100% - 3rem));margin-inline:auto}
.header .wrap{width:min(1320px,calc(100% - 2.5rem))}
.wrap--narrow{width:min(820px,calc(100% - 3rem))}
.section{padding:clamp(4.25rem,8.5vw,7rem) 0}
.section--alt{background:var(--surface-alt);border-block:1px solid var(--line)}

.grid{display:grid;gap:1.5rem}
.grid--3{grid-template-columns:repeat(3,1fr)}

/* The container is full width; only the heading takes a short measure. */
.sec-head{margin-bottom:3.25rem;max-width:none}
.sec-head h2{max-width:20ch}
.sec-head__sub{max-width:56ch}
.sec-head--center{text-align:center}
.sec-head--center h2,
.sec-head--center .sec-head__sub{margin-inline:auto}
.sec-head h2{margin-bottom:.4em}
.sec-head__sub{color:var(--muted);font-size:1.05rem;margin:0}
.sec-head code{background:var(--green-100);padding:.15em .45em;border-radius:6px;font-size:.9em;color:var(--green-800)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.73rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta-600);margin:0 0 1rem;
}
.eyebrow::before{
  content:"";width:18px;height:1.5px;background:currentColor;
  border-radius:2px;opacity:.6;
}
.eyebrow--light{color:var(--green-300)}

.hl{position:relative;white-space:nowrap;color:var(--green-700)}
.hl::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.06em;height:.34em;
  background:var(--green-100);border-radius:var(--r-pill);
  z-index:-1;transform:rotate(-.7deg);opacity:.9;
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--green-600);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:inherit;font-size:.97rem;font-weight:700;line-height:1;
  padding:.95rem 1.6rem;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);
  border:2px solid var(--btn-bd);cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
  white-space:nowrap;text-align:center;
}
.btn:hover{transform:translateY(-2px);color:var(--btn-fg)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:1.05em;height:1.05em}

/* Sheen that sweeps across on hover */
.btn--primary,.btn--outline{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::before,.btn--outline::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn--primary:hover::before,.btn--outline:hover::before{transform:translateX(120%)}

.btn--primary{--btn-bg:var(--magenta-600);--btn-fg:#fff;--btn-bd:transparent;box-shadow:0 1px 2px rgba(148,16,79,.2),0 6px 18px rgba(194,24,111,.22)}
.btn--primary:hover{--btn-bg:var(--magenta-700);box-shadow:0 2px 6px rgba(148,16,79,.24),0 12px 28px rgba(194,24,111,.3)}

.btn--outline{--btn-bg:transparent;--btn-fg:var(--green-800);--btn-bd:var(--green-300)}
.btn--outline:hover{--btn-bg:var(--green-50);--btn-bd:var(--green-600)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bg:var(--green-50);--btn-bd:var(--green-300);--btn-fg:var(--green-800)}

.btn--ink{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:transparent}
.btn--ink:hover{--btn-bg:#0d1508}

.btn--sm{padding:.65rem 1.1rem;font-size:.87rem}
.btn--lg{padding:1.1rem 2rem;font-size:1.05rem}
.btn--full{width:100%}

.link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;font-size:.93rem;color:var(--magenta-600);
}
.link span{transition:transform .2s var(--ease)}
.link:hover{color:var(--magenta-700)}
.link:hover span{transform:translateX(4px)}

/* ---------- topbar ---------- */
.topbar{background:var(--ink);color:#b9c7ad;font-size:.82rem;letter-spacing:.01em}
.topbar__inner{display:flex;align-items:center;gap:.7rem;min-height:42px;flex-wrap:wrap}
.topbar__sep{opacity:.5}
.topbar__phone{margin-left:auto;color:#fff;font-weight:700;letter-spacing:.02em}
.topbar__phone:hover{color:var(--green-300)}

/* ---------- header ---------- */
/* Floating pill header — detached from the viewport edge, and it
   tightens as you scroll rather than just gaining a shadow. */
.header{
  position:sticky;top:.85rem;z-index:100;
  transition:top .3s var(--ease);
}
.header__inner{
  display:flex;align-items:center;gap:1.25rem;
  min-height:64px;padding:0 .55rem 0 1rem;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(1.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  border:1px solid rgba(227,232,222,.9);
  border-radius:var(--r-pill);
  box-shadow:0 2px 6px rgba(22,32,15,.04),0 10px 30px rgba(22,32,15,.07);
  transition:box-shadow .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.header.is-stuck .header__inner{
  background:rgba(255,255,255,.93);
  box-shadow:0 3px 10px rgba(22,32,15,.06),0 14px 40px rgba(22,32,15,.10);
  transform:scale(.985);
}

.brand{display:flex;align-items:center;gap:.7rem;color:inherit;flex-shrink:0}
.brand img{border-radius:50%;width:52px;height:52px;object-fit:cover}
.header .brand img{width:42px;height:42px}
.header .brand__text strong{font-size:.98rem}
.header .brand__text em{font-size:.6rem}
.brand__text{display:flex;flex-direction:column;line-height:1.2}
.brand__text strong{font-size:1.06rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.brand__text em{font-style:normal;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta-600);font-weight:700}

.nav{display:flex;gap:.1rem;margin-left:auto;flex-wrap:nowrap}
.nav a{
  position:relative;white-space:nowrap;
  padding:.5rem .52rem;border-radius:var(--r-sm);
  font-size:.875rem;font-weight:600;color:var(--body);
  transition:color .2s var(--ease);
}
/* Underline grows from the centre instead of a filled pill */
.nav a::after{
  content:"";position:absolute;left:.52rem;right:.52rem;bottom:.26rem;height:2px;
  background:var(--grad-green);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .28s var(--ease);
}
.nav a:hover,.nav a.is-active{color:var(--green-800)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}

.header__cta{display:flex;gap:.6rem;flex-shrink:0}

.burger{
  display:none;width:46px;height:46px;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-sm);cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero (editorial) ----------
   Asymmetric: oversized type breaking out of the column, image offset
   below the fold line, numbered index down the side.
--------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem);
  background:var(--surface);
}
/* Faint ruled baseline grid — editorial texture, not decoration */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px);
  background-size:100% 88px;
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
}
.hero .wrap{position:relative}

.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,.88fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:end;
}

.hero__copy{position:relative;z-index:2}

/* Type breaks past its column into the image gutter */
.hero h1{
  margin:0 0 1.4rem;
  font-size:clamp(2.75rem,7.4vw,6.4rem);
  line-height:.94;
  letter-spacing:-.042em;
  width:max-content;max-width:min(115%,100vw - 3rem);
}
.hero h1 .em{display:inline-block}

.lede{
  font-size:clamp(1.02rem,1.45vw,1.14rem);
  color:var(--body);max-width:40ch;margin-bottom:2.1rem;line-height:1.62;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.4rem}

/* Trust row as a ruled editorial strip */
.hero__trust{
  position:relative;
  display:grid;grid-template-columns:repeat(3,auto);
  justify-content:start;gap:0;
  padding-top:.95rem;
}
.hero__trust::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1.5px;
  background:var(--ink);transform:scaleX(var(--rule-scale,1));transform-origin:left center;
}
.hero__trust li{
  display:flex;flex-direction:column;gap:.1rem;
  padding-right:2.1rem;margin-right:2.1rem;
  border-right:1px solid var(--line);
}
.hero__trust li:last-child{border-right:0;padding-right:0;margin-right:0}
.hero__trust strong{
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:600;color:var(--ink);
  letter-spacing:-.03em;line-height:1;
}
.hero__trust span{
  font-size:.7rem;font-weight:700;color:var(--muted);
  letter-spacing:.11em;text-transform:uppercase;
}

/* Image column, dropped below the headline baseline */
.hero__media{position:relative;padding-left:2rem}

.hero__rail{
  position:absolute;left:0;top:0;
  transform:rotate(180deg);
  writing-mode:vertical-rl;
  font-size:.66rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}

.hero__figure{position:relative;margin:0}
.hero__img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:2px;
  box-shadow:0 2px 8px rgba(22,32,15,.06),0 24px 60px rgba(22,32,15,.13);
}
.hero__chip{
  position:absolute;right:0;bottom:-.85rem;
  background:var(--ink);color:#fff;
  padding:.5rem .9rem;border-radius:2px;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

/* Years marker — sits in the gutter left of the image, clear of it */
.hero__float{
  position:absolute;left:2rem;bottom:1.75rem;z-index:2;
  display:flex;align-items:baseline;gap:.55rem;
  background:var(--surface);
  padding:.75rem 1rem;border-radius:2px;
  box-shadow:0 2px 10px rgba(22,32,15,.10),0 14px 36px rgba(22,32,15,.12);
}
.hero__float strong{
  font-family:var(--font-display);
  font-size:3.1rem;font-weight:600;line-height:1;
  color:var(--ink);letter-spacing:-.04em;
}
.hero__float strong span{color:var(--magenta-600)}
.hero__float-label{
  font-size:.66rem;font-weight:700;line-height:1.35;color:var(--muted);
  letter-spacing:.11em;text-transform:uppercase;
}

/* ---------- imagery ---------- */
.hero__img{
  width:100%;aspect-ratio:5/6;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
}
.about__img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--shadow);
}
.gal__img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--r);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.gal__img:hover{transform:scale(1.02);box-shadow:var(--shadow)}

.about__media{position:relative}

/* ---------- strip ---------- */
.strip{background:var(--green-800);color:#fff;padding:1.05rem 0}
.strip__inner{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.strip__label{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-300)}
.strip__list{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.strip__list li{
  padding:.4rem 1.1rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);font-size:.92rem;font-weight:700;
}

/* ---------- value cards ---------- */
.vcard{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2.15rem 1.85rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.vcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-green);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--green-300)}
.vcard:hover::before{transform:scaleX(1)}
.vcard__icon{
  width:54px;height:54px;border-radius:16px;margin-bottom:1.25rem;
  display:grid;place-items:center;
  background:var(--green-100);color:var(--green-700);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.vcard:hover .vcard__icon{background:var(--green-600);color:#fff}
.vcard:hover .vcard__icon{transform:scale(1.06) rotate(-4deg)}
.vcard__icon svg{width:26px;height:26px}
.vcard p{margin:0;font-size:.97rem}

/* ---------- stats ---------- */
.stats{
  position:relative;padding:clamp(2.5rem,4.5vw,3.25rem) 0;
  background:var(--surface);border-block:1px solid var(--line);
}
.stats__inner{position:relative}
.stats__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stat{display:flex;flex-direction:column;gap:.35rem}
.stat strong{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,4.2vw,3.1rem);font-weight:600;
  line-height:1;letter-spacing:-.03em;color:var(--ink);
}
.stat span{
  font-size:.76rem;font-weight:700;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;
}

/* ---------- why ---------- */
.why-grid{gap:1.5rem}
.why{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:2.25rem 1.75rem 1.75rem;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.why:hover{border-color:var(--green-300);transform:translateY(-3px)}
.why__num{
  display:inline-block;margin-bottom:.8rem;
  font-family:var(--font-display);
  font-size:2.4rem;font-weight:600;letter-spacing:-.03em;line-height:1;
  color:var(--green-300);
  transition:color .3s var(--ease);
}
.why:hover .why__num{color:var(--green-600)}
.why:hover .why__num{opacity:1}
.why h3{margin-bottom:.45rem;font-size:1.12rem}
.why p{margin:0;font-size:.95rem}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:s}
.step{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:2.5rem 1.5rem 1.75rem;
}
.step__n{
  position:absolute;top:-26px;left:1.5rem;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-700);color:#fff;
  font-family:var(--font-display);font-size:1.35rem;font-weight:700;
  border:5px solid var(--surface-alt);
  transition:transform .3s var(--ease);
}
.step:hover .step__n{transform:scale(1.08)}
.step{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-300)}
.step h3{font-size:1.1rem;margin-bottom:.45rem}
.step p{margin:0;font-size:.95rem}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about__copy h2{margin-bottom:.7em}
.about__copy p{font-size:1.03rem}
.about__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.75rem}

/* ---------- BBB seal (About section) ----------
   Our own seal, not BBB's logo. The ring text turns slowly; script.js
   adds a spring entrance on scroll and a tilt that follows the pointer.
------------------------------------------------ */
.bbb{
  display:flex;align-items:center;gap:1.1rem;
  margin:.75rem 0 0;padding:.9rem 1.4rem .9rem .9rem;max-width:520px;
  background:linear-gradient(120deg,var(--green-50) 0%,#fff 70%);
  border:1px solid var(--green-300);border-radius:var(--r-lg);
  color:inherit;box-shadow:var(--shadow-sm);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.bbb:hover{border-color:var(--green-600);box-shadow:var(--shadow);color:inherit}

.bbb__seal{
  position:relative;flex-shrink:0;width:104px;height:104px;
  border-radius:50%;
  filter:drop-shadow(0 6px 14px rgba(31,77,16,.25));
}
/* Tilt lives on the svg: GSAP owns the seal's own transform for the entrance */
.bbb__seal svg{
  display:block;width:100%;height:100%;overflow:visible;
  transform:perspective(500px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .35s var(--ease);
}

/* Shine sweeping across the seal once it lands, and again on hover */
.bbb__seal::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);
  background-size:250% 100%;background-position:130% 0;
  mix-blend-mode:soft-light;
}
.bbb.is-shining .bbb__seal::after,
.bbb:hover .bbb__seal::after{animation:bbb-shine 1.2s var(--ease)}

.bbb__outline{fill:#fff;stroke:var(--green-600);stroke-width:2;stroke-dasharray:100}
.bbb__ring{transform-box:view-box;transform-origin:60px 60px;animation:bbb-spin 28s linear infinite}
.bbb:hover .bbb__ring{animation-duration:9s}
.bbb__ring-text{
  font:800 8.4px/1 var(--font);letter-spacing:.06em;fill:var(--green-800);
}
.bbb__grade{font:700 26px/1 var(--font-display);fill:#fff;letter-spacing:-.04em}
.bbb__label{font:800 6px/1 var(--font);letter-spacing:.14em;fill:var(--green-100)}
.bbb__check circle{fill:var(--magenta-600);stroke:#fff;stroke-width:2.5}
.bbb__check-path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100}

.bbb__text{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.bbb__text strong{font-family:var(--font-display);font-size:1.18rem;font-weight:600;line-height:1.2;color:var(--ink);letter-spacing:-.015em}
.bbb__text > span{font-size:.88rem;line-height:1.45;color:var(--body)}
.bbb__text .bbb__link{margin-top:.15rem;font-size:.85rem;font-weight:700;color:var(--magenta-600)}
.bbb__link span{display:inline-block;transition:transform .2s var(--ease)}
.bbb:hover .bbb__link span{transform:translateX(4px)}

@keyframes bbb-spin{to{transform:rotate(360deg)}}
@keyframes bbb-shine{from{background-position:130% 0}to{background-position:-30% 0}}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

/* ---------- reviews: Google + Housecall Pro tabs ---------- */
/* A+ tile — still used by the booking page's trust card */
.rev__badge{
  display:grid;place-items:center;
  width:52px;height:52px;margin-bottom:1rem;border-radius:14px;
  background:var(--grad-green);color:#fff;
  font-size:1.15rem;font-weight:800;letter-spacing:-.02em;
  box-shadow:var(--shadow-green);
}

.revtabs [hidden]{display:none!important}
.revtabs__list{
  display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;
  width:max-content;max-width:100%;margin:0 auto 1.75rem;padding:.35rem;
  background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--r-pill);
}
.revtabs__tab{
  display:inline-flex;align-items:center;gap:.55rem;
  font:inherit;font-size:.93rem;font-weight:700;cursor:pointer;
  padding:.7rem 1.25rem;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--body);
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.revtabs__tab:hover{color:var(--ink)}
.revtabs__tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.revtabs__logo{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:.78rem;font-weight:800;color:#fff;
}
.revtabs__logo--google{background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0)}
.revtabs__logo--hcp{background:#0f77cc}

.revtabs__panel + .revtabs__panel{margin-top:2.5rem}
.revtabs.is-live .revtabs__panel + .revtabs__panel{margin-top:0}
.revtabs__title{text-align:center;font-size:clamp(1.3rem,2.2vw,1.6rem);margin-bottom:1.1rem}
/* With tabs on, the tab names do this job */
.revtabs.is-live .revtabs__title{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* Google: live rating summary above the review cards */
.grev-summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;
  margin-bottom:1.5rem;padding:1.25rem 1.5rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.grev-summary__score{display:flex;align-items:baseline;gap:.4rem .75rem;flex-wrap:wrap}
.grev-summary__score strong{
  font-family:var(--font-display);font-size:2.6rem;font-weight:600;line-height:1;
  color:var(--ink);letter-spacing:-.03em;
}
.grev-summary__score .grev__stars{font-size:1.15rem}
.grev-summary__score span:last-child{font-size:.92rem;color:var(--muted)}
.grev-summary__actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* Shown until live reviews load (or if they can't) */
.grev-fallback{
  display:flex;align-items:center;gap:1rem 1.25rem;flex-wrap:wrap;
  padding:1.5rem 1.75rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.grev-fallback > div{flex:1 1 260px}
.grev-fallback p{margin:0;color:var(--muted);font-size:.95rem}
.grev-fallback .grev-fallback__title{color:var(--ink);font-weight:800;font-size:1.05rem;margin-bottom:.15rem}
.grev-fallback__logo{width:44px;height:44px;font-size:1.3rem}

/* Google review cards */
.grev-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;
  margin-bottom:1.75rem;
}
.grev{
  display:flex;flex-direction:column;gap:.85rem;margin:0;
  padding:1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.grev__head{display:flex;align-items:center;gap:.75rem}
.grev__photo{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--green-100)}
.grev__who{display:flex;flex-direction:column;min-width:0}
.grev__who a,.grev__who strong{font-weight:800;color:var(--ink);font-size:.95rem}
.grev__who span{font-size:.8rem;color:var(--muted)}
.grev__stars{color:var(--gold);letter-spacing:.12em;font-size:.95rem}
.grev__quote{margin:0}
.grev__text{
  margin:0;font-family:var(--font-display);font-size:1rem;line-height:1.55;color:var(--ink);
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
}
.grev__source{margin-top:auto;font-size:.78rem;color:var(--muted)}
.grev__source a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* Housecall Pro reviews widget. It renders its own card and scrolls
   internally, and doesn't report its height, so the frame is sized to
   the ~950px it draws at every width. */
.hcp-reviews__frame{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:#fafafa;box-shadow:var(--shadow-sm);
}
.hcp-reviews__frame iframe{display:block;width:100%;height:960px;border:0}

@media (max-width:680px){
  .grev-summary__actions .btn{flex:1}
  .revtabs__tab{padding:.65rem .9rem;font-size:.86rem}
  .bbb{padding-right:1rem}
  .bbb__seal{width:88px;height:88px}
}

/* ---------- areas ---------- */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.area{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.75rem 1.5rem;text-align:center;
  transition:transform .22s var(--ease),border-color .22s var(--ease);
}
.area:hover{transform:translateY(-3px);border-color:var(--green-300)}
.area h3{font-size:1.15rem;margin-bottom:.4rem;color:var(--green-800)}
.area p{margin:0;font-size:.92rem}
.areas__note{text-align:center;margin:2rem 0 0;color:var(--muted)}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:.85rem}
.faq__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.faq__item[open]{border-color:var(--green-300);box-shadow:var(--shadow-sm)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem 1.4rem;cursor:pointer;list-style:none;
  font-size:1.03rem;font-weight:700;color:var(--ink);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--green-800)}
.faq__icon{
  position:relative;flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--green-100);
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;top:50%;left:50%;
  background:var(--green-700);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .25s var(--ease);
}
.faq__icon::before{width:11px;height:2px}
.faq__icon::after{width:2px;height:11px}
.faq__item[open] .faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__a{padding:0 1.4rem 1.35rem}
.faq__a p{margin:0;font-size:.97rem}

/* ---------- contact ---------- */
.contact{
  position:relative;overflow:hidden;color:#b9c7ad;
  background:
    radial-gradient(60% 80% at 10% 5%,rgba(78,165,36,.16) 0%,transparent 60%),
    var(--ink);
}
.contact h2{color:#fff}
.contact .lede{color:#cdd8c4}
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}

.contact__alt{color:var(--green-300);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.contact__alt:hover{color:#fff}
.contact__list{display:grid;gap:1.1rem;margin-top:2rem}
.contact__list li{display:flex;gap:1rem;align-items:flex-start}
.contact__list svg{
  width:42px;height:42px;flex-shrink:0;padding:10px;border-radius:12px;
  background:rgba(255,255,255,.1);color:var(--green-300);
}
.contact__list span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--green-300);margin-bottom:.15rem}
.contact__list a{color:#fff;font-weight:700;font-size:1.02rem}
.contact__list a:hover{color:var(--green-300)}
.contact__list p{margin:0;color:#fff;font-weight:600;font-size:1.02rem}

/* ---------- form ---------- */
.form{
  background:#fff;border-radius:var(--r-lg);padding:clamp(1.75rem,3vw,2.5rem);
  box-shadow:var(--shadow-lg);color:var(--body);
}
.form__title{font-size:1.35rem;margin-bottom:1.5rem}
.form__row{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{font-size:.86rem;font-weight:700;color:var(--ink)}
.form label span{color:var(--magenta-600)}
.form input,.form select,.form textarea{
  font-family:inherit;font-size:.97rem;color:var(--ink);
  padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-alt);width:100%;
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--green-600);background:#fff;
  box-shadow:0 0 0 4px var(--green-100);
}
.form input[aria-invalid="true"],.form select[aria-invalid="true"]{
  border-color:var(--magenta-600);box-shadow:0 0 0 4px var(--magenta-100);
}
.form textarea{resize:vertical;min-height:110px}
.form .btn{margin-top:.5rem}
.form__note{margin:1rem 0 0;font-size:.85rem;color:var(--muted);text-align:center}
.form__status{margin:.85rem 0 0;font-size:.9rem;font-weight:700;text-align:center;min-height:1.2em}
.form__status.is-ok{color:var(--green-700)}
.form__status.is-err{color:var(--magenta-600)}

/* Pieces that ship hidden until script.js turns them on; their own
   display rules would otherwise beat [hidden] */
.contact [hidden]{display:none!important}

/* Address label with the GPS button beside it */
.form__label-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem .75rem;flex-wrap:wrap}
.geo-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  font:inherit;font-size:.8rem;font-weight:700;line-height:1;
  padding:.4rem .75rem;border-radius:var(--r-pill);cursor:pointer;
  color:var(--green-800);background:var(--green-50);border:1px solid var(--green-300);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.geo-btn:hover{background:var(--green-100);border-color:var(--green-600)}
.geo-btn:disabled{cursor:progress}
.geo-btn svg{width:15px;height:15px;flex-shrink:0}
.geo-btn.is-busy svg{animation:geo-spin 1.1s linear infinite}
@keyframes geo-spin{to{transform:rotate(360deg)}}

.geo-pin{
  display:flex;align-items:center;gap:.45rem;margin:.15rem 0 0;
  font-size:.8rem;font-weight:600;color:var(--green-800);
}
.geo-pin svg{width:15px;height:15px;flex-shrink:0;color:var(--green-600)}
.geo-pin button{
  margin-left:auto;font:inherit;font-weight:700;color:var(--muted);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.geo-pin button:hover{color:var(--magenta-600)}
.geo-status{margin:0;font-size:.8rem;font-weight:600;color:var(--muted);line-height:1.45}
.geo-status:empty{display:none}
.geo-status.is-ok{color:var(--green-700)}
.geo-status.is-warn{color:#9a5a00}
.geo-status.is-err{color:var(--magenta-600)}


/* ---------- pricing ----------
   One rate, stated plainly: a dark price panel beside the
   "customized to you" promise. Sits under the service rows. */
.pricing{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  margin-top:clamp(3.5rem,7vw,5.5rem);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);
}
.pricing__rate{
  display:flex;flex-direction:column;justify-content:center;gap:.35rem;
  padding:clamp(2rem,4vw,3rem);
  background:radial-gradient(80% 90% at 15% 10%,rgba(78,165,36,.22) 0%,transparent 65%),var(--ink);
  color:#cdd8c4;
}
.pricing__label{
  margin:0;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-300);
}
.pricing__price{display:flex;align-items:baseline;gap:.4rem;margin:0;color:#fff}
.pricing__price strong{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(3.6rem,8vw,5.4rem);line-height:1;letter-spacing:-.045em;
}
.pricing__price span{font-size:1.15rem;font-weight:700;color:#cdd8c4}
.pricing__team{margin:0;font-size:1.02rem;font-weight:600;color:#e6eedf}
.pricing__body{padding:clamp(2rem,4vw,3rem)}
.pricing__body h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:-.022em;margin-bottom:.6rem}
.pricing__body > p{margin-bottom:1rem}
.pricing__body > p:last-of-type{margin-bottom:1.75rem}
.pricing__actions{display:flex;flex-wrap:wrap;gap:.75rem}

@media (max-width:900px){
  .pricing{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pricing__actions .btn{width:100%}
}

/* ---------- footer ---------- */
.footer{background:var(--grad-ink);color:#b8c2b0;padding:clamp(3rem,6vw,4.5rem) 0 0;font-size:.94rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3rem}
.footer__col h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.1rem}
.footer__col ul{display:grid;gap:.6rem}
.footer__col a{color:#b8c2b0}
.footer__col a:hover{color:var(--green-300)}
.footer__col--brand p{font-size:.92rem;line-height:1.7;color:#9aa693}
.brand--footer{margin-bottom:1.25rem}
.brand--footer .brand__text strong{color:#fff}
.brand--footer .brand__text em{color:var(--green-300)}
.footer__hl{color:var(--green-300)!important;font-weight:700;font-size:.88rem!important;letter-spacing:.02em}
.footer__contact{margin-bottom:1.25rem}
.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1);padding-block:1.5rem;
}
.footer__bottom p{margin:0;font-size:.86rem;color:#8a9682}
.footer__areas{display:flex;gap:1rem;flex-wrap:wrap;font-size:.86rem;color:#8a9682}

/* ---------- sticky mobile call bar ---------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  gap:.6rem;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.callbar__btn{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:.9rem;border-radius:var(--r-pill);
  font-weight:700;font-size:.95rem;
}
.callbar__btn--call{background:var(--green-600);color:#fff}
.callbar__btn--quote{background:var(--magenta-600);color:#fff}

/* ---------- scroll animation ----------
   GSAP sets every starting state in JS, so CSS hides nothing.
   If the CDN fails, the script errors, or motion is reduced, the page
   renders exactly as it would without animation — no blank sections.
   `.gsap-ready` is added only after GSAP is confirmed loaded.
------------------------------------------ */
.gsap-ready .hero__copy > *,
.gsap-ready .hero__media{will-change:transform,opacity}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Hide the phone button before the nav gets cramped */
@media (max-width:1240px){
  .header__cta .btn--ghost{display:none}
}

@media (max-width:1180px){
  .nav{display:none}
  .burger{display:flex}

  .nav.is-open{
    display:flex;flex-direction:column;gap:.15rem;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:1rem 1.5rem 1.5rem;box-shadow:var(--shadow);
  }
  .nav.is-open a{padding:.85rem .5rem;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav.is-open a::after{display:none} /* underline is for the desktop row only */
  .header__inner{position:relative}

  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem}
}

@media (max-width:900px){
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .hero__media{max-width:440px;margin-inline:auto;width:100%}
  .hero__trust{gap:.6rem 1.25rem;padding-top:1.5rem}

  .grid--3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:2.5rem 1.5rem}
  .areas{grid-template-columns:repeat(2,1fr)}
  .stats__inner{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .about{grid-template-columns:1fr;gap:2.5rem}
  .about__media{max-width:380px;margin-inline:auto;width:100%}
  .contact__inner{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:680px){
  body{font-size:16px}
  .wrap,.wrap--narrow{width:calc(100% - 2rem)}
  .section{padding:3.5rem 0}

  .topbar__item:not(:first-child),.topbar__sep{display:none}
  .topbar__inner{justify-content:space-between}

  .grid--3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:2.75rem}
  .areas{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .form__grid{grid-template-columns:1fr;gap:0}

  .hero__actions .btn{flex:1 1 auto}
  /* Three equal columns: the desktop spacing made this row wider than a phone */
  .hero__trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;font-size:.82rem}
  .hero__trust li{padding-right:.6rem;margin-right:.6rem;min-width:0}
  .hero__trust li + li{padding-left:0}
  .hero__trust strong{font-size:1.3rem}
  .hero__trust span{font-size:.62rem;letter-spacing:.08em}
  .hero__media{padding-left:0}
  .hero__rail{display:none}
  .hero__float{right:auto;left:50%;transform:translateX(-50%);bottom:-24px}

  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:.75rem}

  .callbar{display:flex}
  body{padding-bottom:78px}
  .header__cta{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  /* GSAP is skipped entirely under reduced motion (see script.js),
     so nothing needs un-hiding here. */
  .gsap-ready *{will-change:auto!important}
}

@media print{
  .topbar,.header,.callbar,.hero__actions,.form{display:none!important}
  body{font-size:12pt;color:#000}
}

/* ============================================================
   BOOKING PAGE (book.html)
   ============================================================ */

.book-hero{
  position:relative;overflow:hidden;
  padding:clamp(1.75rem,3.5vw,2.75rem) 0 clamp(2.5rem,5vw,3.75rem);
  background:
    radial-gradient(70% 100% at 80% 0%,var(--green-50) 0%,transparent 62%),
    radial-gradient(50% 80% at 5% 100%,var(--magenta-50) 0%,transparent 60%),
    var(--surface);
  border-bottom:1px solid var(--line);
}
.book-hero__inner{max-width:760px}
.book-hero h1{margin-bottom:.3em}
.book-hero .lede{margin-bottom:1.75rem}

.book-hero__badges{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem}
.book-hero__badges li{display:flex;align-items:center;gap:.55rem;font-size:.93rem;font-weight:600;color:var(--ink)}
.book-hero__badges svg{
  width:22px;height:22px;flex-shrink:0;padding:4px;border-radius:50%;
  background:var(--green-100);color:var(--green-700);
}

/* Form beside a sticky sidebar */
.book-main{padding-top:clamp(2.5rem,5vw,4rem)}
.book-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.75rem,3.5vw,3rem);align-items:start}

.book-form{box-shadow:var(--shadow-lg)}
.book-form__sub{margin:-.75rem 0 1.75rem;color:var(--muted);font-size:.95rem}

/* Grouped sections inside the form */
.fset{border:0;padding:0;margin:0 0 1.75rem}
.fset__legend{
  display:block;width:100%;padding:0 0 .85rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--line);
  font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--magenta-600);
}

/* Where the Housecall Pro embed lands */
.hcp-embed{
  min-height:520px;border-radius:var(--r);overflow:hidden;
  background:var(--surface-alt);
}
.hcp-embed iframe{width:100%;min-height:520px;border:0;display:block}

/* Sidebar */
.book-aside{display:grid;gap:1.25rem;position:sticky;top:calc(var(--header-h) + 1.5rem)}
.book-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem;box-shadow:var(--shadow-sm);
}
.book-card h3{font-size:1.1rem;margin-bottom:.5rem}
.book-card > p{font-size:.94rem;margin-bottom:1.1rem}
.book-card .btn{margin-bottom:.6rem}
.book-card .btn:last-of-type{margin-bottom:0}

.book-card--trust{
  background:linear-gradient(160deg,var(--green-50) 0%,#fff 65%);
  border-color:var(--green-300);
}
.book-card--trust .rev__badge{margin-bottom:.9rem}
.book-card--trust p{font-size:.93rem;margin-bottom:.8rem}

/* Numbered next-steps list */
.mini-steps{display:grid;gap:1.1rem;counter-reset:ms}
.mini-steps li{display:flex;gap:.9rem;align-items:flex-start}
.mini-steps span{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--grad-green);color:#fff;
  font-size:.83rem;font-weight:800;
}
.mini-steps strong{display:block;font-size:.95rem;color:var(--ink);margin-bottom:.1rem}
.mini-steps p{margin:0;font-size:.87rem;color:var(--muted);line-height:1.5}

@media (max-width:900px){
  .book-grid{grid-template-columns:1fr}
  .book-aside{position:static}
}

@media (max-width:680px){
  .book-hero__badges{flex-direction:column;gap:.6rem}
}

/* ---------- Housecall Pro client login ---------- */
.hcp-login{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.86rem;font-weight:700;color:var(--body);
  padding:.55rem .3rem;white-space:nowrap;
  transition:color .2s var(--ease);
}
.hcp-login svg{width:17px;height:17px;flex-shrink:0}
.hcp-login:hover{color:var(--green-800)}
.hcp-login[hidden]{display:none}

/* Replaces the booking form once a Housecall Pro URL is configured */
.hcp-cta{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.75rem,3vw,2.5rem);box-shadow:var(--shadow-lg);text-align:center;
}
.hcp-cta .form__title{margin-bottom:.5rem}
.hcp-cta .book-form__sub{margin:0 0 1.75rem}

/* Emphasis on dark sections */
.em--light{color:var(--green-300)}

/* ============================================================
   SERVICES — large alternating rows
   Big imagery, text opposite, sides flip each row. An oversized
   outlined numeral sits behind the image corner.
   ============================================================ */
.svcrows{display:grid;gap:clamp(3.5rem,7vw,6.5rem)}
.svcrow{overflow:visible}
#services{overflow-x:clip}

.svcrow{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
/* Flip every other row */
.svcrow:nth-child(even) .svcrow__media{order:2}

.svcrow__media{position:relative;margin:0}
.svcrow__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:0 3px 10px rgba(22,32,15,.06),0 26px 64px rgba(22,32,15,.14);
}

/* Oversized outlined numeral, behind the image corner */
.svcrow__num{
  position:absolute;top:-.38em;left:.06em;z-index:2;
  font-family:var(--font-display);
  font-size:clamp(4rem,8vw,7rem);font-weight:600;line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--green-300);
  pointer-events:none;
}
.svcrow:nth-child(even) .svcrow__num{
  left:auto;right:.06em;
  -webkit-text-stroke-color:#f3b8d4;
}

.svcrow__body h3{
  font-size:clamp(1.85rem,3.4vw,2.7rem);
  font-weight:600;letter-spacing:-.028em;line-height:1.08;
  margin-bottom:.35em;
}
.svcrow__lede{
  font-family:var(--font-display);
  font-size:1.1rem;font-weight:600;font-style:italic;
  color:var(--green-700);margin-bottom:1.15rem;line-height:1.4;
}

.svcrow__list{
  display:grid;grid-template-columns:1fr 1fr;
  gap:.7rem 1.5rem;margin-bottom:1.9rem;
}
.svcrow__list li{
  position:relative;padding-left:1.5rem;
  font-size:.92rem;color:var(--body);line-height:1.45;
}
.svcrow__list li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:9px;height:5px;
  border-left:2px solid var(--green-600);
  border-bottom:2px solid var(--green-600);
  transform:rotate(-45deg);
}

@media (max-width:900px){
  .svcrow{grid-template-columns:1fr;gap:1.75rem}
  .svcrow:nth-child(even) .svcrow__media{order:0}
  .svcrow__num{font-size:clamp(3.2rem,11vw,5rem)}
  .svcrow:nth-child(even) .svcrow__num{left:-.06em;right:auto}
}
@media (max-width:560px){
  .svcrow__list{grid-template-columns:1fr;gap:.6rem}
  .svcrow__body .btn{width:100%}
}

/* ============================================================
   WIPE IT CLEAN — interactive
   A grimy canvas over the real photo; the visitor scrubs it off.
   Everything interactive ships `hidden` and script.js reveals it,
   so without JS this is just a heading and a clean photo.
   ============================================================ */
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.wipe{
  position:relative;overflow:hidden;color:#b9c7ad;
  background:
    radial-gradient(55% 70% at 95% 5%,rgba(194,24,111,.14) 0%,transparent 60%),
    radial-gradient(60% 80% at 0% 100%,rgba(78,165,36,.16) 0%,transparent 60%),
    var(--ink);
}
.wipe h2{color:#fff}
.wipe .lede{color:#cdd8c4;margin-bottom:0}
/* Several children set their own display, which would beat [hidden] */
.wipe [hidden]{display:none!important}

.wipe__inner{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas:"copy stage" "controls stage";
  grid-template-rows:auto 1fr;
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:2.2rem;
  /* Top-aligned so the "spotless" panel appearing below the controls
     grows the section downward instead of shoving the photo around */
  align-items:start;
}
.wipe__copy{grid-area:copy;padding-top:clamp(0rem,2vw,1.5rem)}
.wipe__controls{grid-area:controls}
.wipe__stage{grid-area:stage}

.wipe__rooms{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.75rem}
.wipe__room{
  font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;
  padding:.6rem 1.15rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);color:#dfe7d8;
  border:1.5px solid rgba(255,255,255,.16);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.wipe__room:hover{border-color:var(--green-300);color:#fff}
.wipe__room[aria-pressed="true"]{background:var(--green-600);border-color:var(--green-600);color:#fff}

.wipe__meter{max-width:420px;margin-bottom:1.75rem}
.wipe__meter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem}
.wipe__meter-head span{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-300);
}
.wipe__meter-head strong{
  font-family:var(--font-display);font-size:1.7rem;font-weight:600;line-height:1;
  color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.wipe__bar{height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);overflow:hidden}
.wipe__bar span{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--green-600),var(--green-300));
  transform:scaleX(var(--p,0));transform-origin:left center;
  transition:transform .25s var(--ease);
}
.wipe.is-clean .wipe__bar span{background:linear-gradient(90deg,var(--green-500),var(--magenta-500))}

.wipe__actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.btn--light{--btn-bg:rgba(255,255,255,.08);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.24)}
.btn--light:hover{--btn-bg:rgba(255,255,255,.14);--btn-bd:var(--green-300)}
.btn--light svg{color:var(--green-300)}
.wipe__reset{
  font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
  background:none;border:0;padding:.4rem 0;color:var(--green-300);
  text-decoration:underline;text-underline-offset:3px;
}
.wipe__reset:hover{color:#fff}

.wipe__done{
  margin-top:1.75rem;padding:1.25rem 1.35rem;max-width:460px;
  border-radius:var(--r);background:rgba(255,255,255,.06);
  border:1px solid rgba(168,224,124,.35);
  animation:wipe-pop .5s var(--ease) both;
}
.wipe__done p{color:#e6eedf;margin-bottom:1rem}
.wipe__done strong{color:#fff}

/* The stage — real photo underneath, grime canvas on top */
.wipe__stage{
  position:relative;margin:0;aspect-ratio:5/4;
  border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.45);
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.wipe__img,.wipe__grime{position:absolute;inset:0;width:100%;height:100%}
.wipe__img{object-fit:cover}
.wipe__grime{transition:opacity .9s var(--ease)}
/* Only claim touch gestures once there's something to wipe */
.wipe__stage.is-live .wipe__grime{touch-action:none;cursor:grab}
.wipe__stage.has-sponge .wipe__grime{cursor:none}
.wipe__stage.is-clean .wipe__grime{opacity:0;pointer-events:none}

/* Shine that sweeps across once the room is clean */
.wipe__stage::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform:translateX(-110%);
}
.wipe__stage.is-clean::after{transform:translateX(110%);transition:transform 1.1s var(--ease) .3s}

.wipe__tag{
  position:absolute;top:1rem;left:1rem;z-index:4;pointer-events:none;
  padding:.45rem .8rem;border-radius:2px;
  background:rgba(22,32,15,.82);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  transition:background .3s var(--ease);
}
.wipe__stage.is-clean .wipe__tag{background:var(--green-600)}

.wipe__hint{
  position:absolute;left:50%;top:50%;z-index:4;pointer-events:none;
  transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.75rem 1.25rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.95);color:var(--ink);
  font-size:.9rem;font-weight:800;white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.18),0 18px 40px rgba(0,0,0,.22);
  transition:opacity .35s var(--ease);
}
.wipe__hint svg{width:22px;height:22px;color:var(--magenta-600);animation:wipe-swipe 1.6s var(--ease) infinite}
.wipe__hint.is-gone{opacity:0}

/* Sponge that follows a mouse or pen (a finger hides it anyway) */
.wipe__sponge{
  position:absolute;left:0;top:0;z-index:5;pointer-events:none;
  width:56px;height:36px;margin:-18px 0 0 -28px;border-radius:9px;
  background:
    radial-gradient(circle,rgba(160,120,30,.35) 1.4px,transparent 1.8px) 0 13px/8px 7px,
    linear-gradient(180deg,var(--green-600) 0 34%,#f4cf62 34% 100%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.1),0 6px 16px rgba(0,0,0,.32);
  transform:translate3d(var(--x,0),var(--y,0),0) rotate(-12deg);
  opacity:0;transition:opacity .2s var(--ease);
}
.wipe__stage.has-sponge .wipe__sponge,
.wipe__stage.is-auto .wipe__sponge{opacity:1}
.wipe__stage.is-down .wipe__sponge{
  transform:translate3d(var(--x,0),var(--y,0),0) rotate(-12deg) scale(.92,.86);
}

.wipe__bubble{
  position:absolute;z-index:4;pointer-events:none;
  width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%;border:1px solid rgba(255,255,255,.75);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 16%,rgba(255,255,255,.22) 42%,rgba(200,235,255,.1) 72%);
  animation:wipe-bubble 1.1s var(--ease) forwards;
}
.wipe__spark{
  position:absolute;z-index:4;pointer-events:none;
  font-size:var(--s);line-height:1;color:var(--c);
  text-shadow:0 0 14px rgba(255,255,255,.85);
  animation:wipe-spark 1.4s var(--ease) var(--d) both;
}

@keyframes wipe-swipe{0%,100%{transform:translateX(-6px) rotate(-10deg)}50%{transform:translateX(6px) rotate(10deg)}}
@keyframes wipe-bubble{
  0%{transform:translate(0,0) scale(.3);opacity:0}
  25%{opacity:1}
  100%{transform:translate(var(--dx),-52px) scale(1);opacity:0}
}
@keyframes wipe-spark{
  0%{transform:scale(0) rotate(0);opacity:0}
  40%{transform:scale(1) rotate(80deg);opacity:1}
  100%{transform:scale(0) rotate(170deg);opacity:0}
}
@keyframes wipe-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .wipe__inner{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"copy" "stage" "controls";row-gap:1.75rem}
  .wipe__copy{padding-top:0}
  .wipe__stage{max-width:600px;width:100%;margin-inline:auto}
}

/* ============================================================
   SERVICE-AREA MAP — Leaflet + OpenStreetMap
   Map on the left, city cards and "Am I in your area?" on the
   right. Without JS the cards stand alone and the map box shows a
   plain sentence instead.
   ============================================================ */
.areamap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.5rem;align-items:stretch}
.areamap [hidden]{display:none!important}

.areamap__map{
  position:relative;min-height:540px;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--green-50);box-shadow:var(--shadow);
  z-index:0; /* contain Leaflet's own z-indexes beneath the sticky header */
}
.areamap__map.leaflet-container{font-family:var(--font)}
.areamap__fallback{
  position:absolute;inset:0;margin:0;padding:2rem;
  display:grid;place-items:center;text-align:center;
  font-weight:600;color:var(--green-800);
}
/* Calm the tiles down so the brand colours carry the map */
.areamap__map .leaflet-tile-pane{filter:saturate(.45) brightness(1.04) contrast(.96)}

.areamap__side{display:flex;flex-direction:column;gap:1rem}
.areamap .areas{grid-template-columns:1fr 1fr;gap:.85rem}
.areamap .area{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.15rem 1.1rem;text-align:left;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.areamap.is-live .area{cursor:pointer}
.areamap .area h3{display:flex;align-items:center;gap:.55rem;margin:0;font-size:1.08rem}
.areamap .area p{font-size:.86rem;line-height:1.45}
.area__dot{
  flex-shrink:0;width:10px;height:10px;border-radius:50%;
  background:var(--green-600);box-shadow:0 0 0 3px var(--green-100);
  transition:background .2s var(--ease),box-shadow .2s var(--ease);
}
.areamap .area.is-active{border-color:var(--magenta-600);box-shadow:var(--shadow)}
.area.is-active .area__dot{background:var(--magenta-600);box-shadow:0 0 0 3px var(--magenta-100)}
.area__show{
  align-self:flex-start;margin-top:auto;padding:.3rem 0 0;
  font:inherit;font-size:.8rem;font-weight:700;color:var(--magenta-600);
  background:none;border:0;cursor:pointer;
}
.area__show::after{content:" →"}
.area__show:hover{color:var(--magenta-700)}

.inrange{
  margin-top:auto;padding:1.1rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
}
.inrange .btn.is-busy svg{animation:geo-spin 1.1s linear infinite}
.inrange__result{margin:.8rem 0 0;font-size:.9rem;line-height:1.5}
.inrange__result:empty{display:none}
.inrange__result strong{color:var(--ink)}
.inrange__result a{font-weight:700;color:var(--magenta-600)}

/* City pins: a dot with a name tag beside it */
.mpin{position:relative}
.mpin__dot{
  position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--green-600);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(22,32,15,.35);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.mpin__label{
  position:absolute;left:14px;top:-13px;white-space:nowrap;
  padding:.2rem .6rem;border-radius:var(--r-pill);
  background:#fff;color:var(--ink);font:700 .78rem/1.3 var(--font);
  box-shadow:0 2px 8px rgba(22,32,15,.18);
}
.mpin.is-active .mpin__dot{background:var(--magenta-600);transform:scale(1.15)}
.mpin.is-active .mpin__dot::after,
.mpin--you .mpin__dot::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid currentColor;animation:mpin-pulse 1.8s var(--ease) infinite;
}
.mpin.is-active .mpin__dot{color:var(--magenta-600)}
.mpin--you .mpin__dot{background:#1a73e8;color:#1a73e8}
.mpin--you .mpin__label{background:#1a73e8;color:#fff}
@keyframes mpin-pulse{from{transform:scale(.6);opacity:.9}to{transform:scale(1.6);opacity:0}}

/* Popups in the site's type */
.areamap .leaflet-popup-content-wrapper{border-radius:var(--r);box-shadow:var(--shadow)}
.areamap .leaflet-popup-content{
  margin:.85rem 1rem;min-width:190px;
  display:flex;flex-direction:column;gap:.3rem;font-family:var(--font);
}
.mpop__title{font-family:var(--font-display);font-size:1.12rem;font-weight:600;color:var(--ink)}
.mpop__text{font-size:.84rem;line-height:1.45;color:var(--body)}
.areamap .mpop__link{margin-top:.2rem;font-size:.85rem;font-weight:700;color:var(--magenta-600)}

@media (max-width:900px){
  .areamap{grid-template-columns:1fr}
  .areamap__map{min-height:400px}
}
@media (max-width:420px){
  .areamap .areas{grid-template-columns:1fr}
}