/* ================================================================
   COMPONENTS — patterns lifted structurally from the reference:
   photo-led hero, circular-photo service cards, translucent feature
   cards on a photo band, pest-ID circles, numbered process chips,
   floating rating cards, photo-overlay blog cards.
   ================================================================ */

/* ---------- Photo slots (see partials/media.php) ---------- */
.photo { margin: 0; overflow: hidden; border-radius: var(--radius-lg); position: relative; background: var(--color-forest-800); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--placeholder {
  background:
    radial-gradient(120% 90% at 20% 10%, var(--color-forest-700), transparent 60%),
    linear-gradient(150deg, var(--color-forest-800), var(--color-forest-950));
  display: flex; align-items: center; justify-content: center;
}
.photo--placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 20px);
}
.photo__glyph { width: 34%; color: var(--color-lime-500); opacity: .5; }
.photo__glyph svg { width: 100%; height: auto; }
.photo--circle { border-radius: 50%; }

/* ---------- Icon badge — solid lime circle, deep-forest glyph ----------
   The glyph colour is HARD-CODED, not var(--color-ink): inside .on-dark
   sections that token flips to white, which put a white icon on a lime
   circle (≈1.3:1 contrast — effectively invisible). Forest-on-lime is
   ~8.9:1 and stays correct on light and dark surfaces alike. */
/* Selector is deliberately doubled (.icon-badge.icon-badge) to raise its
   specificity to 0,2,0. The badge is a <span>, so ANY component rule of the
   form `.parent span { ... }` (0,1,1) would otherwise outrank it — that
   happened six separate times (on-dark text, footer contact, trust strip,
   floating card, facts row, quick facts), each time forcing display:block
   which killed the flex centring and dumped the glyph in the top-left corner,
   and/or repainting it grey or white. Doubling the class ends that class of
   bug at the source instead of patching each new occurrence. */
.icon-badge,
.icon-badge.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: var(--radius-full);
  background: var(--color-lime-500);
  color: #06281C;
  flex-shrink: 0;
  line-height: 0;
}
.icon-badge svg { width: 28px; height: 28px; display: block; }
/* Raster icon illustrations (see partials/media.php icon_img) fill the whole
   badge: they're generated on the same flat lime as the badge, so edge-to-edge
   is seamless and the artwork keeps its own optical margin. */
.icon-badge .icon-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.icon-badge--sm, .icon-badge--sm.icon-badge--sm { width: 48px; height: 48px; }
.icon-badge--sm svg { width: 22px; height: 22px; }
.icon-badge--lg, .icon-badge--lg.icon-badge--lg { width: 76px; height: 76px; }
.icon-badge--lg svg { width: 34px; height: 34px; }
/* Inverse: deep circle + lime glyph, for use directly on a lime surface. */
.icon-badge--dark { background: var(--color-forest-900); color: var(--color-lime-500); }
.icon-badge--outline { background: transparent; border: 1px solid rgba(255,255,255,.25); color: var(--color-lime-500); }


/* ================= HERO ================= */
.hero { position: relative; min-height: 640px; display: flex; align-items: center; }
/* .hero is a flex container, so its .container child is a flex item and would
   shrink-to-fit around the 620px text block — `margin-inline:auto` then centred
   it, pushing the headline ~340px right of every other section on the page.
   width:100% restores normal container behaviour so the hero aligns with the
   trust strip, about split, and all following sections. */
.hero > .container { width: 100%; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg .photo { height: 100%; border-radius: 0; }
/* Dark scrim so the headline stays legible over any photograph. */
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(3,63,45,.94) 0%, rgba(3,63,45,.82) 38%, rgba(3,63,45,.35) 70%, rgba(3,63,45,.25) 100%);
}
/* Header overlays this (sticky + transparent), so pad past it. */
.hero__content { position: relative; max-width: 620px; padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--space-9); }
.hero h1 { font-size: var(--fs-h1); margin-bottom: var(--space-5); }
.hero__lede { font-size: var(--fs-body); max-width: 52ch; margin-bottom: var(--space-7); color: rgba(255,255,255,.85); }
.hero__features { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-bottom: var(--space-7); }
.hero__feature { display: flex; align-items: center; gap: var(--space-4); font-weight: var(--fw-bold); color: #fff; max-width: 250px; }
.hero__divider { height: 1px; background: rgba(255,255,255,.18); margin-bottom: var(--space-7); }
.hero__actions { display: flex; align-items: center; gap: var(--space-7); flex-wrap: wrap; }

.play-btn { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-bold); color: #fff; }
.play-btn__circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-lime-500); color: var(--color-forest-900);
  transition: transform var(--dur-fast) var(--ease-out);
}
.play-btn:hover .play-btn__circle { transform: scale(1.08); }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__content { padding-top: calc(var(--header-h) + var(--space-6)); padding-bottom: var(--space-8); }
  .hero__bg::after { background: linear-gradient(180deg, rgba(3,63,45,.9), rgba(3,63,45,.75)); }
}

/* ================= TRUST / LOGO STRIP (white rounded pill) ================= */
/* Stacked and centred: the tagline never fitted beside the four stat items at
   any real viewport, so it always wrapped onto its own row and sat hard left.
   Centring the column reads as a deliberate banner instead of a broken row. */
.trust-strip {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
  margin-top: calc(var(--frame-gap) * -1 - 28px);
  position: relative; z-index: 5;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.trust-strip__lead {
  font-weight: var(--fw-bold);
  color: var(--color-forest-900);
  max-width: 46ch;
  font-size: var(--fs-lede);
  text-align: center;
}
.trust-strip__items {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-7); flex-wrap: wrap; width: 100%;
}
.trust-strip__item { text-align: left; }
.trust-strip__item { display: flex; align-items: center; gap: var(--space-3); }
.trust-strip__item .icon-badge { width: 38px; height: 38px; }
.trust-strip__item .icon-badge svg { width: 19px; height: 19px; }
.trust-strip__item strong { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--color-forest-900); display: block; line-height: 1.2; }
/* `> div span`, not a bare `span`: .icon-badge is a sibling <span> here and a
   loose descendant selector would outrank .icon-badge's own colour. */
.trust-strip__item > div span { font-size: var(--fs-micro); color: var(--color-ink-soft); }

/* ================= ABOUT — layered photo collage + stat card ================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; }
.split--wide-right { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 950px) { .split, .split--wide-right { grid-template-columns: 1fr; gap: var(--space-7); } }

.collage { position: relative; padding-bottom: var(--space-8); padding-left: var(--space-8); }
.collage__main { border-radius: var(--radius-lg); overflow: hidden; }
.collage__sub {
  position: absolute; left: 0; bottom: 0;
  width: 52%;
  border: 8px solid var(--color-paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
@media (max-width: 950px) { .collage { max-width: 520px; margin-inline: auto; } }

.about-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-6);
  align-items: center;
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-6);
}
@media (max-width: 600px) { .about-card { grid-template-columns: 1fr; } }
.about-card__stat { font-family: var(--font-display); font-size: 2.75rem; font-weight: var(--fw-bold); color: var(--color-forest-900); line-height: 1; margin-top: var(--space-4); }
.about-card__stat + p { font-size: var(--fs-small); margin-top: var(--space-2); }

.check-list { display: flex; flex-direction: column; gap: var(--space-3); }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-small); color: var(--color-ink); }
.check-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-lime-600); margin-top: 1px; }
.on-dark .check-list li { color: rgba(255,255,255,.85); }

/* ================= SERVICE CARDS — circular photo + overlapping lime icon ================= */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1050px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid, .card-grid--3 { grid-template-columns: 1fr; } }

.service-card {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.shell--paper2 .service-card, .section--paper2 .service-card { background: var(--color-surface); }
.service-card:hover { transform: translateY(-4px); }
.service-card__media { position: relative; width: 132px; margin-bottom: var(--space-6); }
.service-card__media .photo { border-radius: 50%; aspect-ratio: 1; }
.service-card__media .icon-badge {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px;
  border: 4px solid var(--color-paper);
}
.shell--paper2 .service-card__media .icon-badge, .section--paper2 .service-card__media .icon-badge { border-color: var(--color-surface); }
.service-card__media .icon-badge svg { width: 20px; height: 20px; }
.service-card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); color: var(--color-forest-900); }
.service-card p { font-size: var(--fs-small); flex: 1; margin-bottom: var(--space-5); }
.service-card__includes { font-size: var(--fs-micro); color: var(--color-ink-soft); margin-top: calc(var(--space-5) * -1); margin-bottom: var(--space-5); }
.service-card__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-forest-900);
  border-top: 1px solid var(--color-border);
  width: 100%; justify-content: center; padding-top: var(--space-5);
}
.service-card__link svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.service-card:hover .service-card__link svg { transform: translateX(4px); }
.service-card__link:hover { color: var(--color-lime-800); }

/* Rating row under a card grid: avatar cluster + stars. */
.rating-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-7); text-align: center; }
.rating-row__lead { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); flex-wrap: wrap; justify-content: center; }
.rating-row__lead a { color: var(--color-lime-800); font-weight: var(--fw-bold); text-decoration: underline; }
.avatar-cluster { display: flex; }
.avatar-cluster > * { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-paper); margin-left: -8px; }
.avatar-cluster > *:first-child { margin-left: 0; }
.stars { display: inline-flex; gap: 2px; color: var(--color-lime-600); }
.stars svg { width: 16px; height: 16px; }
.rating-row__score { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-bold); color: var(--color-forest-900); }

/* ================= WHY US — features + technician quote + collage/stat ================= */
.feature-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-block: var(--space-6); }
@media (max-width: 600px) { .feature-pair { grid-template-columns: 1fr; } }
.feature-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.feature-item h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); color: var(--color-forest-900); }
.feature-item p { font-size: var(--fs-small); }
.on-dark .feature-item h3 { color: #fff; }

.quote-person { display: flex; gap: var(--space-4); align-items: flex-start; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.quote-person .photo { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; }
.quote-person h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); color: var(--color-forest-900); }
.quote-person p { font-size: var(--fs-small); font-style: italic; }

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.stat-card strong { display: block; font-family: var(--font-display); font-size: 2.25rem; font-weight: var(--fw-bold); color: var(--color-forest-900); line-height: 1; }
.stat-card span { font-size: var(--fs-small); color: var(--color-ink-soft); }

.collage-grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto auto; gap: var(--space-5); align-items: end; }
.collage-grid > :first-child { grid-row: 1 / 3; }
@media (max-width: 600px) { .collage-grid { grid-template-columns: 1fr; } .collage-grid > :first-child { grid-row: auto; } }

/* ================= CORE FEATURES — translucent cards on a photo band ================= */
.feature-band { position: relative; }
.feature-band__bg { position: absolute; inset: 0; }
.feature-band__bg .photo { height: 100%; border-radius: 0; }
.feature-band__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,63,45,.93), rgba(2,32,24,.96)); }
.feature-band__inner { position: relative; }
.glass-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 1050px) { .glass-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .glass-grid { grid-template-columns: 1fr; } }
.glass-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  backdrop-filter: blur(6px);
}
.glass-card .icon-badge { margin-bottom: var(--space-5); }
.glass-card h3 { font-size: var(--fs-h3); color: #fff; margin-bottom: var(--space-3); }
.glass-card > p { font-size: var(--fs-small); color: rgba(255,255,255,.75); margin-bottom: var(--space-5); }

.band-caption { text-align: center; color: #fff; font-weight: var(--fw-bold); margin-top: var(--space-8); margin-bottom: var(--space-6); }
.assurance-row { display: flex; align-items: center; justify-content: center; gap: var(--space-8); flex-wrap: wrap; }
.assurance-row__item { display: flex; align-items: center; gap: var(--space-3); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-small); }
.assurance-row__item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-lime-500); }
/* Same item used on light surfaces (e.g. the process section) needs a legible tick colour. */
.assurance-row__item:not(.on-dark *) svg { color: var(--color-lime-600); }

/* ================= PEST ID — circular photo w/ lime "no" slash ================= */
.pest-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .pest-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .pest-strip { grid-template-columns: repeat(2, 1fr); } }
.pest-chip { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.pest-chip__media { position: relative; width: 100%; max-width: 150px; }
.pest-chip__media .photo { border-radius: 50%; aspect-ratio: 1; }
/* The lime prohibition ring + diagonal slash, drawn in CSS over the photo.
   z-index is required: the .photo figure is positioned, so without it the
   photo paints over both pseudo-elements and the ring disappears. */
.pest-chip__media::before,
.pest-chip__media::after { content: ''; position: absolute; pointer-events: none; z-index: 2; }
.pest-chip__media::before {
  inset: 0; border-radius: 50%;
  border: 3px solid var(--color-lime-500);
}
.pest-chip__media::after {
  top: 50%; left: 0; right: 0; height: 3px;
  background: var(--color-lime-500);
  transform: rotate(-45deg);
}
.pest-chip span { font-weight: var(--fw-bold); color: var(--color-forest-900); font-size: var(--fs-small); }
.pest-chip:hover .pest-chip__media::before { border-color: var(--color-lime-600); }

/* Facts row */
/* Sits between two dense rows, so it needs more air than a normal h3 around
   the block itself — the word-spacing fix that used to live here was purely
   a Clash Display (narrow space glyph) compensation, gone with that font. */
.facts-head {
  text-align: center;
  font-weight: var(--fw-bold);
  color: var(--color-forest-900);
  margin-block: var(--space-9) var(--space-7);
  position: relative;
}
.facts-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .facts-row { grid-template-columns: repeat(2, 1fr); } }
.fact { display: flex; align-items: center; gap: var(--space-4); }
/* Forest, not lime: these sit bare on the light paper background where
   lime-600 washes out to ~2:1. */
.fact__icon { width: 52px; height: 52px; color: var(--color-forest-700); flex-shrink: 0; line-height: 0; }
.fact__icon svg, .fact__icon .icon-img { width: 100%; height: 100%; display: block; }
.fact strong { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: var(--fw-bold); color: var(--color-forest-900); line-height: 1; }
/* `> div span`: .fact__icon is a sibling <span>, and a bare `.fact span`
   (0,1,1) outranks it (0,1,0) — that painted every facts icon grey. */
.fact > div span { font-size: var(--fs-small); color: var(--color-ink-soft); }

/* ================= PROCESS — four numbered cards, full container width ================= */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-8); }
/* The brochure process runs to five steps. Its own modifier so the four-across
   grid used elsewhere is untouched. */
.process-grid--5 { grid-template-columns: repeat(5, 1fr); }
.process-step { background: var(--color-paper); border-radius: var(--radius-lg); padding: var(--space-6); }
.shell--surface .process-step { background: var(--color-paper); }
/* Step 04 closes the sequence — tinted so it reads as the outcome, not a 4th
   identical box (replaces the floating card that used to sit over the photo). */
.process-step--accent { background: var(--color-lime-100); }
.process-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--color-lime-500); color: var(--color-forest-900);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  margin-bottom: var(--space-5);
}
/* Titles are short by design and must not wrap — the card is sized to fit them. */
.process-step h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); color: var(--color-forest-900); white-space: nowrap; }
.process-grid--5 .process-step h3 { white-space: normal; }
.process-step p { font-size: var(--fs-small); }

.media-with-card { position: relative; }
.floating-card {
  position: absolute; left: var(--space-5); bottom: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  min-width: 250px;
}
.floating-card__row { display: flex; align-items: center; gap: var(--space-3); }
.floating-card__score { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.25rem; color: var(--color-forest-900); }
.floating-card__people { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
/* Excludes .icon-badge for the same specificity reason as .trust-strip__item. */
.floating-card__people span:not(.icon-badge) { font-size: var(--fs-micro); color: var(--color-ink-soft); }
.avatar-cluster__more {
  width: 30px; height: 30px; border-radius: 50%; margin-left: -8px;
  background: var(--color-lime-500); color: var(--color-forest-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: var(--fw-bold);
  border: 2px solid var(--color-surface);
}
@media (max-width: 600px) { .floating-card { position: static; margin-top: var(--space-5); } }

/* ================= QUOTE BAND (our honest alternative to fake pricing) ================= */
.quote-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
@media (max-width: 900px) { .quote-band { grid-template-columns: 1fr; } }
.quote-points { display: flex; flex-direction: column; gap: var(--space-5); }
.quote-point { display: flex; gap: var(--space-4); }
.quote-point h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); color: var(--color-forest-900); }
.quote-point p { font-size: var(--fs-small); }
.assure-row { display: flex; justify-content: center; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-7); }
.assure-row__item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); color: var(--color-ink-soft); }
.assure-row__item svg { width: 20px; height: 20px; color: var(--color-lime-600); }

/* ================= TESTIMONIAL CAROUSEL =================
   No photos in the avatar slot (client's own instruction) — an icon badge
   stands in instead, same treatment as everywhere else on the site. Ratings
   render for every card since the design calls for them, but the section
   carries a visible note that these are illustrative pending real reviews —
   see config/testimonials.php for the content-honesty reasoning. */
.testimonial-carousel { position: relative; margin-top: var(--space-8); }
.testimonial-carousel__track {
  display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--space-2) var(--space-2) var(--space-6);
  scrollbar-width: none;
}
.testimonial-carousel__track::-webkit-scrollbar { display: none; }
.testimonial-card {
  scroll-snap-align: start; flex: 0 0 calc(25% - var(--space-5) * 3 / 4);
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
@media (max-width: 1150px) { .testimonial-card { flex-basis: calc(50% - var(--space-5) / 2); } }
@media (max-width: 640px) { .testimonial-card { flex-basis: 88%; } }
.testimonial-card__mark { color: var(--color-lime-500); margin-bottom: var(--space-4); }
.testimonial-card__mark svg { width: 34px; height: 34px; }
.testimonial-card__quote { font-size: var(--fs-small); line-height: 1.65; color: var(--color-ink); flex-grow: 1; }
.testimonial-card__stars { display: flex; gap: 3px; margin-top: var(--space-5); color: var(--color-lime-600); }
.testimonial-card__stars svg { width: 16px; height: 16px; }
.testimonial-card__foot {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border);
}
.testimonial-card__foot .icon-badge { flex-shrink: 0; }
.testimonial-card__name { font-weight: var(--fw-bold); color: var(--color-forest-900); display: block; }
.testimonial-card__role { font-size: var(--fs-micro); color: var(--color-ink-soft); }

/* Floating prev/next circles, vertically centred over the track — hidden on
   touch devices, which already scroll the track natively by swipe. */
.testimonial-carousel__arrow {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 42%; translate: 0 -50%;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-surface); box-shadow: var(--shadow-md);
  color: var(--color-forest-900); z-index: 2;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.testimonial-carousel__arrow:hover { background: var(--color-lime-500); }
.testimonial-carousel__arrow svg { width: 20px; height: 20px; }
.testimonial-carousel__arrow--prev { left: -24px; }
.testimonial-carousel__arrow--prev svg { transform: scaleX(-1); } /* icon('arrow') points right by default */
.testimonial-carousel__arrow--next { right: -24px; }
@media (max-width: 900px) { .testimonial-carousel__arrow { display: none; } }

.testimonial-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.testimonial-carousel__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-border);
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.testimonial-carousel__dot.is-active { background: var(--color-forest-900); width: 22px; border-radius: 4px; }

/* Photo gallery carousel — same scroll-snap/arrows/dots mechanism as the
   testimonial carousel above (see main.js initCarousel(), which is generic
   and drives whichever one of these exists on the page), just with plain
   photo() figures as slides instead of quote cards. Used for e.g. the
   Cockroach Control "Monitoring traps" gallery. */
.gallery-carousel { position: relative; margin-top: var(--space-5); }
.gallery-carousel__track {
  display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--space-2) var(--space-2) var(--space-5);
  scrollbar-width: none;
}
.gallery-carousel__track::-webkit-scrollbar { display: none; }
.gallery-carousel__track .photo {
  scroll-snap-align: start; flex: 0 0 calc(50% - var(--space-4) / 2); margin: 0;
}
@media (max-width: 640px) { .gallery-carousel__track .photo { flex-basis: 82%; } }
.gallery-carousel .testimonial-carousel__arrow--prev { left: -20px; }
.gallery-carousel .testimonial-carousel__arrow--next { right: -20px; }

.testimonial-note { text-align: center; font-size: var(--fs-micro); color: var(--color-ink-mute); margin-top: var(--space-5); }

/* Perks band underneath — light lime, same family as .assurance-row used
   elsewhere but built for a LIGHT background instead of dark (that one flips
   text/icon colours the wrong way for this context). */
.testimonial-perks {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-6) var(--space-8);
  background: var(--color-lime-100); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7); margin-top: var(--space-7);
}
.testimonial-perks__item { display: flex; align-items: center; gap: var(--space-4); }
.testimonial-perks__item .icon-badge { flex-shrink: 0; }
.testimonial-perks__item strong { display: block; font-size: var(--fs-small); color: var(--color-forest-900); line-height: 1.3; }
/* Stacked (1-up) view: `flex-wrap` centering each item independently by its
   own content width put every icon at a different x depending on how long
   that row's text was, instead of one shared column — a plain column with
   items pinned to a common left edge fixes it. */
@media (max-width: 640px) {
  .testimonial-perks { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
}

/* ========= MEDIA CARD — photo card with overlaid title (used by the
   locations teaser; formerly the blog teaser) ========= */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .media-grid { grid-template-columns: 1fr; } }
.media-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; display: block; }
.media-card .photo { border-radius: 0; aspect-ratio: 4/3.4; }
.media-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(2,32,24,.85) 100%);
}
.media-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6); z-index: 2; }
.media-card h3 { font-size: var(--fs-h3); color: #fff; margin-bottom: var(--space-4); }
.media-card__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-bold); color: #fff; }
.media-card__link svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.media-card:hover .media-card__link svg { transform: translateX(4px); }
.media-card__meta { font-size: var(--fs-micro); color: var(--color-lime-500); margin-bottom: var(--space-2); font-weight: var(--fw-medium); }

/* ================= CTA BAND ================= */
.cta-band {
  --cta-pad: var(--space-8);
  background: var(--color-lime-500);
  border-radius: var(--radius-lg);
  padding: var(--cta-pad);
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: var(--space-6);
  overflow: hidden;
}
.cta-band__copy { min-width: 0; }
.cta-band__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
/* Illustration is generated on the same flat lime as the band, so it needs no
   cut-out — it simply bleeds into the panel. Decorative only (alt=""). */
.cta-band__art {
  width: 100%; height: auto; display: block;
  margin: calc(var(--cta-pad) * -1) calc(var(--cta-pad) * -1) calc(var(--cta-pad) * -1) 0;
  max-width: none;
}
.cta-band h2 { color: var(--color-forest-900); max-width: 16ch; font-size: clamp(1.75rem, 2vw + 1rem, 2.6rem); }
.cta-band .btn--accent { background: var(--color-forest-900); color: var(--color-lime-500); box-shadow: none; }
.cta-band .btn--accent:hover { background: var(--color-forest-800); }
.cta-band .btn--accent::after {
  background-color: var(--color-lime-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13m0 0-5-5m5 5-5 5' stroke='%23033F2D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cta-band .btn--outline { border-color: rgba(3,63,45,.3); color: var(--color-forest-900); }

/* ================= FAQ ================= */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 820px; margin-inline: auto; }
.faq-item { border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.shell--surface .faq-item { background: var(--color-paper); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--fw-bold); color: var(--color-forest-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--color-lime-800); flex-shrink: 0; line-height: 1; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding: 0 var(--space-6) var(--space-5); font-size: var(--fs-small); }

/* ================= BREADCRUMB / PAGE HEADER ================= */
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: rgba(255,255,255,.6); padding-bottom: var(--space-8); flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,.6); }
.breadcrumb a:hover { color: var(--color-lime-500); }
.breadcrumb__sep { opacity: .5; }
.breadcrumb__current { color: var(--color-lime-500); font-weight: var(--fw-medium); }

.page-header { position: relative; padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--space-8); text-align: center; }
.page-header h1 { max-width: 24ch; margin-inline: auto; }
.page-header p { max-width: 62ch; margin: var(--space-4) auto 0; color: rgba(255,255,255,.8); }
.page-header .breadcrumb { justify-content: center; padding-bottom: 0; padding-top: var(--space-5); }

/* ================= CONTACT ================= */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-info__item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); }
.contact-info__item h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); color: var(--color-forest-900); }
.contact-info__item p, .contact-info__item a { font-size: var(--fs-small); }
.form-success { display: none; background: var(--color-lime-100); color: var(--color-lime-800); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-weight: var(--fw-bold); margin-bottom: var(--space-5); }
.form-success.is-visible { display: block; }

/* ---------- Reveal-on-scroll ----------
   [data-reveal] carries NO hidden-by-default CSS on purpose: content must
   render fully visible if JS never runs (SEO + accessibility). main.js
   sets the initial hidden state via gsap.set() only once GSAP has loaded. */

/* ================================================================
   SERVICE DETAIL PAGE — sectioned template (reference build:
   /services/cockroach-control/). Services without the rich data
   fields fall back to .prose + .service-aside only.
   ================================================================ */

.split--wide-left { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 950px) { .split--wide-left { grid-template-columns: 1fr; } }

/* Long-form copy coming from config as raw HTML. */
.prose p { margin-bottom: var(--space-5); font-size: var(--fs-body); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--fs-h2); margin-block: var(--space-7) var(--space-4); }
.prose ul { margin-bottom: var(--space-5); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-3); color: var(--color-ink-soft); }

/* Quick facts — small labelled stats under the overview copy. */
.quick-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 560px) { .quick-facts { grid-template-columns: 1fr; } }
.quick-fact { display: flex; align-items: center; gap: var(--space-4); }
.quick-fact > div { min-width: 0; }
/* `> div span`: the badge is a sibling <span> — see the .icon-badge note. */
.quick-fact > div span { display: block; font-size: var(--fs-micro); color: var(--color-ink-soft); }
.quick-fact strong { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--color-forest-900); }

/* Sub-service breakdown: each sub-service (Bird Control -> Netting/Grill/
   Spike, Mosquito Control -> Larvicidal/Adulticidal/Fogging, Termite Control
   -> Reticulation/Drilling) gets its own H2 section with a full-width photo,
   see pages/services/show.php. */
.svc-subtype__freq {
  display: inline-block; margin-left: var(--space-2);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  color: var(--color-forest-800); background: var(--color-lime-100);
  padding: 2px 9px; border-radius: 999px; vertical-align: middle;
}

.svc-subsection__media { margin: var(--space-5) 0; }
.svc-subsection__media .photo { border-radius: var(--radius-lg); }
/* Square/portrait photos would look stretched and heavy running the full
   text column width, so they run narrower and centred instead — landscape
   photos (the default) fill the column like every other section photo. */
.svc-subsection__media--narrow { max-width: 420px; margin-inline: auto; }

/* Sidebar: photo + booking card. Sticks on desktop so the CTA stays reachable
   through the long-form sections. */
.service-aside { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 951px) { .service-aside { position: sticky; top: var(--space-6); } }
.booking-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start;
}
.booking-card h3 { font-size: var(--fs-h3); }
.booking-card p { font-size: var(--fs-small); }
.booking-card .btn { width: 100%; }

/* Warning-sign cards. */
.sign-card {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.sign-card h3 { font-size: var(--fs-h3); }
.sign-card p { font-size: var(--fs-small); }

/* Numbered step list (vertical — distinct from the homepage's 4-across grid). */
.step-list { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); list-style: none; padding: 0; }
.step-list li { display: flex; gap: var(--space-5); align-items: flex-start; }
.step-list__num {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-full);
  background: var(--color-lime-500); color: var(--color-forest-900);
  font-family: var(--font-display); font-weight: var(--fw-bold);
}
.step-list h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.step-list p { font-size: var(--fs-small); }

/* Educational diagram (bed bug lifecycle, rat control techniques, etc.) —
   unlike .photo, this must never crop: the value is entirely in the labelled
   panels, so it renders at its own aspect ratio instead of a forced box. */
.svc-infographic {
  display: block; width: 100%; max-width: 640px; height: auto;
  margin: var(--space-6) auto 0; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Callout — the honest "when we'd recommend something else" note. */
.callout {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-lime-100);
  color: var(--color-forest-900);
  font-size: var(--fs-small);
}

/* Chip rows — "suited for" and the service-area link row. */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.chip svg { width: 18px; height: 18px; color: var(--color-lime-500); flex-shrink: 0; }
.chip-row--light .chip {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-forest-900);
}
.chip-row--light .chip svg { color: var(--color-lime-600); }
.chip--link { transition: border-color var(--dur-fast), transform var(--dur-fast); }
.chip--link:hover { border-color: var(--color-lime-500); transform: translateY(-2px); }

/* check-list on this page wraps its text in a span for alignment */
.check-list li span { flex: 1; }

/* Top-aligned split. Default .split centres items vertically, which strands a
   short copy column halfway down beside a tall sticky sidebar. */
.split--top { align-items: start; }

/* ---------- Nearby branches (location sidebar) ----------
   Was a bare bulleted <ul> of links; now tappable rows with a pin badge and a
   trailing arrow so it reads as navigation, not body copy. */
.nearby { margin-top: var(--space-6); }
.nearby h3 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.nearby__list { display: flex; flex-direction: column; gap: var(--space-3); }
.nearby__item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.nearby__item:hover { border-color: var(--color-lime-500); transform: translateX(3px); box-shadow: var(--shadow-sm); }
.nearby__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nearby__text strong { font-family: var(--font-display); font-size: var(--fs-body); color: var(--color-forest-900); }
.nearby__text small { font-size: var(--fs-micro); color: var(--color-ink-soft); }
.nearby__item > svg { width: 18px; height: 18px; color: var(--color-lime-800); flex-shrink: 0; transition: transform var(--dur-fast); }
.nearby__item:hover > svg { transform: translateX(3px); }

/* ================================================================
   SERVICE DETAIL — reference layout: photo hero with left-aligned
   title, then a sticky nav+contact sidebar beside the main column.
   ================================================================ */

.svc-hero { position: relative; }
.svc-hero__bg { position: absolute; inset: 0; }
.svc-hero__bg .photo { height: 100%; border-radius: 0; }
.svc-hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3,63,45,.95) 0%, rgba(3,63,45,.85) 45%, rgba(3,63,45,.45) 100%);
}
.svc-hero__inner {
  position: relative;
  padding-top: calc(var(--header-h) + var(--space-7));
  padding-bottom: var(--space-8);
}
.svc-hero__inner h1 { margin-top: var(--space-4); max-width: 18ch; }
.svc-hero__inner .breadcrumb { padding-top: var(--space-5); padding-bottom: 0; }

/* Sidebar + main */
.svc-layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 1024px) { .svc-layout { grid-template-columns: 1fr; } .svc-sidebar { order: 2; } }
.svc-sidebar { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 1025px) { .svc-sidebar { position: sticky; top: var(--space-5); } }

/* "Explore Our Services" nav card */
.svc-nav { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.svc-nav__head {
  background: var(--color-lime-500); color: var(--color-forest-900);
  font-size: var(--fs-h3); padding: var(--space-5) var(--space-6); margin: 0;
}
/* Dividers are drawn on the <a> so they span the full card width; the row
   padding lives there too rather than being split between ul/li/a. */
.svc-nav ul { padding: 0 var(--space-5); }
.svc-nav li + li a { border-top: 1px solid var(--color-border); }
.svc-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0;
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-ink);
  line-height: 1.35;
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}
.svc-nav a svg { width: 17px; height: 17px; color: var(--color-lime-800); flex-shrink: 0; transition: transform var(--dur-fast); }
.svc-nav a:hover { color: var(--color-lime-800); padding-left: var(--space-4); }
.svc-nav a:hover svg { transform: translateX(3px); }
.svc-nav a.is-current { color: var(--color-forest-900); font-weight: var(--fw-bold); }


/* Main column */
.svc-main__hero { border-radius: var(--radius-lg); margin-bottom: var(--space-7); }
.svc-main > p { font-size: var(--fs-body); margin-bottom: var(--space-5); }
.svc-h2 { font-size: var(--fs-h2); margin-top: var(--space-8); margin-bottom: var(--space-4); }
.svc-main .prose p { font-size: var(--fs-body); }

.svc-split { display: grid; grid-template-columns: 1fr .8fr; gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
@media (max-width: 760px) { .svc-split { grid-template-columns: 1fr; } }
/* Services with no matching real close-up photo (see pages/services/show.php)
   skip the image slot rather than show the placeholder glyph box — the sign
   list runs full width and its rows pair up two-across instead of stacking
   as one long single column. */
.svc-split--full { grid-template-columns: 1fr; }
.svc-split--full .sign-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); }
@media (max-width: 640px) { .svc-split--full .sign-list { grid-template-columns: 1fr; } }
.sign-list { display: flex; flex-direction: column; gap: var(--space-5); }
.sign-row { display: flex; gap: var(--space-4); align-items: flex-start; }
.sign-row h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.sign-row p { font-size: var(--fs-small); }

/* auto-fit, not a fixed 3: services define their own number of steps (cockroach
   has 4), and a hardcoded 3-column grid left the last card orphaned on its own
   row. This keeps any count evenly distributed. */
.svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: var(--space-5); margin-top: calc(var(--space-6) + 14px); }
@media (max-width: 560px) { .svc-steps { grid-template-columns: 1fr; gap: var(--space-7); } }
.svc-step {
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.svc-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: var(--radius-full);
  background: var(--color-lime-500); color: var(--color-forest-900);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.15rem;
  margin-top: calc(var(--space-6) * -1 - 14px);
  border: 5px solid var(--color-paper);
}
.svc-step h3 { font-size: var(--fs-h3); }
.svc-step p { font-size: var(--fs-small); }

.svc-check { margin-top: var(--space-5); gap: var(--space-4); }
.chip-row--start { justify-content: flex-start; }
.faq-list--full { max-width: none; margin-top: var(--space-5); }
/* Open FAQ item is highlighted, matching the reference's active-question state. */
.faq-item[open] { background: var(--color-lime-100); }
.faq-item[open] summary { color: var(--color-forest-900); }


/* ---------- CTA band responsive ----------
   Stacks to: heading → sub → buttons → illustration as a full-width band.
   Previously the art floated as a shrunken block bottom-right, leaving a big
   dead area of lime beside it. */
.cta-band__sub { color: var(--color-forest-900); opacity: .8; margin-top: var(--space-4); max-width: 46ch; font-size: var(--fs-body); }

@media (max-width: 900px) {
  .cta-band { --cta-pad: var(--space-7); grid-template-columns: 1fr; gap: 0; padding: var(--cta-pad) var(--cta-pad) 0; }
  .cta-band h2 { max-width: 18ch; }
  .cta-band__sub { max-width: none; }
  /* Full-bleed strip flush with the card's bottom edge, derived from --cta-pad
     so it can never drift out of sync with the actual padding. */
  .cta-band__art {
    width: calc(100% + var(--cta-pad) * 2);
    margin: var(--cta-pad) calc(var(--cta-pad) * -1) 0;
    max-width: none;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: 70% center;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}
@media (max-width: 600px) {
  .cta-band { --cta-pad: var(--space-6); }
  .cta-band__art { aspect-ratio: 16 / 8; }
}

/* ---------- Full-bleed background photos ----------
   photo() writes an inline `aspect-ratio` so the slot reserves space before the
   image loads (prevents CLS). In a background context that backfires: the
   aspect-ratio derives WIDTH from height, leaving the figure narrower than its
   container and exposing bare green beside it. Override it so these fill. */
.hero__bg .photo,
.svc-hero__bg .photo,
.feature-band__bg .photo {
  aspect-ratio: auto !important;
  width: 100%; height: 100%;
  border-radius: 0;
}
.hero__bg .photo img,
.svc-hero__bg .photo img,
.feature-band__bg .photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Input group with a fixed prefix (phone +91) ---------- */
.field-group { display: flex; align-items: stretch; }
.field-group__prefix {
  display: inline-flex; align-items: center;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  white-space: nowrap;
}
.field-group .field { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; }
.field-group:focus-within .field-group__prefix { border-color: var(--color-lime-600); }

/* ---------- Contact info rows that are themselves links ---------- */
.contact-info__item--link { transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); border: 1px solid transparent; }
.contact-info__item--link:hover { border-color: var(--color-lime-500); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.contact-info__note { color: var(--color-ink-mute); font-size: var(--fs-micro); }
.icon-badge--wa, .icon-badge--wa.icon-badge--wa { background: #25D366; color: #fff; }

/* ---------- Careers: standard page-hero.php (same as every other inner
   page — see chat log for why the earlier custom light hero was reverted),
   plus a dark CTA band and a horizontal hiring-process stepper. ---------- */
.careers-form__note { font-size: var(--fs-micro); color: var(--color-ink-soft); margin-top: calc(var(--space-4) * -1); margin-bottom: var(--space-5); }

.careers-cta {
  background: var(--color-forest-900); color: #fff; border-radius: var(--radius-lg);
  padding: var(--space-8); display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--space-8); align-items: center;
}
.careers-cta__copy h2 { color: #fff; max-width: 18ch; font-size: clamp(1.75rem, 2vw + 1rem, 2.6rem); }
.careers-cta__copy p { color: var(--color-ink-soft); margin-top: var(--space-4); }
.careers-cta__copy .btn--accent { margin-top: var(--space-6); }
.careers-cta__contact { border-left: 1px solid rgba(255,255,255,.15); padding-left: var(--space-8); }
.careers-cta__contact > span { display: block; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-lime-500); }
.careers-cta__contact p { margin-top: var(--space-2); color: var(--color-ink-soft); }
.careers-cta__contact a { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); color: #fff; font-weight: var(--fw-bold); }
.careers-cta__contact a svg { width: 18px; height: 18px; color: var(--color-lime-500); flex-shrink: 0; }
@media (max-width: 760px) {
  .careers-cta { grid-template-columns: 1fr; }
  .careers-cta__contact { border-left: none; border-top: 1px solid rgba(255,255,255,.15); padding-left: 0; padding-top: var(--space-6); }
}

/* One continuous dashed line runs behind the row; each opaque icon-badge
   sits above it (z-index) so the line visually "breaks" at every step
   instead of needing a separate connector element between each pair. */
.hiring-steps { display: flex; position: relative; margin-top: var(--space-8); }
.hiring-steps::before {
  content: ''; position: absolute; top: 30px; left: 10%; right: 10%;
  border-top: 2px dashed var(--color-border); z-index: 0;
}
.hiring-step { flex: 1; min-width: 0; text-align: center; padding-inline: var(--space-2); position: relative; z-index: 1; }
.hiring-step .icon-badge { margin-inline: auto; margin-bottom: var(--space-4); position: relative; z-index: 2; }
.hiring-step h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.hiring-step p { font-size: var(--fs-small); color: var(--color-ink-soft); }
@media (max-width: 860px) {
  .hiring-steps { flex-direction: column; gap: var(--space-6); }
  .hiring-steps::before { display: none; }
  .hiring-step { display: flex; gap: var(--space-4); align-items: flex-start; text-align: left; padding-inline: 0; }
  .hiring-step .icon-badge { margin-inline: 0; margin-bottom: 0; }
}

/* ---------- Products: MicroKILL equipment for sale (enquiry, not checkout) ---------- */
.product-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-9); align-items: start; }
@media (max-width: 900px) { .product-layout { grid-template-columns: 1fr; } }

.product-gallery { position: sticky; top: var(--space-6); }
@media (max-width: 900px) { .product-gallery { position: static; } }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-3); }

.product-tagline { color: var(--color-ink-soft); font-weight: var(--fw-bold); margin-top: var(--space-2); }

.product-price {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-6); padding: var(--space-5);
  background: var(--color-lime-100); border-radius: var(--radius-md);
}
.product-price strong { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--color-forest-900); }
.product-price span { font-size: var(--fs-small); color: var(--color-ink-soft); }

.product-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }

.product-specs__head { font-size: var(--fs-h3); margin-top: var(--space-7); margin-bottom: var(--space-3); color: var(--color-forest-900); }
.product-specs { border-top: 1px solid var(--color-border); }
.product-spec-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-small); }
.product-spec-row span { color: var(--color-ink-soft); flex-shrink: 0; }
.product-spec-row strong { text-align: right; color: var(--color-ink); font-weight: var(--fw-bold); }

/* ---------- Instagram teaser: grid + follow-out (no live-synced feed) ---------- */
.instagram-teaser__handle { display: inline-block; }
@media (max-width: 480px) {
  .instagram-teaser__handle { font-size: 0.62em; }
}

.instagram-follow {
  margin-top: var(--space-5);
  display: inline-flex; align-items: center; gap: 10px;
}
.instagram-follow svg { width: 20px; height: 20px; }

.instagram-grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.instagram-grid__tile {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.instagram-grid__tile .photo { border-radius: 0; margin: 0; height: 100%; }
.instagram-grid__tile--video video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-forest-800); }
.instagram-grid__reel {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(3, 63, 45, .55); color: #fff;
}
.instagram-grid__reel svg { width: 13px; height: 13px; }
.instagram-grid__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 63, 45, .55);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.instagram-grid__overlay svg { width: 30px; height: 30px; color: #fff; }
.instagram-grid__tile:hover .instagram-grid__overlay,
.instagram-grid__tile:focus-visible .instagram-grid__overlay { opacity: 1; }

@media (max-width: 900px) {
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .instagram-grid { gap: var(--space-2); }
}