/* ==========================================================================
   Ozzie Pest Control site.css
   Palette sampled directly from the logo (#004101, #D5B500) and the
   vehicle wrap (#FFD24D). Chevron + crosshair reticle motifs are lifted
   from the ute livery and the logo mark respectively.
   ========================================================================== */

:root {
  /* Brand */
  --green-900: #002400;
  --green-800: #003301;
  --green-700: #004101; /* sampled: logo body */
  --green-600: #0a5a11;
  --green-500: #12742010;

  --gold-700: #a88d00;
  --gold-600: #c9a900;
  --gold-500: #d5b500; /* sampled: logo wordmark */
  --gold-400: #e8c31a;
  --gold-300: #ffd24d; /* sampled: ute wrap */

  --amber: #e19a1c;

  /* Neutrals */
  --bone: #f7f5ee;
  --bone-2: #efece1;
  --white: #ffffff;
  --ink: #131a12;
  --slate: #55604f;
  --slate-light: #7c8776;
  --line: #dcd8c9;

  --danger: #b23b13;
  --shot: #ff4a24;

  /* Type */
  --display: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Space */
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 3px;
  --shadow-sm: 0 1px 2px rgba(0, 36, 0, 0.06), 0 4px 14px rgba(0, 36, 0, 0.06);
  --shadow-lg: 0 18px 50px -12px rgba(0, 36, 0, 0.28);

  --maxw: 1200px;
}

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

* { margin: 0; }

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

body {
  overflow-x: clip;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

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

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green-600); }

button, input, select, textarea { font: inherit; color: inherit; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-700); color: #fff; padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.022em;
  color: var(--green-900);
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); letter-spacing: -0.012em; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.005em; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold-500);
  flex: none;
}
.eyebrow--light { color: var(--gold-300); }
.eyebrow--light::before { background: var(--gold-300); }

.lede {
  font-size: clamp(1.06rem, 1.55vw, 1.24rem);
  line-height: 1.6;
  color: var(--slate);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Layout -- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.wrap--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--bone { background: var(--bone); }
.section--green { background: var(--green-700); color: #e9ebe4; }
.section--green h2, .section--green h3 { color: #fff; }

.stack > * + * { margin-top: 1.1rem; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.section-head { max-width: 64ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .lede { margin-top: .9rem; }

/* --------------------------------------------------------------- Buttons - */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--gold-300); color: var(--green-900); border-color: var(--gold-300); }
.btn--gold:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--green-900); }

.btn--green { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.btn--green:hover { background: var(--green-600); border-color: var(--green-600); color: #fff; }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn--ghost:hover { border-color: var(--gold-300); color: var(--gold-300); }

.btn--outline { background: transparent; color: var(--green-700); border-color: var(--green-700); }
.btn--outline:hover { background: var(--green-700); color: #fff; }

.btn--block { width: 100%; }
.btn svg { flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ------------------------------------------------------------- Utility bar */
.utility {
  background: var(--green-900);
  color: #b9c4b6;
  font-size: .82rem;
}
.utility .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
}
.utility a { color: #dfe5dc; text-decoration: none; }
.utility a:hover { color: var(--gold-300); }
.utility__hours { display: flex; align-items: center; gap: .5rem; }
.utility__links { display: flex; align-items: center; gap: 1.5rem; }
.utility .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-300); flex: none; }

@media (max-width: 780px) { .utility { display: none; } }

/* --------------------------------------------------------------- Header --- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 80px;
  max-width: 1360px;
}
.brand { flex: none; margin-right: auto; }
.brand img { width: 168px; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  display: block;
  padding: .6rem .55rem;
  font-size: .9rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}
.nav a:hover { background: var(--bone); color: var(--green-700); }
.nav a[aria-current="page"] { color: var(--green-700); box-shadow: inset 0 -2px 0 var(--gold-500); }

.nav__item { position: relative; }
.nav__toggle {
  display: flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer;
  padding: .6rem .55rem;
  font-size: .9rem; font-weight: 600; border-radius: var(--radius);
  white-space: nowrap;
}
.nav__toggle:hover { background: var(--bone); color: var(--green-700); }
.nav__toggle svg { transition: transform .18s ease; }
.nav__item[data-open="true"] .nav__toggle svg { transform: rotate(180deg); }

/* Invisible bridge across the gap between the button and its menu, so moving
   the pointer down into the menu never fires mouseleave on the parent. */
.nav__item[data-open="true"]::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 10px;
}
.nav__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-500);
  box-shadow: var(--shadow-lg);
  padding: .4rem;
  display: none;
}
.nav__item[data-open="true"] .nav__menu { display: block; }
.nav__menu a { padding: .55rem .7rem; font-weight: 500; font-size: .9rem; }

.header__cta { display: flex; align-items: center; gap: .75rem; flex: none; }
.header__cta .btn { white-space: nowrap; }
.header__phone {
  text-decoration: none;
  line-height: 1.15;
  text-align: right;
}
.header__phone small {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.header__phone strong {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--green-700);
  letter-spacing: -0.02em;
}

.burger {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .7rem;
  cursor: pointer;
}

@media (max-width: 1280px) { .header__phone { display: none; } }

@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: block; }
  .header .wrap { min-height: 68px; }
  .brand img { width: 138px; }
}

/* On a phone the gold CTA and the burger fight for the same 60px.
   The sticky call bar at the bottom already offers "Book online". */
@media (max-width: 600px) {
  .header__cta .btn--gold { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--white);
  padding: 1.25rem clamp(1.1rem, 4vw, 2rem) 6rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  visibility: hidden;
}
.drawer[data-open="true"] { transform: none; visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.drawer__top img { width: 140px; }
.drawer nav a {
  display: block; padding: .8rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  color: var(--green-900); text-decoration: none;
}
.drawer nav .sub a {
  font-family: var(--body); font-weight: 500; font-size: .95rem;
  color: var(--slate); padding: .55rem 0 .55rem 1rem; border-bottom: 0;
}
.drawer__actions { margin-top: 1.75rem; display: grid; gap: .6rem; }
.drawer__close { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .7rem; cursor: pointer; }

/* --------------------------------------------------------- Reticle motif -- */
/* The crosshair from the logo. Used as the "we lock on to the pest" device. */
.reticle { display: block; color: var(--gold-500); }
.reticle circle.ring { fill: none; stroke: currentColor; stroke-width: 2; }
.reticle line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.reticle .core { fill: var(--green-700); }

.reticle-anim .ring {
  transform-origin: center;
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), opacity .4s ease;
}
.pest-card:hover .reticle-anim .ring { transform: rotate(45deg) scale(.9); }
.pest-card:hover .reticle-anim .core { fill: var(--gold-500); }

/* ----------------------------------------------------------------- Hero --- */
/* Full-bleed widescreen band of the crew and the fleet. Cropped wide from the
   original rather than zoomed, then upscaled and lightly blurred at build time
   so the enlargement reads as depth of field rather than pixels. */
.hero {
  position: relative;
  background: var(--green-900);
  color: #fff;
  isolation: isolate;
  overflow: clip;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }

.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(0, 36, 0, .95) 0%,
      rgba(0, 36, 0, .86) 30%,
      rgba(0, 36, 0, .52) 56%,
      rgba(0, 36, 0, .28) 100%);
}
/* The ute-wrap chevron, rendered as a single gold hairline sweep. */
.hero__chevron {
  position: absolute; z-index: -1; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(255deg, transparent calc(50% - 1px), rgba(255, 210, 77, .5) 50%, transparent calc(50% + 1px));
}

.hero .wrap { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(6rem, 9vw, 8rem); }
.hero__inner { max-width: 640px; }
.hero h1 { color: #fff; font-size: clamp(2.35rem, 5.4vw, 4.1rem); }
.hero h1 em { font-style: normal; color: var(--gold-300); }
.hero__lede { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: #cfd6cb; max-width: 52ch; }
.hero .btn-row { margin-top: 2rem; }

.hero__proof {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
}
.hero__proof div { line-height: 1.25; }
.hero__proof strong {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  color: var(--gold-300);
  letter-spacing: -0.03em;
}
.hero__proof span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a6b1a3;
}

/* ------------------------------------------------------- Hero hunt (bug) --- */
/* A 16s cycle: the bug flits about, the scope chases it with a lag, snaps on at
   52%, the bug drops out of frame, then a beat of silence before the next one
   flies in. Both elements share the same cycle length so their waypoints meet
   exactly at the lock. All movement is transform-only, never layout.
   Sits above the photo, below the type, and never intercepts a pointer. */
.hero__hunt {
  --s: clamp(230px, 22vw, 320px);
  --cycle: 10s;
  position: absolute;
  z-index: -1;
  left: 74%;
  top: 42%;
  width: var(--s);
  height: var(--s);
  margin-left: calc(var(--s) / -2);
  margin-top: calc(var(--s) / -2);
  pointer-events: none;
}

.hunt__bug, .hunt__scope {
  position: absolute;
  top: 50%; left: 50%;
  will-change: transform, opacity;
}
.hunt__bug   { width: 64px; height: 64px; margin: -32px 0 0 -32px; animation: bug-flight var(--cycle) linear infinite; }
.hunt__scope { width: 100%; height: 100%; margin: -50% 0 0 -50%;
               animation: scope-hunt var(--cycle) cubic-bezier(.37, 0, .32, 1) infinite; }

/* ---- the bug ---- */
.bug { width: 100%; height: 100%; overflow: visible; }
.bug__antennae path {
  fill: none; stroke: var(--gold-300); stroke-width: 4; stroke-linecap: round;
  transform-origin: 40px 40px;
  animation: bug-antennae .3s ease-in-out infinite alternate;
}
.bug__eye {
  fill: var(--gold-500); stroke: var(--green-900); stroke-width: 3;
  animation: bug-hit var(--cycle) linear infinite;
}

/* ---- the scope ---- */
.scope {
  width: 100%; height: 100%; overflow: visible;
  transform-origin: center;
  animation: scope-recoil var(--cycle) linear infinite;
}
.scope circle, .scope line, .scope path { fill: none; stroke: var(--gold-300); }
.scope__sweep {
  stroke-width: 1; stroke-dasharray: 3 12; opacity: .55;
  transform-origin: 100px 100px;
  animation: scope-spin 22s linear infinite;
}
.scope__ring {
  stroke-width: 1.5; opacity: .85;
  animation: scope-ring-hit var(--cycle) linear infinite;
}
/* Muzzle flash. One brief pop per 10s cycle, well under any
   photosensitivity threshold. */
.scope__flash {
  fill: var(--shot); stroke: none; opacity: 0;
  transform-origin: 100px 100px;
  animation: scope-flash var(--cycle) linear infinite;
}
.scope__ticks line { stroke-width: 2; stroke-linecap: round; opacity: .9; }
.scope__brackets path {
  stroke-width: 2; stroke-linecap: round;
  transform-origin: 100px 100px;
  animation: scope-snap var(--cycle) linear infinite;
}
.scope__ping {
  stroke-width: 1.5; opacity: 0;
  transform-origin: 100px 100px;
  animation: scope-ping var(--cycle) linear infinite;
}

/* ---- the flight path ---- */
/* Offsets are fractions of --s, so the path scales with the stage. */
@keyframes bug-flight {
  0%   { translate: calc(var(--s) *  .62) calc(var(--s) * -.38); opacity: 0; rotate: 10deg; }
  4%   { translate: calc(var(--s) *  .44) calc(var(--s) * -.32); opacity: 1; rotate: 6deg; }
  11%  { translate: calc(var(--s) *  .16) calc(var(--s) * -.06); rotate: -8deg; }
  17%  { translate: calc(var(--s) *  .32) calc(var(--s) *  .20); rotate: 7deg; }
  23%  { translate: calc(var(--s) * -.04) calc(var(--s) *  .06); rotate: -5deg; }
  29%  { translate: calc(var(--s) * -.26) calc(var(--s) * -.20); rotate: 9deg; }
  35%  { translate: calc(var(--s) * -.08) calc(var(--s) *  .24); rotate: -6deg; }
  41%  { translate: calc(var(--s) *  .22) calc(var(--s) *  .32); rotate: 4deg; }
  47%  { translate: calc(var(--s) *  .02) calc(var(--s) * -.14); rotate: -9deg; }
  52%  { translate: calc(var(--s) * -.14) calc(var(--s) *  .02); rotate: 0deg; opacity: 1; }
  62%  { translate: calc(var(--s) * -.14) calc(var(--s) *  .02); rotate: 0deg; opacity: 1; }
  65%  { translate: calc(var(--s) * -.14) calc(var(--s) *  .10); rotate: 24deg; }
  71%  { translate: calc(var(--s) * -.11) calc(var(--s) *  .62); rotate: 150deg; opacity: .8; }
  78%  { translate: calc(var(--s) * -.08) calc(var(--s) * 1.30); rotate: 280deg; opacity: .45; }
  86%  { translate: calc(var(--s) * -.06) calc(var(--s) * 2.20); rotate: 400deg; opacity: 0; }
  100% { translate: calc(var(--s) *  .62) calc(var(--s) * -.38); opacity: 0; rotate: 10deg; }
}
@keyframes bug-antennae { from { rotate: -7deg; } to { rotate: 7deg; } }

/* The scope trails the bug, then converges on it exactly at 52%. */
@keyframes scope-hunt {
  /* A tracking scope closes on its target; it does not copy the target's
     twitches. Five waypoints, monotonic in x, one easing curve throughout, so
     the approach never reverses. The bug keeps its linear zigzag. */
  0%   { translate: calc(var(--s) *  .60) calc(var(--s) * -.40); scale: 1.45; opacity: 0;
         animation-timing-function: cubic-bezier(.4, 0, .5, 1); }
  12%  { translate: calc(var(--s) *  .34) calc(var(--s) * -.18); scale: 1.28; opacity: .85;
         animation-timing-function: cubic-bezier(.4, 0, .5, 1); }
  27%  { translate: calc(var(--s) *  .16) calc(var(--s) *  .10); scale: 1.20;
         animation-timing-function: cubic-bezier(.4, 0, .5, 1); }
  40%  { translate: calc(var(--s) * -.02) calc(var(--s) *  .06); scale: 1.11;
         animation-timing-function: cubic-bezier(.35, 0, .25, 1); }
  52%  { translate: calc(var(--s) * -.14) calc(var(--s) *  .02); scale: 1; opacity: 1;
         animation-timing-function: linear; }
  80%  { translate: calc(var(--s) * -.14) calc(var(--s) *  .02); scale: 1; opacity: 1;
         animation-timing-function: ease-in; }
  88%  { translate: calc(var(--s) * -.14) calc(var(--s) *  .02); scale: 1.12; opacity: 0;
         animation-timing-function: linear; }
  100% { translate: calc(var(--s) *  .60) calc(var(--s) * -.40); scale: 1.45; opacity: 0; }
}
}
}
/* Brackets contract as the lock lands. */
@keyframes scope-snap {
  0%, 44%  { scale: 1.5; opacity: .35; }
  52%      { scale: 1; opacity: 1; }
  80%      { scale: 1; opacity: 1; }
  88%, 100%{ scale: 1; opacity: 0; }
}
/* One ping on the kill, not a heartbeat. */
@keyframes scope-ping {
  0%, 52%  { opacity: .6; scale: 1; }
  62%      { opacity: 0; scale: 1.55; }
  100%     { opacity: 0; scale: 1.55; }
}
/* ---- the shot ---- */
@keyframes scope-flash {
  0%, 51.4% { opacity: 0; scale: .3; }
  52.0%     { opacity: .9; scale: .55; }
  52.8%     { opacity: .4; scale: 1.02; }
  54.4%     { opacity: 0; scale: 1.3; }
  100%      { opacity: 0; scale: 1.3; }
}
@keyframes scope-ring-hit {
  0%, 51.4% { stroke: var(--gold-300); }
  52.0%     { stroke: var(--shot); }
  54.6%     { stroke: var(--gold-300); }
  100%      { stroke: var(--gold-300); }
}
@keyframes scope-recoil {
  0%, 51.6% { scale: 1; }
  52.2%     { scale: 1.07; }
  53.4%     { scale: .985; }
  54.8%     { scale: 1; }
  100%      { scale: 1; }
}
/* The eyes take the hit, then go dark on the way down. */
@keyframes bug-hit {
  0%, 51.6% { fill: var(--gold-500); }
  52.2%     { fill: var(--shot); }
  56%       { fill: var(--shot); }
  66%       { fill: #6b4a1c; }
  100%      { fill: var(--gold-500); }
}

@keyframes scope-spin { to { rotate: 360deg; } }

/* Under 1280px the headline runs full width; there is nowhere for the hunt to
   go without landing on the type. Better absent than crowding it. */
@media (max-width: 1279px) {
  .hero__hunt { display: none; }
}

/* Static, locked, silent. */
@media (prefers-reduced-motion: reduce) {
  .hunt__bug, .hunt__scope, .scope,
  .bug__antennae path, .bug__eye, .scope__sweep, .scope__ring,
  .scope__brackets path, .scope__ping, .scope__flash {
    animation: none;
  }
  .scope__flash { opacity: 0; }
  .hunt__bug   { translate: calc(var(--s) * -.14) calc(var(--s) * .02); opacity: 1; }
  .hunt__scope { translate: calc(var(--s) * -.14) calc(var(--s) * .02); scale: 1; opacity: 1; }
  .scope__ping { opacity: 0; }
}

/* ------------------------------------------------------- Booking widget --- */
/* Signature element: three-step "lock on the problem" quote request. */
.booker {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
}
.booker--float { margin-top: -5rem; position: relative; z-index: 5; }

.booker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.booker__head h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.booker__head p { color: var(--slate); font-size: .95rem; margin-top: .3rem; }

.booker__steps { display: flex; gap: .5rem; align-items: center; flex: none; }
.step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  background: var(--bone-2); color: var(--slate-light);
  border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s;
}
.step-dot[data-state="active"] { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.step-dot[data-state="done"] { background: var(--gold-300); color: var(--green-900); border-color: var(--gold-300); }
.step-rule { width: 18px; height: 1px; background: var(--line); }

.booker__panel { margin-top: 1.5rem; }
.booker__panel[hidden] { display: none; }
.booker__label {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-light); margin-bottom: .85rem;
}

.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  border: 1px solid var(--line);
  background: var(--bone);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  font-weight: 600; font-size: .92rem;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex; align-items: center; gap: .5rem;
}
.chip:hover { border-color: var(--green-600); background: #fff; }
.chip[aria-pressed="true"] {
  background: var(--green-700); color: #fff; border-color: var(--green-700);
}
.chip[aria-pressed="true"]::before { content: "✓"; font-size: .8rem; color: var(--gold-300); }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 620px) { .field-grid { grid-template-columns: minmax(0, 1fr); } }

.field { display: block; }
.field span {
  display: block; font-size: .82rem; font-weight: 600; color: var(--slate);
  margin-bottom: .35rem;
}
.field span b { color: var(--danger); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .78rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
  transition: border-color .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: #fff; border-color: var(--green-600); outline-offset: 0;
}
.field textarea { min-height: 130px; resize: vertical; }
.field--full { grid-column: 1 / -1; }

.booker__nav { margin-top: 1.5rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.booker__note {
  margin-left: auto; font-size: .8rem; color: var(--slate-light);
  display: flex; align-items: center; gap: .4rem;
}
@media (max-width: 620px) { .booker__note { margin-left: 0; } }

.booker__summary {
  background: var(--bone); border-left: 3px solid var(--gold-500);
  padding: 1rem 1.15rem; margin-bottom: 1.25rem;
}
.booker__summary dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .9rem; }
.booker__summary dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); padding-top: .2rem; }
.booker__summary dd { font-weight: 600; }

.booker__done { text-align: center; padding: 1.5rem 0; }
.booker__done .tick {
  width: 56px; height: 56px; margin: 0 auto 1rem;
  border-radius: 50%; background: var(--green-700);
  display: grid; place-items: center; color: var(--gold-300);
}
.booker__done h3 { margin-bottom: .5rem; }
.booker__done p { color: var(--slate); max-width: 46ch; margin-inline: auto; }

.error-msg { color: var(--danger); font-size: .85rem; font-weight: 600; margin-top: .75rem; }
.error-msg[hidden] { display: none; }

/* ----------------------------------------------------------- Trust strip -- */
.trust {
  border-block: 1px solid var(--line);
  background: var(--bone);
}
.trust .wrap {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--line);
  padding-inline: 0;
}
.trust__item {
  background: var(--bone); padding: 1.5rem clamp(1rem, 2vw, 1.5rem);
  display: flex; flex-direction: column; gap: .35rem;
}
.trust__item strong { font-family: var(--display); font-size: .98rem; color: var(--green-900); }
.trust__item span { font-size: .82rem; color: var(--slate); line-height: 1.45; }
@media (max-width: 980px) { .trust .wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust .wrap { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Pest grid --- */
.pest-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 1000px) { .pest-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .pest-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .pest-grid { grid-template-columns: repeat(2, 1fr); } }

.pest-card {
  background: #fff;
  padding: 1.5rem .75rem 1.25rem;
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  text-decoration: none; text-align: center;
  transition: background .18s ease;
}
.pest-card:hover { background: var(--bone); }
.pest-card__name {
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  color: var(--green-900); letter-spacing: -0.01em;
}
.pest-card:hover .pest-card__name { color: var(--green-600); }

/* ------------------------------------------------------------- Feature ---- */
.feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature--flip .feature__media { order: -1; }
@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature__media { order: 0; }
}
.feature__media { position: relative; }
.feature__media img { width: 100%; border-radius: var(--radius); }
.feature__badge {
  position: absolute; bottom: -18px; left: -18px;
  background: var(--gold-300); color: var(--green-900);
  padding: 1rem 1.25rem; max-width: 220px;
  box-shadow: var(--shadow-lg);
}
.feature__badge strong { display: block; font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1; }
.feature__badge span { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 900px) { .feature__badge { left: 0; } }

/* --------------------------------------------------------------- Cards ---- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }
.card h3 a { text-decoration: none; color: inherit; }
.card p { color: var(--slate); font-size: .95rem; }
.card__more {
  margin-top: auto; padding-top: .5rem;
  font-family: var(--display); font-weight: 700; font-size: .88rem;
  color: var(--green-700); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.card__more::after { content: "→"; transition: transform .18s ease; }
.card:hover .card__more::after { transform: translateX(4px); }

.card--gold { background: var(--gold-300); border-color: var(--gold-300); }
.card--gold h3, .card--gold p { color: var(--green-900); }
.card--dark { background: var(--green-800); border-color: var(--green-800); }
.card--dark h3 { color: #fff; }
.card--dark p { color: #c3cbc0; }

/* --------------------------------------------------------------- Ticks ---- */
.ticks { list-style: none; padding: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; }
.ticks li::before {
  content: "";
  flex: none;
  width: 18px; height: 18px; margin-top: .28rem;
  background: var(--gold-300);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px var(--green-700);
}
.ticks--light li { color: #d3dad0; }

/* ---------------------------------------------------------- Testimonial --- */
.quote {
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--gold-500);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.quote blockquote { font-size: 1.06rem; line-height: 1.6; color: var(--ink); }
.quote figcaption { margin-top: auto; }
.quote cite { font-style: normal; font-family: var(--display); font-weight: 700; color: var(--green-900); display: block; }
.quote figcaption span { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-light); }
.stars { color: var(--gold-500); letter-spacing: .15em; font-size: .95rem; }

/* --------------------------------------------------------------- Banner --- */
.banner {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--green-900); color: #fff;
}
.banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0, 36, 0, .93) 20%, rgba(0, 36, 0, .55) 100%);
}
.banner .wrap { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.banner__inner { max-width: 620px; }
.banner h2 { color: #fff; }
.banner p { color: #ccd4c9; margin-top: 1rem; }

/* -------------------------------------------------------------- CTA bar --- */
.cta-bar { background: var(--gold-300); }
.cta-bar .wrap {
  padding-block: clamp(2.25rem, 4vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cta-bar__text { max-width: 60ch; }
.cta-bar .eyebrow { color: var(--green-700); }
.cta-bar .eyebrow::before { background: var(--green-700); }
.cta-bar h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.cta-bar p { color: #2f3d2d; margin-top: .5rem; font-size: .98rem; }
.cta-bar .btn--green:hover { background: var(--green-900); border-color: var(--green-900); }

/* --------------------------------------------------------------- Footer --- */
.footer { background: var(--green-900); color: #a9b4a6; padding-block: clamp(3rem, 6vw, 4.5rem) 0; font-size: .92rem; }
.footer a { color: #cfd6cb; text-decoration: none; }
.footer a:hover { color: var(--gold-300); }
.footer h4 {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300);
  margin-bottom: 1.1rem;
}
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer__brand img { width: 190px; background: #fff; padding: .6rem .8rem; border-radius: var(--radius); }
.footer__brand p { margin-top: 1.1rem; max-width: 38ch; line-height: 1.6; }
.footer__motto {
  margin-top: 1.25rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300);
}
.footer__contact strong { display: block; color: #fff; font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.02em; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .82rem;
}
.footer__areas { color: #7f8c7c; font-size: .84rem; line-height: 1.7; margin-top: 1rem; }

/* ------------------------------------------------------------ Page head --- */
.pagehead {
  background: var(--green-700);
  color: #fff;
  position: relative;
  overflow: clip;
}
.pagehead::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(255deg, transparent calc(50% - 1px), rgba(255, 210, 77, .35) 50%, transparent calc(50% + 1px));
}
.pagehead .wrap { position: relative; padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.pagehead h1 { color: #fff; max-width: 20ch; }
.pagehead p { color: #cbd3c8; margin-top: 1rem; max-width: 60ch; }

.crumbs { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #9fac9c; margin-bottom: 1.25rem; }
.crumbs a { color: var(--gold-300); text-decoration: none; }
.crumbs span { padding-inline: .5rem; }

/* ------------------------------------------------------ Article + aside -- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); } }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.5rem; margin-bottom: .9rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; margin-bottom: .6rem; }
.prose p { margin-bottom: 1.05rem; color: #2c352a; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.prose ul li { display: flex; gap: .7rem; }
.prose ul li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .62rem; background: var(--gold-500); border-radius: 50%; }
.prose img { margin-block: 1.75rem; border-radius: var(--radius); }
.prose strong { color: var(--green-900); }

.callout {
  background: var(--bone); border-left: 3px solid var(--green-700);
  padding: 1.25rem 1.5rem; margin-block: 1.75rem;
}
.callout p { margin-bottom: 0; }
.callout strong { display: block; font-family: var(--display); margin-bottom: .3rem; }

.aside { position: sticky; top: 100px; display: grid; gap: 1.25rem; }
@media (max-width: 980px) { .aside { position: static; } }
.aside__card { border: 1px solid var(--line); background: #fff; padding: 1.5rem; }
.aside__card--green { background: var(--green-700); border-color: var(--green-700); color: #cbd3c8; }
.aside__card--green h3 { color: #fff; }
.aside__card--green .footer__contact strong { color: var(--gold-300); }
.aside__card h3 { font-size: 1.15rem; margin-bottom: .9rem; }
.aside__card p { font-size: .93rem; color: var(--slate); }
.aside__card--green p { color: #c3cbc0; }
.aside__phone {
  display: block; font-family: var(--display); font-size: 1.75rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--gold-300); text-decoration: none; margin-block: .3rem .9rem;
}
.aside__phone:hover { color: #fff; }

.aside .ticks li { font-size: .92rem; }

/* --------------------------------------------------------------- Gallery -- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery figure {
  margin: 0; border: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column;
}
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding: .9rem 1.05rem; font-size: .85rem; line-height: 1.5; color: var(--slate); }
.gallery figcaption strong { display: block; color: var(--green-900); font-family: var(--display); margin-bottom: .25rem; }

/* The termite post is a portrait shot: one column, two rows tall. */
.gallery figure.tall { grid-row: span 2; }
.gallery figure.tall img { aspect-ratio: 3 / 4; flex: 1 1 auto; min-height: 0; object-position: 50% 40%; }
/* The fleet line-up and the slab are landscape: let them run two columns. */
.gallery figure.wide { grid-column: span 2; }
.gallery figure.wide img { aspect-ratio: 16 / 9; }

@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure.tall { grid-row: span 1; }
  .gallery figure.tall img { aspect-ratio: 3 / 4; flex: none; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery figure.wide { grid-column: span 1; }
  .gallery figure.tall img, .gallery figure.wide img { aspect-ratio: 4 / 3; }
}

/* ----------------------------------------------------------------- Blog --- */
.post { border-bottom: 1px solid var(--line); padding-block: 1.75rem; display: grid; gap: .6rem; }
.post:first-of-type { padding-top: 0; }
.post__meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }
.post h3 a { color: var(--green-900); text-decoration: none; }
.post h3 a:hover { color: var(--green-600); }
.post p { color: var(--slate); }

/* ------------------------------------------------------------ Mobile bar -- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 -6px 20px rgba(0, 36, 0, .12);
}
.callbar a {
  padding: .95rem .5rem; text-align: center; text-decoration: none;
  font-family: var(--display); font-weight: 700;
  /* Must not wrap: a second line makes the bar taller than the padding that
     body reserves for it, and the footer disappears behind it. */
  font-size: clamp(.8rem, 3.4vw, .95rem);
  white-space: nowrap;
}
.callbar a:first-child { background: var(--green-700); color: #fff; }
.callbar a:last-child { background: var(--gold-300); color: var(--green-900); }
@media (max-width: 780px) {
  .callbar { display: grid; }
  body { padding-bottom: 56px; }
}

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

/* -------------------------------------------------------------- Helpers --- */
.center { text-align: center; margin-inline: auto; }
.mt-2 { margin-top: 2rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------- Demo watermark (BWB) --- */
/* Applied to every page except the home page. Purely decorative: it never
   intercepts a click, and it is dropped from print output. */
.demo-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27220%27%3E%3Ctext%20x%3D%270%27%20y%3D%27120%27%20transform%3D%27rotate%28-24%20150%20110%29%27%20font-family%3D%27IBM%20Plex%20Mono%2C%20monospace%27%20font-size%3D%2715%27%20letter-spacing%3D%273%27%20fill%3D%27%2523002400%27%3EBWB%20STUDIOS%20%26%23183%3B%20DEMO%20SITE%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 300px 220px;
}
.demo-badge {
  position: fixed;
  left: clamp(.75rem, 2vw, 1.25rem);
  bottom: clamp(.75rem, 2vw, 1.25rem);
  z-index: 66;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .4rem .95rem .4rem .4rem;
  background: #111;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
.demo-badge img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.demo-badge span { display: flex; flex-direction: column; line-height: 1.15; }
.demo-badge strong {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.demo-badge em {
  font-style: normal;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-300);
}

@media (max-width: 780px) {
  /* Clear the sticky call bar (56px). */
  .demo-badge { bottom: calc(56px + .75rem); }
}
@media print {
  .demo-overlay, .demo-badge { display: none; }
}