/* S-Tier Wildlife Control · shared styles */
:root{
  /* client palette */
  --ink:#081C15;        /* deepest, header / footer / hero / call bar */
  --hunter:#1B4332;     /* primary dark green */
  --moss:#2D6A4F;       /* mid green, rules and hovers */
  --gold:#C4A35A;       /* brass accent */
  --gold-lt:#E6D5A8;    /* light gold, small text on dark */
  --paper:#F7F4EE;      /* warm paper */
  --white:#FFFFFF;
  /* Role variables. These exist so dark mode can move one role without dragging the
     others with it. --surface is a raised panel, --btn is a green that always carries
     white text, --paper-lt is paper that stays light even when the page does not. */
  --surface:#FFFFFF;
  --btn:#1B4332;
  --darkbg:#1B4332;
  --paper-lt:#F7F4EE;
  --fade:247,244,238;
  /* Headings get their own role so dark mode can move them without touching the other
     thirty odd places --hunter is used for text. Card and callout titles deliberately
     keep --hunter, so section level and card level stay distinguishable. */
  --head:#1B4332;
  /* derived neutrals, kept inside the green family */
  --text:#081C15;
  --muted:#4E5F55;
  --muted-lt:#D6E0D8;
  --line:#E2DED4;
  --line-dk:#2D6A4F;
  /* out of palette on purpose, so unresolved items can never read as brand */
  --tk:#B03A2E;
  --tk-dk:#EE9280;
  --maxw:1180px; --pad:clamp(1.25rem,5vw,3.5rem);
  --fs-display:clamp(2.4rem,5.4vw,4.1rem);
  --fs-h2:clamp(1.85rem,3.3vw,2.55rem);
  --fs-h3:clamp(1.28rem,1.9vw,1.58rem);
  --fs-h4:1.08rem;
  --fs-lede:clamp(1.08rem,1.5vw,1.26rem);
  --fs-body:1.0625rem;
  --fs-small:.95rem;
  --fs-cap:.9rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--text);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased;
  padding-bottom:74px}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.dark :focus-visible{outline-color:var(--white)}

/* ---- TYPE SCALE ---- */
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-0.022em;color:var(--head)}
h1{font-size:var(--fs-display);font-weight:900;letter-spacing:-0.036em;line-height:.99}
h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.028em;margin-bottom:.7rem;
   text-wrap:balance}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-0.02em;line-height:1.18}
h4{font-size:var(--fs-h4);font-weight:700;letter-spacing:-0.01em}
p{margin:0 0 1.05em}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--white)}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--muted);max-width:38em;
  margin-bottom:2.2rem}
.dark .lede{color:var(--muted-lt)}
.small{font-size:var(--fs-small);color:var(--muted)}
.tk{display:inline-block;background:rgba(176,58,46,.08);color:var(--tk);
  border:1px dashed rgba(176,58,46,.5);padding:.05em .4em;font-size:.82em;font-weight:600}
.dark .tk{color:var(--tk-dk);border-color:rgba(238,146,128,.55);background:rgba(238,146,128,.13)}

/* ---- HEADER + NAV ---- */
.site-head{position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:3px solid var(--gold)}
.site-head .wrap{display:flex;align-items:center;gap:1rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand img{width:50px;height:50px;flex:none}
.brand b{font-size:1.22rem;font-weight:900;letter-spacing:-0.035em;color:var(--hunter);
  line-height:1.05;display:block;white-space:nowrap}
.brand span{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  font-weight:600;display:block}
.brand span span{white-space:nowrap}
.nav{display:none;gap:1.6rem;align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:1rem;color:var(--text);
  padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--gold)}
.nav a[aria-current="page"]{border-color:var(--hunter);color:var(--hunter)}
.head-call{display:flex;align-items:center;gap:.55rem;text-decoration:none;
  background:var(--btn);color:var(--white);font-weight:800;padding:.7rem 1.1rem;
  font-size:1.02rem;min-height:48px;white-space:nowrap}
.head-call:hover{background:var(--btn)}
.head-call{font-size:1.06rem;letter-spacing:-0.01em}
.navtoggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.3rem;
  color:var(--hunter)}
@media(min-width:1000px){.nav{display:flex}.navtoggle{display:none}}
/* Both wordmark lines are set never to break, so the row has to fit them at
   every width. Below 520 the mark, the type and the call button all give a
   little rather than the name splitting. */
@media(max-width:520px){
  .site-head .wrap{gap:.6rem}
  .brand{gap:.55rem}
  .brand img{width:44px;height:44px}
  .brand b{font-size:1.1rem}
  .brand span span{font-size:.58rem;letter-spacing:.06em}
  .head-call{font-size:.95rem;padding:.6rem .75rem;gap:.35rem}
}
/* Below this the number will not fit beside the name. The hero, the footer and
   the mobile menu all still carry it. */
@media(max-width:345px){.head-call{display:none}}
.mobnav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobnav.open{display:block}
.mobnav a{display:block;padding:1rem var(--pad);text-decoration:none;font-weight:700;
  border-bottom:1px solid var(--line);color:var(--hunter)}

/* ---- SECTION RHYTHM ---- */
section{border-bottom:1px solid var(--line)}
.pad{padding-top:clamp(2.8rem,6vw,4.8rem);padding-bottom:clamp(2.8rem,6vw,4.8rem)}
.pad-sm{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
.dark{background:var(--darkbg);color:var(--white);border-bottom:0}
.dark p{color:var(--muted-lt)}
.tint{background:var(--paper)}

/* ---- HERO ---- */
.hero{background:var(--ink);color:var(--white);border-bottom:4px solid var(--gold)}
.hero .wrap{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center;
  padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
@media(min-width:900px){.hero .wrap{align-items:stretch}}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.08fr .92fr;gap:3.2rem}}
.hero h1{margin-bottom:1rem;color:var(--paper-lt)}
.hero h1 em{font-style:normal;color:var(--gold)}
/* each line of the headline is its own block, so the cycling word has a row to
   itself and no width it takes can push anything around */
.hero h1 .l{display:block;color:var(--gold)}
.hero h1 .l.last{margin-top:.38em;color:var(--paper-lt)}
/* the cycling word fades out, then flashes in white through light gold to gold,
   which is where the rest of the question already sits */
.swap{color:var(--gold);font-style:normal;white-space:nowrap;
  transition:opacity .17s linear}
.swap.fade{opacity:0}
@keyframes swapin{
  0%{color:var(--white)}
  40%{color:var(--gold-lt)}
  100%{color:var(--gold)}
}
.swap.flash{animation:swapin .5s ease-out}
@media(prefers-reduced-motion:reduce){
  .swap{transition:none;opacity:1;animation:none}
  .swap.flash{animation:none}
}
.hero .lede{color:var(--muted-lt);margin-bottom:.9rem;max-width:34em}
.hero .lede:last-of-type{margin-bottom:1.8rem}
.hero .lede b{color:var(--white);font-weight:600}
.heroshot{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5}
.heroshot img{width:100%;height:100%;object-fit:cover}
/* the video lies over the photo and only becomes visible once it is actually
   playing, so a refused autoplay or a failed download leaves the picture showing */
.heroshot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;pointer-events:none}
.heroshot video.on{opacity:1}
@media(prefers-reduced-motion:reduce){.heroshot video{transition:none}}
@media(min-width:900px){.heroshot{height:100%;aspect-ratio:auto}}

/* carousel, used in the relocation section */
.carousel{margin:0;display:flex;flex-direction:column;height:100%}
.carousel .frame{position:relative;aspect-ratio:4/3;overflow:hidden;flex:none;
  background:var(--ink)}
/* Once the two columns sit side by side the picture stops being a fixed 4:3 box and
   grows to meet the bottom of the copy on its left, dots included. */
@media(min-width:900px){
  .split:has(.carousel){align-items:stretch}
  .carousel .frame{aspect-ratio:auto;flex:1 1 auto;min-height:26rem}
}
/* every slide is stacked in the same box and only one is shown at a time. no
   transition at all, so the change is a hard cut. */
.carousel .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:none}
.carousel .slide.on{opacity:1}
/* caption sits in its own panel so it reads as part of the photo, and holds a
   fixed height so the column never jumps as the captions change length */
/* Dots live under the picture now. White circles, lit or dimmed, and the whole row
   is a scrub track: press and drag across it to run through the photos. */
.dots{display:flex;justify-content:center;flex-wrap:wrap;gap:.55rem;
  padding:.95rem .5rem .1rem;touch-action:none;cursor:pointer}
.dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:var(--white);opacity:.3;cursor:pointer;
  transition:opacity .18s ease,transform .18s cubic-bezier(.1,.9,.2,1)}
.dots button[aria-current="true"]{opacity:1}
.dots button:hover,.dots button:focus-visible{opacity:1;transform:scale(1.55)}
.dots button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dots.scrubbing button{transition:opacity .08s linear}
@media(prefers-reduced-motion:reduce){.dots button{transition:none}}
.heroshot .ph{position:absolute;left:.6rem;bottom:.6rem;background:rgba(8,28,21,.9);
  color:var(--tk-dk);font-size:.7rem;font-weight:600;padding:.3rem .55rem;
  border:1px dashed rgba(238,146,128,.6)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;
  padding:0 1.6rem;text-decoration:none;font-weight:800;font-size:1.05rem;
  border:2px solid transparent;transition:background .12s,border-color .12s,color .12s}
.btn-primary{background:var(--white);color:var(--hunter);border-color:var(--white)}
.btn-primary:hover{background:var(--gold);border-color:var(--gold)}
/* on a light section the same button inverts, so markup does not have to change */
section:not(.dark) .btn-primary{background:var(--btn);color:var(--white);border-color:var(--btn)}
section:not(.dark) .btn-primary:hover{background:var(--moss);border-color:var(--moss)}
.btn-outline{background:transparent;color:var(--white);border-color:var(--moss)}
.btn-outline:hover{border-color:var(--white)}
.btn-solid{background:var(--btn);color:var(--white);border-color:var(--btn)}
.btn-solid:hover{background:var(--btn);border-color:var(--btn)}

/* ---- PROOF BAR ---- */
.proofbar{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proofbar .wrap{display:grid;gap:1.2rem;padding-top:1.4rem;padding-bottom:1.4rem;
  align-items:center}
@media(min-width:820px){.proofbar .wrap{grid-template-columns:auto 1fr;gap:2.2rem}}
/* Archivo has no star glyph, so text stars fell back to another font and sat off
   the numeral's baseline. This is a vector, sized and positioned against Archivo's
   own digit metrics: the "5.0" ink center sits 0.344em above the baseline, so at
   2rem that is .688rem, less half the star height, gives the vertical-align. */
.stars{display:inline-block;height:1rem;width:6.18rem;fill:var(--hunter);
  vertical-align:.188rem;margin-left:.35rem}
.proofbar .score{font-weight:900;font-size:2rem;color:var(--hunter);letter-spacing:-0.03em;
  line-height:1;margin-right:.15rem}
.proofbar .who{font-size:var(--fs-small);color:var(--muted)}
/* the underline is the link's own border, so the cell has to hug the text or the
   rule runs the width of the bar */
/* pinned to the far end of the bar, and shrunk to its own text so the gold rule
   underlines the words rather than running the width of the cell */
.proofbar a.rev{text-decoration:none;font-weight:700;color:var(--hunter);
  border-bottom:2px solid var(--gold);white-space:nowrap;justify-self:end}

/* sub-pages run the bar on ink so every page opens on the dark green.
   contrast on #081C15: gold 7.36:1, gold-lt 12.17:1, muted-lt 13.07:1 */
.proofbar.onink{background:var(--ink);border-top-color:var(--ink);border-bottom-color:var(--moss)}
.proofbar.onink .score{color:var(--gold)}
.proofbar.onink .stars{fill:var(--gold)}
.proofbar.onink .who{color:var(--muted-lt)}
.proofbar.onink a.rev{color:var(--gold-lt)}
.proofbar.onink a.rev:hover{color:var(--white)}

/* section heading with a link sitting on the same line, right aligned */
.sechead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.6rem;margin-bottom:1.5rem}
.sechead h2{margin-bottom:0}

/* ---- SPECIES INDEX + STACKED FIGURES ---- */
/* The font-size here is doing measurement work, not typography. The buttons set their
   own size, but ch resolves against this element, so matching the disclaimer's
   font-size is what makes 62ch land on the same measure as the disclaimer below. */
.jumpnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;
  font-size:var(--fs-small);max-width:62ch}
/* A second, labelled group under the animal buttons. The disease list is not an animal,
   so it gets its own heading and a line of its own rather than a button on the end of
   the row where it read as one more critter. Same 62ch measure as the row above. */
.jumpsub{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--line);max-width:62ch}
.jumpsub h3,.eyebrow{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:700;line-height:1.3}
.jumpsub h3{margin-bottom:.45rem}
.jumpsub p{font-size:var(--fs-small);color:var(--muted);margin:0;max-width:52ch}
.jumpsub .jumpnav{margin-top:.9rem}
/* Small label over a section title, when the title needs a category above it. */
.eyebrow{margin:0 0 .5rem}
.jumpnav a{text-decoration:none;font-size:var(--fs-small);font-weight:600;color:var(--hunter);
  background:var(--surface);border:1px solid var(--line);padding:.5rem .85rem;
  transition:background .12s,border-color .12s}
.jumpnav a:hover,.jumpnav a:focus-visible{background:var(--btn);color:var(--white);
  border-color:var(--hunter)}
/* the species sections run long, so the photo column stacks to keep pace with it */
.figstack{display:grid;gap:1.4rem;align-content:start}
/* a compact reference card, and what keeps the photo column from running short */
.fieldnotes{border:1px solid var(--line);padding:1.1rem 1.2rem;background:var(--surface)}
.tint .fieldnotes,.dark .fieldnotes{background:var(--surface)}
.fieldnotes h3{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.7rem;font-weight:700}
.fieldnotes ul{list-style:none;padding:0;margin:0}
.fieldnotes li{display:grid;gap:.05rem;padding:.5rem 0;border-top:1px solid var(--line);
  font-size:var(--fs-small)}
.fieldnotes li:first-child{border-top:0;padding-top:0}
@media(min-width:420px){.fieldnotes li{grid-template-columns:8.5rem 1fr;gap:.8rem;
  align-items:baseline}}
.fieldnotes .fk{font-weight:700;color:var(--hunter);font-size:.82rem}
.fieldnotes li>span:last-child{color:var(--muted)}

/* ---- FIGURE CYCLER ----
   A stack of photographs where only one or two show at a time. Each visible slot
   steps through the whole set and skips whatever the other slot is holding, so the
   pair never lands on the same picture. Without script every figure just shows,
   which is what the page did before. */
.cycler.ready{display:flex;flex-direction:column;gap:1.4rem}
.cycler.ready>figure{display:none;margin:0}
.cycler.ready>figure.on{display:block}
.cycler .shotwrap{position:relative;overflow:hidden}
.cycler .shotwrap img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cyc{position:absolute;top:0;height:100%;width:54px;border:0;background:none;padding:0;
  color:var(--white);font-size:2.6rem;line-height:1;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 4px rgba(8,28,21,.7));
  opacity:0;transition:opacity .18s ease}
.cyc.prev{left:0}
.cyc.next{right:0}
.cyc>span{display:block;transition:transform .38s cubic-bezier(.1,.9,.2,1)}
.cyc.prev.push>span{transform:translateX(-9px)}
.cyc.next.push>span{transform:translateX(9px)}
.cycler .shotwrap:hover .cyc,.cycler .shotwrap:focus-within .cyc{opacity:1}
.cyc:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}
/* no pointer to hover with, so leave them showing */
@media(hover:none){.cyc{opacity:1}}
@media(prefers-reduced-motion:reduce){.cyc,.cyc>span{transition:none}}

/* the two photographs in Birds and mice share a height so the headings line up */
#birds-mice .shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

/* three photographs on one row, stacking down as the column narrows */
.trio{display:grid;gap:1.6rem}
@media(min-width:640px){.trio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:940px){.trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trio figure{margin:0;min-width:0}
.trio img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}

/* a bordered aside for a legal or seasonal constraint, so it reads as a standing
   rule rather than as another paragraph of sales copy */
.notice{margin-top:1.9rem;border:1px solid var(--line);border-left:4px solid var(--gold);
  padding:1.3rem 1.4rem;background:var(--surface)}
.dark .notice,.tint .notice{background:var(--surface)}
.notice h3{font-size:var(--fs-h4);line-height:1.25;margin-bottom:.6rem;color:var(--hunter)}
.notice p{font-size:var(--fs-small);color:var(--muted);line-height:1.6;margin:0 0 .7rem}
.notice p:last-child{margin-bottom:0}

/* anchored sections must clear the sticky header when jumped to */
[id]{scroll-margin-top:5.5rem}

/* ---- REPAIR INVENTORY ---- */
.repairs{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line);
  margin-top:1.9rem}
@media(min-width:640px){.repairs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.repairs{grid-template-columns:repeat(3,1fr)}}
.rep{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.35rem 1.3rem}
.rep h3{font-size:var(--fs-h4);margin-bottom:.45rem;line-height:1.25}
.rep p{font-size:var(--fs-small);color:var(--muted);margin:0;line-height:1.55}
.rep strong{color:var(--text)}

/* ---- SERVICE GRID ---- */
.svcgrid{display:grid;gap:2rem 2.2rem;margin-top:2rem}
@media(min-width:700px){.svcgrid{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.6rem 2.8rem}}
.svc{min-width:0}
.svc figure{margin:0 0 .9rem}
.svc img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);display:block}
.svc h3{font-size:var(--fs-h4);line-height:1.25;margin-bottom:.5rem}
.svc p{font-size:var(--fs-small);color:var(--muted);line-height:1.6;margin:0 0 .6rem}
.svc p:last-child{margin-bottom:0}
.svcnote{margin-top:2.2rem;background:var(--paper);border-left:4px solid var(--hunter);
  padding:1.4rem 1.5rem}
.svcnote h3{font-size:var(--fs-h4);line-height:1.25;margin-bottom:.5rem}
.svcnote p{font-size:var(--fs-small);color:var(--muted);line-height:1.6;margin:0}

/* ---- CAPABILITY CLAIMS ---- */
.claims{display:grid;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);
  margin-top:2rem}
@media(min-width:700px){.claims{grid-template-columns:repeat(2,minmax(0,1fr))}}
.claim{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.5rem 1.4rem;min-width:0}
.claim h3{font-size:var(--fs-h4);line-height:1.25;margin-bottom:.5rem}
.claim p{font-size:var(--fs-small);color:var(--muted);line-height:1.6;margin:0}
.claimfig{margin:2rem 0 0}
.claimfig img{width:100%;aspect-ratio:3/2;max-height:26rem;object-fit:cover;border:1px solid var(--line);display:block}
.claimfig figcaption{font-size:var(--fs-small);color:var(--muted);margin-top:.6rem}

/* the privacy and terms pages run the full column, same as every other page */
.legalpage h1{margin-bottom:.3rem}
.legalpage h3{margin-top:1.9rem}
.legalpage h3:first-of-type{margin-top:0}
.legalpage p{max-width:none}

/* ---- TEXT FLOWING AROUND A PORTRAIT ----
   One column with the photograph set into it, so the copy runs beside the picture
   and then continues underneath rather than sitting in a separate column from it. */
.flowfig h2{margin-bottom:1rem;max-width:20em}
.flowfig p{max-width:none}
.portraitwrap{margin:.35rem 0 1.2rem 2.6rem;float:right;width:min(38%,26rem)}
.portraitwrap img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.portraitwrap figcaption{font-size:var(--fs-small);color:var(--muted);line-height:1.5;
  margin-top:.6rem}
/* the section has to close around the float or the next band rides up beside it */
.flowfig::after{content:"";display:block;clear:both}
/* on a narrow column a float leaves slivers of text, so it goes full width instead */
@media(max-width:700px){
  .portraitwrap{float:none;width:100%;margin:0 0 1.4rem}
}

/* ---- ABOUT PORTRAIT HEADER ---- */
.portrait{display:grid;gap:1.8rem;align-items:center}
@media(min-width:820px){.portrait{grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:3rem}}
.portrait img{width:100%;max-width:20rem;border:1px solid var(--line);display:block}
.portrait figcaption{font-size:var(--fs-small);color:var(--muted);margin-top:.7rem}

/* ---- TRIAGE ---- */
.triage{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(min-width:660px){.triage{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.triage{grid-template-columns:repeat(3,1fr)}}
.tri{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.5rem 1.4rem;text-decoration:none;color:inherit;display:block;transition:background .12s}
.tri:hover,.tri:focus-visible{background:var(--paper)}
.tri .cue{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:.6rem}
.tri h3{margin-bottom:.45rem}
.tri p{font-size:var(--fs-small);color:var(--muted);margin-bottom:.85rem}
.tri .ans{font-weight:700;font-size:var(--fs-small);color:var(--hunter);
  border-bottom:2px solid var(--gold);padding-bottom:2px}
.tri .ans::after{content:" \2192"}

/* ---- REVIEWS ---- */
/* One row of reviews to start, cut off by a gradient in the section's own color so
   it reads as more underneath. The collapsed height is measured from a real card by
   script, which keeps it honest at every breakpoint and after the shuffle. */
.reviewsbox{position:relative}
.reviews{display:grid;gap:1.1rem}
@media(min-width:700px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.reviews{grid-template-columns:repeat(3,1fr)}}
.reviewsbox.collapsible .reviews{overflow:hidden;max-height:var(--revh,17rem);
  transition:max-height .45s cubic-bezier(.1,.9,.2,1)}
.reviewsbox.open .reviews{max-height:var(--revfull,none)}
.revfade{position:absolute;left:0;right:0;bottom:0;height:8.5rem;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  background:linear-gradient(to bottom,rgba(var(--fade),0) 0%,rgba(var(--fade),.86) 55%,var(--paper) 100%)}
.reviewsbox.collapsible .revfade{opacity:1}
.reviewsbox.open .revfade{opacity:0}
/* a barely there chevron sitting in the fade. white on the warm paper is almost
   nothing, which is the point, and it lifts on hover and on keyboard focus */
.revmore{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:.35rem;
  z-index:2;border:0;background:none;padding:.9rem 1.6rem;cursor:pointer;
  color:var(--white);line-height:0}
.reviewsbox.collapsible .revmore{display:block}
.reviewsbox.open .revmore{display:none}
.revmore svg{display:block;width:30px;height:18px;opacity:.55;
  transition:opacity .2s ease,transform .3s cubic-bezier(.1,.9,.2,1)}
.revmore:hover svg{opacity:1;transform:translateY(3px)}
.revmore:focus-visible svg{opacity:1}
.revmore:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.revmore svg{transition:none}}
@media(prefers-reduced-motion:reduce){
  .reviewsbox.collapsible .reviews,.revfade{transition:none}
}
.review{margin:0;background:var(--surface);border:1px solid var(--line);padding:1.4rem 1.35rem;
  display:flex;flex-direction:column;justify-content:space-between}
.review p{font-size:var(--fs-small);line-height:1.6;color:var(--text);margin:0 0 1.1rem}
.review cite{font-style:normal;display:block;border-top:1px solid var(--line);padding-top:.8rem}
.review .rstars{display:block;color:var(--gold);font-size:.95rem;letter-spacing:.1em;
  margin-bottom:.3rem}
.review b{display:block;font-weight:700;color:var(--hunter);font-size:var(--fs-small)}
.review .when{display:block;color:var(--muted);font-size:.82rem;margin-top:.1rem}
.dark .review{background:var(--darkbg);border-color:var(--moss)}
.dark .review p{color:var(--white)}
.dark .review cite{border-color:var(--moss)}
.dark .review b{color:var(--gold-lt)}
.dark .review .when{color:var(--muted-lt)}

/* ---- FIGURES ---- */
figure{margin:0}
.shot img{width:100%;border:1px solid var(--line)}
.dark .shot img{border-color:var(--moss)}
.shot figcaption{font-size:var(--fs-cap);line-height:1.5;color:var(--muted);padding-top:.6rem}
.dark .shot figcaption{color:var(--muted-lt)}
.shot figcaption b{color:var(--hunter);font-weight:700}
.dark .shot figcaption b{color:var(--gold-lt)}
.feature{margin-bottom:1.2rem}
.grid2{display:grid;gap:1.2rem}
@media(min-width:700px){.grid2{grid-template-columns:repeat(2,1fr)}}
.grid3{display:grid;gap:1.2rem}
@media(min-width:700px){.grid3{grid-template-columns:repeat(3,1fr)}}
.split{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr;align-items:center}}

/* The contact photo carries the same weight as the block of contact details beside
   it, so this column runs wider than the default split and the figure sits flush
   with the top of the copy rather than floating in the middle of the row. */
@media(min-width:900px){
  .split.wide-fig{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:start}
}

/* ---- WORK STRIP ---- */
/* --shot is the measured height of a picture in the strip, set from script on load
   and on resize. The arrows use it so their hit box is exactly as tall as the photo
   with the chevron centered in it, whatever width the cards end up. */
.workwrap{position:relative;--shot:16rem}
.workstrip{display:flex;gap:1.6rem;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:0 0 .2rem;margin:0;scrollbar-width:none}
.workstrip::-webkit-scrollbar{display:none}
.workstrip:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.workcard{flex:0 0 84vw;scroll-snap-align:start;margin:0;min-width:0}
@media(min-width:700px){.workcard{flex:0 0 calc((100% - 1.6rem)/2)}}
.workcard button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  font:inherit;text-align:left;color:inherit}
.workcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);
  transition:border-color .15s}
.workcard button:hover img,.workcard button:focus-visible img{border-color:var(--hunter)}
.workcard button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.workcard figcaption{font-size:var(--fs-cap);line-height:1.5;color:var(--muted);padding-top:.6rem}
.workcard figcaption b{color:var(--hunter);font-weight:700}

/* arrows */
/* Bare chevrons, no box. Roughly twice the old glyph, and the press nudges the
   arrow the way the photos are about to travel. */
.wnav{position:absolute;top:0;height:var(--shot);z-index:3;
  width:52px;border:0;background:none;padding:0;
  color:var(--hunter);font-size:3rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .12s,opacity .12s}
.wnav>span{display:block;transition:transform .38s cubic-bezier(.1,.9,.2,1)}
.wnav:hover:not([disabled]){color:var(--moss)}
.wnav:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wnav[disabled]{opacity:.22;cursor:default}
.wnav.prev{left:-14px}
.wnav.next{right:-14px}
.wnav.prev.push>span{transform:translateX(-9px)}
.wnav.next.push>span{transform:translateX(9px)}

/* Wide enough that the arrows clear the pictures completely. They sit out in the
   gutter in hunter green, always visible. */
@media(min-width:1240px){
  .wnav.prev{left:-64px}
  .wnav.next{right:-64px}
}

/* Below that there is no gutter to put them in, so they have to sit on top of a
   photo. Over a picture they go white with a shadow so they read against anything,
   and they stay out of the way until you point at the strip. */
@media(max-width:1239.98px) and (hover:hover){
  .wnav{color:var(--white);opacity:0;filter:drop-shadow(0 1px 4px rgba(8,28,21,.65))}
  .wnav:hover:not([disabled]){color:var(--white)}
  .wnav[disabled]{opacity:0}
  .workwrap:hover .wnav,.workwrap:focus-within .wnav{opacity:1}
  .workwrap:hover .wnav[disabled],.workwrap:focus-within .wnav[disabled]{opacity:.3}
}

/* Touch screens have no pointer to hover with, so the same white arrows just stay. */
@media(max-width:1239.98px) and (hover:none){
  .wnav{color:var(--white);filter:drop-shadow(0 1px 4px rgba(8,28,21,.65))}
  .wnav:hover:not([disabled]){color:var(--white)}
}
@media(prefers-reduced-motion:reduce){.wnav>span{transition:none}}

/* the strip itself lands on the same curve as the arrow nudge */
.workstrip{scroll-behavior:auto}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,28,21,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(760px,100%);text-align:left}
.lightbox img{width:100%;height:auto;max-height:74vh;object-fit:contain;
  border:1px solid var(--moss)}
.lightbox figcaption{color:var(--muted-lt);font-size:var(--fs-cap);line-height:1.55;
  padding-top:.8rem;max-width:60ch}
.lightbox figcaption b{color:var(--gold-lt);font-weight:700}
.lightbox .count{display:block;color:var(--gold);font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;margin-top:.5rem}
.lb-btn{position:absolute;border:1px solid var(--moss);background:rgba(8,28,21,.7);
  color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s}
.lb-btn:hover{background:var(--btn)}
.lb-close{top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);
  width:48px;height:48px;font-size:1.5rem;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:1.6rem}
.lb-prev{left:clamp(.4rem,2vw,1.6rem)}
.lb-next{right:clamp(.4rem,2vw,1.6rem)}
@media(prefers-reduced-motion:reduce){.workstrip{scroll-behavior:auto}}

/* ---- METHOD ---- */
.steps{border-top:3px solid var(--gold);margin-top:.5rem}
.step{border-bottom:1px solid var(--line);padding:2rem 0;display:grid;gap:1.2rem}
@media(min-width:900px){.step{grid-template-columns:3.5rem 1fr 20rem;gap:2.2rem;align-items:start}}
.step .no{font-size:2rem;font-weight:900;color:var(--gold);line-height:.9}
/* the step media is square; this holds the frame square regardless, video included */
.step .shot img,.step .shot video{aspect-ratio:1/1;object-fit:cover}
/* height:auto is load bearing. Without it the height attribute on the video element
   beats the aspect-ratio rule above and the clip renders at double height. */
.shot video{width:100%;height:auto;display:block;border:1px solid var(--line);background:var(--ink)}
.dark .shot video{border-color:var(--moss)}
.step h3{margin-bottom:.55rem}
.step p{color:var(--muted);margin-bottom:.8rem}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;font-weight:700;
  font-size:var(--fs-h4);color:var(--hunter);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:1rem;font-size:1.5rem;
  font-weight:400;color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 1.35rem;color:var(--muted);max-width:46em}
.dark .faq,.dark .faq details{border-color:var(--moss)}
.dark .faq summary{color:var(--white)}
.dark .faq .a{color:var(--muted-lt)}
.faq .a p:last-child{margin-bottom:0}

/* a figure between question groups. centered and height capped, so four photographs of
   very different shapes still land within about eighty pixels of each other */
/* A square photo tucked into the opening answer of a section, set to the right so
   the text runs beside it. On a narrow column it gives up the float and sits on top
   of the answer at full width. */
.faqsq{margin:0 0 1rem;float:right;width:min(48%,17rem);margin-left:1.6rem}
.faqsq img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--line)}
.faqsq figcaption{font-size:var(--fs-small);color:var(--muted);line-height:1.5;
  margin-top:.55rem}
@media(max-width:620px){
  .faqsq{float:none;width:100%;margin:0 0 1.2rem}
}
/* the answer has to close around a floated child or the next toggle rides up into it */
.faq .a::after{content:"";display:block;clear:both}

/* the repair sequence keeps its full width above the toggles, since squaring a
   triptych would throw away two of the three photographs */
.faqwide{margin:0 0 1.6rem}
.faqwide img{display:block;width:100%;height:auto}
.faqwide figcaption{font-size:var(--fs-small);color:var(--muted);line-height:1.5;
  margin-top:.6rem}

/* ---- LISTS ---- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:1rem 0 0;list-style:none}
.chips li{border:1px solid var(--line);padding:.42rem .8rem;font-size:var(--fs-small);
  font-weight:600;color:var(--hunter)}
/* no bullet, so every name starts flush with the heading and lede above it, and a
   held measure so the block reads as a column of text rather than a spread */
/* A real grid rather than CSS columns. With columns, one entry that wraps to two
   lines pushes its whole column down and the three stop lining up. In a grid the
   row grows instead, so the columns stay level whatever the text does. */
.cols{display:grid;grid-auto-flow:column;grid-template-rows:repeat(11,auto);
  grid-auto-columns:minmax(0,1fr);column-gap:2.6rem;
  padding:0;margin:1.4rem 0 0;list-style:none;max-width:42rem;
  border-top:1px solid var(--line)}
@media(min-width:800px){.cols{grid-template-rows:repeat(7,auto)}}
.cols li{padding:.42rem 0;font-size:var(--fs-small);color:var(--text);
  border-bottom:1px solid var(--line);font-weight:400;
  transition:font-weight .12s,color .12s}
.cols li:hover{font-weight:700;color:var(--hunter)}

/* ---- FORM ---- */
.formwrap{max-width:44rem}
.stagebar{display:flex;gap:.5rem;margin-bottom:1.8rem;padding:0;list-style:none}
.stagebar li{flex:1;border-top:3px solid var(--line);padding-top:.6rem;color:var(--muted);
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.stagebar li[aria-current="step"]{border-color:var(--hunter);color:var(--hunter)}
.stagebar li.done{border-color:var(--gold);color:var(--muted)}
fieldset{border:0;margin:0;padding:0}
legend{font-size:var(--fs-h3);font-weight:800;color:var(--hunter);margin-bottom:1.2rem;padding:0}
.tiles{display:grid;gap:.65rem;margin-bottom:1.5rem}
@media(min-width:600px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.tiles.three{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative}
.tile input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tile span{display:flex;flex-direction:column;justify-content:center;min-height:62px;
  border:1px solid var(--line);background:var(--surface);padding:.95rem 1.05rem;
  font-weight:600;line-height:1.3;transition:border-color .12s,background .12s}
.tile small{font-weight:400;color:var(--muted);font-size:.82rem;margin-top:.2rem}
.tile input:checked + span{border-color:var(--hunter);background:var(--paper)}
.tile input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:600;margin-bottom:.35rem;font-size:var(--fs-small)}
.field input{width:100%;background:var(--surface);border:1px solid var(--line);
  color:var(--text);font:inherit;padding:.9rem 1rem;min-height:54px}
.field input:focus{border-color:var(--hunter);outline:none}
.formnav{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.4rem;
  padding-top:1.3rem;border-top:1px solid var(--line)}
.btn-sm{min-height:50px;font-size:1rem;padding:0 1.3rem}
.btn-back{background:none;border:0;color:var(--muted);font:inherit;font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:.5rem}
.formnote{color:var(--muted);font-size:.85rem;margin-left:auto}
.done-msg{border:1px solid var(--hunter);background:var(--paper);padding:1.6rem;display:none}
/* dark context, used on the contact page */
.dark .stagebar li{border-top-color:var(--moss);color:var(--muted-lt)}
.dark .stagebar li[aria-current="step"]{border-color:var(--white);color:var(--white)}
.dark .stagebar li.done{border-color:var(--gold);color:var(--muted-lt)}
.dark legend{color:var(--white)}
.dark .tile span{border-color:var(--moss);background:var(--darkbg)}
.dark .tile small{color:var(--muted-lt)}
.dark .tile input:checked + span{border-color:var(--gold);background:#26593F}
.dark .tile input:focus-visible + span{outline-color:var(--white)}
.dark .field input{background:var(--darkbg);border-color:var(--moss);color:var(--white)}
.dark .field input:focus{border-color:var(--gold)}
.dark .formnav{border-top-color:var(--moss)}
.dark .btn-back,.dark .formnote{color:var(--muted-lt)}
.dark .done-msg{border-color:var(--gold);background:var(--darkbg)}

/* ---- FOOTER ---- */
.site-foot{background:var(--ink);color:var(--muted-lt);border-top:4px solid var(--gold)}
.site-foot .wrap:not(.legal){padding-top:3rem;padding-bottom:2.4rem}

/* the mark and the company name read as one lockup, mirroring the header, and it
   sits on its own row so both columns below start at the same line */
.foot-brand{display:flex;align-items:center;gap:.9rem;margin-bottom:2.1rem}
.site-foot .foot-brand img.mark{width:50px;height:50px;flex:none;margin:0}
.fb-name{margin:0}
.fb-name b{display:block;font-size:1.22rem;font-weight:900;letter-spacing:-.035em;
  color:var(--white);line-height:1.05;white-space:nowrap}
.fb-name span{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-lt);font-weight:600;margin-top:.2rem}

.foot-cols{display:grid;gap:2rem}
@media(min-width:820px){.foot-cols{grid-template-columns:minmax(0,30rem) auto;
  justify-content:start;gap:5rem;align-items:baseline}}
.foot-lic{margin-top:.9rem;color:var(--muted-lt)}
.site-foot h4{color:var(--white);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:.85rem;font-weight:700}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.45rem;font-size:var(--fs-small)}
.site-foot a{text-decoration:none;border-bottom:1px solid var(--moss)}
.site-foot a:hover{color:var(--white);border-color:var(--gold)}
.site-foot .nap{color:var(--white);line-height:1.7}
.site-foot .tel{display:inline-block;margin-top:.3rem;font-weight:900;font-size:1.28rem;
  color:var(--gold);text-decoration:none;border:0;letter-spacing:-0.02em}
.legal{position:relative;padding:1.3rem var(--pad);font-size:.82rem;color:var(--muted-lt);
  display:flex;align-items:center;flex-wrap:wrap;gap:.35rem}
.legal a{color:var(--muted-lt);text-decoration:none;border-bottom:1px solid var(--moss);margin-left:.4rem}
.legal a:hover{color:var(--white);border-color:var(--gold)}
.legal::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
  border-top:1px solid var(--moss)}

/* ---- STICKY CALL BAR ---- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);
  border-top:3px solid var(--gold);display:flex;min-height:66px;
  box-shadow:0 -6px 22px rgba(8,28,21,.4)}
.callbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;color:var(--white);font-weight:900;font-size:1.14rem;
  letter-spacing:-0.02em;padding:.4rem}
.callbar small{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-lt)}
.callbar .alt{flex:0 0 32%;border-left:1px solid var(--moss);font-size:1rem}
@media(min-width:1000px){.callbar{display:none}body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---- FORM SPAM + FAILURE ---- */
/* The honeypot has to be reachable to a bot and invisible to a person. Not
   display:none, which the better bots check for. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  opacity:0;pointer-events:none}
.sendfail{background:#B03A2E;color:#fff;padding:.9rem 1.1rem;margin:0 0 1.2rem;
  font-size:var(--fs-small);font-weight:600}
.sendfail a{color:#fff}

/* Centered closing block. The body copy keeps a fixed reading measure at any
   viewport width, so it gains rows instead of stretching its lines. */
.ctacenter{text-align:center}
.ctacenter h2{margin-bottom:.6rem}
.ctacenter .lede{max-width:34ch;margin:0 auto 1.4rem}

/* The button under the work strip. On a narrow screen the reviews below drop to a
   single card and the two calls to action end up stacked on top of each other, so
   at that same breakpoint this one moves up above the photos instead. */
.workcta{margin-top:1.4rem}
@media(max-width:699.98px){
  .workintro{display:flex;flex-direction:column}
  .workintro>h2{order:1}
  .workintro>.lede{order:2}
  .workintro>.workcta{order:3;margin:0 0 1.4rem}
  .workintro>.workwrap{order:4}
}

/* The health disclaimer. Sits under the jump buttons so it is read before any of
   the rabies and roundworm copy, and again at the foot of that section. */
.pagenote{font-size:var(--fs-small);line-height:1.6;color:var(--muted);
  max-width:62ch;margin-top:1.3rem}
.pagenote a{color:var(--hunter);text-underline-offset:2px}

/* Disease cards. Same labeled-row anatomy as the field notes card, but the heading is
   the disease name rather than a section label, and the grid goes to three across on a
   wide screen so fifteen entries stay scannable instead of becoming a wall. */
.dgrid{display:grid;gap:1rem;margin-top:1.1rem}
@media(min-width:700px){.dgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.dgrid{grid-template-columns:repeat(3,1fr)}}
.dcard{border:1px solid var(--line);padding:1.1rem 1.2rem;background:var(--surface)}
.dcard h4{font-size:1rem;color:var(--hunter);font-weight:800;margin-bottom:.7rem;line-height:1.2}
.dcard ul{list-style:none;padding:0;margin:0}
.dcard li{display:grid;gap:.05rem;padding:.5rem 0;border-top:1px solid var(--line);
  font-size:var(--fs-small);line-height:1.5}
.dcard li:first-child{border-top:0;padding-top:0}
@media(min-width:420px){.dcard li{grid-template-columns:6.4rem 1fr;gap:.7rem;align-items:baseline}}
.dcard .fk{font-weight:700;color:var(--hunter);font-size:.82rem}
.dcard li>span:last-child{color:var(--muted)}
.dcard p.small{margin:0}

/* Four cards in a three across grid leaves an orphan on the second row. Any grid with
   exactly four entries caps at two columns so it reads as a square block instead. */
.dgrid.two{grid-template-columns:1fr}
@media(min-width:700px){.dgrid.two{grid-template-columns:repeat(2,1fr)}}

/* ---- DARK MODE ----
   Driven by data-theme on <html>, not by the .dark class, because .dark already means
   "this section has a dark background" and is used on both themes. The dark sections
   stay dark in both; what flips is the light half of the site.

   --hunter goes light because it is overwhelmingly a text colour. Every place it was a
   background is now --btn, which stays dark so white button text keeps its contrast. */
:root[data-theme="dark"]{
  color-scheme:dark;
  /* The ladder matters more than the individual values. Light mode reads, brightest to
     darkest: body, tint, .dark sections, hero and footer. Dark mode keeps that exact
     order rather than inverting it, so a section that was an emphasis band still reads
     as one instead of becoming the brightest thing on the page. */
  --surface:#143023;      /* body and raised panels, lightest */
  --paper:#0E241A;        /* tint sections */
  --darkbg:#0A1C14;       /* .dark emphasis sections */
  --ink:#061410;          /* hero and footer, deepest */
  --fade:14,36,26;        /* must track --paper or the reviews gradient goes cream */
  --text:#E9F0EA;
  --muted:#A6BBAD;
  --line:#25422F;
  --hunter:#74C69D;
  --head:#FFFFFF;         /* section titles go white, card titles stay --hunter */
  --moss:#3E8E68;
  --tk-dk:#EE9280;
}
/* Buttons: --btn stays dark, so these only need their borders and inverted cases fixed. */
:root[data-theme="dark"] .btn-outline{border-color:var(--moss)}
/* Only the inverted case needs fixing: inside a .dark section .btn-primary is a white
   button, and --hunter has gone light, so its label would be light on white. Everywhere
   else the button sits on --btn, which stays dark, and white text is already right. */
:root[data-theme="dark"] .dark .btn-primary{color:var(--btn)}
:root[data-theme="dark"] .jumpnav a:hover,
:root[data-theme="dark"] .jumpnav a:focus-visible{color:var(--white)}
/* The header drops to the tint tone so it stops being the brightest band on the page.
   That is the same value the Google reviews bar uses, so on the home page the two read
   as one deep field with the gold rule between them, and the sticky bar stays distinct
   from the body surface as it floats over it. */
:root[data-theme="dark"] .site-head,
:root[data-theme="dark"] .navtoggle{background:var(--paper)}
/* Wordmark goes white. It was riding --hunter, which is a text green in dark mode, and
   the logo is the one place on the page that should not look like a link. */
:root[data-theme="dark"] .brand b{color:var(--white)}
:root[data-theme="dark"] .brand span{color:var(--muted-lt)}
/* The logo mark is a dark drawing, so the header swaps to the light one. */
.brand img.lm{display:none}
:root[data-theme="dark"] .brand img.dm{display:none}
:root[data-theme="dark"] .brand img.lm{display:block}

/* The theme switch. A track with a knob that slides, no label by request, so the
   accessible name lives on aria-label. margin-left:auto pushes it to the far end of the
   legal line regardless of how wide the copyright text wraps. */
.themetoggle{appearance:none;border:0;padding:0;cursor:pointer;flex:none;
  margin-left:auto;position:relative;
  width:46px;height:26px;border-radius:13px;
  background:rgba(214,224,216,.22);
  transition:background .18s ease}
.themetoggle::after{content:"";position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;background:var(--muted-lt);
  transition:transform .18s ease,background .18s ease}
.themetoggle:hover{background:rgba(214,224,216,.34)}
.themetoggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
:root[data-theme="dark"] .themetoggle{background:var(--gold)}
:root[data-theme="dark"] .themetoggle:hover{background:var(--gold-lt)}
:root[data-theme="dark"] .themetoggle::after{transform:translateX(20px);background:var(--white)}
@media(prefers-reduced-motion:reduce){
  .themetoggle,.themetoggle::after{transition:none}
}