/* ============================================================================
   theme.css: PJ Mac Pest Control
   Loaded LAST, so every rule here wins over the base kit in styles.css.

   The base kit is a dark, high-contrast theme. A pest control company selling to
   homeowners in stressful circumstances needs the opposite: clean, bright,
   obviously professional, and legible to an older audience reading on a phone in
   a hurry. This file re-skins it on the REAL brand palette sampled from the
   client's own logo by brand-asset-grab (2026-08-12), not on a guess.

   Contrast is checked, not assumed. The brand orange #ff5e00 gives only 2.9:1 on
   white, so it is NEVER used for text or as a button background with white
   type. It is used as an accent rule, an icon fill and a hover state. The brand
   green #005112 gives 8.9:1 on white and carries the CTA.
   ========================================================================== */

:root {
  /* Sampled from the real logo */
  --green:#005112;  --green-d:#003a0d;  --green-l:#0a6a1f;
  --orange:#ff5e00; --orange-d:#d94f00;
  /* #ff5e00 on white is 2.9:1, under the 4.5:1 AA bar for text. This darker
     tone is 4.6:1 and is the only orange allowed on a light background for
     anything a visitor has to read. */
  --orange-text:#b34200;

  /* Surfaces: white and a warm off-white, so the page reads as clinical rather
     than gloomy, with a deep green for the inverted bands. */
  --bg:#ffffff; --bg2:#f5f8f4; --bg3:#eef4ee; --card:#ffffff; --line:#d9e2d9;
  --ink:#14211a; --muted:#4a5a50; --muted2:#6b7a70;
  --deep:#04250f;

  /* The base kit paints its primary CTA with --green, so pointing that at the
     brand green makes every generated button inherit the brand with no edit to
     build.js. --green-soft is the tint behind ribbons and badges. */
  --green-soft:rgba(0,81,18,.09);

  --r:10px;
  --shadow:0 14px 34px -16px rgba(4,37,15,.28);
  --display:'Open Sans',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  --cond:'Open Sans',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  --body:'Source Sans 3','Source Sans Pro',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
}

body { background:var(--bg); color:var(--ink); }

/* The base kit uppercases and tightens every heading, which suits a combat-sports
   brand and actively hurts readability for a 55-year-old homeowner reading a
   termite page. Sentence case, normal tracking, comfortable line height. */
h1,h2,h3,h4,h5 { text-transform:none; letter-spacing:-0.01em; font-family:var(--display); font-weight:700; }
h1,h2 { line-height:1.14; }
h3 { line-height:1.25; font-size:21px; }
.title { color:var(--ink); }
.lead { color:var(--muted); }

/* ---- sections alternate white / pale green so the page has rhythm ---------- */
.sec { background:var(--bg); padding:76px 0; }
.sec:nth-of-type(even) { background:var(--bg2); }
.faq-sec { background:var(--bg3); }
@media (max-width:760px) { .sec { padding:56px 0; } }

/* ---- nav ------------------------------------------------------------------- */
.nav { background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
/* The kit ships a DARK scrolled bar (styles.css: .nav.scrolled -> rgba(10,11,13,.86)),
   which outranks this client's light `.nav` on specificity (two classes vs one).
   The result: scroll down and the bar turned near-black while the links kept the
   client's near-black ink, so the whole menu measured 1.18:1 against its own
   background (AA needs 4.5) and simply vanished. The phone sat at 2.05:1. The
   logo is dark-ink artwork too, so it disappeared with them.
   Keep the header light in both states: the brand stays legible, the logo stays
   visible, and the only change on scroll is elevation. */
.nav.scrolled {
  background:rgba(255,255,255,.97);
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px -18px rgba(4,37,15,.5);
}
.nav.scrolled .nav-links a { color:var(--muted); }
.nav.scrolled .nav-links a:hover { color:var(--ink); }
.nav.scrolled .nav-phone { color:var(--ink); }
.nav-links a { color:var(--ink); font-weight:600; text-transform:none; letter-spacing:0; font-size:15px; }
.nav-links a:hover { color:var(--green); }
.nav-phone { color:var(--green); font-weight:700; letter-spacing:0; }
.nav-phone svg { fill:var(--green); }
/* The logo source is 2528x3063, a TALL stacked mark. Height-lock it or the
   header renders a sliver. */
.brand-logo { height:46px; width:auto; display:block; }
.foot-brand .brand-logo { height:56px; }
.hamb span { background:var(--ink); }

/* ---- buttons --------------------------------------------------------------- */
.btn { border-radius:var(--r); font-family:var(--display); font-weight:700; letter-spacing:0; text-transform:none; font-size:17px; }
.btn-green { background:var(--green); color:#fff; box-shadow:0 8px 20px -10px rgba(0,81,18,.55); }
.btn-green:hover { background:var(--green-l); }
/* Orange as a BACKGROUND with near-black text is 8.4:1 and fine. Orange as text
   on white is not, which is why --orange-text exists. */
.btn-orange { background:var(--orange); color:#1a0a00; }
.btn-ghost { border:2px solid var(--green); color:var(--green); background:transparent; }
.btn-ghost:hover { background:var(--green); color:#fff; }

/* ---- hero ------------------------------------------------------------------ */
.hero, .subhero { background:var(--deep); }
/* The vehicle photo is bright, so the scrim has to be heavy enough for white
   type to stay AA-legible over the lightest part of it. */
.hero-bg::after, .subhero .hero-bg::after {
  background:linear-gradient(180deg,rgba(4,37,15,.72) 0%,rgba(4,37,15,.80) 55%,rgba(4,37,15,.94) 100%);
}
.hero { min-height:auto; padding:132px 0 64px; }
/* NOT 100vh. A full-viewport hero pushes the proof band off screen entirely,
   and 3.2 wants the stats bar edge to land at 470-560 on a 390x844 phone so
   10-20 percent of the next section invites the scroll. */
@media (max-width:760px) { .hero { padding:104px 0 44px; } }
.hero-in h1, .subhero h1 { color:#fff; font-size:clamp(30px,6.4vw,52px); text-shadow:0 2px 14px rgba(0,0,0,.4); }
.hero-in .sub, .subhero .sub { color:#e6efe6; font-size:clamp(16px,2vw,19px); }
.ribbon { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:999px; font-weight:700; text-transform:none; letter-spacing:.02em; font-size:13.5px; }
.ribbon .dot { background:var(--orange); }
.hero-trust span { color:#d8e6d8; text-transform:none; letter-spacing:0; font-size:14.5px; }
.hero-trust b { color:#fff; }
.hero-trust .sep { background:rgba(255,255,255,.28); }

/* ---- proof band ------------------------------------------------------------ */
.stats, .factbar { background:var(--deep); border:none; }
.stats-in { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:30px 0; grid-auto-rows:1fr; }
.stat {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); padding:22px 16px; text-align:center; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:112px;
}
.stat .n { display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1; color:#fff; }
.stat .n .u { color:var(--orange); }
.stat .l { display:block; font-family:var(--body); font-size:.78rem; font-weight:600; line-height:1.4; color:#c3d4c3; text-transform:uppercase; letter-spacing:.07em; max-width:16ch; margin:0; }
@media (max-width:900px) { .stats-in { grid-template-columns:repeat(2,1fr); padding:22px 0; } .stat { min-height:100px; } }

/* ---- cards ----------------------------------------------------------------- */
.card,.plan,.prog,.pillar,.linkcard,.tst-card,.proof-card,.ab,.form-card,.feat,.loc,.gitem,.answer {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); color:var(--ink);
}
.linkcard:hover,.plan:hover,.prog:hover { border-color:var(--green); transform:translateY(-2px); }
.linkcard h3,.plan h3,.prog h3,.pillar h3,.gitem h3 { color:var(--ink); }
.linkcard p,.prog p,.pillar p { color:var(--muted); }
.lk,.linkcard .lk { background:var(--green-soft); color:var(--green-d) !important; font-weight:700; border-radius:999px; }
.go { color:var(--green); font-weight:700; }
/* --orange-text, not --orange: the eyebrow is text on a light surface. */
.eyebrow { color:var(--orange-text); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:13px; }

.prose { color:var(--ink); }
.prose h2,.prose h3 { color:var(--ink); }
.prose a { color:var(--green); font-weight:600; text-decoration:underline; }
.prose ul li::marker { color:var(--orange-text); }

/* ---- CTA band -------------------------------------------------------------- */
.ctaband { background:var(--deep); color:#fff; border:none; border-radius:var(--r); }
.ctaband h2 { color:#fff; }
.ctaband p { color:#d8e6d8; }
.ctaband .btn-green { background:var(--orange); color:#1a0a00; }
.ctaband .btn-green:hover { background:var(--orange-d); color:#fff; }
.ctaband .btn-ghost { border-color:rgba(255,255,255,.7); color:#fff; }
.ctaband .btn-ghost:hover { background:#fff; color:var(--deep); }

/* ---- NAP / hours ----------------------------------------------------------- */
.nap { color:var(--muted); line-height:1.75; }
.nap a { color:var(--green); font-weight:700; }
.hours-table { width:100%; border-collapse:collapse; font-size:15px; }
.hours-table th, .hours-table td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); }
.hours-table th { font-weight:700; color:var(--ink); width:42%; }
.hours-table td { color:var(--muted); }

/* ---- credential badge ------------------------------------------------------ */
.cred { display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.cred img { width:44px; height:44px; border-radius:6px; }

/* ---- footer ---------------------------------------------------------------- */
footer { background:var(--deep); color:#cfe0cf; }
footer h3,.foot-h { color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.08em; }
footer a { color:#cfe0cf; }
footer a:hover { color:#fff; }
.foot-bot { border-top:1px solid rgba(255,255,255,.14); color:#9db09d; }
.foot-legal { border-top:1px solid rgba(255,255,255,.14); margin-top:14px; padding-top:14px; font-size:13px; text-align:center; }
.foot-legal a, .foot-legal button { color:#cfe0cf; }
.foot-legal button.privacy-choices { background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline; }

/* ---- breadcrumbs ----------------------------------------------------------- */
.crumbs { font-size:14px; color:var(--muted2); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crumbs a { color:var(--green); }
.crumbs i { font-style:normal; color:var(--muted2); }

/* ---- sticky action bar ----------------------------------------------------- */
.stickybar { display:none; }
@media (max-width:820px) {
  .stickybar {
    display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--deep); border-top:3px solid var(--orange);
  }
  .stickybar a {
    padding:0 6px; min-height:48px; display:flex; align-items:center; justify-content:center;
    text-align:center; color:#fff; font-weight:700; font-size:15px; font-family:var(--display);
    border-right:1px solid rgba(255,255,255,.16); text-decoration:none; white-space:nowrap;
  }
  .stickybar a:last-child { border-right:none; }
  .stickybar a.hi { background:var(--orange); color:#1a0a00; }
  /* 56, not 52. R24 fixes the bar at 56px and check-mobile.mjs hardcodes that
     number, then builds its body-padding regex against it. */
  body { padding-bottom:56px; }
}

/* ---- forms: 16px is a floor, not a preference. iOS Safari zooms the viewport
     on focus below it and the visitor loses their place. ---------------------- */
.field input,.field select,.field textarea { font-size:16px; border:1px solid var(--line); border-radius:var(--r); background:#fff; color:var(--ink); }
.field label { color:var(--muted); font-weight:600; text-transform:none; letter-spacing:0; font-size:14px; }

/* ---- reveal: base state is ALWAYS visible. If the JS never runs, the content
     is still there. An opacity:0 default means one script error blanks the page
     for every visitor and for any crawler that does not run the observer. ---- */
.reveal { opacity:1; }
.reveal.in { animation:.5s cubic-bezier(.2,.7,.2,1) both revIn; }
@media (prefers-reduced-motion:reduce) { .reveal.in { animation:none; } }

/* ---- skip link ------------------------------------------------------------- */
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:12px; top:12px; z-index:100; background:#fff; color:var(--green); padding:10px 16px; border:2px solid var(--green); border-radius:var(--r); }

/* ---- focus visible: keyboard users must be able to see where they are ------ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline:3px solid var(--orange); outline-offset:2px;
}

/* ---- FAQ: native disclosure, so it works with no JS ------------------------
   The base kit collapses answers with `.qa .ans { max-height:0 }` and reopens
   them by JS adding `.open`. That hides every answer from a human visitor if the
   JS fails, and its `max-height:240px` open state silently CLIPS answers longer
   than about ten lines. These answers run 76 to 105 words. <details> has neither
   problem, announces its own expanded state to a screen reader, and is keyboard
   operable without any of our code. Override the kit's rules explicitly. */
details.qa { border-bottom:1px solid var(--line); }
details.qa summary {
  cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); line-height:1.35;
}
details.qa summary::-webkit-details-marker { display:none; }
details.qa summary::after {
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--green); font-size:26px; font-family:var(--body); transition:transform .2s;
}
details.qa[open] summary::after { transform:translateY(-50%) rotate(45deg); }
/* max-height is deliberately NOT set: an answer must never be clipped. */
details.qa .ans { max-height:none; overflow:visible; padding-bottom:20px; color:var(--muted); }
details.qa .ans p { margin:0; }
details.qa summary:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }

/* ---- CARD GRIDS -----------------------------------------------------------
   .grid3 was emitted 5 times by the generators and defined NOWHERE, so every
   card grid on the site (13 services, 15 offices, 3 process steps) rendered as
   an unstyled block: one card per row at full container width, on desktop,
   tablet and mobile alike. Every numeric gate passed while this was true, which
   is the whole argument for looking at the rendered page.
   Mobile first, so the single column is the base and columns are added up. */
.grid3 { display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch; }
@media (min-width:600px) { .grid3 { grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (min-width:1000px) { .grid3 { grid-template-columns:repeat(3,1fr); gap:20px; } }
.grid3 > .linkcard, .grid3 > .prog { display:flex; flex-direction:column; padding:22px; }
.grid3 > .linkcard h3, .grid3 > .prog h3 { margin:0 0 8px; }
.grid3 > .linkcard p, .grid3 > .prog p { margin:0 0 14px; font-size:15px; }
/* the affordance sits at the card foot whatever the copy length, so a row of
   cards does not look ragged */
.grid3 > .linkcard .go { margin-top:auto; }

/* ---- office contact card (replaces the dead party-date checker) ----------- */
.office-card { background:var(--card); border:2px solid var(--line); border-radius:var(--r); padding:22px; }
.office-card h3 { margin:0 0 10px; font-size:19px; }
.office-card .nap { margin:0 0 12px; }
.office-hours { margin:0 0 12px; font-size:15px; color:var(--ink); }
.office-note { margin:12px 0 0; font-size:14px; color:var(--muted2); }
.btn-block { display:flex; width:100%; justify-content:center; }

/* ---- rating line: this is PROOF, so it should not read as body text -------- */
.rating-line { margin:0 0 12px; font-size:15px; font-weight:600; color:var(--ink); }
.rating-line .stars { color:var(--orange-text); letter-spacing:1px; }

/* ---- map link (replaces the map facade that needed cro.js to expand) ------ */
.map-link {
  display:flex; align-items:center; gap:10px; margin-top:14px; padding:14px 16px;
  min-height:48px; border:2px solid var(--line); border-radius:var(--r);
  background:var(--bg2); color:var(--green); font-weight:700; font-size:15px;
}
.map-link:hover { border-color:var(--green); }
.map-pin { font-size:19px; line-height:1; }

/* ---- TAP TARGETS: R24 floor is 48x48 CSS px with 8px separation ------------
   Measured 30 controls under 48px tall on mobile: the footer legal strip at
   18px, the header phone at 20px, and every card link at 22px. These are the
   ones a thumb actually has to hit. */
@media (max-width:820px) {
  .foot-legal a, .foot-legal button {
    display:inline-flex; align-items:center; min-height:48px; padding:0 10px;
  }
  .foot-col a { display:flex; align-items:center; min-height:48px; }
  .nav-phone { min-height:48px; display:flex; align-items:center; }
  .crumbs a, .crumbs span { display:inline-flex; align-items:center; min-height:48px; }
  .crumbs a { min-width:48px; justify-content:center; }
  a[href^="tel:"]:not(.btn):not(.nav-phone), a[href^="sms:"]:not(.btn) {
    display:inline-flex; align-items:center; min-height:48px;
  }
  details.qa summary { min-height:48px; display:flex; align-items:center; }
}

/* ---- line length: 45-75 characters is the R24 comfortable range ------------
   Measured 91 characters per line on tablet, where the prose ran the full
   705px container. Cap the measure; the container stays wide for cards. */
.prose > p, .prose > ul, .prose > ol { max-width:68ch; }
.sec-head .lead { max-width:64ch; }

/* ---- the button label floor is 14px (R24); the kit computed 13.5 ---------- */
.btn { font-size:16px; }
@media (max-width:380px) { .btn { font-size:15px; } }

/* ---- TEXT ON THE DARK SURFACES -------------------------------------------
   The kit is a dark-theme kit; this client is a light theme with three dark
   bands kept from it (the footer, the subhero, and the scrolled nav). Setting
   `footer { color:#cfe0cf }` was not enough: the kit colours the CHILDREN with
   class selectors (`.foot-col a`, `.foot-brand p`), which outrank a bare type
   selector, so every child snapped back to the light-theme grey and rendered
   dark-on-dark. Measured on the dark green (#042 50f) footer:
     body copy   rgb(74,90,80)  2.25:1   (AA needs 4.5)
     phone link  rgb(0,81,18)   1.71:1   the conversion number, invisible
     subhero     rgb(20,33,26)  1.01:1   "15 offices across 3 counties", gone
   These rules are scoped to the dark surfaces and deliberately carry enough
   specificity to beat the kit, while leaving .btn alone so the green CTAs keep
   their own white-on-green treatment. */
footer, .subhero { color:#e3ede3; }
footer p, footer li, footer span, footer address, footer div,
footer .foot-brand p, footer .foot-bot, footer .foot-col p { color:#c9dcc9; }
footer a:not(.btn), footer .foot-col a, footer .foot-legal a { color:#e3ede3; }
footer a:not(.btn):hover, footer .foot-col a:hover { color:#fff; }
footer .foot-col h5 { color:#8fd39c; }                 /* section heads: 7.4:1 on the dark green */
footer a[href^="tel:"]:not(.btn), footer a[href^="mailto:"]:not(.btn) { color:#fff; font-weight:700; }
footer .nap, footer .nap * { color:#c9dcc9; }

.subhero .wrap, .subhero .in, .subhero p:not(.sub), .subhero li,
.subhero div:not(.btn), .subhero strong { color:#e6efe6; }
.subhero a:not(.btn) { color:#fff; }
/* the crumb trail sits on the same dark band */
.subhero .crumbs, .subhero .crumbs a, .subhero .crumbs span { color:#cfe0cf; }
.subhero .crumbs a:hover { color:#fff; }

/* ---- the mobile menu panel ------------------------------------------------
   Third instance of the same cascade problem, and the one a visitor hits most:
   the kit's panel is `rgba(10,11,13,.97)` (near-black) while this client's
   `.nav-links a` is near-black ink, so every item in the OPEN mobile menu
   measured 1.12:1. It is invisible in the one state where it is the only
   navigation the visitor has. Nothing that checks the page at rest can see
   this, because the panel is display:none until it is opened.
   Light panel, dark items, to match the header it drops out of. */
@media (max-width:1000px) {
  .nav-links.mobile {
    background:rgba(255,255,255,.985);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px -22px rgba(4,37,15,.55);
  }
  .nav-links.mobile a {
    color:var(--ink); width:100%;
    min-height:52px; display:flex; align-items:center;   /* R24 tap floor */
    border-bottom:1px solid var(--line); font-size:16.5px;
  }
  .nav-links.mobile a:last-child { border-bottom:none; }
  .nav-links.mobile a:hover, .nav-links.mobile a:focus { color:var(--green); }
}

/* ---- text and ghost buttons on the dark hero ------------------------------
   theme.css only recoloured the hero h1 and .sub. Any other text in the hero
   block inherited --ink from body and rendered near-black on the dark green
   hero: "Family owned since ..." measured 1.01:1. The ghost button was worse in
   a different way: green border and green label on dark green, 1.71:1, so the
   secondary CTA was invisible on every hero on the site. */
.hero-in, .hero-in p, .hero-in div, .hero-in span, .hero-in li, .hero-in strong { color:#e6efe6; }
.hero-in a:not(.btn) { color:#fff; }
.hero .btn-ghost, .subhero .btn-ghost, .hero-in .btn-ghost {
  border-color:rgba(255,255,255,.75); color:#fff; background:rgba(255,255,255,.08);
}
.hero .btn-ghost:hover, .subhero .btn-ghost:hover, .hero-in .btn-ghost:hover {
  background:#fff; color:var(--green); border-color:#fff;
}

/* ---- classes the generators emit that no stylesheet defined --------------- */
.breadcrumbs { font-size:14px; margin:0 0 14px; }
.breadcrumbs a { color:inherit; }
.foot-legal { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-size:14px; }
.privacy-choices {
  background:none; border:0; padding:0; font:inherit; color:inherit;
  text-decoration:underline; cursor:pointer;
}
.map-cta { font-weight:700; }

/* Breadcrumb links measured 4.22:1, just under the 4.5 AA floor. --muted was
   chosen for body text on white; on the pale crumb strip it lands short. */
.crumbs a, .breadcrumbs a { color:#3d4c43; }
.crumbs a:hover, .breadcrumbs a:hover { color:var(--green); }

/* ---- OFFER TILES ----------------------------------------------------------
   From freedomfirstlawyers/components/PricingTeaser.tsx: three scannable tiles
   with a coloured left rule, carrying commitments that were previously buried
   in a prose bullet list under a heading that led with a refusal. */
.offer-tiles { display:grid; grid-template-columns:1fr; gap:12px; margin:22px 0; }
@media (min-width:640px) { .offer-tiles { grid-template-columns:repeat(3,1fr); } }
.offer-tile {
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--green);
  border-radius:var(--r); padding:16px 18px;
}
.ot-k { font-size:12.5px; text-transform:uppercase; letter-spacing:.09em; font-weight:700; color:var(--muted2); margin-bottom:5px; }
.ot-v { font-family:var(--display); font-weight:700; font-size:17px; line-height:1.25; color:var(--ink); }

/* ---- URGENCY BLOCK --------------------------------------------------------
   From freedomfirstlawyers/components/UrgencyBlock.tsx: a left-ruled alert with
   an icon, a consequence-of-delay headline and one action. Orange rather than
   red: this is a pest problem, not an arrest, and the brand accent is orange.
   Uses --orange for the RULE and the icon field only. The label text is
   --orange-text (4.6:1) because #ff5e00 is 2.9:1 on white and this file forbids
   it for anything a visitor has to read. */
.sec.tight { padding:26px 0; }
.urgency {
  display:flex; gap:16px; align-items:flex-start;
  background:#fff7f2; border:1px solid #ffd9c2; border-left:5px solid var(--orange);
  border-radius:var(--r); padding:20px 22px;
}
.u-icon {
  flex:0 0 32px; width:32px; height:32px; border-radius:50%;
  background:var(--orange); color:#1a0a00;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:20px; line-height:1;
}
.u-title { font-size:19px; margin:0 0 7px; color:var(--ink); }
.u-body { margin:0 0 12px; font-size:15.5px; color:var(--muted); max-width:68ch; }
.u-cta {
  display:inline-flex; align-items:center; min-height:48px;
  font-weight:700; font-size:15.5px; color:var(--orange-text);
}
.u-cta:hover { color:var(--green); }
@media (max-width:600px) { .urgency { padding:18px; gap:12px; } .u-title { font-size:17.5px; } }

/* ---- the sticky bar yields to the hero CTA --------------------------------
   It used to be on screen from the first paint, so on every page the hero's
   primary CTA and the bar's CTA competed inside the first screen: two primary
   asks, and the bar covering content it did not need to cover. The
   freedomfirstlawyers MobileBar pattern is to appear only once the in-page CTA
   has scrolled away, so there is exactly one primary ask at any moment.
   NOTE: the `body { padding-bottom:56px }` rule above stays exactly where it is.
   R24 fixes the bar at 56px and check-mobile.mjs matches that number with a
   regex scoped to this same media block, so moving it breaks that gate. */
@media (max-width:820px) {
  .stickybar {
    transform:translateY(100%);
    transition:transform .22s ease-out;
    will-change:transform;
  }
  body.sb-on .stickybar { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .stickybar { transition:none; }
}

/* ---- TRIAGE CARDS ---------------------------------------------------------
   Ported from the freedomfirstlawyers charge-lookup device (three category
   cards, a plain-language range under each heading, a short item list). The
   headings are phrased as what the visitor NOTICED, not what the trade calls
   the service, because the site previously listed 13 services and required the
   visitor to self-diagnose before it would help them. */
.triage-card {
  background:var(--card); border:1px solid var(--line); border-top:4px solid var(--green);
  border-radius:var(--r); padding:24px 22px; display:flex; flex-direction:column;
}
.triage-card h3 { margin:0 0 6px; font-size:19px; line-height:1.25; }
.tr-sub { margin:0 0 16px; font-size:14.5px; color:var(--muted2); }
.tr-list { list-style:none; margin:0; padding:0; }
.tr-list li { border-top:1px solid var(--line); }
.tr-list li:last-child { border-bottom:1px solid var(--line); }
.tr-list a {
  display:flex; align-items:center; justify-content:space-between;
  min-height:48px; padding:0 2px; font-weight:600; font-size:15.5px; color:var(--ink);
}
.tr-list a::after { content:"\2192"; color:var(--green); font-weight:700; }
.tr-list a:hover { color:var(--green); }

/* the hero trust statement: one checkable claim, the freedomfirst hero slot */
.hero-claim {
  margin:14px 0 0; font-weight:700; font-size:16.5px; color:#fff;
  border-left:3px solid var(--orange); padding-left:12px; max-width:56ch;
}

/* ---- PHOTO BAND (R35 imagery) ---------------------------------------------
   The spec-driven image band figuresFor() emits. Captions are the spec's alt
   text, so the image and its caption can never disagree. Mobile first. */
.photo-band { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:600px) { .photo-band { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .photo-band { grid-template-columns:repeat(4,1fr); } }
.photo-band .ph { margin:0; }
.photo-band img {
  width:100%; height:auto; display:block; border-radius:var(--r);
  border:1px solid var(--line); background:var(--bg2);
}
.photo-band figcaption { margin-top:7px; font-size:13.5px; color:var(--muted2); line-height:1.45; }
/* the first figure leads the band on wide screens when there are 5+ */
@media (min-width:1000px) {
  .photo-band .ph:first-child:nth-last-child(n+5) { grid-column:span 2; }
}

/* Lead form (WPX migration 2026-10-10): inline errors, honeypot, failure line. */
.lead-form .field-err,.lead-form .form-err{color:#a3260b;font-size:14px;margin:6px 0 0;min-height:0}
.lead-form .field-err:empty,.lead-form .form-err:empty{display:none}
.lead-form .form-err{margin-top:12px;text-align:center;font-weight:600}
.lead-form [aria-invalid="true"]{border-color:#a3260b}
.lead-form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-form input,.lead-form select{min-height:48px}
.lead-form button[disabled]{opacity:.7;cursor:progress}
.form-ok h3{margin-bottom:6px}

/* Map facade (main.js loads the iframe on click) and Nevada pest list. */
.map-facade{display:grid;place-items:center;min-height:240px;margin-top:14px;border:1px solid var(--line);border-radius:var(--r);background:#eef3ee;color:var(--green);font-weight:700;cursor:pointer;text-align:center;padding:16px}
.map-facade:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.map-facade iframe{width:100%;height:320px;border:0;border-radius:var(--r)}
.map-facade[data-loaded]{display:block;padding:0;min-height:0;background:none}
.pest-list{columns:2;column-gap:28px}
.pest-list li{break-inside:avoid}
@media (max-width:560px){.pest-list{columns:1}}

/* styles.css hides the plain-text header phone below 760px (the green header
   button already carries the number), but the 820px tap-target block above
   re-shows it with display:flex, so on phones it wrapped onto three lines next
   to the logo. Restore the intended hide (WPX migration audit, 2026-10-10). */
@media (max-width:760px) { .nav-phone { display:none; } }

/* Form fine print: --muted2 measured 4.22:1 on the section background (render
   gate, contrast). --muted is 7:1 on white. */
.form-call { text-align:center; margin-top:12px; color:var(--muted); font-size:14px; }
.form-call a { color:var(--green); font-weight:700; }
.lead-form .form-note { color:var(--muted); }

/* Contact-table phone links sat at exactly 48px; at 3x device scale one row
   rounded to 47.99 and failed the 48px tap floor (render gate, /contact-us/,
   mobile, scrolled). A 2px margin of safety. */
@media (max-width:820px) { .hours-table a[href^="tel:"] { min-height:50px; } }