/**
 * ==============================================================================
 * UNIFIED SUBURB CARDS - MODERN, PREMIUM & CREATIVE REDESIGN
 * File: assets/css/canberra-greater-cards-redesign.css
 * Target: All Suburb Directory Cards Across Every State & Territory Page
 * Scope: Canberra / ACT, NSW, VIC, QLD, WA, SA, TAS, NT
 * Requirements: 100% CSS-only redesign, HTML/content locked, NO IMAGES.
 * ==============================================================================
 *
 * TABLE OF CONTENTS:
 *  01. Design Tokens & Ambient Meshes
 *  02. Universal Suburb Directory Cards (.states-wraper a.btn2, .book-appointment a.btn2)
 *  03. State & Territory Specific Location Tags
 *  04. Moving Process Step Cards (.step-card)
 *  05. Process Connector Line (.step-wrap::before)
 *  06. Service & Benefit Cards (.service-card, .detail)
 *  07. Focus Rings & Accessibility
 *  08. Tablet Responsive (768px - 1024px)
 *  09. Mobile Responsive (360px - 767px)
 *  10. Ultra-Compact Mobile (<360px)
 *  11. Reduced Motion Compliance
 * ==============================================================================
 */

/* ==============================================================================
   01. DESIGN TOKENS & AMBIENT MESHES
   ============================================================================== */
:root {
  --cgr-primary: #8b181b;
  --cgr-primary-bright: #c93a28;
  --cgr-primary-hover: #a31d2e;
  --cgr-primary-dark: #5e0b0e;
  --cgr-primary-light: rgba(139, 24, 27, 0.06);
  --cgr-primary-glow: rgba(139, 24, 27, 0.16);
  --cgr-gold-accent: #f59e0b;

  --cgr-text-heading: #0f172a;
  --cgr-text-body: #1e293b;
  --cgr-text-muted: #64748b;
  --cgr-text-subtle: #94a3b8;

  --cgr-card-bg: #ffffff;
  --cgr-card-border: #e2e8f0;
  --cgr-card-border-hover: rgba(139, 24, 27, 0.32);

  --cgr-shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  --cgr-shadow-card: 0 3px 12px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  --cgr-shadow-hover: 0 16px 36px -6px rgba(139, 24, 27, 0.14), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --cgr-shadow-process: 0 20px 42px -8px rgba(139, 24, 27, 0.15), 0 6px 16px -2px rgba(15, 23, 42, 0.05);

  --cgr-radius-sm: 10px;
  --cgr-radius-md: 16px;
  --cgr-radius-lg: 22px;
  --cgr-radius-pill: 9999px;

  --cgr-font-heading: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cgr-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --cgr-ease-bounce: cubic-bezier(0.16, 1, 0.3, 1);
  --cgr-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==============================================================================
   02. UNIVERSAL SUBURB DIRECTORY CARDS
   Targeting: All suburb directory cards across every state and territory page
   Layout:
    - Pure crisp white surface (#ffffff) with 16px radius
    - Architectural crimson brand pillar (border-left: 4.5px solid #8b181b)
    - Suburb Name in bold Mulish typography
    - Two-tier layout with state/territory uppercase micro-tag
    - Right circular action cue ( → ) with animated crimson gradient on hover
    - Zero pseudo-element artifacts (::before completely disabled)
   ============================================================================== */
.states-wraper {
  row-gap: clamp(14px, 1.8vw, 18px) !important;
  column-gap: 0 !important;
}

.states-wraper .book-appointment,
.book-appointment:has(a.btn2[title*="Removalists"]),
.book-appointment:has(a.btn2[href*="/act/"]),
.book-appointment:has(a.btn2[href*="/nsw/"]),
.book-appointment:has(a.btn2[href*="/vic/"]),
.book-appointment:has(a.btn2[href*="/qld/"]),
.book-appointment:has(a.btn2[href*="/wa/"]),
.book-appointment:has(a.btn2[href*="/sa/"]),
.book-appointment:has(a.btn2[href*="/tas/"]),
.book-appointment:has(a.btn2[href*="/nt/"]) {
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Suburb Card Surface */
.states-wraper a.btn2,
.states-wraper .btn2,
.states-wraper .book-appointment a.btn2,
.states-wraper .book-appointment .btn2,
.book-appointment a.btn2[title*="Removalists"],
.book-appointment a.btn2[href*="/act/"],
.book-appointment a.btn2[href*="/nsw/"],
.book-appointment a.btn2[href*="/vic/"],
.book-appointment a.btn2[href*="/qld/"],
.book-appointment a.btn2[href*="/wa/"],
.book-appointment a.btn2[href*="/sa/"],
.book-appointment a.btn2[href*="/tas/"],
.book-appointment a.btn2[href*="/nt/"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: clamp(66px, 6.5vw, 76px) !important;
  padding: clamp(12px, 1.3vw, 16px) clamp(16px, 1.6vw, 20px) !important;
  background: #ffffff !important;
  border: 1px solid var(--cgr-card-border) !important;
  border-left: 4.5px solid var(--cgr-primary) !important;
  border-radius: var(--cgr-radius-md) !important;
  box-shadow: 
    0 2px 8px -2px rgba(15, 23, 42, 0.04), 
    0 1px 3px rgba(15, 23, 42, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: 
    transform 0.32s var(--cgr-ease-bounce),
    box-shadow 0.32s var(--cgr-ease-bounce),
    border-color 0.28s ease,
    background 0.28s ease !important;
}

/* STRICT ::before OVERRIDE - ELIMINATES ANY SQUASHED SHAPES / DOTS ACROSS ALL PAGES */
.states-wraper a.btn2::before,
.states-wraper .btn2::before,
.states-wraper .book-appointment a.btn2::before,
.book-appointment a.btn2[title*="Removalists"]::before,
.book-appointment a.btn2[href*="/act/"]::before,
.book-appointment a.btn2[href*="/nsw/"]::before,
.book-appointment a.btn2[href*="/vic/"]::before,
.book-appointment a.btn2[href*="/qld/"]::before,
.book-appointment a.btn2[href*="/wa/"]::before,
.book-appointment a.btn2[href*="/sa/"]::before,
.book-appointment a.btn2[href*="/tas/"]::before,
.book-appointment a.btn2[href*="/nt/"]::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Suburb Card Typography (Suburb Name) */
.states-wraper a.btn2 span,
.states-wraper .btn2 span,
.states-wraper .book-appointment a.btn2 span,
.book-appointment a.btn2[title*="Removalists"] span,
.book-appointment a.btn2[href*="/act/"] span,
.book-appointment a.btn2[href*="/nsw/"] span,
.book-appointment a.btn2[href*="/vic/"] span,
.book-appointment a.btn2[href*="/qld/"] span,
.book-appointment a.btn2[href*="/wa/"] span,
.book-appointment a.btn2[href*="/sa/"] span,
.book-appointment a.btn2[href*="/tas/"] span,
.book-appointment a.btn2[href*="/nt/"] span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-family: var(--cgr-font-heading) !important;
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.18rem) !important;
  font-weight: 800 !important;
  color: var(--cgr-text-heading) !important;
  letter-spacing: -0.015em !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  line-height: 1.25 !important;
  transition: color 0.25s ease !important;
}

/* Universal Suburb Subtitle Tag (Default fallback) */
.states-wraper a.btn2 span::after,
.states-wraper .btn2 span::after,
.states-wraper .book-appointment a.btn2 span::after,
.book-appointment a.btn2[title*="Removalists"] span::after {
  content: "Local • Removalists" !important;
  font-family: var(--cgr-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--cgr-text-muted) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin-top: 3px !important;
  transition: color 0.25s ease !important;
}

/* ==============================================================================
   03. STATE & TERRITORY SPECIFIC LOCATION TAGS
   Dynamically matches each Australian state/territory directory path
   ============================================================================== */
/* Australian Capital Territory */
.states-wraper a.btn2[href*="/act/"] span::after,
.book-appointment a.btn2[href*="/act/"] span::after {
  content: "Canberra • ACT" !important;
}

/* New South Wales */
.states-wraper a.btn2[href*="/nsw/"] span::after,
.book-appointment a.btn2[href*="/nsw/"] span::after {
  content: "New South Wales • NSW" !important;
}

/* Victoria */
.states-wraper a.btn2[href*="/vic/"] span::after,
.book-appointment a.btn2[href*="/vic/"] span::after {
  content: "Victoria • VIC" !important;
}

/* Queensland */
.states-wraper a.btn2[href*="/qld/"] span::after,
.book-appointment a.btn2[href*="/qld/"] span::after {
  content: "Queensland • QLD" !important;
}

/* Western Australia */
.states-wraper a.btn2[href*="/wa/"] span::after,
.book-appointment a.btn2[href*="/wa/"] span::after {
  content: "Western Australia • WA" !important;
}

/* South Australia */
.states-wraper a.btn2[href*="/sa/"] span::after,
.book-appointment a.btn2[href*="/sa/"] span::after {
  content: "South Australia • SA" !important;
}

/* Tasmania */
.states-wraper a.btn2[href*="/tas/"] span::after,
.book-appointment a.btn2[href*="/tas/"] span::after {
  content: "Tasmania • TAS" !important;
}

/* Northern Territory */
.states-wraper a.btn2[href*="/nt/"] span::after,
.book-appointment a.btn2[href*="/nt/"] span::after {
  content: "Northern Territory • NT" !important;
}

/* Right Circular Micro-Action Button (Pure CSS Vector Cue) */
.states-wraper a.btn2::after,
.states-wraper .btn2::after,
.states-wraper .book-appointment a.btn2::after,
.book-appointment a.btn2[title*="Removalists"]::after,
.book-appointment a.btn2[href*="/act/"]::after,
.book-appointment a.btn2[href*="/nsw/"]::after,
.book-appointment a.btn2[href*="/vic/"]::after,
.book-appointment a.btn2[href*="/qld/"]::after,
.book-appointment a.btn2[href*="/wa/"]::after,
.book-appointment a.btn2[href*="/sa/"]::after,
.book-appointment a.btn2[href*="/tas/"]::after,
.book-appointment a.btn2[href*="/nt/"]::after {
  content: "→" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: var(--cgr-radius-pill) !important;
  background: #f8fafc !important;
  border: 1px solid var(--cgr-card-border) !important;
  color: var(--cgr-text-muted) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: 12px !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: 
    transform 0.3s var(--cgr-ease-bounce),
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.3s ease !important;
}

/* Universal Suburb Card Hover Experience */
.states-wraper a.btn2:hover,
.states-wraper .btn2:hover,
.states-wraper .book-appointment a.btn2:hover,
.book-appointment a.btn2[title*="Removalists"]:hover,
.book-appointment a.btn2[href*="/act/"]:hover,
.book-appointment a.btn2[href*="/nsw/"]:hover,
.book-appointment a.btn2[href*="/vic/"]:hover,
.book-appointment a.btn2[href*="/qld/"]:hover,
.book-appointment a.btn2[href*="/wa/"]:hover,
.book-appointment a.btn2[href*="/sa/"]:hover,
.book-appointment a.btn2[href*="/tas/"]:hover,
.book-appointment a.btn2[href*="/nt/"]:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(139, 24, 27, 0.28) !important;
  border-left-color: var(--cgr-primary-bright) !important;
  box-shadow: var(--cgr-shadow-hover) !important;
  background: radial-gradient(circle at 100% 0%, rgba(139, 24, 27, 0.035) 0%, transparent 60%), #ffffff !important;
}

.states-wraper a.btn2:hover span,
.states-wraper .btn2:hover span,
.states-wraper .book-appointment a.btn2:hover span,
.book-appointment a.btn2[title*="Removalists"]:hover span,
.book-appointment a.btn2[href*="/act/"]:hover span,
.book-appointment a.btn2[href*="/nsw/"]:hover span,
.book-appointment a.btn2[href*="/vic/"]:hover span,
.book-appointment a.btn2[href*="/qld/"]:hover span,
.book-appointment a.btn2[href*="/wa/"]:hover span,
.book-appointment a.btn2[href*="/sa/"]:hover span,
.book-appointment a.btn2[href*="/tas/"]:hover span,
.book-appointment a.btn2[href*="/nt/"]:hover span {
  color: var(--cgr-primary) !important;
}

.states-wraper a.btn2:hover span::after,
.states-wraper .btn2:hover span::after,
.states-wraper .book-appointment a.btn2:hover span::after,
.book-appointment a.btn2[title*="Removalists"]:hover span::after,
.book-appointment a.btn2[href*="/act/"]:hover span::after,
.book-appointment a.btn2[href*="/nsw/"]:hover span::after,
.book-appointment a.btn2[href*="/vic/"]:hover span::after,
.book-appointment a.btn2[href*="/qld/"]:hover span::after,
.book-appointment a.btn2[href*="/wa/"]:hover span::after,
.book-appointment a.btn2[href*="/sa/"]:hover span::after,
.book-appointment a.btn2[href*="/tas/"]:hover span::after,
.book-appointment a.btn2[href*="/nt/"]:hover span::after {
  color: var(--cgr-primary-bright) !important;
}

.states-wraper a.btn2:hover::after,
.states-wraper .btn2:hover::after,
.states-wraper .book-appointment a.btn2:hover::after,
.book-appointment a.btn2[title*="Removalists"]:hover::after,
.book-appointment a.btn2[href*="/act/"]:hover::after,
.book-appointment a.btn2[href*="/nsw/"]:hover::after,
.book-appointment a.btn2[href*="/vic/"]:hover::after,
.book-appointment a.btn2[href*="/qld/"]:hover::after,
.book-appointment a.btn2[href*="/wa/"]:hover::after,
.book-appointment a.btn2[href*="/sa/"]:hover::after,
.book-appointment a.btn2[href*="/tas/"]:hover::after,
.book-appointment a.btn2[href*="/nt/"]:hover::after {
  transform: translateX(4px) scale(1.06) !important;
  background: linear-gradient(135deg, var(--cgr-primary-bright) 0%, var(--cgr-primary) 100%) !important;
  color: #ffffff !important;
  border-color: var(--cgr-primary) !important;
  box-shadow: 0 4px 12px rgba(139, 24, 27, 0.32) !important;
}

/* Suburb Card Active / Click State */
.states-wraper a.btn2:active,
.states-wraper .btn2:active,
.states-wraper .book-appointment a.btn2:active,
.book-appointment a.btn2[title*="Removalists"]:active {
  transform: translateY(-2px) scale(0.99) !important;
  box-shadow: 0 6px 18px -2px rgba(139, 24, 27, 0.15) !important;
}

/* ==============================================================================
   04. MOVING PROCESS STEP CARDS (.step-card)
   ============================================================================== */
.step-wrap {
  position: relative !important;
  padding: 10px 0 !important;
}

/* Process Horizontal Track */
.step-wrap::before {
  content: "" !important;
  position: absolute !important;
  top: 96px !important;
  left: 12% !important;
  right: 12% !important;
  height: 2px !important;
  background: linear-gradient(
    90deg, 
    rgba(139, 24, 27, 0.08) 0%, 
    rgba(139, 24, 27, 0.3) 30%, 
    rgba(201, 58, 40, 0.4) 70%, 
    rgba(139, 24, 27, 0.08) 100%
  ) !important;
  border-radius: 999px !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Step Card Base */
.step-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  height: 100% !important;
  min-height: clamp(230px, 22vw, 270px) !important;
  padding: clamp(32px, 3.2vw, 40px) clamp(18px, 1.8vw, 24px) clamp(26px, 2.6vw, 32px) !important;
  background: #ffffff !important;
  border: 1px solid var(--cgr-card-border) !important;
  border-radius: var(--cgr-radius-lg) !important;
  box-shadow: 
    0 4px 18px -2px rgba(15, 23, 42, 0.05), 
    0 1px 3px rgba(15, 23, 42, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  z-index: 1 !important;
  overflow: visible !important;
  transition: 
    transform 0.4s var(--cgr-ease-bounce),
    box-shadow 0.4s var(--cgr-ease-bounce),
    border-color 0.3s ease,
    background 0.3s ease !important;
}

/* Card Top Glowing Indicator Light */
.step-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, rgba(139, 24, 27, 0.4), transparent) !important;
  border-radius: 3px !important;
  opacity: 0.6 !important;
  transition: all 0.35s ease !important;
}

/* Step Card Hover */
.step-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(139, 24, 27, 0.28) !important;
  box-shadow: var(--cgr-shadow-process) !important;
  background: radial-gradient(circle at 50% 0%, rgba(139, 24, 27, 0.035) 0%, transparent 75%), #ffffff !important;
}

.step-card:hover::before {
  left: 10% !important;
  right: 10% !important;
  height: 4px !important;
  background: linear-gradient(90deg, transparent, var(--cgr-primary-bright), transparent) !important;
  opacity: 1 !important;
  box-shadow: 0 2px 10px rgba(201, 58, 40, 0.5) !important;
}

/* Step Number Pill (.num) */
.step-card .num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 5px 14px !important;
  font-family: var(--cgr-font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: var(--cgr-primary) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, rgba(139, 24, 27, 0.08) 0%, rgba(201, 58, 40, 0.04) 100%) !important;
  border: 1px solid rgba(139, 24, 27, 0.16) !important;
  border-radius: var(--cgr-radius-pill) !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.3s ease !important;
}

.step-card:hover .num {
  background: linear-gradient(135deg, var(--cgr-primary-bright) 0%, var(--cgr-primary) 100%) !important;
  color: #ffffff !important;
  border-color: var(--cgr-primary) !important;
  box-shadow: 0 4px 12px rgba(139, 24, 27, 0.3) !important;
  transform: scale(1.05) !important;
}

/* Step Sculptural Icon Container (.icon) */
.step-card .icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(66px, 6.2vw, 76px) !important;
  height: clamp(66px, 6.2vw, 76px) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 1px solid var(--cgr-card-border) !important;
  box-shadow: 
    0 8px 20px -4px rgba(15, 23, 42, 0.06), 
    inset 0 1px 0 #ffffff !important;
  margin: 0 auto 20px !important;
  transition: 
    transform 0.4s var(--cgr-ease-bounce),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s var(--cgr-ease-bounce) !important;
}

/* Step FontAwesome Icon */
.step-card .icon i {
  font-size: clamp(24px, 2.3vw, 28px) !important;
  color: var(--cgr-primary) !important;
  transition: all 0.3s ease !important;
}

/* Step Icon Hover Activation */
.step-card:hover .icon {
  transform: translateY(-4px) scale(1.08) rotate(-2deg) !important;
  background: linear-gradient(135deg, var(--cgr-primary-bright) 0%, var(--cgr-primary) 100%) !important;
  border-color: var(--cgr-primary) !important;
  box-shadow: 
    0 14px 28px -4px rgba(139, 24, 27, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.step-card:hover .icon i {
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Step Card Heading (.steps-heading) */
.step-card .steps-heading {
  display: block !important;
  font-family: var(--cgr-font-heading) !important;
  font-size: clamp(1.05rem, 0.98rem + 0.2vw, 1.18rem) !important;
  font-weight: 800 !important;
  color: var(--cgr-text-heading) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 0.25s ease !important;
}

.step-card:hover .steps-heading {
  color: var(--cgr-primary) !important;
}

/* ==============================================================================
   05. PROCESS CONNECTOR & AMBIENT SECTIONS
   ============================================================================== */
section.section-padding.bg {
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(139, 24, 27, 0.04) 0%, transparent 65%),
    #f8fafc !important;
  position: relative !important;
}

section.section-padding.bg-seprate {
  background: 
    radial-gradient(ellipse at 50% 100%, rgba(139, 24, 27, 0.035) 0%, transparent 60%),
    #ffffff !important;
  position: relative !important;
}

/* ==============================================================================
   06. SERVICE & BENEFIT CARDS (.service-card, .detail)
   ============================================================================== */
.service-card {
  background: #ffffff !important;
  border: 1px solid var(--cgr-card-border) !important;
  border-radius: var(--cgr-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--cgr-shadow-card) !important;
  transition: all 0.35s var(--cgr-ease-bounce) !important;
}

.service-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--cgr-card-border-hover) !important;
  box-shadow: var(--cgr-shadow-hover) !important;
}

.detail {
  background: #ffffff !important;
  border: 1px solid var(--cgr-card-border) !important;
  border-radius: var(--cgr-radius-md) !important;
  padding: clamp(20px, 2.2vw, 28px) !important;
  box-shadow: var(--cgr-shadow-card) !important;
  transition: all 0.35s var(--cgr-ease-bounce) !important;
}

.detail:hover {
  transform: translateY(-5px) !important;
  border-color: var(--cgr-card-border-hover) !important;
  box-shadow: var(--cgr-shadow-hover) !important;
}

/* ==============================================================================
   07. ACCESSIBILITY & FOCUS RINGS
   ============================================================================== */
.states-wraper a.btn2:focus-visible,
.step-card:focus-visible,
.service-card:focus-visible {
  outline: 3px solid var(--cgr-primary-bright) !important;
  outline-offset: 3px !important;
}

/* ==============================================================================
   08. TABLET RESPONSIVENESS (768px - 1024px)
   ============================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .states-wraper {
    row-gap: 14px !important;
  }

  .states-wraper a.btn2,
  .states-wraper .btn2,
  .states-wraper .book-appointment a.btn2 {
    min-height: 64px !important;
    padding: 12px 14px !important;
  }

  .step-wrap::before {
    top: 90px !important;
    left: 8% !important;
    right: 8% !important;
  }

  .step-card {
    min-height: 240px !important;
    padding: 30px 16px 24px !important;
  }
}

/* ==============================================================================
   09. MOBILE RESPONSIVENESS (360px - 767px)
   ============================================================================== */
@media (max-width: 767.98px) {
  .states-wraper {
    row-gap: 10px !important;
  }

  .states-wraper .col-6 {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .states-wraper a.btn2,
  .states-wraper .btn2,
  .states-wraper .book-appointment a.btn2,
  .book-appointment a.btn2[title*="Removalists"],
  .book-appointment a.btn2[href*="/act/"],
  .book-appointment a.btn2[href*="/nsw/"],
  .book-appointment a.btn2[href*="/vic/"],
  .book-appointment a.btn2[href*="/qld/"],
  .book-appointment a.btn2[href*="/wa/"],
  .book-appointment a.btn2[href*="/sa/"],
  .book-appointment a.btn2[href*="/tas/"],
  .book-appointment a.btn2[href*="/nt/"] {
    min-height: 56px !important;
    padding: 10px 12px !important;
    border-radius: var(--cgr-radius-sm) !important;
    border-left-width: 3.5px !important;
  }

  .states-wraper a.btn2 span,
  .states-wraper .btn2 span,
  .states-wraper .book-appointment a.btn2 span,
  .book-appointment a.btn2[title*="Removalists"] span,
  .book-appointment a.btn2[href*="/act/"] span,
  .book-appointment a.btn2[href*="/nsw/"] span,
  .book-appointment a.btn2[href*="/vic/"] span,
  .book-appointment a.btn2[href*="/qld/"] span,
  .book-appointment a.btn2[href*="/wa/"] span,
  .book-appointment a.btn2[href*="/sa/"] span,
  .book-appointment a.btn2[href*="/tas/"] span,
  .book-appointment a.btn2[href*="/nt/"] span {
    font-size: 0.88rem !important;
  }

  .states-wraper a.btn2 span::after,
  .states-wraper .btn2 span::after,
  .states-wraper .book-appointment a.btn2 span::after,
  .book-appointment a.btn2[title*="Removalists"] span::after,
  .book-appointment a.btn2[href*="/act/"] span::after,
  .book-appointment a.btn2[href*="/nsw/"] span::after,
  .book-appointment a.btn2[href*="/vic/"] span::after,
  .book-appointment a.btn2[href*="/qld/"] span::after,
  .book-appointment a.btn2[href*="/wa/"] span::after,
  .book-appointment a.btn2[href*="/sa/"] span::after,
  .book-appointment a.btn2[href*="/tas/"] span::after,
  .book-appointment a.btn2[href*="/nt/"] span::after {
    font-size: 0.62rem !important;
    margin-top: 2px !important;
  }

  .states-wraper a.btn2::after,
  .states-wraper .btn2::after,
  .states-wraper .book-appointment a.btn2::after,
  .book-appointment a.btn2[title*="Removalists"]::after,
  .book-appointment a.btn2[href*="/act/"]::after,
  .book-appointment a.btn2[href*="/nsw/"]::after,
  .book-appointment a.btn2[href*="/vic/"]::after,
  .book-appointment a.btn2[href*="/qld/"]::after,
  .book-appointment a.btn2[href*="/wa/"]::after,
  .book-appointment a.btn2[href*="/sa/"]::after,
  .book-appointment a.btn2[href*="/tas/"]::after,
  .book-appointment a.btn2[href*="/nt/"]::after {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.9rem !important;
    margin-left: 6px !important;
  }

  /* Process Cards in 2-Column Mobile Grid */
  .step-wrap::before {
    display: none !important;
  }

  .step-wrap .row.g-4 {
    --bs-gutter-x: 10px !important;
    --bs-gutter-y: 12px !important;
  }

  .step-card {
    min-height: 205px !important;
    padding: 24px 12px 18px !important;
    border-radius: var(--cgr-radius-md) !important;
  }

  .step-card .num {
    font-size: 0.65rem !important;
    padding: 4px 10px !important;
    margin-bottom: 12px !important;
  }

  .step-card .icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
  }

  .step-card .icon i {
    font-size: 20px !important;
  }

  .step-card .steps-heading {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
  }
}

/* ==============================================================================
   10. ULTRA-COMPACT MOBILE (<360px)
   ============================================================================== */
@media (max-width: 359.98px) {
  .states-wraper a.btn2 span,
  .states-wraper .btn2 span,
  .states-wraper .book-appointment a.btn2 span {
    font-size: 0.82rem !important;
  }

  .states-wraper a.btn2::after,
  .states-wraper .btn2::after,
  .states-wraper .book-appointment a.btn2::after {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 0.8rem !important;
  }
}

/* ==============================================================================
   11. REDUCED MOTION ACCESSIBILITY
   ============================================================================== */
@media (prefers-reduced-motion: reduce) {
  .states-wraper a.btn2,
  .states-wraper a.btn2::after,
  .states-wraper a.btn2 span,
  .step-card,
  .step-card .icon,
  .step-card .num,
  .service-card,
  .detail {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}