@charset "UTF-8";
/* ==========================================================================
   ELITE HOME PACKERS & MOVERS -- MASTER RESPONSIVE STYLESHEET
   Production-Ready Mobile-First & Cross-Breakpoint Design System
   Version: 3.0 (2026-10-03)
   Authoritative overrides loaded last in <head> to fix all mobile layout,
   table, grid, route pills, typography, and safe-area issues.
   ========================================================================== */

/* ==========================================================================
   #1 -- UNIVERSAL RESETS, BOX MODEL & HORIZONTAL SCROLL PREVENTION
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
}

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

/* Ensure all flex and grid children can shrink below content size */
.container > *,
section > *,
.area-content > *,
.directory-container > *,
.svc-content > *,
.blog-container > *,
[class*="grid"] > *,
[style*="display: flex"] > *,
[style*="display:flex"] > *,
[style*="display: grid"] > *,
[style*="display:grid"] > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Text wrap & break safety for long words, URLs, emails, phone numbers */
a, td, th, p, li, span, h1, h2, h3, h4, h5, h6, label, div, button {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}


/* ==========================================================================
   #2 -- UNIVERSAL TABLE RESPONSIVE SUITE (ZERO OVERLAP -- SMOOTH HORIZONTAL SCROLL)
   ========================================================================== */

/* Release outer containers that try to clip .table-scroll with overflow:hidden */
div:has(> .table-scroll),
div[style*="overflow: hidden"]:has(.table-scroll),
div[style*="overflow:hidden"]:has(.table-scroll),
div[style*="overflow: hidden"]:has(table),
div[style*="overflow:hidden"]:has(table) {
  overflow: visible !important;
}

/* Table Scroll Wrapper: Smooth, bounded horizontal scroll */
.table-scroll,
.table-responsive,
div[style*="overflow-x:auto"],
div[style*="overflow-x: auto"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 14px !important;
  margin: 16px 0 24px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  position: relative !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 #f1f5f9 !important;
}

/* Custom horizontal scrollbar */
.table-scroll::-webkit-scrollbar {
  height: 6px !important;
}
.table-scroll::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 4px !important;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Base Table Rules */
table,
.rate-table,
.doc-table,
.grade-table,
.price-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  margin: 0 !important;
  background: #ffffff !important;
}

/* Table Header */
thead th,
.rate-head th,
tr[style*="background: #0f172a"] th,
tr[style*="background:#0f172a"] th {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.90rem !important;
  padding: 14px 16px !important;
  text-align: left !important;
  border-bottom: 2px solid #1e293b !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* Table Body Cells */
tbody td,
.rate-table td,
.doc-table td,
.grade-table td {
  padding: 13px 16px !important;
  font-size: 0.90rem !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
  border-top: 1px solid #f1f5f9 !important;
  color: #334155 !important;
}

tbody tr:nth-child(even) {
  background: #f8fafc !important;
}

tbody tr:hover {
  background: #f1f5f9 !important;
}

/* Column 1: Category / Route Name */
tbody td:first-child,
.rate-table td:first-child {
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: normal !important;
  word-break: normal !important;
  min-width: 220px !important;
}

/* Column 2: Local Rate */
tbody td:nth-child(2),
.rate-table td:nth-child(2) {
  white-space: nowrap !important;
  font-weight: 800 !important;
  color: #f4600f !important;
  min-width: 140px !important;
}

/* Column 3: Intercity / Transit Details */
tbody td:nth-child(3),
.rate-table td:nth-child(3) {
  white-space: nowrap !important;
  color: #5d6d7b !important;
  min-width: 140px !important;
}

/* Mobile Adjustments for Tables: NEVER allow min-width to shrink below 620px! */
@media (max-width: 991px) {
  .table-scroll table:not(.rate-table),
  .table-responsive table:not(.rate-table),
  table.doc-table,
  table.price-table {
    min-width: 580px !important;
  }
}

@media (max-width: 768px) {
  .table-scroll table:not(.rate-table),
  .table-responsive table:not(.rate-table),
  table.doc-table,
  table.price-table {
    min-width: 580px !important;
  }
  tbody td,
  thead th {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 480px) {
  .table-scroll table:not(.rate-table),
  .table-responsive table:not(.rate-table),
  table.doc-table,
  table.price-table {
    min-width: 540px !important;
  }
}

/* 4+ and 5+ column tables */
.table-scroll table:has(th:nth-child(4)),
.table-responsive table:has(th:nth-child(4)),
table:has(th:nth-child(4)) {
  min-width: 740px !important;
}

.table-scroll table:has(th:nth-child(5)),
.table-responsive table:has(th:nth-child(5)),
table:has(th:nth-child(5)) {
  min-width: 860px !important;
}


/* ==========================================================================
   #3 -- ROUTE PILLS SUITE -- PROFESSIONAL 4-COL GRID WITH SEE MORE BUTTON
   ========================================================================== */

/* Route & Service Pills Container */
.svc-pills-grid,
div:has(> .svc-pill),
.svc-pills-wrap {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px 16px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  justify-content: stretch !important;
  align-items: stretch !important;
}

/* Individual Route / Service Pill */
.svc-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  font-size: 0.90rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  border-radius: 12px !important;
  min-height: 52px !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-decoration: none !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.svc-pill:hover {
  background: #ffffff !important;
  border-color: #f4600f !important;
  color: #f4600f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(244, 96, 15, 0.12) !important;
}

.svc-pill i,
.svc-pill .fa-route,
.svc-pill .fa-solid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  background: rgba(11, 123, 62, 0.09) !important;
  color: #0b7b3e !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.svc-pill:hover i {
  background: rgba(244, 96, 15, 0.12) !important;
  color: #f4600f !important;
  transform: scale(1.08) !important;
}

/* 8 Items Default + See More Toggle */
.svc-pills-grid.has-toggle > .svc-pill:nth-child(n+9) {
  display: none !important;
}

.svc-pills-grid.has-toggle.expanded > .svc-pill:nth-child(n+9) {
  display: flex !important;
  animation: fadeInPill 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes fadeInPill {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.routes-see-more-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 28px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  clear: both !important;
}

.btn-routes-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: 2px solid #0f172a !important;
  border-radius: 50px !important;
  padding: 12px 30px !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  min-height: 48px !important;
  -webkit-tap-highlight-color: transparent !important;
  text-decoration: none !important;
}

.btn-routes-toggle:hover {
  background: #ffffff !important;
  color: #ea580c !important;
  border-color: #ea580c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.3) !important;
}

.btn-routes-toggle:active {
  transform: translateY(1px) !important;
}

.btn-routes-toggle i {
  font-size: 0.85rem !important;
  transition: transform 0.25s ease !important;
}

/* Tablet (641px - 1024px): 2 columns */
@media (min-width: 641px) and (max-width: 1024px) {
  .svc-pills-grid,
  div:has(> .svc-pill),
  .svc-pills-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* Mobile (<= 640px): 2 columns */
@media (max-width: 640px) {
  .svc-pills-grid,
  div:has(> .svc-pill),
  .svc-pills-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .svc-pill {
    padding: 10px 12px !important;
    font-size: 0.80rem !important;
    min-height: 48px !important;
    gap: 8px !important;
  }
  .svc-pill i {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.85rem !important;
  }
  .btn-routes-toggle {
    width: 100% !important;
    max-width: 320px !important;
    padding: 11px 20px !important;
    font-size: 0.88rem !important;
  }
}

/* Extra small mobile (<= 350px): 1 column */
@media (max-width: 350px) {
  .svc-pills-grid,
  div:has(> .svc-pill),
  .svc-pills-wrap {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   #4 -- HOME SERVICES GRID & VIEW MORE BUTTON CONTAINER
   ========================================================================== */

.home-services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 28px !important;
  width: 100% !important;
}

.home-svc-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px 16px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-height: 120px !important;
}

.home-svc-card:hover {
  transform: translateY(-5px) !important;
  border-color: #f4600f !important;
  box-shadow: 0 12px 28px rgba(244, 96, 15, 0.12) !important;
}

.home-svc-card i {
  color: #176B5B !important;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.home-svc-card:hover i {
  color: #f4600f !important;
  transform: scale(1.1) !important;
}

.home-svc-card span {
  font-size: clamp(0.82rem, 2vw, 0.96rem) !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.32 !important;
  display: block !important;
}

.svc-view-more-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 28px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  clear: both !important;
}

.btn-svc-view-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #176B5B 0%, #0d4e41 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50px !important;
  padding: 13px 32px !important;
  font-size: clamp(0.86rem, 2.5vw, 0.95rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(23, 107, 91, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  min-height: 48px !important;
  -webkit-tap-highlight-color: transparent !important;
}

.btn-svc-view-more:hover {
  transform: translateY(-2px) scale(1.02) !important;
  background: linear-gradient(135deg, #f4600f 0%, #d84f07 100%) !important;
  box-shadow: 0 8px 26px rgba(244, 96, 15, 0.32) !important;
}

.btn-svc-view-more:active {
  transform: translateY(0) scale(0.98) !important;
}

.btn-svc-view-more i {
  font-size: 0.85rem !important;
  transition: transform 0.3s ease !important;
}

/* Desktop Expansion: 8 initial, show 9+ on expanded */
@media (min-width: 992px) {
  .home-services-grid > .home-svc-card:nth-child(-n+8) {
    display: flex !important;
  }
  .home-services-grid > .home-svc-card:nth-child(n+9) {
    display: none !important;
  }
  .home-services-grid.expanded > .home-svc-card:nth-child(n+9) {
    display: flex !important;
    animation: fadeInSvcCard 0.35s ease forwards !important;
  }
}

/* Tablet (641px - 991px): 3 columns, 6 initial */
@media (min-width: 641px) and (max-width: 991px) {
  .home-services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .home-services-grid > .home-svc-card:nth-child(-n+6) {
    display: flex !important;
  }
  .home-services-grid > .home-svc-card:nth-child(n+7) {
    display: none !important;
  }
  .home-services-grid.expanded > .home-svc-card:nth-child(n+7) {
    display: flex !important;
    animation: fadeInSvcCard 0.35s ease forwards !important;
  }
}

/* Mobile (<= 640px): 2 columns, 4 initial */
@media (max-width: 640px) {
  .home-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }
  .home-svc-card {
    padding: 16px 8px !important;
    min-height: 98px !important;
    border-radius: 14px !important;
    gap: 8px !important;
  }
  .home-svc-card i {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
  }
  .home-svc-card span {
    font-size: clamp(0.72rem, 2.85vw, 0.84rem) !important;
  }
  .home-services-grid > .home-svc-card:nth-child(-n+4) {
    display: flex !important;
  }
  .home-services-grid > .home-svc-card:nth-child(n+5) {
    display: none !important;
  }
  .home-services-grid.expanded > .home-svc-card:nth-child(n+5) {
    display: flex !important;
    animation: fadeInSvcCard 0.3s ease forwards !important;
  }
  
  .btn-svc-view-more {
    width: 100% !important;
    max-width: 320px !important;
    padding: 12px 20px !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 360px) {
  .home-services-grid {
    gap: 8px !important;
  }
  .home-svc-card {
    padding: 12px 5px !important;
    min-height: 88px !important;
  }
}

@keyframes fadeInSvcCard {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   #5 -- CITY CARDS & LOCALITY CARDS
   ========================================================================== */

.up-cities-grid,
.more-routes-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin: 20px 0 !important;
  width: 100% !important;
}

.city-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  min-height: 60px !important;
}

.city-card:hover {
  transform: translateY(-2px) !important;
  border-color: #f4600f !important;
  box-shadow: 0 6px 16px rgba(244, 96, 15, 0.1) !important;
}

.city-card strong {
  color: #0f172a !important;
  font-size: clamp(0.88rem, 2vw, 0.98rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.city-card span {
  color: #64748b !important;
  font-size: clamp(0.74rem, 1.8vw, 0.82rem) !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}

@media (max-width: 992px) {
  .up-cities-grid,
  .more-routes-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  .up-cities-grid,
  .more-routes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .city-card {
    padding: 12px 10px !important;
    min-height: 54px !important;
  }
}

@media (max-width: 480px) {
  .up-cities-grid,
  .more-routes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .city-card {
    padding: 10px 8px !important;
    min-height: 50px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 360px) {
  .up-cities-grid,
  .more-routes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .city-card {
    padding: 8px 6px !important;
    min-height: 46px !important;
    border-radius: 8px !important;
  }
}

.areas-link-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

.areas-link-grid.collapsed .area-link-card:nth-child(n+9) {
  display: none !important;
}

.area-link-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  background: #ffffff !important;
  border: 1px solid #D9DED9 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  min-height: 56px !important;
}

.area-link-card:hover {
  border-color: #f4600f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(11, 31, 42, 0.07) !important;
}

.area-link-name {
  font-weight: 700 !important;
  color: #0B1F2A !important;
  font-size: clamp(0.86rem, 2.5vw, 0.95rem) !important;
  line-height: 1.3 !important;
}

.area-link-pin {
  font-size: clamp(0.72rem, 2vw, 0.78rem) !important;
  color: #66747A !important;
}

@media (max-width: 768px) {
  .areas-link-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .area-link-card {
    padding: 12px 13px !important;
    min-height: 52px !important;
  }
}

@media (max-width: 360px) {
  .areas-link-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

.locality-pill-badge,
.area-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  font-size: clamp(0.76rem, 2.8vw, 0.88rem) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  min-height: 38px !important;
  line-height: 1.3 !important;
  transition: all 0.2s ease !important;
}

.locality-pill-badge:hover,
.area-pill:hover {
  background: #fff1e8 !important;
  color: #c2440a !important;
  border-color: #f4600f !important;
}


/* ==========================================================================
   #6 -- ROUTE SPEC CARDS & SERVICES GRID
   ========================================================================== */

.route-specs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin: 20px 0 !important;
  width: 100% !important;
}

.route-spec-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  min-width: 0 !important;
}

@media (max-width: 640px) {
  .route-specs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 380px) {
  .route-specs-grid {
    grid-template-columns: 1fr !important;
  }
}

.services-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 360px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}


/* ==========================================================================
   #7 -- INLINE GRID RESPONSIVE OVERRIDES
   ========================================================================== */
@media (max-width: 640px) {
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"],
  [style*="grid-template-columns: 0.8fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  ul[style*="grid-template-columns: 1fr 1fr"],
  ul[style*="grid-template-columns:1fr 1fr"],
  ol[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (min-width: 641px) and (max-width: 991px) {
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}


/* ==========================================================================
   #8 -- TYPOGRAPHY & FLUID HEADINGS
   ========================================================================== */
@media (max-width: 991px) {
  [style*="font-size: 2.8rem"],
  [style*="font-size:2.8rem"],
  [style*="font-size: 2.5rem"],
  [style*="font-size:2.5rem"],
  .page-hero-title,
  .svc-hero-title {
    font-size: clamp(1.55rem, 6.5vw, 2.3rem) !important;
    line-height: 1.2 !important;
  }

  [style*="font-size: 2.3rem"],
  [style*="font-size:2.3rem"],
  [style*="font-size: 2rem"],
  [style*="font-size:2rem"],
  [style*="font-size: 1.8rem"],
  [style*="font-size:1.8rem"] {
    font-size: clamp(1.25rem, 5.2vw, 1.65rem) !important;
    line-height: 1.25 !important;
  }

  [style*="font-size: 1.3rem"],
  [style*="font-size:1.3rem"] {
    font-size: clamp(1.05rem, 4vw, 1.22rem) !important;
    line-height: 1.35 !important;
  }

  /* Padding reductions for cards on mobile */
  [style*="padding: 48px"],
  [style*="padding:48px"],
  [style*="padding: 44px"],
  [style*="padding:44px"],
  [style*="padding: 40px"],
  [style*="padding:40px"],
  [style*="padding: 36px"],
  [style*="padding:36px"],
  [style*="padding: 32px"],
  [style*="padding:32px"],
  [style*="padding: 30px"],
  [style*="padding:30px"] {
    padding: clamp(16px, 4.5vw, 24px) clamp(14px, 4vw, 20px) !important;
  }

  /* Release restrictive container max-widths on mobile */
  [style*="max-width: 900px"],
  [style*="max-width:900px"],
  [style*="max-width: 800px"],
  [style*="max-width:800px"] {
    max-width: 100% !important;
  }
}


/* ==========================================================================
   #9 -- NAVIGATION & HEADER RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  .main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 var(--sp-gutter, 16px) !important;
  }

  .mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 48px !important;
    min-height: 48px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1.3rem !important;
    color: #0f172a !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .header-container .btn-pill-orange {
    display: none !important;
  }

  .nav-menu.active .dropdown-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    padding: 4px 0 8px 12px !important;
    background: #f8fafc !important;
  }
  .nav-menu.active .nav-dropdown.active > .dropdown-menu {
    display: block !important;
  }
  
  .dropdown-menu,
  ul.dropdown-menu,
  ul[style*="width: 280px"],
  ul[style*="width: 220px"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* ==========================================================================
   #10 -- MOBILE BOTTOM STICKY ACTION BAR & SAFE AREA
   ========================================================================== */
@media (max-width: 991px) {
  .floating-actions,
  .fixed-bottom-dual-bar,
  .fixed-mobile-bottom-bar,
  .whatsapp-float,
  a[href*="wa.me"][style*="position:fixed"],
  a[href*="wa.me"][style*="position: fixed"] {
    display: none !important;
  }

  .mobile-bottom-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #0B1F2A !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
  }

  .mbb-call,
  .mbb-wa {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 12px !important;
    font-size: clamp(0.85rem, 3.4vw, 0.96rem) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    min-height: 52px !important;
    letter-spacing: 0.02em !important;
  }

  .mbb-call {
    background: #f4600f !important;
    color: #ffffff !important;
  }

  .mbb-wa {
    background: #15803d !important;
    color: #ffffff !important;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  footer,
  .site-footer-ditto {
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #scrollTopBtn,
  .scroll-top-btn,
  #scroll-to-top {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (min-width: 992px) {
  .mobile-bottom-bar {
    display: none !important;
  }
}


/* ==========================================================================
   #11 -- FORMS, INPUTS & MODALS
   ========================================================================== */
@media (max-width: 640px) {
  .form-row-2col,
  .form-row-2col-mobile,
  form [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 8px"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }

  dialog#globalQuoteModal,
  #ehpmEnq .ehpm-box {
    width: 94vw !important;
    max-width: 94vw !important;
    margin: auto !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
}


/* ==========================================================================
   #12 -- FOOTER & TRUST STRIPS
   ========================================================================== */
@media (max-width: 991px) {
  .footer-grid-4col,
  .footer-top-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer-social {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px var(--sp-gutter, 16px) !important;
    max-width: 100% !important;
  }

  .page-hero-trust {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .page-hero-trust {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .svc-trust-row,
  .hero-trust-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}


/* ==========================================================================
   #13 -- FAQ ACCORDIONS & CONTENT CARDS
   ========================================================================== */
.faq-item,
.faq-accordion-item {
  max-width: 100% !important;
  overflow: hidden !important;
}

.faq-q,
.faq-question {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  font-size: clamp(0.92rem, 3.2vw, 1.08rem) !important;
  line-height: 1.35 !important;
}

.faq-a,
.faq-answer {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  font-size: clamp(0.85rem, 2.9vw, 0.96rem) !important;
  line-height: 1.6 !important;
}

.hub-box,
.review-box,
.govt-box,
.highlight-box,
.keybox,
.warnbox,
.warning-box,
.pro-box {
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   #14 -- DESKTOP RESTORATION (>= 992px)
   ========================================================================== */
@media (min-width: 992px) {
  table,
  .rate-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  .floating-actions {
    display: flex !important;
  }

  .mobile-bottom-bar {
    display: none !important;
  }

  .mobile-toggle {
    display: none !important;
  }

  .nav-menu {
    display: flex !important;
  }

  .footer-grid-4col {
    grid-template-columns: 2.2fr 1fr 1fr 1.1fr 1.2fr !important;
  }

  .home-services-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}


/* ==========================================================================
   #15 -- PRINT STYLES
   ========================================================================== */
@media print {
  .mobile-bottom-bar,
  .floating-actions,
  .fixed-mobile-bottom-bar,
  .fixed-bottom-dual-bar,
  .mobile-toggle,
  #scrollTopBtn,
  .whatsapp-float,
  a[href*="wa.me"] {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}


/* ==========================================================================
   #16 -- UNIVERSAL SINGLE-LINE PHONE, WHATSAPP & ADDRESS PROTECTION
   ========================================================================== */
a[href^="tel:"],
a[href*="wa.me"],
.geo-contact-val {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* ==========================================================================
   #17 -- GEO & AIO CONTACT SUMMARY CARD (PERFECT LEFT-ALIGNMENT & RESPONSIVE)
   ========================================================================== */
.geo-contact-card {
  background: #ffffff !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: 30px 24px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  border: 1px solid #D9DED9 !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.geo-contact-title {
  font-size: clamp(1.2rem, 3.5vw, 1.55rem) !important;
  font-weight: 800 !important;
  color: var(--text-dark, #0f172a) !important;
  margin: 0 0 8px 0 !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

.geo-contact-desc {
  color: var(--text-muted, #4b5563) !important;
  line-height: 1.65 !important;
  margin: 0 0 22px 0 !important;
  text-align: left !important;
  font-size: 0.95rem !important;
}

.geo-contact-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px 24px !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
}

.geo-contact-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
  min-width: 0 !important;
}

.geo-contact-icon {
  width: 28px !important;
  min-width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-align: center !important;
}

.geo-contact-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  min-width: 0 !important;
}

.geo-contact-label {
  font-size: 0.82rem !important;
  color: var(--text-muted, #64748b) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin-bottom: 3px !important;
  text-align: left !important;
  display: block !important;
}

.geo-contact-val {
  font-size: clamp(0.92rem, 3.2vw, 1.02rem) !important;
  font-weight: 700 !important;
  color: var(--text-dark, #0f172a) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.35 !important;
  text-align: left !important;
  display: inline-block !important;
}

.geo-contact-link {
  text-decoration: none !important;
  color: var(--text-dark, #0f172a) !important;
  transition: color 0.2s ease !important;
}

.geo-contact-link:hover {
  color: #176B5B !important;
  text-decoration: underline !important;
}

/* Mobile & Tablet Specific Layout (<= 820px) */
@media (max-width: 820px) {
  .geo-contact-card {
    padding: 22px 18px !important;
  }

  .geo-contact-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .geo-contact-item {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
  }

  .geo-contact-info {
    align-items: flex-start !important;
    text-align: left !important;
  }
}


/* ==========================================================================
   #18 -- LOCALITY PILLS RESPONSIVE GRID & 8-ITEM TOGGLE (IMAGE 1 FIX)
   ========================================================================== */
.locality-pills-grid,
div:has(> .locality-pill-badge) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 16px 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 860px) {
  .locality-pills-grid,
  div:has(> .locality-pill-badge) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

/* Mobile View: 2 Equal-Width Balanced Columns (Fixes Ragged Layout from Image 1) */
@media (max-width: 600px) {
  .locality-pills-grid,
  div:has(> .locality-pill-badge) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

.locality-pill-badge,
a.locality-pill-badge,
.locality-pills-grid .locality-pill-badge,
.locality-pills-grid a.locality-pill-badge,
.locality-pills-grid .nearby-tag,
.locality-pills-grid a.nearby-tag,
.locality-pills-grid > a,
.locality-pills-grid > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 8px !important;
  border-radius: 50px !important;
  background: #f8fafc !important;
  border: 1px solid #dbe2ea !important;
  color: #0f172a !important;
  font-size: clamp(0.74rem, 2.7vw, 0.85rem) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.locality-pill-badge:hover,
a.locality-pill-badge:hover,
.locality-pills-grid .locality-pill-badge:hover,
.locality-pills-grid a.locality-pill-badge:hover,
.locality-pills-grid .nearby-tag:hover,
.locality-pills-grid a.nearby-tag:hover,
.locality-pills-grid > a:hover {
  background: #fff5f0 !important;
  color: #ff5722 !important;
  border-color: #ff5722 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.16) !important;
}

/* Locality Pills: Hide items after 8 by default when toggle is enabled */
.locality-pills-grid.has-toggle:not(.expanded) > :nth-child(n+9),
.locality-pills-grid.has-toggle:not(.expanded) .locality-pill-badge:nth-child(n+9),
div:has(> .locality-pill-badge).has-toggle:not(.expanded) .locality-pill-badge:nth-child(n+9) {
  display: none !important;
}

.locality-pills-grid.has-toggle.expanded > :nth-child(n+9) {
  display: flex !important;
  animation: fadeInPill 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* ==========================================================================
   #19 -- CITIES & LOCALITIES GRID 8-ITEM TOGGLE & MOBILE FIX (IMAGE 2 & 3)
   ========================================================================== */
.up-cities-grid:not(.expanded) > .city-card:nth-child(n+9),
.up-cities-grid.has-toggle:not(.expanded) > .city-card:nth-child(n+9),
.up-cities-grid.has-toggle:not(.expanded) .city-card:nth-child(n+9) {
  display: none !important;
}

.up-cities-grid.expanded > .city-card:nth-child(n+9) {
  display: flex !important;
  animation: fadeInPill 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* Mobile & Tablet Alignment for City Cards - ALWAYS 2 COLUMNS ON MOBILE */
@media (max-width: 768px) {
  .up-cities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .city-card {
    padding: 12px 10px !important;
    min-height: 54px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .city-card strong {
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
    color: #0d1b26 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }

  .city-card span {
    font-size: 0.72rem !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }
}

@media (max-width: 480px) {
  .up-cities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .city-card {
    padding: 10px 8px !important;
    min-height: 50px !important;
    border-radius: 10px !important;
  }

  .city-card strong {
    font-size: 0.84rem !important;
  }

  .city-card span {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 360px) {
  .up-cities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .city-card {
    padding: 8px 6px !important;
    min-height: 46px !important;
    border-radius: 8px !important;
  }

  .city-card strong {
    font-size: 0.80rem !important;
  }

  .city-card span {
    font-size: 0.66rem !important;
  }
}

/* ==========================================================================
   #20 -- NEARBY TAGS 8-ITEM TOGGLE & MOBILE ALIGNMENT
   ========================================================================== */
.nearby-tags-container.has-toggle:not(.expanded) > :nth-child(n+9),
.nearby-tags-container.has-toggle:not(.expanded) .nearby-tag:nth-child(n+9),
.nearby-tags-wrap.has-toggle:not(.expanded) > :nth-child(n+9),
.nearby-tags-wrap.has-toggle:not(.expanded) .nearby-tag:nth-child(n+9),
div[style*="margin: 12px 0"].has-toggle:not(.expanded) > :nth-child(n+9),
div[style*="margin: 12px 0"].has-toggle:not(.expanded) .nearby-tag:nth-child(n+9) {
  display: none !important;
}

.nearby-tags-container.has-toggle.expanded > :nth-child(n+9),
.nearby-tags-wrap.has-toggle.expanded > :nth-child(n+9),
div[style*="margin: 12px 0"].has-toggle.expanded > :nth-child(n+9) {
  display: inline-flex !important;
  animation: fadeInPill 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.nearby-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e8f0fe !important;
  color: #1a56db !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  margin: 3px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.nearby-tag:hover {
  background: #d0e1fd !important;
  color: #103ba1 !important;
}

.pills-see-more-wrap,
.cities-see-more-wrap,
.nearby-see-more-wrap,
.routes-see-more-wrap,
.locality-see-more-wrap {
  text-align: center !important;
  margin: 18px 0 24px 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  clear: both !important;
}

/* ==========================================================================
   #21 -- UNIVERSAL BUTTON COLOR INVERSION HOVER SUITE
   ========================================================================== */
.btn-pill-orange,
.btn-primary,
.btn-farmers-orange,
.cta-btn,
.btn-quote-pill,
.estimate-cta-btn,
.btn-gallery-book {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 2px solid var(--brand-orange, #ea580c) !important;
}

.btn-pill-orange:hover,
.btn-primary:hover,
.btn-farmers-orange:hover,
.cta-btn:hover,
.btn-quote-pill:hover,
.estimate-cta-btn:hover,
.btn-gallery-book:hover {
  background: #ffffff !important;
  color: var(--brand-orange, #ea580c) !important;
  border-color: var(--brand-orange, #ea580c) !important;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.3) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary,
.btn-farmers-outline,
.btn-outline {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 2px solid #0f172a !important;
}

.btn-secondary:hover,
.btn-farmers-outline:hover,
.btn-outline:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2) !important;
  transform: translateY(-2px) !important;
}

.cta-call {
  border: 2px solid var(--brand-orange, #ea580c) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cta-call:hover {
  background: #ffffff !important;
  color: var(--brand-orange, #ea580c) !important;
  border-color: var(--brand-orange, #ea580c) !important;
  transform: translateY(-2px) !important;
}

.cta-wa,
.btn-whatsapp {
  border: 2px solid #25d366 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cta-wa:hover,
.btn-whatsapp:hover {
  background: #ffffff !important;
  color: #128c7e !important;
  border-color: #128c7e !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   #22 -- GLOBAL TABLE MOBILE HORIZONTAL SCROLL PROTECTION
   ========================================================================== */
@media (max-width: 768px) {
  table,
  .rate-table,
  .doc-table,
  .price-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ==========================================================================
   #24 -- PRECISION MOBILE UI, PADDING REDUCTION & TABLE ALIGNMENT (2026 PASS)
   ========================================================================== */

/* 1. Global Section Padding Reduction (Zero Empty Spaces After Scroll) */
@media (max-width: 768px) {
  .section-padding {
    padding: 34px 0 !important;
  }
  .page-hero-banner {
    padding: 32px 0 22px !important;
  }
  .page-hero-title {
    font-size: clamp(1.8rem, 6vw, 2.3rem) !important;
  }
  .page-hero-lead {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 480px) {
  .section-padding {
    padding: 24px 0 !important;
  }
  .page-hero-banner {
    padding: 26px 0 16px !important;
  }
}

/* 2. Completely Hide Floating Back-to-Top Button on Mobile & Tablets */
@media (max-width: 991px) {
  #scrollTopBtn,
  .scroll-top-btn,
  .back-to-top,
  button[aria-label*="Scroll to top"],
  button[title*="Back to top"],
  #scroll-to-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* 3. Form Clean Semantics & Full-Width Inputs */
.clean-contact-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.form-row-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.form-label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--text-dark, #0b132b) !important;
  margin-bottom: 2px !important;
  display: block !important;
}

.form-input,
.form-input-white {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  font-size: 0.90rem !important;
  border-radius: 10px !important;
  border: 1.5px solid #D9DED9 !important;
  background: #ffffff !important;
  color: #0b132b !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-input:focus,
.form-input-white:focus {
  border-color: #176B5B !important;
  box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.12) !important;
}

@media (max-width: 640px) {
  .form-row-2col {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .clean-contact-form .btn-submit-orange,
  #main-contact-form .btn-submit-orange {
    white-space: normal !important;
    padding: 14px 18px !important;
    font-size: 0.96rem !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 48px !important;
  }

  .form-actions-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
}

/* 4. Pricing Calculator Desktop & Mobile Precision Layout */
.calculator-inputs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

@media (max-width: 768px) {
  .calculator-inputs-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  #cost-calculator-card {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
  }

  .calc-buttons-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .calc-buttons-row button,
  .calc-buttons-row a {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* 5. Mobile Tables: Smooth Scrollable Container */
@media (max-width: 640px) {
  .table-scroll,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }
}

/* ==========================================================================
   #25 -- MASTER CRO, GRID POLISH, PADDING COMPRESSION & UNIFIED SITE-WIDE STYLING
   ========================================================================== */

/* 1. Global Multi-Column Inline Grids Responsive Collapsing (Site-Wide) */
@media (max-width: 991px) {
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  div[style*="grid-template-columns: 1.1fr 0.9fr"],
  div[style*="grid-template-columns:1.1fr 0.9fr"],
  div[style*="grid-template-columns: 0.9fr 1.1fr"],
  div[style*="grid-template-columns: 1.15fr 1fr"],
  div[style*="grid-template-columns:1.15fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.15fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: repeat(2, 1fr)"],
  div[style*="grid-template-columns:repeat(2, 1fr)"],
  div[style*="grid-template-columns:repeat(2,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  div[style*="margin-bottom: 70px"],
  div[style*="margin-bottom: 50px"],
  div[style*="margin-bottom: 40px"] {
    margin-bottom: 22px !important;
  }
  div[style*="margin-top: 70px"],
  div[style*="margin-top: 50px"],
  div[style*="margin-top: 40px"] {
    margin-top: 22px !important;
  }
  div[style*="gap: 50px"],
  div[style*="gap: 45px"] {
    gap: 18px !important;
  }

  .section-padding,
  section.section-padding,
  div.section-padding {
    padding: 34px 0 !important;
  }
}

@media (max-width: 480px) {
  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(270px, 1fr))"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"],
  .route-specs-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .section-padding,
  section.section-padding,
  div.section-padding {
    padding: 24px 0 !important;
  }

  div[style*="margin-bottom: 70px"],
  div[style*="margin-bottom: 50px"],
  div[style*="margin-bottom: 40px"] {
    margin-bottom: 16px !important;
  }
  div[style*="margin-top: 70px"],
  div[style*="margin-top: 50px"] {
    margin-top: 16px !important;
  }
}

@media (max-width: 768px) {
  .up-cities-grid,
  .locality-pills-grid,
  .areas-link-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 380px) {
  .up-cities-grid,
  .locality-pills-grid,
  .areas-link-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

#scrollTopBtn,
.scroll-top-btn,
.back-to-top,
button[aria-label*="Scroll to top"],
button[title*="Back to top"],
#scroll-to-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
@media (min-width: 992px) {
  #scrollTopBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ==========================================================================
   #26 -- EXECUTIVE QUOTE CONFIRMATION MODAL & LEAD CRO ENHANCEMENTS
   ========================================================================== */
.ehpm-success-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  animation: ehpmFadeIn 0.25s ease-out both !important;
}

.ehpm-success-overlay.active {
  display: flex !important;
}

@keyframes ehpmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ehpm-success-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  max-width: 440px !important;
  width: 100% !important;
  padding: 28px 24px 24px !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  position: relative !important;
  animation: ehpmCardPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes ehpmCardPop {
  from { transform: scale(0.92) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.ehpm-success-check {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  font-size: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  box-shadow: 0 4px 16px rgba(21, 128, 61, 0.2) !important;
}

.ehpm-success-h3 {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}

.ehpm-success-p {
  font-size: 0.90rem !important;
  color: #475569 !important;
  margin: 0 0 18px !important;
  line-height: 1.5 !important;
}

.ehpm-success-details {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  text-align: left !important;
  font-size: 0.85rem !important;
  color: #334155 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.ehpm-success-details i {
  color: #0b7b3e !important;
  width: 18px !important;
  text-align: center !important;
  margin-right: 6px !important;
}

.ehpm-success-callout {
  background: #fefce8 !important;
  border: 1px solid #fde047 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.82rem !important;
  color: #854d0e !important;
  line-height: 1.4 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

.ehpm-success-callout i {
  color: #ca8a04 !important;
  margin-right: 6px !important;
}

.ehpm-success-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.ehpm-btn-wa {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  padding: 12px 20px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
  transition: transform 0.2s ease !important;
}

.ehpm-btn-call {
  background: linear-gradient(135deg, #0b7b3e 0%, #044621 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.90rem !important;
  padding: 12px 20px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(11, 123, 62, 0.25) !important;
  transition: transform 0.2s ease !important;
}

.ehpm-btn-dismiss {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 6px !important;
  text-decoration: underline !important;
}


/* ==========================================================================
   #27 -- MASTER POLISH: ZERO OVERLAP, ZERO CROPPING, TEXT-WRAP & MOBILE TABLE PERFECTION
   ========================================================================== */

/* Modern Web Guidance: Headline balanced line breaks & lead pretty wrapping */
h1, h2, h3, h4 {
  text-wrap: balance !important;
}

p.page-hero-lead,
p.lead,
.section-lead,
.announcement-text,
.ehpm-success-p {
  text-wrap: pretty !important;
}

/* Modal Dialog Scroll Containment: Never scroll parent body when modal is open */
.ehpm-success-overlay,
.quote-modal-overlay,
.enquiry-modal-overlay,
dialog:modal {
  overscroll-behavior: contain !important;
}

dialog::backdrop {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

/* ==========================================================================
   MASTER PRICE TABLES: BUTTERY-SMOOTH TOUCH HORIZONTAL SCROLL ON MOBILE
   ========================================================================== */

/* Universal table scroll container: guarantees horizontal touch scrolling on all mobile screens */
.table-scroll,
.table-responsive,
div[style*="overflow-x:auto"],
div[style*="overflow-x: auto"],
div:has(> table.rate-table),
div:has(> table.price-table),
div:has(> table) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain !important;
  position: relative !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  margin: 16px 0 24px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #f4600f #f1f5f9 !important;
}

/* Custom visible scrollbar for mobile so user clearly sees the table is scrollable */
.table-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  height: 6px !important;
  display: block !important;
}
.table-scroll::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 4px !important;
}
.table-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: #f4600f !important;
  border-radius: 4px !important;
}

/* Rate & Price Tables: Sized to ensure smooth horizontal scrolling on mobile without squashed text */
@media (max-width: 768px) {
  table.rate-table,
  table.price-table,
  table.doc-table,
  .table-scroll table,
  .table-responsive table {
    min-width: 580px !important;
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  table.rate-table thead th,
  table.price-table thead th,
  .table-scroll thead th {
    padding: 12px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    background: #0f172a !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
  }

  table.rate-table tbody td,
  table.price-table tbody td,
  .table-scroll tbody td {
    padding: 12px 14px !important;
    font-size: 0.88rem !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
  }

  table.rate-table tbody td:first-child,
  table.price-table tbody td:first-child,
  .table-scroll tbody td:first-child {
    min-width: 220px !important;
    white-space: normal !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  table.rate-table tbody td:nth-child(2),
  table.price-table tbody td:nth-child(2),
  .table-scroll tbody td:nth-child(2) {
    min-width: 150px !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
    color: #f4600f !important;
    text-align: right !important;
  }

  table.rate-table tbody td:nth-child(3),
  table.price-table tbody td:nth-child(3),
  .table-scroll tbody td:nth-child(3) {
    min-width: 170px !important;
    white-space: nowrap !important;
    color: #475569 !important;
    text-align: right !important;
  }
}

/* Master Form Responsive Fix: Single Column, 100% Width Inputs, Zero Text Clipping on Buttons */
@media (max-width: 768px) {
  .clean-contact-form,
  #main-contact-form,
  #contact-page-form,
  form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-row-2col,
  .form-row-2col-mobile,
  form [style*="grid-template-columns: 1fr 1fr"],
  form [style*="grid-template-columns:1fr 1fr"],
  form [style*="grid-template-columns: repeat(2, 1fr)"],
  form [style*="grid-template-columns:repeat(2, 1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .form-group,
  form > div {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .form-input,
  .form-input-white,
  form input,
  form select,
  form textarea {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }

  .clean-contact-form .btn-submit-orange,
  #main-contact-form .btn-submit-orange,
  #contact-page-form button[type="submit"],
  .btn-submit-orange,
  button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
}

/* Master Fixed Mobile Bottom Bar Safe Spacing: Never overlap page content or CTAs */
@media (max-width: 991px) {
  body {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
  }

  footer,
  .site-footer-ditto {
    padding-bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Completely remove floating scroll to top button on mobile */
  #scrollTopBtn,
  .scroll-top-btn,
  #scroll-to-top,
  button[aria-label*="Scroll to top"],
  button[title*="Back to top"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
}



/* ══════════════════════════════════════════════════════════════════════
   #27 -- UNIVERSAL EXECUTIVE ENQUIRY FORM UI (PIXEL-PERFECT FIDELITY)
   ══════════════════════════════════════════════════════════════════════ */
.ehpm-form-card {
  background: #ffffff !important;
  border-radius: 22px !important;
  border-top: 4px solid #0b7b3e !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  padding: 28px 24px 22px !important;
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
}

.ehpm-form-card * {
  box-sizing: border-box !important;
}

.ehpm-header {
  text-align: center !important;
  margin-bottom: 14px !important;
}

.ehpm-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ecfdf5 !important;
  border: 1.2px solid #a7f3d0 !important;
  color: #065f46 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  padding: 5px 14px !important;
  border-radius: 50px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.ehpm-badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  display: inline-block !important;
}

.ehpm-title {
  font-size: 1.42rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin: 8px 0 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
}

.ehpm-form-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ehpm-fg {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
}

.ehpm-lbl {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.ehpm-lbl .req {
  color: #ef4444 !important;
  margin-left: 2px !important;
}

.ehpm-input-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 46px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.ehpm-input-box:focus-within {
  border-color: #0b7b3e !important;
  box-shadow: 0 0 0 3px rgba(11, 123, 62, 0.12) !important;
}

.ehpm-input-box.err {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}

.ehpm-ico {
  position: absolute !important;
  left: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

.ehpm-input-box input,
.ehpm-input-box select {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 14px 0 42px !important;
  font-size: 0.92rem !important;
  font-family: inherit !important;
  color: #0f172a !important;
  outline: none !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
}

.ehpm-input-box select {
  cursor: pointer !important;
  padding-left: 14px !important;
  padding-right: 34px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/ %3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 13px !important;
}

.ehpm-input-box input::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
  font-size: 0.90rem !important;
}

.ehpm-btn-submit {
  width: 100% !important;
  height: 48px !important;
  background: #0b7b3e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
  box-shadow: 0 4px 14px rgba(11, 123, 62, 0.35) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
}

.ehpm-btn-submit:hover {
  background: #065f2c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(11, 123, 62, 0.45) !important;
}

.ehpm-btn-submit:active {
  transform: translateY(1px) !important;
}

.ehpm-trust-seal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #64748b !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  text-align: center !important;
}

@media (max-width: 480px) {
  .ehpm-form-card {
    padding: 18px 14px 14px !important;
    border-radius: 18px !important;
  }
  .ehpm-title {
    font-size: 1.28rem !important;
  }
  .ehpm-input-box {
    height: 42px !important;
  }
  .ehpm-input-box input,
  .ehpm-input-box select {
    font-size: 0.85rem !important;
  }
  .ehpm-btn-submit {
    height: 44px !important;
    font-size: 0.95rem !important;
  }
}


/* ==========================================================================
   MASTER MODAL RULES: CENTERED ZOOM-IN ON ALL SCREEN SIZES (NO PHONE SLIDE-UP)
   ========================================================================== */
#ehpmEnq {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain !important;
}

#ehpmEnq.open {
  display: flex !important;
}

#ehpmEnq .ehpm-back {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
}

#ehpmEnq .ehpm-box {
  position: relative !important;
  width: min(390px, calc(100vw - 28px)) !important;
  max-width: 390px !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  border: none !important;
  border-top: 5px solid #0b7b3e !important;
  box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
  animation: ehpmZoomIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  transform-origin: center center !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 20px 18px 16px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

#ehpmEnq .ehpm-box::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@keyframes ehpmZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.68);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}