/* BadgersRntUs v2 - targeted evolution (2026-09-17)
   Mode: Redesign / Preserve. Brand green and amber, the badger mark, the copy and the page
   structure all stay. Dials: VARIANCE 6 (match existing), MOTION 4 (existing was 0, which was an
   absence rather than a decision; a homeowner on a phone benefits from feedback, and trust-first
   caps it below 5), DENSITY 4 (match existing).

   Fixed here, all measured rather than judged by eye:
   - brand green on the dark surface measured 2.69:1, under the 4.5:1 floor. --green-on-dark
     (#6cbb7b) measures 7.41:1 there. The brand green itself is unchanged on light surfaces.
   - cream #f4efe3 ground replaced with a pale sage tinted from the brand green. Cream plus a
     warm serif-ish display is the single most common AI-generated palette.
   - Inter replaced (body). Display face is Bitter, chosen by the owner 2026-09-17: Bricolage
     Grotesque was already used on his own site, and every client site gets its OWN display face.
   - six icon-tile cards replaced by plain typography. Icon-above-heading cards repeated as the
     page's structure is a named anti-pattern, and the icons were hand-rolled paths.
   - every eyebrow label removed. The heading carries its own weight.
   - green glow shadows replaced with neutral elevation; the 4px coloured left border removed.
   - nav and small print raised above the 11px functional-text floor.
*/

:root{
  --ink:#1c1b18;
  --ink-soft:#4a473f;
  --paper:#edf1ea;          /* was #f4efe3 cream */
  --paper-2:#e3e9df;
  --card:#ffffff;
  --line:#d5ddd0;
  --line-soft:#e7ece3;
  --green:#2f6b3a;          /* brand, unchanged */
  --green-d:#245530;
  --green-on-dark:#6cbb7b;  /* 7.41:1 on --ink */
  --amber:#dc9a2e;          /* brand, unchanged */
  --white:#fff;
  /* neutral elevation. A coloured glow is decoration, not depth. */
  --shadow:0 1px 2px rgba(28,27,24,.05), 0 6px 18px rgba(28,27,24,.06);
  --shadow-lg:0 2px 6px rgba(28,27,24,.07), 0 14px 32px rgba(28,27,24,.10);
  --r:14px;
  --r-sm:10px;
  --wrap:1080px;
  --pad:clamp(18px,5vw,28px);
  --font-display:"Bitter",Georgia,"Times New Roman",serif;
  --font-body:"Chivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nav-h:66px;
  --band:clamp(58px,8vw,92px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}

/* browser surfaces carry the design too */
::selection{background:var(--green);color:#fff}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
html{scrollbar-color:#b9c4b2 var(--paper)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
section{padding-top:var(--band);padding-bottom:var(--band)}

h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.012em;line-height:1.06;margin:0}
h1{font-size:clamp(2.15rem,7.4vw,4.2rem)}
h2{font-size:clamp(1.9rem,4.4vw,2.85rem)}
h3{font-size:1.14rem;font-weight:700;letter-spacing:-.012em;line-height:1.3}
.sec-head{max-width:46ch;margin-bottom:clamp(30px,4.5vw,48px)}
.sec-head p{margin-top:14px;color:var(--ink-soft);font-size:1.05rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:1rem;text-decoration:none;
  padding:14px 22px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff}        /* 6.39:1 */
.btn-primary:hover{background:var(--green-d)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#000}
.btn-onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-onDark:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(237,241,234,.92);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.stuck{border-bottom-color:var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .mark{width:38px;height:38px;flex:0 0 38px}
.brand span{font-family:var(--font-display);font-weight:800;font-size:1.13rem;letter-spacing:-.008em;
  line-height:1.05;display:block}
.brand b{color:var(--green)}
.brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:.72rem;  /* 12.2px, was 9.9px */
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
.top-nav{display:flex;align-items:center;gap:26px}
.top-nav a{text-decoration:none;font-size:.96rem;font-weight:500;color:var(--ink-soft);
  transition:color .16s ease}
.top-nav a:hover,.top-nav a[aria-current="page"]{color:var(--ink)}
@media(max-width:860px){.top-nav{display:none}}
@media(max-width:560px){.header-cta{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  padding-top:clamp(52px,8vw,84px);padding-bottom:clamp(58px,8vw,92px)}
/* one quiet ground texture, no repeating stripe pattern */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 85% at 78% 12%, rgba(108,187,123,.20), transparent 62%)}
.hero-in{position:relative;z-index:1}
.hero .pill{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;
  color:var(--paper);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  padding:8px 15px;border-radius:100px}
.hero .pill b{color:var(--amber);font-weight:700}
.hero h1{margin-top:22px;max-width:24ch}  /* 15ch forced a 3-line headline; the pre-flight cap is 2 */
.hero h1 em{font-style:normal;color:var(--amber);display:block}
.hero-lede{margin-top:20px;max-width:50ch;font-size:clamp(1.05rem,1.9vw,1.2rem);
  color:rgba(244,239,227,.86)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:.94rem;
  color:var(--green-on-dark);font-weight:500}   /* 7.41:1, was 2.69:1 */
.hero-note svg{flex:0 0 18px}
.hero-badge{position:absolute;top:clamp(18px,4vw,40px);right:var(--pad);
  width:clamp(88px,12vw,124px);aspect-ratio:1;border-radius:50%;background:var(--amber);
  color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;z-index:2}
.hero-badge b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.3rem)}
.hero-badge span{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:5px}
@media(max-width:620px){.hero-badge{width:74px;top:14px}
  /* keep the headline clear of the badge: at this width the first line ran under it */
  .hero h1,.hero .pill{padding-right:84px}
  .hero .pill{padding-right:15px;max-width:calc(100% - 84px)}}

/* ---------- hero separator ---------- */
/* Owner asked for the original site's dashed rule back. Ink dashes on the white of the strip below,
   so it reads black on white rather than sitting on the sage ground. The detector logs
   repeating-gradient stripes as an ADVISORY; kept deliberately, the owner likes it. */
.stripe-rule{height:10px;width:100%;background-color:var(--card);
  background-image:repeating-linear-gradient(90deg,var(--ink) 0 14px,transparent 14px 28px)}

/* ---------- trust strip ---------- */
.trust{background:var(--card);border-bottom:1px solid var(--line);
  padding-top:26px;padding-bottom:26px}
.trust-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px 18px}
@media(max-width:720px){.trust-grid{display:grid;grid-template-columns:repeat(2,1fr)}}
.trust-cell{display:flex;flex-direction:column;gap:3px}
.trust-cell b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.45rem,3vw,1.85rem);
  letter-spacing:-.01em;color:var(--green)}
.trust-cell span{font-size:.88rem;color:var(--ink-soft)}
/* Below 720px this becomes a 2-column grid, where space-between does not apply. */

/* ---------- services: typography, not icon tiles ---------- */
#services{background:var(--card)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,52px) clamp(26px,4vw,48px)}
@media(max-width:900px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.svc{grid-template-columns:1fr;gap:28px}}
.svc-item h3{margin-bottom:9px}
.svc-item p{color:var(--ink-soft);font-size:.97rem;line-height:1.55}

/* the legal note: a plain panel, no coloured side tab */
.note{display:flex;gap:16px;align-items:flex-start;margin-top:clamp(40px,5vw,60px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,28px)}
.note svg{flex:0 0 24px;width:24px;height:24px;color:var(--green);margin-top:2px}
.note b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin-bottom:6px}
.note p{color:var(--ink-soft);font-size:.96rem;max-width:72ch}

/* ---------- how it works ---------- */
.how{background:var(--paper-2);border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);counter-reset:s}
@media(max-width:780px){.steps{grid-template-columns:1fr;gap:26px}}
/* numbered because the order genuinely carries information: you cannot survey before you call */
.step{counter-increment:s;position:relative;padding-top:52px}
.step::before{content:counter(s);position:absolute;top:0;left:0;
  width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1rem}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:.97rem}

/* ---------- reviews ---------- */
.reviews{background:var(--card)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
@media(max-width:940px){.review-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.review-grid{grid-template-columns:1fr}}
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.4vw,24px);display:flex;flex-direction:column;gap:13px}
.stars{color:var(--amber);font-size:1rem;letter-spacing:.09em}
.review p{font-size:.97rem;line-height:1.55;color:var(--ink)}
.who{display:flex;align-items:center;gap:11px;margin-top:auto}
/* MUST stay `.who .av`, not `.av`. As a bare class (0,1,0) it loses to `.who span` (0,1,1) below,
   and the initials render in muted grey on green at 1.5:1, which is invisible. Third instance of
   this exact specificity trap today. */
.who .av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.who b{display:block;font-size:.94rem}
.who span{font-size:.83rem;color:var(--ink-soft)}

/* ---------- closing CTA ---------- */
.cta{background:var(--green);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta p{margin:16px auto 0;max-width:48ch;color:rgba(255,255,255,.92);font-size:1.05rem}
.cta .hero-actions{justify-content:center;margin-top:28px}
.cta .btn-primary{background:#fff;color:var(--green-d)}
.cta .btn-primary:hover{background:var(--paper)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:rgba(244,239,227,.78);
  padding-top:clamp(44px,6vw,64px);padding-bottom:110px}
.footer-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(26px,4vw,48px)}
@media(max-width:820px){.footer-in{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}}
@media(max-width:520px){.footer-in{grid-template-columns:1fr}}
.footer-brand p{margin-top:14px;font-size:.94rem;max-width:42ch}
.footer-brand .brand span{color:var(--paper)}
.footer-brand .brand b{color:var(--green-on-dark)}
.areas{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.areas span{font-size:.8rem;padding:5px 11px;border-radius:100px;
  background:rgba(255,255,255,.08);color:rgba(244,239,227,.86)}
.foot-col h3{font-family:var(--font-display);font-size:.98rem;color:var(--paper);margin-bottom:12px}
.foot-col a,.foot-col p{display:block;font-size:.94rem;text-decoration:none;margin-bottom:8px;
  color:rgba(244,239,227,.78);transition:color .16s ease}
.foot-col a:hover{color:var(--green-on-dark)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  margin-top:clamp(30px,4vw,44px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.86rem;color:rgba(244,239,227,.62)}

/* ---------- mobile bottom nav ---------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:repeat(4,1fr);background:var(--card);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:860px){.bottom-nav{display:grid}}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 4px;text-decoration:none;color:var(--ink-soft);
  font-size:.75rem;font-weight:600;min-height:52px;justify-content:center}  /* 12.75px, was 10.9px */
.bottom-nav a svg{width:21px;height:21px}
.bottom-nav a[aria-current="page"]{color:var(--green)}
.bottom-nav a.book{color:var(--green)}

/* ---------- the one authored motion: sections settle as you reach them ---------- */
.rise{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease-out, transform .62s cubic-bezier(.16,1,.3,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn{transition:none}
}