:root {
  /* Mountaineer Tile & Remodeling — Navy & Gold Palette */
  --color-navy: #040267;
  /* Brand navy — header, footer, borders */
  --color-cta: #CE9732;
  /* Brand gold — primary CTA, quote buttons */
  --color-primary: #A57928;
  /* Deep gold — secondary buttons, authority */
  --color-dark: #090603;
  /* Near-black — base background */

  /* Aliases */
  --color-volt: #CE9732;
  --color-volt-text: #FFFFFF;
  --color-blue: #A57928;
  --color-blue-hover: #CE9732;
  --color-highlight: #CE9732;
  --color-light-highlight: #E2C184;

  /* Neutrals */
  --color-text-main: #F5F5F5;
  --color-text-muted: #BDBDBD;
  --color-border: #3A2510;
  --color-bg-soft: #0F0905;
  --color-bg-card: #1A1208;

  /* Legacy Mappings */
  --color-white: #FFFFFF;
  --color-wolf: #8E8E8E;
  --color-graphite: #F5F5F5;
  --color-mist: #0F0905;
  --color-off-white: #F5F7FA;

  /* Utility */
  --color-success: #16A34A;
  --color-warning: #F97316;

  /* Typography */
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: #090603;
  /* Using footer color - good color */
  color: var(--color-graphite);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: var(--color-navy);
  transition: color 0.2s;
}

a:hover {
  color: var(--color-volt);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-main);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.75rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background-color: var(--color-blue);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--color-blue-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-primary:active {
  color: #FFFFFF;
  transform: translateY(0);
}

.btn-cta {
  background-color: var(--color-volt);
  color: var(--color-volt-text);
}

.btn-cta:hover {
  background-color: var(--color-volt);
  color: var(--color-volt-text) !important;
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.btn-cta:active {
  color: var(--color-navy) !important;
  transform: translateY(0);
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

section {
  padding: 3rem 0;
}

/* Hero Section with Slideshow */
.hero-section {
  position: relative;
  background-color: #050505;
  color: white;
  padding: 3rem 0;
  text-align: center;
  overflow: hidden;
}

/* Slideshow container */
.hero-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Each slide — pure CSS crossfade, 4 slides × 5s = 20s cycle */
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroFade 15s infinite;
  will-change: opacity;
}

.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 3s; }
.hero-slide:nth-child(3) { animation-delay: 6s; }
.hero-slide:nth-child(4) { animation-delay: 9s; }
.hero-slide:nth-child(5) { animation-delay: 12s; }

@keyframes heroFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 27, 42, 0.78);
  z-index: 1;
}

.hero-section .container {
  position: relative;
  z-index: 2;
}

.hero-p-mobile { display: none; }
.hero-p-desktop { display: inline; }
.hero-title-break { display: inline; }

/* Header */
/* Header — light, and deliberately different from the Mountaineer Coatings
   site, which keeps the near-black (#090603) header. This one mirrors the white
   header on their own live site at mountaineertile.com, suits a homeowner-facing
   remodeling brand, and lets the colour-on-transparent logo sit on the light
   background it was drawn for. Navy contact strip above, white nav below. */
header {
  background-color: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 1px 4px rgba(4, 2, 103, 0.10);
}

.top-bar {
  background-color: var(--color-navy);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(206, 151, 50, 0.35);
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-info {
  display: flex;
  gap: var(--spacing-lg);
}

.top-bar-socials {
  display: flex;
  gap: var(--spacing-md);
}

.main-header {
  padding: var(--spacing-md) 0;
}

.main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo img {
  height: 45px;
  /* Reduced from 60px */
  width: auto;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  align-items: flex-end;
}

.logo-main {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.logo-main span {
  /* deeper gold: brand gold on white is ~2.9:1 and fails small-text contrast */
  color: var(--color-primary);
}

.logo-tagline {
  font-size: 0.6rem;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: right;
  margin-top: 0;
}

nav ul {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}

nav li {
  position: relative;
}

nav a {
  color: #4b5563;
  /* Dark text for the light header */
  font-weight: 500;
  display: block;
  padding: 8px 0;
}

nav a:hover,
nav a.active {
  color: var(--color-navy);
}

/* Ensure CTA buttons maintain dark text even when active/hover in nav */
nav .btn-cta:hover,
nav .btn-cta.active {
  color: var(--color-navy) !important;
}

/* Dropdown Menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFFFFF;
  min-width: 230px;
  box-shadow: 0 8px 24px rgba(4, 2, 103, 0.18);
  padding: var(--spacing-sm) 0;
  border: 1px solid rgba(4, 2, 103, 0.12);
  border-radius: 6px;
  z-index: 101;
}

nav li:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu a {
  padding: 8px 16px;
  font-size: 0.9rem;
  color: #4b5563;
}

.dropdown-menu a:hover {
  background-color: rgba(206, 151, 50, 0.10);
  color: var(--color-navy);
}

/* Categorized dropdown — labels, divider, all-services link */
.dropdown-category-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  opacity: 1;
  pointer-events: none;
  margin-top: 2px;
}

.dropdown-category-label::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--color-volt);
  border-radius: 2px;
  flex-shrink: 0;
}

.dropdown-divider-line {
  height: 1px;
  background: rgba(4, 2, 103, 0.12);
  margin: 8px 16px;
}

.dropdown-all-link {
  font-weight: 600 !important;
  color: var(--color-navy) !important;
  border-bottom: 1px solid rgba(4,2,103,0.10) !important;
  padding: 10px 16px !important;
  margin-bottom: 4px;
}

.dropdown-all-link:hover {
  color: var(--color-volt) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

nav .btn-cta {
  padding: 8px 16px;
  font-size: 0.9rem;
  margin-left: var(--spacing-md);
}

/* Footer */
footer {
  background-color: #090603;
  /* Warm Charcoal */
  color: #BDBDBD;
  /* Muted text */
  padding: var(--spacing-xl) 0;
  margin-top: auto;
  border-top: 4px solid var(--color-cta);
  /* Gold accent border */
}

footer h4 {
  color: #FFFFFF;
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

footer a {
  color: #BDBDBD;
  display: block;
  margin-bottom: 8px;
}

footer a:hover {
  color: var(--color-volt);
  padding-left: 4px;
  /* Slight movement on hover */
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer-contact p {
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--spacing-md);
  text-align: center;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.legal-links {
  display: flex;
  gap: var(--spacing-md);
}

.legal-links a {
  margin-bottom: 0;
  font-size: 0.85rem;
}

/* Accordion (FAQ) */
.accordion-item {
  border: 1px solid var(--color-mist);
  border-radius: 4px;
  margin-bottom: 1rem;
  background: white;
}

.accordion-header {
  padding: 1rem;
  background: #f8fafc;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header:hover {
  background: #f1f5f9;
}

.accordion-content {
  padding: 1rem;
  display: none;
  border-top: 1px solid var(--color-mist);
  color: var(--color-graphite);
}

.accordion-item.active .accordion-content {
  display: block;
}

.accordion-item.active .accordion-header {
  color: var(--color-navy);
}



/* Mobile Menu Button (Hidden on Desktop) */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--color-navy);
  cursor: pointer;
  padding: 0;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: 28px;
  /* Explicit size for both ☰ and ✕ icons */
  line-height: 1;
}

.mobile-menu-btn:hover {
  color: var(--color-volt);
}

.mobile-menu-btn:active {
  transform: scale(0.95);
}

.mobile-menu-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

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

  html,
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }


  /* Typography */
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  /* Hero Section Mobile Optimization */
  .hero-section {
    padding-top: 110px;
    padding-bottom: 2.5rem;
  }

  /* Ensure all first sections after header have proper spacing */
  header+section,
  header+*>section:first-child {
    padding-top: 110px !important;
  }

  .hero-section h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: 1rem !important;
    letter-spacing: -0.01em;
  }

  .hero-section p {
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.75rem !important;
    color: #c8c8c8 !important;
    padding: 0 0.25rem;
  }

  /* Hero Buttons - Stack Vertically */
  .hero-section .container>div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.625rem !important;
    padding: 0 0.5rem;
  }

  .hero-section .btn {
    width: 100%;
    min-height: 50px;
    padding: 13px 24px;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-align: center;
  }

  /* Title: hide the forced line break, let it flow naturally */
  .hero-title-break { display: none; }

  /* Paragraph: hide desktop version, show short mobile version */
  .hero-p-desktop { display: none; }
  .hero-p-mobile { display: inline; }

  /* Serve mobile-sized images on small screens */
  .hero-slide-1 { background-image: url('images/tile/recent_bathroom_remodel.webp') !important; }
  .hero-slide-2 { background-image: url('images/tile/about_kitchen.webp') !important; }
  .hero-slide-3 { background-image: url('images/tile/recent_flooring.webp') !important; }
  .hero-slide-4 { background-image: url('images/tile/service_outdoor.webp') !important; }
  .hero-slide-5 { background-image: url('images/tile/process_consultation.webp') !important; }

  /* Layout */
  .container {
    padding: 0 var(--spacing-md);
  }

  section {
    padding: 1.5rem 0;
  }

  .how-it-works-section {
    padding: 1.25rem 0 0 !important;
  }

  /* Header - Mobile Layout (Scrolls away) */
  header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(4, 2, 103, 0.12);
  }

  /* Remove padding as header is absolute overlay */
  body {
    padding-top: 0;
  }

  .top-bar {
    display: none;
  }

  .main-header {
    padding: 0;
    /* Remove padding as we use height flex centering */
    height: 72px;
  }

  .main-header .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 0 1.25rem;
  }

  .mobile-menu-btn {
    display: flex;
  }

  nav {
    display: none;
    position: fixed;
    top: 72px;
    /* Height of header */
    left: 0;
    right: 0;
    bottom: 0;
    /* Full height */
    background: #FFFFFF;
    border-top: 1px solid rgba(4, 2, 103, 0.12);
    padding: 0;
    z-index: 9998;
    overflow-y: auto;
    /* Allow scrolling within menu */
  }

  nav.active {
    display: block;
  }

  nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  nav li {
    width: 100%;
    border-bottom: 1px solid rgba(4, 2, 103, 0.10);
  }

  nav li:last-child {
    border-bottom: none;
  }

  nav a {
    padding: 1.25rem 1.5rem;
    width: 100%;
    color: var(--color-navy) !important;
    background-color: transparent;
    font-weight: 500;
    font-size: 1.1rem;
    border-left: 4px solid transparent;
  }

  /* Fix mobile nav hover state */
  nav a:hover {
    color: var(--color-primary) !important;
    background-color: rgba(206, 151, 50, 0.10);
    border-left-color: var(--color-primary);
  }

  /* Fix active state - High Contrast */
  nav a.active:not(.btn-cta) {
    background-color: rgba(206, 151, 50, 0.12);
    color: var(--color-navy) !important;
    font-weight: 700;
    border-left-color: var(--color-primary);
  }

  nav .btn-cta {
    margin: 1.5rem;
    width: calc(100% - 3rem);
    /* Full width minus margins */
    text-align: center;
    padding: 1rem;
    display: block;
  }

  /* CTA styling */
  nav .btn-cta,
  nav .btn-cta:hover,
  nav .btn-cta.active {
    background-color: var(--color-volt) !important;
    color: #FFFFFF !important;
    border-left: none;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* Dropdowns on Mobile - Always Expanded */
  .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: 1.5rem;
    display: block;
    /* Always show sub-items on mobile */
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0.5rem;
  }

  nav li:hover .dropdown-menu {
    display: block;
  }

  .dropdown-menu li {
    border-bottom: none;
  }

  .dropdown-menu a {
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: #BDBDBD;
    /* Ensure visibility */
    opacity: 1;
  }

  .dropdown-menu a:hover {
    background: transparent;
    color: var(--color-volt);
    padding-left: 5px;
    /* Slight indent on hover */
  }

  /* Comparison Table */
  .compare-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Flex/Grid Adjustments */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .post-container {
    flex-direction: column;
  }

  .logo {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  .logo img {
    height: 48px;
    /* Optimized for mobile visibility */
  }

  .logo-main {
    font-size: 1.1rem;
    letter-spacing: -0.3px;
  }

  .logo-tagline {
    font-size: 0.5rem;
    letter-spacing: 0.5px;
  }

  /* Show logo text on mobile - FORCE DISPLAY */
  .main-header .logo-text {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    /* Align right */
  }

  .logo {
    gap: 0.5rem;
  }

  /* Smaller white logo centered/right */
  .logo-main {
    color: #FFFFFF !important;
    font-size: 1.1rem;
    /* Smaller size */
    line-height: 1;
    text-align: right;
  }

  .logo-tagline {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.6rem;
    /* Smaller size */
    margin-top: 2px;
    text-align: right;
    /* Explicit right alignment */
  }

}

/* How It Works Section */
.how-it-works-section {
  background-color: var(--color-white);
  padding: 2rem 0 0.4rem;
  position: relative;
  color: var(--color-navy);
}

.how-it-works-section .section-header {
  text-align: center;
  margin-bottom: 1.25rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.how-it-works-section .section-header h2 {
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
  color: var(--color-navy);
  font-size: 2rem;
}

.how-it-works-section .section-header h2::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--color-volt);
  border-radius: 2px;
}

.how-it-works-section .section-header p {
  color: #4B5563;
  font-size: 0.9rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.75rem;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .how-it-works-section .section-header h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    letter-spacing: normal;
  }

  .how-it-works-section .section-header h2::after {
    bottom: -0.4rem;
    width: 40px;
    height: 3px;
  }

  .how-it-works-section .section-header p {
    font-size: 0.85rem;
    padding: 0 1rem;
  }
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.process-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.process-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--color-volt);
}

.process-image-wrapper {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.process-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.process-card:hover .process-image {
  transform: scale(1.05);
}

.step-number {
  position: absolute;
  top: 178px;
  left: 20px;
  width: 44px;
  height: 44px;
  background: var(--color-volt);
  color: var(--color-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 10;
  border: 3px solid white;
}

.process-content {
  padding: 1.75rem 1.25rem 1rem;
  flex-grow: 1;
  text-align: center;
}

.process-content h3 {
  margin-bottom: 0.6rem;
  color: var(--color-navy);
  font-size: 1.2rem;
}

.process-content p {
  color: var(--color-text-muted);
  line-height: 1.55;
  font-size: 0.9rem;
}

/* Mobile Carousel Implementation for "How It Works" */
@media (max-width: 768px) {

  /* Section padding optimization */
  .how-it-works-section {
    padding: 1.25rem 0 0 !important;
  }

  .how-it-works-section .section-header {
    margin-bottom: 0.5rem !important;
  }

  .how-it-works-section .section-header h2 {
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
  }

  .how-it-works-section .section-header p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 0.5rem;
  }

  /* Carousel grid */
  .process-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    margin-top: 0;
    padding-bottom: 0.75rem;

    /* Full bleed logic */
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: calc(100% + 2rem);
    max-width: 100vw;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
  }

  .process-grid::-webkit-scrollbar {
    display: none;
  }

  .how-it-works-cta {
    display: none;
  }

  /* Card optimization */
  .process-card {
    min-width: 85%;
    /* Peeking effect */
    max-width: 85%;
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* Force one-card-at-a-time scrolling */
    margin-right: 0;
  }

  .process-image-wrapper {
    height: 170px;
  }

  .step-number {
    top: 151px;
    width: 38px;
    height: 38px;
    font-size: 1rem;
    border: 3px solid white;
  }

  .process-content {
    padding: 1.5rem 1rem 1rem;
  }

  /* Typography optimization */
  .process-content h3 {
    font-size: 1.25rem;
    /* 20px - optimal for mobile H3 */
    margin-bottom: 0.75rem;
    /* Tighter spacing */
    line-height: 1.2;
  }

  .process-content p {
    font-size: 0.9375rem;
    /* 15px */
    line-height: 1.6;
    /* Better readability */
  }
}

/* About Us Section */
.about-section {
  background-color: var(--color-white);
  padding: 3rem 0;
  /* Reduced from 8rem */
  position: relative;
  overflow: hidden;
  color: var(--color-navy);
}

.about-section .section-badge {
  color: var(--color-navy);
  background-color: rgba(15, 23, 42, 0.1);
}

/* Decorative background element */
.about-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 10% 20%, rgba(206, 151, 50, 0.03) 0%, transparent 20%);
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 6rem;
  align-items: center;
}

.section-badge {
  display: inline-block;
  background-color: rgba(15, 23, 42, 0.05);
  color: var(--color-text-main);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--color-volt);
}

.about-content h2 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  color: var(--color-navy);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.about-content .lead-text {
  font-size: 1.05rem;
  color: var(--color-navy);
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.about-content p {
  color: #4B5563;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.about-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: nowrap;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-volt);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.about-image-wrapper {
  position: relative;
  z-index: 1;
}

.image-backdrop {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 100%;
  height: 100%;
  background-color: var(--color-navy);
  border-radius: 12px;
  z-index: -1;
}

.about-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: transform 0.5s ease;
}

.about-image-wrapper:hover .about-image {
  transform: translateY(-5px) translateX(-5px);
}

.about-images-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-image-item {
  position: relative;
}

.image-backdrop-half {
  position: absolute;
  top: 8px;
  right: -10px;
  width: 100%;
  height: 100%;
  background-color: var(--color-navy);
  border-radius: 12px;
  z-index: 0;
}

.about-image-half {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.5s ease;
  position: relative;
  z-index: 1;
}

.about-image-wrapper:hover .about-image-half {
  transform: translateY(-4px) translateX(-4px);
}

@media (max-width: 600px) {
  .about-images-stack {
    flex-direction: row;
    gap: 10px;
  }

  .about-image-item {
    flex: 1 1 0;
    min-width: 0;
  }

  .about-image-half {
    height: 150px;
    width: 100%;
    flex: none;
  }

  .image-backdrop-half {
    top: 5px;
    right: -5px;
  }
}

@media (max-width: 900px) {
  .about-section {
    padding: 1.5rem 0;
    /* Reduced from 4rem */
    position: relative;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    /* Reduced from 4rem for tighter mobile spacing */
  }

  .about-content {
    order: 1;
  }

  .about-image-wrapper {
    order: 2;
    margin-right: 20px;
  }

  /* Typography Optimizations */
  .about-content h2 {
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: 0.85rem;
  }

  .about-content .lead-text {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
  }

  .about-content p {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
  }

  .section-badge {
    font-size: 0.6875rem;
    /* 11px - smaller for mobile */
    padding: 5px 10px;
    margin-bottom: 1rem;
  }

  /* Stats Optimization */
  .about-stats {
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    padding-right: 0;
    flex-wrap: nowrap;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.65rem;
  }
}

/* Value Prop / Comparison Section */
/* Value Proposition Section - Why Choose Mountaineer Tile & Remodeling */
.value-prop-section {
  background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 50%, #f8fafc 100%);
  padding: 3rem 0;
  /* Reduced from 6rem */
  position: relative;
  overflow: hidden;
}

/* Decorative background elements */
.value-prop-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(206, 151, 50, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.value-prop-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.value-prop-section .container {
  position: relative;
  z-index: 2;
}

.value-prop-section .section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.value-prop-section .section-badge {
  background: linear-gradient(135deg, rgba(206, 151, 50, 0.15) 0%, rgba(206, 151, 50, 0.08) 100%);
  color: var(--color-navy);
  font-weight: 800;
  letter-spacing: 2px;
  padding: 8px 20px;
  border-radius: 6px;
  border-left: 4px solid var(--color-volt);
  display: inline-block;
  box-shadow: 0 2px 8px rgba(206, 151, 50, 0.15);
}

/* Recent Work — finished project photography, three up on desktop */
.recent-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.recent-work-item {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.recent-work-item img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.recent-work-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.1rem 0.9rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, transparent 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recent-work-item:hover {
  transform: translateY(-6px);
}

.recent-work-item:hover img {
  transform: scale(1.05);
}

@media (max-width: 992px) {
  .recent-work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* On phones the cards become a horizontal swipe rail instead of a tall stack.
   Negative margins cancel the .container padding so the row runs edge to edge,
   and the inner padding brings card one back into line with the heading above
   it. Cards sit at 82% so the next one peeks in — that peek is the only hint
   people get that the row scrolls, so don't take it to 100%. */
@media (max-width: 600px) {
  .recent-work-grid {
    /* Cancels whatever side padding the parent has, so the rail can run to the
       screen edge. The section sits in a padded .container on the homepage but
       in an unpadded wrapper on contact.html — hence the variable. */
    --rail-gutter: 0px;

    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rail-gutter);
    /* width:100% from the base rule would pin the rail to the parent's content
       box and strand the negative margin on the right. */
    width: auto;
    margin: 0 calc(var(--rail-gutter) * -1);
    /* overflow-x:auto forces overflow-y to auto as well, so the card shadows
       need room here or they get clipped and add a vertical scrollbar. */
    padding: 6px var(--rail-gutter) 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .container > .recent-work-grid {
    --rail-gutter: var(--spacing-md);
  }

  .recent-work-grid::-webkit-scrollbar {
    display: none;
  }

  .recent-work-item {
    scroll-snap-align: start;
  }

  /* The hover lift sticks after a tap and pushes the card out of the rail. */
  .recent-work-item:hover {
    transform: none;
  }

  .recent-work-item img {
    height: 220px;
  }
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  align-items: stretch;
}

/* Competitor Cards */
.comparison-card {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.comparison-card.competitor {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  opacity: 0.95;
}

.comparison-card.competitor:hover {
  transform: translateY(-8px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.08);
  opacity: 1;
}

.comparison-card.competitor:hover .card-icon {
  transform: scale(1.1);
}

/* Featured Card - Mountaineer Tile & Remodeling */
.comparison-card.featured {
  background: linear-gradient(135deg, var(--color-navy) 0%, #0A0650 55%, #16103A 100%);
  /* --color-blue is actually deep gold (#A57928); navy-to-gold at 135deg
     passes through a muddy brown. Stay in the navy family instead. */
  border: 3px solid var(--color-volt);
  transform: scale(1.08);
  z-index: 10;
  box-shadow: 0 20px 40px -8px rgba(14, 27, 42, 0.3),
    0 0 0 1px rgba(206, 151, 50, 0.2),
    0 0 10px rgba(206, 151, 50, 0.15);
  position: relative;
  overflow: visible;
}

.comparison-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(206, 151, 50, 0.05) 0%, transparent 100%);
  border-radius: 14px;
  pointer-events: none;
}

.comparison-card.featured:hover {
  transform: scale(1.08) translateY(-8px);
  box-shadow: 0 28px 50px -12px rgba(15, 23, 42, 0.4),
    0 0 0 1px rgba(206, 151, 50, 0.3),
    0 0 15px rgba(206, 151, 50, 0.25);
  border-color: var(--color-volt);
}

.comparison-card.featured h3 {
  color: white;
  font-size: 1.5rem;
}

.comparison-card.featured p {
  color: var(--color-mist);
}

.comparison-card.featured .card-icon {
  filter: drop-shadow(0 0 20px rgba(206, 151, 50, 0.4));
}

.comparison-card.featured:hover .card-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 30px rgba(206, 151, 50, 0.6));
}

.comparison-card.featured .feature-list {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.comparison-card.featured .feature-list li {
  color: var(--color-mist);
}

.comparison-card.featured .feature-list li.check {
  color: white;
  font-weight: 600;
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-volt) 0%, var(--color-volt) 100%);
  color: var(--color-navy);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 6px 20px;
  border-radius: 24px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(206, 151, 50, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 1.25rem;
  display: block;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-card h3 {
  color: var(--color-navy);
  font-size: 1.35rem;
  margin-bottom: 1rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.comparison-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
  line-height: 1.6;
  flex-grow: 1;
}

.feature-list {
  list-style: none;
  text-align: left;
  border-top: 2px solid #e2e8f0;
  padding-top: 1.5rem;
  margin-top: auto;
}

.feature-list li {
  margin-bottom: 0.85rem;
  padding-left: 2rem;
  position: relative;
  color: var(--color-graphite);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.feature-list li:hover {
  padding-left: 2.25rem;
}

.feature-list li.check::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 800;
  font-size: 1.1rem;
  background: rgba(22, 163, 74, 0.1);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.feature-list li.cross::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--color-warning);
  font-weight: 800;
  font-size: 1.1rem;
  background: rgba(220, 38, 38, 0.1);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.feature-list li.check {
  color: var(--color-navy);
  font-weight: 600;
}

@media (max-width: 900px) {
  .value-prop-section {
    padding: 1.5rem 0;
    /* Reduced from 4rem for mobile */
  }

  .comparison-grid {
    gap: 1.5rem;
  }

  .comparison-card.featured {
    transform: scale(1);
    order: -1;
    margin-bottom: 1.5rem;
  }

  .comparison-card.featured:hover {
    transform: translateY(-8px);
  }
}

/* CTA Banner */
.cta-banner {
  background: linear-gradient(135deg, #2A2A2A 0%, #1A1A1A 100%);
  /* Lighter gradient for better contrast */
  padding: 2rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: white;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
  /* Gold accent instead of blue */
  pointer-events: none;
}

.cta-banner h2 {
  color: #F5F5F5;
  /* Bright white for readability */
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.cta-banner p {
  color: #BDBDBD;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

/* Service Area Section */
.service-area-section {
  background-color: #FFFFFF;
  padding: 2rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.service-area-header {
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.service-area-header h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--color-navy);
}

.service-area-header p {
  color: #4B5563;
  font-size: 0.85rem;
}

.service-area-section .section-badge {
  color: var(--color-navy);
  background-color: rgba(15, 23, 42, 0.1);
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.service-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--color-navy);
  font-weight: 500;
}

.service-list li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-color: var(--color-volt);
  color: #fff;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.service-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

@media (max-width: 768px) {
  .service-area-section {
    padding: 1.5rem 0;
    /* Reduced from 4rem */
  }

  .service-area-header {
    margin-bottom: 2rem;
  }

  .service-area-header h2 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
  }
}

.location-card {
  background: white;
  border: 1px solid var(--color-mist);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.location-card.clean-card {
  padding: 2.5rem 1.5rem;
  align-items: center;
  text-align: center;
}

.location-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--color-volt);
}

.card-icon-wrapper {
  margin-bottom: 1.5rem;
}

.icon-circle {
  width: 72px;
  height: 72px;
  background: rgba(206, 151, 50, 0.1);
  color: var(--color-volt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.location-card:hover .icon-circle {
  background: var(--color-volt);
  color: var(--color-navy);
  transform: scale(1.1) rotate(5deg);
}

.location-content {
  padding: 0;
  width: 100%;
}

.location-content h3 {
  color: var(--color-navy);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.location-content p {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

.location-details {
  font-size: 0.9rem;
  margin-top: 0.75rem;
  opacity: 0.8;
}

/* Mobile Carousel Implementation for "AREA OF OPERATIONS" */
@media (max-width: 768px) {
  .service-locations-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding-bottom: 2rem;

    /* Full bleed logic */
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: calc(100% + 2rem);
    max-width: 100vw;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .service-locations-grid::-webkit-scrollbar {
    display: none;
  }

  .location-card {
    min-width: 85%;
    max-width: 85%;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
}

/* Mobile Carousel for "Why Choose Mountaineer Tile & Remodeling" (Comparison) */
/* Mobile Carousel for "Why Choose Mountaineer Tile & Remodeling" (Comparison) */
@media (max-width: 768px) {
  .value-prop-section .comparison-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    /* Changed from mandatory for smoother scrolling */
    gap: 1.5rem;
    margin-top: 0;
    /* Override desktop 3rem - eliminates wasted space */
    padding-bottom: 2rem;
    scroll-behavior: smooth;
    /* Smooth scrolling */

    /* Full bleed logic */
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: calc(100% + 2rem);
    max-width: 100vw;

    /* Extra top padding for the "Recommended" badge */
    padding-top: 1.5rem;
    /* Reduced from 3rem - tighter spacing */

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .value-prop-section .comparison-grid::-webkit-scrollbar {
    display: none;
  }

  .value-prop-section .comparison-grid .comparison-card {
    min-width: 85%;
    max-width: 85%;
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* Force stopping at each card */
    height: auto;
    margin-right: 0;
    padding: 1.5rem 1.25rem;
    /* 24px/20px - optimized from 40px/32px */
  }

  /* Typography optimizations for mobile */
  .value-prop-section .comparison-grid .comparison-card h3 {
    font-size: 1.25rem;
    /* 20px - optimal for mobile H3 */
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  .value-prop-section .comparison-grid .comparison-card p {
    font-size: 0.9375rem;
    /* 15px - balanced for mobile */
    line-height: 1.5;
    /* Better readability */
    margin-bottom: 1.25rem;
  }

  .value-prop-section .comparison-grid .comparison-card .card-icon {
    font-size: 2.5rem;
    /* Reduced from 3rem */
    margin-bottom: 1rem;
  }

  .value-prop-section .comparison-grid .comparison-card .feature-list {
    padding-top: 1rem;
    /* Reduced from 1.5rem */
    margin-top: 0.75rem;
  }

  .value-prop-section .comparison-grid .comparison-card .feature-list li {
    font-size: 0.875rem;
    /* 14px for list items */
    line-height: 1.5;
    margin-bottom: 0.625rem;
    /* Tighter spacing */
  }

  /* Reset previous mobile stack behavior */
  .comparison-card.featured {
    order: -1;
    margin-bottom: 0;
    transform: none !important;
    border: 3px solid var(--color-volt);
    /* Ensure border remains visible */
  }

  .comparison-card.featured:hover {
    transform: none !important;
  }

  /* Adjust popular badge for reduced padding */
  .value-prop-section .comparison-grid .comparison-card .popular-badge {
    top: -12px;
    /* Adjusted for new card padding */
    font-size: 0.65rem;
    /* Slightly smaller for mobile */
    padding: 5px 16px;
  }

  /* Enhanced Scroll Indicators */
  .mobile-scroll-indicator {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* Increased from 8px */
    margin-top: 1.5rem;
    /* More breathing room */
    margin-bottom: 2rem;
    padding: 0.5rem 0;
    /* Increase touch area */
  }

  .indicator-dot {
    width: 10px;
    /* Larger from 8px */
    height: 10px;
    border-radius: 50%;
    background-color: rgba(148, 163, 184, 0.4);
    /* Better contrast */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .indicator-dot.active {
    background-color: var(--color-volt);
    width: 28px;
    /* Increased from 24px */
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(206, 151, 50, 0.3);
    /* Subtle glow */
  }

  /* Section header mobile optimization */
  .value-prop-section .section-header {
    margin-bottom: 1rem;
    /* Reduced from 2rem - minimizes wasted space between description and cards */
  }

  .value-prop-section .section-header h2 {
    font-size: 1.75rem;
    /* 28px for mobile */
    margin-bottom: 0.75rem;
  }

  .value-prop-section .section-header p {
    font-size: 1rem;
    /* 16px - optimal mobile readability */
    line-height: 1.5;
  }

  .value-prop-section .section-badge {
    font-size: 0.6875rem;
    /* 11px - slightly smaller */
    padding: 6px 16px;
    letter-spacing: 1.5px;
  }
}

/* Hide indicators on desktop */
@media (min-width: 769px) {
  .mobile-scroll-indicator {
    display: none;
  }
}



@media (max-width: 768px) {
  .cta-banner {
    padding: 2rem 1.25rem;
  }

  .cta-banner h2 {
    font-size: 1.45rem;
    line-height: 1.25;
    margin-bottom: 0.75rem;
  }

  .cta-banner p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
  }

  .cta-banner .btn {
    width: 100%;
    display: block;
    text-align: center;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
  }
}

/* Before & After Sections */
.ba-section {
  padding: 3rem 0;
  /* Reduced from 6rem */
  background-color: #F8FAFC;
}

.ba-section.alt-bg {
  background-color: #FFFFFF;
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.ba-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.ba-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: rgba(206, 151, 50, 0.3);
}

.ba-image-container {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.ba-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-out;
}

.ba-card:hover .ba-image {
  transform: scale(1.03);
}

.ba-image.after {
  opacity: 0;
}

/* Toggle Logic */
.ba-toggle-input {
  display: none;
}

/* We use sibling selector to target the card from the input */
.ba-toggle-input:checked+.ba-card .ba-image.after {
  opacity: 1;
}

.ba-toggle-input:checked+.ba-card .ba-image.before {
  opacity: 0;
}

.ba-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  background: rgba(15, 23, 42, 0.85);
  padding: 5px;
  border-radius: 40px;
  z-index: 10;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ba-label {
  padding: 8px 20px;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  position: relative;
  overflow: hidden;
}

.ba-label:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

/* Active state for labels based on input checked status */
.ba-toggle-input:not(:checked)+.ba-card .ba-label.before-label,
.ba-toggle-input:checked+.ba-card .ba-label.after-label {
  background: var(--color-volt);
  color: var(--color-navy);
  box-shadow: 0 2px 8px rgba(206, 151, 50, 0.3);
}

.ba-content {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: white;
  position: relative;
  z-index: 2;
}

.ba-content h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
  color: var(--color-navy);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.ba-content p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  line-height: 1.6;
}

.ba-tags {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
}

.ba-tag {
  background: #F1F5F9;
  color: var(--color-navy);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.ba-card:hover .ba-tag {
  background: rgba(206, 151, 50, 0.1);
  color: var(--color-navy);
}

/* Option 2: Featured + Mini Gallery */
.ba-featured-container {
  margin-top: 2.5rem;
}

.ba-featured-card {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  margin-bottom: 2.5rem;
  border: 1px solid rgba(148, 163, 184, 0.1);
  transition: transform 0.4s ease;
}

.ba-featured-card:hover {
  transform: translateY(-5px);
  border-color: rgba(206, 151, 50, 0.3);
}

.ba-featured-card .ba-image-container {
  height: 500px;
}

.ba-featured-content {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.ba-featured-content h3 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-navy);
  line-height: 1.1;
}

.ba-featured-content p {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.ba-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.ba-mini-grid .ba-image-container {
  height: 220px;
}

.ba-mini-grid .ba-content {
  padding: 1.5rem;
}

.ba-mini-grid .ba-content h3 {
  font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .ba-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .ba-featured-card {
    grid-template-columns: 1fr;
  }

  .ba-featured-card .ba-image-container {
    height: 400px;
  }

  .ba-featured-content {
    padding: 2.5rem;
  }
}

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

  .ba-mini-grid {
    grid-template-columns: 1fr;
  }

  .ba-section {
    padding: 1.5rem 0;
    /* Reduced from 4rem for mobile */
  }

  .ba-featured-content h3 {
    font-size: 1.75rem;
  }

  .ba-image-container {
    height: 240px;
  }
}


/* Utility */
.text-center {
  text-align: center;
}

/* New Mission Button */
.btn-mission {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border: 2px solid var(--color-volt);
  padding: 16px 32px;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.btn-mission:hover {
  background-color: var(--color-volt);
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}


/* Mission Results Section (Before & After) */
.mission-results-section {
  background-color: transparent;
  /* Changed from var(--color-white) to match parent section and remove container appearance */
  padding: 3.2rem 0 4rem 0;
  position: relative;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 40%);
}

/* Hide mobile carousel navigation on desktop */
.carousel-nav-mobile {
  display: none;
}

.mission-results-section .section-header {
  margin-bottom: 2rem;
}

.mission-results-section .section-badge {
  background: #CE9732;
  color: #FFFFFF;
  border-left: none;
  display: inline-block;
  padding: 0.35rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(206, 151, 50, 0.25);
}

.mission-results-section .section-header h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: #FFFFFF !important;
}

.mission-results-section .section-header p {
  font-size: 0.9rem;
  color: #BDBDBD;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}

.comparison-grid.two-col-grid {
  grid-template-columns: repeat(2, 1fr);
}

.comparison-card {
  /* Completely transparent container - no visual styling on desktop */
  display: flex;
  flex-direction: column;
}

/* Ensure no container styling on larger screens for before/after section only */
@media (min-width: 901px) {
  .mission-results-section .comparison-card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

.comparison-view {
  position: relative;
  width: 100%;
  padding-bottom: 80%;
  /* Increased from 65% for larger, more prominent images on desktop */
  overflow: hidden;
  user-select: none;
  /* touch-action: pan-y; removed to allow horizontal carousel swipe */
  touch-action: auto;
  cursor: ew-resize;
  border-radius: 8px;
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(206, 151, 50, 0.3);
}

.comp-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Before Image (Overlay) */
.before-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  border-right: 2px solid white;
  /* Will-change for performance */
  will-change: width;
}

.before-img {
  position: absolute;
  top: 0;
  left: 0;
  /* Width is set dynamically via JavaScript to prevent zoom effect */
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
}

/* Labels */
.label-badge {
  position: absolute;
  top: 0.75rem;
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.8);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 3px;
  letter-spacing: 0.05em;
  z-index: 3;
  pointer-events: none;
}

.before-label {
  left: 0.75rem;
}

.after-label {
  right: 0.75rem;
  background: #CE9732;
  color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Slider Handle */
.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 40px;
  margin-left: -20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  /* Changed from none to allow drag events */
}

.handle-line {
  position: absolute;
  width: 2px;
  height: 100%;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.handle-circle {
  width: 40px;
  height: 40px;
  background: var(--color-volt);
  border: 3px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.handle-circle svg {
  width: 20px;
  height: 20px;
  color: var(--color-navy);
}

.comp-info {
  padding: 0.75rem 0.85rem 0.7rem;
  background: white;
  text-align: center;
}

.comp-info h3 {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
  color: var(--color-navy);
  line-height: 1.25;
}

.comp-info p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  margin-bottom: 0;
}

/* Mobile Responsiveness for Comparison */
@media (max-width: 900px) {
  .comparison-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  /* Horizontal Slideshow for Real Results on Mobile */
  .mission-results-section .comparison-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    /* Reduced top/bottom from 1rem/2rem */

    /* Full bleed adjustments */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mission-results-section .comparison-grid::-webkit-scrollbar {
    display: none;
  }

  .mission-results-section .comparison-card {
    min-width: 85vw;
    /* Show part of next card */
    scroll-snap-align: center;
    margin-bottom: 0;
    /* Override potential margins */
  }

  .mission-results-section {
    padding: 1rem 0 1rem 0;
    /* Reduced from 1.5rem */
  }

  .mission-results-section .section-header {
    margin-bottom: 0.35rem !important;
  }

  .mission-results-section .section-header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .mission-results-section .section-badge {
    margin-bottom: 0.75rem !important;
  }

  /* Reduce Aspect Ratio on Mobile to save vertical space */
  .mission-results-section .comparison-view {
    padding-bottom: 60%;
    /* Reduced from 80% - keeps images shorter */
  }

  /* Fix for squashed images on mobile: 
     Force the before-image to match the card width (85vw) 
     and ensure object-fit works by resetting constraints. */
  .mission-results-section .before-overlay .before-img {
    width: 85vw !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    /* Ensure it doesn't get squashed */
    display: block !important;
  }

  /* Ensure after-image also behaves */
  .mission-results-section .after-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Mobile Carousel Navigation */
  .carousel-nav-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    /* Reduced from 2rem */
    margin-bottom: 0.5rem;
    /* Added to reduce bottom space */
    padding: 0 1rem;
  }

  .carousel-arrow {
    background: rgba(206, 151, 50, 0.15);
    border: 2px solid #CE9732;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #CE9732;
    padding: 0;
  }

  .carousel-arrow:active {
    background: #CE9732;
    color: #fff;
    transform: scale(0.95);
  }

  .carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .carousel-arrow svg {
    width: 20px;
    height: 20px;
  }

  .carousel-dots {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .carousel-dot.active {
    background: #CE9732;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 10px rgba(206, 151, 50, 0.5);
  }

}

@media (max-width: 600px) {

  .comparison-grid,
  .comparison-grid.two-col-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .mission-results-section .comparison-card {
    padding: 0;
    /* Removing padding to allow edge-to-edge images on mobile */
    border: none;
  }

  .mission-results-section .comparison-view {
    border-radius: 12px;
    /* Ensure images have rounded corners */
  }

  /* Make handle easier to grab on mobile */
  .handle-circle {
    width: 48px;
    height: 48px;
  }

  .mission-results-section {
    padding: 1rem 0 0.75rem;
  }

  .mission-results-section .section-header {
    margin-bottom: 0.35rem !important;
  }

  .mission-results-section .section-header h2 {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
  }

  .mission-results-section .section-header p {
    font-size: 0.9rem;
    margin-bottom: 0 !important;
  }

  .comparison-view {
    padding-bottom: 70%;
    /* Slightly taller on mobile for better visibility */
  }

  .comp-info {
    padding: 0.65rem 0.75rem 0.6rem;
  }

  .comp-info h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }

}

/* Hero Comparison Grid (Contact Page) */
.hero-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  /* Increased gap slightly for better breathing room */
  width: 100%;
  max-width: 1600px;
  /* Constrain width so it's not infinite on huge screens */
  margin: 0 auto;
  /* Center the grid */
  padding: 0 3rem;
  /* Add gutters on left and right */
}

.hero-card {
  position: relative;
  width: 100%;

  /* Reset inherited styles from .comparison-card */
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.hero-card .comparison-view {
  padding-bottom: 75%;
  border-radius: 8px;
  /* Subtle radius */
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  /* Ensure image stays inside radius */
}

.hero-card .comp-img {
  object-fit: cover;
}

/* Mobile Carousel for Hero Section */
@media (max-width: 900px) {
  .hero-comparison-grid {
    display: flex;
    /* Reset from Grid to Flex for carousel */
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding: 1rem 1rem 2rem 1rem;

    /* Full bleed adjustments */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hero-comparison-grid::-webkit-scrollbar {
    display: none;
  }

  .hero-card {
    min-width: 85vw;
    /* Show part of next card */
    scroll-snap-align: center;
  }

  .hero-card .comparison-view {
    padding-bottom: 75%;
    /* Taller on mobile for better visibility */
  }
}

/* =========================================
   GALLERY PAGE STYLES
   ========================================= */

/* Gallery Page Header */
.gallery-header {
  background: linear-gradient(135deg, var(--color-navy) 0%, #0A0650 55%, #16103A 100%);
  /* --color-blue is actually deep gold (#A57928); navy-to-gold at 135deg
     passes through a muddy brown. Stay in the navy family instead. */
  padding: 4rem 0 3rem;
  text-align: center;
  color: white;
}

.gallery-header h1 {
  color: white;
  margin-bottom: 1rem;
}

.gallery-header p {
  color: var(--color-mist);
  font-size: 1.1rem;
}

/* Gallery Filters */
.gallery-filters {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0 2rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 24px;
  border: 2px solid var(--color-border);
  background: white;
  color: var(--color-navy);
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-btn:hover {
  border-color: var(--color-volt);
  color: var(--color-volt);
  transform: translateY(-2px);
}

.filter-btn.active {
  background: var(--color-volt);
  border-color: var(--color-volt);
  color: white;
  box-shadow: 0 4px 12px rgba(206, 151, 50, 0.3);
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Gallery Item */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.gallery-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}

/* Gallery Caption */
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  color: white;
  padding: 2rem 1.5rem 1.5rem;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-caption {
  transform: translateY(0);
}

.gallery-caption h4 {
  color: white;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.gallery-caption p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  margin: 0;
}

/* Lightbox Modal */
.lightbox-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-content-wrapper {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  color: white;
  font-size: 1.1rem;
  margin-top: 1.5rem;
  text-align: center;
  font-weight: 500;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 3rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10001;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.lightbox-close:hover {
  transform: scale(1.2);
  color: var(--color-volt);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.lightbox-nav:hover {
  background: rgba(206, 151, 50, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
  left: 30px;
}

.lightbox-next {
  right: 30px;
}

/* Mobile Gallery Adjustments */
@media (max-width: 768px) {
  .gallery-header {
    padding: 2.5rem 0 2rem;
  }

  /* Horizontal scroll strip instead of wrapping rows */
  .gallery-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 0.5rem 1rem 1rem;
    margin: 1.5rem -1rem 1.5rem;
    gap: 0.6rem;
  }
  .gallery-filters::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  /* 2-column grid on mobile for a denser, app-like feel */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .gallery-img {
    height: 160px;
  }

  /* Always show caption on touch devices — hover doesn't exist */
  .gallery-caption {
    transform: translateY(0);
    padding: 1rem 0.75rem 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 60%, transparent);
  }

  .gallery-caption h4 {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }

  .gallery-caption p {
    font-size: 0.7rem;
  }

  /* Disable hover lift on touch */
  .gallery-item:hover {
    transform: none;
  }

  .lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
    font-size: 2.5rem;
  }

  .lightbox-image {
    max-height: 70vh;
  }

  .lightbox-caption {
    font-size: 0.9rem;
    margin-top: 0.75rem;
    padding: 0 1rem;
  }
}

/* =========================================
   REVIEWS & TESTIMONIALS SECTION
   ========================================= */

.reviews-section {
  background-color: var(--color-white);
  padding: 2rem 0 0.5rem;
  position: relative;
  color: var(--color-navy);
}

.reviews-section .section-badge {
  color: var(--color-navy);
  background-color: rgba(15, 23, 42, 0.1);
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.reviews-section h2 {
  color: var(--color-navy);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.reviews-section .section-header p {
  color: #4B5563;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
  .reviews-section {
    padding: 2rem 0 1rem;
  }

  .reviews-section .section-badge {
    font-size: 0.7rem;
    margin-bottom: 0.6rem;
  }

  .reviews-section h2 {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
    line-height: 1.25;
  }

  .reviews-section .section-header p {
    font-size: 0.85rem;
    margin-bottom: 0;
  }

  .reviews-section .section-header {
    padding: 0 1rem;
    margin-bottom: 1rem;
  }
}

.reviews-container-wrapper {
  position: relative;
  margin: 0 -1rem;
  /* Negative margin to fade to edges on mobile */
}

.reviews-grid {
  display: flex;
  gap: 2.5rem;
  overflow-x: auto;
  padding: 0.5rem 1.5rem 0;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  align-items: flex-start;
  /* Prevent cards from stretching to match height of expanded card */
}

.reviews-grid::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari/Webkit */
}

/* Base Review Card - Shared Styles */
.review-card {
  background: #FFFFFF;
  border-radius: 12px;
  /* Slightly tighter radius for a modern feel */
  padding: 2rem;
  /* Increased padding for breathing room */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  /* Softer, more diffuse shadow */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Very subtle border */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* Ensure nothing spills out */
}

/* Hover State */
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(206, 151, 50, 0.3);
  /* Subtle highlight using brand color on hover */
}

/* Header Layout */
.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Reviewer Avatar */
.reviewer-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-navy), #334155);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 16px;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.reviewer-info {
  flex-grow: 1;
  overflow: hidden;
  /* Prevent long names from breaking layout */
}

.reviewer-name {
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1rem;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.review-stars {
  color: #F59E0B;
  letter-spacing: 2px;
  font-size: 0.9rem;
}

.review-date {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Google Icon */
.google-icon {
  width: 24px;
  height: 24px;
  opacity: 1;
  margin-left: 8px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

/* Review Body Text */
.review-body {
  color: var(--color-navy);
  font-size: 0.975rem;
  line-height: 1.7;
  flex-grow: 1;
  position: relative;
}

.review-body p {
  margin: 0;
}

/* Read More Button */
.read-more-btn {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.75rem;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  transition: color 0.2s ease;
}

.read-more-btn:hover {
  color: var(--color-volt);
  text-decoration: none;
}

/* Carousel Specific Overrides */
.reviews-grid .review-card {
  min-width: 360px;
  max-width: 360px;
  scroll-snap-align: center;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Reviews Page Grid Layout */
.all-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 2.5rem;
  padding: 1rem 0;
  align-items: start;
  /* Prevent cards from stretching */
}

.all-reviews-grid .review-card {
  width: 100%;
  min-width: 0;
}


/* Fade Effects for Horizontal Scroll (Carousel) */
.reviews-fade-left,
.reviews-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 10;
}

.reviews-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--color-off-white), transparent);
}

.reviews-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--color-off-white), transparent);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .all-reviews-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .review-card {
    padding: 1.5rem;
  }

  .reviews-grid .review-card {
    min-width: 85vw;
    max-width: 85vw;
  }

  .reviews-grid {
    gap: 1rem;
    padding: 0.5rem 1.25rem 1.5rem;
    scroll-padding-left: 1.25rem;
  }
}

/* Reviews Page Header */
.page-header {
  background-color: var(--color-navy);
  padding: 6rem 0 5rem;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 70% 20%, rgba(206, 151, 50, 0.1) 0%, transparent 40%);
  pointer-events: none;
}

.page-header h1 {
  font-size: 3rem;
  margin-top: 1rem;
  color: white;
  margin-bottom: 1rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.page-header p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.25rem;
  line-height: 1.6;
}

.page-header .section-badge {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid var(--color-volt);
  display: inline-block;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
}



/* Reviews Stats Section */
.reviews-stats-section {
  background-color: var(--color-white);
  padding: 3rem 0;
  border-bottom: 1px solid var(--color-mist);
}

.reviews-summary-card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);
  max-width: 600px;
  margin: 0 auto;
}

.summary-left {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.total-score {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1;
  margin-bottom: 0.15rem;
}

.stars-large {
  color: #F59E0B;
  font-size: 1.5rem;
  letter-spacing: 2px;
  margin-bottom: 0.25rem;
}

.review-count {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.85rem;
}

/* Leave a Review CTA — compact one-line bar */
.leave-review-cta {
  max-width: 620px;
  margin: 1.25rem auto 0;
  padding: 0.7rem 0.75rem 0.7rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: 8px;
}

.leave-review-cta h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.1rem;
}

.leave-review-cta p {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.35;
  margin-bottom: 0;
}

.leave-review-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.55rem 0.9rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Homepage reviews section has almost no bottom padding of its own */
.reviews-section .leave-review-cta {
  margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
  .leave-review-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
  }

  .leave-review-cta .btn {
    justify-content: center;
    /* keep a 44px-minimum tap target on touch */
    padding: 0.8rem 0.9rem;
  }
}

.summary-right {
  flex-grow: 1;
  max-width: 400px;
  width: 100%;
}

.rating-bar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-navy);
  font-weight: 500;
}

.rating-bar-row span:last-child {
  min-width: 3rem;
  text-align: right;
  color: var(--color-text-muted);
}

.rating-bar-bg {
  flex-grow: 1;
  height: 8px;
  background-color: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.rating-bar-fill {
  height: 100%;
  background-color: #CE9732;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .reviews-summary-card {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .summary-right {
    width: 100%;
    max-width: 100%;
  }
}

/* Reviews Page Main Section */
.reviews-page-section {
  padding: 5rem 0;
  background-color: #F8FAFC;
  /* Very light slate */
  background-image:
    radial-gradient(#e2e8f0 1px, transparent 1px),
    radial-gradient(#e2e8f0 1px, transparent 1px);
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
  /* Subtle dot pattern */
}

@media (max-width: 768px) {
  .page-header {
    padding: 4rem 0 3rem;
  }

  .page-header h1 {
    font-size: 2.25rem;
  }

  .page-header p {
    font-size: 1.1rem;
    padding: 0 1rem;
  }
}

@media (min-width: 768px) {

  .reviews-container-wrapper {
    margin: 0;
  }

  .reviews-grid {
    padding: 2rem 0.5rem;
  }
}


/* -------------------------------------------
   TACTICAL QUOTE FLOW (PREMIUM REDESIGN)
------------------------------------------- */

.quote-flow-section {
  background-color: var(--color-white);
  padding: 4rem 0;
  min-height: 80vh;
  /* Subtle Background Pattern */
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.quote-container {
  max-width: 650px;
  /* Slightly wider for better card proportions */
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  transition: max-width 0.5s ease;
  /* Smooth transition when widening */
}

/* Expanded state for Step 2 */
.quote-container.wide-mode {
  max-width: 1200px;
}

/* Header & Typography */
.quote-header {
  text-align: center;
  margin-bottom: 3rem;
}

.mission-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-volt);
  background: rgba(15, 23, 42, 0.95);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mission-badge.success {
  background: var(--color-success);
  color: white;
}

.quote-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-navy);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  text-transform: uppercase;
}

.quote-header p {
  color: var(--color-text-muted);
  font-size: 1.15rem;
  margin-bottom: 0;
  font-weight: 500;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Tactical Form Card */
.tactical-card {
  background: white;
  padding: 3rem;
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
  /* Deep Shadow */
  border: 1px solid rgba(148, 163, 184, 0.2);
  position: relative;
  overflow: hidden;
}

/* Decorative 'Tech' Border on Top */
.tactical-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-navy) 0%, var(--color-volt) 100%);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Input Styles */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 1rem;
  font-size: 1.2rem;
  opacity: 0.5;
  pointer-events: none;
}

.form-group input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  /* Left padding for icon */
  border: 2px solid #E2E8F0;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--color-navy);
  background-color: #F8FAFC;
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  background-color: white;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.05);
}

.form-group input::placeholder {
  color: #CBD5E1;
  font-weight: 400;
}

/* Buttons */
.btn-large {
  padding: 1.25rem;
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 6px -1px rgba(206, 151, 50, 0.3);
  transition: all 0.2s ease;
  width: 100%;
  border: none;
  border-radius: 6px;
}

.btn-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(206, 151, 50, 0.5);
}

.btn-icon {
  font-weight: 800;
  transition: transform 0.2s ease;
}

.btn-large:hover .btn-icon {
  transform: translateX(4px);
}

.micro-copy {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin-top: 1.5rem;
  font-weight: 500;
  opacity: 0.8;
}

/* Selection Grid (Step 2) */
.selection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.tactical-option {
  background: white;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.tactical-option:hover {
  border-color: var(--color-navy);
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.tactical-option.primary {
  border-color: var(--color-volt);
  /* Highlighted border by default */
  background: linear-gradient(to right, #FEFCE8, white);
}

.badge-recommended {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-volt);
  color: var(--color-navy);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-bottom-left-radius: 8px;
  letter-spacing: 0.5px;
}

.option-icon-large {
  font-size: 2.5rem;
  background: #F1F5F9;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.tactical-option.primary .option-icon-large {
  background: rgba(206, 151, 50, 0.2);
}

.option-content h3 {
  font-size: 1.25rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.option-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.btn-fake {
  display: inline-block;
  background: var(--color-navy);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tactical-option.primary .btn-fake {
  background: var(--color-volt);
  color: var(--color-navy);
}

.btn-fake.secondary {
  background: transparent;
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
}

/* Animations */
.fade-in {
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
  }

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

.hidden {
  display: none !important;
}

/* Mission Results Hero Spacing */
.mission-results-hero {
  padding-top: 3.75rem;
  margin-top: 2rem;
}

.mission-results-hero .section-header {
  margin-bottom: 3.75rem;
}

/* Fix visibility for contact page white background */
.mission-results-hero .section-header h2 {
  color: var(--color-navy);
}

.mission-results-hero .section-header p {
  color: var(--color-navy);
}

.mission-results-hero .section-badge {
  color: var(--color-navy);
  border-left-color: var(--color-volt);
  background-color: rgba(0, 0, 0, 0.05);
  /* Slight dark bg for contrast against white */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .quote-flow-section {
    padding: 2rem 0;
  }

  .quote-header {
    margin-bottom: 2rem;
  }

  .quote-header h1 {
    font-size: 1.875rem;
    line-height: 1.2;
    color: var(--color-navy);
  }

  .quote-header p {
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .mission-badge {
    font-size: 0.8125rem;
  }

  .mission-results-hero {
    padding-top: 3rem;
  }



  .tactical-card {
    padding: 1.5rem;
  }

  .form-group label {
    font-size: 0.8125rem;
  }

  .form-group input {
    font-size: 1.0625rem;
    padding: 1.125rem 1rem 1.125rem 3rem;
  }

  .btn-large {
    font-size: 1.125rem;
    padding: 1.125rem;
  }

  .micro-copy {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tactical-option {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
  }

  .option-content h3 {
    font-size: 1.125rem;
    color: var(--color-navy);
  }

  .option-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .selection-grid {
    grid-template-columns: 1fr;
    /* Stack on mobile */
  }
}

/* -------------------------------------------
   Step 2 Layout & Sidebar
------------------------------------------- */

.step-2-layout {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Desktop-only optimizations for Step 2 */
@media (min-width: 769px) {
  .step-2-layout {
    grid-template-columns: 1fr 340px;
    gap: 3rem;
  }

  .selection-grid {
    grid-template-columns: 1fr 1fr;
    /* Side-by-side but wider */
    gap: 2rem;
  }

  .tactical-option {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem;
    height: 100%;
    gap: 1.5rem;
    justify-content: flex-start;
  }

  .option-icon-large {
    width: 90px;
    height: 90px;
    font-size: 3rem;
    margin-bottom: 0.5rem;
  }

  .option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .option-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 800;
  }

  .option-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: var(--color-text-muted);
  }

  .btn-fake {
    font-size: 0.95rem;
    padding: 0.75rem 1.75rem;
    width: 100%;
    justify-content: center;
    margin-top: auto;
  }

  .contact-sidebar {
    padding: 2.5rem;
    height: fit-content;
  }
}

.contact-sidebar {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 100px;
  /* Sticky sidebar */
}

.contact-sidebar h3 {
  font-size: 1.1rem;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 1rem;
}

.sidebar-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.sidebar-contact-list .icon {
  font-size: 1.25rem;
  background: #F8FAFC;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-contact-list .details {
  display: flex;
  flex-direction: column;
}

.sidebar-contact-list .details strong {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.sidebar-contact-list .details a,
.sidebar-contact-list .details span {
  color: var(--color-navy);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.4;
}

.sidebar-contact-list .details a:hover {
  color: var(--color-volt);
  text-decoration: underline;
}

.service-areas-refined {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.area-item {
  display: flex;
  flex-direction: column;
  padding-left: 0.75rem;
  border-left: 2px solid #E2E8F0;
}

.area-name {
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}

.area-detail {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 2px;
}

/* Mobile Adjustments for Step 2 */
@media (max-width: 900px) {
  .step-2-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contact-sidebar {
    position: static;
    order: 2;
    /* Ensure sidebar is below selection on mobile */
  }

  .contact-sidebar h3 {
    font-size: 1.125rem;
    color: var(--color-navy);
  }

  .sidebar-contact-list .details strong {
    font-size: 0.8125rem;
  }

  .sidebar-contact-list .details a,
  .sidebar-contact-list .details span {
    font-size: 1rem;
    line-height: 1.5;
  }

  .area-tags span {
    font-size: 0.8125rem !important;
  }
}

/* About Section Read More (Mobile Only) */
#about-read-more {
  display: none;
}

@media (max-width: 768px) {
  #about-read-more {
    display: inline-block;
    background: none;
    border: none;
    color: var(--color-volt);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-top: 0.5rem;
    font-size: 1rem;
    text-decoration: underline;
  }

  #about-description-full {
    display: none;
  }

  #about-description-full.expanded {
    display: block;
  }
}

/* --- Service Lines Split Section --- */
.service-lines-section {
  background: #FFFFFF;
  padding: 0;
}

.service-lines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.service-line {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5rem 4rem;
}

.epoxy-line {
  background: #F8F4F0;
  border-right: 1px solid rgba(165, 121, 40, 0.15);
}

.polish-line {
  background: #FFF5EF;
}

.service-line-inner {
  max-width: 480px;
}

.service-line-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

.epoxy-line .service-line-badge {
  background: rgba(165, 121, 40, 0.08);
  color: #A57928;
  border: 1px solid rgba(165, 121, 40, 0.25);
}

.polish-line .service-line-badge {
  background: rgba(165, 121, 40, 0.08);
  color: #A57928;
  border: 1px solid rgba(165, 121, 40, 0.25);
}

.service-line h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.service-line p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.service-line-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.service-line-list li {
  color: #333;
  font-size: 0.9rem;
  padding: 0.4rem 0;
  padding-left: 1.4rem;
  position: relative;
}

.service-line-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
}

.epoxy-line h2 {
  color: #040267 !important;
}

.epoxy-line p {
  color: #4b5563 !important;
}

.epoxy-line .service-line-list li {
  color: #374151 !important;
}

.epoxy-line .service-line-list li::before {
  color: #CE9732;
}

.polish-line .service-line-list li::before {
  color: #CE9732;
}

.service-line-btn-outline {
  border: 2px solid rgba(0,0,0,0.2) !important;
  color: #1a1a1a !important;
  background: transparent !important;
}

.service-line-btn-outline:hover {
  border-color: #1a1a1a !important;
  background: rgba(0,0,0,0.04) !important;
}

@media (max-width: 768px) {
  .service-lines-section {
    padding: 0 !important;
    margin: 0 !important;
  }

  .service-lines-grid {
    position: relative;
  }

  .service-lines-dots {
    position: absolute !important;
    bottom: 1rem;
    left: 0;
    right: 0;
    display: flex !important;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10;
  }

  .service-lines-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    min-height: unset;
    padding: 0;
  }

  .service-lines-grid::-webkit-scrollbar {
    display: none;
  }

  .service-line {
    flex: 0 0 100vw;
    width: 100vw;
    scroll-snap-align: start;
    padding: 1.75rem 1.5rem 3rem;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0;
    align-items: flex-start;
    margin-right: 0;
    box-sizing: border-box;
  }

  .service-line-inner {
    max-width: 100%;
  }

  .service-line h2 {
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
  }

  .service-line p {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  .service-line-list {
    margin-bottom: 1.5rem;
  }

  .service-line-list li {
    font-size: 0.85rem;
    padding: 0.3rem 0 0.3rem 1.4rem;
  }

  .epoxy-line {
    border-right: none;
    border-bottom: none;
  }
}

/* Service Lines swipe dots — mobile only */
.service-lines-dots {
  display: none;
}

@media (max-width: 768px) {
  .service-lines-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0.5rem 0 0.4rem;
    margin: 0;
  }

  .sl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.25s, transform 0.25s;
  }

  .sl-dot-active {
    background: #CE9732;
    transform: scale(1.25);
  }
}

/* --- Process System Labels --- */
.process-system-label {
  text-align: center;
  margin-bottom: 2rem;
}

.process-system-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.4rem 1.2rem;
  border-radius: 2px;
}

.epoxy-badge {
  background: rgba(36, 167, 224, 0.12);
  color: #CE9732;
  border: 1px solid rgba(36, 167, 224, 0.35);
}

.polish-badge {
  background: rgba(100, 100, 100, 0.1);
  color: #888;
  border: 1px solid rgba(100, 100, 100, 0.3);
}

/* --- Core Mobile Fixes from Audit --- */
@media (max-width: 480px) {
  .hero-section h1 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  .stat-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.5px !important;
  }

  .mission-results-section .section-header p {
    font-size: 0.9rem !important;
    max-width: 90%;
    margin: 0 auto !important;
  }
}

/* ── MVB System Differentiator ─────────────────────────── */
.mvb-section {
  background: #F8FAFC; /* Light slate/gray background */
  padding: 6rem 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

.mvb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.mvb-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #CE9732;
  margin-bottom: 1.25rem;
  background: rgba(206, 151, 50, 0.1);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
}

.mvb-heading {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #040267;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: -0.5px;
}

.mvb-body {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.mvb-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

.mvb-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: #1E293B;
  font-weight: 500;
  line-height: 1.4;
}

.mvb-list li::before {
  content: '';
  display: inline-flex;
  width: 24px;
  height: 24px;
  min-width: 24px;
  background-color: #E0E7FF; /* Light indigo/blue */
  border-radius: 6px; /* Soft square */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23040267' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.mvb-trust-quote {
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #CE9732;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.mvb-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.mvb-btn-outline {
  background: #ffffff !important;
  border: 1px solid #CBD5E1 !important;
  color: #040267 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.mvb-btn-outline:hover {
  border-color: #94A3B8 !important;
  background: #F1F5F9 !important;
}

.mvb-image-wrap {
  position: relative;
  border-radius: 16px;
  border: 8px solid #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  aspect-ratio: 4/4;
}

.mvb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* MVB mobile */
@media (max-width: 900px) {
  .mvb-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .mvb-image-wrap {
    /* Natural source order (below text) makes more sense for mobile reading flow */
    order: 0;
    aspect-ratio: 4/3;
  }
  .mvb-section {
    padding: 4rem 0;
  }
  .mvb-list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .mvb-section {
    padding: 3rem 0;
  }
  .mvb-heading { 
    font-size: 1.65rem; 
    margin-bottom: 1rem;
  }
  .mvb-body {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  .mvb-list {
    margin-bottom: 1.5rem;
  }
  .mvb-trust-quote {
    padding: 1rem;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }
  .mvb-image-wrap {
    border-width: 4px;
    border-radius: 12px;
  }
  .mvb-ctas { 
    flex-direction: column; 
    gap: 0.75rem;
  }
  .mvb-ctas .btn { 
    width: 100%; 
    text-align: center; 
  }
}

/* ── Service lines light theme fix ─────────────────────── */
/* Note: service-lines-grid becomes a flex carousel on mobile (see above),
   so grid-template-columns has no effect; border/padding overrides removed. */

/* ── Financing Section ─────────────────────────────────── */
.financing-section {
  background-color: #040267;
  padding: 4rem 0;
  border-top: 1px solid rgba(206, 151, 50, 0.15);
  border-bottom: 1px solid rgba(206, 151, 50, 0.15);
}

.financing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.financing-card {
  background-color: #2A1F14;
  border: 1px solid rgba(206, 151, 50, 0.2);
  border-radius: 12px;
  padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.financing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(206, 151, 50, 0.15);
}

.financing-plan-badge {
  display: inline-block;
  background: var(--color-volt);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.financing-plan-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.financing-plan-desc {
  color: #BDBDBD;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.financing-plan-apr {
  color: #CE9732;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.financing-examples {
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 1.25rem;
}

.financing-examples h4 {
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.financing-examples ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.financing-examples li {
  color: #BDBDBD;
  font-size: 0.9rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.financing-examples li:last-child {
  border-bottom: none;
}

.financing-examples li strong {
  color: white;
  font-weight: 600;
}

.financing-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2rem 0 1.5rem;
}

.financing-disclaimer {
  text-align: center;
  color: #6B7280;
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .financing-section {
    padding: 3rem 0;
  }

  .financing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
  }

  .financing-cta {
    flex-direction: column;
  }

  .financing-cta .btn {
    width: 100%;
    text-align: center;
  }
}