/* ==========================================================================
   Keshav Packers & Movers - Design System (Midnight Alabaster Logistics)
   Framework: Bootstrap 5.3 + Custom Design Tokens (No Tailwind, No Inline CSS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens & CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --primary: #16233b;
  --primary-dark: #0e172a;
  --primary-container: #1a2b49;
  --on-primary: #ffffff;
  --on-primary-container: #b6c7ec;

  --secondary: #e11d24;
  --secondary-hover: #c01017;
  --secondary-container: #ff4d4f;
  --secondary-gradient: linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%);
  --secondary-gradient-hover: linear-gradient(135deg, #c01017 0%, #e11d24 100%);

  --tertiary: #f59e0b;
  --tertiary-container: #3f2500;
  --on-tertiary: #ffffff;

  /* Surfaces & Canvas */
  --bg-canvas: #fbf9f5;
  --surface-white: #ffffff;
  --surface-low: #f5f3ef;
  --surface-mid: #efeeea;
  --surface-high: #eae8e4;
  --surface-highest: #e4e2de;

  /* Borders & Hairlines */
  --border-subtle: #e4e2de;
  --border-card: #d7d9e0;
  --border-navy: rgba(22, 35, 59, 0.12);

  /* Typography */
  --text-primary: #16233b;
  --text-muted: #44474e;
  --text-secondary: #75777e;
  --text-light: #94a3b8;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(22, 35, 59, 0.05);
  --shadow-md: 0 4px 12px rgba(22, 35, 59, 0.08);
  --shadow-lg: 0 12px 28px -6px rgba(22, 35, 59, 0.12);
  --shadow-orange: 0 6px 18px rgba(225, 29, 36, 0.28);
  --shadow-red: 0 6px 18px rgba(225, 29, 36, 0.28);

  /* Font Families */
  --font-heading: 'Epilogue', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Breadcrumb Compatibility Tokens */
  --bc-bg: #f5f3ef;
  --bc-border: #e4e2de;
  --bc-title-color: #16233b;
  --bc-link-color: #44474e;
  --bc-link-hover: #e11d24;
  --bc-active-color: #16233b;
  --bc-sep-color: #75777e;
  --bc-desc-color: #44474e;
}

/* --------------------------------------------------------------------------
   1.1 Brand Red Theme Utilities (Maps all legacy orange utilities to brand red)
   -------------------------------------------------------------------------- */
.text-orange,
.text-red {
  color: var(--secondary, #e11d24) !important;
}

.text-orange-gradient,
.text-red-gradient {
  background: var(--secondary-gradient, linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.bg-orange,
.bg-red {
  background-color: var(--secondary, #e11d24) !important;
}

.bg-orange-soft,
.bg-red-soft {
  background-color: rgba(225, 29, 36, 0.12) !important;
}

.border-orange,
.border-red {
  border-color: var(--secondary, #e11d24) !important;
}

/* --------------------------------------------------------------------------
   2. Global Resets & Base Typography
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  overflow-x: clip;
  position: relative;
}

/* --------------------------------------------------------------------------
   2.1 Standardized Global Content Container (Slightly Reduced Side Margins)
   -------------------------------------------------------------------------- */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {

  .container,
  .container-sm {
    max-width: 550px;
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (min-width: 768px) {

  .container,
  .container-sm,
  .container-md {
    max-width: 750px;
    padding-right: 22px;
    padding-left: 22px;
  }
}

@media (min-width: 992px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 990px;
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (min-width: 1200px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1220px;
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (min-width: 1400px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1360px;
    padding-right: 28px;
    padding-left: 28px;
  }
}

@media (min-width: 1600px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1480px;
    padding-right: 32px;
    padding-left: 32px;
  }
}

/* Responsive Gutter Overrides: Prevent negative margin overflow on mobile viewports */
@media (max-width: 991.98px) {
  .row.g-5 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .row.g-5 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1.25rem;
  }

  .row.g-4 {
    --bs-gutter-x: 0.875rem;
    --bs-gutter-y: 1rem;
  }
}

body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Anchor Target Scroll Offset so Sticky Navbar never overlaps target headers */
[id] {
  scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   3. Dispatch Control Strip (Technical Monospace Feel)
   -------------------------------------------------------------------------- */
.dispatch-control-bar {
  background-color: #08101d;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 0;
  position: relative;
  z-index: 1030;
  max-height: 40px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease, opacity 0.25s ease;
}

.hero-dispatch-bar {
  background: #08101d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1030;
}

.dispatch-control-bar.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

.dispatch-tick {
  color: #e11d24;
  font-weight: 800;
  font-size: 11px;
  margin: 0 6px;
  opacity: 0.85;
}

/* Vertical Text Carousel */
.dispatch-trust-slot {
  position: relative;
  height: 20px;
  width: 280px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  outline: none;
}

.dispatch-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.dispatch-trust-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.dispatch-trust-item.active {
  transform: translateY(0);
  opacity: 1;
}

.dispatch-trust-item.slide-out {
  transform: translateY(-100%);
  opacity: 0;
}

.dispatch-trust-item i {
  font-size: 12px;
  color: #e11d24;
}

/* On ultra-wide screens (1400px+), show all 3 items side-by-side */
@media (min-width: 1400px) {
  .dispatch-trust-slot {
    width: auto;
    overflow: visible;
  }

  .dispatch-carousel-track {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .dispatch-trust-item {
    position: static;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Live IST Clock */
.dispatch-clock {
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 11px;
  color: #cbd5e1;
  letter-spacing: 0.08em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

/* Live Tracking Tag with Blinking Square LED */
.dispatch-tracking-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  color: #f8fafc;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: all 0.2s ease;
}

.dispatch-tracking-tag:hover {
  background: rgba(225, 29, 36, 0.18);
  border-color: rgba(225, 29, 36, 0.5);
  color: #ffffff;
}

.dispatch-square-led {
  width: 6px;
  height: 6px;
  background-color: #22c55e;
  border-radius: 1px;
  display: inline-block;
  animation: squareBlink 1.4s infinite;
}

@keyframes squareBlink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.15;
  }
}

/* Bordered Keys (Phone & WhatsApp) with Bottom-Up Wipe Hover */
.dispatch-keys-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dispatch-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border: 1px solid rgba(225, 29, 36, 0.45);
  border-radius: 4px;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to top, #e11d24 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, border-color 0.2s ease;
}

.dispatch-key:hover {
  background-position: bottom;
  color: #08101d;
  border-color: #e11d24;
}

.dispatch-key-whatsapp {
  border-color: rgba(34, 197, 94, 0.45);
  background: linear-gradient(to top, #22c55e 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: top;
}

.dispatch-key-whatsapp:hover {
  background-position: bottom;
  color: #08101d;
  border-color: #22c55e;
}

/* Odometer Digit Roll */
.odometer-char {
  display: inline-block;
  animation: odometerRoll 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes odometerRoll {
  0% {
    transform: translateY(80%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   4. Full-Width Navbar (Edge-to-Edge Bar with Constrained Content Container)
   -------------------------------------------------------------------------- */
.island-nav-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(22, 35, 59, 0.08);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
  padding: 0;
  margin: 0;
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.island-nav-wrapper.scrolled {
  background: #ffffff;
  box-shadow: 0 8px 26px -4px rgba(15, 23, 42, 0.12);
}

.island-nav-wrapper .container {
  width: 100%;
  margin: 0 auto;
}

.navbar-island {
  pointer-events: auto;
  height: 84px;
  min-height: 84px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Island Scrolled Sticky State: Solid White, Consistent Full Size (Sticky Shrink) */
.island-nav-wrapper.scrolled .navbar-island {
  height: 76px;
  min-height: 76px;
  width: 100%;
  background: transparent;
  box-shadow: none;
}

/* Direct Brand Logo (flex-shrink: 0, original ~80px size) */
.island-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 14px;
}

.island-logo-img {
  height: 78px;
  width: auto;
  min-width: 78px;
  max-width: 260px;
  object-fit: contain;
  display: block;
  background: transparent;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.island-nav-wrapper.scrolled .island-logo-img {
  height: 70px;
  width: auto;
  min-width: 70px;
  max-width: 240px;
}

.island-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.island-brand-text .brand-title {
  font-size: 1.28rem;
  font-weight: 900;
  color: #0b1727;
  letter-spacing: -0.02em;
}

.island-brand-text .brand-sub {
  font-size: 0.65rem;
  font-weight: 800;
  color: #e11d24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-logo-img {
  height: 50px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
  background: transparent;
}

.footer-logo-img {
  height: 96px;
  width: auto;
  min-width: 96px;
  max-width: 280px;
  object-fit: contain;
  display: block;
  background: transparent;
}

/* Nav Menu (flex: 1; display: flex; justify-content: center) */
.navbar-island>nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

/* Nav Links with Letter Wave & Viewfinder Brackets */
.island-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.island-nav-item {
  position: relative;
}

.island-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 6px;
  font-size: 15px;
  font-weight: 600;
  color: #16233b;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-wave-text {
  display: inline-flex;
  align-items: center;
}

.nav-letter {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease;
}

.island-nav-link:hover .nav-letter {
  transform: translateY(-3px);
  color: #e11d24;
}

.nav-dropdown-caret {
  font-size: 14px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #e11d24;
  margin-left: 5px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-has-dropdown:hover .nav-dropdown-caret {
  transform: rotate(180deg);
}

/* Viewfinder Corner Brackets for Non-Active Nav Items */
.island-nav-link:not(.active)::before,
.island-nav-link:not(.active)::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

/* Top-Left Bracket ⌜ */
.island-nav-link:not(.active)::before {
  top: 0;
  left: 0;
  border-top: 2px solid #e11d24;
  border-left: 2px solid #e11d24;
  transform: translate(2px, 2px);
}

/* Bottom-Right Bracket ⌟ */
.island-nav-link:not(.active)::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #e11d24;
  border-right: 2px solid #e11d24;
  transform: translate(-2px, -2px);
}

.island-nav-link:not(.active):hover::before {
  opacity: 1;
  transform: translate(-4px, -2px);
}

.island-nav-link:not(.active):hover::after {
  opacity: 1;
  transform: translate(4px, 2px);
}

/* Active Link — orange underbar dot, brackets still work on hover */
.island-nav-link.active {
  color: #e11d24;
  font-weight: 700;
}

/* Orange dot sits below the text via ::after */
.island-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #e11d24;
  opacity: 1;
  border: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease,
    width 0.2s ease, height 0.2s ease, border-radius 0.2s ease,
    bottom 0.2s ease, left 0.2s ease, right 0.2s ease,
    border-color 0.2s ease, background-color 0.2s ease;
}

/* Viewfinder brackets for active link too — show on hover */
.island-nav-link.active::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  top: 0;
  left: 0;
  border-top: 2px solid #e11d24;
  border-left: 2px solid #e11d24;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  transform: translate(2px, 2px);
  border-radius: 0;
  background: none;
  display: block;
  margin-right: 0;
}

.island-nav-link.active:hover::before {
  opacity: 1;
  transform: translate(-4px, -2px);
}

/* Bottom-right bracket for active on hover (::after is the dot by default;
   on hover we swap it to a bracket using a trick: suppress dot + show bracket) */
.island-nav-link.active:hover::after {
  /* keep the bracket visible on hover, overriding the dot */
  bottom: 0;
  left: unset;
  right: 0;
  transform: translate(4px, 2px);
  width: 8px;
  height: 8px;
  border-radius: 0;
  background-color: transparent;
  border-bottom: 2px solid #e11d24;
  border-right: 2px solid #e11d24;
  opacity: 1;
}

/* Dropdown Menu Popup */
.nav-has-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid rgba(22, 35, 59, 0.09);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 36px -4px rgba(12, 21, 36, 0.16), 0 0 0 1px rgba(22, 35, 59, 0.04);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  z-index: 1000;
  pointer-events: none;
}

.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-has-dropdown:hover .nav-dropdown-menu,
.nav-has-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown-grid {
  min-width: 440px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #16233b;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nav-dropdown-item:hover {
  background-color: rgba(225, 29, 36, 0.08);
  color: #e11d24;
  transform: translateX(3px);
}

/* Action Buttons Group (flex-shrink: 0; margin-left: 20px; 10px gap) */
.island-actions-group {
  flex-shrink: 0;
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 10px !important;
}

/* Phone Number Button (Bottom-Up Navy Wipe, 40px Height) */
.btn-island-expert {
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #16233b;
  border: 1.5px solid #16233b;
  border-radius: 8px;
  background: linear-gradient(to top, #16233b 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: top;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-position 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, transform 0.2s ease;
}

.btn-island-expert:hover {
  background-position: bottom;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Get a Quote Button (Logistics Truck Drives Across Animation, 40px Height) */
.btn-island-truck {
  position: relative;
  height: 40px;
  padding: 0 15px;
  border-radius: 8px;
  background-color: #e11d24;
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(225, 29, 36, 0.24);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-island-truck:hover {
  background-color: #c01017;
  box-shadow: 0 6px 18px rgba(225, 29, 36, 0.38);
}

.btn-island-truck:active {
  transform: scale(0.97);
}

/* Hidden Truck Icon */
.btn-truck-svg {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #ffffff;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.btn-island-truck:hover .btn-truck-svg,
.btn-island-truck:focus-visible .btn-truck-svg {
  animation: truckDrive 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes truckDrive {
  0% {
    left: -24px;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 24px);
    opacity: 0;
  }
}

/* Moving Dashed Road Line */
.btn-truck-road {
  position: absolute;
  bottom: 5px;
  left: 12px;
  right: 12px;
  height: 2px;
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0.75) 4px, transparent 4px, transparent 8px);
  background-size: 16px 2px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}

.btn-island-truck:hover .btn-truck-road,
.btn-island-truck:focus-visible .btn-truck-road {
  opacity: 1;
  animation: roadDashShift 0.7s linear infinite;
}

@keyframes roadDashShift {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -32px 0;
  }
}

/* Button Label Nudges 2px Right */
.btn-truck-label {
  position: relative;
  z-index: 2;
  transition: transform 0.35s ease;
}

.btn-island-truck:hover .btn-truck-label,
.btn-island-truck:focus-visible .btn-truck-label {
  transform: translateX(2px);
}

/* Trailing Icon Swap: Arrow -> Checkmark */
.btn-truck-icons {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.btn-truck-arrow {
  position: absolute;
  font-size: 14px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.btn-truck-check {
  position: absolute;
  font-size: 16px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s ease 0.45s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}

.btn-island-truck:hover .btn-truck-arrow,
.btn-island-truck:focus-visible .btn-truck-arrow {
  opacity: 0;
  transform: translateX(4px);
}

.btn-island-truck:hover .btn-truck-check,
.btn-island-truck:focus-visible .btn-truck-check {
  opacity: 1;
  transform: scale(1);
}

.island-mobile-toggle {
  display: none;
  background: rgba(22, 35, 59, 0.05);
  border: 1px solid rgba(22, 35, 59, 0.12);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #16233b;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.island-mobile-toggle:hover,
.island-mobile-toggle:focus {
  background: #e11d24;
  border-color: #e11d24;
  color: #ffffff;
  transform: scale(1.04);
}

/* Mobile Get a Quote Header Button */
.btn-island-mobile-quote {
  display: none;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background-color: #e11d24;
  color: #ffffff;
  border: 1px solid #e11d24;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(225, 29, 36, 0.28);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.btn-island-mobile-quote:hover,
.btn-island-mobile-quote:focus {
  background-color: #c01017;
  border-color: #c01017;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(225, 29, 36, 0.38);
}

.btn-island-mobile-quote:active {
  transform: scale(0.96);
}

.btn-island-mobile-quote i {
  font-size: 14px;
  line-height: 1;
}

/* Responsive Safety (Between 993px and 1300px) */
@media (min-width: 993px) and (max-width: 1300px) {
  .island-nav-links {
    gap: 16px;
  }

  .island-nav-link {
    font-size: 13.5px;
    padding: 5px 2px;
  }

  .island-actions-group {
    margin-left: 12px;
    gap: 8px !important;
  }

  .btn-island-expert {
    height: 38px;
    padding: 0 10px;
    font-size: 12.5px;
  }

  .btn-island-truck {
    height: 38px;
    padding: 0 12px;
    font-size: 12.5px;
  }
}

@media (max-width: 992px) {
  .island-mobile-toggle {
    display: inline-flex;
    margin-left: 0 !important;
  }

  .btn-island-mobile-quote {
    display: inline-flex;
  }

  .island-actions-group {
    margin-left: auto;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

@media (max-width: 380px) {
  .btn-island-mobile-quote {
    height: 38px;
    padding: 0 10px;
    font-size: 12px;
    gap: 4px;
  }

  .island-mobile-toggle {
    width: 38px;
    height: 38px;
  }
}

/* --------------------------------------------------------------------------
   5. Cinematic Hero Section (Full-Bleed Background Slider Layer & Overlapping Form)
   -------------------------------------------------------------------------- */
:root {
  --dispatch-bar-height: 36px;
  --navbar-height: 72px;
  --header-total-height: 108px;
  --overlap: 64px;
  --hero-bottom-space: 20px;
  --badge-form-gap: 22px;
}

/* Default / Mobile Hero Wrapper */
.hero-wrapper {
  position: relative;
  background: var(--bg-canvas, #f8fafc);
  width: 100%;
}

.hero-photo {
  position: relative;
  width: 100%;
}

.hero-slider-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #0b0f15;
  /* Neutral dark fallback */
  overflow: hidden;
  /* Strict containment of photo layer to hero photo only */
}

/* Desktop / Laptop (min-width: 1024px): Exact 100dvh One-Screen Fit */
@media (min-width: 1024px) {
  .hero-wrapper {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 640px;
    background: var(--bg-canvas, #f8fafc);
    position: relative;
    box-sizing: border-box;
    overflow: visible;
  }

  /* Child 1: .hero-photo takes leftover height, overflow hidden strictly contains slider & Ken Burns zoom */
  .hero-photo {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .hero-photo .dispatch-control-bar {
    flex: 0 0 auto;
    position: relative;
    z-index: 1030;
  }

  .hero-photo .island-nav-wrapper {
    flex: 0 0 auto;
    position: relative;
    z-index: 1020;
  }

  /* Sticky fixed state when scrolled past 80px on hero */
  .hero-photo .island-nav-wrapper.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
  }

  /* Vertically centered hero text block inside .hero-photo */
  .hero-content-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: var(--overlap);
  }

  /* Child 2: .hero-form overlapping bottom edge of hero photo by --overlap */
  .hero-form {
    flex: none;
    margin-top: calc(-1 * var(--overlap));
    margin-bottom: var(--hero-bottom-space, 20px);
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
  }

  /* Heading & Subtitle Desktop Scale */
  .hero-title {
    font-size: clamp(30px, 3.8vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 12px;
    max-width: 720px;
  }

  .hero-lead-text {
    font-size: 15px;
    color: #f1f5f9;
    max-width: 660px;
    line-height: 1.55;
    margin-bottom: 10px;
    opacity: 0.95;
    font-weight: 400;
  }

  .hero-subdeck-panel {
    background: rgba(12, 21, 36, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #e11d24;
    border-radius: 0 12px 12px 0;
    padding: 10px 16px;
    max-width: 660px;
    margin-bottom: 4px;
  }

  .hero-subdeck-text {
    font-size: 13.5px;
    color: #cbd5e1;
    line-height: 1.55;
    opacity: 0.92;
  }

  .hero-metrics-strip {
    margin-bottom: 0;
    padding-top: 0;
  }
}

/* Shorter Desktop Screens (640px - 720px visible height): Gracefully tighten text & overlap so heading never touches navbar */
@media (min-width: 1024px) and (max-height: 720px) {
  :root {
    --overlap: 50px;
    --badge-form-gap: 20px;
    --hero-bottom-space: 18px;
  }

  .hero-title {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.15;
    margin-bottom: 8px;
  }

  .hero-lead-text {
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: 8px;
  }

  .hero-subdeck-panel {
    padding: 8px 12px;
  }

  .hero-subdeck-text {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .hero-content-wrap {
    padding-top: 0;
    padding-bottom: var(--overlap);
  }
}

/* Medium Desktop Screens (721px - 820px visible height) */
@media (min-width: 1024px) and (min-height: 721px) and (max-height: 820px) {
  :root {
    --overlap: 60px;
    --badge-form-gap: 22px;
    --hero-bottom-space: 20px;
  }

  .hero-title {
    font-size: clamp(28px, 3.5vw, 40px);
    margin-bottom: 10px;
  }

  .hero-lead-text {
    margin-bottom: 10px;
  }
}

/* Tall Desktop Screens (over 950px visible height): slightly roomier card & inputs, gap never exceeds 26px */
@media (min-width: 1024px) and (min-height: 951px) {
  :root {
    --overlap: 68px;
    --badge-form-gap: 24px;
    --hero-bottom-space: 24px;
  }

  .quote-dock-card {
    padding: 26px 30px;
  }

  .quote-input-custom {
    height: 54px;
  }

  .btn-quote-submit {
    height: 56px;
  }
}

.hero-slider-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-slide-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s ease;
  overflow: hidden;
}

.hero-slide-item.active {
  opacity: 1;
  visibility: visible;
  will-change: opacity, transform;
}

.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  display: block;
  transform: scale(1);
  transform-origin: center 20%;
}

#heroSlideItem0 .hero-slide-img {
  object-position: center 8%;
  transform-origin: center 15%;
}

#heroSlideItem1 .hero-slide-img {
  object-position: center 20%;
  transform-origin: center 25%;
}

#heroSlideItem2 .hero-slide-img {
  object-position: center 8%;
  transform-origin: center 15%;
}

@media (max-width: 991px) {
  .hero-slide-img {
    object-position: center 8%;
    transform-origin: center 15%;
  }

  #heroSlideItem0 .hero-slide-img {
    object-position: 45% 6%;
  }

  #heroSlideItem1 .hero-slide-img {
    object-position: 65% 18%;
  }

  #heroSlideItem2 .hero-slide-img {
    object-position: 50% 6%;
  }
}

.hero-slide-item.active .hero-slide-img {
  animation: kenBurnsZoom 7s ease-out forwards;
}

@keyframes kenBurnsZoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.05);
  }
}

/* Readability Multi-Layer Neutral Dark Overlay: Reduced Blue Tint, Natural Warm Photo Clarity */
.hero-readability-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Top-to-bottom neutral dark overlay: clean contrast at top and bottom, clear photo in middle */
    linear-gradient(to bottom,
      rgba(10, 14, 20, 0.85) 0%,
      rgba(10, 14, 20, 0.65) 55px,
      rgba(10, 14, 20, 0.38) 120px,
      rgba(10, 14, 20, 0.10) 260px,
      rgba(10, 14, 20, 0.42) 68%,
      rgba(10, 14, 20, 0.90) 100%),
    /* Left-to-right soft neutral gradient for text legibility without blue cast */
    linear-gradient(to right,
      rgba(8, 11, 16, 0.82) 0%,
      rgba(8, 11, 16, 0.52) 44%,
      rgba(8, 11, 16, 0.12) 80%,
      rgba(8, 11, 16, 0.02) 100%);
}

/* Faint Ambient Dot Grid Pattern */
.hero-ambient-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.25;
}

.hero-content-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Top Status Bar: Slider Pill sits alone in top-right */
.hero-status-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: clamp(20px, 3vh, 32px);
}

.hero-top-pills-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.corridor-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 9999px;
  background-color: rgba(22, 35, 59, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fcd34d;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.corridor-pill-badge .highlight-text {
  color: #fbbf24;
  font-weight: 700;
}

.hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 9999px;
  background-color: rgba(225, 29, 36, 0.16);
  border: 1px solid rgba(225, 29, 36, 0.4);
  color: #ffb690;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Glass Slider Pill Controls */
.slider-glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  outline: none;
}

.slider-counter-number {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e2e8f0;
}

.slider-progress-track {
  width: 44px;
  height: 3.5px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  overflow: hidden;
}

.slider-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #e11d24, #f59e0b);
  border-radius: 9999px;
}

.slider-arrow-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-slider-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(30, 41, 59, 0.7);
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 11px;
  padding: 0;
}

.btn-slider-arrow:hover {
  background-color: var(--secondary);
  color: #ffffff;
  border-color: var(--secondary);
}

/* Hero Typography: Roomy & Elegant 2-Line Wrap */
.hero-main-intro {
  margin-bottom: 0;
}

.hero-title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 14px;
  max-width: 760px;
}

.hero-title-main {
  display: block;
}

.hero-highlight-phrase {
  display: inline-block;
  position: relative;
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  color: #e11d24;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
  padding-bottom: 4px;
}

.hero-highlight-phrase::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3.5px;
  background: linear-gradient(90deg, #ff4d4f 0%, #e11d24 75%, rgba(225, 29, 36, 0.3) 100%);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(225, 29, 36, 0.45);
}


.hero-lead-text {
  font-size: clamp(14px, 1.05vw, 15px);
  color: #f1f5f9;
  max-width: 660px;
  line-height: 1.55;
  margin-bottom: 10px;
  opacity: 0.95;
  font-weight: 400;
}

.hero-subdeck-panel {
  background: rgba(12, 21, 36, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid #e11d24;
  border-radius: 0 12px 12px 0;
  padding: 10px 16px;
  max-width: 660px;
  margin-bottom: 4px;
}

.hero-subdeck-text {
  font-size: 13.5px;
  color: #cbd5e1;
  line-height: 1.55;
  opacity: 0.92;
}

.hero-subtitle {
  font-size: 14px;
  color: #cbd5e1;
  max-width: 660px;
  line-height: 1.55;
  margin-bottom: 10px;
  opacity: 0.94;
}

/* Trust Metrics Chip: Authentic Google Review Badge */
.hero-metrics-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 0;
  border-top: none;
  margin-bottom: 0;
}

.google-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 5px 16px 5px 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.google-review-badge:hover {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.google-badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.google-g-svg {
  display: block;
}

.google-badge-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #f1f5f9;
  line-height: 1;
}

.google-badge-score {
  font-weight: 800;
  color: #ffffff;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}

.google-badge-stars {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  color: #f59e0b;
  font-size: 11.5px;
}

.google-badge-title {
  font-weight: 600;
  color: #e2e8f0;
}

.google-badge-count {
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Live Quote Calculator Dock (Integrated in Hero Stage)
   -------------------------------------------------------------------------- */
.quote-dock-wrapper {
  position: relative;
  z-index: 20;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  flex-shrink: 0;
}

.quote-dock-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
  border: 1px solid rgba(225, 29, 36, 0.16);
  border-radius: 18px;
  box-shadow: 0 20px 48px -10px rgba(12, 21, 36, 0.16), 0 8px 20px -4px rgba(12, 21, 36, 0.06), 0 0 0 1px rgba(225, 29, 36, 0.05);
  padding: 24px 28px;
  animation: quoteCardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes quoteCardEntrance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Thin Orange-Gold Top Accent Line & Faint Dot-Grid Texture */
.card-accent-line {
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #e11d24 0%, #f59e0b 50%, #e11d24 100%);
  opacity: 0.95;
  pointer-events: none;
}

.card-dot-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 80px;
  background-image: radial-gradient(rgba(22, 35, 59, 0.12) 1.2px, transparent 1.2px);
  background-size: 10px 10px;
  pointer-events: none;
  border-radius: 0 22px 0 0;
  opacity: 0.45;
}

/* Form Header: Segmented Control & Live Lightning Badge */
.quote-dock-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(22, 35, 59, 0.06);
}

.quote-tab-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.btn-quote-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: color 0.18s ease;
  background: transparent;
  color: #475569;
  position: relative;
  z-index: 2;
}

.btn-quote-tab:hover {
  color: #16233b;
}

.btn-quote-tab.active {
  color: #ffffff;
}

.tab-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.tab-icon.tab-icon-bounce {
  animation: tabIconBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes tabIconBounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.22) translateY(-2px);
  }
}

.quote-tab-glide {
  position: absolute;
  top: 4px;
  left: 4px;
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(225, 29, 36, 0.35);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

.quote-speed-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 9999px;
  background-color: rgba(225, 29, 36, 0.08);
  border: 1px solid rgba(225, 29, 36, 0.25);
  color: #e11d24;
  font-size: 12.5px;
  font-weight: 700;
}

.badge-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #e11d24;
  display: inline-block;
  animation: pulseBadgeDot 2s infinite ease-in-out;
}

@keyframes pulseBadgeDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.35);
    opacity: 0.5;
  }
}

.speed-lightning-icon {
  display: inline-block;
  animation: lightningFlicker 3.8s infinite ease-in-out;
}

@keyframes lightningFlicker {

  0%,
  86%,
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }

  88%,
  94% {
    opacity: 0.3;
    transform: scale(0.9);
  }

  90%,
  96% {
    opacity: 1;
    transform: scale(1.25);
    filter: drop-shadow(0 0 6px #e11d24);
  }
}

/* 5-Column Form Grid with Staggered Entrance */
.quote-form-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
  position: relative;
}

.quote-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.quote-field-group:nth-child(1) {
  animation: fieldEntrance 0.4s ease 0ms both;
}

.quote-field-group:nth-child(3) {
  animation: fieldEntrance 0.4s ease 35ms both;
}

.quote-field-group:nth-child(4) {
  animation: fieldEntrance 0.4s ease 70ms both;
}

.quote-field-group:nth-child(5) {
  animation: fieldEntrance 0.4s ease 105ms both;
}

.quote-field-group:nth-child(6) {
  animation: fieldEntrance 0.4s ease 140ms both;
}

@keyframes fieldEntrance {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quote-field-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: #16233b;
  margin-bottom: 0;
}

/* Tinted Rounded Square Label Badges */
.label-icon-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.22s ease;
}

.badge-from,
.badge-to {
  background: rgba(225, 29, 36, 0.12);
  color: #e11d24;
}

.badge-size {
  background: rgba(22, 35, 59, 0.12);
  color: #16233b;
}

.badge-date {
  background: rgba(14, 165, 233, 0.14);
  color: #0284c7;
}

.badge-phone,
.badge-contact {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}

.quote-field-group:focus-within .label-icon-badge {
  background: #e11d24 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(225, 29, 36, 0.35);
}

/* Inputs with 1.5px Soft Gray-Blue Border, Inset Shadow & 12px Radius */
.input-wrap-custom {
  position: relative;
  transition: transform 0.18s ease;
}

.input-wrap-custom:hover {
  transform: translateY(-1px);
}

.quote-input-custom {
  width: 100%;
  height: 52px;
  background-color: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(12, 21, 36, 0.03);
  padding: 0 14px;
  font-size: 14px;
  color: #16233b;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.quote-input-custom::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.input-wrap-custom:hover .quote-input-custom {
  border-color: rgba(225, 29, 36, 0.5);
  box-shadow: inset 0 2px 4px rgba(12, 21, 36, 0.02), 0 3px 8px rgba(12, 21, 36, 0.04);
}

.quote-input-custom:focus {
  background-color: #ffffff;
  border-color: #e11d24;
  box-shadow: 0 0 0 3px rgba(225, 29, 36, 0.18), inset 0 1px 2px rgba(12, 21, 36, 0.03);
}

/* Validation Checkmark on Valid Field */
.valid-check-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  color: #16a34a;
  font-size: 15px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.input-wrap-custom.is-valid .valid-check-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.input-wrap-custom.is-valid .quote-input-custom {
  border-color: #22c55e;
}

/* Validation Shake & Inline Error */
.input-wrap-custom.is-invalid .quote-input-custom {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.is-invalid-shake {
  animation: fieldShake 0.4s ease-in-out;
}

@keyframes fieldShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-4px);
  }

  40%,
  80% {
    transform: translateX(4px);
  }
}

.field-error-hint {
  display: none;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1.2;
}

.field-error-hint.active {
  display: block;
}

/* Route Visual Connector & Swap Button (Centered between Moving From & Moving To) */
.quote-route-bridge {
  position: absolute;
  left: calc(40% - 2px);
  top: 39px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  pointer-events: auto;
}

.btn-city-swap {
  position: relative;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 8px rgba(12, 21, 36, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-city-swap:hover {
  border-color: #e11d24;
  color: #e11d24;
  transform: scale(1.12) rotate(180deg);
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.3);
}

.btn-city-swap.rotating {
  transform: scale(1.12) rotate(360deg);
}

/* Fourth Column: Move Date & Phone Split */
.date-phone-split {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.date-input-wrap {
  width: 48%;
  flex-shrink: 0;
  position: relative;
}

.phone-input-wrap {
  width: 52%;
  flex-grow: 1;
  position: relative;
}

.date-input-wrap .quote-input-custom {
  padding: 0 8px 0 10px;
  font-size: 12.5px;
}

.phone-input-wrap .quote-input-custom {
  padding: 0 28px 0 12px;
}

/* Move Size Dropdown with Custom Chevron */
.select-wrap-custom {
  position: relative;
}

.quote-select-custom {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 34px !important;
}

.select-chevron-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 11px;
  color: #64748b;
  transition: transform 0.2s ease, color 0.2s ease;
}

.select-wrap-custom:hover .select-chevron-icon {
  color: #e11d24;
  transform: translateY(-50%) translateY(1px);
}

/* Gift Icon Wiggle on Value Change */
.gift-hint-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.gift-hint-icon.gift-wiggle {
  animation: giftWiggle 0.6s ease-in-out;
}

@keyframes giftWiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-14deg) scale(1.15);
  }

  40% {
    transform: rotate(14deg) scale(1.15);
  }

  60% {
    transform: rotate(-8deg);
  }

  80% {
    transform: rotate(8deg);
  }
}

/* Aligned Helper Baseline Row & Popular Chips */
.quote-helper-line {
  min-height: 22px;
  display: flex;
  align-items: center;
  font-size: 11.5px;
  margin-top: 5px;
  line-height: 1;
}

.quote-popular-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.chip-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.btn-chip {
  background-color: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-chip:hover {
  background-color: #ffffff;
  border-color: #e11d24;
  color: #e11d24;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(225, 29, 36, 0.15);
}

.btn-chip.chip-active-flash {
  background-color: #e11d24 !important;
  border-color: #e11d24 !important;
  color: #ffffff !important;
  transform: scale(0.96);
}

.quote-hint-text {
  color: #64748b;
}

.quote-hint-orange {
  color: #e11d24;
  font-weight: 600;
}

.input-highlight-flash {
  animation: flashHighlight 0.5s ease;
}

@keyframes flashHighlight {
  0% {
    background-color: rgba(225, 29, 36, 0.18);
  }

  100% {
    background-color: #ffffff;
  }
}

/* Bottom Action Row */
.quote-dock-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(22, 35, 59, 0.06);
}

.quote-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quote-privacy-guarantee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}

.shield-circle-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
}

.quote-bottom-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Dynamic Live Estimate Chip */
.quote-estimate-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-estimate-chip.active {
  background: rgba(225, 29, 36, 0.08);
  border-color: rgba(225, 29, 36, 0.3);
  color: #991b1b;
  box-shadow: 0 2px 8px rgba(225, 29, 36, 0.12);
}

.quote-estimate-chip.active .chip-sparkle {
  color: #e11d24;
  animation: sparklePulse 2s infinite ease-in-out;
}

@keyframes sparklePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

/* Compact Progress Ring */
.quote-progress-ring-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 4px 11px 4px 6px;
  transition: all 0.25s ease;
}

.quote-progress-ring-wrap.all-completed {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.35);
}

.progress-ring-svg {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  stroke: #e2e8f0;
}

.progress-ring-bar {
  stroke: #e11d24;
  transition: stroke-dashoffset 0.35s ease, stroke 0.3s ease;
}

.quote-progress-ring-wrap.all-completed .progress-ring-bar {
  stroke: #16a34a;
}

.progress-ring-text {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}

.quote-progress-ring-wrap.all-completed .progress-ring-text {
  color: #15803d;
}

/* Taller Submit Button with Rich Gradient & States */
.btn-quote-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 26px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 50%, #991b1b 100%);
  color: #ffffff;
  border: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(225, 29, 36, 0.35), 0 2px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-quote-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(225, 29, 36, 0.5), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.btn-quote-submit:active {
  transform: scale(0.98);
}

.btn-quote-submit.is-ready {
  box-shadow: 0 8px 24px rgba(225, 29, 36, 0.45), 0 0 0 3px rgba(225, 29, 36, 0.25);
}

.btn-quote-submit.is-ready .btn-submit-arrow {
  animation: arrowNudge 1.6s infinite ease-in-out;
}

@keyframes arrowNudge {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

.btn-quote-submit.btn-success-state {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.4) !important;
}

.btn-submit-arrow {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-quote-submit:hover .btn-submit-arrow {
  transform: translateX(4px);
}

.btn-submit-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.btn-quote-submit:hover .btn-submit-shine {
  left: 150%;
}

.btn-quote-submit.is-ready .btn-submit-shine {
  animation: oneTimeShine 1.8s ease;
}

@keyframes oneTimeShine {
  0% {
    left: -100%;
  }

  100% {
    left: 160%;
  }
}



/* --------------------------------------------------------------------------
   7. Trust Pillars & Features Section (1 H2, Exactly 3 H3s)
   -------------------------------------------------------------------------- */
.trust-pillars-section {
  padding: 72px 0;
  background-color: var(--bg-canvas);
}

.section-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9999px;
  background-color: var(--surface-high);
  border: 1px solid var(--border-card);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}

.section-pill-tag i {
  color: var(--secondary);
}

/* Single H2 on Home Page */
.section-main-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.section-lead-desc {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
}

.pillar-card-custom {
  background-color: var(--surface-white);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pillar-card-custom:hover {
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pillar-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background-color: rgba(22, 35, 59, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  font-size: 26px;
  margin-bottom: 20px;
  transition: background-color 0.15s ease;
}

.pillar-card-custom:hover .pillar-icon-box {
  background-color: rgba(225, 29, 36, 0.12);
}

/* Exactly 3 H3s in Trust Pillars */
.pillar-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.pillar-card-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.pillar-check-line {
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--secondary);
}

/* --------------------------------------------------------------------------
   8. Corporate Fleet Standards Banner (Zero Headings)
   -------------------------------------------------------------------------- */
.fleet-standards-banner {
  background-color: var(--surface-low);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 56px 0;
}

.fleet-tag-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  display: block;
  margin-bottom: 6px;
}

.fleet-banner-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.fleet-banner-desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 580px;
  margin-bottom: 0;
}

.fleet-actions-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-fleet-outline {
  padding: 10px 20px;
  border-radius: 8px;
  background-color: var(--surface-white);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}

.btn-fleet-outline:hover {
  background-color: var(--surface-high);
  color: var(--primary);
}

.btn-fleet-solid {
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--secondary-gradient);
  color: #ffffff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-orange);
  transition: all 0.15s ease;
}

.btn-fleet-solid:hover {
  background: var(--secondary-gradient-hover);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   9. Search By Location Widget (Zero Headings)
   -------------------------------------------------------------------------- */
.search-location-section {
  padding: 56px 0;
  background-color: var(--bg-canvas);
}

.location-heading-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.city-search-box {
  position: relative;
  max-width: 450px;
  margin-bottom: 24px;
}

.city-search-box input {
  width: 100%;
  padding: 10px 16px 10px 42px;
  border-radius: 8px;
  border: 1px solid var(--border-card);
  background-color: var(--surface-white);
  font-size: 13px;
  outline: none;
}

.city-search-box input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(225, 29, 36, 0.12);
}

.city-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 18px;
}

.city-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.city-grid-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-radius: 8px;
  background-color: var(--surface-white);
  border: 1px solid var(--border-card);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.15s ease;
}

.city-grid-btn:hover {
  background-color: var(--surface-low);
  border-color: var(--secondary);
  color: var(--secondary);
  transform: translateY(-1px);
}

.city-grid-btn i {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.15s ease;
}

.city-grid-btn:hover i {
  color: var(--secondary);
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   10. Harmonized Deep Navy Footer (Zero Headings)
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--primary);
  color: #cbd5e1;
  border-top: 1px solid var(--primary-container);
  padding: 64px 0 28px;
}

.footer-brand-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.015em;
}

.footer-bio-text {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.65;
  margin-top: 12px;
  max-width: 380px;
}

.footer-compliance-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.badge-gst {
  padding: 4px 10px;
  border-radius: 4px;
  background-color: var(--primary-container);
  border: 1px solid #334155;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
}

.badge-iba {
  padding: 4px 10px;
  border-radius: 4px;
  background-color: rgba(225, 29, 36, 0.18);
  border: 1px solid rgba(225, 29, 36, 0.35);
  color: #ffb690;
  font-size: 11px;
  font-weight: 700;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  margin-bottom: 16px;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link-item a {
  font-size: 13px;
  color: #94a3b8;
  transition: color 0.15s ease;
}

.footer-link-item a:hover {
  color: var(--secondary-container);
}

.footer-helpdesk-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.helpdesk-address {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 4px;
}

.helpdesk-phone {
  color: var(--tertiary);
  font-weight: 700;
}

.helpdesk-email {
  color: #e2e8f0;
}

.footer-bottom-bar {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(51, 65, 85, 0.6);
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footer-trust-tags {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-trust-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #cbd5e1;
}

.footer-trust-tag .tag-amber {
  color: var(--tertiary);
}

.footer-trust-tag .tag-orange {
  color: var(--secondary);
}

/* --------------------------------------------------------------------------
   11. Breadcrumbs Section (Preserved & Modernized)
   -------------------------------------------------------------------------- */
.dynamic-bc-section {
  background-color: var(--surface-low);
  border-bottom: 1px solid var(--border-subtle);
  padding: 20px 0;
  width: 100%;
}

.dyn-bc-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.dyn-bc-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dyn-bc-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}

.dyn-bc-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.dyn-bc-nav {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
}

.dyn-bc-link {
  color: var(--text-muted);
}

.dyn-bc-link:hover {
  color: var(--secondary);
}

.dyn-bc-sep {
  color: var(--text-secondary);
  font-size: 11px;
}

.dyn-bc-current {
  color: var(--text-primary);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   12. Mobile Bottom Quick Bar
   -------------------------------------------------------------------------- */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--surface-white);
  border-top: 1px solid var(--border-card);
  box-shadow: 0 -4px 16px rgba(22, 35, 59, 0.12);
  z-index: 1040;
  padding: 8px 12px;
}

.mobile-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.btn-mobile-quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.btn-mobile-call {
  background-color: var(--surface-low);
  color: var(--primary);
  border: 1px solid var(--border-card);
}

.btn-mobile-whatsapp {
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.btn-mobile-quote {
  background: var(--secondary-gradient);
  color: #ffffff;
  border: none;
}

/* --------------------------------------------------------------------------
   13. Responsive Media Queries & Viewport Height Budgeting
   -------------------------------------------------------------------------- */

/* Viewport height <= 760px: Moderate compacting while preserving comfortable form */
@media (min-width: 1024px) and (max-height: 760px) {
  :root {
    --overlap: 56px;
    --hero-bottom-space: 18px;
  }

  .hero-title {
    font-size: clamp(34px, 4.4vh + 8px, 42px);
    margin-bottom: 14px;
  }

  .hero-subtitle {
    font-size: clamp(14.5px, 1.6vh + 3px, 16.5px);
    line-height: 1.45;
    margin-bottom: 16px;
  }

  .metric-chip-item {
    font-size: 13.5px;
  }

  .quote-dock-card {
    padding: 18px 24px;
  }

  .quote-dock-header {
    padding-bottom: 8px;
    margin-bottom: 12px;
  }

  .btn-quote-tab {
    height: 40px;
    padding: 4px 14px;
    font-size: 13px;
  }

  .quote-speed-badge {
    font-size: 11.5px;
    padding: 4px 12px;
  }

  .quote-form-grid {
    gap: 12px;
    margin-bottom: 12px;
  }

  .quote-field-group {
    gap: 5px;
  }

  .quote-field-label {
    font-size: 13px;
  }

  .quote-input-custom {
    height: 48px;
    font-size: 13.5px;
  }

  .btn-quote-submit {
    height: 50px;
    font-size: 14px;
    padding: 0 22px;
  }

  .quote-route-bridge {
    top: 36px;
  }

  .quote-dock-bottom {
    padding-top: 12px;
  }
}

/* Viewport height <= 680px (e.g. 650px height screens): Heading & gaps shrink first, overlap down to 48px, fields stay >= 46px */
@media (min-width: 1024px) and (max-height: 680px) {
  :root {
    --dispatch-bar-height: 30px;
    --navbar-height: 58px;
    --header-total-height: 88px;
    --overlap: 48px;
    --hero-bottom-space: 14px;
  }

  .dispatch-control-bar {
    max-height: 30px;
    padding: 2px 0;
    font-size: 10px;
  }

  .navbar-island {
    height: 70px;
  }

  .island-brand img {
    max-height: 60px;
  }

  .hero-title {
    font-size: clamp(28px, 3.6vh + 6px, 34px);
    margin-bottom: 10px;
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 12px;
  }

  .google-review-badge {
    padding: 3px 12px 3px 4px;
    gap: 7px;
  }

  .google-badge-icon {
    width: 22px;
    height: 22px;
  }

  .google-badge-icon svg {
    width: 13px;
    height: 13px;
  }

  .google-badge-text {
    font-size: 12px;
    gap: 6px;
  }

  .google-badge-score {
    font-size: 12.5px;
  }

  .google-badge-stars {
    font-size: 10px;
    gap: 1.5px;
  }

  .google-badge-count {
    font-size: 11px;
  }

  .quote-dock-card {
    padding: 14px 18px;
    border-radius: 14px;
  }

  .quote-dock-header {
    padding-bottom: 6px;
    margin-bottom: 8px;
  }

  .btn-quote-tab {
    height: 36px;
    padding: 3px 10px;
    font-size: 12px;
  }

  .quote-speed-badge {
    font-size: 11px;
    padding: 3px 8px;
  }

  .quote-form-grid {
    gap: 10px;
    margin-bottom: 8px;
  }

  .quote-field-group {
    gap: 3px;
  }

  .quote-field-label {
    font-size: 12px;
  }

  .quote-input-custom {
    height: 46px;
    /* Never below 46px as instructed */
    font-size: 12.5px;
    border-radius: 10px;
  }

  .btn-quote-submit {
    height: 46px;
    /* Never below 46px as instructed */
    font-size: 13px;
    padding: 0 18px;
    border-radius: 10px;
  }

  .quote-route-bridge {
    top: 33px;
  }

  .btn-city-swap {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .quote-dock-bottom {
    padding-top: 8px;
  }

  .quote-privacy-guarantee {
    font-size: 11px;
  }
}



@media (max-width: 992px) {
  .dispatch-control-bar {
    display: none !important;
  }

  .island-nav-links {
    display: none !important;
  }

  .btn-island-truck,
  .btn-island-expert {
    display: none !important;
  }

  .island-nav-wrapper {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    background: #ffffff;
    border-bottom: 1px solid rgba(22, 35, 59, 0.08);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
    pointer-events: auto;
    z-index: 1030;
  }

  .island-nav-wrapper .container {
    padding-left: 14px;
    padding-right: 14px;
    max-width: 100%;
  }

  .navbar-island,
  .island-nav-wrapper.scrolled .navbar-island {
    height: 72px;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .island-brand {
    display: flex;
    align-items: center;
    max-width: calc(100% - 56px);
    margin-right: 0;
    padding: 4px 0;
  }

  .island-logo-img,
  .island-nav-wrapper.scrolled .island-logo-img {
    height: 60px;
    max-height: 64px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: block;
  }

  .island-mobile-toggle {
    display: inline-flex !important;
    width: 42px;
    height: 42px;
    font-size: 1.45rem;
    margin-left: auto;
    flex-shrink: 0;
  }

  .quote-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quote-form-grid #group_phone {
    grid-column: span 2;
  }

  .quote-route-bridge {
    display: none !important;
  }

  .quote-bottom-right {
    width: 100%;
    justify-content: space-between;
  }

  /* Tablet / Mobile Layout for Hero & Quote Form */
  .hero-wrapper {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    background: var(--bg-canvas, #f8fafc) !important;
    position: relative !important;
    overflow: visible !important;
  }

  .hero-photo {
    display: block !important;
    height: auto !important;
    flex: none !important;
    padding-bottom: 28px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-photo .island-nav-wrapper {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 1030;
  }

  .hero-content-wrap {
    height: auto !important;
    display: block !important;
    padding-top: 16px !important;
    padding-bottom: 10px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .hero-main-intro {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .hero-title {
    font-size: clamp(21px, 5.5vw, 25px) !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  }

  .hero-title-main {
    display: block;
  }

  .hero-highlight-phrase {
    display: inline;
  }

  .hero-lead-text {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-subdeck-panel {
    background: rgba(12, 21, 36, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 2px solid #e11d24 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    max-width: 440px !important;
    margin: 0 auto 8px auto !important;
    text-align: left !important;
  }

  .hero-subdeck-text {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    color: #cbd5e1 !important;
  }

  .hero-subtitle {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-metrics-strip {
    margin-top: 2px;
    display: flex;
    justify-content: center;
  }

  .google-review-badge {
    padding: 3px 12px 3px 6px !important;
    gap: 6px !important;
    background: rgba(12, 21, 36, 0.78) !important;
    border-radius: 50px !important;
  }

  .google-badge-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .google-badge-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  .google-badge-text {
    font-size: 11.5px !important;
    gap: 4px !important;
  }

  .google-badge-score {
    font-size: 12px !important;
  }

  .google-badge-stars {
    font-size: 9.5px !important;
  }

  .google-badge-title {
    font-size: 10.5px !important;
  }

  .google-badge-count {
    font-size: 10px !important;
  }

  .hero-form {
    margin-top: 18px !important;
    margin-bottom: 24px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .quote-dock-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .quote-dock-card {
    padding: 14px 12px 16px 12px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px -4px rgba(12, 21, 36, 0.12) !important;
    border: 1px solid #ebdccb !important;
  }

  .card-dot-pattern {
    display: none !important;
  }

  .card-accent-line {
    height: 3px !important;
  }

  /* Header & Tabs */
  .quote-dock-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }

  .quote-tab-group {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    padding: 3px !important;
    width: 100% !important;
  }

  .btn-quote-tab {
    height: 36px !important;
    padding: 4px 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    gap: 4px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  .tab-icon {
    font-size: 12px !important;
  }

  .quote-speed-badge {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    margin-top: 2px !important;
    border-radius: 50px !important;
  }

  /* 2-Column Responsive Grid on Mobile */
  .quote-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 8px !important;
    margin-bottom: 8px !important;
  }

  #group_mfrom {
    grid-column: 1 !important;
  }

  #group_mto {
    grid-column: 2 !important;
  }

  #group_size {
    grid-column: 1 !important;
  }

  #group_date {
    grid-column: 2 !important;
  }

  #group_phone {
    grid-column: span 2 !important;
  }

  .quote-field-group {
    gap: 2px !important;
  }

  .quote-field-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    color: #334155 !important;
  }

  .label-icon-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 9.5px !important;
    border-radius: 4px !important;
  }

  .quote-input-custom {
    height: 42px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }

  .quote-select-custom {
    padding-right: 22px !important;
    font-size: 12px !important;
  }

  .select-chevron-icon {
    right: 8px !important;
    font-size: 10px !important;
  }

  .valid-check-icon {
    right: 8px !important;
    font-size: 11px !important;
  }

  .quote-route-bridge {
    display: none !important;
  }

  /* Bottom Actions & Submit Button */
  .quote-dock-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-top: 6px !important;
  }

  .quote-bottom-right {
    order: 1 !important;
    width: 100% !important;
  }

  .btn-quote-submit {
    width: 100% !important;
    height: 46px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    padding: 0 14px !important;
    justify-content: center !important;
  }

  .btn-submit-text {
    font-size: 14px !important;
  }

  .btn-submit-arrow {
    font-size: 13px !important;
  }

  .quote-bottom-left {
    order: 2 !important;
    width: 100% !important;
  }

  .quote-privacy-guarantee {
    font-size: 10.5px !important;
    justify-content: center !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }

  .shield-circle-icon {
    font-size: 11px !important;
  }
}

@media (max-width: 767px) {

  /* --------------------------------------------------------------------------
     1. Exact First Viewport Layout (Mobile: Header + Hero Photo + Overlapping Form)
     -------------------------------------------------------------------------- */
  :root {
    --mobile-header-h: 72px;
    --bottom-bar-h: 54px;
  }

  /* First Viewport Container: Fits Header + Hero Photo + Overlapping Form in exactly 1 screen.
     Note: In this DOM structure, .island-nav-wrapper is inside #heroWrapper, so #heroWrapper spans
     the full viewport height (100dvh / 100svh) with padding-bottom for the sticky bottom bar
     (calc(var(--bottom-bar-h) + 10px)), keeping the stats section strictly hidden below the fold. */
  .hero-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100dvh !important;
    height: 100svh !important;
    min-height: 560px !important;
    padding-bottom: calc(var(--bottom-bar-h, 54px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--bg-canvas, #f8fafc) !important;
  }

  /* Photo area: fills space between header and overlapping form */
  .hero-photo {
    flex: 1 1 auto !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Taller, Premium Mobile Header (64-68px) with Bigger Logo */
  .hero-photo .island-nav-wrapper,
  .island-nav-wrapper {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.08) !important;
    border-bottom: 1px solid rgba(22, 35, 59, 0.08) !important;
  }

  .hero-photo .island-nav-wrapper.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1040 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12) !important;
  }

  .island-nav-wrapper .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  .navbar-island {
    height: var(--mobile-header-h, 72px) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .island-nav-wrapper.scrolled .navbar-island {
    height: var(--mobile-header-h, 72px) !important;
    padding: 0 !important;
  }

  .island-brand {
    display: flex !important;
    align-items: center !important;
    max-width: calc(100% - 58px) !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .island-logo-img {
    height: 54px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: 240px !important;
    object-fit: contain !important;
    display: block !important;
    transition: height 0.25s ease !important;
  }

  .island-nav-wrapper.scrolled .island-logo-img {
    height: 54px !important;
    max-height: 56px !important;
  }

  .island-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 1.45rem !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(22, 35, 59, 0.12) !important;
    background: #ffffff !important;
    color: #16233b !important;
  }

  /* Neutral Dark Overlay: Natural warm photo clarity with reduced blue tint and high contrast (>= 4.5:1) */
  .hero-readability-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 16, 0.42) 0%, rgba(10, 12, 16, 0.68) 55%, rgba(10, 12, 16, 0.90) 100%),
      linear-gradient(90deg, rgba(8, 10, 14, 0.80) 0%, rgba(8, 10, 14, 0.35) 100%) !important;
    pointer-events: none;
    z-index: 1;
  }

  /* Hero Content: Vertically Centered in Photo Area, 18px Side Padding aligned with Form Card */
  .hero-content-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 8px 18px 24px 18px !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
  }

  .hero-content-wrap .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .hero-main-intro {
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* Heading: clamp(21px, 5.8vw, 26px), line-height 1.2, prevents text clipping on mobile */
  .hero-title {
    font-size: clamp(21px, 5.8vw, 26px) !important;
    line-height: 1.2 !important;
    margin: 0 0 12px 0 !important;
    font-weight: 800 !important;
    text-align: left !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85) !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .hero-title-main {
    display: block !important;
    text-align: left !important;
  }

  /* Highlight phrase: wraps if needed, crisp red underline, never cut off */
  .hero-highlight-phrase {
    display: inline-block !important;
    white-space: normal !important;
    max-width: 100% !important;
    color: #e11d24 !important;
    position: relative !important;
    width: fit-content !important;
    margin-top: 2px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75)) !important;
    padding-bottom: 3px !important;
  }

  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero-highlight-phrase {
      background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      text-shadow: none !important;
    }
  }

  .hero-highlight-phrase::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #ff4d4f 0%, #e11d24 75%, rgba(225, 29, 36, 0.3) 100%) !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 6px rgba(225, 29, 36, 0.45) !important;
  }


  /* Subtext: 14px, line-height 1.55, full sentence without ellipsis */
  .hero-subtitle {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 14px 0 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    max-height: none !important;
    text-overflow: unset !important;
  }

  /* Rating Row: single line, 12-13px, with Google rating chip kept */
  .hero-metrics-strip {
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .google-review-badge {
    padding: 4px 10px !important;
    gap: 5px !important;
    background: rgba(12, 21, 36, 0.88) !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  .google-badge-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .google-badge-icon svg {
    width: 13px !important;
    height: 13px !important;
  }

  .google-badge-text {
    font-size: 12.5px !important;
    gap: 4px !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .google-badge-score {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  .google-badge-stars {
    font-size: 9.5px !important;
    color: #fbbf24 !important;
    display: inline-flex !important;
    gap: 1px !important;
  }

  .google-badge-title {
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .google-badge-count {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* --------------------------------------------------------------------------
     2. Form Card: Overlaps Photo Edge (-40px), 18px Side Padding Aligned with Hero
     -------------------------------------------------------------------------- */
  .hero-form {
    flex: none !important;
    margin-top: -40px !important;
    margin-bottom: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .quote-dock-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .quote-dock-card {
    padding: clamp(10px, 1.4dvh, 14px) clamp(12px, 3vw, 16px) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px -4px rgba(12, 21, 36, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1.5px solid #ebdccb !important;
  }

  .card-dot-pattern {
    display: none !important;
  }

  .card-accent-line {
    height: 3px !important;
    background: linear-gradient(90deg, #e11d24 0%, #f59e0b 100%) !important;
    border-radius: 3px !important;
    margin-bottom: 4px !important;
  }

  /* Header & Tabs */
  .quote-dock-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
  }

  .quote-tab-group {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 3px !important;
    width: 100% !important;
    background: #f1f5f9 !important;
    border-radius: 10px !important;
  }

  .btn-quote-tab {
    height: clamp(34px, 4.4dvh, 40px) !important;
    padding: 2px 6px !important;
    font-size: clamp(11.5px, 1.4dvh + 2px, 13px) !important;
    font-weight: 700 !important;
    gap: 4px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  .tab-icon {
    font-size: 12px !important;
  }

  .quote-speed-badge {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    margin-top: 1px !important;
    border-radius: 50px !important;
    background: #fff7ed !important;
    color: #991b1b !important;
    border: 1px solid #ffedd5 !important;
  }

  .speed-lightning-icon {
    font-size: 10px !important;
    margin-right: 3px !important;
  }

  .badge-pulse-dot {
    width: 5px !important;
    height: 5px !important;
  }

  /* Form Grid: 2-Column Side-by-Side Rows, 10px Gaps */
  .quote-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(6px, 1dvh, 10px) clamp(6px, 2vw, 10px) !important;
    margin-bottom: clamp(6px, 1dvh, 10px) !important;
  }

  #group_phone {
    grid-column: span 2 !important;
  }

  #group_mfrom {
    grid-column: 1 !important;
  }

  #group_mto {
    grid-column: 2 !important;
  }

  #group_size {
    grid-column: 1 !important;
  }

  #group_date {
    grid-column: 2 !important;
  }

  .quote-field-group {
    gap: 1.5px !important;
  }

  .quote-field-label {
    font-size: clamp(11.5px, 1.3dvh, 12.5px) !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    color: #1e293b !important;
  }

  .label-icon-badge {
    width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    border-radius: 4px !important;
  }

  /* Inputs: at least 42px tall (min tap target), 16px font-size to prevent iOS auto-zoom */
  .quote-input-custom {
    height: clamp(42px, 5dvh, 46px) !important;
    padding: 0 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #f8fafc !important;
  }

  .quote-input-custom:focus {
    background: #ffffff !important;
    border-color: #e11d24 !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 36, 0.15) !important;
  }

  .quote-select-custom {
    padding-right: 24px !important;
  }

  .select-chevron-icon {
    right: 8px !important;
    font-size: 10px !important;
  }

  .valid-check-icon {
    right: 8px !important;
    font-size: 10.5px !important;
  }

  .quote-route-bridge {
    display: none !important;
  }

  /* Bottom Actions & Calculate Button (48px tall) */
  .quote-dock-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding-top: 2px !important;
  }

  .quote-bottom-right {
    order: 1 !important;
    width: 100% !important;
  }

  .btn-quote-submit {
    width: 100% !important;
    height: clamp(42px, 5.2dvh, 48px) !important;
    font-size: clamp(14px, 1.8dvh, 15.5px) !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    padding: 0 14px !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #e11d24 0%, #991b1b 100%) !important;
    box-shadow: 0 4px 14px rgba(225, 29, 36, 0.35) !important;
    color: #ffffff !important;
    letter-spacing: 0.01em !important;
  }

  .btn-submit-text {
    font-size: inherit !important;
  }

  .btn-submit-arrow {
    font-size: 13px !important;
  }

  .quote-bottom-left {
    order: 2 !important;
    width: 100% !important;
  }

  /* Privacy Line: 12px with 8px margin above it */
  .quote-privacy-guarantee {
    font-size: 12px !important;
    justify-content: center !important;
    color: #64748b !important;
    margin-top: 6px !important;
  }

  .shield-circle-icon {
    font-size: 11px !important;
  }

  /* Hide floating circular action buttons to prevent overlapping form */
  .floating-actions-dock,
  .floating-whatsapp-dock,
  .floating-dock-actions {
    display: none !important;
  }

  .trust-pillars-section {
    padding: 30px 0 36px 0;
  }

  .section-main-title {
    font-size: 1.5rem;
  }

  .mobile-bottom-bar {
    display: block;
  }

  /* Add padding to footer so it is not hidden by sticky bottom bar */
  .site-footer {
    padding-bottom: 76px;
  }
}

/* Under 700px height: hide speed badge first, then privacy line */
@media (max-width: 767px) and (max-height: 700px) {
  .quote-speed-badge {
    display: none !important;
  }

  .quote-privacy-guarantee {
    display: none !important;
  }

  .hero-form {
    margin-top: -32px !important;
  }

  .hero-content-wrap {
    padding-bottom: 12px !important;
    gap: 6px !important;
  }
}

/* Under 620px height / Landscape: Stop forcing 1-screen fit, switch to normal scroll */
@media (max-width: 767px) and (max-height: 619px),
(max-width: 991px) and (orientation: landscape) {
  .hero-wrapper {
    height: auto !important;
    min-height: 560px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 20px) !important;
  }

  .hero-photo {
    flex: none !important;
    height: auto !important;
    min-height: 240px !important;
    padding-bottom: 50px !important;
  }

  .hero-content-wrap {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .hero-form {
    margin-top: -40px !important;
  }
}

@media (max-width: 480px) {
  .island-nav-wrapper .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .navbar-island {
    height: var(--mobile-header-h, 72px);
    padding: 0;
    align-items: center;
  }

  .island-logo-img {
    height: 52px;
    max-height: 54px;
    width: auto;
    max-width: 240px;
  }

  .island-mobile-toggle {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }
}



/* --------------------------------------------------------------------------
   GLOBAL HOMEPAGE DESIGN SYSTEM (Shared Tokens & Elements)
   -------------------------------------------------------------------------- */
.section-heading-wrap {
  margin-bottom: 28px;
}

.section-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 9999px;
  background-color: rgba(225, 29, 36, 0.08);
  border: 1px solid rgba(225, 29, 36, 0.22);
  color: #9a3412;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.section-eyebrow-pill.pill-light {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ff4d4f;
}

.section-headline {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  color: #16233b;
  line-height: 1.24;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}

.section-headline.headline-light {
  color: #ffffff;
}

.text-orange-underline {
  color: #e11d24;
  position: relative;
  display: inline-block;
}

.text-orange-underline::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e11d24 0%, #f59e0b 100%);
  border-radius: 2px;
}

.section-lead-text {
  font-size: 14.5px;
  color: #475569;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

.section-lead-text.lead-light {
  color: #94a3b8;
}

/* Scroll-Reveal Pure CSS Animation Engine */
@keyframes scrollRevealFadeIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  opacity: 1;
  transform: translateY(0);
  animation: scrollRevealFadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

@supports (animation-timeline: view()) {
  .scroll-reveal {
    animation: scrollRevealFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }
}

/* --------------------------------------------------------------------------
   SECTION 1: TRUST STRIP (Warm Alabaster Linen)
   -------------------------------------------------------------------------- */
.home-trust-strip {
  position: relative;
  background-color: #fcf9f4;
  padding: 42px 0;
  color: #16233b;
  overflow: hidden;
  border-top: 1px solid #efe8dc;
  border-bottom: 1px solid #efe8dc;
}

.trust-strip-bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(225, 29, 36, 0.05) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.7;
}

.trust-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 0;
}

.trust-stat-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  box-shadow: 0 4px 18px -2px rgba(12, 21, 36, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-stat-card:hover {
  background: #ffffff;
  border-color: rgba(225, 29, 36, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -8px rgba(225, 29, 36, 0.12), 0 2px 6px rgba(12, 21, 36, 0.04);
}

.trust-stat-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(225, 29, 36, 0.1);
  border: 1px solid rgba(225, 29, 36, 0.22);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.trust-stat-card:hover .trust-stat-icon-wrap {
  background: #e11d24;
  color: #ffffff;
  transform: rotate(-6deg) scale(1.05);
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.35);
}

.trust-stat-body {
  flex-grow: 1;
}

.trust-stat-number-wrap {
  display: flex;
  align-items: baseline;
  line-height: 1;
  margin-bottom: 8px;
}

.trust-stat-number {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 800;
  color: #16233b;
  letter-spacing: -0.02em;
}

.trust-stat-suffix {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: #991b1b;
  margin-left: 2px;
}

.trust-stat-label {
  font-size: 15px;
  font-weight: 700;
  color: #16233b;
  margin-bottom: 4px;
}

.trust-stat-subtext {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 0;
  line-height: 1.4;
}

/* Marquee Accreditations Track (Light Warm Theme) */
.trust-marquee-wrapper {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 4px 18px rgba(12, 21, 36, 0.04);
}

.trust-marquee-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.marquee-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.trust-marquee-track-container {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.trust-marquee-track {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  animation: marqueeContinuous 32s linear infinite;
}

.trust-marquee-track-container:hover .trust-marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeContinuous {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.trust-marquee-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fbf7f0;
  border: 1px solid #ede1d1;
  border-radius: 12px;
  padding: 10px 18px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.trust-marquee-card:hover {
  background: #ffffff;
  border-color: rgba(225, 29, 36, 0.4);
  box-shadow: 0 4px 14px rgba(12, 21, 36, 0.06);
}

.marquee-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(225, 29, 36, 0.1);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.marquee-badge-info {
  display: flex;
  flex-direction: column;
}

.marquee-badge-title {
  font-size: 12px;
  font-weight: 700;
  color: #16233b;
  letter-spacing: 0.02em;
}

.marquee-badge-desc {
  font-size: 11px;
  color: #64748b;
}

.marquee-badge-code {
  font-size: 10.5px;
  font-weight: 700;
  color: #e11d24;
}

/* --------------------------------------------------------------------------
   SECTION: THE WHITE GLOVE MOVING STANDARD (Soft Warm Stone / Oatmeal)
   -------------------------------------------------------------------------- */
.home-white-glove-section {
  position: relative;
  background-color: #f7f3ec;
  padding: 50px 0;
  border-top: 1px solid #ebe2d4;
  border-bottom: 1px solid #ebe2d4;
}

.white-glove-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.white-glove-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 16px;
  padding: 20px 18px 16px 18px;
  box-shadow: 0 8px 24px -6px rgba(12, 21, 36, 0.05), 0 2px 6px rgba(12, 21, 36, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.white-glove-card:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 36, 0.35);
  box-shadow: 0 16px 36px -8px rgba(225, 29, 36, 0.12), 0 4px 12px rgba(12, 21, 36, 0.04);
}

.card-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.feature-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-icon-box.tint-orange {
  background-color: rgba(225, 29, 36, 0.1);
  color: #e11d24;
}

.feature-icon-box.tint-navy {
  background-color: rgba(22, 35, 59, 0.08);
  color: #16233b;
}

.feature-icon-box.tint-green {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.white-glove-card:hover .feature-icon-box {
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%) !important;
  color: #ffffff !important;
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 6px 16px rgba(225, 29, 36, 0.35);
}

.feature-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #16233b;
  margin-bottom: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.feature-card-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 12px;
  flex-grow: 1;
}

.card-bottom-accent {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.accent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #cbd5e1;
  transition: background-color 0.25s ease;
}

.accent-line {
  height: 2px;
  width: 24px;
  background-color: #e2e8f0;
  border-radius: 2px;
  transition: all 0.25s ease;
}

.white-glove-card:hover .accent-dot {
  background-color: #e11d24;
}

.white-glove-card:hover .accent-line {
  width: 44px;
  background-color: #e11d24;
}

/* --------------------------------------------------------------------------
   RESPONSIVE OVERRIDES FOR SECTIONS 1 & 2
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .trust-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .white-glove-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .home-trust-strip {
    padding: 42px 0;
  }

  .trust-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
  }

  .trust-stat-card {
    padding: 14px 12px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .trust-stat-icon-wrap {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 10px;
    margin-bottom: 2px;
  }

  .trust-stat-number-wrap {
    margin-bottom: 2px;
  }

  .trust-stat-number {
    font-size: 26px;
  }

  .trust-stat-suffix {
    font-size: 18px;
  }

  .trust-stat-label {
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .trust-stat-subtext {
    font-size: 10.5px;
    line-height: 1.3;
  }

  .home-white-glove-section {
    padding: 60px 0;
  }

  .white-glove-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .section-heading-wrap {
    margin-bottom: 36px;
  }
}

/* Section anchors: prevent sticky island from covering headings */
section[id] {
  scroll-margin-top: 88px;
}

/* --------------------------------------------------------------------------
   SECTION: OUR SERVICES (Warm Peach & Honey Amber Tint)
   -------------------------------------------------------------------------- */
.home-services-section {
  position: relative;
  background-color: #fef5ea;
  padding: 50px 0;
  color: #16233b;
  overflow: hidden;
  border-top: 1px solid #fae4cc;
  border-bottom: 1px solid #fae4cc;
}

.services-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(225, 29, 36, 0.06) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.7;
}

.services-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service-feature-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px -4px rgba(12, 21, 36, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.service-feature-card .stretched-link::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}

/* Card Lift & Ambient Orange Glow on Mouse Hover (Matches White Glove) */
.service-feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 20px 40px -8px rgba(225, 29, 36, 0.16), 0 4px 12px rgba(12, 21, 36, 0.04);
}

/* Signature Expanding Bottom Accent Line on Card Hover */
.service-feature-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e11d24 0%, #ff4d4f 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

.service-feature-card:hover::after {
  transform: scaleX(1);
}

/* Photo Banner Wrap & Smooth Image Zoom */
.service-photo-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #fbf5ec;
}

.service-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 50%, rgba(15, 23, 42, 0.45) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.service-feature-card:hover .service-photo-wrap::after {
  opacity: 0.7;
}

.service-img-link {
  display: block;
  width: 100%;
  height: 100%;
}

.service-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-feature-card:hover .service-card-img {
  transform: scale(1.08);
}

/* Category Badge Pill on Photo */
.service-category-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.service-category-badge i {
  color: #e11d24;
  font-size: 12px;
}

/* Card Body Content */
.service-card-body {
  padding: 20px 20px 18px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #16233b;
  margin-bottom: 8px;
  line-height: 1.3;
}

.service-title-anchor {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.service-feature-card:hover .service-title-anchor,
.service-feature-card:hover .service-card-title {
  color: #e11d24;
}

.service-card-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Checklist Items with subtle slide nudge */
.service-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.service-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
  transition: transform 0.25s ease;
}

.service-feature-card:hover .service-checklist-item {
  transform: translateX(3px);
}

.service-checklist-item i {
  font-size: 13px;
  color: #e11d24;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Card Footer: Price & Active Action Button */
.service-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #f6ecdf;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.service-price-block {
  display: flex;
  flex-direction: column;
}

.price-hint {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.price-amount {
  font-size: 13.5px;
  color: #e11d24;
  font-weight: 800;
}

/* Button & Arrow: Auto-activates on card hover and direct hover */
.btn-service-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(225, 29, 36, 0.08);
  border: 1px solid rgba(225, 29, 36, 0.25);
  color: #e11d24;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
}

.service-feature-card:hover .btn-service-action,
.btn-service-action:hover {
  background: #e11d24;
  color: #ffffff;
  border-color: #e11d24;
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.35);
}

.btn-action-arrow {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-feature-card:hover .btn-action-arrow,
.btn-service-action:hover .btn-action-arrow {
  transform: translateX(4px);
}

.view-all-services-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e11d24;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.view-all-services-link:hover {
  color: #b91c1c;
  transform: translateX(3px);
}

@media (max-width: 991px) {
  .home-services-section {
    padding: 44px 0;
  }

  .services-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .service-photo-wrap {
    height: 210px;
  }
}

@media (max-width: 640px) {
  .home-services-section {
    padding: 36px 0;
  }

  .services-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .service-feature-card {
    padding: 0 !important;
    border-radius: 16px !important;
  }

  .service-photo-wrap {
    height: 200px;
  }

  .service-card-body {
    padding: 16px 16px 14px 16px;
  }

  .service-card-title {
    font-size: 16px !important;
  }

  .service-card-desc {
    font-size: 12.5px;
    margin-bottom: 12px;
  }

  .service-checklist {
    margin-bottom: 14px;
    gap: 6px;
  }

  .service-checklist-item {
    font-size: 11.5px;
  }

  .service-card-footer {
    padding-top: 12px;
  }
}

/* --------------------------------------------------------------------------
   SECTION: HOW IT WORKS (Warm Cream / Vanilla)
   -------------------------------------------------------------------------- */
.home-process-section {
  position: relative;
  background-color: #fdf8f0;
  padding: 50px 0;
  border-top: 1px solid #f2e7d5;
  border-bottom: 1px solid #f2e7d5;
}

.process-timeline-wrap {
  position: relative;
  margin-top: 40px;
}

.timeline-line-track {
  position: absolute;
  top: 24px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #d8cbba 0, #d8cbba 6px, transparent 6px, transparent 12px);
  z-index: 1;
}

.timeline-truck-marker {
  position: absolute;
  top: -14px;
  left: 20%;
  font-size: 18px;
  animation: timelineTruckFloat 8s infinite ease-in-out;
  z-index: 2;
}

@keyframes timelineTruckFloat {
  0% {
    left: 8%;
  }

  50% {
    left: 85%;
  }

  100% {
    left: 8%;
  }
}

.process-steps-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process-step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step-pin-wrap {
  margin-bottom: 24px;
}

.step-pin-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e11d24;
  color: #e11d24;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.25);
  transition: all 0.25s ease;
}

.process-step-card:hover .step-pin-badge {
  background: #e11d24;
  color: #ffffff;
  transform: scale(1.1);
}

.step-card-body {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 24px 20px;
  width: 100%;
  flex-grow: 1;
  box-shadow: 0 4px 14px rgba(12, 21, 36, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-step-card:hover .step-card-body {
  background: #ffffff;
  border-color: rgba(225, 29, 36, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -6px rgba(12, 21, 36, 0.08);
}

.step-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(225, 29, 36, 0.1);
  color: #e11d24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.step-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #16233b;
  margin-bottom: 8px;
}

.step-card-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .timeline-line-track {
    display: none;
  }

  .process-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .step-pin-wrap {
    margin-bottom: 8px;
  }

  .step-pin-badge {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .step-card-body {
    padding: 14px 10px;
    border-radius: 14px;
  }

  .step-icon-box {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin-bottom: 8px;
  }

  .step-card-title {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .step-card-desc {
    font-size: 11px;
    line-height: 1.35;
  }
}


/* --------------------------------------------------------------------------
   SECTION: 4-TIER PACKING PROMISE (Warm Sand / Biscuit)
   -------------------------------------------------------------------------- */
.home-packing-section {
  position: relative;
  background-color: #f6f1e8;
  padding: 50px 0;
  color: #16233b;
  overflow: hidden;
  border-top: 1px solid #ebdcc9;
  border-bottom: 1px solid #ebdcc9;
}

.packing-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(225, 29, 36, 0.05) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.6;
}

.packing-visual-wrapper {
  position: relative;
}

.packing-photo-frame {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #ebdccb;
  box-shadow: 0 16px 40px -8px rgba(12, 21, 36, 0.12);
  background: #fbf6ee;
}

.packing-photo-img {
  width: 100%;
  height: auto;
  display: block;
}

.floating-badge {
  display: none !important;
}

.packing-highlight-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 10px;
  background: rgba(225, 29, 36, 0.08);
  border: 1px solid rgba(225, 29, 36, 0.22);
  color: #e11d24;
  font-size: 12.5px;
  font-weight: 700;
}

.packing-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.packing-tier-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 14px;
  padding: 16px 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(12, 21, 36, 0.03);
  transition: all 0.25s ease;
}

.packing-tier-card:hover,
.packing-tier-card:focus-within,
.packing-tier-card.active {
  background: #ffffff;
  border-color: #e11d24;
  box-shadow: 0 8px 24px rgba(225, 29, 36, 0.12), 0 0 0 1px rgba(225, 29, 36, 0.2);
}

.tier-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tier-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #9a3412;
  background: rgba(225, 29, 36, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
}

.tier-title {
  font-size: 15px;
  font-weight: 700;
  color: #16233b;
  margin-bottom: 0;
  flex-grow: 1;
}

.tier-toggle-indicator {
  color: #64748b;
  font-size: 13px;
  transition: transform 0.25s ease;
}

.packing-tier-card:hover .tier-toggle-indicator,
.packing-tier-card:focus-within .tier-toggle-indicator,
.packing-tier-card.active .tier-toggle-indicator {
  transform: rotate(180deg);
  color: #e11d24;
}

.tier-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.35s ease;
}

.packing-tier-card:hover .tier-card-body,
.packing-tier-card:focus-within .tier-card-body,
.packing-tier-card.active .tier-card-body {
  max-height: 120px;
  margin-top: 10px;
}

.tier-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   HOMEPAGE CONTENT DESIGN SYSTEM: RHYTHM, CARDS, ACCENTS & SCALE
   -------------------------------------------------------------------------- */
.home-section-pad {
  padding: 60px 0;
}

@media (max-width: 767.98px) {
  .home-section-pad {
    padding: 44px 0;
  }
}

/* Background rhythm */
.bg-cream {
  background-color: #fdfbf7;
  border-top: 1px solid #f3ece2;
  border-bottom: 1px solid #f3ece2;
}

.bg-warm-sand {
  background-color: #faf5ee;
  border-top: 1px solid #ede3d4;
  border-bottom: 1px solid #ede3d4;
}

/* Consistent title treatment with orange gradient accent bar */
.section-headline {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  color: #16233b;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 22px;
}

.section-headline::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background: var(--primary-gradient, linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%));
  border-radius: 2px;
  margin-top: 10px;
}

.section-headline.text-center::after {
  margin-left: auto;
  margin-right: auto;
}

.section-headline.text-start::after {
  margin-left: 0;
  margin-right: auto;
}

.section-headline.text-white {
  color: #ffffff !important;
}

.section-lead-text {
  font-size: 15.5px;
  color: #475569;
  line-height: 1.65;
  max-width: 780px;
}

/* Dedicated Intro Overview Section (Clean 2-Column Network Highlight) */
.home-intro-section {
  position: relative;
  z-index: 2;
}

.intro-overview-wrap {
  position: relative;
}

.intro-lead-block {
  padding-right: 12px;
}

.intro-icon-tag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #e11d24;
  background: rgba(225, 29, 36, 0.08);
  border: 1px solid rgba(225, 29, 36, 0.22);
  border-radius: 9999px;
  padding: 5px 14px;
}

.intro-lead-text {
  font-size: 1.12rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.7;
}

.intro-narrative-block {
  padding-left: 12px;
}

.intro-body-text {
  font-size: 15px;
  color: #334155;
  line-height: 1.8;
}

.intro-highlights-row .intro-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 20px;
  padding: 5px 12px;
  box-shadow: 0 2px 6px rgba(12, 21, 36, 0.04);
}

@media (max-width: 991.98px) {
  .intro-lead-block {
    padding-right: 0;
    margin-bottom: 8px;
  }

  .intro-narrative-block {
    padding-left: 0;
  }

  .intro-lead-text {
    font-size: 1.02rem;
  }
}

/* Universal Content Card */
.content-feature-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 4px 18px -2px rgba(12, 21, 36, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: #334155;
  line-height: 1.7;
  font-size: 15px;
}

.content-feature-card:hover {
  border-color: rgba(225, 29, 36, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -4px rgba(225, 29, 36, 0.1);
}

.content-feature-card p:last-child {
  margin-bottom: 0;
}

.card-icon-header {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(225, 29, 36, 0.1);
  border: 1px solid rgba(225, 29, 36, 0.2);
  color: #e11d24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  transition: all 0.25s ease;
}

.content-feature-card:hover .card-icon-header {
  background: #e11d24;
  color: #ffffff;
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.3);
}

/* Editorial About Us Layout (2-Column Showcase: No Cards, No Picture) */
.about-lead-col {
  padding-right: 12px;
}

.about-quote-ornament {
  font-size: 38px;
  line-height: 1;
  color: #e11d24;
  opacity: 0.85;
  margin-bottom: 4px;
}

.about-philosophy-quote {
  font-size: 1.18rem;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.7;
  font-style: italic;
  border-left: 3px solid #e11d24;
  padding-left: 18px;
  margin-bottom: 0;
}

.about-narrative-col {
  padding-left: 12px;
}

.about-metrics-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebdccb;
  padding-bottom: 18px;
  margin-bottom: 20px;
}

.metric-item .metric-num {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  display: block;
}

.metric-item .metric-num i {
  font-size: 1.1rem;
  vertical-align: middle;
}

.metric-item .metric-label {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 5px;
  display: block;
}

.metric-divider {
  width: 1px;
  height: 38px;
  background: #ebdccb;
}

.about-narrative-copy {
  font-size: 15.5px;
  color: #334155;
  line-height: 1.8;
}

.about-trust-pills .about-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 5px 12px;
}

@media (max-width: 991.98px) {
  .about-lead-col {
    padding-right: 0;
    margin-bottom: 12px;
  }

  .about-narrative-col {
    padding-left: 0;
  }

  .metric-item .metric-num {
    font-size: 1.45rem;
  }
}

@media (max-width: 575.98px) {
  .about-philosophy-quote {
    font-size: 1.05rem;
  }

  .about-metrics-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border-bottom: 1px solid #ebdccb;
    padding-bottom: 16px;
  }

  .metric-divider {
    display: none;
  }

  .metric-item:last-child {
    grid-column: span 2;
  }
}

/* Process Step Flow */
.process-steps-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 991.98px) {
  .process-steps-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.process-step-item {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px -2px rgba(12, 21, 36, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-step-item:hover {
  border-color: rgba(225, 29, 36, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -4px rgba(225, 29, 36, 0.12);
}

.step-num-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #e11d24;
  background: rgba(225, 29, 36, 0.1);
  border: 1px solid rgba(225, 29, 36, 0.25);
  border-radius: 9999px;
  padding: 5px 14px;
}

.step-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
}

.process-step-item:hover .step-icon-badge {
  background: #e11d24;
  border-color: #e11d24;
  color: #ffffff;
  transform: scale(1.08) rotate(-4deg);
}

.process-step-item p {
  color: #334155;
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 0;
}

/* 4-Tier Shockproof Packing (Clean Light Contrast) */
.home-packing-section {
  position: relative;
  background-color: #ffffff;
  color: #1e293b;
  padding: 64px 0;
}

.packing-photo-frame,
.about-photo-frame {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #ebdccb;
  box-shadow: 0 14px 32px -8px rgba(12, 21, 36, 0.08);
  background: #ffffff;
  position: relative;
  width: 100%;
}

.packing-photo-img,
.about-photo-img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.packing-material-card {
  background: #faf5ee;
  border: 1px solid #ebdccb;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1e293b;
  font-size: 14.5px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.packing-material-card:hover {
  background: #ffffff;
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.1);
  transform: translateX(4px);
}

.packing-material-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(225, 29, 36, 0.1);
  border: 1px solid rgba(225, 29, 36, 0.2);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.packing-outro-card {
  background: #faf5ee;
  border: 1px solid #ebdccb;
  border-left: 3px solid #e11d24;
  border-radius: 12px;
  padding: 16px 20px;
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
}

/* Quality You Can See Card */
.trust-cert-banner-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 4px 18px -2px rgba(12, 21, 36, 0.04);
  max-width: 860px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.7;
  color: #334155;
  transition: all 0.25s ease;
}

.trust-cert-banner-card:hover {
  border-color: rgba(225, 29, 36, 0.4);
  box-shadow: 0 12px 28px -4px rgba(225, 29, 36, 0.08);
}

/* --------------------------------------------------------------------------
   SECTION: VERIFIED ACCREDITATIONS & CERTIFICATIONS (Strip & Redesigned Badge)
   -------------------------------------------------------------------------- */
.home-certifications-strip {
  position: relative;
  background-color: #f5efe6;
  padding: 48px 0 44px 0;
  color: #16233b;
  border-top: 1px solid #e7dcce;
  border-bottom: 1px solid #e7dcce;
}

/* Redesigned Verified Header Pill */
.verified-accreditation-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 26px;
}

.verified-badge-glow-wrap {
  position: relative;
  display: inline-flex;
}

.verified-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #fffbf7 50%, #fef5ea 100%);
  border: 1.5px solid rgba(225, 29, 36, 0.32);
  border-radius: 9999px;
  padding: 8px 18px 8px 10px;
  box-shadow: 0 4px 18px -2px rgba(225, 29, 36, 0.12), 0 2px 6px rgba(12, 21, 36, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.verified-badge-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(225, 29, 36, 0.6);
  box-shadow: 0 8px 24px -4px rgba(225, 29, 36, 0.2), 0 3px 8px rgba(12, 21, 36, 0.04);
}

.verified-badge-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(225, 29, 36, 0.35);
}

.verified-badge-text {
  font-size: 15px;
  font-weight: 800;
  color: #16233b;
  margin: 0;
  line-height: 1;
  letter-spacing: 0.01em;
}

.verified-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 3px 9px;
  border-radius: 9999px;
  margin-left: 4px;
}

.verified-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  display: inline-block;
  animation: pulseGreenLed 1.6s infinite;
}

.verified-status-label {
  font-size: 10px;
  font-weight: 800;
  color: #15803d;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* 4 Accreditations Strip Grid */
.certifications-badges-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cert-badge-item {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(12, 21, 36, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cert-badge-item:hover {
  transform: translateY(-3px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 10px 24px -4px rgba(225, 29, 36, 0.14), 0 2px 6px rgba(12, 21, 36, 0.03);
}

.cert-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(225, 29, 36, 0.09);
  border: 1px solid rgba(225, 29, 36, 0.2);
  color: #e11d24;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.cert-badge-item:hover .cert-badge-icon {
  background: #e11d24;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.3);
}

.cert-badge-content {
  flex: 1;
  min-width: 0;
}

.cert-badge-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #16233b;
  margin-bottom: 2px;
  line-height: 1.25;
}

.cert-badge-desc {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.35;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cert-badge-code {
  font-size: 10px;
  font-weight: 700;
  color: #9a3412;
  background: rgba(225, 29, 36, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  line-height: 1.2;
}

@keyframes pulseGreenLed {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

@media (max-width: 1199px) {
  .certifications-badges-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .verified-badge-pill {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 18px;
    padding: 10px 14px;
    text-align: center;
  }

  .verified-badge-text {
    font-size: 13.5px;
  }

  .certifications-badges-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .cert-badge-item {
    padding: 12px 10px;
    border-radius: 14px;
    gap: 8px;
    align-items: flex-start;
  }

  .cert-badge-icon {
    width: 32px;
    height: 32px;
    font-size: 15px;
    border-radius: 8px;
  }

  .cert-badge-title {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .cert-badge-desc {
    font-size: 10.5px;
    white-space: normal;
    line-height: 1.25;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cert-badge-code {
    font-size: 11px;
    padding: 2px 6px;
  }
}

/* --------------------------------------------------------------------------
   SECTION: FAQ (Warm Champagne Linen)
   -------------------------------------------------------------------------- */
.home-faqs-section {
  position: relative;
  background-color: #fdf8f2;
  padding: 50px 0;
  border-top: 1px solid #f0e4d7;
  border-bottom: 1px solid #f0e4d7;
}

.faq-expert-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 26px -6px rgba(12, 21, 36, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.expert-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(225, 29, 36, 0.1);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.expert-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #16233b;
  margin-bottom: 6px;
}

.expert-card-text {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 14px;
}

.expert-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-expert-call {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  background: #e11d24;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-expert-call:hover {
  background: #991b1b;
  color: #ffffff;
}

.btn-expert-whatsapp {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-expert-whatsapp:hover {
  background: #16a34a;
  color: #ffffff;
}

.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.faq-item-card.active {
  border-color: rgba(225, 29, 36, 0.4);
  box-shadow: 0 8px 22px -4px rgba(225, 29, 36, 0.1);
}

.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-question-text {
  font-size: 14.5px;
  font-weight: 700;
  color: #16233b;
  transition: color 0.2s ease;
}

.faq-item-card.active .faq-question-text {
  color: #e11d24;
}

.faq-icon-rotator {
  font-size: 18px;
  color: #e11d24;
  transition: transform 0.2s ease;
}

.faq-answer-collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.faq-item-card.active .faq-answer-collapse {
  max-height: 250px;
}

.faq-answer-body {
  padding: 0 20px 18px 20px;
}

.faq-answer-body p {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 0;
}

/* FAQs Page Layout Containers */
.faqs-page-intro {
  padding: 64px 0 56px 0;
  background: #ffffff;
}

.faqs-page-deck {
  padding: 64px 0 72px 0;
  background: #faf5ee;
}

.faqs-page-support {
  padding: 64px 0;
  background: #ffffff;
}

.faqs-lead-text {
  max-width: 820px;
}

/* Reviews Page Layout Containers (Alternating White & Warm Sand) */
.reviews-page-intro {
  padding: 64px 0 56px 0;
  background: #ffffff;
}

.reviews-lead-text {
  max-width: 840px;
}

.reviews-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}

@media (max-width: 991.98px) {
  .reviews-trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .reviews-trust-strip {
    grid-template-columns: 1fr;
  }
}

.reviews-trust-card {
  background: #faf5ee;
  border: 1px solid rgba(225, 29, 36, 0.12);
  border-radius: 16px;
  padding: 20px 18px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.reviews-trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(225, 29, 36, 0.08);
  border-color: rgba(225, 29, 36, 0.28);
}

.reviews-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #e11d24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

.reviews-trust-title {
  font-size: 18px;
  font-weight: 800;
  color: #16233b;
  margin-bottom: 4px;
}

.reviews-trust-desc {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0;
}

.reviews-page-deck {
  padding: 64px 0 76px 0;
  background: #faf5ee;
}

.testimonial-card {
  background: #ffffff;
  border: 1px solid rgba(22, 35, 59, 0.08);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(225, 29, 36, 0.1);
  border-color: rgba(225, 29, 36, 0.35);
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.testimonial-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(225, 29, 36, 0.25);
}

.testimonial-meta {
  flex-grow: 1;
  min-width: 0;
}

.testimonial-name {
  font-size: 16px;
  font-weight: 700;
  color: #16233b;
  margin-bottom: 3px;
  line-height: 1.25;
}

.testimonial-location {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-badge {
  font-size: 11px;
  font-weight: 700;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: 9999px;
  padding: 4px 10px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.testimonial-stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.testimonial-quote {
  font-size: 14.5px;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 0;
  flex-grow: 1;
  font-style: normal;
  position: relative;
}

.reviews-page-support {
  padding: 64px 0;
  background: #ffffff;
}

.reviews-support-card {
  background: #faf5ee;
  border: 1px solid rgba(225, 29, 36, 0.15);
  border-radius: 24px;
  padding: 44px 36px;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
}

@media (max-width: 767.98px) {
  .reviews-support-card {
    padding: 30px 20px;
  }
}

.btn-brand-orange {
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  color: #ffffff !important;
  border: none;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-brand-orange:hover {
  background: linear-gradient(135deg, #e11d24 0%, #991b1b 100%);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(225, 29, 36, 0.35);
}

/* City About & Editorial Section */
.city-about-section {
  padding: 64px 0 76px 0;
  background-color: #faf5ee;
}

.city-process-lead {
  max-width: 600px;
}

.city-editorial-card {
  background: #ffffff;
  border: 1px solid rgba(22, 35, 59, 0.08);
  border-radius: 20px;
  padding: 44px 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

@media (max-width: 767.98px) {
  .city-editorial-card {
    padding: 26px 20px;
  }
}

.city-editorial-body h2 {
  font-size: 26px;
  font-weight: 800;
  color: #16233b;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.city-editorial-body h3 {
  font-size: 21px;
  font-weight: 700;
  color: #16233b;
  margin-top: 34px;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.city-editorial-body h4 {
  font-size: 17px;
  font-weight: 700;
  color: #e11d24;
  margin-top: 22px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.city-editorial-body p {
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
  margin-bottom: 16px;
}

.city-editorial-body p:last-child {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   SECTION 11: FINAL CTA BANNER (Warm Brand Gradient)
   -------------------------------------------------------------------------- */
.home-final-cta-section {
  position: relative;
  background: linear-gradient(135deg, #991b1b 0%, #e11d24 50%, #ff4d4f 100%);
  padding: 54px 0;
  color: #ffffff;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cta-moving-route-bg {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 10px, transparent 10px, transparent 20px);
  pointer-events: none;
}

.cta-gradient-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .cta-gradient-glow {
    width: 260px;
    height: 260px;
    right: -40px;
  }
}

.cta-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.final-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.final-cta-subtext {
  font-size: 16px;
  color: #fff7ed;
  max-width: 620px;
  margin: 0 auto 36px auto;
  line-height: 1.6;
}

.final-cta-buttons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.btn-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 32px;
  border-radius: 12px;
  background: #ffffff;
  color: #991b1b;
  border: none;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: all 0.22s ease;
}

.btn-cta-primary:hover {
  transform: translateY(-2px);
  background: #fff7ed;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.btn-cta-primary:hover .btn-cta-arrow {
  transform: translateX(4px);
}

.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s ease;
}

.btn-cta-secondary:hover {
  background: #ffffff;
  color: #e11d24;
  transform: translateY(-2px);
}

.final-cta-promises {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  color: #fff7ed;
}

/* --------------------------------------------------------------------------
   SECTION 12: MASTER REDESIGNED SITE FOOTER (Deep Navy & Logistics Theme)
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #091326 0%, #070e1e 100%);
  color: #94a3b8;
  overflow: hidden;
}

/* Thin Top Accent Line: Orange-to-Gold with Faded Ends */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #e11d24 20%, #f59e0b 50%, #e11d24 80%, transparent 100%);
  z-index: 5;
}

/* Faint Dot-Grid Background Texture */
.footer-dot-texture {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(225, 29, 36, 0.08) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: 0.7;
  z-index: 1;
}

/* Two Ambient Soft Orange Radial Glows with Slow Floating Loop (12s) */
.footer-ambient-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 1;
}

.footer-ambient-glow.glow-top-left {
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(225, 29, 36, 0.2) 0%, transparent 70%);
  animation: footerGlowShift1 12s infinite alternate ease-in-out;
}

.footer-ambient-glow.glow-bottom-right {
  bottom: -120px;
  right: -120px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, transparent 70%);
  animation: footerGlowShift2 12s infinite alternate ease-in-out;
}

@media (max-width: 767.98px) {
  .footer-ambient-glow {
    width: 240px;
    height: 240px;
    filter: blur(60px);
  }

  .footer-ambient-glow.glow-top-left {
    top: -40px;
    left: -40px;
  }

  .footer-ambient-glow.glow-bottom-right {
    bottom: -40px;
    right: -40px;
  }
}

@keyframes footerGlowShift1 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.14;
  }

  50% {
    transform: translate(40px, 30px) scale(1.15);
    opacity: 0.22;
  }

  100% {
    transform: translate(-20px, 45px) scale(0.95);
    opacity: 0.15;
  }
}

@keyframes footerGlowShift2 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.16;
  }

  50% {
    transform: translate(-45px, -30px) scale(1.12);
    opacity: 0.24;
  }

  100% {
    transform: translate(25px, -35px) scale(0.92);
    opacity: 0.14;
  }
}

/* City Skyline Silhouette Background (Very Low Opacity) */
.footer-skyline-bg {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  height: 110px;
  pointer-events: none;
  color: #e11d24;
  opacity: 0.05;
  z-index: 1;
}

.footer-skyline-svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 575px) {
  .footer-skyline-bg {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   TOP LAYERED GLASS CTA STRIP (Overlaps Footer Top Edge by -40px)
   -------------------------------------------------------------------------- */
.footer-top-cta-wrapper {
  position: relative;
  z-index: 10;
  margin-top: -38px;
  margin-bottom: 20px;
}

.footer-top-glass-card {
  position: relative;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(225, 29, 36, 0.3);
  border-radius: 20px;
  padding: 22px 30px;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 24px -4px rgba(225, 29, 36, 0.15);
  overflow: hidden;
}

.glass-card-shine {
  position: absolute;
  top: 0;
  left: -150%;
  width: 75%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
  transform: skewX(-25deg);
  pointer-events: none;
  animation: glassCardShineSweep 8s infinite ease-in-out;
}

@keyframes glassCardShineSweep {
  0% {
    left: -150%;
  }

  25% {
    left: 170%;
  }

  100% {
    left: 170%;
  }
}

.glass-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.glass-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  line-height: 1.3;
}

.glass-card-sub {
  font-size: 13px;
  color: #cbd5e1;
  font-weight: 500;
}

.sub-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #22c55e;
  margin-right: 5px;
  vertical-align: middle;
}

.sub-sep {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.35);
}

.glass-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-footer-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  border: none;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(225, 29, 36, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-footer-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(225, 29, 36, 0.55);
  color: #ffffff;
}

.btn-arrow-slide {
  transition: transform 0.25s ease;
}

.btn-footer-cta-primary:hover .btn-arrow-slide {
  transform: translateX(4px);
}

.btn-footer-cta-outline {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-footer-cta-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #e11d24;
  color: #ffffff;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   MAIN FOOTER COLUMNS AREA
   -------------------------------------------------------------------------- */
.footer-main-area {
  position: relative;
  z-index: 2;
  padding: 56px 0 40px 0;
}

.footer-col-wrap {
  position: relative;
}

@media (min-width: 992px) {
  .footer-divider-col {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}

.footer-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-col-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

/* Orange Underline Bar: 28px extends to 48px on scroll reveal / hover */
.footer-col-underline {
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, #e11d24 0%, #ff4d4f 100%);
  border-radius: 2px;
  margin: 8px 0 20px 0;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-col-underline {
  width: 48px;
}

.site-footer.revealed .footer-col-underline,
.footer-col-wrap:hover .footer-col-underline {
  width: 64px;
}

/* White Rounded Card for Dark Navy Logo */
.footer-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  height: auto;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.footer-logo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(225, 29, 36, 0.3);
}

.footer-logo-img {
  height: 96px;
  width: auto;
  min-width: 96px;
  max-width: 280px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .footer-logo-card {
    padding: 12px 20px;
  }

  .footer-logo-img {
    height: 82px;
    min-width: 82px;
    max-width: 240px;
  }
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.footer-brand-name {
  font-size: 1.18rem;
  font-weight: 900;
  color: #0b1727;
  letter-spacing: -0.01em;
}

.footer-brand-sub {
  font-size: 0.62rem;
  font-weight: 800;
  color: #e11d24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-bio-text {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 20px;
}

/* Social Icons: Lift 4px, Rotate 6deg, Brand Glow Hover */
.footer-social-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-social-btn:hover {
  transform: translateY(-4px) rotate(6deg);
}

.footer-social-btn.social-fb:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.45);
}

.footer-social-btn.social-tw:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0f172a;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.35);
}

.footer-social-btn.social-ig:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(220, 39, 67, 0.45);
}

.footer-social-btn.social-li:hover {
  background: #0077b5;
  border-color: #0077b5;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 119, 181, 0.45);
}

.footer-social-btn.social-yt:hover {
  background: #ff0000;
  border-color: #ff0000;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.45);
}

/* Compliance Badges: Glass Chips with Tooltips */
.footer-compliance-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.glass-chip-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 4px 12px 4px 6px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.glass-chip-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(225, 29, 36, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.2);
}

.chip-icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(225, 29, 36, 0.18);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.chip-label-mono {
  font-family: 'SF Mono', Consolas, Monaco, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.04em;
}

.chip-tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  border: 1px solid rgba(225, 29, 36, 0.35);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 10;
}

.glass-chip-badge:hover .chip-tooltip-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Links List with Sliding Orange Chevron */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link-item a {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.footer-link-chevron {
  display: inline-block;
  opacity: 0;
  transform: translateX(-8px);
  width: 0;
  margin-right: 0;
  color: #e11d24;
  font-size: 11px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.footer-link-item a:hover {
  color: #e11d24;
  transform: translateX(4px);
}

.footer-link-item a:hover .footer-link-chevron {
  opacity: 1;
  transform: translateX(0);
  width: 14px;
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   CENTRAL HELPDESK & CONTACTS
   -------------------------------------------------------------------------- */
.footer-live-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 4px 12px;
  border-radius: 9999px;
}

.status-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #22c55e;
  animation: pulseGreenLed 1.6s infinite;
}

.status-live-text {
  font-size: 11px;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-helpdesk-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.helpdesk-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}

.helpdesk-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.helpdesk-icon-box.tint-orange {
  background: rgba(225, 29, 36, 0.12);
  border: 1px solid rgba(225, 29, 36, 0.25);
  color: #e11d24;
}

.helpdesk-icon-box.tint-green {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #22c55e;
}

.helpdesk-contact-row:hover .helpdesk-icon-box {
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.4);
}

.footer-contact-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 2px;
}

.footer-contact-val {
  color: #e2e8f0;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-val.phone-val {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.footer-contact-val:hover {
  color: #e11d24;
}

.footer-contact-val.address-val {
  font-style: normal;
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.55;
}

.btn-copy-contact {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.helpdesk-contact-row:hover .btn-copy-contact,
.btn-copy-contact:focus-visible {
  opacity: 1;
}

.btn-copy-contact:hover {
  background: #e11d24;
  border-color: #e11d24;
  color: #ffffff;
  transform: scale(1.08);
}

.copy-feedback-badge {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(3px);
  background: #22c55e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 10;
}

.copy-feedback-badge.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   MOVING ROAD DIVIDER (Looping ~18s Truck)
   -------------------------------------------------------------------------- */
.footer-road-divider {
  position: relative;
  width: 100%;
  height: 36px;
  margin-top: 36px;
  overflow: hidden;
  z-index: 2;
}

.road-track-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(225, 29, 36, 0.45) 0, rgba(225, 29, 36, 0.45) 12px, transparent 12px, transparent 24px);
  z-index: 1;
}

.road-moving-truck {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -40px;
  animation: footerTruckDrive 18s linear infinite;
  z-index: 3;
}

@keyframes footerTruckDrive {
  0% {
    left: -40px;
  }

  100% {
    left: calc(100% + 40px);
  }
}

.road-truck-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #070e1e;
  border: 1.5px solid #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 0 14px rgba(225, 29, 36, 0.6);
}

/* --------------------------------------------------------------------------
   BOTTOM BAR (24px vertical padding, 96px right padding on desktop)
   -------------------------------------------------------------------------- */
.footer-bottom-bar {
  position: relative;
  z-index: 3;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: #94a3b8;
}

@media (min-width: 992px) {
  .footer-bottom-bar .container {
    padding-left: 80px;
    /* Clearance for left-bottom Back-to-Top button */
    padding-right: 80px;
    /* Clearance for right-bottom WhatsApp concierge */
  }
}

.footer-copyright-text {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
}

.footer-bottom-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bottom-trust-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
  transition: all 0.2s ease;
}

.bottom-trust-chip:hover {
  border-color: rgba(225, 29, 36, 0.4);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   FLOATING BUTTONS (Back to Top in Bottom Left & WhatsApp in Bottom Right)
   -------------------------------------------------------------------------- */

/* Circular Back to Top Button with SVG Progress Ring - Fixed Bottom Left */
@keyframes showBackToTopBtn {
  0% {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.btn-floating-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1040;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  color: #16233b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

@supports (animation-timeline: scroll()) {
  .btn-floating-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    animation: showBackToTopBtn linear both;
    animation-timeline: scroll();
    animation-range: 400px 700px;
  }
}

.btn-floating-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.progress-ring-svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  pointer-events: none;
}

.progress-ring-circle-bg {
  stroke: rgba(22, 35, 59, 0.12);
}

.progress-ring-circle {
  stroke: #e11d24;
  transition: stroke-dashoffset 0.12s linear;
}

.btn-floating-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(225, 29, 36, 0.35);
  background: #ffffff;
  color: #e11d24;
}

.btn-arrow-icon {
  position: relative;
  z-index: 2;
  transition: transform 0.25s ease;
}

.btn-floating-top:hover .btn-arrow-icon {
  transform: translateY(-3px);
}

/* Floating Action Dock (Right Bottom: Call & Get a Quote) */
.floating-actions-dock,
.floating-whatsapp-dock,
.floating-dock-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.btn-floating-action {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Call Helpline Button: Vibrant Emerald Green (High Contrast against Dark Footer & Distinct from Orange Quote) */
.btn-floating-call {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.42);
}

.btn-floating-call:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(22, 163, 74, 0.62);
}

.btn-floating-call:hover i {
  animation: phoneRingShake 0.5s ease-in-out;
}

@keyframes phoneRingShake {

  0%,
  100% {
    transform: rotate(0deg);
  }

  20%,
  60% {
    transform: rotate(-14deg);
  }

  40%,
  80% {
    transform: rotate(14deg);
  }
}

.call-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.6);
  animation: pulseGreenRing 2.4s infinite ease-out;
  pointer-events: none;
}

@keyframes pulseGreenRing {
  0% {
    transform: scale(0.92);
    opacity: 0.85;
  }

  70% {
    transform: scale(1.32);
    opacity: 0;
  }

  100% {
    transform: scale(1.32);
    opacity: 0;
  }
}

/* 2. Get a Quote Button: Vibrant Brand Orange Gradient with Glowing Pulse Ring */
.btn-floating-quote {
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(225, 29, 36, 0.5);
}

.btn-floating-quote:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(225, 29, 36, 0.65);
  color: #ffffff;
}

.quote-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(225, 29, 36, 0.6);
  animation: pulseOrangeRing 2.2s infinite ease-out;
  pointer-events: none;
}

@keyframes pulseOrangeRing {
  0% {
    transform: scale(0.92);
    opacity: 0.85;
  }

  70% {
    transform: scale(1.3);
    opacity: 0;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Hover Tooltip Labels: High contrast crisp white cards readable everywhere including dark footer */
.floating-hover-label {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #ffffff;
  color: #0f172a;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.02em;
}

.btn-floating-call .floating-hover-label {
  border: 1.5px solid #16a34a;
  color: #0f172a;
}

.btn-floating-quote .floating-hover-label {
  border: 1.5px solid #e11d24;
  color: #0f172a;
}

.btn-floating-action:hover .floating-hover-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* --------------------------------------------------------------------------
   RESPONSIVE FOOTER STYLES (1200px+, 992-1199px, 768-991px, <768px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 992px) {
  .footer-columns-row {
    row-gap: 32px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .footer-divider-col {
    border-right: none;
  }
}

@media (max-width: 767px) {
  .footer-main-area {
    padding: 40px 0 24px 0;
  }

  .footer-col-header[data-accordion-trigger] {
    cursor: pointer;
    padding: 10px 0;
  }

  .footer-accordion-chevron {
    color: #e11d24;
    font-size: 14px;
    transition: transform 0.3s ease;
  }

  .footer-col-wrap.accordion-open .footer-accordion-chevron {
    transform: rotate(180deg);
  }

  .footer-collapsible-nav {
    max-height: none;
    overflow: visible;
  }

  .footer-col-wrap.accordion-open .footer-collapsible-nav {
    max-height: none;
    padding-bottom: 14px;
  }

  .footer-top-glass-card {
    padding: 20px 18px;
  }

  .glass-card-actions {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .btn-footer-cta-primary,
  .btn-footer-cta-outline {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .helpdesk-contact-row {
    min-height: 44px;
  }

  .btn-copy-contact {
    opacity: 1;
    /* Always visible on touchscreens */
  }

  .btn-floating-top {
    bottom: 84px;
    left: 16px;
  }

  .floating-actions-dock,
  .floating-whatsapp-dock,
  .floating-dock-actions {
    display: none !important;
  }

  .footer-bottom-badges {
    justify-content: center;
  }
}



/* ==========================================================================
   SHARED INNER PAGE HEADER (Compact Navy Gradient with Dot Grid & Breadcrumbs)
   ========================================================================== */
.page-header-band {
  position: relative;
  background: linear-gradient(180deg, #070e1e 0%, #0d1b38 100%);
  padding: 44px 0 38px 0;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.page-header-dotgrid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.page-header-inner {
  max-width: 840px;
  margin: 0 auto;
}

/* ==========================================================================
   SHIPPING TAG BREADCRUMB COMPONENT (Luggage Tag / Ticket Stub Aesthetic)
   ========================================================================== */
.shipping-tag-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px auto;
  max-width: 100%;
}

.hero-city-bc-nav {
  justify-content: flex-start;
  margin: 0 0 16px 0;
}

@media (max-width: 991px) {
  .hero-city-bc-nav {
    justify-content: center;
    margin: 0 auto 14px auto;
  }
}

/* Outer Tag / Ticket Stub Container */
.shipping-tag-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(225, 29, 36, 0.32);
  border-radius: 8px;
  padding: 6px 18px 6px 36px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  max-width: 100%;
  animation: tagSwingIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: 16px 50%;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

/* Tag Hover: Slight Upward Tilt & Soft Glow Shadow */
.shipping-tag-card:hover {
  transform: rotate(1deg) translateY(-1.5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38), 0 0 14px rgba(225, 29, 36, 0.22);
  border-color: rgba(225, 29, 36, 0.55);
  background: rgba(255, 255, 255, 0.1);
}

/* Punch Hole Eyelet Cutout on Left Edge */
.tag-punch-hole {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #081123;
  border: 1.5px solid rgba(225, 29, 36, 0.55);
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.65), 0 0 0 1.5px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-eyelet-ring {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

/* Subtle Dashed Stitch Lines along Top & Bottom Inner Edges */
.tag-stitch-lines {
  position: absolute;
  inset: 2px 6px;
  pointer-events: none;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  z-index: 1;
}

/* Breadcrumb Items List */
.shipping-tag-list {
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 3;
  overflow-x: auto;
  overflow-y: visible;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.shipping-tag-list::-webkit-scrollbar {
  display: none;
}

/* Individual Item */
.shipping-tag-item {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
}

/* Clickable Tag Level Link */
.shipping-tag-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 500;
  padding: 2px 2px;
  position: relative;
  transition: color 0.22s ease;
}

.tag-home-icon {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.22s ease, transform 0.22s ease;
}

/* Text Label with Underline Wipe on Hover */
.shipping-tag-item .tag-label {
  position: relative;
  display: inline-block;
}

.shipping-tag-link .tag-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background-color: #e11d24;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 1px;
}

/* Link Hover States */
.shipping-tag-link:hover {
  color: #e11d24;
}

.shipping-tag-link:hover .tag-home-icon {
  color: #e11d24;
  transform: translateY(-1px);
}

.shipping-tag-link:hover .tag-label::after {
  transform: scaleX(1);
}

.shipping-tag-link:focus-visible {
  outline: 2px solid #e11d24;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Thin 1px Vertical Divider between Levels */
.tag-divider-item {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  margin: 0;
}

.tag-divider-line {
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.22);
  opacity: 0.85;
}

/* Current Page (Active Level) */
.tag-item-current {
  color: #e11d24;
  font-weight: 700;
}

.tag-item-active-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e11d24;
  font-weight: 700;
  padding: 2px 2px;
  cursor: default;
}

/* Current Page Luggage Tag Icon with Subtle Slow Pulse */
.tag-current-icon {
  font-size: 12px;
  color: #e11d24;
  animation: tagIconPulse 2.5s ease-in-out infinite;
  display: inline-block;
}

/* Collapsed Dropdown for >4 Levels */
.tag-item-collapsed {
  position: relative;
}

.tag-collapsed-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: color 0.2s ease, transform 0.2s ease;
  border-radius: 4px;
}

.tag-collapsed-btn:hover,
.tag-collapsed-btn:focus-visible,
.tag-item-collapsed.show .tag-collapsed-btn {
  color: #e11d24;
  transform: scale(1.15);
  outline: none;
}

.tag-collapsed-ellipsis {
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 1;
}

.tag-collapsed-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(13, 27, 56, 0.96);
  border: 1px solid rgba(225, 29, 36, 0.3);
  border-radius: 8px;
  padding: 6px 0;
  min-width: 180px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 10px rgba(225, 29, 36, 0.2);
  backdrop-filter: blur(12px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  list-style: none;
  margin: 0;
}

.tag-item-collapsed:hover .tag-collapsed-menu,
.tag-item-collapsed:focus-within .tag-collapsed-menu,
.tag-item-collapsed.show .tag-collapsed-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.tag-collapsed-menu-item {
  margin: 0;
}

.tag-collapsed-menu-link {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

.tag-collapsed-menu-link:hover,
.tag-collapsed-menu-link:focus-visible {
  background: rgba(225, 29, 36, 0.16);
  color: #e11d24;
  padding-left: 17px;
  outline: none;
}

/* Keyframes */
@keyframes tagSwingIn {
  0% {
    opacity: 0;
    transform: translateY(-6px) rotate(-3deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes tagIconPulse {

  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}



/* Responsive Viewports */
@media (max-width: 576px) {
  .shipping-tag-nav {
    margin-bottom: 12px;
  }

  .shipping-tag-card {
    padding: 5px 12px 5px 28px;
    border-radius: 6px;
  }

  .tag-punch-hole {
    left: 8px;
    width: 10px;
    height: 10px;
  }

  .tag-divider-item {
    padding: 0 7px;
  }

  .shipping-tag-item {
    font-size: 12px;
  }
}

.page-header-title {
  color: #ffffff;
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.page-header-subtitle {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(14px, 1.4vw, 15px);
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   ABOUT US PAGE SECTIONS (Story, Values, Certifications)
   ========================================================================== */

/* About Page Specific Styles */
.about-overview-section {
  padding: 64px 0;
  background: #ffffff;
}

.about-lead-box {
  background: #faf5ee;
  border: 1px solid #ebdccb;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px -2px rgba(12, 21, 36, 0.05);
}

.about-story-section {
  padding: 64px 0;
  background: #faf5ee;
  border-top: 1px solid #ede3d4;
  border-bottom: 1px solid #ede3d4;
}

.story-copy-lead {
  font-size: 16px;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.75;
}

.story-copy-body {
  font-size: 15px;
  color: #334155;
  line-height: 1.8;
}

/* Mission & Vision Section (Warm Sand Canvas, White Cards) */
.about-mv-section {
  padding: 72px 0 64px 0;
  background: #faf5ee;
  border-top: 1px solid #ede3d4;
  border-bottom: 1px solid #ede3d4;
}

.mv-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 20px;
  padding: 36px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px -2px rgba(12, 21, 36, 0.04);
}

.mv-card:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 36, 0.4);
  box-shadow: 0 16px 36px -4px rgba(225, 29, 36, 0.12);
}

.mv-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(225, 29, 36, 0.1);
  border: 1px solid rgba(225, 29, 36, 0.22);
  color: #e11d24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.mv-card-body p {
  color: #334155;
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 14px;
}

.mv-card-body p:last-child {
  margin-bottom: 0;
}

/* Values & Mission Cards (White Canvas, Warm Sand Cards) */
.about-values-section {
  padding: 72px 0 64px 0;
  background: #ffffff;
}

.value-feature-card {
  background: #faf5ee;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 28px 24px;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.value-feature-card:hover {
  background: #ffffff;
  transform: translateY(-6px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 14px 32px rgba(225, 29, 36, 0.12);
}

.value-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(225, 29, 36, 0.1);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.25s ease;
}

.value-feature-card:hover .value-icon-box {
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  color: #ffffff;
  transform: scale(1.06);
}

.value-card-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.7;
}

/* Moving Forward Section (Warm Sand Canvas, Clean White Card) */
.about-forward-section {
  padding: 64px 0;
  background: #faf5ee;
  border-top: 1px solid #ede3d4;
  border-bottom: 1px solid #ede3d4;
  position: relative;
}

.forward-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 8px 28px -4px rgba(12, 21, 36, 0.06);
}

.forward-quote-text {
  font-size: 16px;
  color: #0f172a;
  line-height: 1.75;
  font-weight: 600;
}

.forward-body-text {
  font-size: 15px;
  color: #334155;
  line-height: 1.8;
}

/* Certifications Badges Section */
.about-certs-section {
  padding: 72px 0 64px 0;
  background: #070e1e;
  color: #ffffff;
  position: relative;
}

.cert-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.cert-badge-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 30px 24px;
  transition: all 0.28s ease;
  backdrop-filter: blur(8px);
}

.cert-badge-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(225, 29, 36, 0.5);
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.cert-badge-icon {
  font-size: 32px;
  color: #f59e0b;
  margin-bottom: 16px;
}

.cert-code-pill {
  display: inline-block;
  background: rgba(225, 29, 36, 0.15);
  color: #ff4d4f;
  border: 1px solid rgba(225, 29, 36, 0.35);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 14px;
}

/* ==========================================================================
   WHY CHOOSE US PAGE SECTIONS
   Strict Alternating White and Warm Sand Rhythm (Zero Dark Navy)
   ========================================================================== */
.choose-overview-section {
  padding: 64px 0;
  background: #ffffff;
}

.choose-standards-section {
  padding: 72px 0 64px 0;
  background: #faf5ee;
}

.choose-card {
  background: #ffffff;
  border: 1px solid #e8e2d8;
  border-radius: 20px;
  padding: 32px 28px;
  height: 100%;
  box-shadow: 0 4px 16px rgba(12, 21, 36, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.choose-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(225, 29, 36, 0.08);
  border-color: #e11d24;
}

.choose-card-body {
  flex-grow: 1;
}

.choose-forward-section {
  padding: 64px 0;
  background: #ffffff;
}

.choose-spotlight-card {
  background: #faf5ee;
  border: 1px solid #e8e2d8;
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 6px 20px rgba(12, 21, 36, 0.03);
}

/* ==========================================================================
   PHOTO GALLERY (Filter Chips, Responsive Grid & Lightbox)
   ========================================================================== */
.gallery-page-section {
  padding: 64px 0 72px 0;
  background: #ffffff;
}

.gallery-filter-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.gallery-chip-btn {
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
}

.gallery-chip-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.gallery-chip-btn.active {
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  border-color: #e11d24;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.35);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.gallery-card-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card-item:hover .gallery-img {
  transform: scale(1.06);
}

.gallery-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 19, 38, 0.92) 0%, rgba(9, 19, 38, 0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.gallery-card-item:hover .gallery-card-overlay {
  opacity: 1;
}

.gallery-caption-tag {
  display: inline-block;
  background: #e11d24;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
  width: fit-content;
}

.gallery-caption-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

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

  .gallery-card-item {
    border-radius: 12px;
  }

  .gallery-card-overlay {
    padding: 10px 8px;
    opacity: 1;
    background: linear-gradient(to top, rgba(9, 19, 38, 0.90) 0%, rgba(9, 19, 38, 0.2) 65%, transparent 100%);
  }

  .gallery-caption-title {
    font-size: 12.5px;
    line-height: 1.25;
  }

  .gallery-caption-tag {
    font-size: 10px;
    padding: 2px 7px;
    margin-bottom: 3px;
  }
}


/* Lightbox */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(7, 14, 30, 0.94);
  z-index: 1060;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(12px);
}

.gallery-lightbox.active {
  display: flex;
}

.lightbox-content-wrap {
  position: relative;
  max-width: 900px;
  width: 100%;
  text-align: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.lightbox-caption {
  color: #ffffff;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
}

.lightbox-btn-close,
.lightbox-btn-prev,
.lightbox-btn-next {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lightbox-btn-close:hover,
.lightbox-btn-prev:hover,
.lightbox-btn-next:hover {
  background: #e11d24;
  border-color: #e11d24;
  color: #ffffff;
}

.lightbox-btn-close {
  position: absolute;
  top: -55px;
  right: 0;
}

.lightbox-btn-prev {
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-btn-next {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 991px) {
  .lightbox-btn-prev {
    left: 10px;
  }

  .lightbox-btn-next {
    right: 10px;
  }
}

/* ==========================================================================
   CUSTOMER REVIEWS FULL GRID PAGE
   ========================================================================== */
.reviews-page-section {
  padding: 64px 0 72px 0;
  background: #ffffff;
}

.reviews-summary-hero-card {
  background: linear-gradient(135deg, #091326 0%, #162a4d 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 16px 40px rgba(9, 19, 38, 0.16);
  margin-bottom: 48px;
}

/* ==========================================================================
   REVIEWS PAGE SWIPE CAROUSEL (Desktop & Mobile)
   ========================================================================== */
.reviews-swipe-section {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
}

.reviews-slider-header {
  margin-bottom: 20px;
}

.reviews-slider-hint {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
}

.reviews-slider-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-review-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #16233b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-review-arrow:hover {
  background: #e11d24;
  border-color: #e11d24;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.25);
}

.reviews-slider-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  padding: 8px 4px 16px 4px;
  margin: -8px -4px -16px -4px;
}

.reviews-slider-viewport:focus-visible {
  outline: 2px solid #e11d24;
  outline-offset: 4px;
}

.reviews-slider-viewport.is-dragging {
  cursor: grabbing;
}

.reviews-slider-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  transition: transform 0.42s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.reviews-slider-track.no-transition {
  transition: none !important;
}

/* Desktop: 3 cards per view */
.reviews-slider-track .review-full-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.reviews-slider-track .review-full-card:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 12px 28px rgba(225, 29, 36, 0.12);
}

.review-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e11d24;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}

/* Tablet: 2 cards per view */
@media (max-width: 991.98px) {
  .reviews-slider-track {
    gap: 16px;
  }

  .reviews-slider-track .review-full-card {
    flex: 0 0 calc((100% - 16px) / 2);
    min-width: calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
    padding: 24px 20px;
  }
}

/* Mobile: 1 card per view (Full Width Swipe) */
@media (max-width: 767.98px) {
  .reviews-slider-track {
    gap: 14px;
  }

  .reviews-slider-track .review-full-card {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    border-radius: 16px;
    padding: 22px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }

  .btn-review-arrow {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .reviews-slider-hint {
    font-size: 12px;
    padding: 5px 12px;
  }
}

.reviews-slider-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.btn-review-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-review-dot.active {
  background: #e11d24;
  width: 26px;
  border-radius: 9999px;
}

/* ==========================================================================
   FAQS PAGE (Category Tabs & Animated Accordion)
   ========================================================================== */
.faqs-page-section {
  padding: 64px 0 72px 0;
  background: #ffffff;
}

.faq-segmented-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #f1f5f9;
  padding: 8px;
  border-radius: 50px;
  margin: 0 auto 40px auto;
  width: fit-content;
  max-width: 100%;
}

.faq-tab-btn {
  border: none;
  background: transparent;
  color: #475569;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 22px;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.22s ease;
}

.faq-tab-btn:hover {
  color: #0f172a;
}

.faq-tab-btn.active {
  background: #ffffff;
  color: #e11d24;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.faq-custom-accordion-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
}

.faq-custom-accordion-item:hover {
  border-color: rgba(225, 29, 36, 0.4);
}

.faq-custom-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.faq-custom-btn:hover {
  color: #e11d24;
}

.faq-custom-chevron {
  color: #e11d24;
  font-size: 14px;
  transition: transform 0.25s ease;
}

.faq-custom-btn[aria-expanded="true"] .faq-custom-chevron {
  transform: rotate(180deg);
}

.faq-custom-body {
  padding: 0 24px 22px 24px;
  color: #475569;
  font-size: 15px;
  line-height: 1.65;
}

/* ==========================================================================
   PRIVACY POLICY & TERMS & CONDITIONS (Clean Legal Pages)
   ========================================================================== */
.legal-page-section {
  padding: 64px 0 72px 0;
  background: #ffffff;
}

.legal-toc-card {
  position: sticky;
  top: 100px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
}

.legal-toc-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0f172a;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-toc-link {
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: block;
}

.legal-toc-link:hover,
.legal-toc-link.active {
  background: rgba(225, 29, 36, 0.08);
  color: #e11d24;
}

.legal-content-column {
  max-width: 760px;
  color: #334155;
  font-size: 16px;
  line-height: 1.75;
}

.legal-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(225, 29, 36, 0.1);
  color: #e11d24;
  border: 1px solid rgba(225, 29, 36, 0.25);
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 24px;
}

.legal-clause-block {
  margin-bottom: 40px;
  scroll-margin-top: 110px;
}

.legal-clause-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.legal-clause-title i {
  color: #e11d24;
}

@media (max-width: 991px) {
  .legal-toc-card {
    position: static;
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   ABOUT US & WHY CHOOSE US SPECIFIC STYLES
   ========================================================================== */
.home-white-glove-section {
  padding: 72px 0 64px 0;
  background: #ffffff;
}

.white-glove-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.white-glove-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.white-glove-card:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 16px 36px rgba(225, 29, 36, 0.12);
}

.feature-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(225, 29, 36, 0.1);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
  transition: all 0.28s ease;
  border: 1px solid rgba(225, 29, 36, 0.2);
}

.white-glove-card:hover .feature-icon-box {
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  color: #ffffff;
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 8px 22px rgba(225, 29, 36, 0.35);
}

.feature-card-desc {
  color: #64748b;
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 0;
}

/* FAQ Inner Page Additions */
.faq-pane-header {
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid #f1f5f9;
}

.faq-custom-btn:not(.collapsed) .faq-custom-chevron {
  transform: rotate(180deg);
}

.faq-custom-btn.collapsed .faq-custom-chevron {
  transform: rotate(0deg);
}

/* Reviews Page Additions */
.border-white-10 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

@media (min-width: 992px) {
  .border-lg-end {
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
}

/* ==========================================================================
   SERVICE DETAIL PAGES (6 SHIFTING SERVICES)
   ========================================================================== */

/* 1. Intro Section */
.service-intro-section {
  padding: 72px 0 64px 0;
  background: #ffffff;
}

@media (max-width: 991px) {
  .service-intro-section {
    padding: 40px 0 32px 0;
  }

  .service-intro-content {
    padding-right: 0;
  }
}

.service-intro-content {
  padding-right: 16px;
}

.service-lead-paragraph {
  font-size: 15.5px;
  line-height: 1.7;
  color: #334155;
}

.service-quick-badge {
  display: inline-flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
}

.service-photo-placeholder-card {
  position: relative;
  background: linear-gradient(135deg, #091326 0%, #162a4d 100%);
  border-radius: 20px;
  padding: 32px;
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(9, 19, 38, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.service-placeholder-inner {
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 36px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
}

.placeholder-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(225, 29, 36, 0.15);
  border: 1px solid rgba(225, 29, 36, 0.35);
  color: #ff4d4f;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.placeholder-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e11d24;
  background: rgba(225, 29, 36, 0.15);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.placeholder-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.placeholder-subtext {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
}

.service-photo-floating-badge {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: #ffffff;
  color: #0f172a;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 2. What's Included Feature Grid */
.service-features-section {
  padding: 72px 0 64px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.service-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

@media (max-width: 575.98px) {
  .service-features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
}

.service-feature-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.service-feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 16px 36px rgba(225, 29, 36, 0.12);
}

.feature-card-heading {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

/* 3. How It Works Timeline */
.service-process-section {
  padding: 72px 0 68px 0;
  background: #070e1e;
  color: #ffffff;
}

.service-timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.service-timeline-connector-line {
  position: absolute;
  top: 36px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, rgba(225, 29, 36, 0.2) 0%, #e11d24 50%, rgba(225, 29, 36, 0.2) 100%);
  z-index: 1;
}

.service-timeline-step-item {
  position: relative;
  z-index: 2;
  text-align: center;
}

.service-timeline-node-wrap {
  position: relative;
  display: inline-flex;
  margin-bottom: 20px;
}

.service-timeline-icon-box {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0d1b38;
  border: 2px solid rgba(225, 29, 36, 0.5);
  color: #ff4d4f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 24px rgba(225, 29, 36, 0.25);
  transition: all 0.28s ease;
}

.service-timeline-step-item:hover .service-timeline-icon-box {
  background: #e11d24;
  color: #ffffff;
  border-color: #e11d24;
  transform: scale(1.1);
  box-shadow: 0 0 32px rgba(225, 29, 36, 0.5);
}

.service-timeline-step-number {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e11d24;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #070e1e;
}

.service-timeline-step-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.service-timeline-step-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 260px;
}

@media (max-width: 991px) {
  .service-timeline-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }

  .service-timeline-connector-line {
    display: none;
  }
}

@media (max-width: 575px) {
  .service-timeline-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
  }

  .service-timeline-icon-box {
    width: 44px;
    height: 44px;
    font-size: 20px;
    margin-bottom: 8px;
  }

  .service-timeline-step-number {
    width: 20px;
    height: 20px;
    font-size: 9.5px;
    top: -3px;
    right: -3px;
  }

  .service-timeline-step-title {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .service-timeline-step-desc {
    font-size: 11px;
    line-height: 1.35;
  }
}

/* 4. Pricing & Instant Quote Band */
.service-pricing-cta-band {
  padding: 36px 0;
  background: #ffffff;
}

.service-pricing-card {
  background: linear-gradient(135deg, #091326 0%, #162a4d 100%);
  border: 1.5px solid rgba(225, 29, 36, 0.35);
  border-radius: 20px;
  padding: 36px 40px;
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(9, 19, 38, 0.18);
}

.service-price-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(225, 29, 36, 0.2);
  border: 1px solid rgba(225, 29, 36, 0.4);
  color: #ff4d4f;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
}

.service-price-unit {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.service-price-display {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.service-price-amount {
  color: #f59e0b;
}

.service-pricing-note {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

/* 5. Trust Strip */
.service-trust-strip-section {
  padding: 48px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.service-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.service-trust-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
}

.service-trust-card:hover {
  transform: translateY(-3px);
  border-color: rgba(225, 29, 36, 0.35);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.service-trust-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(225, 29, 36, 0.1);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.service-trust-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.service-trust-desc {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

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

  .service-trust-card {
    padding: 12px 10px;
    border-radius: 12px;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .service-trust-icon-wrap {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin: 0 auto;
  }

  .service-trust-title {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .service-trust-desc {
    font-size: 10.5px;
    line-height: 1.3;
    margin-bottom: 0;
  }
}


/* 6. Related Services */
.service-related-section {
  padding: 64px 0 72px 0;
  background: #ffffff;
}

.service-related-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-related-card:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 16px 36px rgba(225, 29, 36, 0.12);
}

.related-price-tag {
  font-size: 12px;
  font-weight: 700;
  background: rgba(225, 29, 36, 0.1);
  color: #e11d24;
  padding: 4px 10px;
  border-radius: 20px;
}

.related-card-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: 16px;
}

.related-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #e11d24;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.related-card-link:hover {
  gap: 10px;
  color: #991b1b;
}



/* ==========================================================================
   CONTACT US PAGE SYSTEM
   ========================================================================== */
.contact-page-section {
  padding: 60px 0 80px 0;
  background-color: var(--bg-canvas);
}

.contact-info-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.contact-info-card:hover {
  transform: translateY(-5px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 16px 36px rgba(225, 29, 36, 0.12);
}

.contact-info-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.bg-orange-soft {
  background: rgba(225, 29, 36, 0.12) !important;
}

.bg-success-soft {
  background: rgba(16, 185, 129, 0.12) !important;
}

.bg-primary-soft {
  background: rgba(22, 35, 59, 0.08) !important;
}

.bg-warning-soft {
  background: rgba(245, 158, 11, 0.15) !important;
}

.contact-info-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.contact-info-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 14px;
  flex-grow: 1;
}

.contact-info-link {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.contact-info-link:hover {
  gap: 10px;
  color: #991b1b;
}

.contact-hours-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-low);
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-block;
  border: 1px solid var(--border-subtle);
}

.contact-form-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
}

@media (max-width: 576px) {
  .contact-form-card {
    padding: 24px 18px;
  }
}

.contact-form-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  margin-top: 8px;
  margin-bottom: 10px;
}

.contact-sidebar-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}

.contact-sidebar-card.bg-navy-card {
  background: linear-gradient(145deg, #091326 0%, #16233b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-trust-checklist li {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.contact-map-section {
  padding: 0 0 80px 0;
  background-color: var(--bg-canvas);
}

.contact-map-wrapper {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   CITY SERVICES DETAIL PAGES & SIDEBAR SYSTEM
   ========================================================================== */
.service-details-section {
  padding: 50px 0 80px 0;
  background-color: var(--bg-canvas);
}

.service-main-content {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  .service-main-content {
    padding: 24px 18px;
  }
}

.service-section-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  position: relative;
  padding-left: 16px;
  margin-bottom: 20px;
}

.service-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: var(--secondary-gradient);
  border-radius: 4px;
}

.about-service-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
}

.about-service-text p {
  margin-bottom: 18px;
}

.about-service-text h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 28px;
  margin-bottom: 14px;
}

.about-service-text img {
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  margin: 20px 0;
}

/* Process Timeline */
.process-timeline {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.process-step {
  display: flex;
  gap: 18px;
  background: var(--surface-low);
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  transition: all 0.25s ease;
  align-items: flex-start;
}

.process-step:hover {
  background: #ffffff;
  border-color: rgba(225, 29, 36, 0.4);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.step-number {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--secondary-gradient);
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Why Choose Grid */
.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.choose-item-card {
  background: var(--surface-low);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px 20px;
  transition: all 0.25s ease;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.choose-item-card:hover {
  background: #ffffff;
  border-color: rgba(225, 29, 36, 0.4);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.choose-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(225, 29, 36, 0.12);
  color: var(--secondary);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.choose-content h5 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.choose-content p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Service Reviews Slice */
.service-reviews-slice {
  margin-top: 36px;
  padding: 24px;
  background: var(--surface-low);
  border-radius: 16px;
  border-left: 4px solid var(--secondary);
}

.service-reviews-slice .rating-row {
  color: #f59e0b;
  font-size: 16px;
  margin-bottom: 10px;
}

.service-reviews-slice .review-text {
  font-size: 14.5px;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.service-reviews-slice .review-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-reviews-slice .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--secondary-gradient);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.service-reviews-slice .user-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}

/* Service FAQ Accordion */
.service-faq-container {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-card-header {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}

.faq-card-body {
  padding: 0 20px 18px 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Service Sidebar */
.service-sidebar {
  position: sticky;
  top: 100px;
}

.sidebar-widget {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.sidebar-widget .widget-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(225, 29, 36, 0.2);
}

.sidebar-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-services-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-low);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sidebar-services-list a:hover,
.sidebar-services-list a.active {
  background: var(--secondary-gradient);
  color: #ffffff;
  transform: translateX(4px);
}

.sidebar-widget.widget-contact-cta {
  background: linear-gradient(145deg, #091326 0%, #16233b 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.widget-contact-cta .cta-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.widget-contact-cta .cta-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ==========================================================================
   PACKERS & MOVERS STATES & CITY PAGE DESIGN
   ========================================================================== */
.pm-states-card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  background: #091326;
  height: 220px;
  display: block;
}

.pm-states-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(225, 29, 36, 0.15);
  border-color: rgba(225, 29, 36, 0.45);
}

.pm-states-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.pm-states-card:hover .pm-states-img {
  transform: scale(1.06);
}

.pm-states-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 14, 30, 0.2) 30%, rgba(7, 14, 30, 0.88) 100%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.pm-states-title-span {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pm-list-city-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
}

.pm-list-city-card:hover {
  transform: translateY(-3px);
  border-color: var(--secondary);
  box-shadow: var(--shadow-sm);
  color: var(--secondary);
}

.city-content-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.city-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.city-pill {
  font-size: 12.5px;
  font-weight: 600;
  background: var(--surface-low);
  color: var(--text-primary);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
}

/* ==========================================================================
   BLOG MODULE STYLING
   ========================================================================== */
.blog-section {
  padding: 60px 0 80px 0;
  background-color: var(--bg-canvas);
}

.blog-title-highlight {
  color: var(--secondary);
  position: relative;
}

.blog-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 29, 36, 0.4);
  box-shadow: 0 16px 36px rgba(22, 35, 59, 0.1);
}

.blog-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img {
  transform: scale(1.04);
}

.blog-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-meta {
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.blog-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 10px;
}

.blog-excerpt {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 16px;
}

.blog-readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--secondary);
  font-size: 13.5px;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.blog-readmore-btn:hover {
  gap: 10px;
  color: #991b1b;
}

/* ==========================================================================
   ABOUT US & COMPANY PAGES SYSTEM
   ========================================================================== */

/* Why Choose Us Comparison Section */
.comparison-section {
  padding: 70px 0 80px 0;
  background: linear-gradient(180deg, #070e1e 0%, #0c1830 100%);
  color: #ffffff;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}

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

.compare-card-keshav {
  background: rgba(14, 23, 42, 0.85);
  border: 2px solid #e11d24;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 12px 36px rgba(225, 29, 36, 0.2);
}

.compare-card-typical {
  background: rgba(14, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px 28px;
}

.compare-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.compare-badge-tag {
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compare-badge-keshav {
  background: #e11d24;
  color: #ffffff;
}

.compare-badge-typical {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.compare-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #e2e8f0;
}

.compare-icon-check {
  color: #22c55e;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.compare-icon-cross {
  color: #ef4444;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.testimonial-callout-section {
  padding: 60px 0 70px 0;
  background: var(--bg-canvas);
}

.testimonial-callout-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* FAQs Page Categorized Tabs */
.faq-segmented-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.faq-tab-btn {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 30px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.faq-tab-btn:hover,
.faq-tab-btn.active {
  background: var(--secondary-gradient);
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--shadow-orange);
}

.faq-custom-accordion-item {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-custom-btn {
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
}

.faq-custom-chevron {
  font-size: 14px;
  color: var(--secondary);
  transition: transform 0.25s ease;
}

.faq-custom-btn:not(.collapsed) .faq-custom-chevron {
  transform: rotate(180deg);
}

.faq-custom-body {
  padding: 0 20px 20px 20px;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Photo Gallery Grid & Lightbox */
.gallery-page-section {
  padding: 60px 0 80px 0;
  background: var(--bg-canvas);
}

.gallery-filter-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.gallery-chip-btn {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 30px;
  padding: 8px 20px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.gallery-chip-btn:hover,
.gallery-chip-btn.active {
  background: var(--secondary-gradient);
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--shadow-orange);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.gallery-card-item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gallery-card-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(225, 29, 36, 0.45);
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-card-item:hover .gallery-img {
  transform: scale(1.06);
}

.gallery-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7, 14, 30, 0.88) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
}

.gallery-caption-tag {
  font-size: 11px;
  font-weight: 700;
  color: #ff4d4f;
  margin-bottom: 4px;
}

.gallery-caption-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
}

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

  .gallery-card-item {
    border-radius: 12px;
  }

  .gallery-card-overlay {
    padding: 10px 8px;
    background: linear-gradient(180deg, transparent 20%, rgba(7, 14, 30, 0.90) 100%);
  }

  .gallery-caption-title {
    font-size: 12.5px;
    line-height: 1.25;
  }

  .gallery-caption-tag {
    font-size: 10px;
    margin-bottom: 2px;
  }
}


.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(7, 14, 30, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gallery-lightbox.show {
  display: flex;
}

.lightbox-content-wrap {
  position: relative;
  max-width: 900px;
  max-height: 90vh;
  text-align: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 14px;
  object-fit: contain;
}

.lightbox-caption {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin-top: 14px;
}

.lightbox-btn-close {
  position: absolute;
  top: -45px;
  right: 0;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
}

.lightbox-btn-prev,
.lightbox-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lightbox-btn-prev {
  left: -60px;
}

.lightbox-btn-next {
  right: -60px;
}

@media (max-width: 768px) {
  .lightbox-btn-prev {
    left: 10px;
  }

  .lightbox-btn-next {
    right: 10px;
  }
}

/* Customer Reviews Page */
.reviews-page-section {
  padding: 60px 0 80px 0;
  background: var(--bg-canvas);
}

.reviews-summary-hero-card {
  background: linear-gradient(145deg, #091326 0%, #16233b 100%);
  border-radius: 20px;
  padding: 36px 32px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-md);
  margin-bottom: 40px;
}

.reviews-filter-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.reviews-chip-btn {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 30px;
  padding: 8px 20px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.reviews-chip-btn:hover,
.reviews-chip-btn.active {
  background: var(--secondary-gradient);
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--shadow-orange);
}

.reviews-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.review-card-item {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.review-card-item:hover {
  transform: translateY(-5px);
  border-color: rgba(225, 29, 36, 0.4);
  box-shadow: var(--shadow-md);
}

.review-card-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.review-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--secondary-gradient);
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-stars-row {
  color: #f59e0b;
  font-size: 14px;
  margin-bottom: 10px;
}

.review-card-quote {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  flex-grow: 1;
  margin-bottom: 14px;
}

.review-route-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-low);
  padding: 5px 12px;
  border-radius: 20px;
  align-self: flex-start;
}

.review-write-cta-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 32px;
  text-align: center;
  margin-top: 48px;
  box-shadow: var(--shadow-sm);
}

/* Company Sidebar Component */
.company-sidebar .card {
  border: 1px solid var(--border-card) !important;
  border-radius: 18px !important;
}

.company-sidebar .list-unstyled a {
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 14px;
}

.company-sidebar .list-unstyled a:hover {
  background: var(--surface-low);
  color: var(--secondary) !important;
  padding-left: 12px !important;
}

.company-sidebar .list-unstyled a.bg-light {
  background: rgba(225, 29, 36, 0.1) !important;
  color: var(--secondary) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   ENHANCED GLOBAL & COMPONENT UTILITY CLASSES
   ========================================================================== */

/* 1. Navigation & Topbar Micro-Elements */
.odometer-roll {
  font-family: var(--font-heading), monospace;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  letter-spacing: 0.02em;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.mobile-drawer-links {
  margin: 0;
  padding: 0;
}

.mobile-drawer-item {
  transition: background-color 0.2s ease;
}

.mobile-drawer-item a:hover {
  color: var(--secondary) !important;
}

.navbar-brand-custom {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* 2. Quote Form & Dynamic Route Bridge */
.route-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #e11d24 0%, #ff4d4f 50%, #f59e0b 100%);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(225, 29, 36, 0.5);
}

.route-truck-icon {
  font-size: 14px;
  color: #e11d24;
  display: inline-block;
  transition: transform 0.3s ease;
}

.swap-icon {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-city-swap:hover .swap-icon {
  transform: rotate(180deg);
}

.estimate-text {
  font-weight: 700;
  color: var(--secondary);
  font-size: 14px;
}

/* 3. Counters & Micro-Statistics */
.stat-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-heading);
}

/* 4. Process Steps & Packing Assurance */
.chip-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 5. Directory Search & City Grid */
.search-icon {
  color: rgba(22, 35, 59, 0.45);
  font-size: 16px;
  margin-right: 8px;
}

.city-item {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.city-item:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: #e11d24;
  box-shadow: 0 6px 16px rgba(225, 29, 36, 0.15);
  color: #e11d24 !important;
}

.city-item:hover i {
  color: #e11d24 !important;
}

/* 6. Certifications & Badges Row */
.cert-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .cert-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .cert-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* 7. Testimonials & Customer Reviews Carousel */
.testimonials-carousel-wrap {
  background: var(--surface-white);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.reviewer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reviewer-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
}

.btn-carousel-arrow.prev,
.btn-carousel-arrow.next {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--surface-white);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-carousel-arrow.prev:hover,
.btn-carousel-arrow.next:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #ffffff;
  transform: scale(1.08);
}

/* 8. Footer Brand & Helpdesk Info */
.footer-brand-wrap {
  display: inline-block;
  margin-bottom: 16px;
}

.helpdesk-info-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.whatsapp-val,
.email-val {
  font-size: 14px;
  color: #e2e8f0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.whatsapp-val:hover {
  color: #22c55e !important;
}

.email-val:hover {
  color: #e11d24 !important;
}

/* Animated Road Track Line in Footer */
.road-track-line {
  height: 2px;
  width: 100%;
  background: repeating-linear-gradient(90deg, rgba(225, 29, 36, 0.6) 0, rgba(225, 29, 36, 0.6) 16px, transparent 16px, transparent 32px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  animation: roadLineScroll 20s linear infinite;
}

@keyframes roadLineScroll {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 640px 0;
  }
}

/* 9. FAQs Categorized Panes */
.faq-category-pane {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-category-pane.fade:not(.show) {
  display: none;
  opacity: 0;
  transform: translateY(8px);
}

.faq-category-pane.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* 10. Service Detail Master Template - Quick Micro Badges & CTA Actions */
.service-intro-quick-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.service-quick-badge {
  display: inline-flex;
  align-items: center;
  background: var(--surface-low);
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.service-quick-badge:hover {
  background: #ffffff;
  border-color: rgba(225, 29, 36, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(225, 29, 36, 0.1);
}

.service-pricing-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* 11. Additional Micro-Components */
.trust-stat-divider {
  width: 1px;
  height: 48px;
  background: rgba(22, 35, 59, 0.12);
  margin: 0 16px;
}

.benefit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mockup-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 20px;
  background: rgba(7, 14, 30, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.mockup-stat-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-cell-label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-cell-val {
  font-size: 12.5px;
  font-weight: 700;
  color: #e2e8f0;
}

.expert-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.final-cta-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/* ==========================================================================
   OUR BRANCHES / STATE CARDS SECTION (4 Columns Format, Minimal Aesthetic)
   ========================================================================== */
.branches-grid-section {
  padding: 60px 0 80px 0;
  background-color: #f8fafc;
}

.branches-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(225, 29, 36, 0.08);
  border: 1px solid rgba(225, 29, 36, 0.22);
  color: #9a3412;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.branches-search-box {
  max-width: 480px;
  margin: 0 auto 36px auto;
  position: relative;
}

.branches-search-input {
  width: 100%;
  padding: 12px 20px 12px 46px;
  font-size: 14.5px;
  border: 1.5px solid #e2e8f0;
  border-radius: 50px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.branches-search-input:focus {
  outline: none;
  border-color: #e11d24;
  box-shadow: 0 0 0 4px rgba(225, 29, 36, 0.12);
}

.branches-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  pointer-events: none;
}

/* 4-Column Minimal State Card */
.state-branch-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.state-branch-card:hover {
  transform: translateY(-5px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.09), 0 0 16px rgba(225, 29, 36, 0.14);
}

/* Image Container */
.state-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0d1b38;
}

.state-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.state-branch-card:hover .state-card-img {
  transform: scale(1.06);
}

.state-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(13, 27, 56, 0.85);
  color: #ffffff;
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Card Body (Minimal info only: State Name + Arrow Icon) */
.state-card-body {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

.state-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.state-card-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #e11d24;
  flex-shrink: 0;
}

.state-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.state-branch-card:hover .state-card-name {
  color: #e11d24;
}

.state-card-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.state-branch-card:hover .state-card-btn {
  background: #e11d24;
  color: #ffffff;
  border-color: #e11d24;
  transform: translateX(2px);
}

/* ==========================================================================
   STATE DETAIL PAGE (City Grid, State Showcase, Features & FAQs)
   ========================================================================== */
.state-showcase-section {
  padding: 48px 0 32px 0;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.state-showcase-card {
  background: linear-gradient(135deg, #070e1e 0%, #0d1b38 100%);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
  color: #ffffff;
}

.state-showcase-img-wrap {
  position: relative;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
}

.state-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.state-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 14, 30, 0.85) 0%, rgba(7, 14, 30, 0.2) 100%);
}

.state-showcase-content {
  padding: 36px 32px;
}

.state-stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.state-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  backdrop-filter: blur(8px);
}

/* City Grid Section */
.state-cities-section {
  padding: 56px 0 72px 0;
  background-color: #f8fafc;
}

.state-filter-bar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  margin-bottom: 32px;
}

.state-city-search-input {
  width: 100%;
  padding: 10px 16px 10px 42px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  color: #0f172a;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.state-city-search-input:focus {
  outline: none;
  border-color: #e11d24;
  box-shadow: 0 0 0 3px rgba(225, 29, 36, 0.12);
}

.state-city-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
}

.state-alphabet-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
}

.state-alpha-btn {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.18s ease;
}

.state-alpha-btn:hover,
.state-alpha-btn.active {
  background: #e11d24;
  border-color: #e11d24;
  color: #ffffff;
}

/* Modern Interactive City Cards Grid */
.state-city-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease, box-shadow 0.24s ease;
  height: 100%;
}

.state-city-card:hover {
  transform: translateY(-3px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08), 0 0 12px rgba(225, 29, 36, 0.12);
}

.state-city-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.state-city-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(225, 29, 36, 0.08);
  border: 1px solid rgba(225, 29, 36, 0.2);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.state-city-card:hover .state-city-icon-box {
  background: #e11d24;
  color: #ffffff;
  transform: rotate(-6deg);
}

.state-city-details {
  min-width: 0;
}

.state-city-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.state-city-card:hover .state-city-title {
  color: #e11d24;
}

.state-city-sub {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.state-city-arrow {
  color: #cbd5e1;
  font-size: 18px;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.state-city-card:hover .state-city-arrow {
  color: #e11d24;
  transform: translateX(3px);
}

/* Feature Grid inside State Detail */
.state-features-section {
  padding: 64px 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}

.state-feature-card {
  padding: 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  height: 100%;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.state-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 36, 0.4);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.state-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(225, 29, 36, 0.1);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}

/* FAQ Accordion Section for State Page */
.state-faq-section {
  padding: 64px 0 72px 0;
  background: #f8fafc;
}

.state-faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.state-faq-btn {
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  background: transparent;
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: color 0.2s ease;
}

.state-faq-btn:not(.collapsed) {
  color: #991b1b;
}

.state-faq-btn i {
  transition: transform 0.25s ease;
}

.state-faq-btn:not(.collapsed) i {
  transform: rotate(180deg);
  color: #991b1b;
}

.state-faq-body {
  padding: 0 20px 18px 20px;
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

/* State CTA Strip */
.state-cta-band {
  background: linear-gradient(135deg, #070e1e 0%, #0d1b38 100%);
  padding: 48px 0;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .state-showcase-content {
    padding: 24px 20px;
  }

  .state-showcase-img-wrap {
    min-height: 180px;
  }

  .state-city-title {
    font-size: 13.5px;
  }
}

/* ==========================================================================
   CITY PAGE (Hero with State Background & Quote Form, Services, Process & FAQs)
   ========================================================================== */
.city-hero-section {
  position: relative;
  background-color: #070e1e;
  padding: 64px 0 72px 0;
  min-height: 520px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.city-hero-bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.city-hero-bg-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: brightness(0.92) contrast(1.06) saturate(1.15);
  transform: scale(1.01);
}

.city-hero-backdrop-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 14, 30, 0.82) 0%, rgba(7, 14, 30, 0.38) 46%, rgba(13, 27, 56, 0.65) 100%),
    linear-gradient(180deg, rgba(7, 14, 30, 0.3) 0%, transparent 40%, rgba(7, 14, 30, 0.55) 100%);
  z-index: 2;
}

.city-hero-dotgrid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 3;
}

.city-hero-content {
  position: relative;
  z-index: 4;
}

/* City Hero Small Shipping Tag Breadcrumb (Replacing IBA Approved pill) */
.city-hero-breadcrumb-nav {
  display: inline-flex;
  margin-bottom: 18px;
  max-width: 100%;
}

.city-hero-tag-card {
  padding: 5px 16px 5px 32px;
  font-size: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(225, 29, 36, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.city-hero-tag-card .tag-punch-hole {
  left: 10px;
  width: 10px;
  height: 10px;
  background: #081123;
}

.city-hero-title {
  color: #ffffff;
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.city-hero-highlight {
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75));
}

.city-hero-desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(14.5px, 1.3vw, 15.5px);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 580px;
}

.city-hero-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.city-hero-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.city-hero-trust-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(225, 29, 36, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

/* Primary Keshav Orange Action Buttons */
.btn-hero-call-orange {
  background: linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%);
  color: #ffffff !important;
  border: none;
  box-shadow: 0 8px 24px -4px rgba(225, 29, 36, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-call-orange:hover {
  background: linear-gradient(135deg, #c01017 0%, #e11d24 100%);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(225, 29, 36, 0.55);
}

.btn-hero-call-orange:active {
  transform: translateY(0);
}

/* City Hero Quote Calculator Card - Modern Redesign */
.city-hero-quote-card {
  position: relative;
  z-index: 3;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.city-quote-header {
  background: linear-gradient(135deg, #0b1329 0%, #1e293b 100%);
  padding: 18px 22px;
  border-bottom: 3px solid #e11d24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.city-q-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.city-q-icon-wrap {
  width: 38px;
  height: 38px;
  background: rgba(225, 29, 36, 0.18);
  border: 1px solid rgba(225, 29, 36, 0.35);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.city-q-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.city-q-subtitle {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  display: block;
  margin-top: 2px;
}

.city-q-offer-badge {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(225, 29, 36, 0.2) 100%);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ff7755;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.city-quote-body {
  padding: 24px 22px;
  background: #ffffff;
}

.city-form-label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.city-input-group {
  position: relative;
}

.city-form-control {
  width: 100%;
  padding: 10.5px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  transition: all 0.25s ease;
}

.city-form-control::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.city-form-control:focus {
  outline: none;
  border-color: #e11d24;
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(225, 29, 36, 0.15);
}

.city-select-group {
  position: relative;
}

.city-form-select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  appearance: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.city-form-select:focus {
  outline: none;
  border-color: #e11d24;
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(225, 29, 36, 0.15);
}

.city-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #e11d24;
  font-size: 13px;
  font-weight: bold;
}

.city-quote-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 13.5px 20px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 24px -4px rgba(225, 29, 36, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 4px;
  margin-bottom: 12px;
}

.city-quote-submit-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #c01017 0%, #e11d24 100%);
  box-shadow: 0 12px 28px -4px rgba(225, 29, 36, 0.55);
  color: #ffffff;
}

.city-quote-submit-btn:active {
  transform: translateY(0);
}

.city-quote-trust-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
  text-align: center;
}

.city-trust-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.city-trust-divider {
  color: #cbd5e1;
  font-size: 12px;
}

/* Moving Process Steps */
.city-process-step {
  text-align: center;
  padding: 24px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  position: relative;
  height: 100%;
  transition: transform 0.24s ease, border-color 0.24s ease;
}

.city-process-step:hover {
  transform: translateY(-4px);
  border-color: #e11d24;
}

.city-step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e11d24;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.35);
}

/* Nearby Cities Quick Jump Section */
.city-nearby-section {
  padding: 48px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.city-nearby-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.city-nearby-pill:hover {
  background: #ffffff;
  color: #e11d24 !important;
  border-color: #e11d24;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(225, 29, 36, 0.15);
}

.city-nearby-pill:hover i {
  color: #e11d24 !important;
}

/* ==========================================================================
   CITY ABOUT / IN-DEPTH CONTENT SECTION & STICKY SIDEBAR
   ========================================================================== */
.city-about-section {
  position: relative;
  background-color: #faf6f0;
  padding: 72px 0 80px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.city-about-header {
  max-width: 840px;
  margin: 0 auto 44px auto;
}

.city-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 50px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #991b1b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(225, 29, 36, 0.08);
}

.city-about-main-title {
  font-size: 2.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.city-title-divider {
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, #e11d24, #ff4d4f);
  border-radius: 2px;
  margin: 16px auto 0;
}

.city-about-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.city-about-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.city-about-card-body {
  padding: 34px 38px;
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
}

/* 1. Overview Card */
.city-overview-card {
  border-top: 4px solid #e11d24;
}

.city-overview-card p:first-of-type {
  font-size: 16px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.8;
  margin-bottom: 20px;
}

.city-overview-card p {
  margin-bottom: 16px;
}

.city-overview-card p:last-of-type {
  margin-bottom: 0;
}

/* 2. Process / Family Move Card */
.city-process-card {
  border-top: 4px solid #0284c7;
}

.city-process-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-process-card h3::before {
  content: "\F421";
  font-family: "bootstrap-icons";
  color: #0284c7;
  font-size: 1.25rem;
}

.city-process-card p {
  margin-bottom: 14px;
}

.city-process-card p:last-of-type {
  margin-bottom: 0;
  font-weight: 600;
  color: #0369a1;
  font-style: italic;
}

/* 3. Questions Card */
.city-questions-card {
  border-top: 4px solid #f59e0b;
}

.city-questions-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-questions-card h3::before {
  content: "\F4DF";
  font-family: "bootstrap-icons";
  color: #f59e0b;
  font-size: 1.25rem;
}

.city-questions-card p {
  margin-bottom: 14px;
}

.city-questions-card p:last-of-type {
  margin-bottom: 0;
  font-weight: 600;
  color: #b45309;
}

/* 4. Estimate CTA Card */
.city-estimate-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  color: #ffffff;
}

.city-estimate-card-inner {
  padding: 32px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.city-estimate-content {
  flex: 1 1 360px;
}

.city-estimate-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.city-estimate-content p {
  font-size: 15px;
  color: #cbd5e1;
  margin-bottom: 0;
  line-height: 1.6;
}

.city-estimate-action {
  flex-shrink: 0;
}

.btn-city-estimate-call {
  background: linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.4);
  border: none;
}

.btn-city-estimate-call:hover {
  background: #991b1b;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(225, 29, 36, 0.5);
}

/* Sticky Sidebar Widget */
.city-sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 96px;
}

.city-sidebar-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.city-sidebar-helpline {
  background: linear-gradient(145deg, #0f172a 0%, #1a2744 100%);
  border: 1px solid #334155;
  padding: 28px 24px;
  text-align: center;
  color: #ffffff;
}

.city-sidebar-icon-wrap {
  margin-bottom: 16px;
}

.city-sidebar-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.45);
}

.city-sidebar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.city-sidebar-text {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 20px;
}

.btn-city-sidebar-call {
  background: linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%);
  color: #ffffff !important;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.35);
  border: none;
}

.btn-city-sidebar-call:hover {
  background: #991b1b;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(225, 29, 36, 0.45);
}

.btn-city-sidebar-quote {
  background: transparent;
  color: #cbd5e1;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  width: 100%;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-city-sidebar-quote:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.city-sidebar-trust {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 24px;
}

.city-sidebar-trust-heading {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0f172a;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.city-sidebar-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.city-sidebar-trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.city-sidebar-trust-list li i {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.city-sidebar-trust-list li strong {
  display: block;
  font-size: 13.5px;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.3;
}

.city-sidebar-trust-list li span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .city-sidebar-sticky {
    position: static;
    margin-top: 24px;
  }
}

@media (max-width: 767px) {
  .city-about-section {
    padding: 48px 0 56px 0;
  }

  .city-about-main-title {
    font-size: 1.55rem;
  }

  .city-about-card-body {
    padding: 24px 20px;
  }

  .city-estimate-card-inner {
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-city-estimate-call {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   CITY REVIEWS SECTION (Swipeable Customer Testimonials Slider)
   ========================================================================== */
.city-reviews-section {
  position: relative;
  background-color: #fdfaf6;
  padding: 64px 0 72px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
  overflow: hidden;
}

.city-reviews-header {
  max-width: 780px;
  margin: 0 auto 36px auto;
}

.city-reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 50px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #991b1b;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(225, 29, 36, 0.08);
}

.city-reviews-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 10px;
}

.city-reviews-subtitle {
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 16px;
}

.city-reviews-trust-strip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  padding: 6px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.trust-pill-google {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

.google-g-icon {
  display: inline-flex;
  align-items: center;
}

.google-score {
  color: #0f172a;
  font-weight: 800;
}

.google-stars {
  color: #fbbf24;
  font-size: 10.5px;
  display: inline-flex;
  gap: 1px;
}

.google-count {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 600;
}

.trust-divider {
  color: #cbd5e1;
}

.trust-pill-iba {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  display: inline-flex;
  align-items: center;
}

/* Carousel Container & Viewport */
.city-reviews-carousel-wrapper {
  position: relative;
  padding: 0 10px;
}

.city-reviews-viewport {
  overflow: hidden;
  width: 100%;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  padding: 8px 4px 14px 4px;
}

.city-reviews-viewport:active {
  cursor: grabbing;
}

.city-reviews-track {
  display: flex;
  gap: 20px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Slide Cards (3 per row on Desktop, 2 on Tablet, 1 on Mobile) */
.city-review-slide-card {
  flex: 0 0 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
  box-sizing: border-box;
  display: flex;
}

.city-review-card-inner {
  background: #ffffff;
  border: 1.5px solid #ebdccb;
  border-radius: 18px;
  padding: 22px 20px 18px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
}

.city-review-card-inner:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 14px 32px -4px rgba(225, 29, 36, 0.15), 0 4px 10px rgba(0, 0, 0, 0.04);
}

/* Card Header */
.city-rev-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.city-rev-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.city-rev-meta {
  flex-grow: 1;
  min-width: 0;
}

.city-rev-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.city-rev-name {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.city-rev-verified {
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #f0fdf4;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #dcfce7;
}

.city-rev-route {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.city-rev-stars {
  color: #fbbf24;
  font-size: 11px;
  display: inline-flex;
  gap: 1.5px;
  flex-shrink: 0;
}

/* Service Tag */
.city-rev-service-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  color: #991b1b;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* Quote Body */
.city-rev-body {
  position: relative;
  flex-grow: 1;
  margin-bottom: 14px;
}

.city-rev-quote-icon {
  font-size: 22px;
  color: #e11d24;
  opacity: 0.25;
  position: absolute;
  top: -8px;
  left: -2px;
  line-height: 1;
}

.city-rev-quote-text {
  font-size: 13px;
  line-height: 1.55;
  color: #334155;
  margin: 0;
  padding-left: 20px;
  position: relative;
  z-index: 1;
}

/* Card Footer */
.city-rev-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed #f1e4d3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: #475569;
  font-weight: 600;
}

.city-rev-badge-pill {
  color: #9a3412;
  font-weight: 700;
  font-size: 11px;
  background: rgba(225, 29, 36, 0.08);
  padding: 2px 8px;
  border-radius: 50px;
}

/* Arrows Navigation */
.btn-city-rev-arrow {
  position: absolute;
  top: calc(50% - 10px);
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #ebdccb;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-city-rev-prev {
  left: -18px;
}

.btn-city-rev-next {
  right: -18px;
}

.btn-city-rev-arrow:hover {
  background: #e11d24;
  color: #ffffff;
  border-color: #e11d24;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 20px rgba(225, 29, 36, 0.35);
}

/* Dots Pagination */
.city-reviews-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 24px;
}

.city-rev-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.city-rev-dot.active {
  width: 26px;
  border-radius: 50px;
  background: #e11d24;
  box-shadow: 0 2px 8px rgba(225, 29, 36, 0.4);
}

/* Bottom CTA */
.btn-city-all-reviews {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 50px;
  background: #ffffff;
  border: 1.5px solid #e11d24;
  color: #991b1b;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s ease;
  box-shadow: 0 3px 10px rgba(225, 29, 36, 0.1);
}

.btn-city-all-reviews:hover {
  background: #e11d24;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(225, 29, 36, 0.3);
}

/* Responsive Breakpoints for Reviews */
@media (max-width: 991px) {
  .city-reviews-section {
    padding: 50px 0 56px 0;
  }

  .city-review-slide-card {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }

  .btn-city-rev-prev {
    left: -8px;
  }

  .btn-city-rev-next {
    right: -8px;
  }
}

@media (max-width: 767px) {
  .city-reviews-section {
    padding: 42px 0 48px 0;
  }

  .city-review-slide-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .btn-city-rev-arrow {
    display: none !important;
    /* On mobile, touch swipe is the primary intuitive gesture */
  }

  .city-review-card-inner {
    padding: 18px 16px 14px 16px;
  }

  .city-rev-quote-text {
    font-size: 12.5px;
  }
}

/* ==========================================================================
   GLOBAL QUICK QUOTE MODAL (#qteModal) - SHIPMENT MANIFEST CARD REDESIGN
   ========================================================================== */

/* Modal Dialog & Smooth Scale-In Entrance (0.95 -> 1 with fade) for Quote & Review Modals */
#qteModal .modal-dialog,
#reviewModal .modal-dialog {
  max-width: 510px;
  margin: 1.75rem auto;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-out;
}

#qteModal.show .modal-dialog,
#reviewModal.show .modal-dialog {
  transform: scale(1);
  opacity: 1;
}

/* Continuous Manifest Card (Off-White Background, Thin Soft Orange Border, Layered Shadow) */
#qteModal .modal-content.manifest-card,
#reviewModal .modal-content.manifest-card {
  background: #fafbfd;
  border: 1px solid rgba(225, 29, 36, 0.22);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(11, 19, 41, 0.32), 0 8px 24px -4px rgba(11, 19, 41, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8);
  position: relative;
}

/* Top Slim Brand Strip */
.manifest-top-strip {
  background: linear-gradient(135deg, #991b1b 0%, #e11d24 50%, #ff4d4f 100%);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.manifest-title-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.manifest-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(225, 29, 36, 0.2);
  border: 1px solid rgba(225, 29, 36, 0.4);
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.manifest-title-text {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.btn-manifest-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.btn-manifest-close:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: #ef4444;
  color: #ffffff;
  transform: rotate(90deg);
}

.btn-manifest-close:focus-visible {
  outline: 2px solid #e11d24;
  outline-offset: 2px;
}

/* Manifest Card Body */
.manifest-card-body {
  padding: 18px 22px 14px 22px;
  background: #fafbfd;
}

/* Subtitle & Tear-Off Perforation Line */
.manifest-subtitle {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  text-align: center;
  margin: 0 0 10px 0;
}

.manifest-perforation-line {
  border-bottom: 2px dashed #cbd5e1;
  margin-bottom: 15px;
  position: relative;
  opacity: 0.85;
}

/* Segmented Control Tabs with Sliding Orange Indicator */
.manifest-tab-dock {
  display: flex;
  position: relative;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}

.manifest-tab-glide {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(225, 29, 36, 0.35);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  pointer-events: none;
}

.btn-manifest-tab {
  flex: 1;
  position: relative;
  z-index: 2;
  border: none;
  background: transparent;
  padding: 7px 6px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.btn-manifest-tab .manifest-tab-icon {
  font-size: 13px;
  color: #e11d24;
  transition: color 0.2s ease;
}

.btn-manifest-tab.active {
  color: #ffffff;
}

.btn-manifest-tab.active .manifest-tab-icon {
  color: #ffffff;
}

.btn-manifest-tab:focus-visible {
  outline: 2px solid #e11d24;
  outline-offset: -2px;
}

/* Field Groups & Tinted Rounded-Square Badges */
.manifest-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.manifest-field-icon-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.manifest-icon-gray {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.manifest-icon-orange {
  background: rgba(225, 29, 36, 0.12);
  color: #e11d24;
}

.manifest-icon-green {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.manifest-input-wrap {
  position: relative;
}

.manifest-form-control {
  width: 100%;
  height: 44px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline: none;
}

.manifest-form-control:focus {
  background: #ffffff;
  border-color: #e11d24;
  box-shadow: 0 0 0 3px rgba(225, 29, 36, 0.18);
}

.manifest-form-control:focus-visible {
  outline: none;
}

/* Select Dropdown */
.manifest-select-wrap {
  position: relative;
}

.manifest-form-select {
  width: 100%;
  height: 44px;
  padding: 9px 34px 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.manifest-form-select:focus {
  border-color: #e11d24;
  box-shadow: 0 0 0 3px rgba(225, 29, 36, 0.18);
}

.manifest-select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 12px;
  pointer-events: none;
}

/* Submit CTA Button with Rich Gradient & Hover Sweep */
.btn-manifest-submit {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 50%, #991b1b 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px -4px rgba(225, 29, 36, 0.45);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 4px;
}

.btn-manifest-submit:hover {
  background: linear-gradient(135deg, #e11d24 0%, #c01017 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(225, 29, 36, 0.55);
}

.btn-manifest-submit:hover .btn-manifest-arrow {
  transform: translateX(4px);
}

.btn-manifest-arrow {
  transition: transform 0.2s ease;
  font-size: 15px;
}

.btn-manifest-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.btn-manifest-submit:hover .btn-manifest-shine {
  left: 140%;
}

.btn-manifest-submit:active {
  transform: translateY(0);
}

.btn-manifest-submit:focus-visible {
  outline: 2px solid #091224;
  outline-offset: 2px;
}

/* Trust Row with Tinted Icon Circles & Thin Dividers */
.manifest-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(226, 232, 240, 0.85);
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
  flex-wrap: wrap;
}

.manifest-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.trust-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.trust-circle.c-green {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.trust-circle.c-orange {
  background: rgba(225, 29, 36, 0.15);
  color: #e11d24;
}

.trust-circle.c-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.manifest-trust-divider {
  color: #cbd5e1;
  font-size: 11px;
}

/* Decorative Ticket Stub Bottom Perforation */
.manifest-bottom-stub {
  height: 8px;
  background: repeating-linear-gradient(90deg, #e2e8f0 0, #e2e8f0 6px, transparent 6px, transparent 12px);
  margin-top: 12px;
  opacity: 0.6;
}

/* Textarea & Star Rating Preview */
.manifest-textarea {
  width: 100%;
  height: 80px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  resize: vertical;
  min-height: 60px;
  max-height: 160px;
}

.manifest-textarea:focus {
  border-color: #e11d24;
  box-shadow: 0 0 0 3px rgba(225, 29, 36, 0.18);
}

.manifest-rating-stars-preview {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12.5px;
  color: #f59e0b;
}

.btn-manifest-submit.btn-submitted-state {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  box-shadow: 0 8px 24px -4px rgba(22, 163, 74, 0.45) !important;
}



/* --------------------------------------------------------------------------
   TRACKING PAGE: TELEMETRY MANIFEST & FLEET TRACKING SYSTEM
   -------------------------------------------------------------------------- */

/* 1. Hero Search Section (Home Page Canvas Background) */
.tracking-search-hero-section {
  background-color: var(--bg-canvas, #fbf9f5);
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle, #e4e2de);
}

.tracking-light-mode {
  background-color: var(--bg-canvas, #fbf9f5);
}

.tracking-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-white, #ffffff);
  border: 1px solid var(--border-subtle, #e4e2de);
  box-shadow: 0 2px 6px rgba(22, 35, 59, 0.05);
  color: var(--text-primary, #16233b);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.tracking-pill-badge.tracking-pill-light {
  background: var(--surface-white, #ffffff);
  border: 1px solid var(--border-subtle, #e4e2de);
  color: var(--text-primary, #16233b);
}

.tracking-hero-title {
  font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--text-primary, #16233b);
}

.tracking-hero-subtitle {
  font-size: clamp(14px, 1.1vw, 16px);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
  color: var(--text-muted, #44474e);
}

/* 2. Main Tracking Docket Search Card */
.tracking-docket-card {
  background: var(--surface-white, #ffffff);
  border: 1px solid rgba(225, 29, 36, 0.28);
  border-radius: 18px;
  box-shadow: 0 18px 45px -10px rgba(22, 35, 59, 0.09), 0 0 0 1px rgba(22, 35, 59, 0.03);
  overflow: hidden;
  margin-top: 24px;
}

.tracking-card-header-strip {
  background: var(--primary, #16233b);
  padding: 11px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(225, 29, 36, 0.25);
}

.tracking-strip-icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(225, 29, 36, 0.2);
  color: var(--secondary, #e11d24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.tracking-strip-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f1f5f9;
}

.tracking-strip-secure {
  font-size: 11px;
  font-weight: 600;
  color: var(--on-primary-container, #b6c7ec);
}

.tracking-card-body {
  padding: 26px 28px 22px;
  background-color: var(--surface-white, #ffffff);
}

.tracking-input-group-wrap {
  display: flex;
  align-items: center;
  background: var(--surface-white, #ffffff);
  border: 2px solid var(--border-subtle, #e4e2de);
  border-radius: 14px;
  padding: 5px 6px 5px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.tracking-input-group-wrap:focus-within {
  border-color: var(--secondary, #e11d24);
  box-shadow: 0 0 0 4px rgba(225, 29, 36, 0.15);
}

.tracking-input-icon-left {
  font-size: 20px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  color: var(--secondary, #e11d24);
}

.tracking-query-input {
  flex-grow: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #16233b);
  padding: 8px 0;
  letter-spacing: 0.01em;
}

.tracking-query-input::placeholder {
  color: var(--text-light, #94a3b8);
  font-weight: 500;
}

.tracking-clear-btn {
  background: none;
  border: none;
  color: var(--text-light, #94a3b8);
  font-size: 18px;
  padding: 0 10px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.tracking-clear-btn:hover {
  color: var(--text-primary, #16233b);
}

.tracking-submit-btn {
  background: var(--secondary-gradient, linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%));
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-orange, 0 6px 18px rgba(225, 29, 36, 0.28));
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tracking-submit-btn:hover {
  background: var(--secondary-gradient-hover, linear-gradient(135deg, #c01017 0%, #e11d24 100%));
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(225, 29, 36, 0.45);
}

.tracking-submit-btn:active {
  transform: scale(0.98);
}

.tracking-btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.tracking-submit-btn:hover .tracking-btn-shine {
  left: 150%;
}

/* Quick Demo Docket Chips */
.tracking-quick-chips-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.quick-chips-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #44474e);
}

.quick-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-tracking-chip {
  background: var(--surface-low, #f5f3ef);
  border: 1px solid var(--border-subtle, #e4e2de);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-primary, #16233b);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-tracking-chip:hover,
.btn-tracking-chip.active {
  background: var(--surface-white, #ffffff);
  border-color: var(--secondary, #e11d24);
  color: var(--secondary, #e11d24);
  box-shadow: 0 3px 10px rgba(225, 29, 36, 0.15);
  transform: translateY(-1px);
}

.btn-tracking-chip .chip-code {
  font-weight: 800;
  font-family: monospace;
  letter-spacing: 0.02em;
}

.chip-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.chip-status-dot.dot-transit {
  background-color: #0284c7;
}

.chip-status-dot.dot-out {
  background-color: #16a34a;
}

.chip-status-dot.dot-booked {
  background-color: #eab308;
}

/* Trust Features Row */
.tracking-card-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, #e4e2de);
  font-size: 12px;
  color: var(--text-muted, #44474e);
  font-weight: 600;
}

.tracking-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tracking-trust-divider {
  color: var(--border-card, #d7d9e0);
}

/* 3. Live Telemetry & Results Section */
.tracking-results-section {
  padding: 56px 0 64px;
  background-color: var(--bg-canvas, #fbf9f5);
  border-bottom: 1px solid var(--border-subtle, #e4e2de);
}

.tracking-manifest-result-card {
  background: var(--surface-white, #ffffff);
  border: 1px solid rgba(225, 29, 36, 0.28);
  border-radius: 16px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(22, 35, 59, 0.08));
  overflow: hidden;
}

.manifest-top-meta {
  background: var(--primary, #16233b);
  color: #ffffff;
  padding: 24px 28px;
  border-bottom: 2px solid var(--secondary, #e11d24);
}

.manifest-docket-badge,
.manifest-lr-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: monospace;
  letter-spacing: 0.03em;
}

.btn-copy-docket {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-copy-docket:hover {
  background: rgba(225, 29, 36, 0.4);
}

.manifest-route-heading {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 800;
  color: #ffffff;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.route-arrow-icon {
  color: var(--secondary, #e11d24);
  font-size: 1.1rem;
}

.manifest-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.manifest-status-pill.status-in-transit {
  background: rgba(2, 132, 199, 0.2);
  border: 1px solid #0284c7;
  color: #38bdf8;
}

.manifest-status-pill.status-out-delivery {
  background: rgba(22, 163, 74, 0.2);
  border: 1px solid #16a34a;
  color: #4ade80;
}

.manifest-status-pill.status-booked {
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid #eab308;
  color: #fde047;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pulseLed 1.8s infinite;
}

@keyframes pulseLed {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.manifest-updated-time {
  font-size: 12px;
  color: var(--on-primary-container, #b6c7ec);
}

/* Manifest Details Grid */
.manifest-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 22px 28px;
  background: var(--surface-low, #f5f3ef);
  border-bottom: 1px solid var(--border-subtle, #e4e2de);
}

.manifest-detail-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #75777e);
}

.detail-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #16233b);
}

/* 4-Stage Visual Milestone Stepper */
.manifest-stepper-wrap {
  padding: 28px;
  background: var(--surface-white, #ffffff);
  border-bottom: 1px solid var(--border-subtle, #e4e2de);
}

.stepper-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.stepper-track-container {
  position: relative;
  padding: 10px 0;
}

.stepper-track-bg {
  position: absolute;
  top: 30px;
  left: 5%;
  right: 5%;
  height: 6px;
  background-color: var(--border-subtle, #e4e2de);
  border-radius: 9999px;
  z-index: 1;
}

.stepper-track-fill {
  height: 100%;
  background: var(--secondary-gradient, linear-gradient(90deg, #e11d24 0%, #ff4d4f 100%));
  border-radius: 9999px;
  transition: width 0.6s ease;
}

.stepper-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 2;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-white, #ffffff);
  border: 3px solid var(--border-card, #d7d9e0);
  color: var(--text-secondary, #75777e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.stepper-step.is-completed .step-circle {
  background: var(--secondary, #e11d24);
  border-color: var(--secondary, #e11d24);
  color: #ffffff;
}

.stepper-step.is-active .step-circle {
  box-shadow: 0 0 0 6px rgba(225, 29, 36, 0.22);
  transform: scale(1.08);
}

.step-info {
  margin-top: 10px;
}

.step-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary, #16233b);
}

.step-meta {
  font-size: 11.5px;
  color: var(--text-muted, #44474e);
  margin-top: 2px;
}

/* Live Telemetry KPI Cards */
.manifest-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 24px 28px;
  background: var(--surface-low, #f5f3ef);
  border-bottom: 1px solid var(--border-subtle, #e4e2de);
}

.telemetry-kpi-card {
  background: var(--surface-white, #ffffff);
  border: 1px solid var(--border-card, #d7d9e0);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

.kpi-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.bg-orange-soft {
  background-color: rgba(225, 29, 36, 0.12);
}

.bg-primary-soft {
  background-color: rgba(22, 35, 59, 0.08);
}

.bg-success-soft {
  background-color: rgba(22, 163, 74, 0.12);
}

.bg-warning-soft {
  background-color: rgba(245, 158, 11, 0.12);
}

.kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #75777e);
  display: block;
}

.kpi-value {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-primary, #16233b);
  margin-top: 2px;
}

.kpi-subtext {
  font-size: 11.5px;
  color: var(--text-muted, #44474e);
  margin-top: 2px;
  display: block;
}

/* Activity Checkpoint Timeline Log Table */
.manifest-checkpoint-log-wrap {
  padding: 24px 28px;
  background: var(--surface-white, #ffffff);
}

.checkpoint-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-print-manifest {
  background: var(--surface-low, #f5f3ef);
  border: 1px solid var(--border-card, #d7d9e0);
  color: var(--text-primary, #16233b);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-print-manifest:hover {
  background: var(--secondary, #e11d24);
  border-color: var(--secondary, #e11d24);
  color: #ffffff;
}

.checkpoint-table thead {
  background-color: var(--surface-low, #f5f3ef);
}

.checkpoint-table th {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary, #16233b);
  border-bottom: 2px solid var(--border-subtle, #e4e2de);
  padding: 12px 14px;
}

.checkpoint-table td {
  padding: 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border-subtle, #e4e2de);
  color: var(--text-primary, #16233b);
}

/* 4. Why Keshav Fleet Tracking Section */
.tracking-features-section {
  padding: 72px 0;
  background-color: var(--surface-white);
}

.tracking-feature-card {
  background-color: var(--surface-low);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tracking-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(225, 29, 36, 0.4);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08);
}

.feature-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}

.feature-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.feature-card-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 16px;
}

.feature-card-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
}

/* 5. 3-Step Guide Section */
.tracking-guide-section {
  padding: 64px 0;
  background-color: var(--surface-low);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.guide-wrapper-box {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.guide-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: #e11d24;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 8px;
}

.guide-main-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 12px;
}

.guide-main-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

.guide-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}

.guide-step-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  position: relative;
  transition: border-color 0.15s ease;
}

.guide-step-card:hover {
  border-color: #e11d24;
}

.guide-step-number {
  font-size: 24px;
  font-weight: 900;
  color: #e11d24;
  opacity: 0.85;
  margin-bottom: 10px;
}

.guide-step-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.guide-step-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 0;
}

/* 6. Tracking FAQs Accordion */
.tracking-faq-section {
  padding: 72px 0;
  background-color: var(--surface-white);
}

.tracking-accordion .tracking-faq-item {
  border: 1px solid var(--border-card);
  border-radius: 12px !important;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.tracking-accordion .accordion-button {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  background-color: var(--surface-white);
  padding: 16px 20px;
  box-shadow: none !important;
}

.tracking-accordion .accordion-button:not(.collapsed) {
  background-color: rgba(225, 29, 36, 0.06);
  color: #e11d24;
}

.tracking-accordion .accordion-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  padding: 16px 20px;
  background-color: #ffffff;
}

/* 7. Dispatch Helpline CTA Band */
.tracking-cta-band {
  padding: 0 0 64px;
  background-color: var(--surface-white);
}

.tracking-cta-card {
  background: linear-gradient(135deg, #091224 0%, #17243c 100%);
  border: 1px solid rgba(225, 29, 36, 0.35);
  border-radius: 18px;
  padding: 36px 40px;
  box-shadow: 0 20px 40px -10px rgba(9, 18, 36, 0.5);
}

.cta-mini-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cta-heading {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.3;
}

.cta-desc {
  font-size: 14px;
  line-height: 1.6;
}

.btn-cta-phone {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #ff4d4f 0%, #e11d24 100%);
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.4);
  transition: all 0.18s ease;
}

.btn-cta-phone:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(225, 29, 36, 0.55);
  color: #ffffff;
}

.btn-cta-phone-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

.btn-cta-phone-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Mobile Responsiveness for Tracking */
@media (max-width: 768px) {
  .tracking-input-group-wrap {
    flex-direction: column;
    padding: 12px;
    gap: 10px;
    height: auto;
  }

  .tracking-input-icon-left {
    display: none;
  }

  .tracking-query-input {
    width: 100%;
    text-align: center;
  }

  .tracking-submit-btn {
    width: 100%;
    justify-content: center;
  }

  .stepper-steps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stepper-track-bg {
    display: none;
  }

  .stepper-step {
    flex-direction: row;
    text-align: left;
    gap: 14px;
  }

  .step-info {
    margin-top: 0;
  }

  .manifest-top-meta {
    padding: 18px;
  }

  .manifest-details-grid {
    padding: 14px 12px;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }

  .manifest-kpi-grid {
    padding: 16px;
    grid-template-columns: 1fr;
  }

  .manifest-stepper-wrap {
    padding: 18px;
  }

  .manifest-checkpoint-log-wrap {
    padding: 18px;
  }

  .guide-wrapper-box {
    padding: 24px;
  }

  .tracking-cta-card {
    padding: 26px 20px;
  }
}



/* ==========================================================================
   CONTACT PAGE — Full Redesign Styles
   Uses: --primary (#16233b navy), --secondary (#e11d24 orange), --bg-canvas
   ========================================================================== */

/* Channel Cards */
.cp-channels-section {
  padding: 72px 0 56px;
  background: var(--bg-canvas);
}

.cp-section-intro {
  margin-bottom: 48px;
}

.cp-section-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
  margin: 12px 0 10px;
}

.cp-section-lead {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

.cp-channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .cp-channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .cp-channel-card {
    padding: 14px 10px;
    border-radius: 14px;
    gap: 6px;
  }

  .cp-channel-icon-wrap {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
    border-radius: 10px;
    margin-bottom: 2px;
  }

  .cp-channel-label {
    font-size: .65rem;
  }

  .cp-channel-value {
    font-size: .85rem;
    line-height: 1.25;
  }

  .cp-channel-desc {
    font-size: .72rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
  }

  .cp-channel-btn {
    width: 100%;
    justify-content: center;
    padding: 6px 8px;
    font-size: .72rem;
    border-radius: 20px;
  }
}

.cp-channel-card {
  background: var(--surface-white);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}

.cp-channel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.cp-channel-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.cp-icon-orange {
  background: rgba(225, 29, 36, .10);
  color: #e11d24;
}

.cp-icon-green {
  background: rgba(22, 163, 74, .10);
  color: #16a34a;
}

.cp-icon-navy {
  background: rgba(22, 35, 59, .08);
  color: #16233b;
}

.cp-icon-amber {
  background: rgba(245, 158, 11, .12);
  color: #d97706;
}

.cp-channel-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cp-channel-value {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.3;
  word-break: break-word;
}

.cp-channel-desc {
  font-size: .825rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
  margin: 0;
}

.cp-channel-btn {
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 50px;
  text-decoration: none;
  transition: opacity .18s, transform .18s;
  margin-top: 4px;
}

.cp-channel-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.cp-btn-orange {
  background: rgba(225, 29, 36, .12);
  color: #e11d24;
}

.cp-btn-green {
  background: rgba(22, 163, 74, .10);
  color: #16a34a;
}

.cp-btn-navy {
  background: rgba(22, 35, 59, .08);
  color: #16233b;
}

.cp-btn-amber {
  background: rgba(245, 158, 11, .10);
  color: #b45309;
}

/* Form Section */
.cp-form-section {
  padding: 0 0 72px;
  background: var(--bg-canvas);
}

.cp-form-card {
  background: var(--surface-white);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.cp-form-card-header {
  background: var(--primary);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cp-form-header-icon-badge {
  width: 44px;
  height: 44px;
  background: rgba(225, 29, 36, .25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e11d24;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.cp-form-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.cp-form-card-sub {
  font-size: .775rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px;
}

.cp-form-body {
  padding: 32px 28px;
}

.cp-form-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.3;
  margin-bottom: 8px;
}

.cp-form-lead {
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.cp-field-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  letter-spacing: .02em;
}

.cp-input-wrap {
  position: relative;
}

.cp-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: .95rem;
  pointer-events: none;
  z-index: 1;
}

.cp-input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border: 1.5px solid var(--border-card);
  border-radius: 10px;
  background: var(--surface-white);
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--text-primary);
  transition: border-color .18s, box-shadow .18s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.cp-input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(225, 29, 36, .12);
}

.cp-input::placeholder {
  color: var(--text-light);
}

.cp-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2375777e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.cp-textarea {
  padding-top: 12px;
  resize: vertical;
  min-height: 110px;
}

.cp-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 24px;
  background: var(--secondary-gradient);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s, transform .18s, box-shadow .18s;
  box-shadow: var(--shadow-orange);
  gap: 6px;
  letter-spacing: .01em;
}

.cp-submit-btn:hover {
  background: var(--secondary-gradient-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(225, 29, 36, .36);
}

.cp-submit-arrow {
  transition: transform .2s ease;
}

.cp-submit-btn:hover .cp-submit-arrow {
  transform: translateX(4px);
}

.cp-form-privacy-note {
  text-align: center;
  font-size: .775rem;
  color: var(--text-secondary);
  margin-top: 10px;
  margin-bottom: 0;
}

/* Sidebar */
.cp-sidebar-card {
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.cp-sidebar-light {
  background: var(--surface-white);
  border: 1px solid var(--border-subtle);
}

.cp-sidebar-navy {
  background: var(--primary);
  border: 1px solid rgba(255, 255, 255, .06);
}

.cp-sidebar-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.cp-sidebar-icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.cp-sib-amber {
  background: rgba(245, 158, 11, .15);
  color: #d97706;
}

.cp-sib-orange {
  background: rgba(225, 29, 36, .22);
  color: #e11d24;
}

.cp-sidebar-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}

.cp-sidebar-card-sub {
  font-size: .775rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.cp-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.cp-checklist li i {
  margin-top: 2px;
  flex-shrink: 0;
}

.cp-sidebar-navy-lead {
  font-size: .845rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 20px;
}

.cp-hours-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 14px 18px;
}

.cp-hours-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.cp-hours-item i {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.cp-hours-label {
  font-size: .7rem;
  color: rgba(255, 255, 255, .45);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cp-hours-val {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
}

.cp-hours-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, .12);
  flex-shrink: 0;
}

.cp-sidebar-call-btn,
.cp-sidebar-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 18px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s, opacity .18s;
  gap: 6px;
}

.cp-sidebar-call-btn:hover,
.cp-sidebar-wa-btn:hover {
  transform: translateY(-2px);
  opacity: .92;
}

.cp-sidebar-call-btn {
  background: var(--secondary-gradient);
  color: #fff;
  box-shadow: var(--shadow-orange);
  margin-bottom: 12px;
}

.cp-sidebar-wa-btn {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .18);
}

.cp-sidebar-wa-btn i {
  color: #4ade80;
}

/* Map */
.cp-map-section {
  padding: 0 0 72px;
  background: var(--bg-canvas);
}

.cp-map-header {
  margin-bottom: 28px;
}

.cp-map-title {
  font-family: var(--font-heading);
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  font-weight: 600;
  color: var(--text-muted);
  margin: 8px 0 0;
}

.cp-map-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

.cp-map-wrapper iframe {
  display: block;
}

.cp-map-overlay-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  background: var(--primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-md);
}

/* Responsive */
@media (max-width: 767px) {
  .cp-channels-section {
    padding: 52px 0 40px;
  }

  .cp-form-section {
    padding: 0 0 52px;
  }

  .cp-map-section {
    padding: 0 0 52px;
  }

  .cp-sidebar-card {
    padding: 22px 20px;
  }

  .cp-form-body {
    padding: 24px 20px;
  }

  .cp-form-card-header {
    padding: 18px 20px;
  }
}

/* --------------------------------------------------------------------------
   MODERN MOBILE NAVIGATION DRAWER (#mobileNavDrawer)
   -------------------------------------------------------------------------- */
.modern-mobile-drawer.offcanvas-start {
  width: 320px;
  max-width: 86vw;
  background: #ffffff;
  border-right: 1px solid rgba(22, 35, 59, 0.1);
  box-shadow: 15px 0 45px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  z-index: 1060;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header */
.mob-drawer-header {
  background: linear-gradient(135deg, #16233b 0%, #0f172a 100%);
  padding: 16px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(225, 29, 36, 0.5);
  position: relative;
}

.mob-drawer-brand-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mob-drawer-brand {
  display: inline-block;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  width: fit-content;
}

.mob-drawer-logo {
  height: 64px;
  width: auto;
  min-width: 64px;
  max-width: 220px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.mob-drawer-tagline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}

.mob-badge-iba {
  color: #e11d24;
  font-weight: 800;
}

.mob-tagline-dot {
  color: rgba(255, 255, 255, 0.4);
}

.mob-badge-iso {
  color: rgba(255, 255, 255, 0.75);
}

/* Close Button */
.mob-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.mob-drawer-close:hover,
.mob-drawer-close:focus {
  background: #e11d24;
  border-color: #e11d24;
  color: #ffffff;
  transform: rotate(90deg);
}

/* Status Strip */
.mob-drawer-status-strip {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.mob-status-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mob-pulse-dot {
  width: 7px;
  height: 7px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: mobPulse 1.8s infinite;
}

@keyframes mobPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Body Scrollable Area */
.mob-drawer-body {
  padding: 12px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.mob-drawer-body::-webkit-scrollbar {
  width: 4px;
}

.mob-drawer-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Nav Menu List */
.mob-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.mob-nav-item {
  position: relative;
}

/* Nav Link */
.mob-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  color: #1e293b;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mob-nav-link:hover,
.mob-nav-link:focus {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #e11d24;
  transform: translateX(3px);
}

.mob-nav-link.active {
  background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 100%);
  border-color: #fdba74;
  border-left: 3px solid #e11d24;
  color: #991b1b;
  box-shadow: 0 2px 8px rgba(225, 29, 36, 0.12);
}

.mob-nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #16233b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.mob-nav-link:hover .mob-nav-icon,
.mob-nav-link.active .mob-nav-icon {
  background: #e11d24;
  color: #ffffff;
}

.mob-nav-text {
  flex: 1;
}

.mob-nav-arrow {
  font-size: 11px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.mob-nav-link:hover .mob-nav-arrow {
  color: #e11d24;
  transform: translateX(2px);
}

/* Accordion Trigger Button */
.mob-nav-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  color: #1e293b;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.mob-nav-accordion-btn:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #e11d24;
}

.mob-nav-accordion-btn[aria-expanded="true"] {
  background: #f8fafc;
  border-color: #cbd5e1;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #16233b;
}

.mob-nav-accordion-btn.active {
  border-left: 3px solid #e11d24;
}

.mob-nav-accordion-btn:hover .mob-nav-icon {
  background: #e11d24;
  color: #ffffff;
}

.mob-service-pill {
  font-size: 10px;
  font-weight: 800;
  background: #fff1e6;
  color: #e11d24;
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid #fed7aa;
  margin-right: 4px;
}

.mob-accordion-caret {
  font-size: 12px;
  color: #64748b;
  margin-left: auto;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mob-nav-accordion-btn[aria-expanded="true"] .mob-accordion-caret {
  transform: rotate(180deg);
  color: #e11d24;
}

/* Sublist inside Accordion */
.mob-nav-sublist-wrapper {
  margin-top: 4px;
}

.mob-nav-sublist {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mob-sub-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
}

.mob-sub-link i {
  font-size: 13px;
  color: #e11d24;
  flex-shrink: 0;
}

.mob-sub-link:hover,
.mob-sub-link:focus {
  background: #ffffff;
  color: #e11d24;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transform: translateX(3px);
}

/* Services rich cards inside accordion */
.mob-services-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mob-service-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mob-service-card:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  transform: translateX(3px);
}

.mob-srv-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #fff1e6;
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.mob-service-card:hover .mob-srv-icon {
  background: #e11d24;
  color: #ffffff;
}

.mob-srv-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.mob-srv-info strong {
  font-size: 12.5px;
  color: #1e293b;
  font-weight: 700;
}

.mob-srv-info small {
  font-size: 10.5px;
  color: #64748b;
}

.mob-service-card:hover .mob-srv-info strong {
  color: #e11d24;
}

/* Live Consignment Tracking Link */
.mob-nav-tracking {
  background: linear-gradient(135deg, #16233b 0%, #1e3a8a 100%);
  border-color: #1e3a8a;
  color: #ffffff !important;
}

.mob-nav-tracking .mob-nav-icon {
  background: rgba(255, 255, 255, 0.15);
  color: #38bdf8;
}

.mob-nav-tracking:hover {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  border-color: #38bdf8;
  color: #ffffff !important;
}

.mob-live-badge {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  background: #ef4444;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  animation: mobLivePulse 1.5s infinite;
}

@keyframes mobLivePulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* Footer Section */
.mob-drawer-footer {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}

.mob-footer-btn-quote {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e11d24 0%, #ff4d4f 100%);
  color: #ffffff;
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 4px 14px rgba(225, 29, 36, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mob-footer-btn-quote:hover,
.mob-footer-btn-quote:focus {
  background: linear-gradient(135deg, #991b1b 0%, #e11d24 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(225, 29, 36, 0.45);
}

.mob-footer-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mob-footer-btn-call {
  height: 38px;
  border-radius: 8px;
  background: #16233b;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mob-footer-btn-call:hover {
  background: #0f172a;
  color: #ffffff;
  transform: translateY(-1px);
}

.mob-footer-btn-wa {
  height: 38px;
  border-radius: 8px;
  background: #25D366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mob-footer-btn-wa:hover {
  background: #1eb956;
  color: #ffffff;
  transform: translateY(-1px);
}

.mob-footer-note {
  font-size: 10.5px;
  color: #64748b;
  text-align: center;
  font-weight: 600;
  margin-top: 2px;
}

/* ==========================================================================
   15. Minimalist Photo Gallery Section
   ========================================================================== */
.gallery-page-section {
  padding: 50px 0 80px;
  background: #fafaf9;
  min-height: 70vh;
}

.gallery-trust-bar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding: 6px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.gallery-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
}

.gallery-trust-divider {
  width: 1px;
  height: 14px;
  background: #cbd5e1;
}

/* Filter Chips Bar */
.gallery-filter-wrapper {
  margin: 32px 0 28px;
  display: flex;
  justify-content: center;
}

.gallery-filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.gallery-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-chip-btn:hover {
  color: #16233b;
  background: #f1f5f9;
}

.gallery-chip-btn.active {
  background: #e11d24;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(225, 29, 36, 0.28);
}

.gallery-chip-btn .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(100, 116, 139, 0.12);
  color: inherit;
  transition: background 0.2s ease;
}

.gallery-chip-btn.active .chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Responsive 4-Column Photo Grid (Clean & Minimalist) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gallery-card-item {
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.gallery-card-item:hover,
.gallery-card-item:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 36, 0.45);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

.gallery-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f5f9;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card-item:hover .gallery-img {
  transform: scale(1.05);
}

/* Infinite Scroll Sentinel & Subtle Loader */
.gallery-scroll-sentinel-wrap {
  margin-top: 36px;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gallery-scroll-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: opacity 0.2s ease;
}

.gallery-infinite-sentinel {
  width: 100%;
  height: 20px;
  pointer-events: none;
}

.gallery-end-note {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  padding: 8px 16px;
}

/* ==========================================================================
   Minimalist Lightbox Modal
   ========================================================================== */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.gallery-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 29, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lightbox-dialog {
  position: relative;
  z-index: 2;
  width: 92vw;
  max-width: 1040px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.lightbox-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 12px;
}

.lightbox-counter {
  font-size: 13px;
  color: #e2e8f0;
  font-weight: 600;
}

.lightbox-control-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lightbox-control-btn:hover {
  background: #e11d24;
  border-color: #e11d24;
  transform: rotate(90deg);
}

.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 78vh;
}

.lightbox-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 78vh;
}

.lightbox-img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: lightboxZoomIn 0.25s ease-out;
}

@keyframes lightboxZoomIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.lightbox-nav-btn.btn-prev {
  left: 12px;
}

.lightbox-nav-btn.btn-next {
  right: 12px;
}

.lightbox-nav-btn:hover {
  background: #e11d24;
  border-color: #e11d24;
  transform: translateY(-50%) scale(1.1);
}

/* ==========================================================================
   Photo Gallery Responsive Media Queries
   ========================================================================== */
@media (max-width: 1199px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .gallery-page-section {
    padding: 36px 0 60px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gallery-card-item {
    border-radius: 10px;
  }

  .gallery-filter-chips {
    border-radius: 12px;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .gallery-chip-btn {
    flex-shrink: 0;
    height: 34px;
    font-size: 12px;
    padding: 0 12px;
  }

  .lightbox-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .lightbox-nav-btn.btn-prev {
    left: 4px;
  }

  .lightbox-nav-btn.btn-next {
    right: 4px;
  }
}

/* --------------------------------------------------------------------------
   Photo Cards (About & Service Details)
   -------------------------------------------------------------------------- */
.about-story-photo-box,
.service-hero-photo-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(9, 19, 38, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--surface-subtle, #f8fafc);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.about-story-photo-box:hover,
.service-hero-photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(9, 19, 38, 0.18);
}

.about-story-photo-img,
.service-hero-photo-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 991px) {

  .about-story-photo-img,
  .service-hero-photo-img {
    height: 280px;
  }
}

@media (max-width: 576px) {

  .about-story-photo-img,
  .service-hero-photo-img {
    height: 230px;
  }
}

.about-story-photo-box:hover .about-story-photo-img,
.service-hero-photo-card:hover .service-hero-photo-img {
  transform: scale(1.03);
}

.about-story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 19, 38, 0) 60%, rgba(9, 19, 38, 0.45) 100%);
  pointer-events: none;
}

.story-badge-floating,
.service-photo-floating-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.8);
  z-index: 2;
}

@media (max-width: 767px) {

  .about-story-photo-img,
  .service-hero-photo-img {
    height: 280px;
  }
}

/* ==========================================================================
   HOME RELOCATION / HOUSEHOLD SHIFTING SERVICE PAGE
   Strict Alternating White (#ffffff) and Warm Sand (#faf6f0) Sections
   ========================================================================== */
.home-reloc-overview-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.home-reloc-included-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.home-reloc-team-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.home-reloc-routes-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.home-reloc-faq-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.home-reloc-estimate-section {
  position: relative;
  background-color: #faf6f0;
  padding: 38px 0 44px 0;
  border-top: 1px solid #ebdccb;
}

.home-reloc-main-heading {
  font-size: 2.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.home-reloc-section-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.home-reloc-lead {
  font-size: 16px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.8;
  margin-bottom: 18px;
}

.home-reloc-text-block p {
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
  margin-bottom: 16px;
}

.home-reloc-summary-note {
  padding: 14px 20px;
  background: #fff7ed;
  border-left: 3px solid #e11d24;
  border-radius: 8px;
  font-weight: 600;
  color: #9a3412 !important;
}

.home-reloc-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-reloc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 50px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.home-reloc-photo-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(9, 19, 38, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.home-reloc-photo-img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-reloc-photo-card:hover .home-reloc-photo-img {
  transform: scale(1.03);
}

.home-reloc-photo-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.8);
  z-index: 2;
}

.home-reloc-photo-badge strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
  font-weight: 700;
}

.home-reloc-photo-badge span {
  font-size: 12px;
  color: #64748b;
}

/* Home Relocation Generic Card */
.home-reloc-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.home-reloc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.home-included-card {
  border-top: 4px solid #e11d24;
}

.home-step-card {
  border-top: 4px solid #0284c7;
}

.home-route-card {
  border-top: 4px solid #f59e0b;
}

.home-card-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.icon-orange {
  background: #fff7ed;
  color: #e11d24;
}

.icon-blue {
  background: #f0f9ff;
  color: #0284c7;
}

.icon-green {
  background: #f0fdf4;
  color: #16a34a;
}

.icon-amber {
  background: #fefce8;
  color: #ca8a04;
}

.home-card-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.home-card-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 0;
}

.home-step-number {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 1.85rem;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1;
  transition: color 0.25s ease;
}

.home-reloc-card:hover .home-step-number {
  color: #e11d24;
  opacity: 0.35;
}

.home-step-badge {
  font-size: 1.25rem;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 10px;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: all 0.25s ease;
}

.home-reloc-card:hover .home-step-badge,
.office-reloc-card:hover .home-step-badge {
  color: #e11d24;
  background: #fff7ed;
  border-color: #fed7aa;
}

/* Call to Action Card - Compact & Sleek Banner */
.home-reloc-cta-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 24px 32px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  max-width: 1060px;
  margin: 0 auto;
}

.home-cta-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 50px;
  background: rgba(225, 29, 36, 0.2);
  border: 1px solid rgba(225, 29, 36, 0.4);
  color: #ff4d4f;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.home-cta-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.home-cta-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #cbd5e1;
}

.home-cta-btn {
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 50px;
  transition: all 0.2s ease;
}

@media (max-width: 991px) {

  .home-reloc-overview-section,
  .home-reloc-included-section,
  .home-reloc-team-section,
  .home-reloc-routes-section,
  .home-reloc-faq-section {
    padding: 56px 0;
  }

  .home-reloc-estimate-section {
    padding: 32px 0;
  }

  .home-reloc-photo-img {
    height: 320px;
  }
}

@media (max-width: 767px) {

  .home-reloc-main-heading,
  .home-reloc-section-title {
    font-size: 1.55rem;
  }

  .home-reloc-card {
    padding: 24px 20px;
  }

  .home-reloc-cta-card {
    padding: 20px 18px;
    text-align: center;
  }

  .home-cta-title {
    font-size: 1.2rem;
  }

  .home-cta-desc {
    font-size: 13px;
  }

  .home-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   CAR TRANSPORTATION SERVICE PAGE
   Strict Alternating White (#ffffff) and Warm Sand (#faf6f0) Sections
   ========================================================================== */
.car-trans-overview-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.car-trans-works-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.car-trans-why-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.car-trans-cost-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.car-trans-faq-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.car-trans-main-heading {
  font-size: 2.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.car-trans-section-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.car-trans-lead {
  font-size: 16px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.8;
  margin-bottom: 18px;
}

.car-trans-text-block p {
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
  margin-bottom: 16px;
}

.car-trans-gst-note {
  padding: 14px 20px;
  background: #f0fdf4;
  border-left: 3px solid #16a34a;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.7;
  color: #14532d;
  margin-top: 16px;
  margin-bottom: 16px;
}

.car-trans-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.car-trans-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.car-trans-card-orange {
  border-top: 4px solid #e11d24;
}

.car-trans-card-blue {
  border-top: 4px solid #0284c7;
}

.car-trans-card-green {
  border-top: 4px solid #16a34a;
}

.car-trans-card-amber {
  border-top: 4px solid #ca8a04;
}

.car-trans-cost-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 36px 36px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 991px) {

  .car-trans-overview-section,
  .car-trans-works-section,
  .car-trans-why-section,
  .car-trans-cost-section,
  .car-trans-faq-section {
    padding: 56px 0;
  }
}

@media (max-width: 767px) {

  .car-trans-main-heading,
  .car-trans-section-title {
    font-size: 1.55rem;
  }

  .car-trans-card,
  .car-trans-cost-card {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   PACKING AND UNPACKING SERVICE PAGE
   Strict Alternating White (#ffffff) and Warm Sand (#faf6f0) Sections
   ========================================================================== */
.packing-serv-overview-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.packing-serv-process-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.packing-serv-materials-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.packing-serv-unpacking-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.packing-serv-cost-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.packing-serv-faq-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
}

.packing-serv-main-heading {
  font-size: 2.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.packing-serv-section-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.packing-serv-lead {
  font-size: 16px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.8;
  margin-bottom: 18px;
}

.packing-serv-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.packing-serv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.packing-serv-material-card {
  background: #faf6f0;
  border: 1px solid #ebdccb;
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.packing-serv-material-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.packing-serv-material-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #fff7ed;
  color: #e11d24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.packing-serv-material-text {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.5;
  margin: 0;
}

.packing-serv-cost-card {
  background: #faf6f0;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 36px 36px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 991px) {

  .packing-serv-overview-section,
  .packing-serv-process-section,
  .packing-serv-materials-section,
  .packing-serv-unpacking-section,
  .packing-serv-cost-section,
  .packing-serv-faq-section {
    padding: 56px 0;
  }
}

@media (max-width: 767px) {

  .packing-serv-main-heading,
  .packing-serv-section-title {
    font-size: 1.55rem;
  }

  .packing-serv-card,
  .packing-serv-cost-card {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   OFFICE RELOCATION SERVICE PAGE
   Strict Alternating White (#ffffff) and Warm Sand (#faf6f0) Sections
   ========================================================================== */
.office-reloc-overview-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.office-reloc-items-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.office-reloc-procedure-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.office-reloc-business-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.office-reloc-faq-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.office-reloc-main-heading {
  font-size: 2.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.office-reloc-section-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.office-reloc-lead {
  font-size: 16px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.8;
  margin-bottom: 18px;
}

.office-reloc-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.office-reloc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.office-reloc-business-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 36px 36px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 991px) {

  .office-reloc-overview-section,
  .office-reloc-items-section,
  .office-reloc-procedure-section,
  .office-reloc-business-section,
  .office-reloc-faq-section {
    padding: 56px 0;
  }
}

@media (max-width: 767px) {

  .office-reloc-main-heading,
  .office-reloc-section-title {
    font-size: 1.55rem;
  }

  .office-reloc-card,
  .office-reloc-business-card {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   BIKE TRANSPORTATION SERVICE PAGE
   Strict Alternating White (#ffffff) and Warm Sand (#faf6f0) Sections
   ========================================================================== */
.bike-trans-overview-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.bike-trans-covered-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.bike-trans-better-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.bike-trans-cost-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.bike-trans-credentials-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.bike-trans-faq-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
}

.bike-trans-main-heading {
  font-size: 2.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.bike-trans-section-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.bike-trans-lead {
  font-size: 16px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.8;
  margin-bottom: 18px;
}

.bike-trans-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.bike-trans-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.bike-trans-highlight-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 36px 36px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  max-width: 960px;
  margin: 0 auto;
}

.bike-trans-credentials-card {
  background: #faf6f0;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 36px 36px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 991px) {

  .bike-trans-overview-section,
  .bike-trans-covered-section,
  .bike-trans-better-section,
  .bike-trans-cost-section,
  .bike-trans-credentials-section,
  .bike-trans-faq-section {
    padding: 56px 0;
  }
}

@media (max-width: 767px) {

  .bike-trans-main-heading,
  .bike-trans-section-title {
    font-size: 1.55rem;
  }

  .bike-trans-card,
  .bike-trans-highlight-card,
  .bike-trans-credentials-card {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   LOADING AND UNLOADING SERVICE PAGE
   Strict Alternating White (#ffffff) and Warm Sand (#faf6f0) Sections
   ========================================================================== */
.loading-serv-overview-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.loading-serv-loading-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.loading-serv-unloading-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.loading-serv-cost-section {
  position: relative;
  background-color: #faf6f0;
  padding: 76px 0 84px 0;
  border-top: 1px solid #ebdccb;
  border-bottom: 1px solid #ebdccb;
}

.loading-serv-faq-section {
  position: relative;
  background-color: #ffffff;
  padding: 76px 0 84px 0;
}

.loading-serv-main-heading {
  font-size: 2.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.loading-serv-section-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.loading-serv-lead {
  font-size: 16px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.8;
  margin-bottom: 18px;
}

.loading-serv-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.loading-serv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.loading-serv-cost-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 18px;
  padding: 36px 36px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 991px) {

  .loading-serv-overview-section,
  .loading-serv-loading-section,
  .loading-serv-unloading-section,
  .loading-serv-cost-section,
  .loading-serv-faq-section {
    padding: 56px 0;
  }
}

@media (max-width: 767px) {

  .loading-serv-main-heading,
  .loading-serv-section-title {
    font-size: 1.55rem;
  }

  .loading-serv-card,
  .loading-serv-cost-card {
    padding: 24px 20px;
  }
}