/* ---------- self-hosted fonts ----------
   Previously loaded from fonts.googleapis.com, which blocked rendering for ~960ms
   before a single font byte was requested. These are the same files Google serves —
   the Latin subsets of the variable fonts, byte-identical, so the typography is
   unchanged. Both families are SIL Open Font Licence; see fonts/OFL-*.txt.
   Archivo italic is deliberately absent: every italic rule in this stylesheet
   (.ball-note, .pull, .vrow .na) inherits the body family, so it is never rendered.
   Axis ranges and unicode-range are copied verbatim from Google's own @font-face. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:90% 120%;
  font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:300 600;
  font-display:swap;
  src:url('fonts/newsreader-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#12211A;
  --forest:#1D4132;
  --forest-2:#2A5A45;
  --paper:#F0EFE8;
  --paper-2:#E4E6DC;
  --ball:#C3E1A5;        /* the client's own logo green, sampled from reference/logo.png
                            (34.5% of its opaque pixels). Was #C7DB2F, the tennis ball.
                            1.24:1 on --paper, so it carries no contrast on light — the
                            1.5px --ink borders on the markers do that job, not the fill.
                            11.63:1 on --ink, 7.89:1 on --forest, 5.53:1 on --forest-2. */
  --clay:#9C5230;        /* darkened from #AE5E38: 4.08:1 on --paper failed AA for
                            the small uppercase labels it is used for. Now 4.97:1. */
  --line:rgba(18,33,26,.16);
  --line-soft:rgba(18,33,26,.09);
  --disp:'Archivo',system-ui,sans-serif;
  --body:'Newsreader',Georgia,serif;
  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1.62;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing. Images carry width/height attributes so the browser can
   reserve space, but with max-width:100% shrinking the width, the attribute height would
   otherwise be used verbatim and stretch the image vertically. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

h1,h2,h3,h4,.disp{font-family:var(--disp);font-variation-settings:'wdth' 112;letter-spacing:-.02em;line-height:1.02;margin:0}
h1{font-size:clamp(40px,6.6vw,82px);font-weight:800}
h2{font-size:clamp(30px,4.2vw,52px);font-weight:750}
h3{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
p{margin:0 0 1.05em}
.lede{font-size:clamp(19px,2.1vw,24px);line-height:1.5}

/* label device: the small uppercase docket tag used to head every block */
.tag{
  font-family:var(--disp);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  font-variation-settings:'wdth' 100;
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
}
.tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ball);
  border:1.5px solid var(--ink);flex:none}
.tag.on-dark{color:var(--paper)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border:1.5px solid var(--ink);border-radius:2px;
  text-decoration:none;cursor:pointer;background:none;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
/* Keeps the base .btn ink border. The ball was vivid enough to read as a button on
   its own; the sage is 1.24:1 on --paper and is not, so the edge does that work.
   This is the primary conversion element — do not re-add a border-color override. */
.btn-call{background:var(--ball);color:var(--ink)}
/* Deepens rather than brightens. The ball's hover went lighter (#C7DB2F -> #D6EA40);
   the same move on a pale sage runs it into --paper and the button loses its edge,
   so the step is the same size (0.11 luminance) in the opposite direction. */
.btn-call:hover{background:#AED28A}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--forest);border-color:var(--forest)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.on-dark .btn-ghost,.dark .btn-ghost{border-color:rgba(240,239,232,.45);color:var(--paper)}
.dark .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
/* The darkened clay is only 2.91:1 on --ink, so dark sections take the accent. */
.dark :focus-visible,.notice :focus-visible,footer :focus-visible{outline-color:var(--ball)}

/* ---------- utility bar + header ---------- */
.util{background:var(--forest);color:rgba(240,239,232,.9);font-family:var(--disp);
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.util .wrap{display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:center;padding-block:10px}
.util span{display:inline-flex;align-items:center;gap:8px}
.util span::before{content:"";width:5px;height:5px;background:var(--ball);border-radius:50%}

header{position:sticky;top:0;z-index:60;background:rgba(240,239,232,.96);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:15px}
.mark{text-decoration:none;line-height:1;display:block}
.mark b{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.025em;
  font-variation-settings:'wdth' 118;display:block}
.mark i{font-family:var(--disp);font-style:normal;font-size:10.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--forest-2);display:block;margin-top:4px}
nav{display:flex;gap:28px;align-items:center}
nav a{font-family:var(--disp);font-size:14.5px;font-weight:600;text-decoration:none;padding:4px 0;
  border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--ball)}
.hdr-cta{display:flex;gap:10px;align-items:center}
@media(max-width:900px){nav{display:none}.mark i{letter-spacing:.16em}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(44px,6vw,84px) 0;position:relative;overflow:hidden}
/* Top-aligned, not bottom. The text column runs ~713px while the photo is ~400px, so
   align-items:end left a 313px hole above the photo. Starting both at the same line
   closes it, and the wider photo column makes the photo bigger at the same time. */
.hero-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,4vw,60px);align-items:start}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--forest-2);position:relative;white-space:nowrap}
/* The swipe is 1.24:1 on --paper, so the sage alone would not read. It gets an ink
   ground rule rather than an outline — a box around the words would fight the type,
   and the rule echoes .chase::after, the line the dog runs along directly above. */
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.09em;height:.16em;
  background:var(--ball);box-shadow:0 1.5px 0 var(--ink);z-index:-1}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 26px}
/* Dropped so the photo's bottom edge lines up with the bottom of the h1 ("No
   add-ons."). The offset is the .tag block above the h1, plus the difference between
   the h1 and photo heights. Measured across 900-1400px it stays within 89-96px — the
   two variable parts move in opposite directions and cancel — so this is a flat value
   rather than a clamp, which tracked it worse. */
.hero-photo{position:relative;margin-top:92px}
/* No forced aspect-ratio here. The design-phase 4/3.1 box was narrower than the photo
   (1.29 vs 1.435), so object-fit:cover silently cropped 45px off each side and cut
   James's shoulder and arm. The img carries its own width/height, so letting the photo
   set its own shape means nothing is cropped — and a replacement photo of a different
   shape will follow suit rather than quietly losing its edges again. */
.hero-photo img{border-radius:3px}
.photo-cap{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--forest-2);margin-top:12px;display:flex;gap:9px;align-items:flex-start}
.photo-cap::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ball);
  border:1.5px solid var(--ink);flex:none;margin-top:4px}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}
  /* single column, photo sits above the text — no offset to make */
  .hero-photo{order:-1;margin-top:0}}

/* trust strip */
.trust{margin-top:clamp(40px,5vw,66px);border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr)}
.trust div{padding:22px 22px 22px 0;border-right:1px solid var(--line-soft)}
.trust div:last-child{border-right:0}
.trust b{font-family:var(--disp);font-size:clamp(24px,2.8vw,34px);font-weight:800;
  font-variation-settings:'wdth' 115;display:block;line-height:1;letter-spacing:-.03em}
.trust span{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--forest-2);display:block;margin-top:9px;line-height:1.45}
@media(max-width:760px){.trust{grid-template-columns:1fr 1fr}.trust div{padding-right:16px}
  .trust div:nth-child(2){border-right:0}.trust div:nth-child(1),.trust div:nth-child(2){border-bottom:1px solid var(--line-soft)}}

/* ---------- sections ---------- */
section{padding-block:clamp(60px,7vw,104px)}
.dark{background:var(--forest);color:var(--paper)}
.dark h2,.dark h3{color:var(--paper)}
.tint{background:var(--paper-2)}

/* name disambiguation */
.notice{background:var(--ink);color:var(--paper);padding-block:26px}
.notice .wrap{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.notice p{margin:0;font-size:17px;max-width:74ch;line-height:1.55}
.notice strong{font-family:var(--disp);font-weight:700}
.notice .badge{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:var(--ball);color:var(--ink);padding:6px 11px;border-radius:2px;flex:none}

/* fork */
.fork{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.fork a{background:var(--paper);padding:clamp(26px,3vw,38px);text-decoration:none;display:block;
  transition:background .18s ease}
.fork a:hover{background:#fff}
.fork .n{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--clay);display:block;margin-bottom:14px}
/* Fork cards are top-level choices sitting directly under the h1, so they are h2.
   The type ramp stays at the h3 size — the change is semantic, not visual. */
.fork h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.01em;
  line-height:1.15;margin-bottom:10px}
.fork p{font-size:17px;margin:0 0 16px;line-height:1.5}
.fork .go{font-family:var(--disp);font-size:14px;font-weight:700;border-bottom:2px solid var(--ball);padding-bottom:2px}
@media(max-width:820px){.fork{grid-template-columns:1fr}}

/* ---------- signature: the inclusions ledger ---------- */
.ledger-head{max-width:66ch;margin-bottom:clamp(30px,4vw,48px)}
.ledger{border:1.5px solid var(--ink);background:var(--paper);border-radius:3px;overflow:hidden}
.ledger-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;background:var(--ink);color:var(--paper)}
.ledger-top div{padding:18px 20px;font-family:var(--disp);font-size:13px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.3}
.ledger-top div:nth-child(2){background:var(--forest-2);position:relative}
.ledger-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;border-top:1px solid var(--line-soft)}
.ledger-row > div{padding:17px 20px;display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.4}
.ledger-row > div:nth-child(2){background:rgba(195,225,165,.21);font-family:var(--disp);
  font-size:15px;font-weight:650}
.ledger-row > div:nth-child(3){color:rgba(18,33,26,.62);font-family:var(--disp);font-size:15px;font-weight:500}
.ledger-row .item{font-family:var(--body);font-size:18px;font-weight:500}
.yes::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--ball);
  border:1.5px solid var(--ink);flex:none}
.no::before{content:"";width:16px;height:16px;border-radius:50%;background:transparent;
  border:1.5px dashed rgba(18,33,26,.4);flex:none}
.ledger-foot{padding:18px 20px;border-top:1.5px solid var(--ink);background:var(--paper-2);
  font-size:16px;line-height:1.5}
@media(max-width:820px){
  .ledger-top{grid-template-columns:1fr 1fr;font-size:11px}
  .ledger-top div:first-child{grid-column:1/-1;border-bottom:1px solid rgba(240,239,232,.2)}
  .ledger-row{grid-template-columns:1fr 1fr}
  .ledger-row .item{grid-column:1/-1;border-bottom:1px dashed var(--line-soft);padding-bottom:12px}
}

/* ---------- guarantee list ---------- */
.two{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,72px);align-items:start}
@media(max-width:880px){.two{grid-template-columns:1fr}}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:18px 0 18px 34px;border-bottom:1px solid var(--line-soft);position:relative;line-height:1.5}
.ticks li:first-child{border-top:1px solid var(--line-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:26px;width:11px;height:11px;
  border-radius:50%;background:var(--ball);border:1.5px solid var(--ink)}
.dark .ticks li{border-color:rgba(240,239,232,.16)}
.dark .ticks li::before{border-color:var(--paper)}

/* ---------- robuck ---------- */
.robuck-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:880px){.robuck-grid{grid-template-columns:1fr}}
.ball-note{border-left:3px solid var(--ball);padding:6px 0 6px 22px;margin:26px 0;
  font-size:20px;line-height:1.5;font-style:italic}
.qa{border-top:1px solid rgba(240,239,232,.2);padding:22px 0}
.qa h4{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:10px;color:var(--ball)}
.qa p{margin:0;font-size:17.5px;line-height:1.55;color:rgba(240,239,232,.88)}

/* ---------- services ---------- */
.svc{border-top:1.5px solid var(--ink)}
.svc-item{display:grid;grid-template-columns:.5fr 1.5fr;gap:clamp(20px,4vw,54px);
  padding:clamp(30px,3.6vw,46px) 0;border-bottom:1px solid var(--line)}
.svc-item h3{position:sticky;top:96px}
.svc-item .num{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.15em;
  color:var(--clay);display:block;margin-bottom:10px;text-transform:uppercase}
.svc-item ul{margin:0;padding:0;list-style:none}
.svc-item li{padding:10px 0 10px 26px;position:relative;line-height:1.55;font-size:17.5px;
  border-bottom:1px dashed var(--line-soft)}
.svc-item li:last-child{border-bottom:0}
.svc-item li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;
  background:var(--forest-2);border-radius:50%}
@media(max-width:820px){.svc-item{grid-template-columns:1fr}.svc-item h3{position:static}}

/* pest index */
.pests{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.pests span{font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid var(--line);padding:9px 15px;border-radius:2px;background:var(--paper)}
.dark .pests span{border-color:rgba(240,239,232,.28);background:transparent;color:var(--paper)}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.rev{background:var(--paper);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.rev p{font-size:18px;line-height:1.55;flex:1}
.rev cite{font-family:var(--disp);font-style:normal;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--forest-2)}
.stars{color:var(--clay);letter-spacing:.15em;font-size:15px;margin-bottom:14px}
@media(max-width:980px){.reviews{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.reviews{grid-template-columns:1fr}}

/* ---------- prep ---------- */
.prep-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
@media(max-width:820px){.prep-cols{grid-template-columns:1fr}}

/* ---------- blog teaser ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
/* The read-next block at the foot of an article shows the other two articles, so it
   needs two columns rather than three. See "Blog and articles" in CLAUDE.md. */
.posts.two{grid-template-columns:repeat(2,1fr)}
/* Only one article exists, so blog.html and the home page teaser each show one card.
   A lone card in a repeat(3,1fr) grid sits in a third of the row with two visible
   holes; capping the track instead keeps it at a readable width and makes the single
   card look intended. Both .posts.one and .teaser-one come off when articles 2 and 3
   land — see the card rule in CLAUDE.md. */
.posts.one{grid-template-columns:minmax(0,560px)}
@media(max-width:900px){.posts,.posts.two,.posts.one{grid-template-columns:1fr}}

/* Home page pest-guide teaser, one-article state: heading and blurb beside the single
   card rather than above a grid with two gaps. Same two-column shape and breakpoint as
   .form-grid. Delete this and the `one` class to restore the three-up layout. */
.teaser-one{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:880px){.teaser-one{grid-template-columns:1fr}}
.post{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:clamp(22px,2.4vw,30px);
  text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,border-color .18s ease}
.post:hover{transform:translateY(-3px);border-color:var(--ink)}
.post h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.post .cat{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--clay)}
.post p{font-size:17px;margin:0;line-height:1.5}
/* blog.html nests two spans in .meta (category + read time); without a gap they ran
   together as "TERMITES7 MIN". index.html uses a single flat span and is unaffected. */
.post .meta{font-family:var(--disp);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--forest-2);margin-top:auto;padding-top:10px;font-weight:600;
  display:flex;flex-wrap:wrap;gap:6px 14px}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:880px){.form-grid{grid-template-columns:1fr}}
.field{margin-bottom:18px}
label{font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;display:block;margin-bottom:8px}
label .req{color:var(--clay)}
label .opt{color:var(--forest-2);font-weight:600;letter-spacing:.06em;text-transform:none}
input,textarea,select{
  width:100%;font-family:var(--body);font-size:18px;padding:14px 16px;
  border:1.5px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--ink)}
textarea{min-height:130px;resize:vertical}

/* The native select is stripped so it matches the text inputs — macOS Safari
   otherwise ignores the padding and renders its own rounded pill. The arrow is
   drawn as a rotated border on .field-select rather than a background SVG, because
   a data-URI SVG cannot read var(--ink) and every colour here comes from a token. */
select{appearance:none;-webkit-appearance:none;padding-right:44px;
  cursor:pointer;line-height:1.3}
select:invalid{color:var(--forest-2)}   /* the "Choose one" placeholder, until chosen */
.field-select{position:relative}
.field-select::after{content:'';position:absolute;right:18px;bottom:23px;
  width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg);transform-origin:center;pointer-events:none}
.hp{position:absolute;left:-9999px}
.form-status{font-family:var(--disp);font-size:15px;font-weight:600;line-height:1.5;
  margin:0 0 16px;padding:14px 16px;border-radius:2px;border-left:3px solid}
/* The stripe is --forest, not --ball: the accent on its own tint is ~1.16:1 and the
   success state was effectively invisible. --clay does this job for .is-err. */
.form-status.is-ok{background:rgba(195,225,165,.29);border-color:var(--forest)}
.form-status.is-err{background:rgba(156,82,48,.10);border-color:var(--clay)}
/* Failed enquiry: the call is the action, so it leads and the email follows. */
.form-status .fs-lead{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;
  line-height:1.15;margin-bottom:7px}
.form-status .fs-lead a{text-decoration:none;border-bottom:2.5px solid var(--clay)}
.form-status .fs-sub{display:block;font-size:14px;font-weight:600;line-height:1.45}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{border-bottom:1px solid var(--line-soft);padding:18px 0}
.contact-list .k{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--forest-2);display:block;margin-bottom:5px}
.contact-list .v{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.01em;text-decoration:none}
.contact-list .v:hover{border-bottom:2px solid var(--ball)}

/* ---------- suburbs ---------- */
.suburbs{columns:4;column-gap:34px;font-size:15.5px;line-height:1.85;color:rgba(240,239,232,.82)}
/* Dormant, not dead. The 15 linked suburbs became plain text on 2026-09-01 because
   their pages do not exist yet and 15 href="#" must not ship. These two rules stay so
   that build task 8 restores the links without re-deriving the styling. */
.suburbs a{text-decoration:none}
.suburbs a:hover{color:var(--ball)}
@media(max-width:900px){.suburbs{columns:2}}
@media(max-width:520px){.suburbs{columns:1}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(240,239,232,.72);padding-block:44px;font-size:15px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer a{text-decoration:none}
footer a:hover{color:var(--ball)}

/* mobile sticky call */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:var(--ball);border-top:1.5px solid var(--ink)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;
  font-family:var(--disp);font-weight:800;font-size:16px;text-decoration:none;letter-spacing:.02em}
@media(max-width:900px){.callbar{display:block}body{padding-bottom:60px}}

/* reveal */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ===== blog + article ===== */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}
.filters button{font-family:var(--disp);font-size:13px;font-weight:650;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid var(--line);background:var(--paper);
  padding:10px 17px;border-radius:2px;cursor:pointer;transition:all .16s ease}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:2px;background:var(--line);
  border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;margin-top:clamp(30px,3.6vw,44px)}
.feature > div{background:var(--paper);padding:clamp(28px,3.4vw,46px)}
.feature .side{background:var(--forest);color:var(--paper);display:flex;flex-direction:column;justify-content:center}
.feature .side h3{color:var(--paper);margin-bottom:12px}
.feature .side p{color:rgba(240,239,232,.86);font-size:17px}
.side .cat{color:var(--ball)}
@media(max-width:900px){.feature{grid-template-columns:1fr}}
.article{max-width:70ch;margin:0 auto}
.article h2{margin:44px 0 16px}
/* No drop cap. A .drop::first-letter rule lived here and was removed: at 64px Archivo
   a capital I is a bare vertical stroke, so it rendered as a solid green bar and the
   article's first sentence read as "f you've found something". The failure depends on
   whichever letter an article happens to open with, so it would have come back at
   random on articles 2 and 3. .lede carries the opening size instead. */
.pull{border-left:3px solid var(--ball);padding:6px 0 6px 22px;margin:30px 0;font-size:21px;
  line-height:1.5;font-style:italic}
.article ul{padding-left:0;list-style:none;margin:0 0 26px}
.article ul li{padding:12px 0 12px 30px;position:relative;border-bottom:1px solid var(--line-soft)}
.article ul li::before{content:"";position:absolute;left:2px;top:21px;width:9px;height:9px;
  border-radius:50%;background:var(--ball);border:1.5px solid var(--ink)}
.byline{display:flex;gap:14px;align-items:center;border-top:1.5px solid var(--ink);
  border-bottom:1px solid var(--line);padding:18px 0;margin:26px 0 34px;
  font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.byline span{color:var(--forest-2)}
.inline-cta{background:var(--ink);color:var(--paper);border-radius:3px;
  padding:clamp(26px,3vw,38px);margin:40px 0}
.inline-cta h3{color:var(--paper);margin-bottom:12px}
.inline-cta p{color:rgba(240,239,232,.85);font-size:17px}
.note{background:var(--paper-2);border:1px dashed var(--line);border-radius:3px;
  padding:22px 24px;font-size:16px;line-height:1.55;margin-top:30px}

/* ===== compact service cards (home) ===== */
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.svc-card{background:var(--paper);padding:clamp(22px,2.5vw,30px);text-decoration:none;
  display:flex;flex-direction:column;gap:9px;transition:background .16s ease}
.svc-card:hover{background:#fff}
.svc-card p{font-size:16.5px;margin:0;line-height:1.48}
.svc-card .go{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.05em;
  margin-top:auto;padding-top:8px;border-bottom:2px solid var(--ball);align-self:flex-start}
@media(max-width:900px){.svc-cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svc-cards{grid-template-columns:1fr}}

/* ===== collapsible suburbs ===== */
details.subs summary{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;padding:14px 0;list-style:none;
  border-top:1px solid rgba(240,239,232,.25);border-bottom:1px solid rgba(240,239,232,.25)}
details.subs summary::-webkit-details-marker{display:none}
details.subs summary::after{content:" +";color:var(--ball)}
details.subs[open] summary::after{content:" \2212";color:var(--ball)}
details.subs .suburbs{margin-top:24px}

/* ===== compact reviews ===== */
.reviews.tight .rev{padding:clamp(20px,2.2vw,26px)}
.reviews.tight .rev p{font-size:16.5px;line-height:1.5}

/* ===== hero chase band ===== */
.chase{position:relative;overflow:hidden;background:var(--paper);
  border-bottom:1px solid var(--line);height:clamp(78px,10vw,116px)}
.chase::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:1.5px;
  background:var(--ink);opacity:.5}
.track{position:absolute;left:0;bottom:16px;display:flex;width:200%;
  animation:march 30s linear infinite}
.troupe{width:50%;display:flex;align-items:flex-end;flex:none;padding-right:6%}
.troupe .gap{flex:1}
.critter{display:block;fill:var(--ink)}
.dog{height:clamp(46px,5.6vw,64px);animation:lope .5s ease-in-out infinite alternate;
  transform-origin:bottom center}
.mouse{height:clamp(17px,2.1vw,24px);animation:scurry .19s ease-in-out infinite alternate}
.spider{height:clamp(15px,1.8vw,21px);animation:scurry .13s ease-in-out infinite alternate}
.termite{height:clamp(12px,1.5vw,17px);animation:scurry .16s ease-in-out infinite alternate}
.troupe .mouse,.troupe .spider,.troupe .termite{margin-left:clamp(26px,4vw,64px)}
.troupe .spider{animation-delay:-.07s}
.troupe .termite{animation-delay:-.11s}
@keyframes march{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes lope{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-3px) rotate(.6deg)}}
@keyframes scurry{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .track{animation:none;transform:translateX(-25%)}
  .dog,.mouse,.spider,.termite{animation:none}
}
.hero.with-chase{padding-top:clamp(30px,3.6vw,52px)}

/* ===== credentials row (home, under hero) ===== */
.creds{display:flex;flex-wrap:wrap;gap:10px 12px;margin:26px 0 0}
.cred{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--ink);
  border-radius:100px;padding:9px 17px 9px 12px;background:var(--paper);
  font-family:var(--disp);font-size:13px;font-weight:650;letter-spacing:.01em;line-height:1.2}
.cred.star{background:var(--ball);border-color:var(--ink)}
.cred svg{height:20px;width:auto;fill:var(--ink);flex:none}
.cred b{font-weight:750}
@media(max-width:520px){.cred{font-size:12px;padding:8px 14px 8px 10px}.cred svg{height:17px}}

/* ===== contrast stats ===== */
.contrast{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;margin-bottom:clamp(24px,3vw,36px)}
.cstat{background:var(--paper);padding:clamp(22px,2.6vw,32px)}
.cstat b{font-family:var(--disp);font-size:clamp(26px,3.4vw,40px);font-weight:800;
  font-variation-settings:'wdth' 115;letter-spacing:-.03em;line-height:1;display:block}
.cstat .lab{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--forest-2);display:block;margin:11px 0 14px;line-height:1.4}
.cstat .vs{font-size:16px;line-height:1.45;color:rgba(18,33,26,.62);
  border-top:1px dashed var(--line);padding-top:12px}
.cstat .vs em{font-style:normal;font-family:var(--disp);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:5px;color:var(--clay)}
@media(max-width:820px){.contrast{grid-template-columns:1fr}}

/* ===== two-column compare ===== */
.cmp{border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;background:var(--paper)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:1fr 1fr}
.cmp-head > div{padding:16px 20px;font-family:var(--disp);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper)}
.cmp-head .ours{background:var(--forest-2)}
.cmp-head .ours small{display:block;font-size:10.5px;letter-spacing:.13em;color:var(--ball);margin-top:5px}
.cmp-row{border-top:1px solid var(--line-soft)}
.cmp-row > div{padding:16px 20px;font-size:16.5px;line-height:1.45;display:flex;gap:11px}
.cmp-row .ours{background:rgba(195,225,165,.22);box-shadow:inset 3px 0 0 var(--ball)}
.cmp-row .ours::before{content:"";width:15px;height:15px;border-radius:50%;background:var(--ball);
  border:1.5px solid var(--ink);flex:none;margin-top:4px}
.cmp-row .theirs{color:rgba(18,33,26,.6)}
.cmp-row .theirs::before{content:"";width:15px;height:15px;border-radius:50%;
  border:1.5px dashed rgba(18,33,26,.4);flex:none;margin-top:4px}
@media(max-width:760px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;border-top:1.5px solid var(--ink)}
  .cmp-row .ours::after{content:" — Ultra Pest"}
  .cmp-row .theirs{padding-top:0}
}
.cmp-note{border-top:1.5px solid var(--ink);background:var(--paper-2);padding:17px 20px;
  font-size:15.5px;line-height:1.55}

/* ===== breakdown expander ===== */
details.brk{margin-top:22px;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper)}
details.brk summary{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.06em;
  padding:17px 20px;cursor:pointer;list-style:none}
details.brk summary::-webkit-details-marker{display:none}
details.brk summary::after{content:" +";color:var(--clay)}
details.brk[open] summary{border-bottom:1.5px solid var(--ink)}
details.brk[open] summary::after{content:" \2212"}
.brk-inner{padding:clamp(18px,2.4vw,26px)}
.vtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.vtabs button{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.05em;
  border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);
  padding:11px 18px;border-radius:2px;cursor:pointer}
.vtabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.vpanel[hidden]{display:none}
.vrow{display:grid;grid-template-columns:1fr 1.3fr 1fr 1fr;border-top:1px solid var(--line-soft)}
.vrow:first-child{border-top:none}
.vrow > div{padding:13px 14px;font-size:15.5px;line-height:1.42}
.vrow.hd > div{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:var(--paper)}
.vrow.hd .ours{background:var(--forest-2)}
.vrow .crit{font-family:var(--disp);font-size:13px;font-weight:700}
.vrow .ours{background:rgba(195,225,165,.21)}
.vrow .other{color:rgba(18,33,26,.58);font-size:15px}
.vrow .na{font-style:italic;color:rgba(18,33,26,.4)}
@media(max-width:820px){
  .vrow.hd{display:none}
  .vrow{grid-template-columns:1fr;border-top:1.5px solid var(--ink)}
  .vrow .crit{background:var(--ink);color:var(--paper);font-size:11.5px;
    letter-spacing:.1em;text-transform:uppercase}
  .vrow .ours::before{content:"Thorough — what we do";}
  .vrow .mid::before{content:"Mid-range quote"}
  .vrow .low::before{content:"Budget quote"}
  .vrow .ours::before,.vrow .other::before{display:block;font-family:var(--disp);font-size:10px;
    font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:5px;color:var(--forest-2)}
  .vrow .other::before{color:rgba(18,33,26,.45)}
}

/* ===== services: alternating rows with figures ===== */
.srow{display:grid;grid-template-columns:clamp(180px,26vw,300px) 1fr;
  gap:clamp(26px,4vw,60px);align-items:center;padding:clamp(32px,4vw,54px) 0;
  border-bottom:1px solid var(--line)}
.srow:first-child{border-top:1.5px solid var(--ink)}
.srow.flip{grid-template-columns:1fr clamp(180px,26vw,300px)}
.srow.flip .sfig{order:2}
.sfig{aspect-ratio:1;border-radius:50%;background:var(--paper-2);border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.sfig svg{width:62%;height:auto;fill:var(--ink)}
.sfig .ph{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-family:var(--disp);
  font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(18,33,26,.42)}
/* Service rows sit directly under the page h1, so they are h2. The type ramp stays
   at the h3 size — the change is semantic, not visual. */
.srow h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.01em;
  line-height:1.15;margin-bottom:6px}
.srow .num{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.15em;
  color:var(--clay);display:block;margin-bottom:9px;text-transform:uppercase}
.srow .rule{height:6px;background:var(--ball);width:64px;border:1.5px solid var(--ink);
  border-radius:3px;margin:14px 0 16px}
.srow ul{margin:0;padding:0;list-style:none}
.srow li{padding:9px 0 9px 25px;position:relative;line-height:1.52;font-size:17px}
.srow li::before{content:"";position:absolute;left:2px;top:18px;width:7px;height:7px;
  background:var(--forest-2);border-radius:50%}
@media(max-width:760px){
  .srow,.srow.flip{grid-template-columns:1fr;gap:22px}
  .srow.flip .sfig{order:0}
  .sfig{max-width:190px}
}

/* ===== featured review + ask ===== */
.rev-feature{display:grid;grid-template-columns:1.5fr 1fr;gap:2px;background:var(--line);
  border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.rev-feature > div{background:var(--paper);padding:clamp(26px,3.2vw,40px)}
.rev-feature .plat{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--forest-2);display:block;margin-bottom:12px}
.rev-feature p{font-size:clamp(19px,2.2vw,25px);line-height:1.45;margin:0 0 20px}
.rev-feature cite{font-family:var(--disp);font-style:normal;font-size:14px;font-weight:750;
  letter-spacing:.02em;display:block}
.rev-feature cite span{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--forest-2);margin-top:5px}
.rev-ask{background:var(--forest)!important;color:var(--paper);display:flex;
  flex-direction:column;justify-content:center;gap:12px}
.rev-ask h3{color:var(--paper)}
.rev-ask p{font-size:16.5px!important;line-height:1.5!important;color:rgba(240,239,232,.85);margin:0!important}
.rev-ask .btn{align-self:flex-start}
@media(max-width:820px){.rev-feature{grid-template-columns:1fr}}
.rev-sub{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--forest-2);margin:clamp(30px,3.4vw,44px) 0 16px}

/* ===== service figures: real photo slots ===== */
.sfig{aspect-ratio:1;border-radius:50%;background:var(--paper-2);border:1.5px solid var(--ink);
  overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.sfig img{width:100%;height:100%;object-fit:cover;display:block}
.sfig .slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:14px}
.sfig .slot svg{width:46%;height:auto;fill:var(--ink);opacity:.22}
.sfig .slot span{font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(18,33,26,.5);line-height:1.45}

/* ===== home services strip ===== */
.svc-strip{display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.svc-strip .pests{margin-top:0}
.svc-strip .btn{flex:none}

/* ===== prominent breakdown expander ===== */
details.brk{margin-top:clamp(18px,2.2vw,28px);border:1.5px solid var(--ink);border-radius:3px;
  background:var(--paper);overflow:hidden}
details.brk summary{font-family:var(--disp);padding:20px 24px;cursor:pointer;list-style:none;
  display:flex;flex-direction:column;gap:5px;background:var(--ball);
  transition:background .16s ease}
details.brk summary:hover{background:#AED28A}
details.brk summary::-webkit-details-marker{display:none}
details.brk .sum-t{font-size:17px;font-weight:750;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
details.brk .sum-t::after{content:"+";font-size:23px;font-weight:800;line-height:1}
details.brk[open] .sum-t::after{content:"\2212"}
details.brk .sum-s{font-size:13px;font-weight:600;letter-spacing:.03em;color:rgba(18,33,26,.68)}
details.brk[open] summary{border-bottom:1.5px solid var(--ink)}

/* ===== compact about block ===== */
.about{display:flex;gap:clamp(24px,4vw,56px);align-items:center;flex-wrap:wrap;
  border-left:3px solid var(--ball);padding-left:clamp(20px,3vw,34px)}
.about > div{flex:1 1 460px}
.about h2{max-width:20ch;margin-bottom:14px}
.about p{font-size:17.5px;line-height:1.55;margin:0;max-width:62ch}
.about .btn{flex:none}

/* ================= responsive + mobile nav ================= */
.navtog{display:none;width:46px;height:46px;border:1.5px solid var(--ink);border-radius:2px;
  background:var(--paper);cursor:pointer;padding:0;flex-direction:column;
  align-items:center;justify-content:center;gap:5px}
.navtog span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .18s ease,opacity .18s ease}
.navtog[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtog[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtog[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  .navtog{display:flex}
  nav#mnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-top:1px solid var(--line);border-bottom:1.5px solid var(--ink);
    flex-direction:column;gap:0;padding:6px var(--pad) 14px;box-shadow:0 14px 26px rgba(18,33,26,.09)}
  nav#mnav.open{display:flex}
  nav#mnav a{padding:15px 0;font-size:16px;border-bottom:1px solid var(--line-soft);
    border-top:none;min-height:48px;display:flex;align-items:center}
  nav#mnav a:hover,nav#mnav a[aria-current]{border-bottom-color:var(--line-soft);color:var(--forest-2)}
  header{position:sticky}
  .hdr{position:relative}
}

/* anchor targets clear the sticky header */
section[id],div[id]{scroll-margin-top:96px}
@media(max-width:900px){section[id],div[id]{scroll-margin-top:82px}}

/* type + spacing step-down on small screens */
@media(max-width:600px){
  body{font-size:17px;line-height:1.58}
  .lede{font-size:18px}
  .util{font-size:10.5px}
  .util .wrap{gap:6px 16px;padding-block:8px}
  /* Wordmark and tagline step down so each holds one line; the tagline keeps its
     size and gives up letter-spacing, since it is the only place in the header
     tying the name to the Central Coast. */
  .mark b{font-size:13px}
  .mark i{font-size:9px;letter-spacing:.10em}
  .hdr-cta .btn{white-space:nowrap}
  .btn{padding:14px 20px;font-size:14px;min-height:48px}
  .chase{height:62px}
  .chase::after{bottom:12px}
  .track{bottom:12px}
  .tag{font-size:11px;margin-bottom:14px}
  .srow li,.svc-card p,.post p,.rev p{font-size:16px}
  .contact-list .v{font-size:19px}
  .notice .wrap{gap:12px}
  .notice p{font-size:15.5px}
  .photo-cap{font-size:10.5px}
  input,textarea,select{font-size:16px}   /* stops iOS zooming the form */
}
/* Below ~420px the one-line wordmark (180px at 13px) no longer fits beside the call
   button and hamburger (163px) inside the content box. Rather than shrink the wordmark
   to an unreadable size or drop the tagline, the header wraps: the mark takes its own
   row at full width, the call button and hamburger sit right-aligned beneath it. */
@media(max-width:420px){
  .hdr{flex-wrap:wrap;row-gap:11px}
  .mark{flex:0 0 100%}
  .hdr-cta{margin-left:auto}
  /* two rows makes the sticky header 120px here, so anchors need the extra clearance */
  section[id],div[id]{scroll-margin-top:134px}
}
@media(max-width:400px){
  .trust{grid-template-columns:1fr}
  .trust div{border-right:0;border-bottom:1px solid var(--line-soft);padding-block:16px}
  .trust div:last-child{border-bottom:0}
}

/* tap targets */
@media(hover:none){
  .fork a,.post,.svc-card{min-height:48px}
  .contact-list .v,nav a,footer a{min-height:44px;display:inline-flex;align-items:center}
}

/* ===== grouped prep checklist ===== */
.prep-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.pgroup{background:var(--paper);padding:clamp(20px,2.4vw,28px)}
.pgroup h3{font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--clay);margin-bottom:12px}
.pgroup ul{margin:0;padding:0;list-style:none}
.pgroup li{padding:7px 0 7px 20px;position:relative;font-size:16px;line-height:1.45}
.pgroup li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:7px;
  border-radius:50%;background:var(--ball);border:1.5px solid var(--ink)}
@media(max-width:900px){.prep-groups{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.prep-groups{grid-template-columns:1fr}}

/* ===== trust strip: centred, breathing room ===== */
.trust div{padding:26px 22px;text-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.trust span{max-width:22ch}

/* ===== plain-English comparison cards ===== */
.cstat{display:flex;flex-direction:column;gap:0}
.cstat .clab{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);display:block;margin-bottom:16px;line-height:1.35}
.cline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 13px;border-radius:2px;margin-bottom:7px}
.cline .who{font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;flex:none}
.cline b{font-family:var(--disp);font-size:clamp(19px,2.1vw,25px);font-weight:800;
  font-variation-settings:'wdth' 112;letter-spacing:-.02em;line-height:1.05;text-align:right}
.cline.us{background:var(--ball);border:1.5px solid var(--ink)}
.cline.them{background:transparent;border:1.5px dashed rgba(18,33,26,.28);color:rgba(18,33,26,.62)}
.cwhy{font-size:16px;line-height:1.5;margin:13px 0 0;color:rgba(18,33,26,.78)}
@media(max-width:520px){.cline{flex-direction:column;align-items:flex-start;gap:3px}
  .cline b{text-align:left}}