/* ═══════════════════════════════════════════════════════════════
   RODENT PROS ODESSA — homepage
   Tokens → base → components → responsive
   Palette derived from the logo: navy shield, green "PROS" wordmark,
   bone ground. Ochre = West Texas caliche, used only as an accent.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root{
  /* color */
  --ink:        #0F2338;
  --navy:       #1B3A5B;
  --navy-mid:   #16324F;
  --navy-deep:  #0E2439;
  --green:      #5A9A46;
  /* Text step. Dark enough to clear 4.5:1 on the tinted bone bands, not just white. */
  --green-dk:   #40702E;
  /* Brand green is #5A9A46, but white-on-that is only 3.38:1. Buttons and any
     green-on-white text use these darker steps so body-size text clears 4.5:1. */
  --green-cta:  #487C37;
  --green-cta-h:#3A6A2B;
  --bone:       #F6F3ED;
  --bone-dk:    #EAE3D5;
  --ochre:      #C08A2E;
  --white:      #FFFFFF;

  --body-fg:    #33455A;
  --muted:      #5C6C7E;
  --line:       rgba(15,35,56,.13);
  --line-soft:  rgba(15,35,56,.08);

  /* type */
  --disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* layout */
  --wrap: 1200px;
  --gut: clamp(1.15rem, 4vw, 2.75rem);
  --pad-band: clamp(3.5rem, 7vw, 6.5rem);
  --r: 14px;
  --r-sm: 9px;

  /* effects */
  --sh-sm: 0 1px 2px rgba(15,35,56,.06), 0 3px 10px rgba(15,35,56,.05);
  --sh-md: 0 2px 4px rgba(15,35,56,.05), 0 14px 34px rgba(15,35,56,.10);
  --sh-lg: 0 24px 60px rgba(9,22,38,.30);
}

/* ── RESET / BASE ────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--white);
  color:var(--body-fg);
  font:400 1.0625rem/1.72 var(--text);
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  /* Clear the fixed floating call button so it never covers footer content. */
  padding-bottom:4.5rem;
}

img{ max-width:100%; height:auto; display:block }
a{ color:var(--navy); text-decoration:none }
p{ margin:0 0 1.15em }
p:last-child{ margin-bottom:0 }

h1,h2,h3,h4{
  font-family:var(--disp);
  color:var(--ink);
  margin:0 0 .6em;
  letter-spacing:-.021em;
  line-height:1.1;
  font-weight:800;
  text-wrap:balance;
}
h1{ font-size:clamp(2.05rem,4.6vw,3.55rem); line-height:1.05 }
h1 em, h2 em{ font-style:normal; color:var(--green) }
h2{ font-size:clamp(1.6rem,3.1vw,2.5rem) }
h3{ font-size:1.115rem; font-weight:700; letter-spacing:-.012em; line-height:1.25 }

strong,b{ font-weight:700; color:var(--ink) }
/* Bold darkens on light bands, but --ink on a dark band is invisible.
   Dark contexts keep the surrounding colour; weight alone carries the emphasis. */
.strip strong,.strip b,.hero strong,.hero b,.band--navy strong,.band--navy b,
.feat strong,.feat b,.final strong,.final b,.ftr strong,.ftr b,
.callbar strong,.callbar b{ color:inherit }
em{ font-style:italic }

:focus-visible{ outline:3px solid var(--ochre); outline-offset:3px; border-radius:3px }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.8rem 1.2rem;
  font:600 .95rem var(--disp);
}
.skip:focus{ left:.5rem; top:.5rem }

/* ── LAYOUT PRIMITIVES ───────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.wrap--narrow{ max-width:880px }

.band{ padding-block:var(--pad-band); position:relative }
.band--white{ background:var(--white) }
.band--bone{ background:var(--bone) }
.band--navy{ background:var(--navy); color:#C6D4E2 }
.band--navy h2,.band--navy h3,.band--navy strong,.band--navy b{ color:#fff }
.band--navy a{ color:#fff }
.band--navy .wrap{ position:relative; z-index:1 }

.pillars-band{ padding-block:clamp(2rem,3.4vw,2.9rem) }

/* ── SECTION HEADS / EYEBROWS ────────────────────────────────── */
.eyebrow{
  font:600 .735rem/1.3 var(--disp);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--green-dk);
  margin:0 0 .85rem;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{
  content:""; width:26px; height:9px; flex:none;
  background-color:rgba(90,154,70,.42);
  border-radius:2px;
}
.eyebrow--light{ color:#9CC98B }
.eyebrow--light::before{ background-color:rgba(255,255,255,.34) }

.sec-head{ max-width:760px; margin:0 0 clamp(2rem,3.6vw,3rem) }
.sec-head h2{ margin-bottom:.5em }
.sec-head__sub{ font-size:1.115rem; color:var(--muted); margin:0 }
.band--navy .sec-head__sub{ color:#A8BCCF }

.more{ margin:1.6rem 0 0; font-family:var(--disp); font-weight:700; font-size:.98rem }
.more a{ color:var(--green-dk); border-bottom:2px solid rgba(90,154,70,.32); padding-bottom:2px }
/* .more a and .band--navy a have equal specificity, and .more a comes later —
   so a dark band needs this explicit override or the link stays dark green. */
.band--navy .more a{ color:#fff; border-bottom-color:rgba(255,255,255,.42) }
.more a:hover{ border-bottom-color:var(--green) }
.more--light a{ color:#9CC98B; border-bottom-color:rgba(156,201,139,.4) }

/* ── Links on dark / navy / blue backgrounds ──────────────────
   The base <a> is var(--navy), which vanishes on navy/ink sections.
   .band--navy a, .ftr a and .napcard a already carry light overrides;
   these dark sections did not, leaving their inline links invisible. */
.final a:not(.btn):not(.feat__go):not(.fab-call),
.phero  a:not(.btn):not(.feat__go):not(.fab-call),
.feat   a:not(.btn):not(.feat__go):not(.fab-call),
.hero   a:not(.btn):not(.feat__go):not(.fab-call){
  color:#fff;
}
.final a:not(.btn):not(.feat__go):not(.fab-call):hover,
.phero  a:not(.btn):not(.feat__go):not(.fab-call):hover,
.feat   a:not(.btn):not(.feat__go):not(.fab-call):hover,
.hero   a:not(.btn):not(.feat__go):not(.fab-call):hover{
  color:#cce6ff;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:700 1rem/1 var(--disp); letter-spacing:-.008em;
  padding:.98rem 1.5rem; border-radius:var(--r-sm);
  border:2px solid transparent; cursor:pointer;
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease;
  text-align:center;
}
.btn--lg{ padding:1.12rem 1.9rem; font-size:1.055rem }
.btn--sm{ padding:.68rem 1.05rem; font-size:.925rem }

.btn--go{ background:var(--green-cta); color:#fff; box-shadow:0 2px 0 var(--green-cta-h), var(--sh-sm) }
.btn--go:hover{ background:var(--green-cta-h); transform:translateY(-2px); box-shadow:0 3px 0 #2E561F, var(--sh-md) }
.btn--ghost{ background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.36) }
.btn--ghost:hover{ background:#fff; color:var(--navy); border-color:#fff; transform:translateY(-2px) }
.btn--line{ background:transparent; color:var(--navy); border-color:var(--line) }
.btn--line:hover{ border-color:var(--navy); background:var(--navy); color:#fff; transform:translateY(-2px) }

.cta-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin:2rem 0 0 }
.cta-row--center{ justify-content:center; margin-top:clamp(2.2rem,4vw,3.2rem) }

/* ── URGENCY STRIP ───────────────────────────────────────────── */
.strip{ background:var(--ink); color:#B9C7D6 }
.strip__in{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:40px; padding-block:.5rem;
}
.strip p{ margin:0; font-size:.815rem; letter-spacing:.012em }
.strip__msg{ display:flex; align-items:center; gap:.55rem }
.strip__nap{ color:#7C8DA0; white-space:nowrap; font-variant-numeric:tabular-nums }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--ochre); flex:none;
  box-shadow:0 0 0 3px rgba(192,138,46,.22);
}

/* ── HEADER ──────────────────────────────────────────────────── */
/* Header is white on purpose: the logo PNG has an opaque white ground,
   so any tinted header would show a box around the mark. */
.hdr{
  position:sticky; top:0; z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .22s ease;
}
.hdr[data-stuck]{ box-shadow:0 6px 24px rgba(15,35,56,.10) }
.hdr__in{
  display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.6rem);
  min-height:94px; padding-block:.5rem;
}

.brand{ flex:none; display:block; line-height:0 }
.brand img{ height:clamp(52px,5.5vw,72px); width:auto }

.nav{ display:flex; gap:clamp(.35rem,1vw,.9rem); flex:1 1 auto; justify-content:center; min-width:0; margin-left:clamp(.75rem,2vw,1.75rem) }
.nav a{
  font:600 .9rem var(--disp); color:var(--ink);
  padding:.45rem 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--green); transition:right .22s ease;
}
.nav a:hover::after{ right:0 }

.hdr__act{ display:flex; align-items:center; gap:.75rem; flex:none }
.tel{
  display:inline-flex; align-items:center; gap:.4rem; line-height:1;
  text-align:right; white-space:nowrap; text-decoration:none;
}
.tel__ico{ font-size:1.05rem; line-height:1; color:var(--green-dk) }
.tel__num{
  font:800 1.05rem var(--disp); color:var(--ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.tel:hover .tel__num{ color:var(--green-dk) }
.tel:hover .tel__ico{ color:var(--green-dk) }

.burger{
  display:none; width:46px; height:44px; border:1px solid var(--line);
  background:var(--bone); border-radius:var(--r-sm); cursor:pointer;
  padding:0; place-items:center; gap:5px;
}
.burger span{ display:block; width:20px; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease }
.hdr[data-open] .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.hdr[data-open] .burger span:nth-child(2){ opacity:0 }
.hdr[data-open] .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ── DROPDOWN NAV ─────────────────────────────────────────────── */
.nav__drop{ position:relative }
.nav__toggle{
  font:600 .955rem var(--disp); color:var(--ink);
  background:none; border:none; padding:.45rem 0; cursor:pointer;
  position:relative; white-space:nowrap;
  display:flex; align-items:center; gap:.35rem;
}
.nav__toggle::after{
  content:""; display:inline-block; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--ink); transition:transform .2s ease;
}
.nav__toggle:hover{ color:var(--green-dk) }
.nav__toggle::before{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--green); transition:right .22s ease;
}
.nav__toggle:hover::before{ right:0 }
.nav__menu{
  position:absolute; left:50%; transform:translateX(-50%);
  top:100%; min-width:260px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-md); padding:.5rem 0; z-index:200;
  /* Closed by default: invisible and non-interactive, but still laid out so
     the cursor can travel from the trigger into the menu. */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease;
}
/* PRIMARY desktop mechanism = CSS :hover. JS also sets [data-open] for
   click / keyboard / touch. Both open the same menu; only one is ever open
   because the JS clears the others. */
.nav__drop:hover .nav__menu,
.nav__drop[data-open] .nav__menu{
  opacity:1; visibility:visible; pointer-events:auto;
}
.nav__drop:hover .nav__toggle::after,
.nav__drop[data-open] .nav__toggle::after{ transform:rotate(180deg) }
.nav__drop:hover .nav__toggle,
.nav__drop[data-open] .nav__toggle{ color:var(--green-dk) }
/* Keep the rightmost menus inside the viewport */
.nav__drop:last-child .nav__menu,
.nav__drop:nth-last-child(2) .nav__menu{ left:auto; right:0; transform:none }
.nav__menu a{
  display:block; padding:.55rem 1.15rem; font:400 .92rem var(--text);
  color:var(--body-fg); white-space:nowrap;
}
.nav__menu a:hover{ background:var(--bone); color:var(--navy) }
.nav__menu--wide{
  min-width:480px; display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.nav__drop:hover .nav__menu--wide,
.nav__drop[data-open] .nav__menu--wide{ opacity:1; visibility:visible; pointer-events:auto }
.nav__menu-group{ padding:.5rem 0 }
.nav__menu-label{
  display:block; padding:.4rem 1.15rem; font:700 .78rem var(--disp);
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.nav__menu-group a{ padding:.45rem 1.15rem; font-size:.88rem }

/* ── HERO ────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, #23486E 0%, transparent 60%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#C6D4E2;
  padding-block:clamp(3.2rem,6.2vw,5.6rem);
}
.hero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2.2rem,4.4vw,4rem); align-items:center;
}
.hero h1{ color:#fff; margin-bottom:1.05rem }
.hero h1 em{ color:#8FC57C }

.lede{ font-size:clamp(1.06rem,1.35vw,1.22rem); line-height:1.66; color:#C9D7E5; max-width:60ch }
.lede strong{ color:#fff }
.lede--sm{ font-size:1.09rem }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 0; padding:0 }
.chips li{
  font:600 .805rem var(--disp); color:#CBDCEA;
  background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.15);
  padding:.42rem .8rem; border-radius:100px;
}

.hero__side{ display:grid; gap:1rem }

/* ── PHOTO FRAMES ────────────────────────────────────────────── */
.shot{ margin:0; position:relative }
.shot img{
  width:100%; border-radius:var(--r);
  box-shadow:var(--sh-md);
  object-fit:cover;
}
/* Hairline ring so photos with pale content still read as framed on light bands. */
.band--white .shot img,
.band--bone .shot img{ outline:1px solid rgba(15,35,56,.09); outline-offset:-1px }
.shot figcaption{
  margin-top:.8rem; font-size:.885rem; line-height:1.5; color:var(--muted);
  padding-left:.85rem; border-left:3px solid rgba(90,154,70,.45);
}
.band--navy .shot figcaption{ color:#9FB3C7 }
.shot--hero img{ aspect-ratio:16/10; box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.13) }
.shot--tall img{ aspect-ratio:4/5 }
/* This frame's photo has a bright empty wall up top — bias the crop to the floor line. */
.shot--low img{ object-position:50% 74% }

/* ── BEFORE & AFTER GALLERY ──────────────────────────────────── */
/* Each file is a single pre-composed frame with BEFORE/AFTER already set into
   the artwork, so this is a plain figure grid — no slider, no split overlay.
   430px min forces exactly two columns inside the 1200px wrap and drops to one
   below ~940px; min() keeps it from overflowing narrow phones. */
.ba{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  gap:clamp(1.7rem,3.2vw,2.6rem) clamp(1.4rem,2.6vw,2.2rem);
}
.ba .shot img{
  /* Match the source ratio exactly: the baked-in labels must never be cropped. */
  aspect-ratio:2400/1340; object-fit:contain;
  background:var(--navy-deep);
  border:1px solid rgba(255,255,255,.13);
}
.ba figcaption b{
  display:block; margin-bottom:.24rem;
  font-family:var(--disp); font-size:1rem; letter-spacing:-.005em;
}

/* ── SIGNATURE: THE GAP GAUGE ────────────────────────────────── */
.gauge{
  background:var(--bone); border-radius:var(--r); padding:1.2rem 1.35rem 1.1rem;
  box-shadow:var(--sh-lg);
}
.gauge__ttl{
  font:600 .69rem var(--disp); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .8rem;
}
.gauge__row{ display:flex; align-items:center; margin-bottom:.5rem }
.gauge__bar{
  height:24px; flex:1 1 auto; min-width:14px;
  background:linear-gradient(180deg,#DFD8C8,#CFC6B2);
  border-block:1px solid #C0B69F;
}
.gauge__bar:first-child{ border-radius:3px 0 0 3px; border-left:1px solid #C0B69F }
.gauge__bar:nth-child(3){ border-radius:0 3px 3px 0; border-right:1px solid #C0B69F }
.gauge__gap{
  height:24px; flex:none; background:var(--ink);
  box-shadow:inset 2px 0 3px rgba(0,0,0,.55), inset -2px 0 3px rgba(0,0,0,.55);
}
.gauge__gap--mouse{ width:7px }
.gauge__gap--rat{ width:14px }
.gauge__val{
  flex:none; margin-left:.85rem; min-width:5.7rem;
  font:600 .82rem var(--disp); color:var(--muted);
}
.gauge__val b{ font-size:1.06rem; color:var(--ink); margin-right:.28rem }
.gauge__note{
  margin:.85rem 0 0; padding-top:.8rem; border-top:1px solid var(--line-soft);
  font-size:.855rem; line-height:1.5; color:#54677D;
}

/* ── PILLARS ─────────────────────────────────────────────────── */
.pillars{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.1rem,2.6vw,2.2rem);
}
.pillars li{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:.15rem .85rem }
.pillars__ico{
  grid-row:1/3; width:42px; height:42px; border-radius:50%;
  background:var(--white); color:var(--green-dk);
  display:grid; place-items:center; flex:none;
  box-shadow:var(--sh-sm);
}
.pillars__ico svg{ width:21px; height:21px }
.pillars h3{ margin:0; font-size:1.015rem; align-self:end }
.pillars p{ margin:0; font-size:.905rem; line-height:1.5; color:var(--muted) }

/* ── SPLIT (text + photo) ────────────────────────────────────── */
.split{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(2rem,4.4vw,4rem); align-items:center;
}
.split--flip .split__copy{ order:2 }
.split--flip .shot{ order:1 }
.split__copy > h2{ margin-bottom:.7em }

.pull{
  margin:1.7rem 0; padding:1.15rem 0 1.15rem 1.5rem;
  border-left:4px solid var(--green);
  background:linear-gradient(90deg, rgba(90,154,70,.07), transparent 70%);
}
.pull p{
  margin:0; font-family:var(--disp); font-weight:600;
  font-size:clamp(1.09rem,1.5vw,1.28rem); line-height:1.4;
  color:var(--ink); letter-spacing:-.014em;
}

/* ── SERVICE CARDS ───────────────────────────────────────────── */

/* Featured core service — leads the grid because the copy calls it the core service */
.feat{
  position:relative; overflow:hidden; display:flex; align-items:center;
  gap:1.5rem; margin-bottom:clamp(.9rem,1.6vw,1.25rem);
  background:linear-gradient(105deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius:var(--r); padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1.4rem,2.4vw,2rem);
  transition:transform .18s ease, box-shadow .18s ease;
}
.feat__body{ position:relative; z-index:1; flex:1 1 auto }
.feat .card__tag{ background:rgba(143,197,124,.18); color:#A6D493 }
.feat h3{ color:#fff; font-size:clamp(1.24rem,2vw,1.62rem); margin:0 0 .35rem }
.feat p:last-child{ margin:0; color:#B4C7D9; font-size:1.005rem; max-width:52ch }
.feat__go{
  position:relative; z-index:1; flex:none;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:var(--green); box-shadow:0 2px 0 var(--green-dk);
  transition:transform .2s ease;
}
.feat__go svg{ width:21px; height:21px }
.feat:hover{ transform:translateY(-3px); box-shadow:var(--sh-md) }
.feat:hover .feat__go{ transform:translateX(4px) }

.cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(.9rem,1.6vw,1.25rem);
}
.card{
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:1.5rem 1.4rem 1.45rem;
  position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--green); transform:scaleY(0); transform-origin:top;
  transition:transform .24s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:transparent }
.card:hover::before{ transform:scaleY(1) }
.card h3{ margin:0 0 .45rem }
.card h3 a{ color:var(--ink) }
.card:hover h3 a{ color:var(--green-dk) }
.card p{ margin:0; font-size:.945rem; line-height:1.58; color:var(--muted) }
.card__tag{
  display:inline-block; font:600 .655rem var(--disp)!important; letter-spacing:.13em;
  text-transform:uppercase; color:var(--green-dk);
  background:rgba(90,154,70,.11); padding:.24rem .55rem; border-radius:4px;
  margin:0 0 .6rem!important;
}

.note{
  margin:clamp(1.4rem,2.4vw,2rem) 0 0;
  background:var(--white); border:1px solid var(--line-soft); border-left:4px solid var(--ochre);
  border-radius:var(--r-sm); padding:1.15rem 1.35rem;
}
.note p{ margin:0; font-size:1rem }
.note a{ color:var(--green-dk); border-bottom:2px solid rgba(90,154,70,.3) }
.note a:hover{ border-bottom-color:var(--green) }

/* ── SPECIES ─────────────────────────────────────────────────── */
/* Heading and the rat-vs-mouse pair share a row: the visual answers the question the heading asks. */
.idhead{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:center;
  margin-bottom:clamp(2.4rem,4.2vw,3.4rem);
}
.idhead .sec-head{ margin:0; max-width:none }
.idpair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.9rem,1.8vw,1.35rem); margin:0 }
.idpair img{ aspect-ratio:5/4 }
.idpair figcaption{ border-left:none; padding-left:0; margin-top:.65rem; font-size:.9rem }
.idpair figcaption b{ font-family:var(--disp); font-size:1rem; display:inline-block; margin-right:.2rem }

.species{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.2rem,2.4vw,2rem) clamp(1.6rem,3.2vw,2.8rem);
}
.species li{ padding-top:1.1rem; border-top:2px solid var(--line-soft) }
.species h3{ margin:0 0 .4rem }
.species h3 span{ font-weight:500; color:var(--muted); font-size:.9em; letter-spacing:0 }
.species p{ margin:0; font-size:.965rem; line-height:1.62 }
.species--star{ border-top-color:var(--green)!important }
.species--star .card__tag{ margin-bottom:.55rem!important }

/* ── FACTORS (dl) ────────────────────────────────────────────── */
.factors{ margin:1.9rem 0 1.9rem; display:grid; gap:1.25rem }
.factors > div{ padding-left:1.15rem; border-left:2px solid rgba(255,255,255,.14) }
.factors dt{
  font:700 1.03rem var(--disp); color:#fff; letter-spacing:-.012em; margin-bottom:.22rem;
}
.factors dd{ margin:0; font-size:.975rem; line-height:1.62; color:#AFC2D4 }

/* ── PROCESS STEPS ───────────────────────────────────────────── */
.steps{
  list-style:none; counter-reset:s; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(1.5rem,2.8vw,2.4rem);
}
.steps li{ counter-increment:s; position:relative; padding-left:4rem }
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:-.1rem;
  width:46px; height:46px; border-radius:10px;
  display:grid; place-items:center;
  font:800 1.02rem var(--disp); color:var(--navy);
  background:var(--bone);
  border:1px solid var(--line-soft);
}
.steps li:first-child::before{ background-color:#E4EFDF; color:var(--green-dk); border-color:rgba(90,154,70,.3) }
.steps h3{ margin:0 0 .4rem }
.steps p{ margin:0; font-size:.965rem; line-height:1.62 }

/* ── PRICING ─────────────────────────────────────────────────── */
.price{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r);
  box-shadow:var(--sh-sm); overflow:hidden; max-width:900px;
}
.ptable{ width:100%; border-collapse:collapse; font-size:1rem }
.ptable thead th{
  background:var(--navy); color:#fff; text-align:left;
  font:600 .7rem var(--disp); letter-spacing:.13em; text-transform:uppercase;
  padding:.9rem 1.35rem;
}
.ptable thead th:last-child{ text-align:right }
.ptable tbody th{
  text-align:left; font-weight:700; font-family:var(--text); color:var(--ink);
  padding:1.05rem 1.35rem; border-top:1px solid var(--line-soft); vertical-align:top;
}
.ptable tbody th span{ display:block; font-weight:400; font-size:.885rem; color:var(--muted); margin-top:.15rem }
.ptable tbody td{
  padding:1.05rem 1.35rem; border-top:1px solid var(--line-soft);
  text-align:right; white-space:nowrap; vertical-align:top;
  font-family:var(--disp); font-weight:700; color:var(--ink);
}
.ptable tbody tr:nth-child(odd){ background:#FCFBF8 }
.free{ color:var(--green-dk); font-size:1.14rem }
.price__fine{
  margin:0; padding:1.15rem 1.35rem; background:var(--bone);
  border-top:1px solid var(--line-soft);
  font-size:.925rem; line-height:1.6; color:#54677D; font-style:italic;
}
.price .more{ margin:0; padding:1.05rem 1.35rem; border-top:1px solid var(--line-soft) }

/* ── TICK LIST ───────────────────────────────────────────────── */
.ticks{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.95rem }
.ticks li{ position:relative; padding-left:2rem; font-size:1rem; line-height:1.62 }
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:19px; height:19px; border-radius:50%;
  background:rgba(90,154,70,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23487C37' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.ticks a{ color:var(--green-dk); border-bottom:2px solid rgba(90,154,70,.3) }
.ticks a:hover{ border-bottom-color:var(--green) }

/* ── COMPARISON TABLE ────────────────────────────────────────── */
.scroller{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--r); box-shadow:var(--sh-sm);
}
.ctable{ width:100%; min-width:760px; border-collapse:collapse; font-size:.95rem }
.ctable thead th{
  font:700 .935rem var(--disp); color:var(--ink); text-align:left; vertical-align:bottom;
  padding:1.1rem .95rem; border-bottom:2px solid var(--line);
  line-height:1.25;
}
.ctable thead td{ border-bottom:2px solid var(--line) }
.ctable thead th.me{ color:#fff; background:var(--navy); border-radius:var(--r) var(--r) 0 0; border-bottom-color:var(--navy) }
.ctable tbody th{
  text-align:left; font:700 .93rem var(--text); color:var(--ink);
  padding:.85rem .95rem; border-top:1px solid var(--line-soft);
  white-space:nowrap;
}
.ctable tbody td{
  padding:.85rem .95rem; border-top:1px solid var(--line-soft);
  color:var(--muted); vertical-align:top;
}
.ctable tbody td.me{ background:rgba(90,154,70,.07); color:var(--ink); font-weight:600 }
.ctable tbody tr:last-child td.me{ border-radius:0 0 var(--r) var(--r) }
.yes{ color:var(--green-dk) }
.no{ color:#A8503C }
.hint{
  display:none; margin:.7rem 0 0; font:600 .8rem var(--disp);
  color:var(--muted); letter-spacing:.04em;
}
.after-table{ margin:clamp(1.5rem,2.6vw,2.2rem) 0 0; max-width:70ch; font-size:1.05rem }

/* ── SERVICE AREA ────────────────────────────────────────────── */
.area{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.4vw,3rem) }
.area__col h3{
  font-size:.735rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--muted); padding-bottom:.7rem; margin-bottom:1rem;
  border-bottom:1px solid var(--line-soft);
}
.links{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.links a{
  font:600 1.005rem var(--disp); color:var(--ink);
  display:inline-flex; align-items:center; gap:.5rem;
}
.links a::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green); flex:none }
.links a:hover{ color:var(--green-dk) }

.zips{
  list-style:none; margin:0 0 1.1rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.zips li{
  font:600 .875rem var(--disp); font-variant-numeric:tabular-nums;
  background:var(--bone); border:1px solid var(--line-soft);
  color:var(--ink); padding:.34rem .6rem; border-radius:5px;
}
.area__note{ font-size:.925rem; line-height:1.6; color:var(--muted) }

/* ── EDITOR PLACEHOLDER BLOCK ────────────────────────────────── */
.todo{
  border:2px dashed rgba(192,138,46,.5); border-radius:var(--r);
  background:rgba(192,138,46,.055); padding:clamp(1.3rem,2.4vw,1.9rem);
  max-width:70ch;
}
.todo__ttl{
  font:700 .715rem var(--disp)!important; letter-spacing:.14em; text-transform:uppercase;
  color:#8A6216; margin-bottom:.85rem!important;
}
.todo p{ font-size:.975rem; line-height:1.65 }
.todo code{ font-size:.9em; background:rgba(15,35,56,.07); padding:.1em .35em; border-radius:3px }
.todo__links{ margin-bottom:0!important; display:flex; flex-wrap:wrap; gap:1.2rem }
.todo__links a{ font-family:var(--disp); font-weight:700; color:var(--green-dk) }

/* Legacy chip style — no longer used */
.confirm{
  display:inline-block; font:600 .8rem var(--disp); white-space:normal;
  color:#8A6216; background:rgba(192,138,46,.13);
  border:1px dashed rgba(192,138,46,.55); border-radius:4px;
  padding:.1rem .45rem; letter-spacing:.005em;
}
/* Same marker on the dark footer: flip to a light ochre so it stays legible. */
.ftr .confirm,
.band--navy .confirm{ color:#E3BA66; background:rgba(224,180,94,.15); border-color:rgba(224,180,94,.5) }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.25rem 3rem 1.25rem 0;
  font:700 clamp(1.03rem,1.35vw,1.145rem) var(--disp); color:var(--ink);
  letter-spacing:-.014em; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:1.35rem;
  width:22px; height:22px; border-radius:50%;
  background:var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .22s ease, background-color .22s ease;
}
.faq summary:hover{ color:var(--green-dk) }
.faq summary:hover::after{ background-color:var(--bone-dk) }
.faq details[open] summary{ color:var(--green-dk) }
.faq details[open] summary::after{ transform:rotate(180deg) }
.faq__a{ padding:0 3rem 1.5rem 0; max-width:68ch }
.faq__a p{ margin:0; font-size:1.02rem; line-height:1.68 }
.faq__a a{ color:var(--green-dk); border-bottom:2px solid rgba(90,154,70,.3) }
.faq__a a:hover{ border-bottom-color:var(--green) }

/* ── FINAL CTA ───────────────────────────────────────────────── */
.final{
  position:relative; overflow:hidden;
  /* Gradient stops are darkened from the brand green so the light body copy
     over the lightest stop still clears 4.5:1. */
  background:linear-gradient(150deg, #3C6B2E 0%, #2A6040 55%, var(--navy) 100%);
  color:#DCEBD6; text-align:center;
  padding-block:clamp(3.6rem,6.4vw,5.4rem);
}
.final__in{ position:relative; z-index:1; max-width:760px; margin-inline:auto }
.final h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.85rem); margin-bottom:.55em }
.final p{ font-size:clamp(1.05rem,1.35vw,1.18rem); line-height:1.66; color:#D6E8D0 }
.final .cta-row{ justify-content:center }
/* On the green band a green button disappears into its own background.
   Invert it: white plate, navy label — the strongest separation available here. */
.final .btn--go{
  background:var(--white); color:var(--ink);
  box-shadow:0 2px 0 rgba(15,35,56,.3), var(--sh-md);
}
.final .btn--go:hover{ background:var(--bone); color:var(--ink); box-shadow:0 3px 0 rgba(15,35,56,.34), var(--sh-lg) }
.final__fine{
  margin:1.9rem 0 0!important; font:600 .845rem var(--disp)!important;
  letter-spacing:.05em; color:rgba(255,255,255,.86);
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.ftr{ background:var(--navy-deep); color:#93A7BB; font-size:.955rem }
.ftr__in{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(1.5rem,2.5vw,2.5rem);
  padding-block:clamp(2.8rem,5vw,4rem);
}
.ftr__brand{
  grid-column:1/-1; display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start;
  padding-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,.09);
}
.ftr__brand img{
  height:78px; width:auto; background:var(--bone);
  border-radius:10px; padding:.5rem .7rem; flex:none;
}
.ftr__tag{ font-size:.95rem; line-height:1.6; max-width:34ch; margin:0 }
.ftr__brand address{ font-style:normal; line-height:1.65; margin-top:.5rem }
.ftr__brand address p{ margin-bottom:.5rem }
.ftr__brand address a{ font:800 1.05rem var(--disp); color:#fff; letter-spacing:-.02em }
.ftr__muted{ font-size:.83rem; color:#8199AF }
.ftr h3{
  color:#fff; font-size:.735rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; margin-bottom:1.1rem;
}
.ftr a{ color:#B8C9DA }
.ftr a:hover{ color:#fff }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.ftr__col--locations{ grid-column:1/-1 }
.ftr__loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem }
.ftr__loc-label{
  display:block; font:700 .72rem var(--disp); text-transform:uppercase;
  letter-spacing:.1em; color:#8199AF; margin-bottom:.5rem;
}
.ftr__base{
  display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; justify-content:space-between;
  align-items:center; padding-block:1.35rem;
  border-top:1px solid rgba(255,255,255,.09);
}
.ftr__base p{ margin:0; font-size:.845rem; color:#7890A6 }

/* ── STICKY MOBILE CALL BAR ──────────────────────────────────── */
/* Floating click-to-call button — one instance per page, fixed bottom-right,
   safe-area aware, visible at every breakpoint above the nav and footer. */
.fab-call{
  position:fixed; right:clamp(1rem,2.4vw,1.75rem); bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:300;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--green-cta); color:#fff;
  padding:.72rem .98rem; border-radius:999px;
  box-shadow:0 10px 24px rgba(14,36,57,.30);
  font:700 .96rem/1 var(--disp); letter-spacing:.01em; text-decoration:none;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.fab-call:hover{ background:var(--green-cta-h); transform:translateY(-2px); box-shadow:0 14px 30px rgba(14,36,57,.34) }
.fab-call:focus-visible{ outline:3px solid var(--green-cta-h); outline-offset:3px }
.fab-call__ico{ font-size:1.18rem; line-height:1; transform:scaleX(-1) }
.fab-call__txt{ white-space:nowrap }

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.7,.3,1) }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1!important; transform:none!important; transition:none!important }
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important }
}

/* ══ RESPONSIVE ══════════════════════════════════════════════ */

@media (max-width:1120px){
  .hero__in{ grid-template-columns:1fr; gap:2.6rem }
  .hero__side{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end }
  .shot--hero img{ aspect-ratio:4/3 }
  .split{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) }
  .pillars{ grid-template-columns:repeat(2,1fr); row-gap:1.7rem }
}

@media (max-width:1200px){
  .nav{ display:none; margin-inline:0 }
  .burger{ display:grid }
  .hdr[data-open] .nav{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(15,35,56,.16);
    padding:.6rem var(--gut) 1.3rem; gap:0;
    max-height:80vh; overflow-y:auto;
  }
  .nav__drop{ border-bottom:1px solid var(--line-soft) }
  .nav__toggle{
    width:100%; text-align:left; padding:.95rem 0; font-size:1.075rem;
    justify-content:space-between;
  }
  .nav__toggle::before{ display:none }
  .nav__toggle::after{
    border-left:5px solid transparent; border-right:5px solid transparent;
    border-top:0; border-bottom:5px solid var(--ink);
    transition:transform .2s ease;
  }
  .nav__drop[data-open] .nav__toggle::after{ transform:rotate(180deg) }
  .nav__menu{
    display:none; position:static; transform:none;
    min-width:0; border:none; box-shadow:none; padding:0 0 .5rem;
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .nav__drop[data-open] .nav__menu{ display:block }
  .nav__menu--wide{ grid-template-columns:1fr; min-width:0 }
  .nav__menu a{ padding:.7rem 0 .7rem 1rem; font-size:1rem }
  .nav__menu-label{ padding:.5rem 0 .2rem }
  .hdr__in{ position:relative }
  .area{ grid-template-columns:1fr 1fr }
  .area__col--zip{ grid-column:1/-1 }
  .ftr__in{ grid-template-columns:repeat(2, 1fr) }
  .ftr__brand{ grid-column:1/-1 }
  .ftr__col--locations{ grid-column:1/-1 }
  .ftr__loc-grid{ grid-template-columns:1fr 1fr }
}

@media (max-width:880px){
  .split, .split--flip{ grid-template-columns:1fr; gap:2.2rem }
  .split--flip .split__copy{ order:1 }
  .split--flip .shot{ order:2 }
  .shot--tall img{ aspect-ratio:16/10 }
  .shot--tall{ max-width:600px }
  .idhead{ grid-template-columns:1fr; gap:1.9rem }
  .idpair{ max-width:560px }
  .strip__nap{ display:none }
  .hint{ display:block }
  /* Keep the row label anchored while the comparison columns scroll. */
  .ctable tbody th, .ctable thead td{
    position:sticky; left:0; z-index:2;
    background:var(--white);
    box-shadow:1px 0 0 var(--line-soft);
  }
  .ctable tbody tr:nth-child(even) th{ background:var(--white) }
}

/* Narrow screens: shrink the label column so OUR column stays on screen at rest
   instead of being the first thing that scrolls away. */
@media (max-width:620px){
  .ctable{ min-width:660px; font-size:.885rem }
  .ctable tbody th{
    white-space:normal; width:118px; min-width:118px; font-size:.845rem;
    padding-inline:.7rem; line-height:1.35;
  }
  .ctable thead th{ font-size:.845rem; padding-inline:.7rem }
  .ctable tbody td{ padding-inline:.7rem }
}

@media (max-width:760px){
  .hdr .btn--sm{ display:none }
  .hero__side{ grid-template-columns:1fr }
  body{ padding-bottom:5rem }
  .steps li{ padding-left:3.5rem }
  .steps li::before{ width:40px; height:40px; font-size:.94rem }
  .faq summary{ padding-right:2.4rem }
  .faq__a{ padding-right:0 }
  .ptable thead th{ padding-inline:1rem }
  .ptable tbody th, .ptable tbody td{ padding-inline:1rem }
  .cta-row .btn{ flex:1 1 100%; }
  .fab-call{ padding:.7rem; }
  .fab-call__txt{ display:none }
}

@media (max-width:600px){
  .pillars{ grid-template-columns:1fr; gap:1.35rem }
  .idpair{ gap:.85rem }
  .feat{ flex-direction:column; align-items:flex-start; gap:1.15rem }
  .area{ grid-template-columns:1fr }
  .ftr__in{ grid-template-columns:1fr; gap:2rem }
  .ftr__brand{ flex-direction:column; text-align:center; align-items:center }
  .ftr__loc-grid{ grid-template-columns:1fr }
  .ftr__base{ justify-content:flex-start; text-align:center }
  .tel__lbl{ display:none }
  .tel__num{ font-size:1.06rem }
  .strip__msg{ font-size:.775rem }
  .chips li{ font-size:.765rem; padding:.36rem .68rem }
  .gauge{ padding:1.05rem 1.1rem }
  .gauge__val{ min-width:5.2rem; font-size:.78rem }
}

@media (max-width:400px){
  .tel__num{ font-size:.98rem }
}

/* ═══════════════════════════════════════════════════════════════
   INTERIOR PAGES — silos 1–5 & 7
   Everything below is additive. Nothing above this line is changed.

   Design thesis for these pages: they are long (2,000–3,000 words) and
   most of that length is procedure. So the page has to do two things the
   homepage never had to do — hold a reader through a long scroll, and
   make it impossible to skim past a line that can hurt you.

   Hence the one new signature device: the HAZARD PLATE (.warn). Every
   "never do this" rule in the copy — dry-sweeping droppings, plugging weep
   holes, blowing a nest out with compressed air, taping a hole shut — gets
   lifted out of the paragraph flow onto an ochre plate with a monospaced
   rule label. The device encodes something true about the sentence rather
   than decorating it: on this site, advice and hazard do not look alike.

   IBM Plex Mono joins Archivo + Source Sans 3 for one job only: rule
   labels, breadcrumbs, TOC numbers, and measurements. Measurement is what
   this business actually sells (a quarter inch is the whole product), so
   figures get a face that treats them as data.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 72ch;          /* reading width for long-form body copy */
  --rail: 306px;
  --ochre-dk: #8A6216;      /* the ochre step that clears 4.5:1 on its own tint */
}

/* ── BREADCRUMBS ─────────────────────────────────────────────── */
.crumbs{ background:var(--bone); border-bottom:1px solid var(--line-soft) }
.crumbs ol{
  list-style:none; margin:0; padding-block:.72rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.1rem .5rem;
  font:500 .775rem/1.5 var(--mono); letter-spacing:-.01em;
}
.crumbs li{ display:flex; align-items:center; gap:.5rem; color:var(--muted) }
.crumbs li+li::before{ content:"/"; color:#A9B4C0 }
.crumbs a{ color:#4B6076 }
.crumbs a:hover{ color:var(--green-dk); text-decoration:underline; text-underline-offset:2px }
.crumbs [aria-current]{ color:var(--ink); font-weight:600 }

/* ── INTERIOR HERO ───────────────────────────────────────────── */
.phero{
  position:relative; overflow:hidden; color:#C6D4E2;
  background:
    radial-gradient(120% 96% at 92% 0%, #23486E 0%, transparent 62%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding-block:clamp(2.5rem,4.6vw,4.1rem);
}
.phero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
  gap:clamp(1.8rem,4vw,3.4rem); align-items:center;
}
.phero--plain .phero__in{ grid-template-columns:1fr; max-width:900px }
.phero h1{ color:#fff; margin-bottom:.75rem; font-size:clamp(1.85rem,3.9vw,3.05rem) }
.phero__hook{
  font:700 clamp(1.1rem,1.55vw,1.32rem)/1.48 var(--disp);
  color:#fff; letter-spacing:-.016em; margin:0 0 1rem; max-width:34ch;
}
.phero__sub{ font-size:1.055rem; line-height:1.68; color:#C2D2E1; max-width:58ch; margin:0 }
.phero__sub strong{ color:#fff }
.phero .cta-row{ margin-top:1.6rem }
.phero .shot img{ aspect-ratio:4/3; box-shadow:var(--sh-lg); border:1px solid rgba(255,255,255,.14) }
.phero .shot figcaption{ color:#9FB3C7; border-left-color:rgba(143,197,124,.5) }
.phero .eyebrow{ margin-bottom:.9rem }

/* ── ARTICLE + RAIL ──────────────────────────────────────────── */
.layout{
  display:grid; grid-template-columns:minmax(0,1fr) var(--rail);
  gap:clamp(2rem,4vw,3.6rem);
  align-items:start;
  padding-block:clamp(2.4rem,4.4vw,3.9rem);
}
/* Grid items default to min-width:auto, which refuses to shrink below the
   widest thing inside them. A prose table sets its own min-width so its columns
   stay readable and scroll instead of crushing — without this, that min-width
   propagates up and widens the whole page instead of scrolling the table. */
.layout > *{ min-width:0 }

/* ── LONG-FORM PROSE ─────────────────────────────────────────── */
.prose{ max-width:var(--measure); font-size:1.075rem }
.prose > *{ max-width:100% }
.prose h2{
  font-size:clamp(1.42rem,2.5vw,2.02rem);
  margin:2.5em 0 .62em; scroll-margin-top:118px;
}
.prose > h2:first-child{ margin-top:0 }
.prose h2::after{
  content:""; display:block; width:44px; height:3px; border-radius:2px;
  background:var(--green); margin-top:.62rem;
}
.prose h3{
  font-size:clamp(1.09rem,1.5vw,1.235rem); margin:2em 0 .5em;
  scroll-margin-top:118px;
}
.prose h3 em{ font-style:italic; font-weight:600; color:var(--muted) }
.prose p{ margin:0 0 1.1em }
.prose a{
  color:var(--green-dk); font-weight:600;
  border-bottom:1px solid rgba(90,154,70,.36);
}
.prose a:hover{ border-bottom-width:2px; border-bottom-color:var(--green) }
.prose hr{ height:0; margin:2.6em 0; border:0; border-top:1px solid var(--line-soft) }

.prose ul{ list-style:none; margin:0 0 1.35em; padding:0; display:grid; gap:.72rem }
.prose ul li{ position:relative; padding-left:1.5rem; line-height:1.66 }
.prose ul li::before{
  content:""; position:absolute; left:.16rem; top:.66em;
  width:6px; height:6px; border-radius:50%; background:var(--green);
}
.prose ul ul{ margin:.7rem 0 0 }
.prose ul ul li::before{ background:none; border:1.5px solid var(--green) }

/* A fully-bold line directly above a list is a group label for that list,
   not a heading — it never belongs in the document outline or the TOC. */
.grp{
  margin:1.7em 0 .7em!important;
  font:700 .78rem var(--mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink);
  padding-bottom:.5rem; border-bottom:1px solid var(--line);
}
.grp:first-child{ margin-top:0!important }

/* ── NUMBERED PROCEDURE ──────────────────────────────────────── */
/* Used only where the copy is genuinely sequential — the "what we do on a
   job" lists. Order carries information there; nowhere else gets numbers. */
.numsteps{ list-style:none; counter-reset:n; margin:0 0 1.5em; padding:0; display:grid; gap:1.05rem }
.numsteps li{ counter-increment:n; position:relative; padding-left:3.2rem; line-height:1.66 }
.numsteps li::before{
  content:counter(n,decimal-leading-zero);
  position:absolute; left:0; top:-.05em;
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font:700 .82rem var(--mono); color:var(--navy);
  background:var(--bone); border:1px solid var(--line-soft);
}
.numsteps li:first-child::before{
  background:#E4EFDF; color:var(--green-dk); border-color:rgba(90,154,70,.34);
}

/* ── SIGNATURE: HAZARD PLATE ─────────────────────────────────── */
.warn{
  position:relative; margin:1.75em 0; border-radius:var(--r-sm);
  background:rgba(192,138,46,.075);
  border:1px solid rgba(192,138,46,.34);
  border-left:4px solid var(--ochre);
  padding:1.05rem 1.25rem .95rem;
}
.warn__lbl{
  display:block; margin:0 0 .4rem!important;
  font:700 .69rem var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--ochre-dk);
}
.warn p{ margin:0 0 .7em; font-size:1.015rem; line-height:1.64 }
.warn p:last-child{ margin-bottom:0 }
.warn strong{ color:#4A3609 }
.warn a{ color:var(--ochre-dk); border-bottom:1px solid rgba(138,98,22,.4); font-weight:600 }
.warn a:hover{ border-bottom-color:var(--ochre-dk) }
.warn ul{ margin:.5rem 0 .2rem }
.warn ul li::before{ background:var(--ochre) }

/* Emergency — the poison-ingestion line. Red, and it should stop the eye. */
.warn--alarm{
  background:rgba(168,80,60,.075); border-color:rgba(168,80,60,.36);
  border-left-color:#A8503C;
}
.warn--alarm .warn__lbl,.warn--alarm a{ color:#8C3A28 }
.warn--alarm strong{ color:#6E2C1E }
.warn--alarm ul li::before{ background:#A8503C }

/* Scope disclaimer — quiet by design. It is a boundary, not a hazard. */
.warn--note{
  background:var(--bone); border-color:var(--line); border-left-color:var(--navy);
}
.warn--note .warn__lbl{ color:var(--muted) }
.warn--note strong{ color:var(--ink) }
.warn--note a{ color:var(--green-dk); border-bottom-color:rgba(90,154,70,.36) }
.warn--note ul li::before{ background:var(--navy) }

/* ── IN-ARTICLE CALL BAND ────────────────────────────────────── */
.callband{
  margin:2em 0; border-radius:var(--r);
  background:linear-gradient(104deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#C6D4E2; padding:1.3rem 1.45rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem;
}
.callband p{ margin:0; flex:1 1 15rem; font-size:1.03rem; line-height:1.55 }
.callband strong,.callband b{ color:#fff }
.callband__tel{
  flex:none; font:800 clamp(1.06rem,1.5vw,1.25rem)/1 var(--disp);
  color:#fff!important; letter-spacing:-.022em; font-variant-numeric:tabular-nums;
  border:0!important; display:inline-flex; align-items:center; gap:.5rem;
  background:var(--green-cta); padding:.9rem 1.25rem; border-radius:var(--r-sm);
  box-shadow:0 2px 0 var(--green-cta-h);
}
.callband__tel:hover{ background:var(--green-cta-h); box-shadow:0 3px 0 #2E561F }
.callband a:not(.callband__tel){ color:#fff; border-bottom:1px solid rgba(255,255,255,.45); font-weight:600 }

/* ── LINK ROW (Related / Nearby / inline guide rows) ─────────── */
.linkrow{
  margin:1.6em 0!important; padding:1rem 1.15rem;
  background:var(--bone); border-radius:var(--r-sm);
  border-left:3px solid rgba(90,154,70,.5);
  font-size:.99rem; line-height:1.9;
}
.linkrow__lbl{
  display:block; font:700 .69rem var(--mono); letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.3rem;
}
.linkrow a{ font-weight:600 }
.linkrow .sep{ color:#A9B4C0; padding:0 .3rem }

/* ── TABLES INSIDE PROSE ─────────────────────────────────────── */
.prose .scroller{ margin:1.7em 0 }
.ptable--prose{ min-width:min(460px,100%); font-size:.985rem }
.ptable--prose thead th{ white-space:nowrap }
/* Prose tables read left-to-right like sentences; only true figure columns
   (.num) get the right-aligned tabular treatment the pricing table uses. */
.ptable--prose thead th:last-child{ text-align:left }
.ptable--prose thead th.num{ text-align:right }
.ptable--prose tbody th{ font-family:var(--text); white-space:normal }
.ptable--prose tbody td{
  white-space:normal; text-align:left;
  font-family:var(--text); font-weight:400; color:var(--body-fg);
}
.ptable--prose tbody td.num{
  text-align:right; font-family:var(--disp); font-weight:700;
  color:var(--ink); white-space:nowrap;
}
.ptable--prose tbody td a,.ptable--prose tbody th a{
  color:var(--green-dk); font-weight:600; border-bottom:1px solid rgba(90,154,70,.36);
}

/* ── RIGHT RAIL ──────────────────────────────────────────────── */
.rail{ position:sticky; top:112px; display:grid; gap:1.1rem; font-size:.95rem }

.callcard{
  background:var(--navy); border-radius:var(--r); padding:1.35rem 1.3rem;
  color:#BFD0E0; box-shadow:var(--sh-md);
}
.callcard__ttl{
  font:700 .69rem var(--mono)!important; letter-spacing:.15em; text-transform:uppercase;
  color:#9CC98B; margin:0 0 .6rem!important;
}
.callcard p{ margin:0 0 1rem; font-size:.945rem; line-height:1.58 }
.callcard .btn{ width:100%; margin-bottom:.55rem }
.callcard .btn:last-of-type{ margin-bottom:0 }
.callcard__hrs{
  margin:1rem 0 0!important; padding-top:.85rem; border-top:1px solid rgba(255,255,255,.14);
  font:600 .78rem var(--mono)!important; letter-spacing:.02em; color:#8EA5BA;
}

.toc{
  background:var(--bone); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:1.2rem 1.25rem;
}
.toc__ttl{
  font:700 .69rem var(--mono)!important; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .8rem!important;
}
.toc ol{ list-style:none; counter-reset:t; margin:0; padding:0; display:grid; gap:.52rem }
.toc li{ counter-increment:t; display:grid; grid-template-columns:1.9rem 1fr; align-items:baseline }
.toc li::before{ content:counter(t,decimal-leading-zero); font:500 .74rem var(--mono); color:#9AA7B4 }
.toc a{ color:var(--ink); font-weight:600; line-height:1.36; font-size:.925rem }
.toc a:hover{ color:var(--green-dk) }

.railhome{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.2rem;
}
.railhome__ttl{
  font:700 .69rem var(--mono)!important; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .5rem!important;
}
.railhome p{ margin:0 0 .7rem; font-size:.9rem; line-height:1.55; color:var(--muted) }
.railhome a{
  font:700 .97rem var(--disp); color:var(--green-dk);
  display:inline-flex; align-items:center; gap:.4rem;
  border-bottom:2px solid rgba(90,154,70,.3); padding-bottom:1px;
}
.railhome a:hover{ border-bottom-color:var(--green) }

/* ── FAQ (visible answers, not <details>) ────────────────────── */
/* Answers stay in the DOM as plain text on purpose: every answer opens with
   a direct definitional sentence so answer engines can lift it whole. A
   disclosure widget would hide the very sentence the page is built for. */
.qa{ display:grid; gap:0; border-top:2px solid var(--line) }
.qa__item{ padding:clamp(1.3rem,2.2vw,1.7rem) 0; border-bottom:1px solid var(--line) }
.qa h3{
  margin:0 0 .55rem; font-size:clamp(1.06rem,1.45vw,1.18rem);
  scroll-margin-top:118px; color:var(--ink);
}
.qa__a{ max-width:70ch }
.qa__a p{ margin:0 0 .8em; font-size:1.035rem; line-height:1.7 }
.qa__a p:last-child{ margin-bottom:0 }
/* The opening sentence is the extractable answer — give it a touch more ink. */
.qa__a > p:first-of-type::first-line{ color:var(--ink); font-weight:600 }
.qa__a a{ color:var(--green-dk); font-weight:600; border-bottom:1px solid rgba(90,154,70,.36) }
.qa__a a:hover{ border-bottom-color:var(--green) }
.qa__a ul{ list-style:none; margin:.4rem 0 1em; padding:0; display:grid; gap:.6rem }
.qa__a ul li{ position:relative; padding-left:1.5rem; line-height:1.64 }
.qa__a ul li::before{
  content:""; position:absolute; left:.16rem; top:.64em;
  width:6px; height:6px; border-radius:50%; background:var(--green);
}

/* ── SILO NAVIGATION ─────────────────────────────────────────── */
.silo{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:.8rem;
}
.silo li{ display:flex }
.silo a{
  flex:1 1 auto; display:flex; align-items:center; gap:.7rem;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-sm);
  padding:.9rem 1rem; font:600 .965rem/1.34 var(--disp); color:var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.silo a::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--green); transition:transform .16s ease;
}
.silo a:hover{ transform:translateY(-2px); box-shadow:var(--sh-sm); border-color:rgba(90,154,70,.45); color:var(--green-dk) }
.silo a:hover::before{ transform:scale(1.6) }
.silo [aria-current]{ background:var(--bone); border-color:var(--line); color:var(--muted) }
.silo [aria-current]::before{ background:#A9B4C0 }

.silogrid{ display:grid; gap:clamp(1.8rem,3.2vw,2.6rem) }
.silogrid h3{
  font:600 .735rem var(--disp); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding-bottom:.7rem; margin-bottom:1rem;
  border-bottom:1px solid var(--line-soft);
}

/* ── NAP BLOCK ───────────────────────────────────────────────── */
.napcard{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.5rem;
  padding-block:1.35rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.9rem; color:#93A7BB;
}
.napcard b{ color:#fff; font-family:var(--disp); letter-spacing:-.01em }
.napcard a{ color:#fff; font:800 1.06rem var(--disp); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.napcard__hrs{ font:600 .8rem var(--mono); letter-spacing:.04em; color:#8EA5BA }

/* ── PROSE-SCOPED OVERRIDES FOR SHARED PARTS ─────────────────── */
.prose .confirm,.qa__a .confirm,.warn .confirm{
  font-family:var(--mono); font-size:.775rem; font-weight:500;
}

/* ══ RESPONSIVE — interior pages ═════════════════════════════ */

@media (max-width:1080px){
  /* Rail unsticks and moves above the article: on a narrow screen the call
     card and the contents list are more use before the read than beside it. */
  .layout{ grid-template-columns:minmax(0,1fr); gap:2rem }
  .rail{ position:static; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); align-items:start }
  .prose{ max-width:none }
  .phero__in{ grid-template-columns:1fr; gap:2.1rem }
  .phero .shot{ max-width:620px }
}

@media (max-width:760px){
  .prose{ font-size:1.045rem }
  .prose h2{ margin-top:2.1em }
  .rail{ grid-template-columns:1fr }
  .callband{ padding:1.15rem }
  .callband__tel{ flex:1 1 100%; justify-content:center }
  .numsteps li{ padding-left:2.8rem }
  .numsteps li::before{ width:30px; height:30px; font-size:.76rem }
  .crumbs ol{ font-size:.735rem }
  /* Drop the deepest crumb on phones — the H1 immediately below says it. */
  .crumbs li:last-child{ display:none }
  .toc{ padding:1rem 1.05rem }
}

@media (max-width:480px){
  .warn{ padding:.95rem 1rem .85rem }
  .linkrow{ padding:.9rem 1rem; line-height:1.85 }
  /* Lower the floor so a two-column price table fits a phone with no scroll.
     min() keeps the floor from ever exceeding the scroller and inventing a
     2px drag. It stays a floor, not a cap: a wide comparison table still
     exceeds it on its own content and scrolls inside .scroller as before. */
  .ptable--prose{ min-width:min(340px,100%); font-size:.95rem }
  .ptable--prose thead th,.ptable--prose tbody td,.ptable--prose tbody th{ padding-left:.72rem; padding-right:.72rem }
}

/* ══ SILO 8 / 9 ADDITIONS ════════════════════════════════════════
   Appended for the audience and trust pages. Every selector below is either a
   new class or a descendant of one, so nothing above this line changes. */

/* ── /before-after/ hero ─────────────────────────────────────────
   The before/after files are pre-composed 2400x1340 frames with the BEFORE and
   AFTER labels baked into the artwork. Cropping them to the standard 4:3 hero
   ratio would cut the labels off, and at .76fr the two halves get too small to
   read — so this hero splits evenly and matches the source ratio exactly.
   The even split is gated above 1080px: below that the base rule stacks the hero
   to one column, and a two-up split there would render each half unreadably
   small. This block sits after that media query, so it has to opt in by width
   rather than override it. */
@media (min-width:1081px){
  .phero--ba .phero__in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
}
.phero--ba .shot img{
  aspect-ratio:2400/1340; object-fit:contain; background:var(--navy-deep);
}

/* ── Before/after grid inside prose ──────────────────────────────
   .ba was written for the homepage's navy band. On a white article band the
   pale hairline border disappears and the caption title needs full ink.
   One pair per row, at every width. The base .ba packs two across once it has
   ~900px, which happens below 1080px where .prose loses its max-width — that
   would make each composite smaller on a tablet than on a desktop, and these
   frames are two photographs side by side already, so halving them costs the
   detail the pair exists to show. */
.prose .ba{ margin:1.9em 0 2.3em; grid-template-columns:minmax(0,1fr) }
.prose .ba .shot img{ border-color:rgba(15,35,56,.10) }
.prose .ba figcaption b{ color:var(--ink) }

/* ── Grouped FAQ (the /faq/ hub) ─────────────────────────────────
   Sixty-odd answers need sections. The group heading takes h3 and the questions
   step down to h4, which keeps the outline legal and lets each group carry its
   own bordered list. Pages with a single ungrouped FAQ are untouched: they emit
   no .qa__grp and their questions stay at h3. */
.prose .qa__grp{
  margin:clamp(2.4rem,4.2vw,3.4rem) 0 1rem;
  font:700 .755rem/1.35 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--green-dk); scroll-margin-top:118px;
}
.prose .qa__grp:first-of-type{ margin-top:1.4rem }
.qa h4{
  margin:0 0 .55rem; font-size:clamp(1.06rem,1.45vw,1.18rem);
  font-weight:700; letter-spacing:-.012em; line-height:1.25;
  scroll-margin-top:118px; color:var(--ink);
}

/* ── Footer contact column ──────────────────────────────────────
   .ftr address a is the phone number — 800 weight, 1.16rem, white. The new
   contact-page link sits in the same address block and must not inherit that,
   so it opts out by class rather than by overriding the phone rule. */
.ftr address a.ftr__more{
  font:600 .935rem var(--disp); color:#B8C9DA; letter-spacing:0;
}
.ftr address a.ftr__more:hover{ color:#fff }

/* ── FAQ hub group jump row ──────────────────────────────────────
   Eight group headings, sitting between the "Frequently asked questions" H2 and
   the first group. Rendered only when a FAQ region actually has groups, so no
   other page emits it. */
.faqjump{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin:1.3rem 0 .4rem; padding:1.05rem 1.15rem;
  background:var(--bone); border:1px solid var(--line-soft); border-radius:var(--r);
}
.faqjump a{
  background:var(--white); border:1px solid var(--line-soft); border-radius:999px;
  padding:.45rem .85rem; font:600 .875rem/1.3 var(--disp); color:var(--ink);
  border-bottom-width:1px;
}
.prose .faqjump a{ border-bottom:1px solid var(--line-soft) }
.faqjump a:hover{ border-color:rgba(90,154,70,.5); color:var(--green-dk) }