/* ═══════════════════════════════════════════════════════════════════════════
   DNR Pest Control — "The inspection report"

   The visual language is taken from the trade's own paperwork: site plans,
   treatment perimeters, inspection checklists and service certificates. That
   means the page is built from RULES AND MARGINS rather than from floating
   cards — a border here means "this is a bounded area", a divider means "a
   new part of the report", and most content sits directly on the paper with
   nothing around it at all.

   Three decisions follow from that and are worth stating, because they are
   what keep it from drifting back to a generic card grid:

     1. Hi-vis (#F5B421) appears ONLY on primary action buttons. If it shows
        up anywhere else it stops meaning "press this".
     2. Section rhythm alternates deliberately — paper, ruled, dark band,
        paper — so no two adjacent sections share a shape.
     3. Radius is hierarchy: 6px on things you type in or press, 14px on
        large panels, 0 on rules and bands. Never one radius everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* The six brand colours, and nothing else. */
  --ink:       #101A16;   /* headings, body                    15.2:1 on paper */
  --pine:      #0E5540;   /* brand, links, active states        8.1:1 on paper */
  --pine-deep: #093425;   /* footer, dark bands                              */
  --paper:     #F5F6F2;   /* page background                                 */
  --stone:     #E1E5DD;   /* borders, dividers, quiet surfaces               */
  --hi-vis:    #F5B421;   /* PRIMARY ACTION BUTTONS ONLY       10.0:1 vs ink */

  /* Derived from the six above — opacities and tints, not new hues. */
  --ink-muted:  rgba(16, 26, 22, .66);   /* 5.5:1 on paper  */
  --ink-faint:  rgba(16, 26, 22, .40);   /* decorative only */
  --pine-wash:  rgba(14, 85, 64, .06);
  --pine-line:  rgba(14, 85, 64, .22);
  --surface:    #FFFFFF;
  --stone-soft: #EDEFE9;
  --on-dark:          #F5F6F2;
  --on-dark-muted:    rgba(245, 246, 242, .70);
  --on-dark-line:     rgba(245, 246, 242, .16);

  /* Error state. Deliberately not the brand palette — an error that looks
     like the brand does not read as an error. Kept desaturated so it never
     becomes the "danger red" the brief rules out. */
  --alert:      #8C2F1E;
  --alert-soft: #F7E9E5;

  /* Focus ring: not pine, or it vanishes into a pine button. */
  --focus: #1F6FEB;

  /* 8px rhythm */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  /* Radius is hierarchy, not decoration. */
  --r-control: 6px;   /* inputs, buttons  */
  --r-panel:  14px;   /* large panels     */

  --font-head: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --gutter: 20px;
  --header-h: 62px;

  color-scheme: light;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────
   Same six colours, re-assigned. Ink becomes the page, paper becomes the
   text, and pine is lifted to a tint of itself so links still clear AA
   against a dark ground (5.9:1). Hi-vis is unchanged — it is already a
   light colour carrying dark text, so it works on either ground. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #F0F2EC;
    --pine:      #3FA383;
    --pine-deep: #071E16;
    --paper:     #0B120F;
    --stone:     #24302B;

    --ink-muted:  rgba(240, 242, 236, .68);
    --ink-faint:  rgba(240, 242, 236, .34);
    --pine-wash:  rgba(63, 163, 131, .09);
    --pine-line:  rgba(63, 163, 131, .30);
    --surface:    #121A16;
    --stone-soft: #16201B;

    --alert:      #F0A18C;
    --alert-soft: #2A1712;

    --focus: #7FB4FF;

    color-scheme: dark;
  }
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Anchor targets clear the sticky header instead of hiding behind it. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s5)); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7.5vw, 4.5rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; }
h4 { font-size: 1rem;   font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 var(--s4); }
/* Body text is capped at a readable measure wherever it stands alone. */
p, li { max-width: 68ch; }

a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.2em; }
li { margin-bottom: var(--s2); }
strong { font-weight: 600; color: var(--ink); }

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

.skip-link {
  position: absolute; left: var(--s4); top: -120px; z-index: 200;
  background: var(--pine); color: #fff; padding: var(--s3) var(--s5);
  font-weight: 600; text-decoration: none; border-radius: 0 0 var(--r-control) var(--r-control);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0);
  clip-path: inset(50%); border: 0;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

/* A real 12-column grid, used where the layout actually needs one. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
}
@media (min-width: 720px)  { .grid12 { grid-template-columns: repeat(8, 1fr); gap: var(--s5) var(--s6); } }
@media (min-width: 1000px) { .grid12 { grid-template-columns: repeat(12, 1fr); } }

section { padding-block: var(--s8); }
@media (min-width: 900px) { section { padding-block: var(--s9); } }

/* Section rhythm — alternated by hand in the markup, never all the same. */
.band-paper { background: var(--paper); }
.band-ruled { background: var(--paper); border-block: 1px solid var(--stone); }
.band-soft  { background: var(--stone-soft); }
.band-dark  { background: var(--pine-deep); color: var(--on-dark); }
.band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark p  { color: var(--on-dark-muted); }
.band-dark a  { color: var(--on-dark); }

/* Section heading: no all-caps eyebrow, no coloured word. A hairline and a
   number, like a numbered part of a report. */
.sec-head { margin-bottom: var(--s7); }
.sec-head h2 { margin-bottom: var(--s3); }
.sec-head p { color: var(--ink-muted); font-size: 1.05rem; margin: 0; }

.sec-index {
  display: block;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-muted);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--stone);
}
.band-dark .sec-index { color: var(--on-dark-muted); border-bottom-color: var(--on-dark-line); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* The one hi-vis element on any given view. Ink text, never white — white on
   hi-vis is 1.8:1 and fails outright. */
.btn-primary {
  background: var(--hi-vis);
  color: #101A16;
  font-weight: 600;
  border-color: #D99C12;
}
.btn-primary:hover { background: #E9A916; }

.btn-secondary {
  background: transparent;
  color: var(--pine);
  border-color: var(--pine-line);
}
.btn-secondary:hover { background: var(--pine-wash); border-color: var(--pine); }

.btn-solid { background: var(--pine); color: #fff; }
.btn-solid:hover { background: #0B4433; color: #fff; }

.band-dark .btn-secondary { color: var(--on-dark); border-color: var(--on-dark-line); }
.band-dark .btn-secondary:hover { background: rgba(245,246,242,.08); border-color: var(--on-dark); }

.btn-lg { min-height: 54px; padding-inline: var(--s6); font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Announcement bar ─────────────────────────────────────────────────────── */
.announce {
  background: var(--pine-deep);
  color: var(--on-dark);
  font-size: .9rem;
}
.announce[hidden] { display: none; }
.announce .wrap {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 38px; padding-block: 6px;
}
.announce a { color: var(--on-dark); text-decoration: none; flex: 1; font-weight: 500; }
.announce a:hover { text-decoration: underline; }
.announce-close {
  flex-shrink: 0; width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-control);
  color: var(--on-dark-muted); cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.announce-close:hover { background: rgba(245,246,242,.12); color: var(--on-dark); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--stone);
}
.header .wrap {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
  color: var(--ink); line-height: 1.1;
}
.brand-cert { display: block; font-size: .72rem; color: var(--ink-muted); font-weight: 400; letter-spacing: 0; }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: var(--s2) var(--s3);
  color: var(--ink); font-size: .95rem; font-weight: 400; text-decoration: none;
  border-radius: var(--r-control);
}
.nav a:hover { background: var(--pine-wash); color: var(--pine); }

.header-end { display: flex; align-items: center; gap: var(--s3); }
.header-tel {
  display: none; align-items: center; gap: var(--s2);
  color: var(--ink); font-weight: 500; font-size: .95rem; text-decoration: none;
}
.header-tel:hover { color: var(--pine); }
.header-tel svg { width: 16px; height: 16px; color: var(--pine); }

.burger {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: 1px solid var(--stone); border-radius: var(--r-control);
  color: var(--ink); cursor: pointer;
}
.burger svg { width: 20px; height: 20px; }
.burger .i-close { display: none; }
.burger[aria-expanded="true"] .i-open { display: none; }
.burger[aria-expanded="true"] .i-close { display: block; }

@media (min-width: 1060px) {
  :root { --header-h: 72px; }
  .nav { display: block; }
  .header-tel { display: inline-flex; }
  .burger { display: none; }
}

.mobile-nav {
  display: none;
  position: fixed; inset: var(--header-h) 0 0; z-index: 45;
  background: var(--paper); padding: var(--s5) var(--gutter);
  overflow-y: auto; border-top: 1px solid var(--stone);
}
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--stone); }
.mobile-nav a {
  display: block; padding: var(--s4) 0; min-height: 52px;
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: -.015em;
}
.mobile-nav-actions { display: grid; gap: var(--s3); }
body.nav-open { overflow: hidden; }
@media (min-width: 1060px) { .mobile-nav, .mobile-nav.open { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { padding-block: var(--s7) var(--s8); }
@media (min-width: 900px) { .hero { padding-block: var(--s8) var(--s9); } }

.hero-grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s8); }
}

.hero h1 { margin-bottom: var(--s4); }
.hero-sub {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
  margin-bottom: var(--s6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }

/* Trust line: a single ruled row, not four boxes. */
.trustline {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  list-style: none; margin: 0; padding-top: var(--s5);
  border-top: 1px solid var(--stone);
  font-size: .92rem; color: var(--ink-muted);
}
.trustline li { display: flex; align-items: center; gap: var(--s2); margin: 0; max-width: none; }
.trustline svg { width: 15px; height: 15px; color: var(--pine); flex-shrink: 0; }

/* ── Floor plan ───────────────────────────────────────────────────────────── */
.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--stone);
  border-radius: var(--r-panel);
  padding: var(--s5);
}
.plan-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--stone);
}
.plan-head h2 {
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0; color: var(--ink);
}
.plan-head span { font-size: .8rem; color: var(--ink-muted); font-family: var(--font-head); }
.plan svg { width: 100%; height: auto; }

.plan-room     { fill: var(--pine-wash); stroke: var(--stone); stroke-width: 1.5; }
.plan-wall     { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.plan-divider  { stroke: var(--stone); stroke-width: 1.5; }
.plan-label    { font-family: var(--font-body); font-size: 9px; fill: var(--ink-muted); }
.plan-pointnum { font-family: var(--font-head); font-size: 8.5px; font-weight: 700; fill: #101A16; }
.plan-pointlbl { font-family: var(--font-body); font-size: 8.5px; fill: var(--ink); }
.plan-leader   { stroke: var(--ink-faint); stroke-width: 1; }
.plan-dot      { fill: var(--hi-vis); stroke: #101A16; stroke-width: 1.2; }

/* The treatment perimeter draws itself once, then stops. This is the only
   entrance animation on the page — everything else is static on arrival. */
.plan-perimeter {
  fill: none;
  stroke: var(--pine);
  stroke-width: 2.5;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
}
.plan-annotation { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .plan-perimeter {
    stroke-dashoffset: 0;
    /* Set from JS to the measured path length, so the dash pattern marches
       exactly once round the outline instead of guessing. */
    animation: perimeter-draw 2.4s cubic-bezier(.45, .05, .25, 1) forwards;
  }
  .plan-annotation { animation: annotation-in .45s ease forwards; }
  .plan-annotation:nth-of-type(1) { animation-delay: 1.5s; }
  .plan-annotation:nth-of-type(2) { animation-delay: 1.68s; }
  .plan-annotation:nth-of-type(3) { animation-delay: 1.86s; }
  .plan-annotation:nth-of-type(4) { animation-delay: 2.04s; }
  .plan-annotation:nth-of-type(5) { animation-delay: 2.22s; }

  @keyframes perimeter-draw {
    from { stroke-dashoffset: var(--perimeter-length, 1400); }
    to   { stroke-dashoffset: 0; }
  }
  @keyframes annotation-in {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
  }
}
/* Reduced motion, or no JS: everything is simply already drawn. */
@media (prefers-reduced-motion: reduce) {
  .plan-annotation { opacity: 1; }
}
.plan-annotation { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .plan-annotation { opacity: 0; }
}

.plan-key {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin: var(--s4) 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--stone);
  list-style: none; font-size: .82rem; color: var(--ink-muted);
}
.plan-key li { display: flex; align-items: center; gap: var(--s2); margin: 0; max-width: none; }
.plan-key i {
  width: 18px; height: 0; border-top: 2.5px dashed var(--pine);
  flex-shrink: 0; font-style: normal;
}
.plan-key b {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--hi-vis); border: 1.2px solid var(--ink);
  flex-shrink: 0;
}

/* ── Client marquee ───────────────────────────────────────────────────────── */
.clients { padding-block: var(--s7); }
.clients h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: var(--s6); }

.marquee { position: relative; overflow: hidden; }
.marquee::before, .marquee::after {
  content: ''; position: absolute; inset-block: 0; width: 80px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--paper), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }

.marquee-track { display: flex; width: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; align-items: center; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Wordmarks, not logo images: a grayscale row of names reads as a client
   list rather than a badge wall, and costs no image requests. */
.client-word {
  font-family: var(--font-head);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink-faint);
  padding-inline: var(--s5);
  white-space: nowrap;
  transition: color .3s ease;
}
.marquee:hover .client-word { color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ── Pest selector ────────────────────────────────────────────────────────── */
.pest-tabs {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: 0; padding: 0; list-style: none;
}
.pest-tab {
  min-height: 46px;
  padding: var(--s3) var(--s5);
  background: transparent;
  border: 1px solid var(--stone);
  border-radius: var(--r-control);
  font-family: var(--font-body);
  font-size: .97rem; font-weight: 500; color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pest-tab:hover { border-color: var(--pine-line); background: var(--pine-wash); }
.pest-tab[aria-selected="true"] {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff;
  font-weight: 600;
}

/* The panel reads like a page from the report: a rule under the title, then
   labelled rows. No card, no shadow. */
.pest-panel {
  margin-top: var(--s6);
  border-top: 2px solid var(--ink);
  padding-top: var(--s5);
}
.pest-panel[hidden] { display: none; }
.pest-panel h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; margin-bottom: var(--s5); }

.pest-rows { display: grid; gap: 0; margin-bottom: var(--s6); }
@media (min-width: 860px) { .pest-rows { grid-template-columns: 1fr 1fr; column-gap: var(--s8); } }

.pest-row {
  display: grid;
  grid-template-columns: minmax(96px, 22%) 1fr;
  gap: var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--stone);
  align-items: start;
}
.pest-row dt {
  font-family: var(--font-head);
  font-size: .82rem; font-weight: 600; color: var(--ink-muted);
  letter-spacing: 0; padding-top: 2px;
}
.pest-row dd { margin: 0; font-size: .98rem; }
.pest-row dd ul { margin: 0; padding-left: 1.1em; }
.pest-row dd li { margin-bottom: var(--s1); }

.pest-safety {
  display: flex; gap: var(--s3);
  padding: var(--s4);
  background: var(--pine-wash);
  border-left: 3px solid var(--pine);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  font-size: .95rem;
  margin-bottom: var(--s5);
}
.pest-safety svg { width: 19px; height: 19px; color: var(--pine); flex-shrink: 0; margin-top: 2px; }
.pest-safety p { margin: 0; }

/* ── How it works — a real timeline ───────────────────────────────────────── */
.steps { position: relative; list-style: none; margin: 0; padding: 0; }

/* Mobile: vertical, the line runs down the left. */
.steps::before {
  content: '';
  position: absolute;
  left: 17px; top: 18px; bottom: 18px;
  width: 2px;
  background: var(--stone);
}
.step { position: relative; padding-left: 56px; padding-bottom: var(--s6); margin: 0; max-width: none; }
.step:last-child { padding-bottom: 0; }
.step-num {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 2px solid var(--pine);
  border-radius: 50%;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--pine);
}
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--ink-muted); font-size: .97rem; margin: 0; }

/* Desktop: horizontal, the line runs through the numbers. */
@media (min-width: 900px) {
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
  .steps::before {
    left: 18px; right: 18px; top: 17px; bottom: auto;
    width: auto; height: 2px;
  }
  .step { padding-left: 0; padding-top: 56px; padding-bottom: 0; }
  .step-num { top: 0; left: 0; }
}

/* ── Safety checklist ─────────────────────────────────────────────────────── */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.check-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--s4);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--stone);
  margin: 0; max-width: none;
}
.check-item:first-child { border-top: 1px solid var(--stone); }
.check-box {
  width: 22px; height: 22px; margin-top: 2px;
  border: 2px solid var(--pine);
  border-radius: 3px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.check-box svg { width: 14px; height: 14px; color: var(--pine); }
.check-item h3 { margin-bottom: var(--s1); }
.check-item p { margin: 0; color: var(--ink-muted); font-size: .97rem; }

/* ── Numbers ──────────────────────────────────────────────────────────────── */
/* Set inline with the sentence, not as four identical tiles. */
.numbers { font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.7; max-width: 24ch; }
.numbers p { max-width: none; margin-bottom: var(--s5); }
.num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  letter-spacing: -.04em;
  line-height: .9;
  color: var(--on-dark);
  display: inline-block;
  margin-right: var(--s2);
  vertical-align: -.06em;
}

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.rating {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  padding-bottom: var(--s5); margin-bottom: var(--s6);
  border-bottom: 1px solid var(--stone);
}
.rating-num { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stars { color: var(--hi-vis); font-size: 1.05rem; letter-spacing: 2px; }
.rating small { color: var(--ink-muted); font-size: .9rem; }

.reviews { display: grid; gap: var(--s6); }
@media (min-width: 800px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.review { margin: 0; }
.review blockquote { margin: 0 0 var(--s4); font-size: 1.02rem; line-height: 1.55; }
.review figcaption { font-size: .9rem; color: var(--ink-muted); }
.review figcaption b { display: block; color: var(--ink); font-weight: 600; }

.placeholder {
  padding: var(--s5);
  border: 1px dashed var(--stone);
  border-radius: var(--r-control);
  color: var(--ink-muted);
  font-size: .9rem;
}
.placeholder b { display: block; color: var(--ink); font-weight: 600; margin-bottom: var(--s1); }

/* ── Commercial band ──────────────────────────────────────────────────────── */
.commercial-grid { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .commercial-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); } }

.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  display: grid; grid-template-columns: 1fr; gap: var(--s1);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--on-dark-line);
  margin: 0; max-width: none;
}
.spec-list li:first-child { border-top: 1px solid var(--on-dark-line); }
.spec-list b { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--on-dark); }
.spec-list span { color: var(--on-dark-muted); font-size: .95rem; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { max-width: 760px; }
.faq details {
  border-bottom: 1px solid var(--stone);
}
.faq details:first-of-type { border-top: 1px solid var(--stone); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s5);
  min-height: 56px;
  font-family: var(--font-head);
  font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pine); }
.faq summary::after {
  content: '';
  width: 13px; height: 13px; flex-shrink: 0;
  border-right: 2px solid var(--pine);
  border-bottom: 2px solid var(--pine);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details > div { padding-bottom: var(--s5); }
.faq details p:last-child { margin-bottom: 0; }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; gap: var(--s8); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); } }

.offices { display: grid; gap: var(--s6); }
@media (min-width: 620px) and (max-width: 999px) { .offices { grid-template-columns: 1fr 1fr; } }

.office { }
.office h3 {
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 2px solid var(--ink);
  font-size: 1.15rem;
}
.office-note { font-size: .82rem; color: var(--ink-muted); font-weight: 400; }
.office dl { margin: 0 0 var(--s5); display: grid; gap: 0; }
.office-line {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--stone);
  font-size: .95rem;
}
.office-line dt { font-family: var(--font-head); font-size: .8rem; font-weight: 600; color: var(--ink-muted); }
.office-line dd { margin: 0; }
.office-line address { font-style: normal; }
.office-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s5); }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.form-panel {
  background: var(--surface);
  border: 1px solid var(--stone);
  border-radius: var(--r-panel);
  padding: var(--s6) var(--s5);
}
@media (min-width: 620px) { .form-panel { padding: var(--s7) var(--s6); } }
.form-panel h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: var(--s2); }
.form-intro { color: var(--ink-muted); font-size: .97rem; margin-bottom: var(--s6); }

.form-grid { display: grid; gap: var(--s4); }
.form-pair { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .form-pair { grid-template-columns: 1fr 1fr; } }

.field label { display: block; margin-bottom: var(--s2); font-size: .92rem; font-weight: 500; }
.field .opt { color: var(--ink-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: var(--r-control);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 104px; resize: vertical; padding-top: var(--s3); }
.field select {
  appearance: none;
  padding-right: var(--s7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101A16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  background-size: 17px;
}
@media (prefers-color-scheme: dark) {
  .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0F2EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px var(--pine-wash);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px;
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--alert); }
.field-msg { display: none; margin: var(--s2) 0 0; font-size: .87rem; font-weight: 500; color: var(--alert); }
.field.invalid .field-msg { display: block; }

.form-alert {
  display: none;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-control);
  font-size: .96rem;
  margin-bottom: var(--s5);
}
.form-alert.show { display: flex; }
.form-alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.form-ok  { background: var(--pine-wash); border: 1px solid var(--pine-line); }
.form-ok svg { color: var(--pine); }
.form-ok b { display: block; font-family: var(--font-head); font-weight: 600; margin-bottom: 2px; }
.form-err { background: var(--alert-soft); border: 1px solid var(--alert); color: var(--alert); }
.form-err svg { color: var(--alert); }
.form-err a { color: inherit; font-weight: 600; }

.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form-foot { font-size: .87rem; color: var(--ink-muted); margin: 0; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
  background: var(--pine-deep);
  color: var(--on-dark-muted);
  padding-block: var(--s8) var(--s6);
  font-size: .94rem;
}
.footer-grid { display: grid; gap: var(--s7); }
@media (min-width: 700px)  { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; } }
.footer h2 {
  font-size: .8rem; font-weight: 600; letter-spacing: 0;
  color: var(--on-dark); margin-bottom: var(--s4);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--on-dark-line);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s3); max-width: none; }
.footer a { color: var(--on-dark-muted); text-decoration: none; }
.footer a:hover { color: var(--on-dark); text-decoration: underline; }
.footer p { color: var(--on-dark-muted); max-width: 42ch; }

.footer-brand { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--on-dark); letter-spacing: -.02em; margin-bottom: var(--s3); }
.footer-iso {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4); padding: var(--s2) var(--s4);
  border: 1px solid var(--on-dark-line); border-radius: var(--r-control);
  color: var(--on-dark); font-size: .84rem; font-weight: 500;
}
.footer-iso svg { width: 15px; height: 15px; }
.footer address { font-style: normal; line-height: 1.55; margin-bottom: var(--s4); }
.footer address b { display: block; color: var(--on-dark); font-weight: 600; margin-bottom: 2px; }

.footer-base {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between;
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--on-dark-line);
  font-size: .87rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* ── Mobile action bar ────────────────────────────────────────────────────── */
.actionbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 55;
  display: grid; grid-template-columns: 1fr 1fr 1.2fr;
  background: var(--paper);
  border-top: 1px solid var(--stone);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar a {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 56px; padding-inline: var(--s2);
  font-size: .9rem; font-weight: 500; color: var(--ink); text-decoration: none;
  border-right: 1px solid var(--stone);
}
.actionbar a:last-child { border-right: 0; }
.actionbar svg { width: 18px; height: 18px; color: var(--pine); }
.actionbar .ab-book { background: var(--hi-vis); color: #101A16; font-weight: 600; }
.actionbar .ab-book svg { color: #101A16; }
body { padding-bottom: 56px; }
@media (min-width: 1060px) {
  .actionbar { display: none; }
  body { padding-bottom: 0; }
}

/* ── Service page ─────────────────────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none;
  margin: 0 0 var(--s5); padding: 0; font-size: .87rem; color: var(--ink-muted);
}
.crumbs li { margin: 0; max-width: none; }
.crumbs li + li::before { content: '/'; margin-right: var(--s2); color: var(--ink-faint); }

.page-hero { padding-block: var(--s7) var(--s6); border-bottom: 1px solid var(--stone); }
.page-hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); margin-bottom: var(--s4); }
.page-hero .lede { font-size: 1.15rem; color: var(--ink-muted); max-width: 54ch; margin-bottom: var(--s6); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s8); font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s6); }

/* Two-column layout for a documentation page: content + sticky summary. */
.doc-grid { display: grid; gap: var(--s7); }
@media (min-width: 1000px) { .doc-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s8); align-items: start; } }

.doc-aside {
  border: 1px solid var(--stone);
  border-radius: var(--r-panel);
  padding: var(--s5);
  background: var(--surface);
}
@media (min-width: 1000px) { .doc-aside { position: sticky; top: calc(var(--header-h) + var(--s5)); } }
.doc-aside h2 { font-size: .95rem; font-weight: 600; margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--stone); }
.doc-aside dl { margin: 0 0 var(--s5); }
.doc-aside .office-line { grid-template-columns: 84px 1fr; }
.doc-aside .office-line:last-of-type { border-bottom: 0; }

.price-table { width: 100%; border-collapse: collapse; font-size: .96rem; margin-bottom: var(--s5); }
.price-table caption { text-align: left; font-size: .87rem; color: var(--ink-muted); padding-bottom: var(--s3); }
.price-table th, .price-table td { padding: var(--s3) var(--s3) var(--s3) 0; text-align: left; border-bottom: 1px solid var(--stone); }
.price-table thead th {
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  color: var(--ink-muted); border-bottom: 2px solid var(--ink);
}
.price-table td:last-child, .price-table th:last-child { text-align: right; padding-right: 0; }
.price-table td:last-child { font-family: var(--font-head); font-weight: 600; white-space: nowrap; }

.cta-strip { background: var(--pine-deep); color: var(--on-dark); }
.cta-strip h2 { color: var(--on-dark); max-width: 18ch; }
.cta-strip p { color: var(--on-dark-muted); max-width: 52ch; }
.cta-strip .hero-actions { margin-bottom: 0; margin-top: var(--s6); }

/* ── Motion ───────────────────────────────────────────────────────────────── */
/* There is no scroll-triggered fade on this site by design, so this only has
   to cover the perimeter draw, the marquee and control transitions. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .announce, .header, .mobile-nav, .actionbar, .marquee, .cta-strip { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
  .pest-panel[hidden] { display: block !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .85em; }
}