/* ==========================================================================
   PestoKill — UI/UX Refinements
   --------------------------------------------------------------------------
   Purpose : Responsiveness, alignment, spacing, consistency & a11y polish.
   Scope   : Additive overrides ONLY. No redesign, no colour/brand changes.
   Loading : Must be linked LAST, after main.css, on every page.
   Tokens  : Reuses existing :root vars (--theme, --header, --text, etc.).
   Method  : Mobile-first within each concern; matches theme breakpoints
             (1399 / 1199 / 991 / 767 / 575 / 470 / 320).
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL — box model, overflow guard, fluid media
   ========================================================================== */

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

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

/* Kill horizontal scrolling everywhere. Decorative absolute shapes and
   parallax transforms in this theme can push content past the viewport. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.page-wrapper,
#smooth-wrapper,
#smooth-content,
section,
footer {
  max-width: 100%;
}

/* Media should never break the layout or force overflow. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

/* Slider / object-fit images deliberately fill their box — opt them back in. */
.slide img,
.hero-slider img,
.blog-image img,
.project-image img,
.testimonial-img img,
img[style*="object-fit"],
.thumb img[data-speed] {
  height: 100%;
}

/* Decorative background shapes: hidden site-wide for a cleaner, flatter look.
   Covers *-shape, *-bg-shape, shape-*, *-shape-N across all pages/sections. */
[class*="-shape"],
[class*="shape-"],
[class$="shape"],
.service-bg-shape,
.work-shape-1,
.work-shape-2,
.project-bg-shape,
.pricing-shape,
.hero-shape,
.blog-hero-shape,
.service-hero-shape,
.service-cta-shape,
img[src*="-shape"],
img[src*="shape-"] {
  display: none !important;
}

/* ==========================================================================
   2. CONTAINER & SECTION RHYTHM — consistent gutters and vertical spacing
   ========================================================================== */

/* Comfortable, consistent side gutters on phones/tablets. */
@media (max-width: 991px) {
  .container,
  .container-fluid {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 575px) {
  .container,
  .container-fluid {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* Standardise the theme's section rhythm so every block steps down evenly.
   Desktop spacing is left to the theme; we only tame the mid/small ranges. */
@media (max-width: 991px) {
  .section-padding {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .section-top-padding {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (max-width: 767px) {
  .section-padding {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .section-top-padding {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (max-width: 575px) {
  .section-padding {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .section-top-padding {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

/* Keep centred section titles balanced on small screens. */
@media (max-width: 767px) {
  .section-title {
    margin-bottom: 8px;
  }
  .section-title br {
    display: none;
  }
}

/* ==========================================================================
   3. TYPOGRAPHY — fluid scaling for readability, hierarchy preserved
   --------------------------------------------------------------------------
   Same fonts/weights as the theme; only the size curve is smoothed so big
   display headings stay readable down to 320px without overflowing.
   ========================================================================== */

@media (max-width: 991px) {
  .blog-hero-title {
    font-size: clamp(30px, 5vw, 44px);
  }
  .head h1 {
    font-size: clamp(28px, 5vw, 40px);
  }
}

@media (max-width: 575px) {
  .section-title h2,
  .title.split-title,
  h1 {
    line-height: 1.2;
  }
  .blog-hero-title {
    font-size: clamp(26px, 7vw, 32px);
  }
  .blog-hero-text {
    font-size: 16px;
  }
}

/* Prevent long unbroken strings (emails, URLs, phone numbers) overflowing. */
p,
li,
a,
span,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   4. NAVIGATION / HEADER — sticky, logo scaling, mobile bar, offcanvas
   ========================================================================== */

/* Logo scales down gracefully instead of dominating small bars. */
.header-logo img,
.offcanvas__logo img,
.footer-logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 575px) {
  .header-logo img,
  .offcanvas__logo img {
    max-height: 40px;
  }
}

/* Comfortable header padding on small screens. */
@media (max-width: 991px) {
  #header-sticky .header-main,
  .header-1 .header-main {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Hamburger / header action icons get proper touch targets (>= 44px). */
.header__hamburger button,
.header-right .sidebar__toggle,
.sidebar-button,
button.navbar-toggler,
.offcanvas__close button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Offcanvas panel: never wider than the screen, comfortable inner spacing. */
.offcanvas__info {
  max-width: 100%;
}

@media (max-width: 575px) {
  .offcanvas__info {
    width: 300px;
    padding: 20px;
  }
  .offcanvas__wrapper {
    padding: 0;
  }
}

/* Mobile dropdown menu items: easier to tap, evenly spaced. */
@media (max-width: 991px) {
  .mean-container .mean-nav ul li a,
  .main-menu nav > ul > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Smooth, consistent submenu reveal animation. */
.main-menu .submenu,
.main-menu ul li .submenu {
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}

/* ==========================================================================
   5. HERO SECTION — slider sizing, category grid, callback form
   --------------------------------------------------------------------------
   The slider had a fixed height:570px fighting an aspect-ratio rule, which
   distorted on laptops/tablets. Let aspect-ratio drive height for a clean,
   responsive image area at every width.
   ========================================================================== */

.hero-slider {
  height: auto;
  aspect-ratio: 19 / 11; /* desktop */
  min-height: 0;
}

@media (max-width: 1199px) {
  .hero-slider {
    aspect-ratio: 19 / 11;
  }
}

@media (max-width: 991px) {
  .hero-slider {
    aspect-ratio: 19 / 11;
    min-height: 0;
  }
}

@media (max-width: 575px) {
  .hero-slider {
    aspect-ratio: 19 / 11;
    min-height: 0;
  }
}

/* Category grid: comfortable columns that step down, never cramped at 320px. */
@media (max-width: 767px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 400px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.category-card:hover span {
  color: var(--theme, #ee9a3f);
}

/* About/second section images: tighter corners to match the new radius scale */
.about-thumb-style-1 .thumb,
.about-thumb-style-1 .thumb img,
.about-content-style-2 .thumb,
.about-content-style-2 .thumb img {
  border-radius: 10px;
}

/* Restore a sensible icon size on phones (theme shrinks to 42px at 991). */
@media (max-width: 575px) {
  .category-card img {
    width: 48px;
    height: 48px;
  }
}

/* Callback form: align nicely and give inputs room on small screens. */
@media (max-width: 575px) {
  .callback-form {
    padding: 18px;
    gap: 14px;
  }
}

/* ==========================================================================
   6. CARDS — equal height, consistent padding & radius
   --------------------------------------------------------------------------
   Equalising heights via the column flex so cards in a row line up cleanly.
   ========================================================================== */

.row.g-4 > [class*="col-"],
.row.g-3 > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Make the common card wrappers fill their column for equal heights. */
.work-process-box-items,
.service-box-items,
.blog-card,
.pricing-box-items,
.team-box-items,
.project-box-items,
.choose-box-items,
.feature-box-items {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Push any trailing CTA/button to the bottom for a tidy baseline. */
.work-process-box-items > .theme-btn,
.service-box-items .theme-btn,
.pricing-box-items .theme-btn,
.blog-card .blog-content .theme-btn {
  margin-top: auto;
}

/* Card imagery keeps aspect ratio without stretching. */
.blog-image,
.project-image,
.service-image {
  overflow: hidden;
}

/* Some grids use the bare Bootstrap .card — guard it against overflow only. */
.section-top-padding .card {
  max-width: 100%;
}

/* ==========================================================================
   7. BUTTONS — standardised sizing, focus, disabled, touch targets
   ========================================================================== */

.theme-btn,
.callback-btn,
.book,
.view,
button.theme-btn,
a.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* The instant-booking buttons lacked a defined height. */
.book {
  height: 52px;
  border-radius: 8px;
}

/* Consistent disabled state. */
.theme-btn:disabled,
.callback-btn:disabled,
.book:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Full-width primary CTAs feel better on phones. */
@media (max-width: 575px) {
  .callback-btn,
  .book {
    width: 100%;
  }
}

/* ==========================================================================
   8. FORMS — input heights, label spacing, alignment, mobile width
   ========================================================================== */

.input-group input,
.callback-form input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  max-width: 100%;
}

/* Consistent control height across the booking filters and forms. */
.filters select,
.filters .view {
  height: 52px;
}

textarea {
  min-height: 120px;
}

/* Inputs already 58px in the callback form; keep contact-form inputs aligned. */
@media (max-width: 575px) {
  .input-group input,
  .callback-form input {
    height: 52px;
  }
}

/* Honour iOS: 16px+ font on inputs prevents zoom-on-focus. */
input,
select,
textarea {
  font-size: 16px;
}

/* ==========================================================================
   9. INSTANT BOOKING — keep the fixed agent badge from blocking content
   ========================================================================== */

@media (max-width: 575px) {
  .agent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* ==========================================================================
   10. FOOTER — mobile/tablet stacking, alignment, social/contact spacing
   ========================================================================== */

@media (max-width: 991px) {
  .footer-top-wrapper {
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
    justify-content: center;
  }
  .footer-top-wrapper .social-icon {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .footer-widget-wrapper .single-footer-widget {
    margin-bottom: 8px;
  }
  .footer-bottom-area {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-bottom-area .footer-menu {
    justify-content: center;
  }
}

/* Footer social icons: consistent, tappable circles. */
.footer-section .social-icon a,
.offcanvas__info .social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

/* ==========================================================================
   11. ACCESSIBILITY — visible focus, reduced motion, skip target
   ========================================================================== */

/* Keyboard focus ring (does not affect mouse users via :focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .float-bob-y,
  .float-bob-x {
    animation: none !important;
  }
}

/* ==========================================================================
   12. UTILITY GUARDS — tables, pre/code, and last-element spacing
   ========================================================================== */

table {
  max-width: 100%;
}

pre,
code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Remove stray bottom margin on the final paragraph inside content blocks. */
.section-title p:last-child,
.footer-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   13. MOBILE OVERFLOW FIX + HERO SLIDER POLISH  (Phase-1 patch)
   --------------------------------------------------------------------------
   Root cause of the mobile horizontal scroll: the off-canvas menu
   (.offcanvas__info) is position:fixed and parked OFF the right edge via
   transform:translateX(100%+80px). A fixed element sitting outside the
   viewport adds to the page scroll width, and overflow-x:hidden on <body>
   cannot clip fixed elements. Fix: make its wrapper (.fix-area) a
   full-viewport clipping layer and position the panel ABSOLUTELY inside it,
   so the off-screen portion is clipped. Visual/animation is unchanged.
   ========================================================================== */

.fix-area {
  position: fixed;
  inset: 0;
  overflow: hidden; /* clips the off-screen panel -> no h-scroll */
  pointer-events: none; /* let clicks pass through to the page */
  z-index: 9999999;
}

.offcanvas__info {
  position: absolute; /* was fixed; now clipped by .fix-area */
  pointer-events: auto; /* keep the panel interactive */
}

/* Extra safety net: nothing may create horizontal scroll */
html,
body {
  width: 100%;
  overflow-x: hidden;
}

/* ---- Hero slider: neat, proportional sizing + comfortable padding ---- */
@media (max-width: 991px) {
  .hero-section.section-padding,
  .hero-1.section-padding {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero-slider {
    height: auto;
    aspect-ratio: 19 / 11;
    min-height: 0;
    border-radius: 10px;
  }
  .hero-right {
    margin-top: 6px;
  }
}
/* (mobile hero-slider ratio is set in the block below) */

@media (max-width: 575px) {
  .hero-slider {
    aspect-ratio: 19 / 11;
    min-height: 0;
    border-radius: 10px;
  }
  /* smaller, inset controls so they don't crowd the edges */
  .hero-slider .slider-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  .hero-slider .prev {
    left: 10px;
  }
  .hero-slider .next {
    right: 10px;
  }
  .hero-slider .slider-dots {
    bottom: 10px;
  }

  .callback-form {
    margin-top: 16px;
    padding: 16px;
    border-radius: 10px;
    gap: 12px;
  }
  .pest-categories {
    padding: 16px;
    border-radius: 10px;
  }
  .category-grid {
    gap: 10px;
  }
}

/* ==========================================================================
   14. Remove the custom "magic cursor" (following dot/ring)
   ========================================================================== */
.mouseCursor,
.cursor-outer,
.cursor-inner {
  display: none !important;
}

/* ==========================================================================
   15. Point/feature list icon — SVG spray icon (replaces old leaf image)
   ========================================================================== */
.pd-point-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  vertical-align: -3px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ee9a3f'%3E%3Crect x='7.5' y='9' width='7' height='13' rx='2'/%3E%3Crect x='8.5' y='6' width='5' height='3' rx='1'/%3E%3Crect x='9.5' y='2.5' width='3' height='3.5' rx='1'/%3E%3Ccircle cx='17' cy='3' r='1'/%3E%3Ccircle cx='19.5' cy='5' r='1'/%3E%3Ccircle cx='17' cy='7.2' r='1'/%3E%3C/svg%3E");
}

/* Align icon + text on each point */
.about-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Clear gap in the middle between the two point columns */
.about-content-style-2 .about-list {
  justify-content: flex-start;
  gap: 40px;
}
@media (max-width: 575px) {
  .about-content-style-2 .about-list {
    gap: 20px;
  }
}

/* ==========================================================================
   16. "Why PestoKill" — clean 5-across feature grid (responsive)
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.why-card {
  background: #fff;
  border: 1px solid #eaefe9;
  border-radius: 10px;
  padding: 26px 18px;
  text-align: center;
  height: 100%;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(50, 52, 85, 0.1);
}
.why-card .why-ic {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--green-light, #fdf4ec);
  color: var(--theme, #ee9a3f);
  display: grid;
  place-items: center;
  font-size: 24px;
}
.why-card h3 {
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--header, #141414);
}
.why-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text, #54595f);
  margin: 0;
}

/* Responsive: 5 -> 3 -> 2 -> 1, never clumsy */
@media (max-width: 1199px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (max-width: 420px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Instant Booking — flush top (padding-top 0, bottom stays as-is)
   ============================================================================= */
.pd-flush-top {
  padding-top: 0 !important;
}

/* =============================================================================
   Our Process — wavy 4-step layout with transparent step images
   Same .container width as the rest of the homepage. No branding changes.
   ============================================================================= */
.pd-process {
  position: relative;
  background: #fff;
}
.pd-process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 54px;
}

/* dotted wavy connector weaving through the step circles (desktop only) */
.pd-process-wave {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 0;
  pointer-events: none;
}
.pd-process-wave path {
  fill: none;
  stroke: var(--theme, #ee9a3f);
  stroke-width: 2.5;
  stroke-dasharray: 1 15;
  stroke-linecap: round;
  opacity: 0.55;
}

.pd-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 6px;
}
.pd-step-media {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at 50% 38%,
    #ffffff 0%,
    #fdf4ec 68%,
    #fdf4ec 100%
  );
  border: 1px solid #fdf4ec;
  box-shadow: 0 16px 34px rgba(238, 154, 63, 0.14);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.pd-step:hover .pd-step-media {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px rgba(238, 154, 63, 0.22);
}
.pd-step-media img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}
.pd-step-num {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--theme, #ee9a3f);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(238, 154, 63, 0.35);
}
.pd-step h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--header, #141414);
  margin: 0 0 10px;
  line-height: 1.3;
}
.pd-step p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text, #54595f);
  margin: 0 auto;
  max-width: 260px;
}

/* CTA below the process */
.pd-process-cta {
  text-align: center;
  margin-top: 56px;
}
.pd-process-cta h4 {
  font-size: 22px;
  font-weight: 800;
  color: var(--header, #141414);
  margin: 0 0 18px;
}

/* ---- desktop: show wavy connector ---- */
@media (min-width: 992px) {
  .pd-process-wave {
    display: block;
  }
}

/* ---- tablet: 2 columns ---- */
@media (max-width: 991px) {
  .pd-process-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 24px;
  }
}

/* ---- mobile: single column with a vertical dotted connector ---- */
@media (max-width: 575px) {
  .pd-process-track {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .pd-process-track::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
      var(--theme, #ee9a3f) 0 4px,
      transparent 4px 14px
    );
    opacity: 0.4;
    z-index: 0;
  }
  .pd-step-media {
    width: 128px;
    height: 128px;
  }
  .pd-step-media img {
    width: 76px;
    height: 76px;
  }
}

/* =============================================================================
   Commercial Services cards (repurposed "Our Project" slider)
   - Smaller, consistent border radius
   - Image + content always visible (better for SEO + a proper card look)
   - Soft gradient overlay for readable white text, subtle hover zoom
   Scoped to .pd-commercial so the base component elsewhere is untouched.
   ============================================================================= */
.pd-commercial .project-thumb-box-items {
  border-radius: 12px;
  overflow: hidden;
  margin-top: 0;
  height: 360px;
}
.pd-commercial .project-thumb-box-items::before {
  display: none; /* remove the hover blur layer */
}
.pd-commercial .project-thumb-box-items::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(22, 23, 38, 0.86) 0%,
    rgba(22, 23, 38, 0.45) 38%,
    rgba(22, 23, 38, 0) 68%
  );
}

/* single image = always visible base (neutralise the reveal-on-hover trick) */
.pd-commercial .project-thumb-box-items img,
.pd-commercial .project-thumb-box-items img:first-child {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  opacity: 1;
  filter: none;
  border-radius: 12px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.pd-commercial .project-thumb-box-items:hover img,
.pd-commercial .project-thumb-box-items:hover img:first-child {
  transform: scale(1.06);
}

/* content + arrow always visible */
.pd-commercial .project-thumb-box-items .hover-content .content {
  opacity: 1;
  visibility: visible;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
}
.pd-commercial .project-thumb-box-items .hover-content .content p {
  color: #fff;
  opacity: 0.9;
  font-size: 13px;
  margin: 0 0 6px;
}
.pd-commercial .project-thumb-box-items .hover-content .content .title {
  font-size: 19px;
  margin-top: 0;
  line-height: 1.35;
}
.pd-commercial .project-thumb-box-items .hover-content .content .title a {
  color: #fff;
}
.pd-commercial .project-thumb-box-items .hover-content .arrow-icon {
  opacity: 1;
  visibility: visible;
  top: 20px;
  right: 20px;
  border-radius: 10px;
  z-index: 3;
}

@media (max-width: 767px) {
  .pd-commercial .project-thumb-box-items {
    height: 340px;
  }
}

/* =============================================================================
   Footer — compact, 5-column, simple on mobile
   Replaces the tall image CTA footer. Brand colours kept. Background set here
   (absolute path) so the same markup works on root and /branches/ pages.
   ============================================================================= */
.pd-footer {
  position: relative;
  color: #c3c6d2;
  background:
    linear-gradient(rgba(24, 25, 42, 0.93), rgba(24, 25, 42, 0.965)),
    url("/assets/img/home-1/footer-bg.webp") center / cover no-repeat;
}
.pd-footer .container {
  position: relative;
  z-index: 1;
}
.pd-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.1fr 1.1fr 1.5fr;
  gap: 34px;
  padding: 60px 0 44px;
}

/* brand column */
.pd-foot-logo {
  display: inline-block;
  background: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  line-height: 0;
}
.pd-foot-logo img {
  height: 44px;
  width: auto;
}
.pd-foot-brand p {
  font-size: 14px;
  line-height: 1.7;
  margin: 16px 0 18px;
  color: #b8bcc9;
  max-width: 320px;
}
.pd-foot-social {
  display: flex;
  gap: 10px;
}
.pd-foot-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 15px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.pd-foot-social a:hover {
  background: var(--theme, #ee9a3f);
  transform: translateY(-3px);
}

/* link columns */
.pd-foot-col h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
  position: relative;
  padding-bottom: 10px;
}
.pd-foot-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--theme, #ee9a3f);
}
.pd-foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-foot-col ul li {
  margin-bottom: 11px;
}
.pd-foot-col ul li a {
  color: #b8bcc9;
  font-size: 14px;
  text-decoration: none;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}
.pd-foot-col ul li a:hover {
  color: #fff;
  padding-left: 5px;
}

/* contact column */
.pd-foot-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-foot-contact-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: #b8bcc9;
  line-height: 1.55;
  margin-bottom: 13px;
}
.pd-foot-contact-list li i {
  color: var(--theme, #ee9a3f);
  margin-top: 3px;
  width: 16px;
  text-align: center;
  flex: none;
}
.pd-foot-contact-list a {
  color: #b8bcc9;
  text-decoration: none;
}
.pd-foot-contact-list a:hover {
  color: #fff;
}

/* bottom bar */
.pd-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.pd-footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: #9ea3b2;
}
.pd-footer-bottom p a {
  color: #f6a94a;
  text-decoration: none;
}
.pd-footer-bottom ul {
  list-style: none;
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.pd-footer-bottom ul li a {
  color: #9ea3b2;
  font-size: 13px;
  text-decoration: none;
}
.pd-footer-bottom ul li a:hover {
  color: #fff;
}

/* tablet */
@media (max-width: 991px) {
  .pd-footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding: 50px 0 36px;
  }
  .pd-foot-brand {
    grid-column: 1 / -1;
  }
}

/* mobile: simple footer (header already provides navigation) */
@media (max-width: 575px) {
  .pd-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0 26px;
    text-align: center;
  }
  .pd-foot-brand p {
    max-width: none;
    margin-inline: auto;
  }
  .pd-foot-social {
    justify-content: center;
  }
  .pd-foot-nav {
    display: none; /* hide link columns on mobile — keep it simple */
  }
  .pd-foot-col h3::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .pd-foot-contact-list li {
    justify-content: center;
    text-align: left;
  }
  .pd-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* =============================================================================
   FAQ (homepage) — wider container (>= commercial section) + smaller,
   more compact text. Scoped to .faq-section-inner-2 so other FAQs are untouched.
   ============================================================================= */
.faq-section-inner-2 .container {
  max-width: 1500px;
}
.faq-section-inner-2 .accordion-box .block .acc-btn {
  font-size: 16px;
  line-height: 1.45;
  padding: 18px 22px;
}
.faq-section-inner-2 .accordion-box .block .acc-btn .icon {
  top: 20px;
  font-size: 14px;
}
.faq-section-inner-2 .accordion-box .block .acc-content {
  padding: 2px 22px 20px;
}
.faq-section-inner-2 .accordion-box .block .acc-content .content .text {
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 1399px) {
  .faq-section-inner-2 .accordion-box .block .acc-btn {
    font-size: 16px;
  }
}
@media (max-width: 575px) {
  .faq-section-inner-2 .accordion-box .block .acc-btn {
    font-size: 15px;
    padding: 15px 18px;
  }
  .faq-section-inner-2 .accordion-box .block .acc-btn .icon {
    top: 17px;
  }
  .faq-section-inner-2 .accordion-box .block .acc-content .content .text {
    font-size: 13.5px;
  }
}

/* =============================================================================
   Mobile only (<=767px): show the Instant Booking section first, then the rest.
   Scoped to the homepage (.home-content) so other pages are unaffected.
   The now-first section gets 140px top padding to clear the header.
   ============================================================================= */
@media (max-width: 767px) {
  #smooth-content.home-content {
    display: flex;
    flex-direction: column;
  }
  #smooth-content.home-content > #instant-booking {
    order: -1;
    padding-top: 120px !important;
  }
  #smooth-content.home-content > .pd-footer {
    order: 2; /* keep the footer last */
  }
  /* first section heading: centered with comfortable side padding */
  #instant-booking .head {
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =============================================================================
   Mobile menu (offcanvas + MeanMenu) — light theme using brand colours.
   The default panel is dark (var(--header)) and MeanMenu paints #070337 with
   white uppercase text. This rebuilds it as a clean light menu and makes the
   submenu (Residential / Branches) expand toggles clearly tappable.
   Scoped to <=1199px (where the hamburger/offcanvas is used) — desktop is
   untouched.
   ============================================================================= */
@media (max-width: 1199px) {
  /* --- light panel --- */
  .offcanvas__info {
    background: #ffffff;
    width: min(470px, 90vw);
  }
  .offcanvas__wrapper .offcanvas__close i {
    color: var(--header, #141414);
  }
  .offcanvas__wrapper .offcanvas__close:hover i {
    color: var(--theme, #ee9a3f);
  }
  .offcanvas__wrapper .text,
  .offcanvas__wrapper .off-contact-info .contact-details .sub-info {
    color: #6b7280;
  }
  .offcanvas__wrapper .off-contact-info .info-title,
  .offcanvas__wrapper .off-contact-info .contact-details p,
  .offcanvas__wrapper .off-contact-info .contact-details p a,
  .offcanvas__wrapper .social-icon-list .follow-title {
    color: var(--header, #141414);
  }
  .off-contact-info {
    border-top: 1px solid #eef0ec;
    padding-top: 22px;
  }

  /* --- MeanMenu: light background, dark text --- */
  .mean-container .mean-bar {
    background: transparent;
    padding: 0;
    min-height: 0;
  }
  .mean-container a.meanmenu-reveal {
    display: none !important; /* we open via our own hamburger */
  }
  .mean-container .mean-nav {
    background: transparent;
    margin-top: 0;
  }
  .mean-container .mean-nav > ul {
    border-top: 1px solid #eef0ec;
  }
  .mean-container .mean-nav ul li a {
    color: var(--header, #141414);
    border-top: 1px solid #eef0ec;
    text-transform: none;
    font-size: 15px;
    font-weight: 600;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .mean-container .mean-nav ul li li a {
    color: #54595f;
    font-weight: 500;
    font-size: 14px;
    text-transform: none;
    opacity: 1;
    background: #fafbf8;
  }
  .mean-container .mean-nav ul li a:hover {
    color: var(--theme, #ee9a3f);
  }

  /* --- submenu expand (+/-) toggle: brand-coloured, easy to tap --- */
  .mean-container .mean-nav ul li a.mean-expand {
    top: 3px;
    right: 4px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    padding: 0 !important;
    text-align: center;
    border: none !important;
    border-radius: 8px;
    color: #fff;
    background: var(--theme, #ee9a3f);
    font-size: 18px;
    font-weight: 700;
  }
  .mean-container .mean-nav ul li a.mean-expand:hover {
    background: var(--header, #141414);
    color: #fff;
  }
  /* hide the decorative chevron icons carried over from the desktop nav */
  .mean-container .mean-nav ul li > a > i.fa-chevron-down {
    display: none;
  }
}

/* =============================================================================
   Mobile menu fixes:
   1) The first nav item (Residential = all Services) carries the .menu-thumb
      class, which main.css hides with `display:none !important` below 1199px —
      so the whole Services dropdown vanished on mobile. Re-show it in the clone.
   2) "Follow us" social icons were white on a near-white chip (invisible on the
      new light panel) — give them a visible brand-tinted style.
   ============================================================================= */
@media (max-width: 1199px) {
  .mean-container .mean-nav ul li.menu-thumb {
    display: block !important;
  }
  .mean-container .mean-nav ul li.menu-thumb > a {
    display: block;
    width: 100%;
  }

  .offcanvas__wrapper .social-icon-list .social-icon a {
    background: #fdf4ec;
    color: var(--theme, #ee9a3f);
    border: 1px solid #f3e6d5;
  }
  .offcanvas__wrapper .social-icon-list .social-icon a:hover {
    background: var(--theme, #ee9a3f);
    color: #fff;
    border-color: var(--theme, #ee9a3f);
  }
}

/* =============================================================================
   Preloader — smaller, single-line, perfectly centered on mobile.
   (Default 70px "PEST DOCTOR" is too wide for phones and wraps/overflows.)
   ============================================================================= */
@media (max-width: 767px) {
  .loader {
    font-size: 40px;
    line-height: 1.3;
    white-space: nowrap;
    text-align: center;
  }
}
@media (max-width: 400px) {
  .loader {
    font-size: 32px;
  }
}

/* =============================================================================
   About section — mobile alignment fix.
   main.css leaves `.style-about-one { margin-left:35px }` un-reset on stacked
   layouts, so the block sits indented. Reset it and make everything cleanly
   left-aligned: title, text, the feature points (one stacked column) and CTA.
   ============================================================================= */
@media (max-width: 991px) {
  .about-content-style-2.style-about-one {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .about-content-style-2 {
    text-align: left;
  }
  .about-content-style-2 .about-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: none;
  }
  .about-content-style-2 .about-list ul {
    width: 100%;
    margin: 0;
  }
  .about-content-style-2 .about-list ul li {
    font-size: 16px;
    align-items: flex-start;
    text-align: left;
  }
  .about-content-style-2 .about-list ul li:not(:last-child) {
    margin-bottom: 12px;
  }
  .about-content-style-2 .about-list ul li .pd-point-icon {
    margin-top: 4px;
  }
  .about-content-style-2 .theme-btn {
    margin-top: 24px;
  }
}

/* =============================================================================
   Inner pages (not the homepage): consistent 105px top padding on the first /
   hero section so it clears the fixed header uniformly. Home uses .hero-1 and
   is unaffected.
   ============================================================================= */
.service-hero-modern,
.contact-hero,
.blog-hero,
.terms-hero,
.privacy-hero,
.comm-hero,
.error-hero,
.news-details-section {
  padding-top: 105px !important;
}
.about-hero .container {
  padding-top: 105px !important;
}

/* =============================================================================
   Service pages — on mobile/stacked view, show the booking form immediately
   after the hero (before the long service content). On desktop the form stays
   in its sticky right column. Applies to all service pages via shared classes.
   ============================================================================= */
@media (max-width: 991px) {
  .service-booking-modern .row > .service-booking-col {
    order: -1;
    margin-bottom: 28px;
  }
  .service-booking-sticky {
    position: static !important;
    top: auto !important;
  }
}
/* Above 992px the card is held in place by a ScrollTrigger pin (see main.js —
   CSS sticky doesn't work inside ScrollSmoother's transformed content). Leaving
   main.css's `position: sticky` in place as well meant two mechanisms fighting
   over the same element, which is what pushed the card out of its column. */
@media (min-width: 992px) {
  .service-booking-sticky {
    position: relative;
    top: auto;
    /* the pin sets an explicit width; make sure it can never spill past the
       column even for one frame while re-measuring */
    max-width: 100%;
  }
  .service-booking-col {
    align-self: flex-start;
  }

  /* The form runs 550-900px depending on how many options the service has, so on
     a 768- or 800-tall laptop it would be taller than the space under the header.
     Capping it to the available height (with its own scroll when it overflows)
     means it always fits, so it can always be pinned and every field stays
     reachable. The widget uses native <select> elements, whose popups are drawn
     outside the box, so the clipping is safe. */
  .service-booking-card {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
  .service-booking-card::-webkit-scrollbar {
    width: 6px;
  }
  .service-booking-card::-webkit-scrollbar-thumb {
    background: #e3e6ea;
    border-radius: 3px;
  }
  .service-booking-card::-webkit-scrollbar-thumb:hover {
    background: #d2d6dc;
  }
  .service-booking-card {
    scrollbar-width: thin;
    scrollbar-color: #e3e6ea transparent;
  }
}

/* -----------------------------------------------------------------------------
   Booking card density. The card was airy enough that on common laptop heights
   it could not be shown in full. Tightening the paddings and gaps buys back
   ~90px without changing a single label.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .service-booking-card {
    padding: 24px 22px;
  }
  .service-booking-header {
    padding-bottom: 14px;
    margin-bottom: 14px;
  }
  .service-booking-card .pdb-widget {
    padding-top: 0;
    padding-bottom: 0;
    row-gap: 14px;
  }
  .service-booking-card .pdb-qb-filters {
    row-gap: 10px;
  }
  .service-booking-card .pdb-qb-result {
    padding-top: 12px;
    padding-bottom: 12px;
    row-gap: 12px;
  }
}

/* =============================================================================
   Home About section (mobile only): move the stats counter box to the TOP of
   the image as a horizontal single-line bar (3 stats side by side) instead of
   the tall vertical overlay, which looked cramped on phones.
   ============================================================================= */
@media (max-width: 767px) {
  .about-thumb-style-1 .thumb .counter-list-box {
    top: 16px;
    bottom: auto;
    left: 16px;
    right: 16px;
    padding: 14px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }
  .about-thumb-style-1 .thumb .counter-list-box .counter-items {
    flex: 1;
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
    text-align: center;
  }
  .about-thumb-style-1
    .thumb
    .counter-list-box
    .counter-items:not(:last-child) {
    border-right: 1px solid rgb(219, 219, 219);
  }
  .about-thumb-style-1 .thumb .counter-list-box .counter-items h2 {
    font-size: 20px;
    margin-bottom: 2px;
    line-height: 1.1;
  }
  .about-thumb-style-1 .thumb .counter-list-box .counter-items p {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* =============================================================================
   Scroll lock — applied while the booking popup or the mobile menu is open.
   JS pauses ScrollSmoother; this also hard-stops any native background scroll.
   ============================================================================= */
html.pd-scroll-lock,
html.pd-scroll-lock body {
  overflow: hidden !important;
}

/* =============================================================================
   Thank-you popup (enquiry forms)
   ============================================================================= */
.pd-thanks-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 21, 36, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pd-thanks-overlay.is-open {
  opacity: 1;
}
.pd-thanks-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 14px;
  padding: 30px 24px 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  transform: translateY(14px);
  transition: transform 0.25s ease;
}
.pd-thanks-overlay.is-open .pd-thanks-box {
  transform: none;
}
.pd-thanks-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f1f1f1;
  color: #333;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pd-thanks-close:hover {
  background: #e4e4e4;
}
.pd-thanks-icon {
  font-size: 56px;
  line-height: 1;
  color: var(--theme, #ee9a3f);
  margin-bottom: 10px;
}
.pd-thanks-box h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--header, #141414);
  margin: 0 0 6px;
}
.pd-thanks-box p {
  font-size: 14px;
  color: var(--text, #54595f);
  margin: 0 0 14px;
  line-height: 1.6;
}
.pd-thanks-ref {
  display: inline-block;
  background: #f4f7ef;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--header, #141414);
  margin-bottom: 16px;
}
.pd-thanks-wa {
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}

/* =============================================================================
   About page — Core Values / Operational Excellence / Our Strengths.
   All three columns now use the same vertical .about-value-card stack. Ensure
   the text block can shrink so nothing overflows in the narrow desktop columns.
   ============================================================================= */
.about-values-section .about-value-card > div {
  min-width: 0;
}
.about-values-section .about-value-card h5,
.about-values-section .about-value-card p {
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .about-values-section .about-values-heading {
    margin-top: 8px;
  }
}

/* Commercial services section — soft background provided with the new images */
.pd-commercial {
  background-image: url("/assets/img/home-1/commercial-card-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =============================================================================
   Testimonials — customer photo replaced with a clean user icon avatar.
   ============================================================================= */
.testi-content .client-info .client-img {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  background: var(--green-light, #fdf4ec);
  color: var(--theme, #ee9a3f);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: none;
  overflow: hidden;
}

/* =============================================================================
   Service pages (desktop >=992px): the booking card is a narrow right column,
   so stack the Property/Treatment/Plan dropdowns one-by-one (full width of the
   card) instead of cramming them into a row where the text truncates.
   Homepage full-width widget and mobile layout are unaffected.
   ============================================================================= */
@media (min-width: 992px) {
  .service-booking-card .pdb-qb-filters {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =============================================================================
   MEGA-MENU DROPDOWNS  (Residential / Industries / Branches)
   -----------------------------------------------------------------------------
   Card-grid dropdown panels with an icon per item, replacing the old single
   narrow column. The markup stays a plain nested <ul class="submenu"> so the
   mobile meanmenu clone keeps working — the grid is purely CSS and is switched
   off below the desktop breakpoint.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Top-level bar: keep the six links on a single row.
   The theme's 35px item gaps plus 40px wrapper padding left the row only a few
   pixels of slack, so it flipped to two rows at some widths (1440, 1200) and not
   others. Flex + nowrap + tighter gaps makes it deterministic.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .header-main .mean__menu-wrapper {
    padding-inline: 22px;
  }
  .header-main .main-menu > nav > ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  .header-main .main-menu > nav > ul > li {
    margin-inline-end: 26px;
  }
  .header-main .main-menu > nav > ul > li:last-child {
    margin-inline-end: 0;
  }
  .header-main .main-menu > nav > ul > li > a {
    white-space: nowrap;
  }
}

/* Mega panels are anchored to the menu bar rather than to each trigger.
   Centring under the trigger pushed the wide Residential panel off the left
   edge of the viewport; aligning every panel to the left of the nav keeps them
   on screen and consistent with each other. Anchoring to .main-menu (rather
   than .header-main) also means the panel's top edge touches the link row, so
   there is no dead gap for the pointer to cross on the way down.
   main.css positions .submenu absolutely, so the <li> must stay static for
   .main-menu to become the containing block. */
.header-main .main-menu {
  position: relative;
}
.header-main .main-menu ul li.has-dropdown {
  position: static;
}
.header-main .main-menu ul li .submenu.submenu-mega {
  inset-inline-start: 0;
  transform: scaleY(0);
  transform-origin: top;
  display: grid;
  gap: 0;
  padding: 14px;
  border-radius: 14px;
  min-width: 0;
  box-shadow: rgba(20, 20, 20, 0.16) 0px 18px 44px 0px;
}

.header-main .main-menu ul li:hover > .submenu.submenu-mega {
  transform: scaleY(1);
}

/* Column counts per panel size. Widths are set so the longest label
   ("Banks & Financial Institutions") fits on one line — see the nowrap rule on
   the item link below. The max-width guard keeps the panel on screen if the
   viewport is narrower than the panel's natural width. */
.header-main .main-menu ul li .submenu.submenu-mega.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 900px;
}
.header-main .main-menu ul li .submenu.submenu-mega.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 620px;
}
.header-main .main-menu ul li .submenu.submenu-mega {
  max-width: calc(100vw - 260px);
}

/* Each item becomes a card. */
.header-main .main-menu ul li .submenu.submenu-mega > li {
  width: auto;
  margin: 0;
  border-radius: 10px;
  transition: background 0.22s ease;
}
.header-main .main-menu ul li .submenu.submenu-mega > li:hover {
  background: #fdf4ec;
}

/* One line per item. Wrapping made rows different heights (61px vs 81px), which
   is what made the open panel look ragged. Sentence case instead of the theme's
   uppercase keeps the longest labels inside a 290px column. */
.header-main .main-menu ul li .submenu.submenu-mega > li > a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  min-height: 48px;
  line-height: 1.3;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--header);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-start;
  border-radius: 10px;
}

/* Kill the inherited underline pip from the plain submenu style. */
.header-main .main-menu ul li .submenu.submenu-mega > li > a::before,
.header-main .main-menu ul li .submenu.submenu-mega > li > a::after {
  display: none;
}

/* main.css nudges submenu links 10px to the right on hover
   (`.submenu li:hover > a { margin-left: 10px }`). In a card grid that reads as
   the item jumping out of alignment, so the shift is dropped and the hover is
   expressed by the card background and icon chip instead. */
.header-main .main-menu ul li .submenu.submenu-mega > li:hover > a {
  margin-left: 0;
  color: var(--theme) !important;
}

/* Icon chip. */
.header-main .main-menu ul li .submenu.submenu-mega > li > a i {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f4f6f9;
  color: var(--theme);
  font-size: 14px;
  transition:
    background 0.22s ease,
    color 0.22s ease;
}
.header-main .main-menu ul li .submenu.submenu-mega > li:hover > a i {
  background: var(--theme);
  color: #fff;
}

/* Optional supporting line under a label. */
.header-main .main-menu ul li .submenu.submenu-mega > li > a span {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: #7a7f8c;
  margin-top: 2px;
}

/* Full-width footer row inside a mega panel (e.g. "View all industries"). */
.header-main .main-menu ul li .submenu.submenu-mega > li.mega-foot {
  grid-column: 1 / -1;
  margin-top: 6px;
  border-top: 1px solid #eef0f4;
  border-radius: 0 0 10px 10px;
}
.header-main .main-menu ul li .submenu.submenu-mega > li.mega-foot > a {
  justify-content: center;
  color: var(--theme);
  font-size: 13.5px;
  padding: 12px 13px 6px;
}
.header-main .main-menu ul li .submenu.submenu-mega > li.mega-foot > a i {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  background: none;
  color: inherit;
  font-size: 12px;
}
.header-main .main-menu ul li .submenu.submenu-mega > li.mega-foot:hover {
  background: transparent;
}

/* Narrower desktops (the bar itself is replaced by the drawer below 1200px, so
   this only has to cover roughly 1200-1365). */
@media (max-width: 1365px) {
  .header-main .main-menu ul li .submenu.submenu-mega.cols-3 {
    width: 840px;
  }
  .header-main .main-menu ul li .submenu.submenu-mega.cols-2 {
    width: 580px;
  }
  .header-main .main-menu ul li .submenu.submenu-mega > li > a {
    font-size: 14px;
    gap: 10px;
    padding: 0 11px;
  }
}

/* -----------------------------------------------------------------------------
   Mobile: meanmenu clones the nav into its own list, so the grid must be
   dropped there and items shown as a normal stacked list.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .mean-container .mean-nav ul li .submenu.submenu-mega,
  .mean-container .mean-nav ul .submenu-mega {
    display: block !important;
    width: 100% !important;
    transform: none !important;
    inset-inline-start: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .mean-container .mean-nav ul .submenu-mega > li {
    background: transparent !important;
  }
  .mean-container .mean-nav ul .submenu-mega > li > a {
    display: block !important;
    padding: 10px 22px !important;
    font-weight: 500 !important;
  }
  /* Font Awesome chips add noise in the mobile drawer. */
  .mean-container .mean-nav ul .submenu-mega > li > a i {
    display: none !important;
  }
  .mean-container .mean-nav ul .submenu-mega > li > a span {
    display: none !important;
  }
  .mean-container .mean-nav ul .submenu-mega > li.mega-foot {
    border-top: 0 !important;
  }
}

/* =============================================================================
   COMMERCIAL INDUSTRY PAGES
   Section shell + content blocks shared by the 12 industry landing pages.
   Card visuals are inherited from the existing .comm-* rules in main.css so the
   industry pages stay visually identical to /commercial-pest-control.html.
   ========================================================================== */
.ind-sec {
  position: relative;
  padding: 80px 0;
  background: var(--white);
}
.ind-sec--alt {
  background: var(--bg);
}
.ind-white {
  background: var(--white) !important;
}

/* -----------------------------------------------------------------------------
   Industry banner (client-supplied artwork, 1536x1024).
   The artwork has a text panel baked into its left ~38%, which is legible while
   the image is rendered wide but turns to mush on a phone. So below the tablet
   breakpoint the figure becomes a fixed-ratio window cropped to the photograph
   on the right, and the panel's information is carried by the real HTML around
   it instead.
   -------------------------------------------------------------------------- */
.ind-figure {
  margin: 0 0 48px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 18px 44px rgba(20, 20, 20, 0.1);
}
.ind-figure img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 991px) {
  .ind-figure {
    /* 0.9 ratio shows the right 60% of the artwork: all photo, no text panel. */
    aspect-ratio: 9 / 10;
  }
  .ind-figure img {
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }
}
@media (max-width: 575px) {
  .ind-figure {
    margin-bottom: 34px;
    border-radius: 14px;
  }
}

/* Prose blocks (overview / risk intro). */
.ind-prose p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 18px;
}
.ind-prose p:last-child {
  margin-bottom: 0;
}

/* Trust chips under the overview copy. */
.ind-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.ind-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid #eef0f2;
  border-radius: 10px;
  padding: 18px 18px;
}
.ind-trust-item i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg);
  color: var(--theme);
  font-size: 16px;
}
.ind-trust-item span {
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--header);
  line-height: 1.4;
}
@media (max-width: 991px) {
  .ind-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .ind-trust {
    grid-template-columns: 1fr;
  }
}

/* Business-risk list. */
.ind-risks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.ind-risks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1px solid #eef0f2;
  border-left: 3px solid var(--theme);
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}
.ind-risks li i {
  flex: 0 0 auto;
  color: var(--theme);
  font-size: 16px;
  margin-top: 3px;
}

/* Numbered programme steps. */
.ind-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 20px;
}
.ind-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--white);
  border: 1px solid #eef0f2;
  border-radius: 10px;
  padding: 26px 26px;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}
.ind-step:hover {
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.07);
  transform: translateY(-3px);
}
.ind-step-num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme);
  color: var(--white);
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
}
.ind-step h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--header);
}
.ind-step p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}
@media (max-width: 575px) {
  .ind-step {
    flex-direction: column;
    gap: 14px;
  }
}

/* Compliance / documentation checklist. */
.ind-docs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
}
.ind-docs li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}
.ind-docs li i {
  flex: 0 0 auto;
  color: var(--theme);
  font-size: 15px;
  margin-top: 4px;
}
@media (max-width: 767px) {
  .ind-docs {
    grid-template-columns: 1fr;
  }
}

/* Dark "why PestoKill" band. */
.ind-sec--dark {
  background: var(--theme-2);
}
.ind-sec--dark .comm-section-title,
.ind-sec--dark .ind-usp h3 {
  color: var(--white);
}
.ind-sec--dark .comm-section-sub {
  color: rgba(255, 255, 255, 0.75);
}
.ind-usps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.ind-usp {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 28px 24px;
  transition:
    background 0.3s,
    transform 0.3s;
}
.ind-usp:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}
.ind-usp i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--theme);
  color: var(--white);
  font-size: 18px;
  margin-bottom: 18px;
}
.ind-usp h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.ind-usp p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
@media (max-width: 991px) {
  .ind-usps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .ind-usps {
    grid-template-columns: 1fr;
  }
}

/* Related industries: the industry card, but clickable. */
a.comm-industry-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.comm-industry-card:hover h3 {
  color: var(--theme);
}
.ind-related-more {
  text-align: center;
  margin-top: 40px;
}

/* Chip list of the 12 industry pages, at the foot of "Industries We Serve"
   on /commercial-pest-control.html. */
.ind-industry-links {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid #e6e9ed;
}
.ind-industry-links h3 {
  font-size: 20px;
  text-align: center;
  color: var(--header);
  margin-bottom: 22px;
}
.ind-industry-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.ind-industry-links li a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid #e6e9ed;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--heading-font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--header);
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}
.ind-industry-links li a i {
  color: var(--theme);
  font-size: 14px;
}
.ind-industry-links li a:hover {
  border-color: var(--theme);
  color: var(--theme);
  box-shadow: 0 6px 18px rgba(238, 154, 63, 0.16);
}

/* =============================================================================
   MOBILE UI PASS
   -----------------------------------------------------------------------------
   Driven by a measured audit (/tmp/uiaudit2.js) across every page at 360, 390
   and 768px. Three classes of problem were found and are fixed below:
     1. tap targets under 36px tall — footer links, breadcrumbs, hero phone
        links, branch and contact phone/email links, hero slider arrows
     2. text under 12px — booking-card tags, brand-strip placeholders
     3. density — the industry sections used desktop padding and Bootstrap g-5
        gutters on phones, which left very tall gaps between stacked blocks
   No wording is changed anywhere; these are size, spacing and hit-area rules.
   ========================================================================== */

/* --- 1. Tap targets ------------------------------------------------------- */
@media (max-width: 991px) {
  /* Footer: links were 16px tall, far too small to hit reliably. */
  .pd-foot-col ul li {
    margin-bottom: 4px;
  }
  .pd-foot-col ul li a,
  .pd-foot-contact-list a,
  .pd-footer-bottom p a,
  .pd-footer-bottom ul li a {
    display: inline-block;
    padding-block: 10px;
    line-height: 1.35;
  }
  .pd-footer-bottom ul {
    row-gap: 0;
  }

  /* Breadcrumbs: 28px -> 40px without moving the text baseline much. */
  .comm-breadcrumb a,
  .comm-breadcrumb span,
  .service-breadcrumb a,
  .service-breadcrumb span,
  .about-breadcrumb a,
  .about-breadcrumb span,
  .breadcrumb-list li a {
    display: inline-block;
    padding-block: 8px;
  }

  /* Secondary hero CTA ("Call Now") — a primary action, so give it a real
     button-sized hit area rather than a bare text link. */
  .comm-hero-phone,
  .about-hero-phone {
    min-height: 46px;
    padding: 10px 20px;
    border: 1px solid rgba(238, 154, 63, 0.4);
    border-radius: 999px;
    background: rgba(238, 154, 63, 0.08);
  }
  .comm-hero-phone:hover,
  .about-hero-phone:hover {
    background: rgba(238, 154, 63, 0.16);
  }

  /* Phone / email links on the branch, contact, privacy and terms pages. */
  .branch-phone a,
  .contact-card-info a,
  .privacy-contact-link,
  .terms-contact-link,
  .terms-card-text a,
  .privacy-card-text a {
    display: inline-block;
    padding-block: 9px;
  }

  /* Remaining breadcrumb variants (one class per page template). */
  .contact-breadcrumb a,
  .contact-breadcrumb span,
  .privacy-breadcrumb a,
  .privacy-breadcrumb span,
  .terms-breadcrumb a,
  .terms-breadcrumb span,
  .blog-breadcrumb a,
  .breadcrumb-list li a,
  .blog-hero ol li a,
  .news-details-section ol li a {
    display: inline-block;
    padding-block: 8px;
  }

  /* Blog "read more" link. */
  .blog-card .blog-btn {
    padding-block: 8px;
  }

  /* Homepage hero slider arrows were 34x34. */
  .hero-slider .slider-btn {
    width: 44px;
    height: 44px;
  }
}

/* Service-page trust strip: centred flex-wrap produced a ragged 1 / 1 / 2 / 2
   layout on phones. A two-column grid reads as a deliberate list. */
@media (max-width: 767px) {
  .service-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    justify-items: start;
    text-align: left;
  }
  .service-trust-item {
    align-items: flex-start;
  }
}

/* --- 2. Minimum readable text -------------------------------------------- */
@media (max-width: 991px) {
  .pdb-qb-meta .pdb-qb-tags span {
    font-size: 12px;
  }
  .comm-logo-placeholder span {
    font-size: 12px;
    overflow-wrap: anywhere;
  }
}
/* Three brand cells at 360px leave only ~82px of text width, which the 12px
   label cannot fit. Two cells give it room. */
@media (max-width: 400px) {
  .comm-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 3. Density on phones ------------------------------------------------ */
@media (max-width: 767px) {
  /* Bootstrap's g-5 leaves a 48px gap between stacked blocks on a phone.
     Only the vertical gutter is reduced: the horizontal one controls how column
     content lines up with the container, so it is left alone. */
  .row.g-5 {
    --bs-gutter-y: 30px;
  }
}
@media (max-width: 991px) {
  .ind-sec {
    padding: 60px 0;
  }
  /* g-5 puts a 48px gutter between stacked blocks on a phone; halve it. */
  .ind-sec .row.g-5,
  .comm-form-section .row.g-5 {
    --bs-gutter-y: 28px;
    --bs-gutter-x: 24px;
  }
  .ind-trust {
    gap: 12px;
    margin-top: 28px;
  }
  .ind-steps {
    gap: 14px;
  }
  .ind-step {
    padding: 22px 20px;
  }
  .ind-usps {
    gap: 16px;
  }
  .ind-usp {
    padding: 24px 20px;
  }
  .ind-risks li {
    padding: 16px 18px;
    font-size: 15px;
  }
  .ind-docs {
    gap: 12px 20px;
  }
  .ind-docs li {
    font-size: 15px;
  }
  .ind-prose p {
    font-size: 15.5px;
    line-height: 1.8;
  }
}
@media (max-width: 767px) {
  .ind-sec {
    padding: 48px 0;
  }
  .ind-step h3 {
    font-size: 18px;
  }
  .ind-usp h3 {
    font-size: 18px;
  }
  .ind-usp i {
    width: 42px;
    height: 42px;
    font-size: 16px;
    margin-bottom: 14px;
  }
  .ind-industry-links {
    margin-top: 34px;
    padding-top: 26px;
  }
  .ind-industry-links h3 {
    font-size: 18px;
  }
  .ind-industry-links li a {
    padding: 9px 15px;
    font-size: 13.5px;
  }
  .ind-related-more {
    margin-top: 28px;
  }
}