/**
 * JG Modern Theme - Main Stylesheet
 * Extracted from mockup designs
 */

/* ---- RESET ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: #1a1a2e;
  background: #fafaf8;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* WordPress admin bar offset */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* ---- CSS CUSTOM PROPERTIES ---- */
:root {
  --navy: #0a1628;
  --navy-light: #0f2035;
  --navy-deep: #05101f;
  --red: #d12127;
  --red-glow: rgba(209, 33, 39, 0.4);
  --red-hover: #e02a30;
  --offwhite: #fafaf8;
  --warm-grey: #f3f2ef;
  --text: #1a1a2e;
  --text-muted: #5a6073;
  --text-light: rgba(255, 255, 255, 0.85);
  --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.08);
  --shadow-lg: 0 8px 32px rgba(10, 22, 40, 0.12);
  --shadow-hover: 0 12px 40px rgba(10, 22, 40, 0.16);
  --radius: 12px;
  --radius-lg: 16px;
  --max-width: 1200px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- ANIMATIONS ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes softPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.15); }
}
@keyframes starGlow {
  0%, 100% { text-shadow: 0 0 4px rgba(245, 158, 11, 0.3); }
  50% { text-shadow: 0 0 14px rgba(245, 158, 11, 0.7), 0 0 24px rgba(245, 158, 11, 0.3); }
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 20px var(--red-glow); }
  50% { box-shadow: 0 4px 32px rgba(209, 33, 39, 0.55), 0 0 48px rgba(209, 33, 39, 0.2); }
}
@keyframes btnShimmer {
  0%, 75% { left: -100%; }
  100% { left: 100%; }
}
@keyframes samedayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}
@keyframes availPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* ---- REVEAL ANIMATIONS ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- FAQ ACCORDION ---- */
.faq-accordion { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 8px; }
.faq-item { background: #fff; border: 1px solid var(--border, #e5e9f0); border-radius: 14px; overflow: hidden; transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.faq-item:hover { box-shadow: 0 6px 22px rgba(10, 22, 40, 0.07); }
.faq-item.open { border-color: rgba(209, 33, 39, 0.25); box-shadow: 0 8px 26px rgba(10, 22, 40, 0.09); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 1.05rem; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; line-height: 1.4; }
.faq-q-text { flex: 1; }
.faq-icon { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--red, #d12127); border-radius: 2px; transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
.faq-icon::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.faq-icon::after { left: 10px; top: 3px; width: 2px; height: 16px; }
.faq-item.open .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease-out); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; padding: 0 22px; }
.faq-item.open .faq-a-inner { padding-bottom: 20px; }
.faq-a-inner p { margin: 0 0 12px; color: var(--text-muted, #555); line-height: 1.6; }
.faq-a-inner > :first-child { margin-top: 0; }
.faq-a-inner p:last-child, .faq-a-inner > :last-child { margin-bottom: 0; }
/* Geo pages render FAQ items inline (no .faq-accordion wrapper), so space them individually. */
.entry-content .faq-item { margin-bottom: 14px; }
.faq-accordion .faq-item { margin-bottom: 0; }

/* ---- ORGANIC LEGACY CONTENT POLISH ---- */
/* Legacy headings mix a red <span class="red-text"> with navy text, which reads as clashing
   colours. Force heading-level red spans to inherit the navy heading colour for a clean,
   consistent premium look. Inline red-text links (pest names, phone CTAs) keep the accent. */
.entry-content h1 .red-text,
.entry-content h2 .red-text,
.entry-content h3 .red-text,
.entry-content h4 .red-text { color: inherit; }
/* Inline red-text links stay the brand red and read as links. */
.entry-content .red-text a, .entry-content a.red-text { color: var(--red); }

/* ---- TOP BAR ---- */
.top-bar {
  background: var(--navy);
  color: var(--text-light);
  font-size: 0.82rem;
  padding: 8px 0;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  z-index: 101;
}
.top-bar .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0;
  flex-wrap: nowrap !important;
  min-height: 32px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.top-bar a { color: #fff; font-weight: 600; transition: color 0.2s; }
.top-bar a:hover { color: var(--red); }
.top-bar .sep { opacity: 0.3; margin: 0 12px; }
.top-bar-line { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lines-iconpulse {
  display: inline-block;
  width: 10px; height: 10px;
  background: #22c55e;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: softPulse 2s ease-in-out infinite;
}
.lines-iconpulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.4);
  animation: softPulse 2s ease-in-out infinite;
}
/* Call Now link in top bar */
.call-now-link { font-weight: 700; color: #fff !important; }

/* Header phone with icon + number + backup */
.show-sm { display: none; }
.header-phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.header-phone-icon {
  width: 36px; height: 36px;
  background: rgba(209,33,39,0.1);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  transition: background 0.2s;
  flex-shrink: 0;
}
.header-phone-primary:hover .header-phone-icon { background: rgba(209,33,39,0.2); }
.header-phone-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
}
.header-phone-backup {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}
.header-phone-backup a { color: var(--text-muted); }
.header-phone-backup a:hover { color: var(--red); }

/* ---- HEADER ---- */
.header {
  background: #fff;
  border-bottom: 1px solid rgba(10, 22, 40, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(255,255,255,0.92);
}
.header .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  height: 78px;
}
.logo-link { display: flex; align-items: center; gap: 10px; transition: opacity 0.2s; }
.logo-link:hover { opacity: 0.85; }
.logo-img {
  height: 44px;
  width: auto;
}
.logo-img-white { filter: none; }

.nav { display: flex; gap: 32px; align-items: center; }
/* Handle both bare <a> tags (fallback) and WP menu <ul><li><a> */
.nav > ul { display: flex; gap: 32px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { margin: 0; padding: 0; position: relative; }
.nav a, .nav > ul > li > a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s;
  letter-spacing: -0.01em;
  position: relative;
  text-decoration: none;
}
.nav a::after, .nav > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 2px;
  background: var(--red);
  transition: width 0.25s var(--ease-out);
}
.nav a:hover, .nav > ul > li > a:hover { color: var(--navy); }
.nav a:hover::after, .nav > ul > li > a:hover::after { width: 100%; }
.nav .current-menu-item > a { color: var(--navy); }
/* Dropdown submenus */
.nav > ul > li.menu-item-has-children { padding-bottom: 12px; margin-bottom: -12px; }
.nav ul ul { display: none; position: absolute; top: calc(100% + 4px); left: -12px; background: #fff; border-radius: 8px; box-shadow: var(--shadow-md); padding: 8px 0; min-width: 180px; z-index: 200; }
.nav ul ul li { padding: 0; }
.nav ul ul a { display: block; padding: 8px 20px; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.nav ul ul a::after { display: none; }
.nav ul ul a:hover { color: var(--navy); background: var(--warm-grey); }
.nav > ul > li:hover > ul { display: block; }

.header-actions { display: flex; gap: 12px; align-items: center; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.header-phone .ico {
  width: 32px; height: 32px;
  background: rgba(209, 33, 39, 0.08);
  color: var(--red);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-cta {
  background: var(--red);
  color: #fff;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.25s var(--ease-out);
  box-shadow: 0 2px 10px var(--red-glow);
}
.header-cta:hover {
  background: var(--red-hover);
  box-shadow: 0 6px 20px var(--red-glow);
  transform: translateY(-2px);
}

/* ---- HERO ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 90px;
  background: var(--navy);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 65% center;
  background-repeat: no-repeat;
  z-index: 0;
}
@media (max-width: 860px) {
  .hero-bg { background-position: 60% center; }
}
.hero::before {
  display: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--offwhite), transparent);
  pointer-events: none;
  z-index: 1;
}
.hero .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
  animation: fadeInUp 0.7s var(--ease-out) both;
}
.hero-eyebrow .dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 8px rgba(34,197,94,0.8); animation: softPulse 2s ease-in-out infinite; }
.hero-content h1 {
  font-size: 3.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
  animation: fadeInUp 0.8s var(--ease-out) 0.1s both;
}
.hero-content h1 .highlight {
  color: var(--red);
  position: relative;
  display: inline-block;
}
.hero-content h1 .highlight::after {
  display: none;
}
.hero-content p.lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 36px;
  max-width: 520px;
  line-height: 1.7;
  animation: fadeInUp 0.8s var(--ease-out) 0.2s both;
}
.hero-buttons {
  display: flex;
  gap: 14px;
  margin-bottom: 44px;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s var(--ease-out) 0.3s both;
}
.btn-primary {
  background: var(--red);
  color: #fff;
  padding: 16px 32px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s var(--ease-out);
  box-shadow: 0 4px 24px var(--red-glow);
  border: none;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  animation: ctaPulse 3s ease-in-out infinite;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: btnShimmer 4s ease-in-out infinite;
}
.btn-primary:hover {
  background: var(--red-hover);
  box-shadow: 0 8px 32px rgba(209, 33, 39, 0.55);
  transform: translateY(-2px);
  animation: none;
}
.btn-primary:hover::before { animation: none; left: 0; transform: translateX(100%); transition: transform 0.6s; }
.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 16px 32px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s var(--ease-out);
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.hero-trust {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  animation: fadeInUp 0.8s var(--ease-out) 0.4s both;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 600;
}
.trust-icon-svg {
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.trust-item strong { display: block; color: #fff; font-size: 0.95rem; letter-spacing: -0.01em; }
.trust-item span { font-size: 0.78rem; color: rgba(255,255,255,0.6); }

/* Hero right - stat card */
.hero-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: fadeInUp 1s var(--ease-out) 0.3s both;
}
.hero-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.hero-stat {
  text-align: center;
  padding: 18px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: all 0.3s var(--ease-out);
}
.hero-stat:hover { background: rgba(209,33,39,0.08); border-color: rgba(209,33,39,0.2); transform: translateY(-2px); }
.hero-stat-number { font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; }
.hero-stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.hero-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(209,33,39,0.1);
  border: 1px solid rgba(209,33,39,0.25);
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.25s;
  cursor: pointer;
}
.hero-card-cta:hover { background: rgba(209,33,39,0.2); }
.hero-card-cta .arrow { transition: transform 0.25s; }
.hero-card-cta:hover .arrow { transform: translateX(4px); }

/* ---- SERVICES ---- */
.services { padding: 96px 0 80px; position: relative; z-index: 2; }
.services .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 14px;
  background: rgba(209, 33, 39, 0.07);
  padding: 7px 16px;
  border-radius: 100px;
}
.section-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.15;
}
.section-header p {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto;
}
.services-cat { margin-bottom: 44px; }
.services-cat:last-child { margin-bottom: 0; }
.services-cat-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border, #e5e9f0);
  text-transform: uppercase;
}
/* Collapsible category sliders (services page) — clean, no boxed "window" chrome.
   min-width:0 lets the slider's grid/flex ancestors shrink so overflow-x can scroll
   instead of the cards forcing the whole column wider than the viewport. */
.content-layout--full .main-content { min-width: 0; }
.svc-catalogue { display: block; }
.svc-cat { min-width: 0; margin-bottom: 36px; }
.svc-cat:last-child { margin-bottom: 0; }

/* ---- Locality services catalogue: tighten the gap below the intro/heading ----
   On county/town pages the [services-grid] catalogue bleeds full width below the
   sidebar, so a clearance script nudges it down to clear the bottom of the last
   sidebar card ("Available Today / Call Now"). When the left intro copy is short
   the sidebar is the taller column, which left a cavernous empty gap between the
   "Selection of pests we deal with are:" heading and the first "RODENTS" section,
   plus dead space under the green card. Trimming the sidebar cards' vertical
   footprint lowers the card stack, so the catalogue rises and the gap shrinks to a
   normal section spacing. Scoped to the 2-col .content-layout only; the catalogue
   still clears the card (no overlap), and on mobile the sidebar stacks naturally
   so these only mean slightly tighter cards. */
.content-layout .sidebar { gap: 16px; }
.content-layout .sidebar .sidebar-cta { padding: 26px 24px; }
.content-layout .sidebar .sidebar-card { padding: 22px 24px; }
/* Trim the panel's own top padding so the first category sits closer to the top.
   !important beats the inlined overrides layer that sets padding: 26px 18px 18px. */
.content-layout .entry-content .svc-catalogue { padding-top: 16px !important; }
.svc-cat-head { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: none; border-bottom: 2px solid var(--border, #e5e9f0); padding: 0 2px 12px; margin-bottom: 18px; cursor: pointer; text-align: left; font-family: inherit; }
.svc-cat-title { font-size: 1.35rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; text-transform: uppercase; }
.svc-cat-chevron { margin-left: auto; font-size: 1.05rem; color: #8a93a6; transition: transform 0.2s, color 0.2s; }
.svc-cat-head:hover .svc-cat-chevron { color: var(--navy); }
.svc-cat[data-collapsed="true"] .svc-cat-chevron { transform: rotate(-90deg); }
.svc-cat[data-collapsed="true"] .svc-cat-body { display: none; }
.svc-cat-body { position: relative; min-width: 0; }
.svc-slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; min-width: 0; }
.svc-slider::-webkit-scrollbar { height: 6px; }
.svc-slider::-webkit-scrollbar-thumb { background: #d2d8e2; border-radius: 4px; }
.svc-slider .service-card { scroll-snap-align: start; margin: 0; }
/* >3 items: smaller cards in a horizontal slider */
.svc-scroll .svc-slider .service-card { flex: 0 0 196px; }
/* When the cards fit the container, centre them instead of left-aligning (JS adds .is-fit). */
.svc-scroll .svc-slider.is-fit { justify-content: center; }
/* <=3 items: cards fill the row evenly, no scrolling */
.svc-fit .svc-slider { overflow-x: visible; }
.svc-fit .svc-slider .service-card { flex: 1 1 0; min-width: 0; }
.svc-slider-nav { position: absolute; top: calc(50% - 7px); transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #e2e6ee; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,0.16); cursor: pointer; font-size: 24px; line-height: 1; color: var(--navy); display: none; align-items: center; justify-content: center; padding: 0; }
.svc-prev { left: -6px; }
.svc-next { right: -6px; }
.svc-slider-nav:hover { background: var(--navy, #162a45); color: #fff; border-color: var(--navy, #162a45); }
@media (max-width: 600px) { .svc-scroll .svc-slider .service-card { flex-basis: 72vw; } .svc-fit .svc-slider { flex-wrap: wrap; } .svc-fit .svc-slider .service-card { flex-basis: 45%; } .svc-slider-nav { display: none !important; } }

/* Ladybird page figure — full harlequin grid, floated and sized so it isn't scaled up */
.ladybird-figure { display: block; float: right; width: 38%; max-width: 300px; height: auto; margin: 4px 0 16px 24px; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.12); }
@media (max-width: 600px) { .ladybird-figure { float: none; width: 100%; max-width: 320px; margin: 8px auto 16px; } }

.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(10, 22, 40, 0.04);
  transition: all 0.4s var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: block;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(209, 33, 39, 0.15);
}
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
  width: 110px; height: 110px;
  margin: 0 auto 20px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--ease-out);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(10,22,40,0.06),
    0 6px 18px rgba(10,22,40,0.08);
  position: relative;
}
.service-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  border-radius: 0;
  transition: transform 0.5s var(--ease-out);
}
.service-card:hover .service-icon {
  outline: 2px solid rgba(209, 33, 39, 0.4);
  outline-offset: 3px;
  box-shadow: 0 10px 28px rgba(10,22,40,0.14);
  transform: scale(1.04);
}
.service-card:hover .service-icon img { transform: scale(1.12); }
.service-card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; letter-spacing: -0.02em; }
.service-card p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; min-height: 40px; }
.service-card .arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--red);
  margin-top: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.3s var(--ease-out);
}
.service-card:hover .arrow { opacity: 1; transform: translateY(0); }

/* ---- WHY US ---- */
.why-us { padding: 96px 0; background: var(--warm-grey); }
.why-us .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(10, 22, 40, 0.04);
  transition: all 0.4s var(--ease-out);
  position: relative;
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(209,33,39,0.1);
}
.why-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: #fff;
  transition: all 0.4s var(--ease-out);
}
.why-card:hover .why-icon {
  background: linear-gradient(135deg, var(--red), #a8181d);
  transform: rotate(-4deg) scale(1.05);
}
.why-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.02em; }
.why-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.7; }

/* ---- WHAT MAKES JG DIFFERENT ---- */
.difference { padding: 96px 0; background: #fff; }
.difference .container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.difference .section-tag { text-align: center; display: inline-flex; }
.difference-inner { text-align: center; }
.difference h2 {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 28px;
}
.difference p {
  font-size: 1.08rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 18px;
}
.difference .highlight-box {
  margin-top: 36px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(10,22,40,0.04), rgba(209,33,39,0.03));
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  text-align: left;
}
.difference .highlight-box strong { color: var(--navy); font-weight: 700; }

/* ---- COVERAGE ---- */
.coverage { padding: 96px 0; background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.coverage::before {
  content: '';
  position: absolute;
  top: -30%; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(209,33,39,0.08), transparent 70%);
  border-radius: 50%;
}
.coverage .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; position: relative; }
.coverage .section-header h2 { color: #fff; }
.coverage .section-header p { color: rgba(255,255,255,0.7); }
.coverage-search { text-align: center; margin-top: 30px; }
.coverage-search-wrap {
  display: inline-flex;
  width: 100%;
  max-width: 480px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  transition: border-color 0.2s;
}
.coverage-search-wrap:focus-within { border-color: var(--red); background: rgba(255,255,255,0.1); }
.coverage-search-input {
  flex: 1;
  padding: 14px 20px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
}
.coverage-search-input::placeholder { color: rgba(255,255,255,0.4); }
.coverage-search-btn {
  padding: 14px 24px;
  background: var(--red);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.coverage-search-btn:hover { background: var(--red-hover); }
.coverage-found {
  margin-top: 14px;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-block;
}
.coverage-yes {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}
.coverage-invalid {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.counties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.county-link {
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  transition: all 0.25s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.county-link:hover {
  background: rgba(209,33,39,0.12);
  border-color: rgba(209,33,39,0.3);
  color: #fff;
  transform: translateX(4px);
}
.county-link .arrow { opacity: 0; transform: translateX(-6px); transition: all 0.25s; }
.county-link:hover .arrow { opacity: 1; transform: translateX(0); }

/* ---- FAQ ---- */
.faq { padding: 96px 0; background: var(--warm-grey); }
.faq .container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff;
  border: 1px solid rgba(10,22,40,0.05);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
}
.faq-item:hover { border-color: rgba(209,33,39,0.15); box-shadow: var(--shadow-sm); }
.faq-item[open] { border-color: rgba(209,33,39,0.2); box-shadow: var(--shadow-md); }
.faq-item summary {
  padding: 22px 26px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus {
  width: 28px; height: 28px;
  background: var(--warm-grey);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--navy);
  font-weight: 800;
  transition: all 0.3s var(--ease-out);
}
.faq-item[open] .plus { background: var(--red); color: #fff; transform: rotate(45deg); }
.faq-item .faq-body {
  padding: 0 26px 24px;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ---- REVIEWS ---- */
.reviews { padding: 96px 0; }
.reviews .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(10, 22, 40, 0.04);
  transition: all 0.4s var(--ease-out);
  position: relative;
}
.review-card::before {
  content: '\201C';
  position: absolute;
  top: 12px; right: 20px;
  font-size: 5rem;
  color: rgba(209,33,39,0.1);
  font-family: Georgia, serif;
  line-height: 1;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review-stars { color: #f59e0b; font-size: 1rem; margin-bottom: 16px; letter-spacing: 2px; }
.review-card blockquote { font-size: 0.95rem; color: var(--text); line-height: 1.75; margin-bottom: 18px; font-style: italic; }
.review-author { font-size: 0.88rem; font-weight: 700; color: var(--navy); }
.review-location { font-size: 0.8rem; color: var(--text-muted); }
.review-source { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; padding-top: 14px; border-top: 1px solid rgba(10,22,40,0.06); }

/* ---- CTA BANNER ---- */
.cta-banner {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(209, 33, 39, 0.12), transparent 70%);
  border-radius: 50%;
  animation: float 10s ease-in-out infinite;
}
.cta-banner .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.cta-banner h2 { font-size: 2.4rem; font-weight: 800; color: #fff; letter-spacing: -0.035em; margin-bottom: 14px; }
.cta-banner p { font-size: 1.08rem; color: var(--text-light); margin-bottom: 36px; max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-banner .btn-primary { padding: 18px 44px; font-size: 1.05rem; }

/* ---- FOOTER ---- */
.footer { background: var(--navy-deep); color: var(--text-light); padding: 72px 0 30px; }
.footer .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand .logo-img { height: 48px; filter: none; margin-bottom: 16px; }
.footer-brand p { font-size: 0.88rem; color: rgba(255,255,255,0.5); line-height: 1.75; max-width: 300px; }
.footer h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 18px; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; font-size: 0.88rem; color: rgba(255,255,255,0.5); }
.footer ul a { font-size: 0.88rem; color: rgba(255,255,255,0.65); transition: color 0.2s; }
.footer ul a:hover { color: var(--red); }
.footer-contact .footer-phone { margin-bottom: 14px; }
.footer-contact .footer-phone a { font-size: 1.1rem; font-weight: 700; color: #fff; }
.footer-contact .footer-phone a:hover { color: var(--red); }
.footer-form input, .footer-form select, .footer-form textarea {
  width: 100%; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
  background: rgba(255,255,255,0.06); color: #fff; font-size: 0.82rem; font-family: inherit;
  margin-bottom: 8px; outline: none; transition: border-color 0.2s;
}
.footer-form input::placeholder, .footer-form textarea::placeholder { color: rgba(255,255,255,0.35); }
.footer-form select { color: rgba(255,255,255,0.35); }
.footer-form select option { background: var(--navy); color: #fff; }
.footer-form input:focus, .footer-form select:focus, .footer-form textarea:focus { border-color: var(--red); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 26px; display: flex; justify-content: space-between; font-size: 0.8rem; color: rgba(255,255,255,0.35); flex-wrap: wrap; gap: 12px; }
.footer-bottom a { color: rgba(255,255,255,0.35); transition: color 0.2s; }
.footer-bottom a:hover { color: var(--red); }

/* ---- SAME-DAY BADGE ---- */
.sameday-badge {
  position: fixed;
  bottom: 180px;
  right: 20px;
  z-index: 90;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  padding: 20px 22px 18px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 8px 28px rgba(34, 197, 94, 0.4);
  max-width: 170px;
  animation: float 5s ease-in-out infinite;
}
.sameday-badge__pulse {
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 6px;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: samedayPulse 2s ease-in-out infinite;
}
.sameday-badge__date {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.sameday-badge__text {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- PROMO BADGE ---- */
.promo-badge {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
  background: linear-gradient(135deg, var(--red), #a8181d);
  color: #fff;
  padding: 18px 22px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 8px 28px var(--red-glow);
  animation: float 4s ease-in-out infinite;
  max-width: 150px;
  cursor: pointer;
  transition: transform 0.2s;
}
.promo-badge:hover { transform: scale(1.05); }
.promo-badge__icon { font-size: 1.2rem; margin-bottom: 6px; }
.promo-badge__title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.promo-badge__subtitle { font-size: 0.72rem; font-weight: 600; opacity: 0.9; margin-top: 4px; }
.promo-badge__expires { font-size: 0.62rem; opacity: 0.6; margin-top: 6px; }
.promo-badge__close {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  background: #fff;
  border: none;
  border-radius: 50%;
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ---- QUOTE MODAL ---- */
.quote-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.quote-overlay.is-open { display: flex; }
.quote-modal {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 560px;
  width: 92%;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 24px 64px rgba(10,22,40,0.25);
  animation: fadeInUp 0.3s var(--ease-out);
}
.quote-modal h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
  letter-spacing: -0.03em;
}
.quote-modal .subtitle { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 24px; }
.quote-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: var(--warm-grey);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: background 0.2s;
}
.quote-close:hover { background: #e8e7e4; }
/* Enquiry type toggle */
.enquiry-toggle {
  display: flex;
  flex-wrap: wrap;
  background: var(--warm-grey);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.enquiry-toggle .toggle-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  padding: 10px 8px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
}
@media (max-width: 480px) {
  .enquiry-toggle .toggle-btn { font-size: 0.76rem; padding: 9px 6px; }
}
.enquiry-toggle .toggle-btn.active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 4px rgba(10,22,40,0.1);
}
.enquiry-toggle .toggle-btn:hover:not(.active) {
  color: var(--navy);
}
.quote-form .form-row { margin-bottom: 14px; }
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(10,22,40,0.12);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s;
  outline: none;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus { border-color: var(--red); }
.quote-form input::placeholder,
.quote-form textarea::placeholder { color: rgba(10,22,40,0.35); }
.quote-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235a6073' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.quote-form .form-row-half { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quote-form .field-wrap { min-width: 0; }
.quote-form .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }
.quote-form .form-note { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 12px; }
.quote-form .honeypot { position: absolute; left: -9999px; }
/* Inline validation errors */
.quote-form .field-error {
  border-color: #dc2626 !important;
  border-width: 2px !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
.quote-form .field-error-msg {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #dc2626;
  margin-top: 6px;
  padding-left: 2px;
}
.quote-form .field-valid {
  border-color: #22c55e !important;
}

/* Form-level error summary */
.quote-form .form-error-summary {
  display: none;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: #fef2f2;
  border: 2px solid #dc2626;
  border-radius: 8px;
  color: #991b1b;
  font-size: 0.88rem;
  line-height: 1.4;
}
.quote-form .form-error-summary.is-visible { display: block; }
.quote-form .form-error-summary ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.quote-form .form-error-summary li { margin: 2px 0; }
@keyframes jgmShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.quote-form .form-error-summary.shake { animation: jgmShake 0.4s ease-in-out; }

/* Submit button spinner + submitting state */
.quote-form .btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -4px;
  animation: jgmSpin 0.65s linear infinite;
}
@keyframes jgmSpin {
  to { transform: rotate(360deg); }
}
.quote-form.is-submitting { pointer-events: none; }
.quote-form.is-submitting input,
.quote-form.is-submitting select,
.quote-form.is-submitting textarea,
.quote-form.is-submitting .toggle-btn,
.quote-form.is-submitting .pill-option {
  opacity: 0.4;
  filter: grayscale(0.4);
}
.quote-form.is-submitting .btn-primary {
  opacity: 1;
  pointer-events: auto;
  cursor: progress;
  background: #0a1628;
  color: #fff;
  transform: scale(0.98);
  transition: transform 0.15s ease;
}
.quote-form.is-submitting .form-note { opacity: 0.4; }
/* Progress saved indicator */
.progress-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(34,197,94,0.08);
  border: 1.5px solid rgba(34,197,94,0.25);
  border-radius: 10px;
  font-size: 0.82rem;
  color: #166534;
  animation: fadeInUp 0.3s var(--ease-out);
}
.progress-saved svg { flex-shrink: 0; }
/* Follow-up labels */
.followup-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
/* Postcode availability message */
.postcode-availability {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(34,197,94,0.08);
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #166534;
  animation: fadeInUp 0.3s var(--ease-out);
  line-height: 1.4;
}
.postcode-availability svg { flex-shrink: 0; }
/* Pill radio groups - iOS style */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill-option {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pill-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.pill-option span {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--warm-grey);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s var(--ease-out);
  user-select: none;
  white-space: nowrap;
  border: none;
  line-height: 1.3;
}
.pill-option:hover span {
  background: #e8e7e4;
  color: var(--navy);
}
.pill-option input[type="radio"]:checked + span {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(10,22,40,0.2);
}
#followUpQuestions {
  animation: fadeInUp 0.3s var(--ease-out);
}
.quote-success { display: none; text-align: center; padding: 20px 0; }
.quote-success h3 { color: #22c55e; margin-bottom: 8px; }
.quote-success p { color: var(--text-muted); font-size: 0.92rem; }

/* ---- HAMBURGER MENU ---- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: var(--warm-grey);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 8px;
  transition: background 0.2s;
}
.hamburger:hover { background: #e8e7e4; }
.hamburger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-nav {
  display: none;
  position: fixed;
  top: 0; right: 0;
  width: 300px; height: 100vh;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  box-shadow: -4px 0 24px rgba(10,22,40,0.15);
  z-index: 999;
  padding: 80px 32px 32px;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
  flex-direction: column;
  gap: 0;
}
.mobile-nav.is-open { transform: translateX(0); display: flex; }
.mobile-nav > ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > ul > li { margin: 0; padding: 0; }
.mobile-nav > ul ul { display: none; }
.mobile-nav a, .mobile-nav > ul > li > a {
  display: block;
  padding: 16px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid rgba(10,22,40,0.06);
  transition: color 0.2s;
  text-decoration: none;
}
.mobile-nav a:hover, .mobile-nav > ul > li > a:hover { color: var(--red); }
.mobile-nav .mobile-nav-cta {
  margin-top: 24px;
  background: var(--red);
  color: #fff;
  padding: 16px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 20px var(--red-glow);
}
.mobile-nav .mobile-nav-phone {
  margin-top: 16px;
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--navy);
}
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,0.4);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s;
}
.mobile-nav-overlay.is-open { display: block; opacity: 1; }

/* ---- SERVICE PAGE CONTENT LAYOUT ---- */
.content-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
}
.content-layout--full { grid-template-columns: 1fr; }

/* Main content area */
.main-content h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
  margin: 40px 0 16px;
}
.main-content h2:first-child { margin-top: 0; }
.main-content p {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 16px;
}
.main-content ul {
  margin: 16px 0 24px 20px;
}
.main-content li {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 6px;
}
.main-content li::marker { color: var(--red); }

/* ---- SIDEBAR ---- */
.sidebar { display: flex; flex-direction: column; gap: 20px; }

.sidebar-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(10,22,40,0.04);
}
.sidebar-cta {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sidebar-cta::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at top right, rgba(209,33,39,0.1), transparent 60%);
}
.sidebar-cta * { position: relative; z-index: 1; }
.sidebar-cta h3 { color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.sidebar-cta p { color: var(--text-light); font-size: 0.88rem; margin-bottom: 20px; }
.sidebar-cta .btn-primary {
  width: 100%;
  justify-content: center;
}
.sidebar-cta .phone-number {
  display: block;
  margin-top: 14px;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  font-weight: 600;
}
.sidebar-cta .phone-number strong {
  display: block;
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.sidebar-card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 16px; letter-spacing: -0.02em; }
/* Related pest services in sidebar */
.related-pests { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sidebar-card:has(.related-pests) { background: var(--warm-grey); }
.related-pest {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #fff; border: 1px solid rgba(10,22,40,0.06); border-radius: 100px;
  font-size: 0.78rem; font-weight: 600; color: var(--navy); transition: all 0.2s; text-decoration: none; white-space: nowrap; overflow: hidden;
}
.related-pest:hover { border-color: var(--red); color: var(--red); }
.related-pest img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }

/* Availability card */
.availability-card { border-left: 3px solid #22c55e; }
.avail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.avail-pulse {
  width: 10px; height: 10px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: availPulse 2s ease-in-out infinite;
}
.avail-header strong { font-size: 1rem; color: #22c55e; }
.avail-text { font-size: 0.88rem; color: var(--text); margin-bottom: 16px; line-height: 1.5; }

.trust-list { list-style: none; }
.trust-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--text);
}
.trust-list .check {
  width: 24px; height: 24px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- SERVICE HERO ---- */
.service-hero {
  padding: 60px 0 50px;
  position: relative;
  overflow: hidden;
  background: var(--navy);
}
.service-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.service-hero::before {
  content: '';
  position: absolute;
  right: -10%;
  top: -30%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(209,33,39,0.06), transparent 70%);
  border-radius: 50%;
}
.service-hero .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.breadcrumb {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 16px;
}
.breadcrumb a { color: rgba(255,255,255,0.6); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,0.3); margin: 0 8px; }
.service-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  line-height: 1.1;
}
.service-hero .subtitle {
  font-size: 1.1rem;
  color: var(--text-light);
  max-width: 600px;
  margin-bottom: 28px;
}
.hero-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  font-weight: 600;
}

/* ---- RESPONSIVE - TABLET ---- */
@media (max-width: 1024px) and (min-width: 861px) {
  .nav { gap: 18px; }
  .nav a { font-size: 0.82rem; }
  .header .container { padding: 0 16px; }
  .header-cta { padding: 9px 16px; font-size: 0.82rem; }
  .header-phone { font-size: 0.85rem; }
}

/* ---- RESPONSIVE - MOBILE ---- */
@media (max-width: 860px) {
  .top-bar .container { font-size: 0.68rem; gap: 5px; flex-wrap: nowrap !important; }
  .hide-sm { display: none; }
  .nav { display: none !important; }
  .hamburger { display: flex; }
  .header-phone { flex-direction: row; align-items: center; gap: 6px; }
  .header-phone-primary { font-size: 0.82rem; }
  .header-phone-backup { font-size: 0.6rem; }
  .header-cta { display: none !important; }
  .show-sm { display: flex !important; }
  .header .container { height: 56px; padding: 0 14px; }
  .logo-img { height: 34px; }
  .header-actions { gap: 8px; }
  .service-icon { width: 80px; height: 80px; margin-bottom: 14px; }
  .hero { padding: 80px 0 60px; }
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-content h1 { font-size: 2.2rem; }
  .hero-trust { gap: 16px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .difference h2, .cta-banner h2, .section-header h2 { font-size: 1.8rem; }
  .counties-grid { grid-template-columns: repeat(2, 1fr); }
  .content-layout { grid-template-columns: 1fr; }
  .service-hero h1 { font-size: 2rem; }
  .sameday-badge { bottom: 160px; right: 12px; padding: 14px 16px 12px; max-width: 150px; }
  .sameday-badge__date { font-size: 1.1rem; }
  .sameday-badge__text { font-size: 0.62rem; }
  .promo-badge { bottom: 80px; right: 12px; padding: 14px 16px; max-width: 130px; }
  .promo-badge__title { font-size: 1.1rem; }
}

/* ---- WordPress-specific ---- */
.wp-block-image { margin: 24px 0; }
.wp-block-image img { border-radius: var(--radius); }
.entry-content h2 { font-size: 1.6rem; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; margin: 40px 0 16px; }
.entry-content h3 { font-size: 1.3rem; font-weight: 700; color: var(--navy); margin: 32px 0 12px; }
.entry-content p { font-size: 0.95rem; color: var(--text); line-height: 1.8; margin-bottom: 16px; }
.entry-content ul, .entry-content ol { margin: 16px 0 24px 20px; }
.entry-content li { font-size: 0.95rem; color: var(--text); line-height: 1.8; margin-bottom: 6px; }
.entry-content li::marker { color: var(--red); }
.entry-content a { color: var(--red); font-weight: 600; transition: color 0.2s; }
.entry-content a:hover { color: var(--red-hover); }

/* ---- WordPress overrides ---- */
#wpadminbar ~ .top-bar { margin-top: 0; }
.wp-block-image img { border-radius: var(--radius); }
.alignwide { max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; max-width: 100%; }
/* Ensure clean body background */
html, body { background: var(--offwhite) !important; }
/* WP nav menu list resets */
.menu, .nav-menu, .sub-menu { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.nav ul, .nav li, .mobile-nav ul, .mobile-nav li { list-style: none !important; margin: 0; padding: 0; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0; }
.mobile-nav li { margin: 0; padding: 0; }
.mobile-nav li a {
  display: block;
  padding: 14px 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid rgba(10,22,40,0.06);
}

/* Override any WP global/block styles */
body .is-layout-flex, body .is-layout-grid { gap: inherit; }
body .wp-site-blocks { padding: 0; }
.has-global-padding { padding: 0; }

/* Service icon sizing for pest silhouettes */
/* Responsive Menu plugin - hide its output completely */
#rmp_menu_trigger-3865,
.rmp-container,
.rmp_menu_trigger,
[id^="rmp_menu"],
[id^="rmp-container"] { display: none !important; }

/* WordPress content list styling - restore bullets only inside entry-content */
.entry-content ul { list-style: disc !important; margin: 16px 0 24px 24px !important; padding: 0; }
.entry-content ol { list-style: decimal !important; margin: 16px 0 24px 24px !important; padding: 0; }
.entry-content li { list-style: inherit; }
.entry-content li::marker { color: var(--red); }

/* Ensure sidebar and content-layout override WP */
.content-layout { display: grid !important; grid-template-columns: 1fr 360px !important; gap: 48px; }
.content-layout--full { grid-template-columns: 1fr !important; }
@media (max-width: 860px) { .content-layout { grid-template-columns: 1fr !important; } }
.sidebar { display: flex !important; flex-direction: column; gap: 20px; }
.sidebar .widget { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid rgba(10,22,40,0.04); }
.sidebar .widget h3, .sidebar .widget-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
.sidebar .widget ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.sidebar .widget li { font-size: 0.88rem; padding: 6px 0; border-bottom: 1px solid rgba(10,22,40,0.04); }
.sidebar .widget li:last-child { border-bottom: none; }

/* ---- LEGACY CONTENT COMPATIBILITY ---- */
/* These classes come from the old customtheme service page content */
.wide-area { padding: 30px 0; }
.wrapper { position: relative; max-width: 100%; margin: 0 auto; overflow: hidden; }
.clear { clear: both; height: 0; font-size: 0; }
.top-title { font-size: 1.6rem; font-weight: 800; color: var(--red); margin-bottom: 16px; letter-spacing: -0.02em; }
.intro-text { font-size: 1.05rem; line-height: 1.8; color: var(--text); margin-bottom: 16px; }
.title-text { font-size: 1.3rem; font-weight: 700; color: var(--navy); margin: 32px 0 12px; line-height: 1.4; }
.title-text-wide { text-align: center; }
.no-margin-top { margin-top: 0 !important; }
.red-text { color: var(--red); font-size: 1.2rem; font-weight: 700; text-decoration: none; }
.red-text a { color: var(--red); }

/* Legacy grid layout - for non-pest pages that still use the_content() */
.two-column, .three-column, .big-column {
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
  overflow: hidden;
}
.two-column { width: 48%; float: left; margin-right: 4%; }
.two-column.float-right { margin-right: 0; }
.three-column { width: 32%; float: left; margin-right: 2%; }
.three-column.float-right.no-margin-right { margin-right: 0; }
.big-column { width: 65%; float: left; }
.big-column.float-right { float: right; }
.big-column.no-margin-right { margin-right: 0; }
.clear { clear: both; height: 0; font-size: 0; }

/* Legacy service feature boxes */
.service-feature {
  background: var(--navy);
  color: #fff;
  padding: 32px 28px;
  border-radius: var(--radius);
  min-height: 180px;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.service-feature-tall { min-height: auto; }
.service-feature h2, .service-feature h3 { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; border: none; padding-bottom: 8px; }
.service-feature p, .service-feature li { color: rgba(255,255,255,0.9); font-size: 0.92rem; line-height: 1.7; }
.service-feature a { color: #fff; text-decoration: underline; }
.service-feature ul { list-style: disc !important; padding-left: 20px !important; margin: 12px 0; }
.service-feature li { list-style: inherit; padding-bottom: 6px; }
.service-feature .title-text { color: #fff; font-size: 1.1rem; margin: 16px 0 8px; }

/* Feature color variants */
.grey-feature { background: var(--navy); }
.red-feature, .red-no-lines { background: var(--red); }
.blue-no-lines { background: var(--navy-deep); }
.no-margin-btm { margin-bottom: 0 !important; }
.no-lines { border: none; }

/* Service feature white variant */
.service-feature-white {
  background: #fff;
  box-shadow: var(--shadow-md);
  padding: 28px;
  border-radius: var(--radius);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-feature-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.service-feature-white p { font-size: 1.1rem; color: var(--text); font-weight: 500; margin: 0; }
.service-feature-white p span { color: var(--red); }

/* Service links */
.service-link-title { display: block; padding-bottom: 12px; font-weight: 700; font-size: 1.1rem; }
.service-link-btm { border-top: 1px solid rgba(255,255,255,0.3); padding-top: 12px; margin-top: 12px; }
.service-link-p { margin: 0; padding: 0; }

/* Legacy wide grey section */
.wide-grey { background: var(--warm-grey); padding: 40px 0; text-align: center; }
.wide-grey h2 { color: var(--navy); font-size: 1.6rem; font-weight: 800; }

/* Legacy alignment */
.align-center { text-align: center; }
.alignright { float: right; margin: 0 0 16px 24px; }

/* Responsive legacy grid */
@media (max-width: 860px) {
  .two-column, .three-column, .big-column {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 16px;
  }
}

/* Inline same-day badge in hero (mobile) */
.hero-sameday-inline {
  display: none;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 4px 16px rgba(34,197,94,0.3);
}
@media (max-width: 600px) {
  .hero-sameday-inline { display: block; }
  .sameday-badge { display: none !important; }
  .promo-badge { display: none !important; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary { width: 100%; text-align: center; justify-content: center; }
  /* Mobile pest cards - use same webp photos as desktop */
  .service-icon { width: 64px; height: 64px; }
}

/* ---- SERVICE PAGE: VIDEO + TEXT ROW ---- */
.video-text-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; margin: 20px 0 36px; align-items: start; }
.video-text-content p { font-size: 0.95rem; color: var(--text); line-height: 1.8; margin-bottom: 14px; }
.video-caption { text-align: center; font-size: 0.85rem; font-weight: 600; font-style: italic; color: var(--text-muted); margin-top: 8px; }
@media (max-width: 700px) { .video-text-row { grid-template-columns: 1fr; } }

/* ---- SERVICE PAGE: INFO CARDS ROW ---- */
.info-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 36px; }
.info-card { border-radius: var(--radius); padding: 28px 24px; }
.info-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 12px; }
.info-card ul { list-style: disc; padding-left: 18px; margin: 0; }
.info-card li { font-size: 0.82rem; line-height: 1.5; margin-bottom: 4px; }
.info-card li::marker { color: rgba(255,255,255,0.5); }
.info-card-navy { background: var(--red); color: #fff; }
.info-card-navy h3 { color: #fff; }
.info-card-navy li { color: rgba(255,255,255,0.9); }
.info-card-navy li::marker { color: rgba(255,255,255,0.5); }
.info-card-red { background: var(--red); color: #fff; }
.info-card-red h3 { color: #fff; }
.info-card-red li { color: rgba(255,255,255,0.9); }
.info-card-red li::marker { color: rgba(255,255,255,0.5); }
.info-card-link { background: var(--warm-grey); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; text-decoration: none; color: var(--navy); transition: all 0.2s; border: 2px solid transparent; }
.info-card-link h3 { color: var(--navy); font-size: 1.3rem; }
.info-card-link .info-card-cta { color: var(--red); font-weight: 700; font-size: 0.95rem; margin-top: 8px; }
.info-card-link:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (max-width: 700px) { .info-cards-row { grid-template-columns: 1fr; } }

/* ---- SERVICE PAGE: FEATURE SPLIT ---- */
.feature-split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin: 28px 0 36px; background: var(--warm-grey); border-radius: var(--radius); padding: 36px 32px; }
.feature-split-main h2 { margin-top: 0; }
.feature-split-main p { font-size: 0.95rem; color: var(--text); line-height: 1.8; margin-bottom: 14px; }
.feature-split-sidebar { background: var(--navy); border-radius: var(--radius); padding: 28px 24px; }
.feature-split-sidebar h3 { color: #fff; font-size: 1.1rem; font-weight: 800; margin-bottom: 16px; }
.treatment-links { list-style: none; margin: 0; padding: 0; }
.treatment-links li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.treatment-links li:last-child { border-bottom: none; }
.treatment-links a { color: #fff; font-weight: 600; font-size: 0.9rem; text-decoration: none; display: flex; align-items: center; justify-content: space-between; transition: color 0.2s; }
.treatment-links a:hover { color: var(--red); }
@media (max-width: 700px) { .feature-split { grid-template-columns: 1fr; } }

/* ---- SERVICE PAGE: VIDEO GRID ---- */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 20px 0 32px; }
.video-grid:has(.video-wrap + .video-wrap) { grid-template-columns: 1fr 1fr; }
.video-wrap { position: relative; border-radius: 0; overflow: hidden; background: #000; box-shadow: var(--shadow-md); }
.video-wrap iframe { display: block; width: 100%; aspect-ratio: 16/9; border: none; }
@media (max-width: 600px) { .video-grid:has(.video-wrap + .video-wrap) { grid-template-columns: 1fr; } }

/* ---- SERVICE PAGE: RELATED LINKS ---- */
.related-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 32px; }
.related-link-card { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid rgba(10,22,40,0.06); border-radius: 10px; padding: 16px 20px; font-size: 0.9rem; font-weight: 600; color: var(--navy); box-shadow: var(--shadow-sm); transition: all 0.2s; text-decoration: none; }
.related-link-card:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.related-link-card .arrow { color: var(--red); font-size: 1.1rem; }
@media (max-width: 600px) { .related-links-grid { grid-template-columns: 1fr; } }

/* ---- SERVICE PAGE: SIGNS GRID ---- */
.signs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 32px; }
.sign-item { background: #fff; border: 1px solid rgba(10,22,40,0.06); border-radius: 10px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 10px; box-shadow: var(--shadow-sm); }
.sign-icon { width: 32px; height: 32px; background: rgba(209,33,39,0.08); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--red); }
.sign-item strong { font-size: 0.88rem; color: var(--navy); display: block; margin-bottom: 2px; }
.sign-item span { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

/* ---- SERVICE PAGE: PROCESS STEPS ---- */
.process-steps { margin: 24px 0 32px; counter-reset: step; }
.process-step { display: flex; gap: 18px; margin-bottom: 20px; position: relative; }
.process-step::before { counter-increment: step; content: counter(step); width: 40px; height: 40px; background: var(--navy); color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; flex-shrink: 0; }
.process-step-content h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 4px 0; }
.process-step-content p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.6; }

@media (max-width: 600px) {
  .signs-grid { grid-template-columns: 1fr; }
}

/* Legacy link cards (a tags with service-feature classes on sub-pages) */
a.service-feature, a.grey-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy) !important;
  color: #fff !important;
  padding: 16px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  margin: 12px 0;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
  min-height: auto !important;
  max-width: 400px;
}
a.service-feature::after { content: '\2192'; margin-left: 12px; }
a.service-feature:hover, a.grey-feature:hover {
  background: var(--red) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ---- SUB-PAGE INFO POINTS ---- */
.info-points-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 28px; }
.info-point { background: #fff; border: 1px solid rgba(10,22,40,0.06); border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(10,22,40,0.04); }
.info-point h4 { font-size: 0.95rem; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.info-point p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
@media (max-width: 600px) { .info-points-list { grid-template-columns: 1fr; } }

/* Legacy hidden elements */
.fancybox-hidden { display: none; }

/* Legacy CTA buttons */
.main-but, a.main-but {
  display: inline-block;
  background: var(--red);
  color: #fff !important;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s;
  margin: 8px 0;
}
.main-but:hover { background: var(--red-hover); }
.video-but { background: var(--navy); }
.video-but:hover { background: var(--navy-light); }

/* ---- PAGE CTA + TRUSTPILOT ---- */
.trustpilot-section { padding: 40px 0; border-top: 1px solid rgba(10,22,40,0.06); }
.trustpilot-section .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.page-cta-section { background: var(--warm-grey); padding: 48px 0; text-align: center; }
.page-cta-section .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.page-cta-section .btn-secondary { background: var(--navy); color: #fff; border: none; }
.page-cta-section .btn-secondary:hover { background: var(--navy-light); }
.page-cta-section h2 { font-size: 1.4rem; margin: 0 0 8px; }
.page-cta-section p { color: var(--text-muted); margin-bottom: 20px; }
.page-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; border: 2px solid var(--navy); color: var(--navy); border-radius: var(--radius); font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: all 0.2s; }
.btn-outline:hover { background: var(--navy); color: #fff; }

/* ---- MEET THE TEAM ---- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0 36px; }
.team-member { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(10,22,40,0.06); box-shadow: var(--shadow-sm); text-align: center; }
.team-member img { width: 100%; height: 160px; object-fit: cover; display: block; }
.team-member strong { display: block; padding: 12px 12px 2px; font-size: 0.95rem; color: var(--navy); }
.team-member span { display: block; padding: 0 12px 14px; font-size: 0.8rem; color: var(--text-muted); }
@media (max-width: 700px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- MORE SERVICES BUTTON (homepage) ---- */
.more-services-btn { padding: 12px 32px; background: none; border: 2px solid rgba(10,22,40,0.1); border-radius: 100px; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all 0.2s; font-family: inherit; }
.more-services-btn:hover { border-color: var(--red); color: var(--red); }

/* ---- MORE PESTS BUTTON ---- */
.more-pests-btn { display: block; width: 100%; margin-top: 10px; padding: 8px; background: none; border: 1px solid rgba(10,22,40,0.1); border-radius: 8px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all 0.2s; font-family: inherit; }
.more-pests-btn:hover { border-color: var(--red); color: var(--red); }
.related-pests-more { margin-top: 8px; }

/* ---- OPENING HOURS TABLE ---- */
.jg-opening-hours-list { border-radius: var(--radius); overflow: hidden; margin: 20px 0 28px; border: 1px solid rgba(10,22,40,0.06); }
.jg-hours-row { display: flex; justify-content: space-between; padding: 14px 24px; font-size: 0.95rem; border-bottom: 1px solid rgba(10,22,40,0.05); }
.jg-hours-row:last-child { border-bottom: none; }
.jg-hours-row:nth-child(even) { background: var(--warm-grey); }
.jg-hours-row strong { color: var(--navy); min-width: 120px; }

/* ---- LEIGH FEEDBACK FIXES ---- */

/* Full width pages (terms, emergency, 24hr, about, faq) */
.page-id-46 .content-layout,
.page-id-3712 .content-layout,
.page-id-3714 .content-layout { grid-template-columns: 1fr !important; max-width: 800px; }
.page-id-46 .sidebar,
.page-id-3712 .sidebar,
.page-id-3714 .sidebar { display: none; }

/* #6 - Iframes responsive (videos, terms) */
.entry-content iframe { max-width: 100%; border: none; border-radius: var(--radius); margin: 16px 0; }
.entry-content iframe.no-style { border: none; }
.entry-content iframe[src*="youtube"] { aspect-ratio: 16/9; width: 100%; height: auto; }

/* #8, #9 - Legacy "Click here" links styled as buttons */
.entry-content a[href*="click"],
.entry-content a[href] > strong {
  color: var(--red);
  font-weight: 700;
}

/* #12 - Prevent same-day badge overlapping other elements */
.sameday-badge { z-index: 998; }
.promo-badge { z-index: 997; }

/* #14, #23 - Phone numbers should not wrap */
.entry-content a[href^="tel"] { white-space: nowrap; }

/* #25, #26 - Bed bug heat treatment step alignment */
.entry-content ol li { padding-left: 4px; }

/* #17, #22 - Normalise heading sizes inside legacy service content */
.entry-content .wrapper h2,
.entry-content .wide-area h2 { font-size: 1.6rem; font-weight: 800; }
.entry-content .wrapper h3,
.entry-content .wide-area h3 { font-size: 1.3rem; font-weight: 700; }

/* ---- Contact page: address cards + form wrap (added 2026-05-27) ---- */
.contact-form-wrap { max-width: 760px; margin: 0 auto 2.5rem; }

.contact-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.contact-address {
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(10,22,40,0.04);
}
.contact-address h3,
.contact-address h4 {
  margin: 0 0 0.6rem;
  color: #0a1628;
  line-height: 1.25;
}
.contact-address h3 { font-size: 1.05rem; }
.contact-address h4 { font-size: 0.95rem; color: #475569; }
.contact-address p { margin: 0; line-height: 1.55; color: #1e293b; font-size: 0.95rem; }
.contact-address .contact-address-note {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: #94a3b8;
  font-style: italic;
}

/* Primary card: highlighted, full-width above the secondary pair */
.contact-address-primary {
  grid-column: 1 / -1;
  border: 2px solid #dc2626;
  background: linear-gradient(135deg, #fef3f2 0%, #ffffff 60%);
  position: relative;
}
.contact-address-primary::before {
  content: 'Correspondence Address';
  position: absolute;
  top: -10px;
  left: 1.25rem;
  background: #dc2626;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}
.contact-address-primary h3 { padding-top: 0.25rem; }

@media (max-width: 640px) {
  .contact-addresses { grid-template-columns: 1fr; }
}

/* Non-linked pest entry: same shape as a related-pest but without hover/anchor styling */
.related-pest-soft {
  cursor: default;
  color: var(--text-muted, #6b7280);
}
.related-pest-soft:hover {
  border-color: rgba(10,22,40,0.06);
  color: var(--text-muted, #6b7280);
}